Browse Source

fix(gui): trigger dropdown on clicking anywhere in the cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4957/head
Pranav C 2 years ago
parent
commit
493c7e7b33
  1. 29
      packages/nc-gui/components/cell/MultiSelect.vue
  2. 8
      packages/nc-gui/components/smartsheet/TableDataCell.vue
  3. 1
      packages/nc-gui/context/index.ts

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

@ -1,10 +1,12 @@
<script lang="ts" setup>
import { onUnmounted } from '@vue/runtime-core'
import { message } from 'ant-design-vue'
import tinycolor from 'tinycolor2'
import type { Select as AntSelect } from 'ant-design-vue'
import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'
import {
ActiveCellInj,
CellClickHookInj,
ColumnInj,
IsKanbanInj,
ReadonlyInj,
@ -16,7 +18,6 @@ import {
onMounted,
reactive,
ref,
useEventListener,
useMetas,
useProject,
useRoles,
@ -144,8 +145,6 @@ onMounted(() => {
})
})
useEventListener(document, 'click', handleClose)
watch(
() => modelValue,
() => {
@ -273,14 +272,28 @@ const onTagClick = (e: Event, onClose: Function) => {
onClose()
}
}
const cellClickHook = inject(CellClickHookInj)
const toggleMenu = () => {
if (cellClickHook) return
isOpen.value = editAllowed.value && !isOpen.value
}
const cellClickHookHandler = () => {
isOpen.value = editAllowed.value && !isOpen.value
}
onMounted(() => {
cellClickHook?.on(cellClickHookHandler)
})
onUnmounted(() => {
cellClickHook?.on(cellClickHookHandler)
})
</script>
<template>
<div
class="nc-multi-select h-full w-full flex items-center"
:class="{ 'read-only': readOnly }"
@click="isOpen = editAllowed && !isOpen"
>
<div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
<a-select
ref="aselect"
v-model:value="vModel"

8
packages/nc-gui/components/smartsheet/TableDataCell.vue

@ -1,10 +1,14 @@
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports'
import { CellClickHookInj, createEventHook, onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports'
const { cellRefs } = useSmartsheetStoreOrThrow()
const el = ref<HTMLTableDataCellElement>()
const cellClickHook = createEventHook()
provide(CellClickHookInj, cellClickHook)
onMounted(() => {
cellRefs.value.push(el.value!)
})
@ -18,7 +22,7 @@ onBeforeUnmount(() => {
</script>
<template>
<td ref="el">
<td ref="el" @click="cellClickHook.trigger($event)">
<slot />
</td>
</template>

1
packages/nc-gui/context/index.ts

@ -32,3 +32,4 @@ export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('s
export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')
export const DropZoneRef: InjectionKey<Ref<Element | undefined>> = Symbol('drop-zone-ref')
export const ToggleDialogInj: InjectionKey<Function> = Symbol('toggle-dialog-injection')
export const CellClickHookInj: InjectionKey<EventHook<MouseEvent> | undefined> = Symbol('cell-click-injection')

Loading…
Cancel
Save