feat(nc-gui): add active class to <a-modal/>

packages/nc-gui/components/account/Token.vue

@@ -211,6 +211,7 @@ const descriptionInput = (el) => {
 
     <a-modal
       v-model:visible="showNewTokenModal"
+      :class="{ active: showNewTokenModal }"
       :closable="false"
       width="28rem"
       centered

packages/nc-gui/components/account/UsersModal.vue

@@ -115,6 +115,7 @@ const emailInput = ref((el) => {
 
 <template>
   <a-modal
+    :class="{ active: show }"
     :footer="null"
     centered
     :visible="show"

packages/nc-gui/components/dashboard/settings/AppStore.vue

@@ -72,6 +72,7 @@ onMounted(async () => {
 <template>
   <a-modal
     v-model:visible="showPluginInstallModal"
+    :class="{ active: showPluginInstallModal }"
     :closable="false"
     centered
     min-height="300"
@@ -89,6 +90,7 @@ onMounted(async () => {
 
   <a-modal
     v-model:visible="showPluginUninstallModal"
+    :class="{ active: showPluginUninstallModal }"
     :closable="false"
     width="24rem"
     centered

packages/nc-gui/components/dashboard/settings/Modal.vue

@@ -163,6 +163,7 @@ watch(
 <template>
   <a-modal
     v-model:visible="vModel"
+    :class="{ active: vModel }"
     :footer="null"
     width="max(90vw, 600px)"
     :closable="false"

packages/nc-gui/components/dlg/AirtableImport.vue

@@ -232,6 +232,7 @@ onBeforeUnmount(() => {
 <template>
   <a-modal
     v-model:visible="dialogShow"
+    :class="{ active: dialogShow }"
     width="max(30vw, 600px)"
     class="p-2"
     wrap-class-name="nc-modal-airtable-import"

packages/nc-gui/components/dlg/KeyboardShortcuts.vue

@@ -102,6 +102,7 @@ const shortcutList = [
 <template>
   <a-modal
     v-model:visible="dialogShow"
+    :class="{ active: dialogShow }"
     width="max(30vw, 600px)"
     class="p-2"
     :wrap-class-name="`nc-modal-keyboard-shortcuts ${dialogShow ? 'active' : ''}`"

packages/nc-gui/components/dlg/QuickImport.vue

@@ -345,6 +345,7 @@ const beforeUpload = (file: UploadFile) => {
 <template>
   <a-modal
     v-model:visible="dialogShow"
+    :class="{ active: dialogShow }"
     :width="modalWidth"
     wrap-class-name="nc-modal-quick-import"
     @keydown.esc="dialogShow = false"

packages/nc-gui/components/dlg/TableCreate.vue

@@ -99,6 +99,7 @@ onMounted(() => {
 <template>
   <a-modal
     v-model:visible="dialogShow"
+    :class="{ active: dialogShow }"
     width="max(30vw, 600px)"
     centered
     wrap-class-name="nc-modal-table-create"

packages/nc-gui/components/dlg/TableRename.vue

@@ -149,6 +149,7 @@ const renameTable = async () => {
 <template>
   <a-modal
     v-model:visible="dialogShow"
+    :class="{ active: dialogShow }"
     :title="$t('activity.renameTable')"
     :mask-closable="false"
     wrap-class-name="nc-modal-table-rename"

packages/nc-gui/components/dlg/ViewCreate.vue

@@ -182,7 +182,13 @@ async function onSubmit() {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="loading" wrap-class-name="nc-modal-view-create">
+  <a-modal
+    v-model:visible="vModel"
+    class="!top-[35%]"
+    :class="{ active: vModel }"
+    :confirm-loading="loading"
+    wrap-class-name="nc-modal-view-create"
+  >
     <template #title>
       {{ $t(`general.${selectedViewId ? 'duplicate' : 'create'}`) }} <span class="capitalize">{{ typeAlias }}</span>
       {{ $t('objects.view') }}

packages/nc-gui/components/dlg/ViewDelete.vue

@@ -48,7 +48,13 @@ async function onDelete() {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="isLoading" wrap-class-name="nc-modal-view-delete">
+  <a-modal
+    v-model:visible="vModel"
+    class="!top-[35%]"
+    :class="{ active: vModel }"
+    :confirm-loading="isLoading"
+    wrap-class-name="nc-modal-view-delete"
+  >
     <template #title> {{ $t('general.delete') }} {{ $t('objects.view') }} </template>
 
     {{ $t('msg.info.deleteViewConfirmation') }}

packages/nc-gui/components/shared-view/AskPassword.vue

@@ -33,6 +33,7 @@ const focus: VNodeRef = (el: typeof InputPassword) => el?.$el?.querySelector('in
 <template>
   <a-modal
     v-model:visible="vModel"
+    :class="{ active: vModel }"
     :closable="false"
     width="28rem"
     centered

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -620,7 +620,12 @@ watch(view, async (nextView) => {
     />
   </Suspense>
 
-  <a-modal v-model:visible="deleteStackVModel" class="!top-[35%]" wrap-class-name="nc-modal-kanban-delete-stack">
+  <a-modal
+    v-model:visible="deleteStackVModel"
+    class="!top-[35%]"
+    :class="{ active: deleteStackVModel }"
+    wrap-class-name="nc-modal-kanban-delete-stack"
+  >
     <template #title>
       {{ $t('activity.deleteKanbanStack') }}
     </template>

packages/nc-gui/components/smartsheet/toolbar/Erd.vue

@@ -17,6 +17,7 @@ const selectedView = inject(ActiveViewInj)
 <template>
   <a-modal
     v-model:visible="vModel"
+    :class="{ active: vModel }"
     size="small"
     :footer="null"
     width="max(900px,60vw)"

packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue

@@ -172,6 +172,7 @@ const exportFile = async (exportType: ExportTypes) => {
 
     <a-modal
       v-model:visible="sharedViewListDlg"
+      :class="{ active: sharedViewListDlg }"
       :title="$t('activity.listSharedView')"
       width="max(900px,60vw)"
       :footer="null"

packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@@ -217,6 +217,7 @@ const isRtl = computed(() => isRtlLang(locale.value as any))
     <!-- This view is shared via a private link -->
     <a-modal
       v-model:visible="showShareModel"
+      :class="{ active: showShareModel }"
       size="small"
       :title="$t('msg.info.privateLink')"
       :footer="null"

packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

@@ -241,6 +241,7 @@ useMenuCloseOnEsc(open)
 
     <a-modal
       v-model:visible="sharedViewListDlg"
+      :class="{ active: sharedViewListDlg }"
       :title="$t('activity.listSharedView')"
       width="max(900px,60vw)"
       :footer="null"

packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue

@@ -90,6 +90,7 @@ onMounted(() => {
 <template>
   <a-modal
     v-model:visible="showNewTokenModal"
+    :class="{ active: showNewTokenModal }"
     :closable="false"
     width="28rem"
     centered
@@ -133,6 +134,7 @@ onMounted(() => {
 
   <a-modal
     v-model:visible="showDeleteTokenModal"
+    :class="{ active: showDeleteTokenModal }"
     :closable="false"
     width="28rem"
     centered

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -183,6 +183,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
 
     <a-modal
       v-model:visible="showUserDeleteModal"
+      :class="{ active: showUserDeleteModal }"
       :closable="false"
       width="28rem"
       centered

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -145,6 +145,7 @@ const emailField = (inputEl: typeof Input) => {
     :footer="null"
     centered
     :visible="show"
+    :class="{ active: show }"
     :closable="false"
     width="max(50vw, 44rem)"
     wrap-class-name="nc-modal-invite-user-and-share-base"

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -159,6 +159,7 @@ const activeRow = (vNode?: InstanceType<typeof Card>) => {
 <template>
   <a-modal
     v-model:visible="vModel"
+    :class="{ active: vModel }"
     :footer="null"
     :title="$t('activity.linkRecord')"
     :body-style="{ padding: 0 }"

packages/nc-gui/pages/[projectType]/form/[viewId].vue

@@ -64,6 +64,7 @@ watch(
 
     <a-modal
       v-model:visible="passwordDlg"
+      :class="{ active: passwordDlg }"
       :closable="false"
       width="min(100%, 450px)"
       centered

packages/nc-gui/pages/index/index/create-external.vue

@@ -551,6 +551,7 @@ onMounted(async () => {
 
     <a-modal
       v-model:visible="configEditDlg"
+      :class="{ active: configEditDlg }"
       :title="$t('activity.editConnJson')"
       width="600px"
       wrap-class-name="nc-modal-edit-connection-json"
@@ -562,6 +563,7 @@ onMounted(async () => {
     <!--    Use Connection URL -->
     <a-modal
       v-model:visible="importURLDlg"
+      :class="{ active: importURLDlg }"
       :title="$t('activity.useConnectionUrl')"
       width="600px"
       :ok-text="$t('general.ok')"