Browse Source

refactor(gui): render ant select component only when cell is active or in editable state

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5392/head
Pranav C 2 years ago
parent
commit
86b729ad7e
  1. 24
      packages/nc-gui/components/cell/MultiSelect.vue
  2. 25
      packages/nc-gui/components/cell/SingleSelect.vue

24
packages/nc-gui/components/cell/MultiSelect.vue

@ -313,11 +313,35 @@ const handleClose = (e: MouseEvent) => {
} }
useEventListener(document, 'click', handleClose, true) useEventListener(document, 'click', handleClose, true)
// todo: maintain order
const selectedOpts = computed(() => {
return options.value.filter((o) => vModel.value.includes(o.value!))
})
</script> </script>
<template> <template>
<div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu"> <div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
<div v-if="!editable && !active" class="flex flex-nowrap">
<template v-for="selectedOpt of selectedOpts" :key="selectedOpt.value">
<a-tag class="rounded-tag" :color="selectedOpt.color">
<span
:style="{
'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
? '#fff'
: tinycolor.mostReadable(selectedOpt.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
'font-size': '13px',
}"
:class="{ 'text-sm': isKanban }"
>
{{ selectedOpt.title }}
</span>
</a-tag>
</template>
</div>
<a-select <a-select
v-else
ref="aselect" ref="aselect"
v-model:value="vModel" v-model:value="vModel"
mode="multiple" mode="multiple"

25
packages/nc-gui/components/cell/SingleSelect.vue

@ -242,11 +242,36 @@ const handleClose = (e: MouseEvent) => {
} }
useEventListener(document, 'click', handleClose, true) useEventListener(document, 'click', handleClose, true)
const selectedOpt = computed(() => {
return options.value.find((o) => o.value === vModel.value)
})
onMounted(() => {
console.log('mounted')
})
</script> </script>
<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">
<a-tag v-if="selectedOpt" class="rounded-tag" :color="selectedOpt.color">
<span
:style="{
'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
? '#fff'
: tinycolor.mostReadable(selectedOpt.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
'font-size': '13px',
}"
:class="{ 'text-sm': isKanban }"
>
{{ selectedOpt.title }}
</span>
</a-tag>
</div>
<a-select <a-select
v-else
ref="aselect" ref="aselect"
v-model:value="vModel" v-model:value="vModel"
class="w-full overflow-hidden" class="w-full overflow-hidden"

Loading…
Cancel
Save