From e0a9330a128e28a2b785e071f621ad7943f516c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?=
 <wingkwong.code@gmail.com>
Date: Mon, 13 Nov 2023 12:42:11 +0800
Subject: [PATCH] fix(nc-gui): runtime directive warnings in Table.vue

---
 .../components/smartsheet/grid/Table.vue      | 117 ++++++++++--------
 1 file changed, 66 insertions(+), 51 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index f81a1ef20e..52f0bec72b 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -1652,105 +1652,120 @@ onKeyStroke('ArrowDown', onDown)
 
         <template #overlay>
           <NcMenu class="!rounded !py-0" @click="contextMenu = false">
-            <div
+            <NcMenuItem
               v-if="isEeUI && !contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
-              v-e="['a:row:update-bulk']"
+              @click="emits('bulkUpdateDlg')"
             >
-              <NcMenuItem @click="emits('bulkUpdateDlg')">
+              <div v-e="['a:row:update-bulk']" class="flex gap-2 items-center">
                 <component :is="iconMap.edit" />
                 {{ $t('title.updateSelectedRows') }}
-              </NcMenuItem>
-            </div>
+              </div>
+            </NcMenuItem>
 
-            <div
+            <NcMenuItem
               v-if="!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
-              v-e="['a:row:delete-bulk']"
+              class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
+              data-testid="nc-delete-row"
+              @click="deleteSelectedRows"
             >
-              <NcMenuItem
-                class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
-                data-testid="nc-delete-row"
-                @click="deleteSelectedRows"
-              >
+              <div v-e="['a:row:delete-bulk']" class="flex gap-2 items-center">
                 <component :is="iconMap.delete" />
                 <!-- Delete Selected Rows -->
                 {{ $t('activity.deleteSelectedRow') }}
-              </NcMenuItem>
-            </div>
+              </div>
+            </NcMenuItem>
 
-            <div v-if="contextMenuTarget && selectedRange.isSingleCell()" v-e="['a:row:insert']">
-              <NcMenuItem class="nc-base-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">
+            <NcMenuItem
+              v-if="contextMenuTarget && selectedRange.isSingleCell()"
+              class="nc-base-menu-item"
+              @click="addEmptyRow(contextMenuTarget.row + 1)"
+            >
+              <div v-e="['a:row:insert']" class="flex gap-2 items-center">
                 <GeneralIcon icon="plus" />
                 Insert New Row
                 {{ $t('activity.insertRow') }}
-              </NcMenuItem>
-            </div>
+              </div>
+            </NcMenuItem>
 
-            <div v-if="contextMenuTarget" v-e="['a:row:copy']">
-              <NcMenuItem class="nc-base-menu-item" data-testid="context-menu-item-copy" @click="copyValue(contextMenuTarget)">
+            <NcMenuItem
+              v-if="contextMenuTarget"
+              class="nc-base-menu-item"
+              data-testid="context-menu-item-copy"
+              @click="copyValue(contextMenuTarget)"
+            >
+              <div v-e="['a:row:copy']" class="flex gap-2 items-center">
                 <GeneralIcon icon="copy" />
                 <!-- Copy -->
                 {{ $t('general.copy') }}
-              </NcMenuItem>
-            </div>
+              </div>
+            </NcMenuItem>
 
-            <div
+            <!-- Clear cell -->
+            <NcMenuItem
               v-if="
                 contextMenuTarget &&
                 hasEditPermission &&
                 selectedRange.isSingleCell() &&
                 (isLinksOrLTAR(fields[contextMenuTarget.col]) || !isVirtualCol(fields[contextMenuTarget.col]))
               "
-              v-e="['a:row:clear']"
+              class="nc-base-menu-item"
+              @click="clearCell(contextMenuTarget)"
             >
-              <!-- Clear cell -->
-              <NcMenuItem class="nc-base-menu-item" @click="clearCell(contextMenuTarget)">
+              <div v-e="['a:row:clear']" class="flex gap-2 items-center">
                 <GeneralIcon icon="close" />
                 {{ $t('general.clear') }}
-              </NcMenuItem>
-            </div>
+              </div>
+            </NcMenuItem>
 
-            <div v-else-if="contextMenuTarget && hasEditPermission" v-e="['a:row:clear-range']">
-              <!-- Clear cell -->
-              <NcMenuItem class="nc-base-menu-item" @click="clearSelectedRangeOfCells()">
+            <!-- Clear cell -->
+            <NcMenuItem
+              v-else-if="contextMenuTarget && hasEditPermission"
+              class="nc-base-menu-item"
+              @click="clearSelectedRangeOfCells()"
+            >
+              <div v-e="['a:row:clear-range']" class="flex gap-2 items-center">
                 <GeneralIcon icon="closeBox" class="text-gray-500" />
                 {{ $t('general.clear') }}
-              </NcMenuItem>
-            </div>
+              </div>
+            </NcMenuItem>
 
-            <div
+            <NcDivider />
+            <NcMenuItem
               v-if="contextMenuTarget && !isLocked && selectedRange.isSingleCell() && isUIAllowed('commentEdit') && !isMobileMode"
-              v-e="['a:row:comment']"
+              class="nc-base-menu-item"
+              @click="commentRow(contextMenuTarget.row)"
             >
-              <NcDivider />
-              <NcMenuItem class="nc-base-menu-item" @click="commentRow(contextMenuTarget.row)">
+              <div v-e="['a:row:comment']" class="flex gap-2 items-center">
                 <MdiMessageOutline class="h-4 w-4" />
 
                 {{ $t('general.comment') }}
-              </NcMenuItem>
-            </div>
+              </div>
+            </NcMenuItem>
 
             <template v-if="hasEditPermission">
               <NcDivider v-if="!(!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected))" />
-              <div
+              <NcMenuItem
                 v-if="contextMenuTarget && (selectedRange.isSingleCell() || selectedRange.isSingleRow())"
-                v-e="['a:row:delete']"
+                class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
+                @click="confirmDeleteRow(contextMenuTarget.row)"
               >
-                <NcMenuItem
-                  class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
-                  @click="confirmDeleteRow(contextMenuTarget.row)"
-                >
+                <div v-e="['a:row:delete']" class="flex gap-2 items-center">
                   <GeneralIcon icon="delete" />
                   <!-- Delete Row -->
                   {{ $t('activity.deleteRow') }}
-                </NcMenuItem>
-              </div>
-              <div v-else-if="contextMenuTarget && deleteRangeOfRows" v-e="['a:row:delete']">
-                <NcMenuItem class="nc-base-menu-item !text-red-600 !hover:bg-red-50" @click="deleteSelectedRangeOfRows">
+                </div>
+              </NcMenuItem>
+              <NcMenuItem
+                v-else-if="contextMenuTarget && deleteRangeOfRows"
+                class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
+                @click="deleteSelectedRangeOfRows"
+              >
+                <div v-e="['a:row:delete']" class="flex gap-2 items-center">
                   <GeneralIcon icon="delete" class="text-gray-500 text-red-600" />
                   <!-- Delete Rows -->
                   {{ $t('activity.deleteRows') }}
-                </NcMenuItem>
-              </div>
+                </div>
+              </NcMenuItem>
             </template>
           </NcMenu>
         </template>