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

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

@ -1,10 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports' import { CellClickHookInj, createEventHook, onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports'
const { cellRefs } = useSmartsheetStoreOrThrow() const { cellRefs } = useSmartsheetStoreOrThrow()
const el = ref<HTMLTableDataCellElement>() const el = ref<HTMLTableDataCellElement>()
const cellClickHook = createEventHook()
provide(CellClickHookInj, cellClickHook)
onMounted(() => { onMounted(() => {
cellRefs.value.push(el.value!) cellRefs.value.push(el.value!)
}) })
@ -18,7 +22,7 @@ onBeforeUnmount(() => {
</script> </script>
<template> <template>
<td ref="el"> <td ref="el" @click="cellClickHook.trigger($event)">
<slot /> <slot />
</td> </td>
</template> </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 CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')
export const DropZoneRef: InjectionKey<Ref<Element | undefined>> = Symbol('drop-zone-ref') export const DropZoneRef: InjectionKey<Ref<Element | undefined>> = Symbol('drop-zone-ref')
export const ToggleDialogInj: InjectionKey<Function> = Symbol('toggle-dialog-injection') export const ToggleDialogInj: InjectionKey<Function> = Symbol('toggle-dialog-injection')
export const CellClickHookInj: InjectionKey<EventHook<MouseEvent> | undefined> = Symbol('cell-click-injection')

Loading…
Cancel
Save