script[setup]: select-multiple-dropdown (#18431)

app/src/interfaces/select-multiple-dropdown/select-multiple-dropdown.vue

@@ -21,65 +21,42 @@
 	</v-select>
 </template>
 
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, PropType } from 'vue';
+<script setup lang="ts">
 import { sortBy } from 'lodash';
+import { useI18n } from 'vue-i18n';
 
 type Option = {
 	text: string;
 	value: string | number | boolean;
 };
 
-export default defineComponent({
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		value: {
-			type: Array as PropType<string[]>,
-			default: null,
-		},
-		choices: {
-			type: Array as PropType<Option[]>,
-			default: null,
-		},
-		icon: {
-			type: String,
-			default: null,
-		},
-		allowNone: {
-			type: Boolean,
-			default: false,
-		},
-		placeholder: {
-			type: String,
-			default: null,
-		},
-		allowOther: {
-			type: Boolean,
-			default: false,
-		},
-		previewThreshold: {
-			type: Number,
-			default: 3,
-		},
-	},
-	emits: ['input'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
+const props = withDefaults(
+	defineProps<{
+		value?: string[];
+		disabled?: boolean;
+		choices?: Option[];
+		icon?: string;
 
-		return { t, updateValue };
+		allowNone?: boolean;
+		placeholder?: string;
+		allowOther?: boolean;
+		previewThreshold?: number;
+	}>(),
+	{
+		previewThreshold: 3,
+	}
+);
 
-		function updateValue(value: PropType<string[]>) {
-			const sortedValue = sortBy(value, (val) => {
-				const sortIndex = props.choices.findIndex((choice) => val === choice.value);
-				return sortIndex !== -1 ? sortIndex : value.length;
-			});
+const emit = defineEmits(['input']);
 
-			emit('input', sortedValue);
-		}
-	},
-});
+const { t } = useI18n();
+
+function updateValue(value: string[]) {
+	const sortedValue = sortBy(value, (val) => {
+		const sortIndex = props.choices.findIndex((choice) => val === choice.value);
+		return sortIndex !== -1 ? sortIndex : value.length;
+	});
+
+	emit('input', sortedValue);
+}
 </script>