mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.0 KiB
78 lines
2.0 KiB
<script lang="ts" setup> |
|
import { computed, inject } from '#imports' |
|
import { ColumnInj, EditModeInj } from '~/context' |
|
|
|
interface Props { |
|
modelValue: string |
|
} |
|
|
|
const { modelValue } = defineProps<Props>() |
|
|
|
const emit = defineEmits(['update:modelValue']) |
|
|
|
const column = inject(ColumnInj) |
|
const isForm = inject<boolean>('isForm', false) |
|
const editEnabled = inject(EditModeInj, ref(false)) |
|
|
|
const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || []) |
|
|
|
const localState = computed({ |
|
get() { |
|
return modelValue?.match(/(?:[^',]|\\')+(?='?(?:,|$))/g)?.map((v: string) => v.replace(/\\'/g, "'")) |
|
}, |
|
set(val?: string[]) { |
|
emit('update:modelValue', val?.filter((v) => options.value.includes(v)).join(',')) |
|
}, |
|
}) |
|
</script> |
|
|
|
<template> |
|
<!-- |
|
<v-select |
|
v-model="localState" |
|
:items="options" |
|
hide-details |
|
:clearable="!column.rqd" |
|
variation="outlined" |
|
multiple |
|
/> |
|
--> |
|
|
|
<v-combobox |
|
v-model="localState" |
|
:items="options" |
|
multiple |
|
chips |
|
flat |
|
dense |
|
solo |
|
hide-details |
|
deletable-chips |
|
class="text-center mt-0" |
|
> |
|
<!-- <template #selection="data"> --> |
|
<!-- <v-chip --> |
|
<!-- :key="data.item" --> |
|
<!-- small --> |
|
<!-- class="ma-1 " --> |
|
<!-- :color="colors[setValues.indexOf(data.item) % colors.length]" --> |
|
<!-- @click:close="data.parent.selectItem(data.item)" --> |
|
<!-- > --> |
|
<!-- {{ data.item }} --> |
|
<!-- </v-chip> --> |
|
<!-- </template> --> |
|
|
|
<!-- <template #item="{item}"> --> |
|
<!-- <v-chip small :color="colors[setValues.indexOf(item) % colors.length]"> --> |
|
<!-- {{ item }} --> |
|
<!-- </v-chip> --> |
|
<!-- </template> --> |
|
<!-- <template #append> --> |
|
<!-- <v-icon small class="mt-2"> --> |
|
<!-- mdi-menu-down --> |
|
<!-- </v-icon> --> |
|
<!-- </template> --> |
|
</v-combobox> |
|
</template> |
|
|
|
<style scoped></style>
|
|
|