fix(nc-gui): runtime directive warnings in TableNode.vue

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -167,21 +167,19 @@ const isTableOpened = computed(() => {
         @click="onOpenTable"
       >
         <div class="flex flex-row h-full items-center">
-          <NcButton
-            v-e="['c:table:toggle-expand']"
-            type="text"
-            size="xxsmall"
-            class="nc-sidebar-node-btn nc-sidebar-expand"
-            @click.stop="onExpand"
-          >
+          <div v-e="['c:table:toggle-expand']">
+            <NcButton type="text" size="xxsmall" class="nc-sidebar-node-btn nc-sidebar-expand" @click.stop="onExpand">
               <GeneralIcon
                 icon="triangleFill"
                 class="nc-sidebar-source-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"
                 :class="{ '!rotate-180': isExpanded }"
               />
             </NcButton>
+          </div>
+
           <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
             <div
+              v-e="['c:table:emoji-picker']"
               class="flex items-center nc-table-icon"
               :class="{
                 'pointer-events-none': !canUserEditEmote,
@@ -190,7 +188,6 @@ const isTableOpened = computed(() => {
             >
               <LazyGeneralEmojiPicker
                 :key="table.meta?.icon"
-                v-e="['c:table:emoji-picker']"
                 :emoji="table.meta?.icon"
                 size="small"
                 :readonly="!canUserEditEmote || isMobileMode"
@@ -239,16 +236,14 @@ const isTableOpened = computed(() => {
         </span>
         <div class="flex flex-grow h-full"></div>
         <div class="flex flex-row items-center">
-          <NcDropdown
+          <div
             v-if="
               !isSharedBase &&
               (isUIAllowed('tableRename', { roles: baseRole }) || isUIAllowed('tableDelete', { roles: baseRole }))
             "
             v-e="['c:table:option']"
-            :trigger="['click']"
-            class="nc-sidebar-node-btn"
-            @click.stop
           >
+            <NcDropdown :trigger="['click']" class="nc-sidebar-node-btn" @click.stop>
               <MdiDotsHorizontal
                 data-testid="nc-sidebar-table-context-menu"
                 class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
@@ -256,33 +251,32 @@ const isTableOpened = computed(() => {
 
               <template #overlay>
                 <NcMenu>
+                  <div v-if="isUIAllowed('tableRename', { roles: baseRole })" v-e="['c:table:rename']">
                     <NcMenuItem
-                  v-if="isUIAllowed('tableRename', { roles: baseRole })"
-                  v-e="['c:table:rename']"
                       :data-testid="`sidebar-table-rename-${table.title}`"
                       @click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
                     >
                       <GeneralIcon icon="edit" class="text-gray-700" />
                       {{ $t('general.rename') }}
                     </NcMenuItem>
+                  </div>
 
-                <NcMenuItem
+                  <div
                     v-if="
                       isUIAllowed('tableDuplicate') &&
                       base.sources?.[sourceIndex] &&
                       (base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local)
                     "
                     v-e="['c:table:duplicate']"
-                  :data-testid="`sidebar-table-duplicate-${table.title}`"
-                  @click="duplicateTable(table)"
                   >
+                    <NcMenuItem :data-testid="`sidebar-table-duplicate-${table.title}`" @click="duplicateTable(table)">
                       <GeneralIcon icon="duplicate" class="text-gray-700" />
                       {{ $t('general.duplicate') }}
                     </NcMenuItem>
+                  </div>
 
+                  <div v-if="isUIAllowed('tableDelete', { roles: baseRole })" v-e="['c:table:delete']">
                     <NcMenuItem
-                  v-if="isUIAllowed('tableDelete', { roles: baseRole })"
-                  v-e="['c:table:delete']"
                       :data-testid="`sidebar-table-delete-${table.title}`"
                       class="!text-red-500 !hover:bg-red-50"
                       @click="isTableDeleteDialogVisible = true"
@@ -290,11 +284,13 @@ const isTableOpened = computed(() => {
                       <GeneralIcon icon="delete" />
                       {{ $t('general.delete') }}
                     </NcMenuItem>
+                  </div>
                 </NcMenu>
               </template>
             </NcDropdown>
           </div>
         </div>
+      </div>
       <DlgTableDelete
         v-if="table.id && base?.id"
         v-model:visible="isTableDeleteDialogVisible"