defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor SelectMulti component

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-03-31 01:33:24 +07:00
parent f2dd2af2bb
commit cd969806dd
1 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/SelectMulti.vue
View File

@ -1,11 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'
import { ref } from 'vue'; import { TagsInput } from '@flavorly/vanilla-components'
import { TagsInput } from '@flavorly/vanilla-components';
// import Multiselect from '@vueform/multiselect'; // import Multiselect from '@vueform/multiselect';
interface Tags { interface Tags {
id: number id: number
value: string, value: string
label: string label: string
} }
@ -28,18 +27,28 @@ const props = defineProps({
} }
}) })
const emit = defineEmits(['update:tags'])
const allowed = ref(props.tags.map((tag) => tag.label)) const allowed = ref(props.tags.map((tag) => tag.label))
const tags = ref<string[]>([]) const tags = ref<string[]>([])
const updateTags = (value: string[]) => { const updateTags = (value: string[]) => {
tags.value = value tags.value = value
emit('update:tags', value)
} }
</script> </script>
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<TagsInput v-model="tags" :placeholder="tags.length == 0 ? placeholder : props.label" :allowed-options="allowed" <TagsInput
valueAttribute="id" textAttribute="label" :enabled="false" @update:modelValue="updateTags" /> v-model="tags"
:placeholder="tags.length == 0 ? placeholder : props.label"
:allowed-options="allowed"
valueAttribute="id"
textAttribute="label"
:enabled="false"
@update:modelValue="updateTags"
/>
<!-- <Multiselect mode="tags" :placeholder="placeholder" :close-on-select="false" :searchable="true" <!-- <Multiselect mode="tags" :placeholder="placeholder" :close-on-select="false" :searchable="true"
:create-option="true" :options="props.tags" :classes="{ :create-option="true" :options="props.tags" :classes="{