☙◦ The Tablet ❀ GamerGirlandCo ◦❧
3afcd2b602
- add data-testid attr - change placement of menu popup - allow selection clearing
50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import { Field, useFieldArray } from "vee-validate";
|
|
import { IBand } from "@models/band";
|
|
|
|
const { sb: selectedBands } = inject<any>("selectedBands");
|
|
const allBands = inject<Ref<IBand[]>>("bandlist");
|
|
const fname = inject<string>("curName");
|
|
const opts = computed(() => {
|
|
const uf: any[] = [];
|
|
selectedBands.value.forEach((v: number) => {
|
|
uf.push(allBands?.value.find((a) => a._id == v)?.characters ?? []);
|
|
});
|
|
return uf.flat(Infinity).map((a) => ({ value: a, label: a }));
|
|
});
|
|
const { fields, push, remove, replace, update } = useFieldArray<string[]>(fname + "relationships");
|
|
// replace([]);
|
|
</script>
|
|
<template>
|
|
<a-form-item label="Pairings">
|
|
<a-row :gutter="5" :wrap="true" v-for="(field, idx) in fields" :key="field.key">
|
|
<Field :name="fname + 'relationships' + `[${idx}]`">
|
|
<a-select
|
|
mode="multiple"
|
|
placement="topLeft"
|
|
:data-testid="`${$attrs['data-testid']}.${idx}`"
|
|
:options="opts"
|
|
v-model:value="field.value as string[]"
|
|
@change="(val) => update(idx, val as string[])"
|
|
:allow-clear="true"
|
|
>
|
|
<template #removeIcon>
|
|
<i class="far fa-circle-x" />
|
|
</template>
|
|
<template #menuItemSelectedIcon>
|
|
<icon istyle="regular" name="circle-check" />
|
|
</template>
|
|
</a-select>
|
|
</Field>
|
|
<a-col :span="4">
|
|
<a-button :data-testid="`${$attrs['data-testid']}.${idx}.remove`" @click="(e) => remove(idx)"> - </a-button>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row justify="end">
|
|
<a-col :span="2">
|
|
<a-button :data-testid="`${$attrs['data-testid']}.add`" @click="(e) => push([])"> + </a-button>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form-item>
|
|
</template>
|