chore(gui-v2): close dialogs on click outside

packages/nc-gui-v2/components.d.ts

@@ -160,6 +160,7 @@ declare module '@vue/runtime-core' {
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
     MdiMicrosoftTeams: typeof import('~icons/mdi/microsoft-teams')['default']
+    MdiMinusCircleOutline: typeof import('~icons/mdi/minus-circle-outline')['default']
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
     MdiNotebookCheckOutline: typeof import('~icons/mdi/notebook-check-outline')['default']
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
@@ -167,6 +168,7 @@ declare module '@vue/runtime-core' {
     MdiPencil: typeof import('~icons/mdi/pencil')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
+    MdiPlusCircleOutline: typeof import('~icons/mdi/plus-circle-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiPlusRoundedOutline: typeof import('~icons/mdi/plus-rounded-outline')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']

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

@@ -229,13 +229,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" class="pa-2" @keydown.esc="dialogShow = false">
-    v-model:visible="dialogShow"
-    width="max(30vw, 600px)"
-    :mask-closable="false"
-    class="pa-2"
-    @keydown.esc="dialogShow = false"
-  >
     <div class="px-5">
       <div class="mt-5 prose-xl font-weight-bold">QUICK IMPORT - AIRTABLE</div>
 

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

@@ -53,9 +53,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" :mask-closable="false" @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" @keydown.esc="dialogShow = false">
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+
       <a-button key="submit" size="large" type="primary" @click="createTable()">{{ $t('general.submit') }}</a-button>
     </template>
 
@@ -63,8 +64,10 @@ onMounted(() => {
       <a-form :model="table" name="create-new-table-form" @keydown.enter="createTable">
         <!-- Create A New Table -->
         <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
+
         <!-- hint="Enter table name" -->
         <div class="mb-2">Table Name</div>
+
         <a-form-item v-bind="validateInfos.title">
           <a-input
             ref="inputEl"
@@ -74,25 +77,29 @@ onMounted(() => {
             :placeholder="$t('msg.info.enterTableName')"
           />
         </a-form-item>
+
         <div class="flex justify-end">
           <div class="pointer" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
             {{ isAdvanceOptVisible ? 'Hide' : 'Show' }} more
-            <v-icon x-small color="grey">
+
-              {{ isAdvanceOptVisible ? 'mdi-minus-circle-outline' : 'mdi-plus-circle-outline' }}
+            <MdiMinusCircleOutline v-if="isAdvanceOptVisible" class="text-gray-500" />
-            </v-icon>
+            <MdiPlusCircleOutline v-else class="text-gray-500" />
           </div>
         </div>
         <div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }">
           <!-- hint="Table name as saved in database" -->
           <div v-if="!project.prefix" class="mb-2">{{ $t('msg.info.tableNameInDb') }}</div>
+
           <a-form-item v-if="!project.prefix" v-bind="validateInfos.table_name">
             <a-input v-model:value="table.table_name" size="large" hide-details :placeholder="$t('msg.info.tableNameInDb')" />
           </a-form-item>
+
           <div>
             <div class="mb-5">
               <!-- Add Default Columns -->
               {{ $t('msg.info.addDefaultColumns') }}
             </div>
+
             <a-row>
               <a-col :span="6">
                 <a-tooltip placement="top">
@@ -102,12 +109,15 @@ onMounted(() => {
                   <a-checkbox v-model:checked="table.columns.id" disabled>ID</a-checkbox>
                 </a-tooltip>
               </a-col>
+
               <a-col :span="6">
                 <a-checkbox v-model:checked="table.columns.title"> title </a-checkbox>
               </a-col>
+
               <a-col :span="6">
                 <a-checkbox v-model:checked="table.columns.created_at"> created_at </a-checkbox>
               </a-col>
+
               <a-col :span="6">
                 <a-checkbox v-model:checked="table.columns.updated_at"> updated_at </a-checkbox>
               </a-col>
@@ -120,23 +130,6 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-::v-deep {
-  .v-text-field__details {
-    padding: 0 2px !important;
-
-    .v-messages:not(.error--text) {
-      .v-messages__message {
-        color: grey;
-        font-size: 0.65rem;
-      }
-    }
-  }
-}
-
-.add-default-title {
-  font-size: 0.65rem;
-}
-
 .nc-table-advanced-options {
   max-height: 0;
   transition: 0.3s max-height;