replace some el-select with Select component

src/components/ui/tags-input/TagsInput.vue

@@ -0,0 +1,47 @@
+<script setup>
+    import { TagsInputRoot, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        modelValue: { type: [Array, null], required: false },
+        defaultValue: { type: Array, required: false },
+        addOnPaste: { type: Boolean, required: false },
+        addOnTab: { type: Boolean, required: false },
+        addOnBlur: { type: Boolean, required: false },
+        duplicate: { type: Boolean, required: false },
+        disabled: { type: Boolean, required: false },
+        delimiter: { type: null, required: false },
+        dir: { type: String, required: false },
+        max: { type: Number, required: false },
+        id: { type: String, required: false },
+        convertValue: { type: Function, required: false },
+        displayValue: { type: Function, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits(['update:modelValue', 'invalid', 'addTag', 'removeTag']);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <TagsInputRoot
+        v-slot="slotProps"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
+                'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+                'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+                props.class
+            )
+        ">
+        <slot v-bind="slotProps" />
+    </TagsInputRoot>
+</template>

src/components/ui/tags-input/TagsInputInput.vue

@@ -0,0 +1,24 @@
+<script setup>
+    import { TagsInputInput, useForwardProps } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        placeholder: { type: String, required: false },
+        autoFocus: { type: Boolean, required: false },
+        maxLength: { type: Number, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <TagsInputInput
+        v-bind="forwardedProps"
+        :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>

src/components/ui/tags-input/TagsInputItem.vue

@@ -0,0 +1,30 @@
+<script setup>
+    import { TagsInputItem, useForwardProps } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        value: { type: null, required: true },
+        disabled: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <TagsInputItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background',
+                props.class
+            )
+        ">
+        <slot />
+    </TagsInputItem>
+</template>

src/components/ui/tags-input/TagsInputItemDelete.vue

@@ -0,0 +1,24 @@
+<script setup>
+    import { TagsInputItemDelete, useForwardProps } from 'reka-ui';
+    import { X } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+        <slot>
+            <X class="w-4 h-4" />
+        </slot>
+    </TagsInputItemDelete>
+</template>

src/components/ui/tags-input/TagsInputItemText.vue

@@ -0,0 +1,19 @@
+<script setup>
+    import { TagsInputItemText, useForwardProps } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>

src/components/ui/tags-input/index.js

@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue';
+export { default as TagsInputInput } from './TagsInputInput.vue';
+export { default as TagsInputItem } from './TagsInputItem.vue';
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue';
+export { default as TagsInputItemText } from './TagsInputItemText.vue';