Files
nocodb/packages/nc-gui/components/nc/Menu/Item.vue
Mert E. c2f50efbb9 feat: data reflection preps (#10227)
* feat: integration hooks

* feat: data reflection

* feat: improved UX for data reflection

* chore: lint

* fix(nc-gui): update nocodb integration ui

* fix(nocodb): type error

* fix(nc-gui): nocodb integration icon and modal gap issue

* fix: defer integration hooks

* fix: check proper state

* refactor(nc-gui): integration modal

* refactor(nc-gui): integration modal ui changes

* refactor: change default port

* fix(nc-gui): add base id copy input

* fix(nc-gui): schema dropdown placement and item height issue

* fix(nc-gui): nocodb connection bg color issue

* fix(nc-gui): update nocodb integration count and user logo

* fix: rspack keep class

* feat: get connection menu item

* chore: rebase issue

* fix: hide nc from sources

* feat: move data reflection to model level

* fix: remove deprecated fn & fix type errors

* feat: reflection settings

* feat: feature flag for data reflection

* refactor: avoid save on feature flags

* fix: properly show host

* fix: PR requested changes

* fix: use named parameters for queries

---------

Co-authored-by: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
2025-01-14 14:59:45 +03:00

58 lines
1.6 KiB
Vue

<script setup lang="ts">
/**
* ## Known Issue and Fix
* - **Issue**: When conditionally rendering `NcMenuItem` using `v-if` without a corresponding `v-else` fallback,
* Vue may throw a
* `NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`.
*
* - This issue occurs specifically when the `NcMenu` is open, and the condition changes dynamically (e.g., during runtime state changes)
*
* - **Fix**: Use `v-show` instead of `v-if` when no replacement (fallback) node is provided. This keeps the element
* in the DOM but toggles its visibility, preventing the DOM manipulation issue.
*/
import type { StyleValue } from '@vue/runtime-dom'
defineProps<{
mKey?: string
style?: StyleValue
disabled?: boolean | number
}>()
defineOptions({
inheritAttrs: false,
})
</script>
<template>
<div class="w-full" :style="style">
<a-menu-item :key="mKey" v-bind="$attrs" :disabled="Boolean(disabled)" class="nc-menu-item">
<div class="nc-menu-item-inner">
<slot />
</div>
</a-menu-item>
</div>
</template>
<style lang="scss">
.ant-dropdown-menu-item.nc-menu-item {
@apply p-2 mx-1.5 font-normal text-sm xs:(text-base py-3 px-3.5 mx-0) rounded-md overflow-hidden hover:bg-gray-100;
}
.nc-menu-item-inner {
@apply flex flex-row items-center gap-x-2 text-sm;
}
.nc-menu-item > .ant-dropdown-menu-title-content {
// Not Icon
:not(.nc-icon):not(.material-symbols) {
line-height: 20px;
}
@apply flex flex-row items-center;
}
.nc-menu-item::after {
background: none;
}
</style>