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> |
<script lang="ts" setup> |
||||||
|
import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js' |
||||||
import { computed, inject } from '#imports' |
import { computed, inject } from '#imports' |
||||||
import { ColumnInj } from '~/context' |
import { ColumnInj } from '~/context' |
||||||
|
|
||||||
interface Props { |
interface Props { |
||||||
modelValue: string | null |
modelValue: string | string[] | undefined |
||||||
} |
} |
||||||
|
|
||||||
const { modelValue } = defineProps<Props>() |
const { modelValue } = defineProps<Props>() |
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue']) |
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const { isMysql } = useProject() |
||||||
|
|
||||||
const column = inject(ColumnInj) |
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({ |
const vModel = computed({ |
||||||
get() { |
get: () => |
||||||
return modelValue?.match(/(?:[^',]|\\')+(?='?(?:,|$))/g)?.map((v: string) => v.replace(/\\'/g, "'")) |
modelValue |
||||||
}, |
? typeof modelValue === 'string' |
||||||
set(val?: string[]) { |
? isMysql |
||||||
emit('update:modelValue', val?.filter((v) => options.value.includes(v)).join(',')) |
? 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> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<!-- |
<a-select |
||||||
<v-select |
v-model:value="vModel" |
||||||
v-model="localState" |
mode="multiple" |
||||||
:items="options" |
class="w-full" |
||||||
hide-details |
placeholder="Select an option" |
||||||
:clearable="!column.rqd" |
:bordered="false" |
||||||
variation="outlined" |
show-arrow |
||||||
multiple |
:show-search="false" |
||||||
/> |
|
||||||
--> |
|
||||||
|
|
||||||
<v-combobox |
|
||||||
v-model="localState" |
|
||||||
:items="options" |
|
||||||
multiple |
|
||||||
chips |
|
||||||
flat |
|
||||||
dense |
|
||||||
solo |
|
||||||
hide-details |
|
||||||
deletable-chips |
|
||||||
class="text-center mt-0" |
|
||||||
> |
> |
||||||
<!-- <template #selection="data"> --> |
<a-select-option v-for="op of options" :key="op.title" style="cursor: pointer"> |
||||||
<!-- <v-chip --> |
<a-tag :color="op.color"> |
||||||
<!-- :key="data.item" --> |
<span class="text-slate-500">{{ op.title }}</span> |
||||||
<!-- small --> |
</a-tag> |
||||||
<!-- class="ma-1 " --> |
</a-select-option> |
||||||
<!-- :color="colors[setValues.indexOf(data.item) % colors.length]" --> |
<template #tagRender="{ value: val, label, onClose }"> |
||||||
<!-- @click:close="data.parent.selectItem(data.item)" --> |
<a-tag :color="label[0].props.color" :closable="true" @close="onClose"> |
||||||
<!-- > --> |
<span class="text-slate-500">{{ val }}</span> |
||||||
<!-- {{ data.item }} --> |
</a-tag> |
||||||
<!-- </v-chip> --> |
</template> |
||||||
<!-- </template> --> |
</a-select> |
||||||
|
|
||||||
<!-- <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> |
</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