mirror of https://github.com/nocodb/nocodb
mertmit
2 years ago
5 changed files with 135 additions and 118 deletions
@ -1,76 +1,97 @@
|
||||
<script lang="ts" setup> |
||||
import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js' |
||||
import { computed, inject } from '#imports' |
||||
import { ColumnInj } from '~/context' |
||||
|
||||
interface Props { |
||||
modelValue: string | null |
||||
modelValue: string | string[] | undefined |
||||
} |
||||
|
||||
const { modelValue } = defineProps<Props>() |
||||
|
||||
const emit = defineEmits(['update:modelValue']) |
||||
|
||||
const { isMysql } = useProject() |
||||
|
||||
const column = inject(ColumnInj) |
||||
|
||||
const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || []) |
||||
const options = computed(() => { |
||||
if (column?.colOptions) { |
||||
const opts = column.colOptions ? column.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || [] : [] |
||||
for (const op of opts.filter((el: SelectOptionType) => el.order === null)) { |
||||
op.title = op.title.replace(/^'/, '').replace(/'$/, '') |
||||
} |
||||
return opts |
||||
} |
||||
return [] |
||||
}) |
||||
|
||||
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(',')) |
||||
}, |
||||
const vModel = computed({ |
||||
get: () => |
||||
modelValue |
||||
? typeof modelValue === 'string' |
||||
? isMysql |
||||
? modelValue.split(',').sort((a, b) => { |
||||
const opa = options.value.find((el: SelectOptionType) => el.title === a) |
||||
const opb = options.value.find((el: SelectOptionType) => el.title === b) |
||||
return opa.order - opb.order |
||||
}) |
||||
: modelValue.split(',') |
||||
: modelValue |
||||
: [], |
||||
set: (val) => emit('update:modelValue', val.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" |
||||
<a-select |
||||
v-model:value="vModel" |
||||
mode="multiple" |
||||
class="w-full" |
||||
placeholder="Select an option" |
||||
:bordered="false" |
||||
show-arrow |
||||
:show-search="false" |
||||
> |
||||
<!-- <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> |
||||
<a-select-option v-for="op of options" :key="op.title" style="cursor: pointer"> |
||||
<a-tag :color="op.color"> |
||||
<span class="text-slate-500">{{ op.title }}</span> |
||||
</a-tag> |
||||
</a-select-option> |
||||
<template #tagRender="{ value: val, label, onClose }"> |
||||
<a-tag :color="label[0].props.color" :closable="true" @close="onClose"> |
||||
<span class="text-slate-500">{{ val }}</span> |
||||
</a-tag> |
||||
</template> |
||||
</a-select> |
||||
</template> |
||||
|
||||
<style scoped></style> |
||||
<style scoped> |
||||
:deep(.ant-tag-close-icon) { |
||||
@apply "text-slate-500"; |
||||
} |
||||
</style> |
||||
<!-- |
||||
/** |
||||
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
||||
* |
||||
* @author Naveen MR <oof1lab@gmail.com> |
||||
* @author Pranav C Balan <pranavxc@gmail.com> |
||||
* |
||||
* @license GNU AGPL version 3 or any later version |
||||
* |
||||
* This program is free software: you can redistribute it and/or modify |
||||
* it under the terms of the GNU Affero General Public License as |
||||
* published by the Free Software Foundation, either version 3 of the |
||||
* License, or (at your option) any later version. |
||||
* |
||||
* This program is distributed in the hope that it will be useful, |
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
* GNU Affero General Public License for more details. |
||||
* |
||||
* You should have received a copy of the GNU Affero General Public License |
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
* |
||||
*/ |
||||
--> |
||||
|
||||
Loading…
Reference in new issue