next/components/story/atoms/bands.vue

<script setup lang="ts">
	import { DefaultOptionType } from "ant-design-vue/es/select";
	import { RuleExpression, useField } from "vee-validate";
	import { cs } from "@client/storyFormSchema";
	import { IBand } from "@models/band";

	const bandlist = inject<IBand[]>("bandlist");
	const fname = inject<string>("curName");
	const { updateBands, sb } = inject<any>("selectedBands");

	const bl = ref(bandlist || []);
	const options: DefaultOptionType[] = bl.value
		.filter((a) => a.name != "")
		.map((a) => ({
			value: a._id,
			label: a.name,
			disabled: a.locked || false,
		}));
	let bandField = useField(fname + "bands", cs.fields.bands as unknown as MaybeRef<RuleExpression<number[]>>);
	const { value, errorMessage, name, setValue } = bandField;
	// setValue(sb)
</script>

<template>
	<a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :help="errorMessage as any" label="Bands">
		<a-select
			v-bind="$attrs"
			:allow-clear="true"
			mode="multiple"
			option-filter-prop="label"
			@change="
				(val) => {
					// log.debug(val);
					updateBands(val);
					setValue(val as number[]);
				}
			"
			v-model:value="value"
			:options="options"
		>
			<template #removeIcon>
				<i class="far fa-circle-x" />
			</template>
		</a-select>
	</a-form-item>
</template>