mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.5 KiB
55 lines
1.5 KiB
<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<{ |
|
style?: StyleValue |
|
}>() |
|
|
|
defineOptions({ |
|
inheritAttrs: false, |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div class="w-full" :style="style"> |
|
<a-menu-item v-bind="$attrs" 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: 1.5; |
|
} |
|
|
|
@apply flex flex-row items-center; |
|
} |
|
|
|
.nc-menu-item::after { |
|
background: none; |
|
} |
|
</style>
|
|
|