|
|
@ -42,8 +42,6 @@ const readOnly = inject(ReadonlyInj)! |
|
|
|
|
|
|
|
|
|
|
|
const active = inject(ActiveCellInj, ref(false)) |
|
|
|
const active = inject(ActiveCellInj, ref(false)) |
|
|
|
|
|
|
|
|
|
|
|
const editable = inject(EditModeInj, ref(false)) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const aselect = ref<typeof AntSelect>() |
|
|
|
const aselect = ref<typeof AntSelect>() |
|
|
|
|
|
|
|
|
|
|
|
const isOpen = ref(false) |
|
|
|
const isOpen = ref(false) |
|
|
@ -92,7 +90,7 @@ const isOptionMissing = computed(() => { |
|
|
|
|
|
|
|
|
|
|
|
const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true)) |
|
|
|
const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true)) |
|
|
|
|
|
|
|
|
|
|
|
const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || editable.value)) |
|
|
|
const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && active.value) |
|
|
|
|
|
|
|
|
|
|
|
const vModel = computed({ |
|
|
|
const vModel = computed({ |
|
|
|
get: () => tempSelectedOptState.value ?? modelValue, |
|
|
|
get: () => tempSelectedOptState.value ?? modelValue, |
|
|
@ -200,7 +198,7 @@ const search = () => { |
|
|
|
|
|
|
|
|
|
|
|
// prevent propagation of keydown event if select is open |
|
|
|
// prevent propagation of keydown event if select is open |
|
|
|
const onKeydown = (e: KeyboardEvent) => { |
|
|
|
const onKeydown = (e: KeyboardEvent) => { |
|
|
|
if (isOpen.value && (active.value || editable.value)) { |
|
|
|
if (isOpen.value && active.value) { |
|
|
|
e.stopPropagation() |
|
|
|
e.stopPropagation() |
|
|
|
} |
|
|
|
} |
|
|
|
if (e.key === 'Enter') { |
|
|
|
if (e.key === 'Enter') { |
|
|
@ -253,7 +251,7 @@ const selectedOpt = computed(() => { |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="h-full w-full flex items-center nc-single-select" :class="{ 'read-only': readOnly }" @click="toggleMenu"> |
|
|
|
<div class="h-full w-full flex items-center nc-single-select" :class="{ 'read-only': readOnly }" @click="toggleMenu"> |
|
|
|
<div v-if="!editable && !active"> |
|
|
|
<div v-if="!active"> |
|
|
|
<a-tag v-if="selectedOpt" class="rounded-tag" :color="selectedOpt.color"> |
|
|
|
<a-tag v-if="selectedOpt" class="rounded-tag" :color="selectedOpt.color"> |
|
|
|
<span |
|
|
|
<span |
|
|
|
:style="{ |
|
|
|
:style="{ |
|
|
@ -279,9 +277,9 @@ const selectedOpt = computed(() => { |
|
|
|
:bordered="false" |
|
|
|
:bordered="false" |
|
|
|
:open="isOpen && editAllowed" |
|
|
|
:open="isOpen && editAllowed" |
|
|
|
:disabled="readOnly || !editAllowed" |
|
|
|
:disabled="readOnly || !editAllowed" |
|
|
|
:show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel === null))" |
|
|
|
:show-arrow="hasEditRoles && !readOnly && active && vModel === null" |
|
|
|
:dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && (active || editable) ? 'active' : ''}`" |
|
|
|
:dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && active ? 'active' : ''}`" |
|
|
|
:show-search="isOpen && (active || editable)" |
|
|
|
:show-search="isOpen && active" |
|
|
|
@select="onSelect" |
|
|
|
@select="onSelect" |
|
|
|
@keydown="onKeydown($event)" |
|
|
|
@keydown="onKeydown($event)" |
|
|
|
@search="search" |
|
|
|
@search="search" |
|
|
|