From 82d3894dbf38dab5e6e83c775c5c642cc3b75257 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 1 Aug 2022 13:10:03 +0530
Subject: [PATCH 01/47] fix: nested lookup

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nocodb/src/lib/meta/api/sync/helpers/job.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
index e9a165efec..e7f1bed118 100644
--- a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
+++ b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
@@ -945,7 +945,10 @@ export default async (
           nestedLookupTbl[0].typeOptions.foreignTableRollupColumnId
         );
 
-        if (ncLookupColumnId === undefined) {
+        if (
+          ncLookupColumnId === undefined ||
+          ncRelationColumnId === undefined
+        ) {
           continue;
         }
 
@@ -1146,7 +1149,7 @@ export default async (
         nestedLookupTbl[0].typeOptions.foreignTableRollupColumnId
       );
 
-      if (ncLookupColumnId === undefined) {
+      if (ncLookupColumnId === undefined || ncRelationColumnId === undefined) {
         continue;
       }
 

From 86bfebffd6efa9d26f9a134b466ead0025ddaef2 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 2 Aug 2022 18:47:10 +0300
Subject: [PATCH 02/47] fix(gui-v2): fix project schema for pg and mssql

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui-v2/pages/project/index/create-external.vue    | 8 ++++----
 packages/nc-gui-v2/utils/projectCreateUtils.ts           | 9 ++++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index 6bbf573fc6..1d982c384f 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -59,7 +59,7 @@ const validators = computed(() => {
           'dataSource.connection.database': [fieldRequiredValidator],
           ...([ClientType.PG, ClientType.MSSQL].includes(formState.dataSource.client)
             ? {
-                'dataSource.connection.searchPath.0': [fieldRequiredValidator],
+                'dataSource.searchPath.0': [fieldRequiredValidator],
               }
             : {}),
         }),
@@ -288,11 +288,11 @@ onMounted(() => {
         </a-form-item>
         <!-- Schema name -->
         <a-form-item
-          v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client)"
+          v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath"
           :label="$t('labels.schemaName')"
-          v-bind="validateInfos['dataSource.connection.searchPath.0']"
+          v-bind="validateInfos['dataSource.searchPath.0']"
         >
-          <a-input v-model:value="formState.dataSource.connection.searchPath[0]" size="small" />
+          <a-input v-model:value="formState.dataSource.searchPath[0]" size="small" />
         </a-form-item>
 
         <a-collapse ghost expand-icon-position="right" class="mt-6">
diff --git a/packages/nc-gui-v2/utils/projectCreateUtils.ts b/packages/nc-gui-v2/utils/projectCreateUtils.ts
index 0acc5a0f31..7dbcc44a61 100644
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@@ -12,7 +12,6 @@ export interface ProjectCreateForm {
           password: string
           port: number | string
           ssl?: Record<string, string>
-          searchPath?: string[]
         }
       | {
           client?: ClientType.SQLITE
@@ -22,6 +21,7 @@ export interface ProjectCreateForm {
           }
           useNullAsDefault?: boolean
         }
+    searchPath?: string[]
   }
   inflection: {
     inflectionColumn?: string
@@ -73,7 +73,6 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
     user: 'postgres',
     password: 'password',
     database: '_test',
-    searchPath: ['public'],
     ssl: {
       ca: '',
       key: '',
@@ -110,7 +109,6 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
     user: 'sa',
     password: 'Password123.',
     database: '_test',
-    searchPath: ['dbo'],
     ssl: {
       ca: '',
       key: '',
@@ -203,6 +201,11 @@ export const getDefaultConnectionConfig = (client: ClientType): ProjectCreateFor
   return {
     client,
     connection: sampleConnectionData[client],
+    searchPath: [ClientType.PG, ClientType.MSSQL].includes(client)
+      ? client === ClientType.PG
+        ? ['public']
+        : ['dbo']
+      : undefined,
   }
 }
 

From 826810811b6ad8b5eb7e947b743085e8e45991cd Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 3 Aug 2022 10:43:17 +0530
Subject: [PATCH 03/47] i18n: new language support- hi, bn

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/utils/Language.vue |  98 ++--
 packages/nc-gui/lang/bn.json                  | 522 ++++++++++++++++++
 packages/nc-gui/lang/hi.json                  | 522 ++++++++++++++++++
 packages/nc-gui/plugins/i18n.js               |   4 +-
 4 files changed, 1098 insertions(+), 48 deletions(-)
 create mode 100644 packages/nc-gui/lang/bn.json
 create mode 100644 packages/nc-gui/lang/hi.json

diff --git a/packages/nc-gui/components/utils/Language.vue b/packages/nc-gui/components/utils/Language.vue
index e3e6e075be..b7b63af9b7 100644
--- a/packages/nc-gui/components/utils/Language.vue
+++ b/packages/nc-gui/components/utils/Language.vue
@@ -2,7 +2,9 @@
   <div>
     <v-menu top offset-y>
       <template #activator="{ on }">
-        <v-icon size="20" class="ml-2 nc-menu-translate" v-on="on"> mdi-translate </v-icon>
+        <v-icon size="20" class="ml-2 nc-menu-translate" v-on="on">
+          mdi-translate
+        </v-icon>
       </template>
       <v-list dense class="nc-language-list">
         <v-list-item-group v-model="language">
@@ -40,104 +42,106 @@ export default {
   name: 'Language',
   data: () => ({
     labels: {
+      bn: 'বাংলা',
+      da: 'Dansk',
       de: 'Deutsch',
       en: 'English',
       es: 'Español',
       fa: 'فارسی',
+      fi: 'Suomalainen',
       fr: 'Français',
+      hi: 'हिन्दी',
+      hr: 'Hrvatski',
       id: 'Bahasa Indonesia',
-      ja: '日本語',
       it_IT: 'Italiano',
+      iw: 'עִברִית',
+      ja: '日本語',
       ko: '한국인',
       lv: 'Latviešu',
       nl: 'Nederlandse',
+      no: 'Norsk',
+      pt_BR: 'Português (Brasil)',
       ru: 'Pусский',
-      zh_CN: '大陆简体',
-      zh_HK: '香港繁體',
-      zh_TW: '臺灣正體',
+      sl: 'Slovenščina',
       sv: 'Svenska',
+      th: 'ไทย',
       tr: 'Turkish',
-      da: 'Dansk',
       vi: 'Tiếng Việt',
-      no: 'Norsk',
-      iw: 'עִברִית',
-      fi: 'Suomalainen',
       uk: 'Українська',
-      hr: 'Hrvatski',
-      th: 'ไทย',
-      sl: 'Slovenščina',
-      pt_BR: 'Português (Brasil)',
-    },
+      zh_CN: '大陆简体',
+      zh_HK: '香港繁體',
+      zh_TW: '臺灣正體'
+    }
   }),
   computed: {
     languages() {
-      return ((this.$i18n && this.$i18n.availableLocales) || ['en']).sort();
+      return ((this.$i18n && this.$i18n.availableLocales) || ['en']).sort()
     },
     language: {
       get() {
-        return this.$store.state.settings.language;
+        return this.$store.state.settings.language
       },
       set(val) {
-        this.$store.commit('settings/MutLanguage', val);
-        this.applyDirection();
-      },
-    },
+        this.$store.commit('settings/MutLanguage', val)
+        this.applyDirection()
+      }
+    }
   },
   mounted() {
-    this.applyDirection();
+    this.applyDirection()
   },
   methods: {
     applyDirection() {
-      const targetDirection = this.isRtlLang() ? 'rtl' : 'ltr';
-      const oppositeDirection = targetDirection == 'ltr' ? 'rtl' : 'ltr';
-      document.body.classList.remove(oppositeDirection);
-      document.body.classList.add(targetDirection);
-      document.body.style.direction = targetDirection;
+      const targetDirection = this.isRtlLang() ? 'rtl' : 'ltr'
+      const oppositeDirection = targetDirection == 'ltr' ? 'rtl' : 'ltr'
+      document.body.classList.remove(oppositeDirection)
+      document.body.classList.add(targetDirection)
+      document.body.style.direction = targetDirection
     },
     isRtlLang() {
-      return ['fa'].includes(this.language);
+      return ['fa'].includes(this.language)
     },
     changeLan(lan) {
-      this.language = lan;
-      const count = 200;
+      this.language = lan
+      const count = 200
       const defaults = {
-        origin: { y: 0.7 },
-      };
+        origin: { y: 0.7 }
+      }
 
       function fire(particleRatio, opts) {
         window.confetti(
           Object.assign({}, defaults, opts, {
-            particleCount: Math.floor(count * particleRatio),
+            particleCount: Math.floor(count * particleRatio)
           })
-        );
+        )
       }
 
       fire(0.25, {
         spread: 26,
-        startVelocity: 55,
-      });
+        startVelocity: 55
+      })
       fire(0.2, {
-        spread: 60,
-      });
+        spread: 60
+      })
       fire(0.35, {
         spread: 100,
         decay: 0.91,
-        scalar: 0.8,
-      });
+        scalar: 0.8
+      })
       fire(0.1, {
         spread: 120,
         startVelocity: 25,
         decay: 0.92,
-        scalar: 1.2,
-      });
+        scalar: 1.2
+      })
       fire(0.1, {
         spread: 120,
-        startVelocity: 45,
-      });
-      this.$e('c:navbar:lang', { lang: lan });
-    },
-  },
-};
+        startVelocity: 45
+      })
+      this.$e('c:navbar:lang', { lang: lan })
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/lang/bn.json b/packages/nc-gui/lang/bn.json
new file mode 100644
index 0000000000..7e11cae1f5
--- /dev/null
+++ b/packages/nc-gui/lang/bn.json
@@ -0,0 +1,522 @@
+{
+  "general": {
+    "home": "বাড়ি",
+    "load": "ভার",
+    "open": "খোলা",
+    "close": "বন্ধ",
+    "yes": "হ্যাঁ",
+    "no": "না",
+    "ok": "ঠিক আছে",
+    "and": "এবং",
+    "or": "বা",
+    "add": "যোগ করুন",
+    "edit": "সম্পাদনা",
+    "remove": "অপসারণ",
+    "save": "সংরক্ষণ",
+    "cancel": "বাতিল",
+    "submit": "জমা দিন",
+    "create": "সৃষ্টি",
+    "insert": "Insert",
+    "delete": "মুছে ফেলা",
+    "update": "হালনাগাদ",
+    "rename": "নাম পরিবর্তন",
+    "reload": "পুনরায় লোড",
+    "reset": "রিসেট",
+    "install": "ইনস্টল করুন",
+    "show": "শো",
+    "hide": "লুকান",
+    "showAll": "সব দেখাও",
+    "hideAll": "সব লুকাও",
+    "showMore": "আরো দেখুন",
+    "showOptions": "বিকল্পগুলি দেখান",
+    "hideOptions": "বিকল্পগুলি লুকান",
+    "showMenu": "মেনু দেখান",
+    "hideMenu": "মেনু লুকান",
+    "addAll": "সব যোগ কর",
+    "removeAll": "সব মুছে ফেলুন",
+    "signUp": "নিবন্ধন করুন",
+    "signIn": "সাইন ইন করুন",
+    "signOut": "সাইন আউট",
+    "required": "প্রয়োজনীয়",
+    "preferred": "পছন্দসই",
+    "mandatory": "বাধ্যতামূলক",
+    "loading": "লোড হচ্ছে ...",
+    "title": "শিরোনাম",
+    "upload": "আপলোড করুন",
+    "download": "ডাউনলোড করুন",
+    "default": "Default",
+    "more": "আরও",
+    "less": "কম",
+    "event": "ঘটনা",
+    "condition": "অবস্থা",
+    "after": "পরে",
+    "before": "আগে",
+    "search": "Search",
+    "notification": "বিজ্ঞপ্তি",
+    "reference": "প্রসঙ্গ",
+    "function": "নির্দিষ্ট কর্ম"
+  },
+  "objects": {
+    "project": "প্রকল্প",
+    "projects": "প্রকল্প",
+    "table": "টেবিল",
+    "tables": "টেবিল",
+    "field": "ক্ষেত্র",
+    "fields": "ক্ষেত্র",
+    "column": "কলাম",
+    "columns": "কলাম",
+    "page": "পৃষ্ঠা",
+    "pages": "পৃষ্ঠাগুলি",
+    "record": "রেকর্ড",
+    "records": "রেকর্ড",
+    "webhook": "Webhook",
+    "webhooks": "ওয়েবহুকস",
+    "view": "দেখুন",
+    "views": "ভিউ",
+    "viewType": {
+      "grid": "গ্রিড",
+      "gallery": "গ্যালারী",
+      "form": "ফর্ম",
+      "kanban": "কানবান",
+      "calendar": "ক্যালেন্ডার"
+    },
+    "user": "ব্যবহারকারী",
+    "users": "ব্যবহারকারীরা",
+    "role": "ভূমিকা",
+    "roles": "ভূমিকা",
+    "roleType": {
+      "owner": "মালিক",
+      "creator": "স্রষ্টা",
+      "editor": "সম্পাদক",
+      "commenter": "মন্তব্যকারী",
+      "viewer": "দর্শক"
+    }
+  },
+  "datatype": {
+    "ID": "আইডি",
+    "ForeignKey": "বিদেশী চাবি",
+    "SingleLineText": "একক লাইন পাঠ্য",
+    "LongText": "দীর্ঘ পাঠ্য",
+    "Attachment": "সংযুক্তি",
+    "Checkbox": "চেকবক্স",
+    "MultiSelect": "মাল্টি নির্বাচন করুন",
+    "SingleSelect": "একক নির্বাচন",
+    "Collaborator": "সহযোগী",
+    "Date": "তারিখ",
+    "Year": "বছর",
+    "Time": "সময়",
+    "PhoneNumber": "ফোন নম্বর",
+    "Email": "ইমেল",
+    "URL": "Url",
+    "Number": "সংখ্যা",
+    "Decimal": "দশমিক",
+    "Currency": "মুদ্রা",
+    "Percent": "শতাংশ",
+    "Duration": "সময়কাল",
+    "Rating": "রেটিং",
+    "Formula": "সূত্র",
+    "Rollup": "রোলআপ",
+    "Count": "গণনা",
+    "Lookup": "খুঁজে দেখো",
+    "DateTime": "তারিখ সময়",
+    "CreateTime": "সময় তৈরি করুন",
+    "LastModifiedTime": "শেষ পরিবর্তিত সময়",
+    "AutoNumber": "অটো নম্বর",
+    "Barcode": "বারকোড",
+    "Button": "বোতাম",
+    "Password": "পাসওয়ার্ড",
+    "relationProperties": {
+      "noAction": "No Action",
+      "cascade": "Cascade",
+      "restrict": "रोके",
+      "setNull": "NULL সেট করুন",
+      "setDefault": "ডিফল্ট সেট করুন"
+    }
+  },
+  "filterOperation": {
+    "isEqual": "সমান",
+    "isNotEqual": "সমান নয়",
+    "isLike": "মত হয়",
+    "isNot like": "পছন্দ হয় না",
+    "isEmpty": "খালি",
+    "isNotEmpty": "খালি না",
+    "isNull": "নাল",
+    "isNotNull": "নাল নয়"
+  },
+  "title": {
+    "newProj": "নতুন প্রকল্প",
+    "myProject": "আমার প্রকল্প",
+    "formTitle": "ফর্ম শিরোনাম",
+    "collabView": "সহযোগী দর্শন",
+    "lockedView": "লক ভিউ",
+    "personalView": "ব্যক্তিগত দৃশ্য",
+    "appStore": "অ্যাপ স্টোর",
+    "teamAndAuth": "দল ও আথ",
+    "rolesUserMgmt": "ভূমিকা এবং ব্যবহারকারী পরিচালনা",
+    "userMgmt": "ব্যবহারকারী পরিচালনা",
+    "apiTokenMgmt": "এপিআই টোকেন পরিচালনা",
+    "rolesMgmt": "ভূমিকা পরিচালনা",
+    "projMeta": "প্রকল্প মেটাডেটা",
+    "metaMgmt": "মেটা পরিচালনা",
+    "metadata": "মেটাডেটা",
+    "exportImportMeta": "রফতানি / আমদানি মেটাডেটা",
+    "uiACL": "UI অ্যাক্সেস কন্ট্রোল",
+    "metaOperations": "মেটাডেটা অপারেশনস",
+    "audit": "নিরীক্ষা",
+    "auditLogs": "হিসাবনিকাশের বিবরণ",
+    "sqlMigrations": "এসকিউএল মাইগ্রেশন",
+    "dbCredentials": "ডাটাবেস শংসাপত্র",
+    "advancedParameters": "এসএসএল এবং উন্নত পরামিতি",
+    "headCreateProject": "প্রকল্প তৈরি করুন | নোকডিবি",
+    "headLogin": "লগ ইন | নোকডিবি",
+    "resetPassword": "আপনার পাসওয়ার্ড পুনরায় সেট করুন",
+    "teamAndSettings": "দল এবং সেটিংস",
+    "apiDocs": "API Docs",
+    "importFromAirtable": "এয়ারটেবল থেকে আমদানি করুন"
+  },
+  "labels": {
+    "notifyVia": "এর মাধ্যমে অবহিত করুন",
+    "projName": "প্রকল্পের নাম",
+    "tableName": "Table name",
+    "viewName": "নাম দেখুন",
+    "viewLink": "লিঙ্ক দেখুন",
+    "columnName": "কলামের নাম",
+    "columnType": "কলাম প্রকার",
+    "roleName": "নামভূমিকা",
+    "roleDescription": "ভূমিকা বর্ণনা",
+    "databaseType": "ডাটাবেস টাইপ করুন",
+    "lengthValue": "দৈর্ঘ্য/ মান",
+    "dbType": "ডাটাবেস প্রকার",
+    "sqliteFile": "স্ক্লাইট ফাইল",
+    "hostAddress": "হোস্ট ঠিকানা",
+    "port": "পোর্ট নাম্বার",
+    "username": "ব্যবহারকারীর নাম",
+    "password": "পাসওয়ার্ড",
+    "schemaName": "স্কিমার নাম",
+    "action": "কর্ম",
+    "actions": "ক্রিয়া",
+    "operation": "অপারেশন",
+    "operationType": "অপারেশন টাইপ",
+    "operationSubType": "অপারেশন সাব-টাইপ",
+    "description": "বর্ণনা",
+    "authentication": "প্রমাণীকরণ",
+    "token": "টোকেন",
+    "where": "কোথায়",
+    "cache": "ক্যাশে",
+    "chat": "চ্যাট",
+    "email": "ই-মেইল",
+    "storage": "স্টোরেজ",
+    "uiAcl": "UI-ACL",
+    "models": "মডেল",
+    "syncState": "সিঙ্ক স্টেট",
+    "created": "তৈরি",
+    "sqlOutput": "এসকিউএল আউটপুট",
+    "addOption": "বিকল্প যোগ করুন",
+    "aggregateFunction": "সামগ্রিক ফাংশন",
+    "database": "তথ্যশালা",
+    "dbCreateIfNotExists": "ডাটাবেস: উপস্থিত না থাকলে তৈরি করুন",
+    "clientKey": "ক্লায়েন্ট কী",
+    "clientCert": "ক্লায়েন্ট সার্ট",
+    "serverCA": "সার্ভার সিএ",
+    "requriedCa": "প্রয়োজনীয়-সিএ",
+    "requriedIdentity": "প্রয়োজনীয়-পরিচয়",
+    "inflection": {
+      "tableName": "প্রতিচ্ছবি - টেবিলের নাম",
+      "columnName": "প্রতিচ্ছবি - কলামের নাম"
+    },
+    "community": {
+      "starUs1": "তারা",
+      "starUs2": "আমাদের গিথুবে",
+      "bookDemo": "একটি বিনামূল্যে ডেমো বুক করুন",
+      "getAnswered": "আপনার প্রশ্নের উত্তর পান",
+      "joinDiscord": "ডিসকর্ডে যোগ দিন",
+      "joinCommunity": "NocoDB কমিউনিটিতে যোগ দিন",
+      "joinReddit": "/r/NocoDB-এ যোগ দিন",
+      "followNocodb": "NocoDB অনুসরণ করুন"
+    },
+    "docReference": "Document Reference",
+    "selectUserRole": "ব্যবহারকারীর ভূমিকা নির্বাচন করুন",
+    "childTable": "Child table",
+    "childColumn": "Child column",
+    "onUpdate": "আপডেটে",
+    "onDelete": "ডিলিটএ"
+  },
+  "activity": {
+    "createProject": "প্রকল্প তৈরি করুন",
+    "importProject": "আমদানি প্রকল্প",
+    "searchProject": "অনুসন্ধান প্রকল্প",
+    "editProject": "প্রকল্প সম্পাদনা করুন",
+    "stopProject": "প্রকল্প বন্ধ করুন",
+    "startProject": "প্রকল্প শুরু করুন",
+    "restartProject": "প্রকল্প পুনরায় চালু করুন",
+    "deleteProject": "প্রকল্প মুছুন",
+    "refreshProject": "রিফ্রেশ প্রকল্পগুলি",
+    "saveProject": "সংরক্ষণ প্রকল্প",
+    "createProjectExtended": {
+      "extDB": "একটি বাহ্যিক ডাটাবেসে <br> সংযুক্ত করে তৈরি করুন",
+      "excel": "এক্সেল থেকে প্রকল্প তৈরি করুন",
+      "template": "টেমপ্লেট থেকে প্রকল্প তৈরি করুন"
+    },
+    "OkSaveProject": "ঠিক আছে এবং প্রকল্প সংরক্ষণ করুন",
+    "upgrade": {
+      "available": "পর্যাপ্ত উন্নত সংস্করণ",
+      "releaseNote": "অব্যাহতি পত্র",
+      "howTo": "কিভাবে আপগ্রেড করবেন?"
+    },
+    "translate": "অনুবাদ করতে সহায়তা করুন",
+    "account": {
+      "authToken": "অনুলিপি আথ টোকেন",
+      "swagger": "সোয়াগার এপিস ডক",
+      "projInfo": "প্রকল্পের তথ্য অনুলিপি করুন",
+      "themes": "থিম"
+    },
+    "sort": "সাজান",
+    "addSort": "সাজানোর বিকল্প যুক্ত করুন",
+    "filter": "ছাঁকনি",
+    "addFilter": "ফিল্টার যুক্ত করুন",
+    "share": "শেয়ার",
+    "shareBase": {
+      "disable": "ভাগ করা বেস অক্ষম করুন",
+      "enable": "লিঙ্ক সহ যে কেউ",
+      "link": "ভাগ করা বেস লিঙ্ক"
+    },
+    "invite": "আমন্ত্রণ",
+    "inviteMore": "আরও আমন্ত্রণ",
+    "inviteTeam": "দলকে আমন্ত্রণ করুন",
+    "inviteToken": "টোকেনকে আমন্ত্রণ করুন",
+    "newUser": "নতুন ব্যবহারকারী",
+    "editUser": "ব্যবহারকারী সম্পাদনা করুন",
+    "deleteUser": "প্রকল্প থেকে ব্যবহারকারী সরান",
+    "resendInvite": "आमंत्रण ईमेल दोबारा भेजे",
+    "copyInviteURL": "অনুলিপি ইউআরএল আমন্ত্রণ করুন",
+    "newRole": "নতুন ভূমিকা",
+    "reloadRoles": "পুনরায় লোড ভূমিকা",
+    "nextPage": "পরবর্তী পৃষ্ঠা",
+    "prevPage": "আগের পৃষ্ঠা",
+    "nextRecord": "পরবর্তী রেকর্ড",
+    "previousRecord": "পূর্ববর্তী রেকর্ড",
+    "copyApiURL": "অনুলিপি এপিআই ইউআরএল",
+    "createTable": "টেবিল তৈরি",
+    "refreshTable": "টেবিল রিফ্রেশ",
+    "renameTable": "টেবিল নাম পরিবর্তন",
+    "deleteTable": "टेबल मिटाये",
+    "addField": "এই টেবিলে নতুন ক্ষেত্র যুক্ত করুন",
+    "setPrimary": "প্রাথমিক মান হিসাবে সেট করুন",
+    "addRow": "নতুন সারি যুক্ত করুন",
+    "saveRow": "সারি সংরক্ষণ করুন",
+    "insertRow": "নতুন সারি ঢোকান",
+    "deleteRow": "সারি মুছুন",
+    "deleteSelectedRow": "নির্বাচিত সারিগুলি মুছুন",
+    "importExcel": "এক্সেল আমদানি করুন",
+    "importCSV": "Import CSV",
+    "downloadCSV": "সিএসভি হিসাবে ডাউনলোড করুন",
+    "uploadCSV": "সিএসভি আপলোড করুন",
+    "import": "আমদানি",
+    "importMetadata": "আমদানি মেটাডেটা",
+    "exportMetadata": "রফতানি মেটাডেটা",
+    "clearMetadata": "পরিষ্কার মেটাডেটা",
+    "exportToFile": "ফাইল রফতানি",
+    "changePwd": "পাসওয়ার্ড পরিবর্তন করুন",
+    "createView": "একটি দৃশ্য তৈরি করুন",
+    "shareView": "শেয়ার ভিউ",
+    "listSharedView": "ভাগ করা ভিউ তালিকা",
+    "ListView": "ভিউ তালিকা",
+    "copyView": "অনুলিপি দেখুন",
+    "renameView": "ভিউ নামকরণ",
+    "deleteView": "দৃশ্য মুছুন",
+    "createGrid": "গ্রিড ভিউ তৈরি করুন",
+    "createGallery": "গ্যালারী ভিউ তৈরি করুন",
+    "createCalendar": "ক্যালেন্ডার ভিউ তৈরি করুন",
+    "createKanban": "কানবান ভিউ তৈরি করুন",
+    "createForm": "ফর্ম ভিউ তৈরি করুন",
+    "showSystemFields": "সিস্টেম ক্ষেত্রগুলি দেখান",
+    "copyUrl": "কপি ইউআরএল",
+    "openTab": "নতুন ট্যাব খুলুন",
+    "iFrame": "এম্বেডযোগ্য এইচটিএমএল কোড অনুলিপি করুন",
+    "addWebhook": "নতুন ওয়েবহুক যুক্ত করুন",
+    "newToken": "নতুন টোকেন যুক্ত করুন",
+    "exportZip": "রফতানি জিপ",
+    "importZip": "আমদানি জিপ",
+    "metaSync": "এখন সিঙ্ক",
+    "settings": "সেটিংস",
+    "previewAs": "পূর্বরূপ হিসাবে",
+    "resetReview": "পূর্বরূপ পুনরায় সেট করুন",
+    "testDbConn": "টেস্ট ডাটাবেস সংযোগ",
+    "removeDbFromEnv": "পরিবেশ থেকে ডাটাবেস সরান",
+    "editConnJson": "সংযোগ json সম্পাদনা",
+    "sponsorUs": "আমাদের স্পনসর",
+    "sendEmail": "ইমেইল পাঠান"
+  },
+  "tooltip": {
+    "saveChanges": "परिवर्तनों को सुरक्षित करें",
+    "xcDB": "একটি নতুন প্রকল্প তৈরি করুন",
+    "extDB": "মাইএসকিউএল, পোস্টগ্রেসকিউএল, এসকিউএল সার্ভার এবং এসকিউএলাইট সমর্থন করে",
+    "apiRest": "REST API এর মাধ্যমে অ্যাক্সেসযোগ্য",
+    "apiGQL": "গ্রাফকিউএল এপিআইয়ের মাধ্যমে অ্যাক্সেসযোগ্য",
+    "theme": {
+      "dark": "এটি কালোতে আসে (^⇧b)",
+      "light": "এটা কি কালো আসে? (^⇧b)"
+    },
+    "addTable": "নতুন টেবিল যুক্ত করুন",
+    "inviteMore": "আরও ব্যবহারকারীদের আমন্ত্রণ করুন",
+    "toggleNavDraw": "টগল নেভিগেশন ড্রয়ার",
+    "reloadApiToken": "এপিআই টোকেনগুলি পুনরায় লোড করুন",
+    "generateNewApiToken": "নতুন এপিআই টোকেন তৈরি করুন",
+    "addRole": "নতুন ভূমিকা যুক্ত করুন",
+    "reloadList": "পুনরায় লোড তালিকা",
+    "metaSync": "সিঙ্ক মেটাডেটা",
+    "sqlMigration": "স্থানান্তর পুনরায় লোড",
+    "updateRestart": "আপডেট এবং পুনরায় চালু করুন",
+    "cancelReturn": "বাতিল এবং ফিরে",
+    "exportMetadata": "মেটা টেবিলগুলি থেকে মেটা ডিরেক্টরিতে সমস্ত মেটাডেটা রফতানি করুন।",
+    "importMetadata": "মেটা ডিরেক্টরি থেকে মেটা টেবিলগুলিতে সমস্ত মেটাডেটা আমদানি করুন।",
+    "clearMetadata": "মেটা টেবিলগুলি থেকে সমস্ত মেটাডেটা সাফ করুন।",
+    "clientKey": ".key ফাইল নির্বাচন করুন",
+    "clientCert": ".cert ফাইল নির্বাচন করুন",
+    "clientCA": "সিএ ফাইল নির্বাচন করুন"
+  },
+  "placeholder": {
+    "projName": "প্রকল্পের নাম লিখুন",
+    "password": {
+      "enter": "পাসওয়ার্ড লিখুন",
+      "current": "বর্তমান পাসওয়ার্ড",
+      "new": "নতুন পাসওয়ার্ড",
+      "save": "পাসওয়ার্ড সংরক্ষণ",
+      "confirm": "নিশ্চিত কর নতুন গোপননম্বর"
+    },
+    "searchProjectTree": "টেবিল অনুসন্ধান করুন",
+    "searchFields": "ক্ষেত্র অনুসন্ধান করুন",
+    "searchColumn": "অনুসন্ধান {অনুসন্ধান} কলাম",
+    "searchApps": "অনুসন্ধান অ্যাপ্লিকেশন",
+    "searchModels": "অনুসন্ধান মডেল",
+    "noItemsFound": "কোনও আইটেম পাওয়া যায় নি",
+    "defaultValue": "ডিফল্ট মান",
+    "filterByEmail": "ই-মেইল দ্বারা ফিল্টার"
+  },
+  "msg": {
+    "info": {
+      "footerInfo": "প্রতি পৃষ্ঠায় সারি",
+      "upload": "আপলোড করতে ফাইল নির্বাচন করুন",
+      "upload_sub": "অথবা ফাইল টেনে আনুন",
+      "excelSupport": "সমর্থিত: .xls, .xlsx, .xlsm, .ods, .ots",
+      "excelURL": "এক্সেল ফাইল ইউআরএল লিখুন",
+      "csvURL": "CSV ফাইলের URL লিখুন",
+      "footMsg": "# সারিগুলির জন্য ডেটাটাইপটি অনুমান করতে পার্স",
+      "excelImport": "শীট (গুলি) আমদানির জন্য উপলব্ধ",
+      "exportMetadata": "আপনি কি মেটা টেবিলগুলি থেকে মেটাডেটা রফতানি করতে চান?",
+      "importMetadata": "আপনি কি মেটা টেবিলগুলি থেকে মেটাডেটা আমদানি করতে চান?",
+      "clearMetadata": "আপনি কি মেটা টেবিলগুলি থেকে মেটাডেটা সাফ করতে চান?",
+      "projectEmptyMessage": "একটি নতুন প্রকল্প তৈরি করে শুরু করুন",
+      "stopProject": "আপনি কি প্রকল্পটি বন্ধ করতে চান?",
+      "startProject": "আপনি কি প্রকল্পটি শুরু করতে চান?",
+      "restartProject": "আপনি কি প্রকল্পটি পুনরায় চালু করতে চান?",
+      "deleteProject": "আপনি কি প্রকল্পটি মুছতে চান?",
+      "shareBasePrivate": "সর্বজনীনভাবে ভাগযোগ্য পঠনযোগ্য বেস উত্পন্ন করুন",
+      "shareBasePublic": "এই লিঙ্কটি সহ ইন্টারনেটে যে কেউ দেখতে পারেন",
+      "userInviteNoSMTP": "দেখে মনে হচ্ছে আপনি এখনও মেলার কনফিগার করেন নি! উপরের আমন্ত্রণ লিঙ্কটি অনুলিপি করুন এবং এটি প্রেরণ করুন",
+      "dragDropHide": "লুকানোর জন্য এখানে টেনে আনুন এবং ড্রপ করুন",
+      "formInput": "ফর্ম ইনপুট লেবেল প্রবেশ করান",
+      "formHelpText": "কিছু সহায়তা পাঠ্য যুক্ত করুন",
+      "onlyCreator": "কেবল স্রষ্টার কাছে দৃশ্যমান",
+      "formDesc": "ফর্ম বর্ণনা যোগ করুন",
+      "beforeEnablePwd": "একটি পাসওয়ার্ড দিয়ে অ্যাক্সেস সীমাবদ্ধ করুন",
+      "afterEnablePwd": "অ্যাক্সেস পাসওয়ার্ড সীমাবদ্ধ",
+      "privateLink": "এই ভিউটি একটি ব্যক্তিগত লিঙ্কের মাধ্যমে ভাগ করা হয়েছে",
+      "privateLinkAdditionalInfo": "ব্যক্তিগত লিঙ্কযুক্ত লোকেরা কেবল এই দৃশ্যে কোষগুলি দৃশ্যমান দেখতে পারে",
+      "afterFormSubmitted": "ফর্ম জমা দেওয়ার পরে",
+      "apiOptions": "মাধ্যমে অ্যাক্সেস প্রকল্প",
+      "submitAnotherForm": "অন্য ফর্ম জমা দিন' বোতামটি দেখান",
+      "showBlankForm": "5 সেকেন্ড পরে একটি ফাঁকা ফর্ম দেখান",
+      "emailForm": "আমাকে ইমেল করুন",
+      "showSysFields": "সিস্টেম ক্ষেত্রগুলি দেখান",
+      "filterAutoApply": "অটো প্রয়োগ",
+      "showMessage": "এই বার্তাটি দেখান",
+      "viewNotShared": "বর্তমান ভিউ ভাগ করা হয় না!",
+      "showAllViews": "এই টেবিলের সমস্ত ভাগ করা দর্শন দেখান",
+      "collabView": "সম্পাদনা অনুমতি বা উচ্চতর সহ সহযোগীরা ভিউ কনফিগারেশন পরিবর্তন করতে পারে।",
+      "lockedView": "এটি আনলক না হওয়া পর্যন্ত কেউ ভিউ কনফিগারেশন সম্পাদনা করতে পারে না।",
+      "personalView": "কেবলমাত্র আপনি ভিউ কনফিগারেশন সম্পাদনা করতে পারেন। অন্যান্য সহযোগীদের ব্যক্তিগত মতামত ডিফল্টরূপে লুকানো থাকে।",
+      "ownerDesc": "স্রষ্টা যুক্ত/অপসারণ করতে পারেন। এবং সম্পূর্ণ সম্পাদনা ডাটাবেস স্ট্রাকচার এবং ক্ষেত্রগুলি।",
+      "creatorDesc": "ডাটাবেস কাঠামো এবং মানগুলি সম্পূর্ণরূপে সম্পাদনা করতে পারে।",
+      "editorDesc": "রেকর্ডগুলি সম্পাদনা করতে পারে তবে ডাটাবেস/ক্ষেত্রগুলির কাঠামো পরিবর্তন করতে পারে না।",
+      "commenterDesc": "রেকর্ডগুলি দেখতে এবং মন্তব্য করতে পারে তবে কিছু সম্পাদনা করতে পারে না",
+      "viewerDesc": "রেকর্ডগুলি দেখতে পারে তবে কিছু সম্পাদনা করতে পারে না",
+      "addUser": "নতুন ব্যবহারকারী যুক্ত করুন",
+      "staticRoleInfo": "সিস্টেম সংজ্ঞায়িত ভূমিকা সম্পাদনা করা যায় না",
+      "exportZip": "জিপ ফাইল এবং ডাউনলোডে প্রকল্প মেটা রফতানি করুন।",
+      "importZip": "প্রকল্প মেটা জিপ ফাইল আমদানি করুন এবং পুনরায় চালু করুন।",
+      "importText": "মেটাডেটা জিপ ফাইল আপলোড করে নোকডিবি প্রকল্পটি আমদানি করুন",
+      "metaNoChange": "কোনও পরিবর্তন চিহ্নিত করা হয়নি",
+      "sqlMigration": "স্কিমা মাইগ্রেশনগুলি স্বয়ংক্রিয়ভাবে তৈরি করা হবে। একটি টেবিল তৈরি করুন এবং এই পৃষ্ঠাটি রিফ্রেশ করুন।",
+      "dbConnectionStatus": "পরিবেশ বৈধ",
+      "dbConnected": "সংযোগ সফল ছিল",
+      "notifications": {
+        "no_new": "কোনও নতুন বিজ্ঞপ্তি নেই",
+        "clear": "স্পষ্ট"
+      },
+      "sponsor": {
+        "header": "আপনি আমাদের সাহায্য করতে পারেন!",
+        "message": "আমরা নোকোডিবিকে ওপেন সোর্স করার জন্য পুরো সময় কাজ করছি এমন একটি ক্ষুদ্র দল। আমরা বিশ্বাস করি যে নোকোডিবির মতো একটি সরঞ্জাম ইন্টারনেটে প্রতিটি সমস্যা সমাধানকারীকে অবাধে উপলব্ধ হওয়া উচিত।"
+      },
+      "loginMsg": "Nocodb এ লগ ইন করুন",
+      "passwordRecovery": {
+        "message_1": "আপনি সাইন আপ করার সময় দয়া করে আপনি যে ইমেল ঠিকানাটি ব্যবহার করেছেন তা সরবরাহ করুন।",
+        "message_2": "আমরা আপনার পাসওয়ার্ডটি পুনরায় সেট করতে একটি লিঙ্ক সহ একটি ইমেল প্রেরণ করব।",
+        "success": "পাসওয়ার্ডটি পুনরায় সেট করতে আপনার ইমেলটি পরীক্ষা করুন"
+      },
+      "signUp": {
+        "superAdmin": "আপনি 'সুপার অ্যাডমিন' হবেন",
+        "alreadyHaveAccount": "ইতিমধ্যে একটি সদস্যপদ আছে ?",
+        "workEmail": "আপনার কাজের ইমেল লিখুন",
+        "enterPassword": "আপনার পাসওয়ার্ড লিখুন",
+        "forgotPassword": "আপনি কি পাসওয়ার্ড ভুলে গেছেন ?",
+        "dontHaveAccount": "অ্যাকাউন্ট নেই?"
+      },
+      "addView": {
+        "grid": "গ্রিড ভিউ যুক্ত করুন",
+        "gallery": "গ্যালারী ভিউ যুক্ত করুন",
+        "form": "ফর্ম ভিউ যোগ করুন",
+        "kanban": "কানবান ভিউ যুক্ত করুন",
+        "calendar": "ক্যালেন্ডার ভিউ যুক্ত করুন"
+      },
+      "tablesMetadataInSync": "টেবিলের মেটাডেটা সিঙ্ক করা আছে",
+      "addMultipleUsers": "आप एकाधिक COMMA (,) द्वारा अलग ईमेल जोड़ सकते है",
+      "enterTableName": "টেবিলের নাম লিখুন",
+      "addDefaultColumns": "ডিফল্ট কলাম যোগ করুন",
+      "tableNameInDb": "ডাটাবেসে সংরক্ষিত টেবিলের নাম"
+    },
+    "error": {
+      "searchProject": "আপনার অনুসন্ধান {search} এর জন্য কোনও ফলাফল পাওয়া যায় নি",
+      "invalidChar": "ফোল্ডার পথে অবৈধ চরিত্র।",
+      "invalidDbCredentials": "অবৈধ ডাটাবেস শংসাপত্রগুলি।",
+      "unableToConnectToDb": "ডাটাবেসের সাথে সংযোগ করতে অক্ষম, অনুগ্রহ করে পরীক্ষা করুন আপনার ডাটাবেস আপ আছে।",
+      "userDoesntHaveSufficientPermission": "ব্যবহারকারীর অস্তিত্ব নেই বা স্কিমা তৈরি করার জন্য পর্যাপ্ত অনুমতি নেই।",
+      "dbConnectionStatus": "অবৈধ ডাটাবেস পরামিতি",
+      "dbConnectionFailed": "সংযোগ বিচ্ছিন্ন:",
+      "signUpRules": {
+        "emailReqd": "ই-মেইল প্রয়োজন",
+        "emailInvalid": "ইমেল বৈধ হতে হবে",
+        "passwdRequired": "পাসওয়ার্ড প্রয়োজন",
+        "passwdLength": "আপনার পাসওয়ার্ড অবশ্যই কমপক্ষে 8 টি অক্ষর হতে হবে",
+        "passwdMismatch": "পাসওয়ার্ড মিলছে না"
+      }
+    },
+    "toast": {
+      "exportMetadata": "প্রকল্প মেটাডেটা সফলভাবে রফতানি করেছে",
+      "importMetadata": "প্রকল্প মেটাডেটা সফলভাবে আমদানি করেছে",
+      "clearMetadata": "প্রকল্প মেটাডেটা সফলভাবে সাফ করেছে",
+      "stopProject": "প্রকল্প সফলভাবে বন্ধ",
+      "startProject": "প্রকল্প সফলভাবে শুরু হয়েছিল",
+      "restartProject": "প্রকল্প সফলভাবে পুনরায় চালু হয়েছে",
+      "deleteProject": "প্রকল্প সফলভাবে মুছে ফেলা হয়েছে",
+      "authToken": "ক্লিপবোর্ডে AUTH টোকেন কে কপি করা হয়েছে",
+      "projInfo": "ক্লিপবোর্ডে প্রজেক্ট সম্বন্ধে তথ্য কপি করা হয়েছে",
+      "inviteUrlCopy": "আমণ্ত্রণের url ক্লিপবোর্ডে কপি করা হয়েছে",
+      "createView": "দৃশ্য সফলভাবে তৈরি করা হয়েছে",
+      "formEmailSMTP": "ইমেল বিজ্ঞপ্তি সক্ষম করার জন্য দয়া করে অ্যাপ স্টোরে এসএমটিপি প্লাগইনটি সক্রিয় করুন",
+      "collabView": "সফলভাবে সহযোগী ভিউতে স্যুইচ করা",
+      "lockedView": "সফলভাবে লক ভিউতে স্যুইচ করা",
+      "futureRelease": "শীঘ্রই আসছে!"
+    }
+  }
+}
diff --git a/packages/nc-gui/lang/hi.json b/packages/nc-gui/lang/hi.json
new file mode 100644
index 0000000000..446a4c685f
--- /dev/null
+++ b/packages/nc-gui/lang/hi.json
@@ -0,0 +1,522 @@
+{
+  "general": {
+    "home": "घर",
+    "load": "भार",
+    "open": "खुला हुआ",
+    "close": "बंद करना",
+    "yes": "हाँ",
+    "no": "नहीं",
+    "ok": "ठीक है",
+    "and": "और",
+    "or": "या",
+    "add": "जोड़ें",
+    "edit": "संपादन करना",
+    "remove": "हटाना",
+    "save": "बचाना",
+    "cancel": "रद्द करना",
+    "submit": "प्रस्तुत करना",
+    "create": "सृजन करना",
+    "insert": "Insert",
+    "delete": "मिटाना",
+    "update": "अद्यतन",
+    "rename": "नाम बदलें",
+    "reload": "पुनः लोड करें",
+    "reset": "रीसेट",
+    "install": "स्थापित करना",
+    "show": "प्रदर्शन",
+    "hide": "छिपाना",
+    "showAll": "सब दिखाएं",
+    "hideAll": "सभी को छिपाएं",
+    "showMore": "और दिखाओ",
+    "showOptions": "विकल्प दिखाएं",
+    "hideOptions": "विकल्प छिपाएं",
+    "showMenu": "मेनू दिखाओ",
+    "hideMenu": "मेनू छिपाएं",
+    "addAll": "सभी को जोड़ो",
+    "removeAll": "सभी हटाएं",
+    "signUp": "साइन अप करें",
+    "signIn": "साइन इन करें",
+    "signOut": "साइन आउट",
+    "required": "आवश्यक",
+    "preferred": "पसंदीदा",
+    "mandatory": "अनिवार्य",
+    "loading": "लोड हो रहा है ...",
+    "title": "शीर्षक",
+    "upload": "डालना",
+    "download": "निकालना",
+    "default": "Default",
+    "more": "ज्यादा",
+    "less": "कम",
+    "event": "घटना",
+    "condition": "शर्त",
+    "after": "बाद में",
+    "before": "पहले",
+    "search": "खोजे",
+    "notification": "सूचित करी",
+    "reference": "संदर्भ",
+    "function": "समारोह"
+  },
+  "objects": {
+    "project": "परियोजना",
+    "projects": "परियोजनाओं",
+    "table": "मेज",
+    "tables": "टेबल",
+    "field": "खेत",
+    "fields": "खेत",
+    "column": "कॉलम",
+    "columns": "कॉलम",
+    "page": "पृष्ठ",
+    "pages": "पृष्ठों",
+    "record": "अभिलेख",
+    "records": "अभिलेख",
+    "webhook": "Webhook",
+    "webhooks": "Webhooks",
+    "view": "राय",
+    "views": "विचारों",
+    "viewType": {
+      "grid": "जाल",
+      "gallery": "गेलरी",
+      "form": "प्रपत्र",
+      "kanban": "Kanban",
+      "calendar": "पंचांग"
+    },
+    "user": "उपयोगकर्ता",
+    "users": "उपयोगकर्ताओं",
+    "role": "भूमिका",
+    "roles": "भूमिकाएँ",
+    "roleType": {
+      "owner": "स्वामी",
+      "creator": "बनाने वाला",
+      "editor": "संपादक",
+      "commenter": "टिप्पणीकार",
+      "viewer": "दर्शक"
+    }
+  },
+  "datatype": {
+    "ID": "पहचान",
+    "ForeignKey": "विदेशी कुंजी",
+    "SingleLineText": "एकल पंक्ति पाठ",
+    "LongText": "लंबे पाठ",
+    "Attachment": "अनुरक्ति",
+    "Checkbox": "चेक बॉक्स",
+    "MultiSelect": "बहु का चयन",
+    "SingleSelect": "एकल चयन",
+    "Collaborator": "सहयोगी",
+    "Date": "दिनांक",
+    "Year": "साल",
+    "Time": "समय",
+    "PhoneNumber": "फ़ोन नंबर",
+    "Email": "ईमेल",
+    "URL": "यूआरएल",
+    "Number": "संख्या",
+    "Decimal": "दशमलव",
+    "Currency": "मुद्रा",
+    "Percent": "प्रतिशत",
+    "Duration": "अवधि",
+    "Rating": "रेटिंग",
+    "Formula": "सूत्र",
+    "Rollup": "जमना",
+    "Count": "गिनती करना",
+    "Lookup": "देखो",
+    "DateTime": "दिनांक और समय",
+    "CreateTime": "निर्माण का समय",
+    "LastModifiedTime": "अंतिम संशोधित समय",
+    "AutoNumber": "वाहन नंबर",
+    "Barcode": "बारकोड",
+    "Button": "बटन",
+    "Password": "पासवर्ड",
+    "relationProperties": {
+      "noAction": "No Action",
+      "cascade": "Cascade",
+      "restrict": "रोके",
+      "setNull": "Set NULL",
+      "setDefault": "Set Default"
+    }
+  },
+  "filterOperation": {
+    "isEqual": "बराबर है",
+    "isNotEqual": "समान नहीं है",
+    "isLike": "के समान ही",
+    "isNot like": "पसंद नहीं है",
+    "isEmpty": "खाली है",
+    "isNotEmpty": "खाली नहीं है",
+    "isNull": "शून्य है",
+    "isNotNull": "निरर्थक नहीं है"
+  },
+  "title": {
+    "newProj": "नया काम",
+    "myProject": "मेरी परियोजनाएं",
+    "formTitle": "प्रपत्र शीर्षक",
+    "collabView": "सहयोगात्मक दृश्य",
+    "lockedView": "बंद दृश्य",
+    "personalView": "व्यक्तिगत दृष्टिकोण",
+    "appStore": "ऐप स्टोर",
+    "teamAndAuth": "टीम और प्रामाणिक",
+    "rolesUserMgmt": "भूमिकाएँ और उपयोगकर्ता प्रबंधन",
+    "userMgmt": "उपयोगकर्ता प्रबंधन",
+    "apiTokenMgmt": "एपीआई टोकन प्रबंधन",
+    "rolesMgmt": "भूमिका प्रबंधन",
+    "projMeta": "प्रोजेक्ट मेटाडेटा",
+    "metaMgmt": "मेटा प्रबंधन",
+    "metadata": "मेटाडाटा",
+    "exportImportMeta": "निर्यात मेटाडेटा",
+    "uiACL": "UI Access Control",
+    "metaOperations": "मेटाडेटा संचालन",
+    "audit": "अंकेक्षण",
+    "auditLogs": "हिसाब सूचि",
+    "sqlMigrations": "SQL प्रवासन",
+    "dbCredentials": "डेटाबेस साख",
+    "advancedParameters": "SSL और उन्नत पैरामीटर",
+    "headCreateProject": "प्रोजेक्ट बनाएँ | नोकोडब",
+    "headLogin": "लॉग इन | नोकोडब",
+    "resetPassword": "अपना पासवर्ड रीसेट करें",
+    "teamAndSettings": "दल एवं सेटिंग्स",
+    "apiDocs": "API Docs",
+    "importFromAirtable": "Import From Airtable"
+  },
+  "labels": {
+    "notifyVia": "Notify Via",
+    "projName": "परियोजना का नाम",
+    "tableName": "Table name",
+    "viewName": "नाम देखें",
+    "viewLink": "लिंक देखें",
+    "columnName": "आम नाम",
+    "columnType": "स्तंभ प्रकार",
+    "roleName": "भूमिका का नाम",
+    "roleDescription": "भूमिका विवरण",
+    "databaseType": "डेटाबेस में टाइप करें",
+    "lengthValue": "लंबाई/ मूल्य",
+    "dbType": "डेटाबेस प्रकार",
+    "sqliteFile": "Sqlite फ़ाइल",
+    "hostAddress": "मेज़बान का पता",
+    "port": "पोर्ट संख्या",
+    "username": "उपयोगकर्ता नाम",
+    "password": "पासवर्ड",
+    "schemaName": "Schema name",
+    "action": "गतिविधि",
+    "actions": "कार्रवाई",
+    "operation": "संचालन",
+    "operationType": "प्रचालन प्रकार",
+    "operationSubType": "प्रचालन उप-प्रकार",
+    "description": "विवरण",
+    "authentication": "प्रमाणीकरण",
+    "token": "टोकन",
+    "where": "कहाँ पे",
+    "cache": "कैश",
+    "chat": "बात करना",
+    "email": "ईमेल",
+    "storage": "भंडारण",
+    "uiAcl": "UI-ACL",
+    "models": "मॉडल",
+    "syncState": "सिंक अवस्था",
+    "created": "बनाया था",
+    "sqlOutput": "SQL आउटपुट",
+    "addOption": "विकल्प जोड़े",
+    "aggregateFunction": "कुल समारोह",
+    "database": "डेटाबेस",
+    "dbCreateIfNotExists": "डेटाबेस: बनाएं यदि मौजूद नहीं है",
+    "clientKey": "ग्राहक कुंजी",
+    "clientCert": "ग्राहक प्रमाण पत्र",
+    "serverCA": "सर्वर सीए",
+    "requriedCa": "आवश्यक सीए",
+    "requriedIdentity": "अपेक्षित-पहचान",
+    "inflection": {
+      "tableName": "विभक्ति - तालिका का नाम",
+      "columnName": "विभक्ति - स्तंभ नाम"
+    },
+    "community": {
+      "starUs1": "सितारा",
+      "starUs2": "हमें GitHub पर",
+      "bookDemo": "एक मुफ्त डेमो बुक करें",
+      "getAnswered": "अपने सवालों के जवाब दें",
+      "joinDiscord": "डिस्कोर्ड में शामिल हों",
+      "joinCommunity": "NocoDB के समुदाय से जुड़े",
+      "joinReddit": "/r/NocoDB में जुड़े",
+      "followNocodb": "NocoDB से जुड़े"
+    },
+    "docReference": "Document Reference",
+    "selectUserRole": "Select User Role",
+    "childTable": "Child table",
+    "childColumn": "Child column",
+    "onUpdate": "On Update",
+    "onDelete": "On Delete"
+  },
+  "activity": {
+    "createProject": "प्रोजेक्ट बनाएं",
+    "importProject": "आयात परियोजना",
+    "searchProject": "खोज परियोजना",
+    "editProject": "प्रोजेक्ट संपादित करें",
+    "stopProject": "बंद प्रोजेक्ट",
+    "startProject": "प्रोजेक्ट शुरू करें",
+    "restartProject": "प्रोजेक्ट को पुनरारंभ करना",
+    "deleteProject": "प्रोजेक्ट हटाएं",
+    "refreshProject": "ताज़ा प्रोजेक्ट्स",
+    "saveProject": "परियोजना को सुरक्षित करो",
+    "createProjectExtended": {
+      "extDB": "बाहरी डेटाबेस से <br> कनेक्ट करके बनाएँ",
+      "excel": "एक्सेल से प्रोजेक्ट बनाएं",
+      "template": "टेम्पलेट से प्रोजेक्ट बनाएं"
+    },
+    "OkSaveProject": "ठीक है और प्रोजेक्ट सहेजें",
+    "upgrade": {
+      "available": "अपग्रेड उपलब्द है",
+      "releaseNote": "रिलीज नोट्स",
+      "howTo": "अपग्रेड कैसे करें?"
+    },
+    "translate": "अनुवाद करने में मदद करें",
+    "account": {
+      "authToken": "कॉपी प्रामाणिक टोकन",
+      "swagger": "स्वैगर एपीआईएस डॉक",
+      "projInfo": "कॉपी प्रोजेक्ट जानकारी",
+      "themes": "विषयों"
+    },
+    "sort": "क्रम से लगाना",
+    "addSort": "सॉर्ट विकल्प जोड़ें",
+    "filter": "फ़िल्टर",
+    "addFilter": "फ़िल्टर जोड़ें",
+    "share": "शेयर करना",
+    "shareBase": {
+      "disable": "साझा आधार अक्षम करें",
+      "enable": "कोई भी व्यक्ति जिसके पास लिंक हो",
+      "link": "साझा आधार लिंक"
+    },
+    "invite": "आमंत्रित करना",
+    "inviteMore": "अधिक आमंत्रित करें",
+    "inviteTeam": "टीम को आमंत्रित करें",
+    "inviteToken": "टोकन को आमंत्रित करें",
+    "newUser": "नया उपयोगकर्ता",
+    "editUser": "यूजर को संपादित करो",
+    "deleteUser": "परियोजना से उपयोगकर्ता निकालें",
+    "resendInvite": "आमंत्रण ईमेल दोबारा भेजे",
+    "copyInviteURL": "कॉपी आमंत्रित URL",
+    "newRole": "नयी भूमिका",
+    "reloadRoles": "पुनः लोड भूमिकाएँ",
+    "nextPage": "अगला पृष्ठ",
+    "prevPage": "पिछला पृष्ठ",
+    "nextRecord": "अगला रिकॉर्ड",
+    "previousRecord": "पिछला रिकॉर्ड",
+    "copyApiURL": "API URL कॉपी करें",
+    "createTable": "तालिका बनाएं",
+    "refreshTable": "टेबल्स रिफ्रेश",
+    "renameTable": "तालिका का नाम",
+    "deleteTable": "टेबल मिटाये",
+    "addField": "इस तालिका में नया फ़ील्ड जोड़ें",
+    "setPrimary": "प्राथमिक मूल्य के रूप में सेट करें",
+    "addRow": "नई पंक्ति जोड़ें",
+    "saveRow": "पंक्ति सहेजें",
+    "insertRow": "नई पंक्ति डालें",
+    "deleteRow": "पंक्ति को हटाएं",
+    "deleteSelectedRow": "चयनित पंक्तियों को हटा दें",
+    "importExcel": "आयात एक्सेल",
+    "importCSV": "Import CSV",
+    "downloadCSV": "CSV के रूप में डाउनलोड करें",
+    "uploadCSV": "CSV अपलोड करें",
+    "import": "आयात",
+    "importMetadata": "आयात मेटाडेटा",
+    "exportMetadata": "निर्यात मेटाडेटा",
+    "clearMetadata": "स्पष्ट मेटाडेटा",
+    "exportToFile": "फ़ाइल को निर्यात",
+    "changePwd": "पासवर्ड बदलें",
+    "createView": "एक दृश्य बनाएं",
+    "shareView": "शेयर दृश्य",
+    "listSharedView": "साझा दृश्य सूची",
+    "ListView": "दृश्य सूची",
+    "copyView": "प्रतिलिपि दृश्य",
+    "renameView": "नाम बदलें",
+    "deleteView": "डिलीट व्यू",
+    "createGrid": "ग्रिड व्यू बनाएं",
+    "createGallery": "गैलरी दृश्य बनाएं",
+    "createCalendar": "कैलेंडर दृश्य बनाएं",
+    "createKanban": "कनबान व्यू बनाएं",
+    "createForm": "फॉर्म व्यू बनाएं",
+    "showSystemFields": "सिस्टम फ़ील्ड दिखाएं",
+    "copyUrl": "यूआरएल कॉपी करें",
+    "openTab": "नया टैब खोलें",
+    "iFrame": "एम्बेडेबल HTML कोड कॉपी करें",
+    "addWebhook": "नया वेबहूक जोड़ें",
+    "newToken": "नया टोकन जोड़ें",
+    "exportZip": "निर्यात ज़िप",
+    "importZip": "आयात ज़िप",
+    "metaSync": "अभी सिंक करें",
+    "settings": "समायोजन",
+    "previewAs": "के रूप में पूर्वावलोकन",
+    "resetReview": "रीसेट पूर्वावलोकन",
+    "testDbConn": "परीक्षण डेटाबेस कनेक्शन",
+    "removeDbFromEnv": "पर्यावरण से डेटाबेस निकालें",
+    "editConnJson": "कनेक्शन JSON संपादित करें",
+    "sponsorUs": "हमें प्रायोजित करें",
+    "sendEmail": "ईमेल भेजें"
+  },
+  "tooltip": {
+    "saveChanges": "परिवर्तनों को सुरक्षित करें",
+    "xcDB": "एक नया प्रोजेक्ट बनाएं",
+    "extDB": "MySQL, PostgreSQL, SQL सर्वर और SQLite का समर्थन करता है",
+    "apiRest": "रेस्ट एपीआई के माध्यम से सुलभ",
+    "apiGQL": "ग्राफक्ल एपीआई के माध्यम से सुलभ",
+    "theme": {
+      "dark": "यह काले रंग में आता है (^⇧B)",
+      "light": "क्या यह काले रंग में आता है? (^⇧b)"
+    },
+    "addTable": "नई तालिका जोड़ें",
+    "inviteMore": "अधिक उपयोगकर्ताओं को आमंत्रित करें",
+    "toggleNavDraw": "नेविगेशन दराज को टॉगल करें",
+    "reloadApiToken": "एपीआई टोकन को पुनः लोड करें",
+    "generateNewApiToken": "नया एपीआई टोकन उत्पन्न करें",
+    "addRole": "नई भूमिका जोड़ें",
+    "reloadList": "पुनः लोड सूची",
+    "metaSync": "सिंक मेटाडेटा",
+    "sqlMigration": "पुनर्जीवित पलायन",
+    "updateRestart": "अद्यतन और पुनरारंभ करें",
+    "cancelReturn": "रद्द करें और वापस लौटें",
+    "exportMetadata": "मेटा टेबल से सभी मेटाडेटा को मेटा निर्देशिका में निर्यात करें।",
+    "importMetadata": "मेटा निर्देशिका से मेटा टेबल तक सभी मेटाडेटा आयात करें।",
+    "clearMetadata": "मेटा टेबल से सभी मेटाडेटा को साफ करें।",
+    "clientKey": ".Key फ़ाइल का चयन करें",
+    "clientCert": ".Cert फ़ाइल का चयन करें",
+    "clientCA": "सीए फ़ाइल का चयन करें"
+  },
+  "placeholder": {
+    "projName": "प्रोजेक्ट नाम दर्ज करें",
+    "password": {
+      "enter": "पासवर्ड दर्ज करे",
+      "current": "वर्तमान पासवर्ड",
+      "new": "नया पासवर्ड",
+      "save": "पासवर्ड को बचाओ",
+      "confirm": "नए पासवर्ड की पुष्टि करें"
+    },
+    "searchProjectTree": "खोज टेबल",
+    "searchFields": "खोज फ़ील्ड",
+    "searchColumn": "खोज {खोज} कॉलम",
+    "searchApps": "खोज एप्लिकेशन",
+    "searchModels": "खोज मॉडल",
+    "noItemsFound": "कुछ नहीं मिला",
+    "defaultValue": "डिफ़ॉल्ट मान",
+    "filterByEmail": "ई-मेल द्वारा फ़िल्टर"
+  },
+  "msg": {
+    "info": {
+      "footerInfo": "प्रति पृष्ठ पंक्तियाँ",
+      "upload": "अपलोड करने के लिए फ़ाइल का चयन करें",
+      "upload_sub": "या ड्रैग एंड ड्रॉप फाइल",
+      "excelSupport": "समर्थित: .xls, .xlsx, .xlsm, .ods, .ots",
+      "excelURL": "Excel फ़ाइल URL दर्ज करें",
+      "csvURL": "csv फाइल का url दर्ज करे",
+      "footMsg": "# पंक्तियों को हीन डेटाटाइप करने के लिए पार्स करने के लिए",
+      "excelImport": "शीट आयात के लिए उपलब्ध हैं",
+      "exportMetadata": "क्या आप मेटा टेबल से मेटाडेटा निर्यात करना चाहते हैं?",
+      "importMetadata": "क्या आप मेटा टेबल से मेटाडेटा आयात करना चाहते हैं?",
+      "clearMetadata": "क्या आप मेटा टेबल से मेटाडेटा को साफ करना चाहते हैं?",
+      "projectEmptyMessage": "एक नई परियोजना बनाकर आरंभ करें",
+      "stopProject": "क्या आप परियोजना को रोकना चाहते हैं?",
+      "startProject": "क्या आप प्रोजेक्ट शुरू करना चाहते हैं?",
+      "restartProject": "क्या आप परियोजना को फिर से शुरू करना चाहते हैं?",
+      "deleteProject": "क्या आप परियोजना को हटाना चाहते हैं?",
+      "shareBasePrivate": "सार्वजनिक रूप से साझा करने योग्य रीडोनली बेस उत्पन्न करें",
+      "shareBasePublic": "इस लिंक के साथ इंटरनेट पर कोई भी व्यक्ति देख सकता है",
+      "userInviteNoSMTP": "लगता है कि आपने अभी तक मेलर को कॉन्फ़िगर नहीं किया है! कृपया ऊपर दिए गए लिंक के ऊपर कॉपी करें और इसे भेजें",
+      "dragDropHide": "छिपाने के लिए यहां फ़ील्ड को खींचें और ड्रॉप करें",
+      "formInput": "फॉर्म इनपुट लेबल दर्ज करें",
+      "formHelpText": "कुछ सहायता पाठ जोड़ें",
+      "onlyCreator": "केवल निर्माता को दिखाई देता है",
+      "formDesc": "फॉर्म विवरण जोड़ें",
+      "beforeEnablePwd": "एक पासवर्ड के साथ पहुंच को प्रतिबंधित करें",
+      "afterEnablePwd": "एक्सेस पासवर्ड प्रतिबंधित है",
+      "privateLink": "यह दृश्य एक निजी लिंक के माध्यम से साझा किया गया है",
+      "privateLinkAdditionalInfo": "निजी लिंक वाले लोग केवल इस दृश्य में दिखाई देने वाली कोशिकाओं को देख सकते हैं",
+      "afterFormSubmitted": "फॉर्म के बाद प्रस्तुत किया जाता है",
+      "apiOptions": "के माध्यम से प्रोजेक्ट",
+      "submitAnotherForm": "एक और फॉर्म सबमिट करें' बटन दिखाएं",
+      "showBlankForm": "5 सेकंड के बाद एक खाली फॉर्म दिखाएं",
+      "emailForm": "मुझे ई-मेल करें",
+      "showSysFields": "सिस्टम फ़ील्ड दिखाएं",
+      "filterAutoApply": "ऑटो लागू करें",
+      "showMessage": "यह संदेश दिखाएं",
+      "viewNotShared": "वर्तमान दृश्य साझा नहीं है!",
+      "showAllViews": "इस तालिका के सभी साझा विचार दिखाएं",
+      "collabView": "संपादन अनुमतियों या उच्चतर के साथ सहयोगी दृश्य कॉन्फ़िगरेशन को बदल सकते हैं।",
+      "lockedView": "कोई भी दृश्य कॉन्फ़िगरेशन को तब तक संपादित नहीं कर सकता है जब तक कि यह अनलॉक न हो जाए।",
+      "personalView": "केवल आप दृश्य कॉन्फ़िगरेशन को संपादित कर सकते हैं। अन्य सहयोगियों के व्यक्तिगत विचार डिफ़ॉल्ट रूप से छिपे हुए हैं।",
+      "ownerDesc": "रचनाकारों को जोड़/हटा सकते हैं। और पूर्ण संपादन डेटाबेस संरचनाएं और फ़ील्ड।",
+      "creatorDesc": "डेटाबेस संरचना और मानों को पूरी तरह से संपादित कर सकते हैं।",
+      "editorDesc": "रिकॉर्ड को संपादित कर सकते हैं लेकिन डेटाबेस/फ़ील्ड की संरचना को नहीं बदल सकते हैं।",
+      "commenterDesc": "रिकॉर्ड देख सकते हैं और टिप्पणी कर सकते हैं लेकिन कुछ भी संपादित नहीं कर सकते",
+      "viewerDesc": "रिकॉर्ड देख सकते हैं लेकिन कुछ भी संपादित नहीं कर सकते",
+      "addUser": "नई उपयोगकर्ता को जोड़ना",
+      "staticRoleInfo": "सिस्टम परिभाषित भूमिकाओं को संपादित नहीं किया जा सकता है",
+      "exportZip": "फाइल और डाउनलोड करने के लिए प्रोजेक्ट मेटा निर्यात करें।",
+      "importZip": "आयात परियोजना मेटा ज़िप फ़ाइल और पुनरारंभ।",
+      "importText": "मेटाडेटा ज़िप फ़ाइल अपलोड करके NOCODB परियोजना आयात करें",
+      "metaNoChange": "कोई परिवर्तन नहीं की पहचान",
+      "sqlMigration": "स्कीमा माइग्रेशन स्वचालित रूप से बनाए जाएंगे। एक तालिका बनाएं और इस पृष्ठ को ताज़ा करें।",
+      "dbConnectionStatus": "मान्य पर्यावरण",
+      "dbConnected": "कनेक्शन सफल रहा",
+      "notifications": {
+        "no_new": "कोई नए संदेश नहीं",
+        "clear": "साफ़"
+      },
+      "sponsor": {
+        "header": "आप हमारी मदद कर सकते हैं!",
+        "message": "हम एक छोटी टीम हैं जो NOCODB को ओपन-सोर्स बनाने के लिए पूरा समय काम कर रही हैं। हमारा मानना ​​है कि एनओसीओडीबी जैसे उपकरण को इंटरनेट पर हर समस्या के लिए स्वतंत्र रूप से उपलब्ध होना चाहिए।"
+      },
+      "loginMsg": "NoCODB में लॉग इन करें",
+      "passwordRecovery": {
+        "message_1": "जब आप साइन अप करते हैं तो कृपया आपके द्वारा उपयोग किए गए ईमेल पते को प्रदान करें।",
+        "message_2": "हम आपको अपना पासवर्ड रीसेट करने के लिए एक लिंक के साथ एक ईमेल भेजेंगे।",
+        "success": "कृपया पासवर्ड रीसेट करने के लिए अपना ईमेल देखें"
+      },
+      "signUp": {
+        "superAdmin": "आप 'सुपर एडमिन' होंगे",
+        "alreadyHaveAccount": "क्या आपके पास पहले से एक खाता मौजूद है ?",
+        "workEmail": "अपना काम ईमेल दर्ज करें",
+        "enterPassword": "अपना पासवर्ड डालें",
+        "forgotPassword": "पासवर्ड भूल गए हैं ?",
+        "dontHaveAccount": "कोई खाता नहीं है?"
+      },
+      "addView": {
+        "grid": "ग्रिड दृश्य जोड़ें",
+        "gallery": "गैलरी दृश्य जोड़ें",
+        "form": "फॉर्म व्यू जोड़ें",
+        "kanban": "कनबान दृश्य जोड़ें",
+        "calendar": "कैलेंडर दृश्य जोड़ें"
+      },
+      "tablesMetadataInSync": "टेबल के मेटाडेटा SYNC है",
+      "addMultipleUsers": "आप एकाधिक COMMA (,) द्वारा अलग ईमेल जोड़ सकते है",
+      "enterTableName": "टेबल का नाम लिखे",
+      "addDefaultColumns": "डिफ़ॉल्ट कॉलम जोड़े",
+      "tableNameInDb": "डेटाबेस में टेबल का नाम बचाया गया है"
+    },
+    "error": {
+      "searchProject": "{search} के लिए आपकी खोज कोई परिणाम नहीं मिला",
+      "invalidChar": "फ़ोल्डर पथ में अमान्य चरित्र।",
+      "invalidDbCredentials": "अमान्य डेटाबेस क्रेडेंशियल्स।",
+      "unableToConnectToDb": "डेटाबेस से कनेक्ट करने में असमर्थ, कृपया जांच करें कि आपका डेटाबेस ऊपर है।",
+      "userDoesntHaveSufficientPermission": "उपयोगकर्ता मौजूद नहीं है या स्कीमा बनाने के लिए पर्याप्त अनुमति है।",
+      "dbConnectionStatus": "अमान्य डेटाबेस पैरामीटर",
+      "dbConnectionFailed": "कनेक्शन विफलता:",
+      "signUpRules": {
+        "emailReqd": "ईमेल की जरूरत है",
+        "emailInvalid": "ईमेल मान्य होना चाहिए",
+        "passwdRequired": "पासवर्ड की आवश्यकता है",
+        "passwdLength": "आप पासवर्ड कम से कम 8 वर्ण होना चाहिए",
+        "passwdMismatch": "पासवर्ड मेल नहीं खाते"
+      }
+    },
+    "toast": {
+      "exportMetadata": "परियोजना मेटाडेटा सफलतापूर्वक निर्यात की गई",
+      "importMetadata": "परियोजना मेटाडेटा सफलतापूर्वक आयात की गई",
+      "clearMetadata": "प्रोजेक्ट मेटाडेटा सफलतापूर्वक मंजूरी दे दी",
+      "stopProject": "परियोजना सफलतापूर्वक बंद हो गई",
+      "startProject": "परियोजना सफलतापूर्वक शुरू हुई",
+      "restartProject": "परियोजना को सफलतापूर्वक फिर से शुरू किया गया",
+      "deleteProject": "परियोजना को सफलतापूर्वक हटा दिया गया",
+      "authToken": "क्लिपबोर्ड में AUTH टोकन को कॉपी किया गया है",
+      "projInfo": "क्लिपबोर्ड में प्रोजेक्ट की जानकारी कॉपी की गयी है",
+      "inviteUrlCopy": "आमंत्रण url को क्लिपबोर्ड में कॉपी किया गया है",
+      "createView": "व्यू सफलतापूर्वक बनाया गया",
+      "formEmailSMTP": "कृपया ईमेल अधिसूचना को सक्षम करने के लिए ऐप स्टोर में SMTP प्लगइन को सक्रिय करें",
+      "collabView": "सफलतापूर्वक सहयोगी दृश्य पर स्विच किया गया",
+      "lockedView": "सफलतापूर्वक लॉक किए गए दृश्य पर स्विच किया गया",
+      "futureRelease": "जल्द आ रहा है!"
+    }
+  }
+}
diff --git a/packages/nc-gui/plugins/i18n.js b/packages/nc-gui/plugins/i18n.js
index 9da0c390a9..197d886ff9 100644
--- a/packages/nc-gui/plugins/i18n.js
+++ b/packages/nc-gui/plugins/i18n.js
@@ -44,7 +44,9 @@ export default ({ app, store }) => {
       sl: require('~/lang/sl.json'),
       pt_BR: require('~/lang/pt_BR.json'),
       fa: require('~/lang/fa.json'),
-      tr: require('~/lang/tr.json')
+      tr: require('~/lang/tr.json'),
+      hi: require('~/lang/hi.json'),
+      bn: require('~/lang/bn.json')
     }
   })
 

From 109938673e8c4e5a0ecec1217cd3db6b74e0c59a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 13:09:19 +0200
Subject: [PATCH 04/47] feat(gui-v2): add `EditModeInj` and replace string key
 injection

---
 packages/nc-gui-v2/components.d.ts            |   6 -
 .../nc-gui-v2/components/cell/Attachment.vue  | 166 +--------------
 .../nc-gui-v2/components/cell/Currency.vue    |  34 ++--
 packages/nc-gui-v2/components/cell/Email.vue  |   9 +-
 packages/nc-gui-v2/components/cell/Float.vue  |  13 +-
 .../nc-gui-v2/components/cell/Integer.vue     |  15 +-
 .../components/cell/JsonEditableCell.vue      |  13 +-
 .../nc-gui-v2/components/cell/MultiSelect.vue |  54 +----
 .../components/cell/SingleSelect.vue          |  35 +---
 packages/nc-gui-v2/components/cell/Text.vue   |  53 +++--
 .../nc-gui-v2/components/cell/TextArea.vue    |  31 ++-
 packages/nc-gui-v2/components/cell/Url.vue    |  18 +-
 .../nc-gui-v2/components/smartsheet/Cell.vue  | 191 +++---------------
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  78 +------
 packages/nc-gui-v2/context/index.ts           |   1 +
 15 files changed, 145 insertions(+), 572 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 793a7529e2..d0e6800cef 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -8,7 +8,6 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AAlert: typeof import('ant-design-vue/es')['Alert']
-    AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
@@ -20,7 +19,6 @@ declare module '@vue/runtime-core' {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
-    ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
@@ -46,20 +44,16 @@ declare module '@vue/runtime-core' {
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
-    ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
-    ATableColumnGroup: typeof import('ant-design-vue/es')['TableColumnGroup']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
-    ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
-    ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/packages/nc-gui-v2/components/cell/Attachment.vue b/packages/nc-gui-v2/components/cell/Attachment.vue
index 52180b6cbb..fa9f20e9d5 100644
--- a/packages/nc-gui-v2/components/cell/Attachment.vue
+++ b/packages/nc-gui-v2/components/cell/Attachment.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import { inject, ref, useProject, watchEffect } from '#imports'
+import { inject, reactive, ref, useProject, watchEffect } from '#imports'
 import { useNuxtApp } from '#app'
-import { ColumnInj, MetaInj } from '~/context'
+import { ColumnInj, EditModeInj, MetaInj } from '~/context'
 import { NOCO } from '~/lib'
 import { isImage } from '~/utils'
 import MaterialPlusIcon from '~icons/mdi/plus'
@@ -20,7 +20,7 @@ const isPublicForm = inject<boolean>('isPublicForm', false)
 const isForm = inject<boolean>('isForm', false)
 const meta = inject(MetaInj)
 const column = inject(ColumnInj)
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
 const localFilesState = reactive([])
 const attachments = ref([])
@@ -28,7 +28,9 @@ const uploading = ref(false)
 const fileInput = ref<HTMLInputElement>()
 
 const { $api } = useNuxtApp()
+
 const { project } = useProject()
+
 const toast = useToast()
 
 watchEffect(() => {
@@ -97,15 +99,12 @@ const onFileSelection = async (e: unknown) => {
   }
   uploading.value = false
   emit('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
-
-  // this.$emit('input', JSON.stringify(this.localState))
-  // this.$emit('update')
 }
 </script>
 
 <template>
-  <div class="main h-100">
-    <div class="d-flex align-center img-container">
+  <div class="h-full w-full">
+    <div class="flex items-center img-container">
       <div class="d-flex no-overflow">
         <div
           v-for="(item, i) in isPublicForm ? localFilesState : attachments"
@@ -156,13 +155,11 @@ const onFileSelection = async (e: unknown) => {
         <MaterialPlusIcon />
       </div>
 
-      <v-spacer />
-
       <MaterialArrowExpandIcon @click.stop="dialog = true" />
       <!--      <v-icon class="expand-icon mr-1" x-small color="primary" @click.stop="dialog = true"> mdi-arrow-expand </v-icon> -->
     </div>
 
-    <input ref="fileInput" type="file" multiple class="d-none" @change="onFileSelection" />
+    <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelection" />
   </div>
 </template>
 
@@ -188,151 +185,4 @@ const onFileSelection = async (e: unknown) => {
 .expand-icon:hover {
   background-color: var(--v-primary-lighten4);
 }
-
-/*.img-container {
-  margin: 0 -2px;
-}
-
-.no-overflow {
-  overflow: hidden;
-}
-
-.add {
-  transition: 0.2s background-color;
-  !*background-color: #666666ee;*!
-  border-radius: 4px;
-  height: 33px;
-  margin: 5px 2px;
-}
-
-.add:hover {
-  !*background-color: #66666699;*!
-}
-
-.thumbnail {
-  height: 99px;
-  width: 99px;
-  margin: 2px;
-  border-radius: 4px;
-}
-
-.thumbnail img {
-  !*max-height: 33px;*!
-  max-width: 99px;
-}
-
-.main {
-  min-height: 20px;
-  position: relative;
-  height: auto;
-}
-
-.expand-icon {
-  margin-left: 8px;
-  border-radius: 2px;
-  !*opacity: 0;*!
-  transition: 0.3s background-color;
-}
-
-.expand-icon:hover {
-  !*opacity: 1;*!
-  background-color: var(--v-primary-lighten4);
-}
-
-.modal-thumbnail img {
-  height: 50px;
-  max-width: 100%;
-  border-radius: 4px;
-}
-
-.modal-thumbnail {
-  position: relative;
-  margin: 10px 10px;
-}
-
-.remove-icon {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-}
-
-.modal-thumbnail-card {
-  .download-icon {
-    position: absolute;
-    bottom: 5px;
-    right: 5px;
-    opacity: 0;
-    transition: 0.4s opacity;
-  }
-
-  &:hover .download-icon {
-    opacity: 1;
-  }
-}
-
-.image-overlay-container {
-  max-height: 100vh;
-  overflow-y: auto;
-  position: relative;
-}
-
-.image-overlay-container .close-icon {
-  position: fixed;
-  top: 15px;
-  right: 15px;
-}
-
-.overlay-thumbnail {
-  transition: 0.4s transform, 0.4s opacity;
-  opacity: 0.5;
-}
-
-.overlay-thumbnail.active {
-  transform: scale(1.4);
-  opacity: 1;
-}
-
-.overlay-thumbnail:hover {
-  opacity: 1;
-}
-
-.modal-title {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  overflow: hidden;
-}
-
-.modal-thumbnail-card {
-  transition: 0.4s transform;
-}
-
-.modal-thumbnail-card:hover {
-  transform: scale(1.05);
-}
-
-.drop-overlay {
-  z-index: 5;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 5px;
-  background: #aaaaaa44;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-}
-
-.expand-icon {
-  opacity: 0;
-  transition: 0.4s opacity;
-}
-
-.main:hover .expand-icon {
-  opacity: 1;
-}*/
 </style>
diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index 84db28f405..fe99200482 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { computed, inject, ref, useVModel } from '#imports'
+import { ColumnInj, EditModeInj } from '~/context'
 
-const { modelValue: value } = defineProps<Props>()
+interface Props {
+  modelValue: number
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
-interface Props {
-  modelValue: number
-}
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emit)
 
 const currencyMeta = computed(() => {
   return {
@@ -29,22 +27,20 @@ const currencyMeta = computed(() => {
 })
 const currency = computed(() => {
   try {
-    return isNaN(value)
-      ? value
+    return isNaN(vModel.value)
+      ? vModel.value
       : new Intl.NumberFormat(currencyMeta?.value?.currency_locale || 'en-US', {
           style: 'currency',
           currency: currencyMeta?.value?.currency_code || 'USD',
-        }).format(value)
+        }).format(vModel.value)
   } catch (e) {
-    return value
+    return vModel.value
   }
 })
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" />
-  <span v-else-if="value">{{ currency }}</span>
+  <input v-if="editEnabled" ref="root" v-model="vModel" />
+  <span v-else-if="vModel">{{ currency }}</span>
   <span v-else />
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index f743c5d3f5..aac35dbb60 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { computed } from '#imports'
+import { computed, inject, useVModel } from '#imports'
 import { isEmail } from '~/utils'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string
@@ -14,13 +15,13 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const root = ref<HTMLInputElement>()
-
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
 const validEmail = computed(() => isEmail(vModel.value))
+
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 58355b5c20..ec4c49f699 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number
@@ -13,21 +14,17 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>('editEnabled')
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
   <input
     v-if="editEnabled"
-    ref="root"
+    :ref="focus"
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 54ea12127b..46d609ae55 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
+
 interface Props {
   modelValue: number
 }
@@ -11,15 +14,11 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>('editEnabled')
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
-const vModel = useVModel(props, 'modelValue', emits)
+const vModel = useVModel(props, 'modelValue', emit)
 
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el.focus()
 
 function onKeyDown(evt: KeyboardEvent) {
   return evt.key === '.' && evt.preventDefault()
@@ -29,7 +28,7 @@ function onKeyDown(evt: KeyboardEvent) {
 <template>
   <input
     v-if="editEnabled"
-    ref="root"
+    :ref="focus"
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
diff --git a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
index 9f9e2e00e8..acf815fc54 100644
--- a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
+++ b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import MonacoJsonObjectEditor from '@/components/monaco/Editor.vue'
-import { inject } from '#imports'
+import { computed, inject } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | Record<string, any>
@@ -11,7 +12,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue', 'cancel'])
 
-const editEnabled = inject('editEnabled')
+const editEnabled = inject(EditModeInj)
 
 let expand = $ref(false)
 
@@ -19,7 +20,7 @@ let isValid = $ref(true)
 
 let error = $ref()
 
-const localState = computed({
+const vModel = computed({
   get: () => (typeof props.modelValue === 'string' ? JSON.parse(props.modelValue) : props.modelValue),
   set: (val) => {
     if (props.isForm) {
@@ -30,7 +31,7 @@ const localState = computed({
 
 function save() {
   expand = false
-  emits('update:modelValue', JSON.stringify(props.modelValue))
+  emits('update:modelValue', JSON.stringify(vModel.value))
 }
 
 function validate(n: boolean, e: any) {
@@ -69,14 +70,14 @@ export default {
     </div>
     <MonacoJsonObjectEditor
       v-if="expand"
-      v-model="localState"
+      v-model="vModel"
       class="text-left caption"
       style="width: 300px; min-height: min(600px, 80vh); min-width: 100%"
       @validate="validate"
     />
     <MonacoJsonObjectEditor
       v-else
-      v-model="localState"
+      v-model="vModel"
       class="text-left caption"
       style="width: 300px; min-height: 200px; min-width: 100%"
       @validate="validate"
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index e66f11c5de..fffc9f347c 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
 const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 
@@ -24,56 +24,6 @@ const localState = computed({
     emit('update:modelValue', val?.filter((v) => options.value.includes(v)).join(','))
   },
 })
-
-/* import colors from '@/components/project/spreadsheet/helpers/colors'
-
-export default {
-  name: 'SetListCheckboxCell',
-  props: {
-    value: String,
-    column: Object,
-    values: Array,
-  },
-  data() {},
-  computed: {
-    colors() {
-      return this.$store.state.settings.darkTheme ? colors.dark : colors.light
-    },
-    localState: {
-      get() {
-        return (this.value && this.value.split(',')) || []
-      },
-      set(val) {
-        this.$emit('input', val.join(','))
-        this.$emit('update')
-      },
-    },
-    setValues() {
-      if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map((v) => v.replace(/^'|'$/g, ''))
-      }
-      return this.values || []
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-  mounted() {
-    this.$el.focus()
-    const event = document.createEvent('MouseEvents')
-    event.initMouseEvent('mousedown', true, true, window)
-    this.$el.dispatchEvent(event)
-  },
-} */
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 112e26f4b7..66570ef61c 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string
@@ -12,45 +12,18 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
-const localState = computed({
+const vModel = computed({
   get: () => modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, ''),
   set: (val) => emit('update:modelValue', val),
 })
 
 const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
-
-/* import colors from '@/mixins/colors'
-
-export default {
-  name: 'EnumListEditableCell',
-  mixins: [colors],
-
-  props: {
-    value: String,
-    column: Object,
-    isForm: Boolean,
-  },
-  computed: {
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-} */
 </script>
 
 <template>
-  <v-select v-model="localState" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
+  <v-select v-model="vModel" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
     <!--    v-on="parentListeners"
     <template #selection="{ item }">
       <div
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 653842a105..d2acea4503 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -1,28 +1,57 @@
 <script setup lang="ts">
-import { inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: any
+  modelValue: string
 }
 
 const props = defineProps<Props>()
 
-const emits = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
-const root = ref<HTMLInputElement>()
+const vModel = useVModel(props, 'modelValue', emit)
 
-const vModel = useVModel(props, 'modelValue', emits)
-
-const onSetRef = (el: HTMLInputElement) => {
-  el.focus()
-}
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="onSetRef" v-model="vModel" class="h-full w-full outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" />
   <span v-else>{{ vModel }}</span>
 </template>
 
-<style scoped></style>
+<style scoped>
+input,
+textarea {
+  width: 100%;
+  height: 100%;
+  color: var(--v-textColor-base);
+  outline: none;
+}
+</style>
+<!--
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Naveen MR <oof1lab@gmail.com>
+ * @author Pranav C Balan <pranavxc@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+-->
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index e02de3d753..b911cc5268 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue?: string
@@ -7,32 +8,26 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emits = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
-const vModel = useVModel(props, 'modelValue', emits)
+const vModel = useVModel(props, 'modelValue', emit)
 
-const onSetRef = (el: HTMLInputElement) => {
-  el.focus()
-}
+const focus = (el: HTMLTextAreaElement) => el.focus()
 </script>
 
 <template>
-  <textarea
-    v-if="editEnabled"
-    :ref="onSetRef"
-    v-model="vModel"
-    rows="4"
-    class="h-full w-full min-h-[60px] outline-none"
-    @keydown.alt.enter.stop
-    @keydown.shift.enter.stop
-  />
+  <textarea v-if="editEnabled" :ref="focus" v-model="vModel" rows="4" @keydown.alt.enter.stop @keydown.shift.enter.stop />
   <span v-else>{{ vModel }}</span>
 </template>
 
 <style scoped>
-textarea:focus {
-  @apply ring-transparent;
+input,
+textarea {
+  width: 100%;
+  min-height: 60px;
+  height: 100%;
+  color: var(--v-textColor-base);
 }
 </style>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 760f93955a..3f39bd9988 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref } from '#imports'
-import { ColumnInj } from '~/context'
-import { isValidURL } from '~/utils/urlUtils'
+import { computed, inject, onMounted, ref } from '#imports'
+import { ColumnInj, EditModeInj } from '~/context'
+import { isValidURL } from '~/utils'
 
 interface Props {
   modelValue: string
@@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = computed({
   get: () => value,
@@ -26,21 +26,15 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
-const root = ref<HTMLInputElement>()
-
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" />
   <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value" target="_blank">{{ value }}</nuxt-link>
   <span v-else>{{ value }}</span>
 </template>
 
-<style scoped></style>
-
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 44ff43c52f..c757921cde 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -1,30 +1,25 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { provide } from 'vue'
-import { computed, useColumn } from '#imports'
+import { useColumn, useVModel } from '#imports'
 import { ColumnInj } from '~/context'
 
 interface Props {
   column: ColumnType
   modelValue: any
-  editEnabled: boolean
 }
 
-const { column, modelValue: value, editEnabled } = defineProps<Props>()
+interface Emits {
+  (event: 'update:modelValue', value: any): void
+}
 
-const emit = defineEmits(['update:modelValue'])
+const { column, ...rest } = defineProps<Props>()
 
-provide(ColumnInj, column)
+const emit = defineEmits<Emits>()
 
-provide(
-  'editEnabled',
-  computed(() => editEnabled),
-)
+provide(ColumnInj, column)
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(rest, 'modelValue', emit)
 
 const {
   isURL,
@@ -53,155 +48,27 @@ const {
 
 <template>
   <div class="nc-cell" @keydown.stop.left @keydown.stop.right @keydown.stop.up @keydown.stop.down>
-    <!--
-todo :
- JSONCell
--->
-
-    <!--    <RatingCell -->
-    <!--      v-if="isRating" -->
-    <!--      /> -->
-    <!--      v-model="localState"
-          :active="active"
-          :is-form="isForm"
-          :column="column"
-          :is-public-grid="isPublic && !isForm"
-          :is-public-form="isPublic && isForm"
-          :is-locked="isLocked"
-          v-on="$listeners"
-        /> -->
-
-    <!--    <DurationCell -->
-    <!--      v-else-if="isDuration" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :active="active" -->
-    <!--      :is-form="isForm" -->
-    <!--      :column="column" -->
-    <!--      :is-locked="isLocked" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <DatePickerCell -->
-    <!--      v-else-if="isDate" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <TimePickerCell -->
-    <!--      v-else-if="isTime" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      v-on="parentListeners" -->
-    <!--      @save="$emit('save')" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <DateTimePickerCell -->
-    <!--      v-else-if="isDateTime" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      ignore-focus -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <EnumCell -->
-    <!--      v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-    <!--    <EnumListCell -->
-    <!--      v-else-if="isEnum" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      :is-form="isForm"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      :column="column"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      v-on="parentListeners"&ndash;&gt; -->
-    <!-- &lt;!&ndash;    />&ndash;&gt; -->
-
-    <!--    <JsonEditableCell -->
-    <!--      v-else-if="isJSON" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :is-form="isForm" -->
-    <!--      v-on="parentListeners" -->
-    <!--      @input="$emit('save')" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <SetListEditableCell -->
-    <!--      v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-    <!--    <SetListCell -->
-    <!--      v-else-if="isSet" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <UrlCell v-else-if="isURL" -->
-    <!--                     /> -->
-    <!-- &lt;!&ndash;                     v-model="localState" v-on="parentListeners" &ndash;&gt; -->
-    <!-- &lt;!&ndash;    />&ndash;&gt; -->
-
-    <CellTextArea v-if="isTextArea" v-model="localState" />
-    <!--      v-model="localState"
-          :is-form="isForm"
-          v-on="parentListeners"
-        /> -->
-    <CellCheckbox v-else-if="isBoolean" v-model="localState" />
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      :is-form="isForm" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <CellAttachment v-else-if="isAttachment" v-model="localState" />
-    <CellSingleSelect v-else-if="isSingleSelect" v-model="localState" />
-    <CellMultiSelect v-else-if="isMultiSelect" v-model="localState" />
-    <CellDatePicker v-else-if="isDate" v-model="localState" />
-    <CellYearPicker v-else-if="isYear" v-model="localState" />
-    <CellDateTimePicker v-else-if="isDateTime" v-model="localState" />
-    <CellTimePicker v-else-if="isTime" v-model="localState" />
-    <CellRating v-else-if="isRating" v-model="localState" />
-    <!--      v-model="localState"
-          :active="active"
-          :db-alias="dbAlias"
-          :meta="meta"
-          :is-form="isForm"
-          :column="column"
-          :is-public-grid="isPublic && !isForm"
-          :is-public-form="isPublic && isForm"
-          :view-id="viewId"
-          :is-locked="isLocked"
-          v-on="$listeners"
-        /> -->
-    <CellDuration v-else-if="isDuration" v-model="localState" />
-    <CellEmail v-else-if="isEmail" v-model="localState" />
-    <CellUrl v-else-if="isURL" v-model="localState" />
-    <CellPhoneNumber v-else-if="isPhoneNumber" v-model="localState" />
-    <!-- v-on="parentListeners"
-        />
-    -->
-    <CellCurrency v-else-if="isCurrency" v-model="localState" />
-    <CellDecimal v-else-if="isDecimal" v-model="localState" />
-    <CellInteger v-else-if="isInt" v-model="localState" />
-    <CellFloat v-else-if="isFloat" v-model="localState" />
-    <CellText v-else-if="isString" v-model="localState" />
-    <!-- v-on="parentListeners"
-        />
-    -->
-    <CellPercent v-else-if="isPercent" v-model="localState" />
-    <CellText v-else v-model="localState" />
-    <!--  v-on="$listeners"   <span v-if="hint" class="nc-hint">{{ hint }}</span> -->
-
-    <!--    <div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" /> -->
+    <CellTextArea v-if="isTextArea" v-model="vModel" />
+    <CellCheckbox v-else-if="isBoolean" v-model="vModel" />
+    <CellAttachment v-else-if="isAttachment" v-model="vModel" />
+    <CellSingleSelect v-else-if="isSingleSelect" v-model="vModel" />
+    <CellMultiSelect v-else-if="isMultiSelect" v-model="vModel" />
+    <CellDatePicker v-else-if="isDate" v-model="vModel" />
+    <CellYearPicker v-else-if="isYear" v-model="vModel" />
+    <CellDateTimePicker v-else-if="isDateTime" v-model="vModel" />
+    <CellTimePicker v-else-if="isTime" v-model="vModel" />
+    <CellRating v-else-if="isRating" v-model="vModel" />
+    <CellDuration v-else-if="isDuration" v-model="vModel" />
+    <CellEmail v-else-if="isEmail" v-model="vModel" />
+    <CellUrl v-else-if="isURL" v-model="vModel" />
+    <CellPhoneNumber v-else-if="isPhoneNumber" v-model="vModel" />
+    <CellCurrency v-else-if="isCurrency" v-model="vModel" />
+    <CellDecimal v-else-if="isDecimal" v-model="vModel" />
+    <CellInteger v-else-if="isInt" v-model="vModel" />
+    <CellFloat v-else-if="isFloat" v-model="vModel" />
+    <CellText v-else-if="isString" v-model="vModel" />
+    <CellPercent v-else-if="isPercent" v-model="vModel" />
+    <CellText v-else v-model="vModel" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index bae3fbbf1e..f3c8930496 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -12,6 +12,7 @@ import {
 import {
   ActiveViewInj,
   ChangePageInj,
+  EditModeInj,
   FieldsInj,
   IsFormInj,
   IsGridInj,
@@ -44,6 +45,7 @@ provide(IsFormInj, false)
 provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
+provide(EditModeInj, editEnabled)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 reloadViewDataHook?.on(() => {
@@ -142,68 +144,6 @@ if (meta) useProvideColumnCreateStore(meta)
               @click="selectCell(rowIndex, colIndex)"
               @dblclick="editEnabled = true"
             >
-              <!--          @contextmenu=" -->
-              <!--            showRowContextMenu($event, rowObj, rowMeta, row, col, columnObj) -->
-              <!--          " -->
-              <!--        > -->
-              <!--          <virtual-cell -->
-              <!--            v-if="isVirtualCol(columnObj)" -->
-              <!--            :password="password" -->
-              <!--            :is-public="isPublicView" -->
-              <!--            :metas="metas" -->
-              <!--            :is-locked="isLocked" -->
-              <!--            :column="columnObj" -->
-              <!--            :row="rowObj" -->
-              <!--            :nodes="nodes" -->
-              <!--            :meta="meta" -->
-              <!--            :api="api" -->
-              <!--            :active="selected.col === col && selected.row === row" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            :is-new="rowMeta.new" -->
-              <!--            v-on="$listeners" -->
-              <!--            @updateCol=" -->
-              <!--              (...args) => -->
-              <!--                updateCol( -->
-              <!--                  ...args, -->
-              <!--                  columnObj.bt -->
-              <!--                    && meta.columns.find( -->
-              <!--                      (c) => c.column_name === columnObj.bt.column_name, -->
-              <!--                    ), -->
-              <!--                  col, -->
-              <!--                  row, -->
-              <!--                ) -->
-              <!--            " -->
-              <!--            @saveRow="onCellValueChange(col, row, columnObj, true)" -->
-              <!--          /> -->
-
-              <!--          <editable-cell -->
-              <!--            v-else-if=" -->
-              <!--              ((isPkAvail || rowMeta.new) -->
-              <!--                && !isView -->
-              <!--                && !isLocked -->
-              <!--                && !isPublicView -->
-              <!--                && editEnabled.col === col -->
-              <!--                && editEnabled.row === row) -->
-              <!--                || enableEditable(columnObj) -->
-              <!--            " -->
-              <!--            v-model="rowObj[columnObj.title]" -->
-              <!--            :column="columnObj" -->
-              <!--            :meta="meta" -->
-              <!--            :active="selected.col === col && selected.row === row" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            :db-alias="nodes.dbAlias" -->
-              <!--            :is-locked="isLocked" -->
-              <!--            :is-public="isPublicView" -->
-              <!--            :view-id="viewId" -->
-              <!--            @save="editEnabled = {}; onCellValueChange(col, row, columnObj, true);" -->
-              <!--            @cancel="editEnabled = {}" -->
-              <!--            @update="onCellValueChange(col, row, columnObj, false)" -->
-              <!--            @blur="onCellValueChange(col, row, columnObj, true)" -->
-              <!--            @input="unsaved = true" -->
-              <!--            @navigateToNext="navigateToNext" -->
-              <!--            @navigateToPrev="navigateToPrev" -->
-              <!--          /> -->
-
               <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
 
               <SmartsheetCell
@@ -213,20 +153,6 @@ if (meta) useProvideColumnCreateStore(meta)
                 :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
                 @update:model-value="updateRowProperty(row, columnObj.title)"
               />
-
-              <!--          <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->
-              <!-- :selected="selected.col === col && selected.row === row" -->
-              <!--        :is-locked="isLocked" -->
-              <!--            :column="columnObj" -->
-              <!--            :meta="meta" -->
-              <!--            :db-alias="nodes.dbAlias" -->
-              <!--            :value="rowObj[columnObj.title]" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            @enableedit=" -->
-              <!--              makeSelected(col, row); -->
-              <!--              makeEditable(col, row, columnObj.ai, rowMeta); -->
-              <!--            " -->
-              <!--          /> -->
             </td>
           </tr>
         </tbody>
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index d5213f89b0..809c3ee5cd 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -21,3 +21,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
 
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
+export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')

From b2769d317e4503787f5fe87c7380a84100b24e02 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 14:13:47 +0200
Subject: [PATCH 05/47] chore(gui-v2): add null to possible modelValue input in
 Email.vue

---
 packages/nc-gui-v2/components/cell/Email.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index aac35dbb60..b81b447a88 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -4,7 +4,7 @@ import { isEmail } from '~/utils'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 interface Emits {

From 9aac08e6b03bab075dcc6756c0f5371ecb32d109 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 14:14:02 +0200
Subject: [PATCH 06/47] chore(gui-v2): add 0.5 px right sidebar top offset

---
 packages/nc-gui-v2/components/smartsheet/sidebar/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 6f8de8eac4..e3d3c9497f 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -73,7 +73,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     collapsiple
     collapsed-width="50"
     width="250"
-    class="shadow !mt-[-9px]"
+    class="shadow !mt-[-9.5px]"
     style="height: calc(100% + 9px)"
     theme="light"
   >

From e76c9dce4906c747f1b7a919b8f51029a718e323 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 14:14:16 +0200
Subject: [PATCH 07/47] fix(gui-v2): useViewColumns throwing error if col is
 undefined

---
 .../nc-gui-v2/composables/useViewColumns.ts   | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 450d737b29..ffd7ea68f9 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -38,13 +38,17 @@ export function useViewColumns(
         }
       }, {})
       fields.value = meta.value?.columns
-        ?.map((c) => ({
-          title: c.title,
-          fk_column_id: c.id,
-          ...(fieldById[c.id as string] ? fieldById[c.id as string] : {}),
-          order: (fieldById[c.id as string] && fieldById[c.id as string].order) || order++,
-          system: isSystemColumn(fieldById[c.fk_model_id as string]?.type as ColumnType),
-        }))
+        ?.map((column) => {
+          const currentColumnField = fieldById[column.id!] || {}
+
+          return {
+            title: column.title,
+            fk_column_id: column.id,
+            ...currentColumnField,
+            order: currentColumnField.order || order++,
+            system: isSystemColumn(currentColumnField.type || false),
+          }
+        })
         .sort((a, b) => a.order - b.order)
     } else if (isPublic) {
       fields.value = meta.value.columns as any
@@ -124,7 +128,7 @@ export function useViewColumns(
         }
         return c.show
       })
-      ?.sort((c1, c2) => c1.order - c2.order)
+      ?.sort((a, b) => a.order - b.order)
       ?.map((c) => metaColumnById?.value?.[c.fk_column_id as string]) || []) as ColumnType[]
   })
 

From 213c028011cb33d472c1be49fa6d4bc0a72f5f83 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 14:31:25 +0200
Subject: [PATCH 08/47] chore(gui-v2): update types in `useViewColumns`

---
 .../nc-gui-v2/composables/useViewColumns.ts   | 79 ++++++++++---------
 1 file changed, 43 insertions(+), 36 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index ffd7ea68f9..9c5a522681 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -29,15 +29,18 @@ export function useViewColumns(
 
     let order = 1
     if (view?.value?.id) {
-      const data = await $api.dbViewColumn.list(view?.value?.id as string)
-      const fieldById: Record<string, any> = data.reduce((o: Record<string, any>, f: any) => {
-        f.show = !!f.show
+      const data = (await $api.dbViewColumn.list(view?.value?.id)) as any[]
+
+      const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
+        curr.show = !!curr.show
+
         return {
-          ...o,
-          [f.fk_column_id as string]: f,
+          ...acc,
+          [curr.fk_column_id]: curr,
         }
       }, {})
-      fields.value = meta.value?.columns
+
+      fields.value = meta.value.columns
         ?.map((column) => {
           const currentColumnField = fieldById[column.id!] || {}
 
@@ -56,32 +59,37 @@ export function useViewColumns(
   }
 
   const showAll = async () => {
-    await $api.dbView.showAllColumn(view?.value?.id as string)
+    if (view?.value?.id) await $api.dbView.showAllColumn(view.value.id)
+
     await loadViewColumns()
     reloadData?.()
   }
   const hideAll = async () => {
-    await $api.dbView.hideAllColumn(view?.value?.id as string)
+    if (view?.value?.id) await $api.dbView.hideAllColumn(view.value.id)
+
     await loadViewColumns()
     reloadData?.()
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
-    if (field.id) {
-      await $api.dbViewColumn.update(view?.value?.id as string, field.id, field)
-    } else {
-      if (fields.value) fields.value[index] = (await $api.dbViewColumn.create(view?.value?.id as string, field)) as any
+    if (field.id && view?.value?.id) {
+      await $api.dbViewColumn.update(view.value.id, field.id, field)
+    } else if (view?.value?.id) {
+      if (fields.value) fields.value[index] = (await $api.dbViewColumn.create(view.value.id, field)) as any
     }
+
     reloadData?.()
   }
 
   const metaColumnById = computed(() => {
-    return meta?.value?.columns?.reduce<Record<string, ColumnType>>((o: Record<string, any>, c: any) => {
-      return {
-        ...o,
-        [c.id]: c,
-      }
-    }, {})
+    return (
+      meta.value.columns?.reduce<Record<string, ColumnType>>((acc, curr) => {
+        return {
+          ...acc,
+          [curr.id!]: curr,
+        }
+      }, {}) || {}
+    )
   })
 
   const showSystemFields = computed({
@@ -90,28 +98,27 @@ export function useViewColumns(
       return (view?.value as any)?.show_system_fields || false
     },
     set(v) {
-      if (view?.value) {
-        $api.dbView.update(
-          view?.value?.id as string,
-          {
-            // todo: update swagger
-            show_system_fields: v,
-          } as any,
-        )
+      if (view?.value?.id) {
+        $api.dbView.update(view.value.id, {
+          // todo: update swagger
+          show_system_fields: v,
+        } as any)
         ;(view.value as any).show_system_fields = v
       }
     },
   })
 
   const filteredFieldList = computed(() => {
-    return fields.value?.filter((field) => {
-      // hide system columns if not enabled
-      if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id as string])) {
-        return false
-      }
+    return (
+      fields.value?.filter((field) => {
+        // hide system columns if not enabled
+        if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) {
+          return false
+        }
 
-      return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
-    })
+        return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
+      }) || {}
+    )
   })
 
   const sortedAndFilteredFields = computed<ColumnType[]>(() => {
@@ -121,15 +128,15 @@ export function useViewColumns(
         if (
           !showSystemFields.value &&
           metaColumnById.value &&
-          metaColumnById?.value?.[c.fk_column_id as string] &&
-          isSystemColumn(metaColumnById?.value?.[c.fk_column_id as string])
+          metaColumnById?.value?.[c.fk_column_id!] &&
+          isSystemColumn(metaColumnById.value?.[c.fk_column_id!])
         ) {
           return false
         }
         return c.show
       })
       ?.sort((a, b) => a.order - b.order)
-      ?.map((c) => metaColumnById?.value?.[c.fk_column_id as string]) || []) as ColumnType[]
+      ?.map((c) => metaColumnById?.value?.[c.fk_column_id!]) || []) as ColumnType[]
   })
 
   // reload view columns when table meta changes

From 380675d152dd049ca5ad8e512c13da228b5da50b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 16:14:24 +0200
Subject: [PATCH 09/47] chore(gui-v2,deps): update vueuse to ^9.0.2

---
 packages/nc-gui-v2/package-lock.json | 544 +++++++++++----------------
 packages/nc-gui-v2/package.json      |   6 +-
 2 files changed, 225 insertions(+), 325 deletions(-)

diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 8f0a2e375d..a240b8d76f 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -5,8 +5,8 @@
   "packages": {
     "": {
       "dependencies": {
-        "@vueuse/core": "^8.7.5",
-        "@vueuse/integrations": "^8.9.1",
+        "@vueuse/core": "^9.0.2",
+        "@vueuse/integrations": "^9.0.2",
         "ant-design-vue": "^3.1.0-rc.6",
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
@@ -40,7 +40,7 @@
         "@vitest/ui": "^0.18.0",
         "@vue/compiler-sfc": "^3.2.37",
         "@vue/test-utils": "^2.0.2",
-        "@vueuse/nuxt": "^8.6.0",
+        "@vueuse/nuxt": "^9.0.2",
         "@windicss/plugin-animations": "^1.0.9",
         "@windicss/plugin-question-mark": "^0.1.1",
         "@windicss/plugin-scrollbar": "^1.2.3",
@@ -1546,28 +1546,28 @@
       "dev": true
     },
     "node_modules/@nuxt/kit": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.4.tgz",
-      "integrity": "sha512-ZBSeHFy3fPUx0equCtyP6eVUAZQWwRqTp2YnHSFqM5+yhN5aTGo8gBlfwttVBr4yhFBpGFRHhQj/iNPqrCeTnQ==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.6.tgz",
+      "integrity": "sha512-+lxSd6dSWlAzMXfGOPcY4856xnMF1Ck1rycFUZ+K2QYiDXphq/fiW2eMaWLVvqgPyL2Box2WzVDZJ6C5ceptcw==",
       "dev": true,
       "dependencies": {
-        "@nuxt/schema": "^3.0.0-rc.4",
-        "c12": "^0.2.7",
+        "@nuxt/schema": "^3.0.0-rc.6",
+        "c12": "^0.2.8",
         "consola": "^2.15.3",
         "defu": "^6.0.0",
         "globby": "^13.1.2",
         "hash-sum": "^2.0.0",
         "ignore": "^5.2.0",
-        "jiti": "^1.13.0",
+        "jiti": "^1.14.0",
         "knitwork": "^0.1.2",
         "lodash.template": "^4.5.0",
-        "mlly": "^0.5.2",
-        "pathe": "^0.3.0",
-        "pkg-types": "^0.3.2",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3",
         "scule": "^0.2.1",
         "semver": "^7.3.7",
         "unctx": "^1.1.4",
-        "unimport": "^0.2.7",
+        "unimport": "^0.4.5",
         "untyped": "^0.4.4"
       },
       "engines": {
@@ -1575,27 +1575,27 @@
       }
     },
     "node_modules/@nuxt/kit/node_modules/unimport": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-      "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+      "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^4.2.1",
         "escape-string-regexp": "^5.0.0",
         "fast-glob": "^3.2.11",
-        "local-pkg": "^0.4.1",
+        "local-pkg": "^0.4.2",
         "magic-string": "^0.26.2",
-        "mlly": "^0.5.3",
-        "pathe": "^0.3.0",
+        "mlly": "^0.5.5",
+        "pathe": "^0.3.2",
         "scule": "^0.2.1",
         "strip-literal": "^0.4.0",
-        "unplugin": "^0.7.0"
+        "unplugin": "^0.7.2"
       }
     },
     "node_modules/@nuxt/kit/node_modules/unplugin": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-      "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+      "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.7.1",
@@ -1625,48 +1625,48 @@
       }
     },
     "node_modules/@nuxt/schema": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.4.tgz",
-      "integrity": "sha512-5yjfKvPJ/NboevQYZLyO1SS9nJW6KHtdd7Ei61D19gYGtnN+aOpxOnUX08A1rZMb3G2Cw5JRxVeF9+AfBYefJg==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.6.tgz",
+      "integrity": "sha512-BcD5YtWRhn+jU2DlzuI1TeITFeOt5x6qm2KeaU/d5jzJ0oZDzmZwKsAimLtRbHwyU6/kKa+zFbK6pp5obm1XLg==",
       "dev": true,
       "dependencies": {
-        "c12": "^0.2.7",
+        "c12": "^0.2.8",
         "create-require": "^1.1.1",
         "defu": "^6.0.0",
-        "jiti": "^1.13.0",
-        "pathe": "^0.3.0",
+        "jiti": "^1.14.0",
+        "pathe": "^0.3.2",
         "postcss-import-resolver": "^2.0.0",
         "scule": "^0.2.1",
         "std-env": "^3.1.1",
-        "ufo": "^0.8.4",
-        "unimport": "^0.2.7"
+        "ufo": "^0.8.5",
+        "unimport": "^0.4.5"
       },
       "engines": {
         "node": "^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@nuxt/schema/node_modules/unimport": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-      "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+      "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^4.2.1",
         "escape-string-regexp": "^5.0.0",
         "fast-glob": "^3.2.11",
-        "local-pkg": "^0.4.1",
+        "local-pkg": "^0.4.2",
         "magic-string": "^0.26.2",
-        "mlly": "^0.5.3",
-        "pathe": "^0.3.0",
+        "mlly": "^0.5.5",
+        "pathe": "^0.3.2",
         "scule": "^0.2.1",
         "strip-literal": "^0.4.0",
-        "unplugin": "^0.7.0"
+        "unplugin": "^0.7.2"
       }
     },
     "node_modules/@nuxt/schema/node_modules/unplugin": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-      "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+      "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.7.1",
@@ -2349,9 +2349,9 @@
       "dev": true
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
-      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
+      "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.30.0",
@@ -2812,58 +2812,23 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.7.5.tgz",
-      "integrity": "sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.7.5",
-        "@vueuse/shared": "8.7.5",
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.7.5.tgz",
-      "integrity": "sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.0.2.tgz",
+      "integrity": "sha512-kOIqaQPSs7OSByWg1ulEKRUJbsq3FmbJiUr0RhEKpt3O1Uhl4DrDj85DUbQBABVYgPvSaY6AE/fP3/FOcRIOoQ==",
       "dependencies": {
+        "@types/web-bluetooth": "^0.0.15",
+        "@vueuse/metadata": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
       }
     },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-      "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+      "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -2895,12 +2860,12 @@
       }
     },
     "node_modules/@vueuse/integrations": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-8.9.1.tgz",
-      "integrity": "sha512-xeApqTnMBUzlrpJacCdaFqUfTEf7NZUgHKJTsK9I41ISf2+pywgwpfjVk6KVSKk+GuE2MB1c945lul5jA5IcwA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-9.0.2.tgz",
+      "integrity": "sha512-Z7xwgjSaG7FeBDfFhwXbspLrLKdvjFkI/AfDJ/jz9bez73nkg3Pqnz7jD4rZ6o3lOBJ6cNLizCF5E2qEXtSLJw==",
       "dependencies": {
-        "@vueuse/core": "8.9.1",
-        "@vueuse/shared": "8.9.1",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "funding": {
@@ -2951,67 +2916,60 @@
         }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/@vueuse/core": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.1.tgz",
-      "integrity": "sha512-a7goYb/gJxjXRBw4Fr/jEACiN33ghwM1ohJVu+Zwsr3lNL4qCQ1nU+ogta98lNg5hXJxWj7mYEmQDjjyWOu5nA==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.9.1",
-        "@vueuse/shared": "8.9.1",
-        "vue-demi": "*"
+    "node_modules/@vueuse/integrations/node_modules/vue-demi": {
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+      "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
       },
       "peerDependenciesMeta": {
         "@vue/composition-api": {
           "optional": true
-        },
-        "vue": {
-          "optional": true
         }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/@vueuse/metadata": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.1.tgz",
-      "integrity": "sha512-6LADOlyl3oENHa9dsoY7LXjU1Mh14DnpM6ztETI3hpm5ZffOMIG5CB2Q6aEZfIvYr1lkJVmG2L82wFKk7VRfIA==",
+    "node_modules/@vueuse/metadata": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.0.2.tgz",
+      "integrity": "sha512-TRh+TNUYXiodatSAxd0xZc7sh4RfktVVgNFIN7TCQXKyancbCAcWfHvKfgdlX8LcqSBxKoHVa90n0XdUbboTkw==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/@vueuse/shared": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.1.tgz",
-      "integrity": "sha512-klZfn7ijI3juqVgpfQVrrlBh4uTFajwSCWm8Cdt45Kg26b1LZ9jn9n7J6GhmkFay5016GnjjivQoekQSMeJNUg==",
+    "node_modules/@vueuse/nuxt": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-9.0.2.tgz",
+      "integrity": "sha512-1NYT3DC58fZ0YxFGaGZ4V0uAd3E4YMMnalKd1K1HBvrW3exB9zcBW52spKMspZL9dnNlxyv3TauH52b94fMxqg==",
+      "dev": true,
       "dependencies": {
+        "@nuxt/kit": "^3.0.0-rc.6",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/metadata": "9.0.2",
+        "local-pkg": "^0.4.2",
         "vue-demi": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/vue-demi": {
+    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
       "version": "0.13.2",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
       "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -3033,35 +2991,21 @@
         }
       }
     },
-    "node_modules/@vueuse/metadata": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.7.5.tgz",
-      "integrity": "sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/nuxt": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-8.7.5.tgz",
-      "integrity": "sha512-e+JSiNCdWaKyTiBtM856uNJaXeCw8Ka423AGsuvq+D+GXXQe0RhHzqqLS6pQutjWuftNRBRCOiITOzhtjMP+gA==",
-      "dev": true,
+    "node_modules/@vueuse/shared": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.0.2.tgz",
+      "integrity": "sha512-KwBDefK2ljLESpt0ffe2w8EGUCb3IaMfTzeytB/uHHjHOGOEIHLHHyn8W2C48uGQEvoe5iwaW4Bfp8cRUM6IFA==",
       "dependencies": {
-        "@nuxt/kit": "^3.0.0-rc.4",
-        "@vueuse/core": "8.7.5",
-        "@vueuse/metadata": "8.7.5",
-        "local-pkg": "^0.4.1",
         "vue-demi": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-      "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
-      "dev": true,
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+      "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -3998,26 +3942,20 @@
       }
     },
     "node_modules/c12": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.7.tgz",
-      "integrity": "sha512-ih1nuHbZ6Ltf8Wss96JH6YvKIW5+9+uLAA08LUQAoDrFPGSyvPvQv/QBIRE+dCBWOK4PcwH0ylRkSa9huI1Acw==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.8.tgz",
+      "integrity": "sha512-JomSyVwGnqndRdVVW6SGnHUeHIfJFQNe/4zPFK6zLKPQm8US+hNr4kZP7xeNnzjn3jnQUsBbPdT85fm8K5Pr4A==",
       "dev": true,
       "dependencies": {
         "defu": "^6.0.0",
-        "dotenv": "^16.0.0",
+        "dotenv": "^16.0.1",
         "gittar": "^0.1.1",
-        "jiti": "^1.12.14",
-        "mlly": "^0.5.1",
-        "pathe": "^0.2.0",
-        "rc9": "^1.2.1"
+        "jiti": "^1.14.0",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "rc9": "^1.2.2"
       }
     },
-    "node_modules/c12/node_modules/pathe": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-      "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-      "dev": true
-    },
     "node_modules/cac": {
       "version": "6.7.12",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.12.tgz",
@@ -8990,9 +8928,9 @@
       }
     },
     "node_modules/local-pkg": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.1.tgz",
-      "integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.2.tgz",
+      "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==",
       "dev": true,
       "engines": {
         "node": ">=14"
@@ -9447,21 +9385,15 @@
       }
     },
     "node_modules/mlly": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.3.tgz",
-      "integrity": "sha512-im69tuLD9EJh9fc9TZRpJEFvsBcGMez7glUCWDcHWWCKzhvPmNvyaYjp/+h0qJJN/Xovrs//GzGjOOKmFw4Gog==",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
+      "integrity": "sha512-2R4JT/SxRDPexomw4rmHYY/gWAGmL9Kkq1OR76Ua6w+P340a1aBDTWzKo2kAlxzrG82OdXs5VB9Lmcmyit0Obg==",
       "dev": true,
       "dependencies": {
-        "pathe": "^0.2.0",
-        "pkg-types": "^0.3.2"
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3"
       }
     },
-    "node_modules/mlly/node_modules/pathe": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-      "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-      "dev": true
-    },
     "node_modules/monaco-editor": {
       "version": "0.33.0",
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
@@ -10531,9 +10463,9 @@
       }
     },
     "node_modules/pathe": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.0.tgz",
-      "integrity": "sha512-3vUjp552BJzCw9vqKsO5sttHkbYqqsZtH0x1PNtItgqx8BXEXzoY1SYRKcL6BTyVh4lGJGLj0tM42elUDMvcYA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.3.tgz",
+      "integrity": "sha512-x3nrPvG0HDSDzUiJ0WqtzhN4MD+h5B+dFJ3/qyxVuARlr4Y3aJv8gri2cZzp9Z8sGs2a+aG9gNbKngh3gme57A==",
       "dev": true
     },
     "node_modules/pathval": {
@@ -13092,9 +13024,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.4.tgz",
-      "integrity": "sha512-/+BmBDe8GvlB2nIflWasLLAInjYG0bC9HRnfEpNi4sw77J2AJNnEVnTDReVrehoh825+Q/evF3THXTAweyam2g==",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.5.tgz",
+      "integrity": "sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==",
       "dev": true
     },
     "node_modules/unbox-primitive": {
@@ -15554,53 +15486,53 @@
       "dev": true
     },
     "@nuxt/kit": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.4.tgz",
-      "integrity": "sha512-ZBSeHFy3fPUx0equCtyP6eVUAZQWwRqTp2YnHSFqM5+yhN5aTGo8gBlfwttVBr4yhFBpGFRHhQj/iNPqrCeTnQ==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.6.tgz",
+      "integrity": "sha512-+lxSd6dSWlAzMXfGOPcY4856xnMF1Ck1rycFUZ+K2QYiDXphq/fiW2eMaWLVvqgPyL2Box2WzVDZJ6C5ceptcw==",
       "dev": true,
       "requires": {
-        "@nuxt/schema": "^3.0.0-rc.4",
-        "c12": "^0.2.7",
+        "@nuxt/schema": "^3.0.0-rc.6",
+        "c12": "^0.2.8",
         "consola": "^2.15.3",
         "defu": "^6.0.0",
         "globby": "^13.1.2",
         "hash-sum": "^2.0.0",
         "ignore": "^5.2.0",
-        "jiti": "^1.13.0",
+        "jiti": "^1.14.0",
         "knitwork": "^0.1.2",
         "lodash.template": "^4.5.0",
-        "mlly": "^0.5.2",
-        "pathe": "^0.3.0",
-        "pkg-types": "^0.3.2",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3",
         "scule": "^0.2.1",
         "semver": "^7.3.7",
         "unctx": "^1.1.4",
-        "unimport": "^0.2.7",
+        "unimport": "^0.4.5",
         "untyped": "^0.4.4"
       },
       "dependencies": {
         "unimport": {
-          "version": "0.2.10",
-          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-          "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+          "version": "0.4.7",
+          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+          "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
           "dev": true,
           "requires": {
             "@rollup/pluginutils": "^4.2.1",
             "escape-string-regexp": "^5.0.0",
             "fast-glob": "^3.2.11",
-            "local-pkg": "^0.4.1",
+            "local-pkg": "^0.4.2",
             "magic-string": "^0.26.2",
-            "mlly": "^0.5.3",
-            "pathe": "^0.3.0",
+            "mlly": "^0.5.5",
+            "pathe": "^0.3.2",
             "scule": "^0.2.1",
             "strip-literal": "^0.4.0",
-            "unplugin": "^0.7.0"
+            "unplugin": "^0.7.2"
           }
         },
         "unplugin": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-          "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+          "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
           "dev": true,
           "requires": {
             "acorn": "^8.7.1",
@@ -15612,45 +15544,45 @@
       }
     },
     "@nuxt/schema": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.4.tgz",
-      "integrity": "sha512-5yjfKvPJ/NboevQYZLyO1SS9nJW6KHtdd7Ei61D19gYGtnN+aOpxOnUX08A1rZMb3G2Cw5JRxVeF9+AfBYefJg==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.6.tgz",
+      "integrity": "sha512-BcD5YtWRhn+jU2DlzuI1TeITFeOt5x6qm2KeaU/d5jzJ0oZDzmZwKsAimLtRbHwyU6/kKa+zFbK6pp5obm1XLg==",
       "dev": true,
       "requires": {
-        "c12": "^0.2.7",
+        "c12": "^0.2.8",
         "create-require": "^1.1.1",
         "defu": "^6.0.0",
-        "jiti": "^1.13.0",
-        "pathe": "^0.3.0",
+        "jiti": "^1.14.0",
+        "pathe": "^0.3.2",
         "postcss-import-resolver": "^2.0.0",
         "scule": "^0.2.1",
         "std-env": "^3.1.1",
-        "ufo": "^0.8.4",
-        "unimport": "^0.2.7"
+        "ufo": "^0.8.5",
+        "unimport": "^0.4.5"
       },
       "dependencies": {
         "unimport": {
-          "version": "0.2.10",
-          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-          "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+          "version": "0.4.7",
+          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+          "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
           "dev": true,
           "requires": {
             "@rollup/pluginutils": "^4.2.1",
             "escape-string-regexp": "^5.0.0",
             "fast-glob": "^3.2.11",
-            "local-pkg": "^0.4.1",
+            "local-pkg": "^0.4.2",
             "magic-string": "^0.26.2",
-            "mlly": "^0.5.3",
-            "pathe": "^0.3.0",
+            "mlly": "^0.5.5",
+            "pathe": "^0.3.2",
             "scule": "^0.2.1",
             "strip-literal": "^0.4.0",
-            "unplugin": "^0.7.0"
+            "unplugin": "^0.7.2"
           }
         },
         "unplugin": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-          "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+          "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
           "dev": true,
           "requires": {
             "acorn": "^8.7.1",
@@ -16228,9 +16160,9 @@
       "dev": true
     },
     "@types/web-bluetooth": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
-      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
+      "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
     },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.30.0",
@@ -16575,28 +16507,20 @@
       }
     },
     "@vueuse/core": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.7.5.tgz",
-      "integrity": "sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.0.2.tgz",
+      "integrity": "sha512-kOIqaQPSs7OSByWg1ulEKRUJbsq3FmbJiUr0RhEKpt3O1Uhl4DrDj85DUbQBABVYgPvSaY6AE/fP3/FOcRIOoQ==",
       "requires": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.7.5",
-        "@vueuse/shared": "8.7.5",
+        "@types/web-bluetooth": "^0.0.15",
+        "@vueuse/metadata": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "dependencies": {
-        "@vueuse/shared": {
-          "version": "8.7.5",
-          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.7.5.tgz",
-          "integrity": "sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==",
-          "requires": {
-            "vue-demi": "*"
-          }
-        },
         "vue-demi": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-          "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+          "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
           "requires": {}
         }
       }
@@ -16609,62 +16533,38 @@
       "requires": {}
     },
     "@vueuse/integrations": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-8.9.1.tgz",
-      "integrity": "sha512-xeApqTnMBUzlrpJacCdaFqUfTEf7NZUgHKJTsK9I41ISf2+pywgwpfjVk6KVSKk+GuE2MB1c945lul5jA5IcwA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-9.0.2.tgz",
+      "integrity": "sha512-Z7xwgjSaG7FeBDfFhwXbspLrLKdvjFkI/AfDJ/jz9bez73nkg3Pqnz7jD4rZ6o3lOBJ6cNLizCF5E2qEXtSLJw==",
       "requires": {
-        "@vueuse/core": "8.9.1",
-        "@vueuse/shared": "8.9.1",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "dependencies": {
-        "@vueuse/core": {
-          "version": "8.9.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.1.tgz",
-          "integrity": "sha512-a7goYb/gJxjXRBw4Fr/jEACiN33ghwM1ohJVu+Zwsr3lNL4qCQ1nU+ogta98lNg5hXJxWj7mYEmQDjjyWOu5nA==",
-          "requires": {
-            "@types/web-bluetooth": "^0.0.14",
-            "@vueuse/metadata": "8.9.1",
-            "@vueuse/shared": "8.9.1",
-            "vue-demi": "*"
-          }
-        },
-        "@vueuse/metadata": {
-          "version": "8.9.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.1.tgz",
-          "integrity": "sha512-6LADOlyl3oENHa9dsoY7LXjU1Mh14DnpM6ztETI3hpm5ZffOMIG5CB2Q6aEZfIvYr1lkJVmG2L82wFKk7VRfIA=="
-        },
-        "@vueuse/shared": {
-          "version": "8.9.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.1.tgz",
-          "integrity": "sha512-klZfn7ijI3juqVgpfQVrrlBh4uTFajwSCWm8Cdt45Kg26b1LZ9jn9n7J6GhmkFay5016GnjjivQoekQSMeJNUg==",
-          "requires": {
-            "vue-demi": "*"
-          }
-        },
         "vue-demi": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-          "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+          "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
           "requires": {}
         }
       }
     },
     "@vueuse/metadata": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.7.5.tgz",
-      "integrity": "sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg=="
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.0.2.tgz",
+      "integrity": "sha512-TRh+TNUYXiodatSAxd0xZc7sh4RfktVVgNFIN7TCQXKyancbCAcWfHvKfgdlX8LcqSBxKoHVa90n0XdUbboTkw=="
     },
     "@vueuse/nuxt": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-8.7.5.tgz",
-      "integrity": "sha512-e+JSiNCdWaKyTiBtM856uNJaXeCw8Ka423AGsuvq+D+GXXQe0RhHzqqLS6pQutjWuftNRBRCOiITOzhtjMP+gA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-9.0.2.tgz",
+      "integrity": "sha512-1NYT3DC58fZ0YxFGaGZ4V0uAd3E4YMMnalKd1K1HBvrW3exB9zcBW52spKMspZL9dnNlxyv3TauH52b94fMxqg==",
       "dev": true,
       "requires": {
-        "@nuxt/kit": "^3.0.0-rc.4",
-        "@vueuse/core": "8.7.5",
-        "@vueuse/metadata": "8.7.5",
-        "local-pkg": "^0.4.1",
+        "@nuxt/kit": "^3.0.0-rc.6",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/metadata": "9.0.2",
+        "local-pkg": "^0.4.2",
         "vue-demi": "*"
       },
       "dependencies": {
@@ -16677,6 +16577,22 @@
         }
       }
     },
+    "@vueuse/shared": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.0.2.tgz",
+      "integrity": "sha512-KwBDefK2ljLESpt0ffe2w8EGUCb3IaMfTzeytB/uHHjHOGOEIHLHHyn8W2C48uGQEvoe5iwaW4Bfp8cRUM6IFA==",
+      "requires": {
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+          "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
+          "requires": {}
+        }
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -17399,26 +17315,18 @@
       }
     },
     "c12": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.7.tgz",
-      "integrity": "sha512-ih1nuHbZ6Ltf8Wss96JH6YvKIW5+9+uLAA08LUQAoDrFPGSyvPvQv/QBIRE+dCBWOK4PcwH0ylRkSa9huI1Acw==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.8.tgz",
+      "integrity": "sha512-JomSyVwGnqndRdVVW6SGnHUeHIfJFQNe/4zPFK6zLKPQm8US+hNr4kZP7xeNnzjn3jnQUsBbPdT85fm8K5Pr4A==",
       "dev": true,
       "requires": {
         "defu": "^6.0.0",
-        "dotenv": "^16.0.0",
+        "dotenv": "^16.0.1",
         "gittar": "^0.1.1",
-        "jiti": "^1.12.14",
-        "mlly": "^0.5.1",
-        "pathe": "^0.2.0",
-        "rc9": "^1.2.1"
-      },
-      "dependencies": {
-        "pathe": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-          "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-          "dev": true
-        }
+        "jiti": "^1.14.0",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "rc9": "^1.2.2"
       }
     },
     "cac": {
@@ -21045,9 +20953,9 @@
       }
     },
     "local-pkg": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.1.tgz",
-      "integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.2.tgz",
+      "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==",
       "dev": true
     },
     "locate-path": {
@@ -21420,21 +21328,13 @@
       }
     },
     "mlly": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.3.tgz",
-      "integrity": "sha512-im69tuLD9EJh9fc9TZRpJEFvsBcGMez7glUCWDcHWWCKzhvPmNvyaYjp/+h0qJJN/Xovrs//GzGjOOKmFw4Gog==",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
+      "integrity": "sha512-2R4JT/SxRDPexomw4rmHYY/gWAGmL9Kkq1OR76Ua6w+P340a1aBDTWzKo2kAlxzrG82OdXs5VB9Lmcmyit0Obg==",
       "dev": true,
       "requires": {
-        "pathe": "^0.2.0",
-        "pkg-types": "^0.3.2"
-      },
-      "dependencies": {
-        "pathe": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-          "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-          "dev": true
-        }
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3"
       }
     },
     "monaco-editor": {
@@ -22278,9 +22178,9 @@
       "dev": true
     },
     "pathe": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.0.tgz",
-      "integrity": "sha512-3vUjp552BJzCw9vqKsO5sttHkbYqqsZtH0x1PNtItgqx8BXEXzoY1SYRKcL6BTyVh4lGJGLj0tM42elUDMvcYA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.3.tgz",
+      "integrity": "sha512-x3nrPvG0HDSDzUiJ0WqtzhN4MD+h5B+dFJ3/qyxVuARlr4Y3aJv8gri2cZzp9Z8sGs2a+aG9gNbKngh3gme57A==",
       "dev": true
     },
     "pathval": {
@@ -24164,9 +24064,9 @@
       "peer": true
     },
     "ufo": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.4.tgz",
-      "integrity": "sha512-/+BmBDe8GvlB2nIflWasLLAInjYG0bC9HRnfEpNi4sw77J2AJNnEVnTDReVrehoh825+Q/evF3THXTAweyam2g==",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.5.tgz",
+      "integrity": "sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==",
       "dev": true
     },
     "unbox-primitive": {
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index c038b5bb59..778fe37a9c 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -11,8 +11,8 @@
     "coverage": "vitest -c test/vite.config.ts run --coverage"
   },
   "dependencies": {
-    "@vueuse/core": "^8.7.5",
-    "@vueuse/integrations": "^8.9.1",
+    "@vueuse/core": "^9.0.2",
+    "@vueuse/integrations": "^9.0.2",
     "ant-design-vue": "^3.1.0-rc.6",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
@@ -46,7 +46,7 @@
     "@vitest/ui": "^0.18.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
-    "@vueuse/nuxt": "^8.6.0",
+    "@vueuse/nuxt": "^9.0.2",
     "@windicss/plugin-animations": "^1.0.9",
     "@windicss/plugin-question-mark": "^0.1.1",
     "@windicss/plugin-scrollbar": "^1.2.3",

From 1189ec02eb5da2094d50232d66a2a15182256aba Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 16:15:20 +0200
Subject: [PATCH 10/47] feat(gui-v2,deps): update attachment cell styles

# What's changed?

* add a "button" into empty cell to add items
* add a dropzone to cell
---
 .../nc-gui-v2/components/cell/Attachment.vue  | 178 +++++++++---------
 .../nc-gui-v2/components/smartsheet/Cell.vue  |   2 +-
 .../nc-gui-v2/components/smartsheet/Grid.vue  |   2 +-
 .../nc-gui-v2/composables/useViewColumns.ts   |   4 +-
 4 files changed, 93 insertions(+), 93 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Attachment.vue b/packages/nc-gui-v2/components/cell/Attachment.vue
index fa9f20e9d5..6dee7949c3 100644
--- a/packages/nc-gui-v2/components/cell/Attachment.vue
+++ b/packages/nc-gui-v2/components/cell/Attachment.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { useToast } from 'vue-toastification'
-import { inject, reactive, ref, useProject, watchEffect } from '#imports'
-import { useNuxtApp } from '#app'
+import { notification } from 'ant-design-vue'
+import { computed, inject, ref, useApi, useDropZone, useFileDialog, useProject, watch } from '#imports'
 import { ColumnInj, EditModeInj, MetaInj } from '~/context'
 import { NOCO } from '~/lib'
 import { isImage } from '~/utils'
-import MaterialPlusIcon from '~icons/mdi/plus'
+import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
 import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
+import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
 
 interface Props {
-  modelValue: string | any[] | null
+  modelValue: string | Record<string, any>[] | null
 }
 
 const { modelValue } = defineProps<Props>()
@@ -17,27 +17,44 @@ const { modelValue } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 
 const isPublicForm = inject<boolean>('isPublicForm', false)
+
 const isForm = inject<boolean>('isForm', false)
-const meta = inject(MetaInj)
-const column = inject(ColumnInj)
+
+const meta = inject(MetaInj)!
+
+const column = inject(ColumnInj)!
+
 const editEnabled = inject(EditModeInj, ref(false))
 
-const localFilesState = reactive([])
 const attachments = ref([])
+
 const uploading = ref(false)
-const fileInput = ref<HTMLInputElement>()
 
-const { $api } = useNuxtApp()
+const dropZoneRef = ref<HTMLDivElement>()
+
+const { api } = useApi()
 
 const { project } = useProject()
 
-const toast = useToast()
+const { files, open, reset } = useFileDialog()
 
-watchEffect(() => {
-  if (modelValue) {
-    attachments.value = ((typeof modelValue === 'string' ? JSON.parse(modelValue) : modelValue) || []).filter(Boolean)
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+
+watch(
+  () => modelValue,
+  (nextModel) => {
+    if (nextModel) {
+      attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+    }
+  },
+)
+
+function onDrop(droppedFiles: File[] | null) {
+  if (droppedFiles) {
+    // set files
+    console.log(droppedFiles)
   }
-})
+}
 
 const selectImage = (file: any, i: unknown) => {
   // todo: implement
@@ -47,11 +64,9 @@ const openUrl = (url: string, target = '_blank') => {
   window.open(url, target)
 }
 
-const addFile = () => {
-  fileInput.value?.click()
-}
-
 const onFileSelection = async (e: unknown) => {
+  if (!files.value) return
+
   // if (this.isPublicGrid) {
   //   return
   // }
@@ -76,90 +91,85 @@ const onFileSelection = async (e: unknown) => {
   //   return
   // }
 
-  // todo : move to com
   uploading.value = true
+
   const newAttachments = []
-  for (const file of fileInput.value?.files ?? []) {
+
+  for (const file of files.value) {
     try {
-      const data = await $api.storage.upload(
+      const data = await api.storage.upload(
         {
-          path: [NOCO, project.value.title, meta?.value?.title, column?.title].join('/'),
+          path: [NOCO, project.value.title, meta.value.title, column.title].join('/'),
         },
         {
           files: file,
           json: '{}',
         },
       )
+
       newAttachments.push(...data)
     } catch (e: any) {
-      toast.error(e.message || 'Some internal error occurred')
-      uploading.value = false
-      return
+      notification.error({
+        message: e.message || 'Some internal error occurred',
+      })
     }
   }
+
   uploading.value = false
+
   emit('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
 }
+
+watch(files, console.log)
+
+const items = computed(() => (isPublicForm ? files.value : attachments.value) || [])
 </script>
 
 <template>
-  <div class="h-full w-full">
-    <div class="flex items-center img-container">
-      <div class="d-flex no-overflow">
+  <div class="flex items-center">
+    <div ref="dropZoneRef" class="flex-1 group color-transition flex items-center p-1 hover:text-primary">
+      <template v-if="isOverDropZone">
         <div
-          v-for="(item, i) in isPublicForm ? localFilesState : attachments"
-          :key="item.url || item.title"
-          class="thumbnail align-center justify-center d-flex"
+          class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
         >
-          <!--          <v-tooltip bottom> -->
-          <!--            <template #activator="{ on }"> -->
-          <!--              <v-img
-                          v-if="isImage(item.title, item.mimetype)"
-                          lazy-src="https://via.placeholder.com/60.png?text=Loading..."
-                          alt="#"
-                          max-height="99px"
-                          contain
-                          :src="item.url || item.data"
-                          v-on="on"
-                          @click="selectImage(item.url || item.data, i)"
-                        >             -->
-          <img
-            v-if="isImage(item.title, item.mimetype)"
-            alt="#"
-            style="max-height: 30px; max-width: 30px"
-            :src="item.url || item.data"
-            @click="selectImage(item.url || item.data, i)"
-          />
-          <!--                <template #placeholder> -->
-          <!--                  <v-skeleton-loader type="image" :height="active ? 33 : 22" :width="active ? 33 : 22" /> -->
-          <!--                </template> -->
-          <v-icon v-else-if="item.icon" :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')">
-            {{ item.icon }}
-          </v-icon>
-          <v-icon v-else :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')"> mdi-file </v-icon>
-          <!--            </template> -->
-          <!--            <span>{{ item.title }}</span> -->
-          <!--          </v-tooltip> -->
+          <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+        </div>
+      </template>
+      <template v-else>
+        <div class="flex overflow-hidden">
+          <div v-for="(item, i) of items" :key="item.url || item.title" class="thumbnail align-center justify-center d-flex">
+            <img
+              v-if="isImage(item.title, item.mimetype)"
+              alt="#"
+              style="max-height: 30px; max-width: 30px"
+              :src="item.url || item.data"
+              @click="selectImage(item.url || item.data, i)"
+            />
+            <v-icon v-else-if="item.icon" :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')">
+              {{ item.icon }}
+            </v-icon>
+            <v-icon v-else :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')">
+              mdi-file
+            </v-icon>
+          </div>
         </div>
-      </div>
-      <!--      todo: hide or toggle based on ancestor -->
-      <div class="add d-flex align-center justify-center px-1 nc-attachment-add" @click="addFile">
-        <v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner"> mdi-loading mdi-spin</v-icon>
-        <!--        <v-btn v-else-if="isForm" outlined x-small color="" text class="nc-attachment-add-btn">
-          <v-icon x-small color="" icon="MaterialPlusIcon"> mdi-plus </v-icon>
-          Attachment
-        </v-btn>
-        <v-icon  small color="primary nc-attachment-add-icon">
-          mdi-plus
-        </v-icon> -->
-        <MaterialPlusIcon />
-      </div>
-
-      <MaterialArrowExpandIcon @click.stop="dialog = true" />
-      <!--      <v-icon class="expand-icon mr-1" x-small color="primary" @click.stop="dialog = true"> mdi-arrow-expand </v-icon> -->
-    </div>
 
-    <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelection" />
+        <!--      todo: hide or toggle based on ancestor -->
+        <div class="mx-auto flex gap-1 items-center active:ring rounded border-1 py-1 px-4" @click.stop="open">
+          <v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner"> mdi-loading mdi-spin</v-icon>
+
+          <a-tooltip placement="bottom">
+            <template #title> Click or drop a file into cell </template>
+            <div class="flex items-center gap-2">
+              <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+              <div v-if="!items.length">Add file(s)</div>
+            </div>
+          </a-tooltip>
+        </div>
+
+        <MaterialArrowExpandIcon v-if="items.length" @click.stop />
+      </template>
+    </div>
   </div>
 </template>
 
@@ -175,14 +185,4 @@ const onFileSelection = async (e: unknown) => {
     max-width: 33px;
   }
 }
-
-.expand-icon {
-  margin-left: 8px;
-  border-radius: 2px;
-  transition: 0.3s background-color;
-}
-
-.expand-icon:hover {
-  background-color: var(--v-primary-lighten4);
-}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index c757921cde..5064f486d9 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -89,7 +89,7 @@ div {
 }
 
 .nc-cell {
-  position: relative;
+  @apply relative w-full h-full;
 }
 
 .nc-locked-overlay {
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index f3c8930496..21638a2686 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -177,7 +177,7 @@ if (meta) useProvideColumnCreateStore(meta)
     padding: 0 5px;
 
     & > * {
-      @apply flex align-center h-auto;
+      @apply flex items-center;
     }
     overflow: hidden;
   }
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 9c5a522681..ef794e1431 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -28,8 +28,8 @@ export function useViewColumns(
     if (!meta || !view) return
 
     let order = 1
-    if (view?.value?.id) {
-      const data = (await $api.dbViewColumn.list(view?.value?.id)) as any[]
+    if (view.value?.id) {
+      const data = (await $api.dbViewColumn.list(view.value.id)) as any[]
 
       const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
         curr.show = !!curr.show

From 104cfd03c5f83384e05d00991583d49882129f7e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 17:45:24 +0200
Subject: [PATCH 11/47] feat(gui-v2): make attachments list scrollable in cell

---
 .../nc-gui-v2/components/cell/Attachment.vue  | 205 ++++++++++--------
 .../nc-gui-v2/components/smartsheet/Grid.vue  |   2 +-
 packages/nc-gui-v2/utils/urlUtils.ts          |   4 +
 3 files changed, 117 insertions(+), 94 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Attachment.vue b/packages/nc-gui-v2/components/cell/Attachment.vue
index 6dee7949c3..6047bca67c 100644
--- a/packages/nc-gui-v2/components/cell/Attachment.vue
+++ b/packages/nc-gui-v2/components/cell/Attachment.vue
@@ -3,22 +3,35 @@ import { notification } from 'ant-design-vue'
 import { computed, inject, ref, useApi, useDropZone, useFileDialog, useProject, watch } from '#imports'
 import { ColumnInj, EditModeInj, MetaInj } from '~/context'
 import { NOCO } from '~/lib'
-import { isImage } from '~/utils'
+import { isImage, openLink } from '~/utils'
 import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
 import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
 import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
+import MdiReload from '~icons/mdi/reload'
+import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+import MdiPdfBox from '~icons/mdi/pdf-box'
+import MdiFileWordOutline from '~icons/mdi/file-word-outline'
+import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
+import MdiFileExcelOutline from '~icons/mdi/file-excel-outline'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null
 }
 
+interface Emits {
+  (event: 'update:modelValue', value: string | Record<string, any>): void
+}
+
 const { modelValue } = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits<Emits>()
+
+const isPublicForm = inject('isPublicForm', false)
 
-const isPublicForm = inject<boolean>('isPublicForm', false)
+const isForm = inject('isForm', false)
 
-const isForm = inject<boolean>('isForm', false)
+// todo: replace placeholder var
+const isPublicGrid = $ref(false)
 
 const meta = inject(MetaInj)!
 
@@ -26,13 +39,13 @@ const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj, ref(false))
 
-const attachments = ref([])
+const storedFiles = ref<{ title: string; file: File }[]>([])
 
-const uploading = ref(false)
+const attachments = ref<File[]>([])
 
 const dropZoneRef = ref<HTMLDivElement>()
 
-const { api } = useApi()
+const { api, isLoading } = useApi()
 
 const { project } = useProject()
 
@@ -47,12 +60,13 @@ watch(
       attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
     }
   },
+  { immediate: true },
 )
 
 function onDrop(droppedFiles: File[] | null) {
   if (droppedFiles) {
     // set files
-    console.log(droppedFiles)
+    onFileSelection(droppedFiles)
   }
 }
 
@@ -60,42 +74,30 @@ const selectImage = (file: any, i: unknown) => {
   // todo: implement
 }
 
-const openUrl = (url: string, target = '_blank') => {
-  window.open(url, target)
-}
-
-const onFileSelection = async (e: unknown) => {
-  if (!files.value) return
-
-  // if (this.isPublicGrid) {
-  //   return
-  // }
-  // if (!this.$refs.file.files || !this.$refs.file.files.length) {
-  //   return
-  // }
-
-  // if (this.isPublicForm) {
-  //   this.localFilesState.push(...Array.from(this.$refs.file.files).map((file) => {
-  //     const res = { file, title: file.name }
-  //     if (isImage(file.name, file.mimetype)) {
-  //       const reader = new FileReader()
-  //       reader.onload = (e) => {
-  //         this.$set(res, 'data', e.target.result)
-  //       }
-  //       reader.readAsDataURL(file)
-  //     }
-  //     return res
-  //   }))
-  //
-  //   this.$emit('input', this.localFilesState.map(f => f.file))
-  //   return
-  // }
-
-  uploading.value = true
+async function onFileSelection(selectedFiles: FileList | File[]) {
+  if (!selectedFiles.length || isPublicGrid) return
+
+  if (isPublicForm) {
+    storedFiles.value.push(
+      ...Array.from(selectedFiles).map((file) => {
+        const res = { file, title: file.name }
+        if (isImage(file.name, (file as any).mimetype)) {
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+        }
+        return res
+      }),
+    )
+
+    emits(
+      'update:modelValue',
+      storedFiles.value.map((f) => f.file),
+    )
+  }
 
   const newAttachments = []
 
-  for (const file of files.value) {
+  for (const file of selectedFiles) {
     try {
       const data = await api.storage.upload(
         {
@@ -115,74 +117,91 @@ const onFileSelection = async (e: unknown) => {
     }
   }
 
-  uploading.value = false
-
-  emit('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
+  emits('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
 }
 
-watch(files, console.log)
-
-const items = computed(() => (isPublicForm ? files.value : attachments.value) || [])
+watch(files, (nextFiles) => nextFiles && onFileSelection(nextFiles))
+
+const items = computed(() => (isPublicForm ? storedFiles.value : attachments.value) || [])
+
+const FileIcon = (icon: string) => {
+  switch (icon) {
+    case 'mdi-pdf-box':
+      return MdiPdfBox
+    case 'mdi-file-word-outline':
+      return MdiFileWordOutline
+    case 'mdi-file-powerpoint-box':
+      return MdiFilePowerpointBox
+    case 'mdi-file-excel-outline':
+      return MdiFileExcelOutline
+    default:
+      return IcOutlineInsertDriveFile
+  }
+}
 </script>
 
 <template>
-  <div class="flex items-center">
-    <div ref="dropZoneRef" class="flex-1 group color-transition flex items-center p-1 hover:text-primary">
-      <template v-if="isOverDropZone">
+  <div ref="dropZoneRef" class="flex-1 color-transition flex items-center justify-between gap-1">
+    <template v-if="isOverDropZone">
+      <div
+        class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
+      >
+        <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+      </div>
+    </template>
+    <template v-else>
+      <div
+        :class="{ 'mx-auto px-4': !items.length }"
+        class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
+        @click.stop="open"
+      >
+        <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+
+        <a-tooltip v-else placement="bottom">
+          <template #title> Click or drop a file into cell </template>
+
+          <div class="flex items-center gap-2">
+            <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+
+            <div v-if="!items.length" class="group-hover:text-primary">Add file(s)</div>
+          </div>
+        </a-tooltip>
+      </div>
+
+      <div class="h-full w-full flex flex-wrap flex-col overflow-x-scroll overflow-y-hidden gap-2 scrollbar-thin-primary py-1">
         <div
-          class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
+          v-for="(item, i) of items"
+          :key="item.url || item.title"
+          class="flex-auto flex items-center justify-center w-[45px] border-1"
         >
-          <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
-        </div>
-      </template>
-      <template v-else>
-        <div class="flex overflow-hidden">
-          <div v-for="(item, i) of items" :key="item.url || item.title" class="thumbnail align-center justify-center d-flex">
+          <a-tooltip placement="bottom">
+            <template #title>
+              <div class="text-center w-full">{{ item.title }}</div>
+            </template>
+
             <img
               v-if="isImage(item.title, item.mimetype)"
-              alt="#"
-              style="max-height: 30px; max-width: 30px"
+              :alt="item.title || `#${i}`"
               :src="item.url || item.data"
               @click="selectImage(item.url || item.data, i)"
             />
-            <v-icon v-else-if="item.icon" :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')">
-              {{ item.icon }}
-            </v-icon>
-            <v-icon v-else :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')">
-              mdi-file
-            </v-icon>
-          </div>
-        </div>
 
-        <!--      todo: hide or toggle based on ancestor -->
-        <div class="mx-auto flex gap-1 items-center active:ring rounded border-1 py-1 px-4" @click.stop="open">
-          <v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner"> mdi-loading mdi-spin</v-icon>
+            <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
 
-          <a-tooltip placement="bottom">
-            <template #title> Click or drop a file into cell </template>
-            <div class="flex items-center gap-2">
-              <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
-              <div v-if="!items.length">Add file(s)</div>
-            </div>
+            <IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
           </a-tooltip>
         </div>
+      </div>
 
-        <MaterialArrowExpandIcon v-if="items.length" @click.stop />
-      </template>
-    </div>
-  </div>
-</template>
+      <div v-if="items.length" class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10">
+        <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
-<style scoped lang="scss">
-.thumbnail {
-  height: 30px;
-  width: 30px;
-  margin: 2px;
-  border-radius: 4px;
+        <a-tooltip v-else placement="bottom">
+          <template #title> View attachments </template>
 
-  img {
-    max-height: 33px;
-    max-width: 33px;
-  }
-}
-</style>
+          <MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop />
+        </a-tooltip>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 21638a2686..6166263a1c 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -213,7 +213,7 @@ if (meta) useProvideColumnCreateStore(meta)
 
   // todo: replace with css variable
   td.active::after {
-    border: 2px solid #0040bc; /*var(--v-primary-lighten1);*/
+    @apply border-2 border-solid border-primary;
   }
 
   td.active::before {
diff --git a/packages/nc-gui-v2/utils/urlUtils.ts b/packages/nc-gui-v2/utils/urlUtils.ts
index 5f71c720a1..5f9427c98b 100644
--- a/packages/nc-gui-v2/utils/urlUtils.ts
+++ b/packages/nc-gui-v2/utils/urlUtils.ts
@@ -27,3 +27,7 @@ export const isValidURL = (str: string) => {
     /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)(?:\.(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)*(?:\.(?:[a-z\u00A1-\uFFFF]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
   return !!pattern.test(str)
 }
+
+export const openLink = (url: string, target = '_blank') => {
+  window.open(url, target)
+}

From e1e3c5a2eec0e848346635f5ec17d2984c72bcc8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 19:57:04 +0200
Subject: [PATCH 12/47] feat(gui-v2): add attachment views modal

---
 .../nc-gui-v2/components/cell/Attachment.vue  | 207 ------------------
 .../components/cell/attachment/Modal.vue      | 131 +++++++++++
 .../components/cell/attachment/index.vue      | 132 +++++++++++
 .../components/cell/attachment/utils.ts       | 135 ++++++++++++
 packages/nc-gui-v2/package-lock.json          |  13 ++
 packages/nc-gui-v2/package.json               |   1 +
 6 files changed, 412 insertions(+), 207 deletions(-)
 delete mode 100644 packages/nc-gui-v2/components/cell/Attachment.vue
 create mode 100644 packages/nc-gui-v2/components/cell/attachment/Modal.vue
 create mode 100644 packages/nc-gui-v2/components/cell/attachment/index.vue
 create mode 100644 packages/nc-gui-v2/components/cell/attachment/utils.ts

diff --git a/packages/nc-gui-v2/components/cell/Attachment.vue b/packages/nc-gui-v2/components/cell/Attachment.vue
deleted file mode 100644
index 6047bca67c..0000000000
--- a/packages/nc-gui-v2/components/cell/Attachment.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<script setup lang="ts">
-import { notification } from 'ant-design-vue'
-import { computed, inject, ref, useApi, useDropZone, useFileDialog, useProject, watch } from '#imports'
-import { ColumnInj, EditModeInj, MetaInj } from '~/context'
-import { NOCO } from '~/lib'
-import { isImage, openLink } from '~/utils'
-import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
-import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
-import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
-import MdiReload from '~icons/mdi/reload'
-import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
-import MdiPdfBox from '~icons/mdi/pdf-box'
-import MdiFileWordOutline from '~icons/mdi/file-word-outline'
-import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
-import MdiFileExcelOutline from '~icons/mdi/file-excel-outline'
-
-interface Props {
-  modelValue: string | Record<string, any>[] | null
-}
-
-interface Emits {
-  (event: 'update:modelValue', value: string | Record<string, any>): void
-}
-
-const { modelValue } = defineProps<Props>()
-
-const emits = defineEmits<Emits>()
-
-const isPublicForm = inject('isPublicForm', false)
-
-const isForm = inject('isForm', false)
-
-// todo: replace placeholder var
-const isPublicGrid = $ref(false)
-
-const meta = inject(MetaInj)!
-
-const column = inject(ColumnInj)!
-
-const editEnabled = inject(EditModeInj, ref(false))
-
-const storedFiles = ref<{ title: string; file: File }[]>([])
-
-const attachments = ref<File[]>([])
-
-const dropZoneRef = ref<HTMLDivElement>()
-
-const { api, isLoading } = useApi()
-
-const { project } = useProject()
-
-const { files, open, reset } = useFileDialog()
-
-const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
-
-watch(
-  () => modelValue,
-  (nextModel) => {
-    if (nextModel) {
-      attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
-    }
-  },
-  { immediate: true },
-)
-
-function onDrop(droppedFiles: File[] | null) {
-  if (droppedFiles) {
-    // set files
-    onFileSelection(droppedFiles)
-  }
-}
-
-const selectImage = (file: any, i: unknown) => {
-  // todo: implement
-}
-
-async function onFileSelection(selectedFiles: FileList | File[]) {
-  if (!selectedFiles.length || isPublicGrid) return
-
-  if (isPublicForm) {
-    storedFiles.value.push(
-      ...Array.from(selectedFiles).map((file) => {
-        const res = { file, title: file.name }
-        if (isImage(file.name, (file as any).mimetype)) {
-          const reader = new FileReader()
-          reader.readAsDataURL(file)
-        }
-        return res
-      }),
-    )
-
-    emits(
-      'update:modelValue',
-      storedFiles.value.map((f) => f.file),
-    )
-  }
-
-  const newAttachments = []
-
-  for (const file of selectedFiles) {
-    try {
-      const data = await api.storage.upload(
-        {
-          path: [NOCO, project.value.title, meta.value.title, column.title].join('/'),
-        },
-        {
-          files: file,
-          json: '{}',
-        },
-      )
-
-      newAttachments.push(...data)
-    } catch (e: any) {
-      notification.error({
-        message: e.message || 'Some internal error occurred',
-      })
-    }
-  }
-
-  emits('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
-}
-
-watch(files, (nextFiles) => nextFiles && onFileSelection(nextFiles))
-
-const items = computed(() => (isPublicForm ? storedFiles.value : attachments.value) || [])
-
-const FileIcon = (icon: string) => {
-  switch (icon) {
-    case 'mdi-pdf-box':
-      return MdiPdfBox
-    case 'mdi-file-word-outline':
-      return MdiFileWordOutline
-    case 'mdi-file-powerpoint-box':
-      return MdiFilePowerpointBox
-    case 'mdi-file-excel-outline':
-      return MdiFileExcelOutline
-    default:
-      return IcOutlineInsertDriveFile
-  }
-}
-</script>
-
-<template>
-  <div ref="dropZoneRef" class="flex-1 color-transition flex items-center justify-between gap-1">
-    <template v-if="isOverDropZone">
-      <div
-        class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
-      >
-        <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
-      </div>
-    </template>
-    <template v-else>
-      <div
-        :class="{ 'mx-auto px-4': !items.length }"
-        class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
-        @click.stop="open"
-      >
-        <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
-
-        <a-tooltip v-else placement="bottom">
-          <template #title> Click or drop a file into cell </template>
-
-          <div class="flex items-center gap-2">
-            <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
-
-            <div v-if="!items.length" class="group-hover:text-primary">Add file(s)</div>
-          </div>
-        </a-tooltip>
-      </div>
-
-      <div class="h-full w-full flex flex-wrap flex-col overflow-x-scroll overflow-y-hidden gap-2 scrollbar-thin-primary py-1">
-        <div
-          v-for="(item, i) of items"
-          :key="item.url || item.title"
-          class="flex-auto flex items-center justify-center w-[45px] border-1"
-        >
-          <a-tooltip placement="bottom">
-            <template #title>
-              <div class="text-center w-full">{{ item.title }}</div>
-            </template>
-
-            <img
-              v-if="isImage(item.title, item.mimetype)"
-              :alt="item.title || `#${i}`"
-              :src="item.url || item.data"
-              @click="selectImage(item.url || item.data, i)"
-            />
-
-            <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
-
-            <IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
-          </a-tooltip>
-        </div>
-      </div>
-
-      <div v-if="items.length" class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10">
-        <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
-
-        <a-tooltip v-else placement="bottom">
-          <template #title> View attachments </template>
-
-          <MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop />
-        </a-tooltip>
-      </div>
-    </template>
-  </div>
-</template>
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
new file mode 100644
index 0000000000..8567cd7bb0
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import { onKeyDown } from '@vueuse/core'
+import FileSaver from 'file-saver'
+import { useAttachmentCell } from './utils'
+import { ref, useUIPermission } from '#imports'
+import { isImage, openLink } from '~/utils'
+import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
+import MdiCloseCircle from '~icons/mdi/close-circle'
+import MdiDownload from '~icons/mdi/download'
+import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+
+const { isUIAllowed } = useUIPermission()
+
+const { open, isLoading, isPublicGrid, isForm, visibleItems, modalVisible, column, FileIcon, removeFile } = useAttachmentCell()
+
+// todo: replace placeholder var
+const isLocked = ref(false)
+
+onKeyDown('Escape', () => (modalVisible.value = false))
+
+async function downloadFile(item: Record<string, any>) {
+  FileSaver.saveAs(item.url || item.data, item.title)
+}
+</script>
+
+<template>
+  <a-modal v-model:visible="modalVisible" width="80%" :footer="null">
+    <template #title>
+      <div class="flex gap-4">
+        <div
+          v-if="(isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
+          class="nc-attach-file group"
+          @click="open"
+        >
+          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+          Attach File
+        </div>
+
+        <div class="flex items-center gap-2">
+          Viewing Attachments of
+          <div class="font-semibold underline">{{ column.title }}</div>
+        </div>
+      </div>
+    </template>
+
+    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6">
+      <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
+        <a-card class="nc-attachment-item group">
+          <a-tooltip>
+            <template #title> Remove File </template>
+
+            <MdiCloseCircle
+              v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
+              class="nc-attachment-remove"
+              @click.stop="removeFile(i)"
+            />
+          </a-tooltip>
+
+          <a-tooltip placement="bottom">
+            <template #title> Download file </template>
+
+            <div class="nc-attachment-download">
+              <MdiDownload @click.stop="downloadFile(item)" />
+            </div>
+          </a-tooltip>
+
+          <div class="p-2 flex items-center cursor-pointer">
+            <img v-if="isImage(item.title, item.mimetype)" :alt="item.title || `#${i}`" :src="item.url || item.data" />
+
+            <component
+              :is="FileIcon(item.icon)"
+              v-else-if="item.icon"
+              height="150"
+              width="150"
+              @click.stop="openLink(item.url || item.data)"
+            />
+
+            <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(item.url || item.data)" />
+          </div>
+        </a-card>
+
+        <div class="truncate" :title="item.title">
+          {{ item.title }}
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<style lang="scss" scoped>
+.nc-attach-file {
+  @apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
+  @apply hover:(bg-primary/10 text-primary ring);
+  @apply active:(ring-pink-500 bg-primary/20);
+}
+
+.nc-attachment-item {
+  @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative;
+
+  &::after {
+    @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
+    content: '';
+  }
+
+  &:hover::after {
+    @apply ring shadow transform scale-103;
+  }
+
+  &:active::after {
+    @apply ring ring-pink-500 shadow transform scale-103;
+  }
+}
+
+.nc-attachment-download {
+  @apply absolute bottom-2 right-2;
+  @apply transition-opacity duration-150 ease-in opacity-0 group-hover:(opacity-100) hover:ring;
+  @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
+  @apply active:(ring border-0 ring-pink-500);
+}
+
+.nc-attachment-remove {
+  @apply absolute top-2 right-2;
+  @apply hover:(ring ring-red-500);
+  @apply cursor-pointer rounded-full border-1;
+  @apply active:(ring border-0 ring-red-500);
+}
+
+:deep(.ant-card-body) {
+  @apply !p-2;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
new file mode 100644
index 0000000000..594558f815
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { useProvideAttachmentCell } from './utils'
+import Modal from './Modal.vue'
+import { ref, useDropZone, watch } from '#imports'
+import { isImage, openLink } from '~/utils'
+import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
+import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
+import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
+import MdiReload from '~icons/mdi/reload'
+import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+
+interface Props {
+  modelValue: string | Record<string, any>[] | null
+}
+
+interface Emits {
+  (event: 'update:modelValue', value: string | Record<string, any>): void
+}
+
+const { modelValue } = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const dropZoneRef = ref<HTMLDivElement>()
+
+const { modalVisible, attachments, visibleItems, onFileSelect, isLoading, open, FileIcon, fileRemovedHook, fileAddedHook } =
+  useProvideAttachmentCell()
+
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+
+watch(
+  () => modelValue,
+  (nextModel) => {
+    if (nextModel) {
+      attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+    }
+  },
+  { immediate: true },
+)
+
+fileRemovedHook.on((data) => {
+  emits('update:modelValue', data)
+})
+
+fileAddedHook.on((data) => {
+  emits('update:modelValue', data)
+})
+
+function onDrop(droppedFiles: File[] | null) {
+  if (droppedFiles) {
+    // set files
+    onFileSelect(droppedFiles)
+  }
+}
+
+const selectImage = (file: any, i: unknown) => {
+  // todo: implement
+}
+</script>
+
+<template>
+  <div ref="dropZoneRef" class="flex-1 color-transition flex items-center justify-between gap-1">
+    <template v-if="isOverDropZone">
+      <div
+        class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
+      >
+        <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+      </div>
+    </template>
+
+    <template v-else>
+      <div
+        :class="{ 'mx-auto px-4': !visibleItems.length }"
+        class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
+        @click.stop="open"
+      >
+        <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+
+        <a-tooltip v-else placement="bottom">
+          <template #title> Click or drop a file into cell </template>
+
+          <div class="flex items-center gap-2">
+            <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+
+            <div v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div>
+          </div>
+        </a-tooltip>
+      </div>
+
+      <template v-if="visibleItems.length">
+        <div
+          class="h-full w-full flex flex-wrap flex-col gap-2 content-start py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary"
+        >
+          <div
+            v-for="(item, i) of visibleItems"
+            :key="item.url || item.title"
+            class="flex-auto flex items-center justify-center w-[45px] border-1"
+          >
+            <a-tooltip placement="bottom">
+              <template #title>
+                <div class="text-center w-full">{{ item.title }}</div>
+              </template>
+
+              <img
+                v-if="isImage(item.title, item.mimetype)"
+                :alt="item.title || `#${i}`"
+                :src="item.url || item.data"
+                @click="selectImage(item.url || item.data, i)"
+              />
+
+              <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
+
+              <IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
+            </a-tooltip>
+          </div>
+        </div>
+
+        <div class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10">
+          <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+
+          <a-tooltip v-else placement="bottom">
+            <template #title> View attachments </template>
+
+            <MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop="modalVisible = true" />
+          </a-tooltip>
+        </div>
+      </template>
+    </template>
+
+    <Modal />
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
new file mode 100644
index 0000000000..c98b0a53d0
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -0,0 +1,135 @@
+import { notification } from 'ant-design-vue'
+import { computed, createEventHook, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
+import { ColumnInj, EditModeInj, MetaInj } from '~/context'
+import { isImage } from '~/utils'
+import { NOCO } from '~/lib'
+import MdiPdfBox from '~icons/mdi/pdf-box'
+import MdiFileWordOutline from '~icons/mdi/file-word-outline'
+import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
+import MdiFileExcelOutline from '~icons/mdi/file-excel-outline'
+import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+
+export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(() => {
+  const isPublicForm = inject('isPublicForm', false)
+
+  const isForm = inject('isForm', false)
+
+  // todo: replace placeholder var
+  const isPublicGrid = $ref(false)
+
+  const meta = inject(MetaInj)!
+
+  const column = inject(ColumnInj)!
+
+  const editEnabled = inject(EditModeInj, ref(false))
+
+  const storedFiles = ref<{ title: string; file: File }[]>([])
+
+  const attachments = ref<File[]>([])
+
+  const modalVisible = ref(false)
+
+  const { project } = useProject()
+
+  const { api, isLoading } = useApi()
+
+  const { files, open } = useFileDialog()
+
+  const fileRemovedHook = createEventHook<string | Record<string, any>[]>()
+
+  const fileAddedHook = createEventHook<File[]>()
+
+  function removeFile(i: number) {
+    if (isPublicForm) {
+      storedFiles.value.splice(i, 1)
+
+      fileRemovedHook.trigger(storedFiles.value.map((storedFile) => storedFile.file))
+    } else {
+      attachments.value.splice(i, 1)
+      fileRemovedHook.trigger(attachments.value)
+    }
+  }
+
+  async function onFileSelect(selectedFiles: FileList | File[]) {
+    if (!selectedFiles.length || isPublicGrid) return
+
+    if (isPublicForm) {
+      storedFiles.value.push(
+        ...Array.from(selectedFiles).map((file) => {
+          const res = { file, title: file.name }
+          if (isImage(file.name, (file as any).mimetype)) {
+            const reader = new FileReader()
+            reader.readAsDataURL(file)
+          }
+          return res
+        }),
+      )
+
+      return fileAddedHook.trigger(storedFiles.value.map((storedFile) => storedFile.file))
+    }
+
+    const newAttachments = []
+
+    for (const file of selectedFiles) {
+      try {
+        const data = await api.storage.upload(
+          {
+            path: [NOCO, project.value.title, meta.value.title, column.title].join('/'),
+          },
+          {
+            files: file,
+            json: '{}',
+          },
+        )
+
+        newAttachments.push(...data)
+      } catch (e: any) {
+        notification.error({
+          message: e.message || 'Some internal error occurred',
+        })
+      }
+    }
+
+    fileAddedHook.trigger([...attachments.value, ...newAttachments])
+  }
+
+  const FileIcon = (icon: string) => {
+    switch (icon) {
+      case 'mdi-pdf-box':
+        return MdiPdfBox
+      case 'mdi-file-word-outline':
+        return MdiFileWordOutline
+      case 'mdi-file-powerpoint-box':
+        return MdiFilePowerpointBox
+      case 'mdi-file-excel-outline':
+        return MdiFileExcelOutline
+      default:
+        return IcOutlineInsertDriveFile
+    }
+  }
+
+  const visibleItems = computed(() => (isPublicForm ? storedFiles.value : attachments.value) || [])
+
+  watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
+
+  return {
+    attachments,
+    storedFiles,
+    visibleItems,
+    isPublicForm,
+    isForm,
+    isPublicGrid,
+    meta,
+    column,
+    editEnabled,
+    isLoading,
+    api,
+    open,
+    onFileSelect,
+    modalVisible,
+    FileIcon,
+    fileRemovedHook,
+    fileAddedHook,
+    removeFile,
+  }
+}, 'attachmentCell')
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index a240b8d76f..6c5b48eacf 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -34,6 +34,7 @@
         "@iconify-json/ri": "^1.1.3",
         "@intlify/vite-plugin-vue-i18n": "^4.0.0",
         "@types/axios": "^0.14.0",
+        "@types/file-saver": "^2.0.5",
         "@types/papaparse": "^5.3.2",
         "@types/sortablejs": "^1.13.0",
         "@vitejs/plugin-vue": "^2.3.3",
@@ -2247,6 +2248,12 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "node_modules/@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
@@ -16058,6 +16065,12 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 778fe37a9c..64531471c0 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -40,6 +40,7 @@
     "@iconify-json/ri": "^1.1.3",
     "@intlify/vite-plugin-vue-i18n": "^4.0.0",
     "@types/axios": "^0.14.0",
+    "@types/file-saver": "^2.0.5",
     "@types/papaparse": "^5.3.2",
     "@types/sortablejs": "^1.13.0",
     "@vitejs/plugin-vue": "^2.3.3",

From dfa6eab997e733c9c3b965457ebca7829766e304 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 20:21:54 +0200
Subject: [PATCH 13/47] chore(gui-v2): move common functions to attachment cell
 utils file

---
 .../components/cell/attachment/Modal.vue      | 100 +++++++++++-------
 .../components/cell/attachment/index.vue      |   9 +-
 .../components/cell/attachment/utils.ts       |  15 ++-
 3 files changed, 74 insertions(+), 50 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 8567cd7bb0..5348ca9b28 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -1,30 +1,34 @@
 <script lang="ts" setup>
 import { onKeyDown } from '@vueuse/core'
-import FileSaver from 'file-saver'
 import { useAttachmentCell } from './utils'
-import { ref, useUIPermission } from '#imports'
+import { ref, useDropZone, useUIPermission } from '#imports'
 import { isImage, openLink } from '~/utils'
 import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 import MdiDownload from '~icons/mdi/download'
+import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
 import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
 
 const { isUIAllowed } = useUIPermission()
 
-const { open, isLoading, isPublicGrid, isForm, visibleItems, modalVisible, column, FileIcon, removeFile } = useAttachmentCell()
+const { open, isLoading, isPublicGrid, isForm, visibleItems, modalVisible, column, FileIcon, removeFile, onDrop, downloadFile } =
+  useAttachmentCell()
 
 // todo: replace placeholder var
 const isLocked = ref(false)
 
-onKeyDown('Escape', () => (modalVisible.value = false))
+const dropZoneRef = ref<HTMLDivElement>()
 
-async function downloadFile(item: Record<string, any>) {
-  FileSaver.saveAs(item.url || item.data, item.title)
-}
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+
+onKeyDown('Escape', () => {
+  modalVisible.value = false
+  isOverDropZone.value = false
+})
 </script>
 
 <template>
-  <a-modal v-model:visible="modalVisible" width="80%" :footer="null">
+  <a-modal v-model:visible="modalVisible" class="nc-attachment-modal" width="80%" :footer="null">
     <template #title>
       <div class="flex gap-4">
         <div
@@ -43,7 +47,15 @@ async function downloadFile(item: Record<string, any>) {
       </div>
     </template>
 
-    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6">
+    <div ref="dropZoneRef" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
+      <div
+        :class="isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+        class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-blue-100/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
+      >
+        <MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
+        <div class="text-3xl text-primary">Drop here</div>
+      </div>
+
       <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
         <a-card class="nc-attachment-item group">
           <a-tooltip>
@@ -59,7 +71,7 @@ async function downloadFile(item: Record<string, any>) {
           <a-tooltip placement="bottom">
             <template #title> Download file </template>
 
-            <div class="nc-attachment-download">
+            <div class="nc-attachment-download group-hover:(opacity-100)">
               <MdiDownload @click.stop="downloadFile(item)" />
             </div>
           </a-tooltip>
@@ -87,45 +99,51 @@ async function downloadFile(item: Record<string, any>) {
   </a-modal>
 </template>
 
-<style lang="scss" scoped>
-.nc-attach-file {
-  @apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
-  @apply hover:(bg-primary/10 text-primary ring);
-  @apply active:(ring-pink-500 bg-primary/20);
-}
+<style lang="scss">
+.nc-attachment-modal {
+  .nc-attach-file {
+    @apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
+    @apply hover:(bg-primary/10 text-primary ring);
+    @apply active:(ring-pink-500 bg-primary/20);
+  }
 
-.nc-attachment-item {
-  @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative;
+  .nc-attachment-item {
+    @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative;
 
-  &::after {
-    @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
-    content: '';
-  }
+    &::after {
+      @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
+      content: '';
+    }
 
-  &:hover::after {
-    @apply ring shadow transform scale-103;
+    &:hover::after {
+      @apply ring shadow transform scale-103;
+    }
+
+    &:active::after {
+      @apply ring ring-pink-500 shadow transform scale-103;
+    }
   }
 
-  &:active::after {
-    @apply ring ring-pink-500 shadow transform scale-103;
+  .nc-attachment-download {
+    @apply absolute bottom-2 right-2;
+    @apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
+    @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
+    @apply active:(ring border-0 ring-pink-500);
   }
-}
 
-.nc-attachment-download {
-  @apply absolute bottom-2 right-2;
-  @apply transition-opacity duration-150 ease-in opacity-0 group-hover:(opacity-100) hover:ring;
-  @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
-  @apply active:(ring border-0 ring-pink-500);
-}
+  .nc-attachment-remove {
+    @apply absolute top-2 right-2;
+    @apply hover:(ring ring-red-500);
+    @apply cursor-pointer rounded-full border-1;
+    @apply active:(ring border-0 ring-red-500);
+  }
 
-.nc-attachment-remove {
-  @apply absolute top-2 right-2;
-  @apply hover:(ring ring-red-500);
-  @apply cursor-pointer rounded-full border-1;
-  @apply active:(ring border-0 ring-red-500);
-}
+  .ant-card-body {
+    @apply !p-2;
+  }
 
-:deep(.ant-card-body) {
-  @apply !p-2;
+  .ant-modal-body {
+    @apply !p-0;
+  }
 }
 </style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 594558f815..408fd96331 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -23,7 +23,7 @@ const emits = defineEmits<Emits>()
 
 const dropZoneRef = ref<HTMLDivElement>()
 
-const { modalVisible, attachments, visibleItems, onFileSelect, isLoading, open, FileIcon, fileRemovedHook, fileAddedHook } =
+const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, fileRemovedHook, fileAddedHook } =
   useProvideAttachmentCell()
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
@@ -46,13 +46,6 @@ fileAddedHook.on((data) => {
   emits('update:modelValue', data)
 })
 
-function onDrop(droppedFiles: File[] | null) {
-  if (droppedFiles) {
-    // set files
-    onFileSelect(droppedFiles)
-  }
-}
-
 const selectImage = (file: any, i: unknown) => {
   // todo: implement
 }
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index c98b0a53d0..5f19130b7f 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -1,4 +1,5 @@
 import { notification } from 'ant-design-vue'
+import FileSaver from 'file-saver'
 import { computed, createEventHook, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
 import { ColumnInj, EditModeInj, MetaInj } from '~/context'
 import { isImage } from '~/utils'
@@ -93,6 +94,17 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState((
     fileAddedHook.trigger([...attachments.value, ...newAttachments])
   }
 
+  function onDrop(droppedFiles: File[] | null) {
+    if (droppedFiles) {
+      // set files
+      onFileSelect(droppedFiles)
+    }
+  }
+
+  async function downloadFile(item: Record<string, any>) {
+    FileSaver.saveAs(item.url || item.data, item.title)
+  }
+
   const FileIcon = (icon: string) => {
     switch (icon) {
       case 'mdi-pdf-box':
@@ -125,11 +137,12 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState((
     isLoading,
     api,
     open,
-    onFileSelect,
+    onDrop,
     modalVisible,
     FileIcon,
     fileRemovedHook,
     fileAddedHook,
     removeFile,
+    downloadFile,
   }
 }, 'attachmentCell')

From 4ff2c47ae1fc6bd155820d00a9fab3f863fbdabc Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 21:13:28 +0200
Subject: [PATCH 14/47] feat(gui-v2): add sortable to attachment items

---
 .../components/cell/attachment/Modal.vue      | 109 ++++++---
 .../components/cell/attachment/index.vue      |  43 +++-
 .../components/cell/attachment/sort.ts        |  67 ++++++
 .../components/cell/attachment/utils.ts       | 226 +++++++++---------
 4 files changed, 280 insertions(+), 165 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/cell/attachment/sort.ts

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 5348ca9b28..d88376c540 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -8,17 +8,34 @@ import MdiCloseCircle from '~icons/mdi/close-circle'
 import MdiDownload from '~icons/mdi/download'
 import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
 import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+import { useSortable } from './sort'
 
 const { isUIAllowed } = useUIPermission()
 
-const { open, isLoading, isPublicGrid, isForm, visibleItems, modalVisible, column, FileIcon, removeFile, onDrop, downloadFile } =
-  useAttachmentCell()
+const {
+  open,
+  isLoading,
+  isPublicGrid,
+  isForm,
+  visibleItems,
+  modalVisible,
+  column,
+  FileIcon,
+  removeFile,
+  onDrop,
+  downloadFile,
+  updateModelValue,
+} = useAttachmentCell()
 
 // todo: replace placeholder var
 const isLocked = ref(false)
 
 const dropZoneRef = ref<HTMLDivElement>()
 
+const sortableRef = ref<HTMLDivElement>()
+
+const { dragging } = useSortable(dropZoneRef, visibleItems, updateModelValue)
+
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
 onKeyDown('Escape', () => {
@@ -47,52 +64,55 @@ onKeyDown('Escape', () => {
       </div>
     </template>
 
-    <div ref="dropZoneRef" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
+    <div ref="dropZoneRef" :class="{ dragging }">
       <div
-        :class="isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+        v-if="!dragging"
+        :class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
         class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-blue-100/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
       >
         <MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
         <div class="text-3xl text-primary">Drop here</div>
       </div>
 
-      <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
-        <a-card class="nc-attachment-item group">
-          <a-tooltip>
-            <template #title> Remove File </template>
-
-            <MdiCloseCircle
-              v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
-              class="nc-attachment-remove"
-              @click.stop="removeFile(i)"
-            />
-          </a-tooltip>
-
-          <a-tooltip placement="bottom">
-            <template #title> Download file </template>
-
-            <div class="nc-attachment-download group-hover:(opacity-100)">
-              <MdiDownload @click.stop="downloadFile(item)" />
+      <div ref="sortableRef" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
+        <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
+          <a-card class="nc-attachment-item group">
+            <a-tooltip>
+              <template #title> Remove File </template>
+
+              <MdiCloseCircle
+                v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
+                class="nc-attachment-remove"
+                @click.stop="removeFile(i)"
+              />
+            </a-tooltip>
+
+            <a-tooltip placement="bottom">
+              <template #title> Download file </template>
+
+              <div class="nc-attachment-download group-hover:(opacity-100)">
+                <MdiDownload @click.stop="downloadFile(item)" />
+              </div>
+            </a-tooltip>
+
+            <div class="nc-attachment p-2 flex items-center cursor-pointer">
+              <img v-if="isImage(item.title, item.mimetype)" :alt="item.title || `#${i}`" :src="item.url || item.data" />
+
+              <component
+                :is="FileIcon(item.icon)"
+                v-else-if="item.icon"
+                height="150"
+                width="150"
+                @click.stop="openLink(item.url || item.data)"
+              />
+
+              <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(item.url || item.data)" />
             </div>
-          </a-tooltip>
-
-          <div class="p-2 flex items-center cursor-pointer">
-            <img v-if="isImage(item.title, item.mimetype)" :alt="item.title || `#${i}`" :src="item.url || item.data" />
-
-            <component
-              :is="FileIcon(item.icon)"
-              v-else-if="item.icon"
-              height="150"
-              width="150"
-              @click.stop="openLink(item.url || item.data)"
-            />
+          </a-card>
 
-            <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(item.url || item.data)" />
+          <div class="truncate" :title="item.title">
+            {{ item.title }}
           </div>
-        </a-card>
-
-        <div class="truncate" :title="item.title">
-          {{ item.title }}
         </div>
       </div>
     </div>
@@ -108,7 +128,7 @@ onKeyDown('Escape', () => {
   }
 
   .nc-attachment-item {
-    @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative;
+    @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative hover:(!border-0);
 
     &::after {
       @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
@@ -145,5 +165,16 @@ onKeyDown('Escape', () => {
   .ant-modal-body {
     @apply !p-0;
   }
+
+  .ghost,
+  .ghost > * {
+    @apply !pointer-events-none;
+  }
+
+  &.dragging {
+    .ant-tooltip {
+      @apply !hidden;
+    }
+  }
 }
 </style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 408fd96331..b112d132e5 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -8,6 +8,7 @@ import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
 import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
 import MdiReload from '~icons/mdi/reload'
 import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+import { useSortable } from './sort'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null
@@ -23,8 +24,11 @@ const emits = defineEmits<Emits>()
 
 const dropZoneRef = ref<HTMLDivElement>()
 
-const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, fileRemovedHook, fileAddedHook } =
-  useProvideAttachmentCell()
+const sortableRef = ref<HTMLDivElement>()
+
+const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon } = useProvideAttachmentCell(updateModelValue)
+
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
@@ -38,13 +42,10 @@ watch(
   { immediate: true },
 )
 
-fileRemovedHook.on((data) => {
-  emits('update:modelValue', data)
-})
-
-fileAddedHook.on((data) => {
-  emits('update:modelValue', data)
-})
+function updateModelValue(data: string | Record<string, any>) {
+  console.log(data)
+  emits('update:modelValue', typeof data !== 'string' ? JSON.stringify(data) : data)
+}
 
 const selectImage = (file: any, i: unknown) => {
   // todo: implement
@@ -52,8 +53,8 @@ const selectImage = (file: any, i: unknown) => {
 </script>
 
 <template>
-  <div ref="dropZoneRef" class="flex-1 color-transition flex items-center justify-between gap-1">
-    <template v-if="isOverDropZone">
+  <div ref="dropZoneRef" class="nc-attachment-cell flex-1 color-transition flex items-center justify-between gap-1">
+    <template v-if="!dragging && isOverDropZone">
       <div
         class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
       >
@@ -82,12 +83,15 @@ const selectImage = (file: any, i: unknown) => {
 
       <template v-if="visibleItems.length">
         <div
+          ref="sortableRef"
+          :class="{ dragging }"
           class="h-full w-full flex flex-wrap flex-col gap-2 content-start py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary"
         >
           <div
             v-for="(item, i) of visibleItems"
+            :id="item.url"
             :key="item.url || item.title"
-            class="flex-auto flex items-center justify-center w-[45px] border-1"
+            class="nc-attachment flex-auto flex items-center justify-center w-[45px] border-1"
           >
             <a-tooltip placement="bottom">
               <template #title>
@@ -123,3 +127,18 @@ const selectImage = (file: any, i: unknown) => {
     <Modal />
   </div>
 </template>
+
+<style lang="scss">
+.nc-attachment-cell {
+  .ghost,
+  .ghost > * {
+    @apply !pointer-events-none;
+  }
+
+  &.dragging {
+    .ant-tooltip {
+      @apply !hidden;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/sort.ts b/packages/nc-gui-v2/components/cell/attachment/sort.ts
new file mode 100644
index 0000000000..ebe3fbd523
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/sort.ts
@@ -0,0 +1,67 @@
+import type { SortableEvent } from 'sortablejs'
+import Sortable from 'sortablejs'
+import type { MaybeRef } from '@vueuse/core'
+import { watchPostEffect } from '@vue/runtime-core'
+import { unref } from '#imports'
+
+export function useSortable(
+  element: MaybeRef<HTMLElement | undefined>,
+  items: MaybeRef<any[]>,
+  updateModelValue: (data: string | Record<string, any>[]) => void,
+) {
+  let dragging = $ref(false)
+
+  function onSortStart(evt: SortableEvent) {
+    evt.stopImmediatePropagation()
+    evt.preventDefault()
+    dragging = true
+  }
+
+  async function onSortEnd(evt: SortableEvent) {
+    evt.stopImmediatePropagation()
+    evt.preventDefault()
+    dragging = false
+
+    const _items = unref(items)
+
+    if (_items.length < 2) return
+
+    const { newIndex = 0, oldIndex = 0 } = evt
+
+    console.log(newIndex, oldIndex)
+
+    if (newIndex === oldIndex) return
+
+    _items.splice(newIndex, 0, ..._items.splice(oldIndex, 1))
+
+    updateModelValue(_items)
+  }
+
+  let sortable: Sortable
+
+  // todo: replace with vuedraggable
+  const initSortable = (el: HTMLElement) => {
+    if (sortable) sortable.destroy()
+
+    sortable = new Sortable(el, {
+      handle: '.nc-attachment',
+      ghostClass: 'ghost',
+      onStart: onSortStart,
+      onEnd: onSortEnd,
+    })
+  }
+
+  watchPostEffect((onCleanup) => {
+    onCleanup(() => {
+      if (sortable) sortable.destroy()
+    })
+
+    const _element = unref(element)
+    if (_element) initSortable(_element)
+  })
+
+  return {
+    dragging: $$(dragging),
+    initSortable,
+  }
+}
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index 5f19130b7f..1716d85969 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -1,6 +1,6 @@
 import { notification } from 'ant-design-vue'
 import FileSaver from 'file-saver'
-import { computed, createEventHook, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
+import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
 import { ColumnInj, EditModeInj, MetaInj } from '~/context'
 import { isImage } from '~/utils'
 import { NOCO } from '~/lib'
@@ -10,139 +10,137 @@ import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
 import MdiFileExcelOutline from '~icons/mdi/file-excel-outline'
 import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
 
-export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(() => {
-  const isPublicForm = inject('isPublicForm', false)
+export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
+  (updateModelValue: (data: string | Record<string, any>[]) => void) => {
+    const isPublicForm = inject('isPublicForm', false)
 
-  const isForm = inject('isForm', false)
+    const isForm = inject('isForm', false)
 
-  // todo: replace placeholder var
-  const isPublicGrid = $ref(false)
+    // todo: replace placeholder var
+    const isPublicGrid = $ref(false)
 
-  const meta = inject(MetaInj)!
+    const meta = inject(MetaInj)!
 
-  const column = inject(ColumnInj)!
+    const column = inject(ColumnInj)!
 
-  const editEnabled = inject(EditModeInj, ref(false))
+    const editEnabled = inject(EditModeInj, ref(false))
 
-  const storedFiles = ref<{ title: string; file: File }[]>([])
+    const storedFiles = ref<{ title: string; file: File }[]>([])
 
-  const attachments = ref<File[]>([])
+    const attachments = ref<File[]>([])
 
-  const modalVisible = ref(false)
+    const modalVisible = ref(false)
 
-  const { project } = useProject()
+    const { project } = useProject()
 
-  const { api, isLoading } = useApi()
+    const { api, isLoading } = useApi()
 
-  const { files, open } = useFileDialog()
+    const { files, open } = useFileDialog()
 
-  const fileRemovedHook = createEventHook<string | Record<string, any>[]>()
+    function removeFile(i: number) {
+      if (isPublicForm) {
+        storedFiles.value.splice(i, 1)
 
-  const fileAddedHook = createEventHook<File[]>()
-
-  function removeFile(i: number) {
-    if (isPublicForm) {
-      storedFiles.value.splice(i, 1)
-
-      fileRemovedHook.trigger(storedFiles.value.map((storedFile) => storedFile.file))
-    } else {
-      attachments.value.splice(i, 1)
-      fileRemovedHook.trigger(attachments.value)
-    }
-  }
-
-  async function onFileSelect(selectedFiles: FileList | File[]) {
-    if (!selectedFiles.length || isPublicGrid) return
-
-    if (isPublicForm) {
-      storedFiles.value.push(
-        ...Array.from(selectedFiles).map((file) => {
-          const res = { file, title: file.name }
-          if (isImage(file.name, (file as any).mimetype)) {
-            const reader = new FileReader()
-            reader.readAsDataURL(file)
-          }
-          return res
-        }),
-      )
-
-      return fileAddedHook.trigger(storedFiles.value.map((storedFile) => storedFile.file))
+        updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+      } else {
+        attachments.value.splice(i, 1)
+        updateModelValue(attachments.value)
+      }
     }
 
-    const newAttachments = []
-
-    for (const file of selectedFiles) {
-      try {
-        const data = await api.storage.upload(
-          {
-            path: [NOCO, project.value.title, meta.value.title, column.title].join('/'),
-          },
-          {
-            files: file,
-            json: '{}',
-          },
+    async function onFileSelect(selectedFiles: FileList | File[]) {
+      if (!selectedFiles.length || isPublicGrid) return
+
+      if (isPublicForm) {
+        storedFiles.value.push(
+          ...Array.from(selectedFiles).map((file) => {
+            const res = { file, title: file.name }
+            if (isImage(file.name, (file as any).mimetype)) {
+              const reader = new FileReader()
+              reader.readAsDataURL(file)
+            }
+            return res
+          }),
         )
 
-        newAttachments.push(...data)
-      } catch (e: any) {
-        notification.error({
-          message: e.message || 'Some internal error occurred',
-        })
+        return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
       }
+
+      const newAttachments = []
+
+      for (const file of selectedFiles) {
+        try {
+          const data = await api.storage.upload(
+            {
+              path: [NOCO, project.value.title, meta.value.title, column.title].join('/'),
+            },
+            {
+              files: file,
+              json: '{}',
+            },
+          )
+
+          newAttachments.push(...data)
+        } catch (e: any) {
+          notification.error({
+            message: e.message || 'Some internal error occurred',
+          })
+        }
+      }
+
+      updateModelValue([...attachments.value, ...newAttachments])
     }
 
-    fileAddedHook.trigger([...attachments.value, ...newAttachments])
-  }
+    async function onDrop(droppedFiles: File[] | null) {
+      if (droppedFiles) {
+        // set files
+        await onFileSelect(droppedFiles)
+      }
+    }
+
+    async function downloadFile(item: Record<string, any>) {
+      FileSaver.saveAs(item.url || item.data, item.title)
+    }
 
-  function onDrop(droppedFiles: File[] | null) {
-    if (droppedFiles) {
-      // set files
-      onFileSelect(droppedFiles)
+    const FileIcon = (icon: string) => {
+      switch (icon) {
+        case 'mdi-pdf-box':
+          return MdiPdfBox
+        case 'mdi-file-word-outline':
+          return MdiFileWordOutline
+        case 'mdi-file-powerpoint-box':
+          return MdiFilePowerpointBox
+        case 'mdi-file-excel-outline':
+          return MdiFileExcelOutline
+        default:
+          return IcOutlineInsertDriveFile
+      }
     }
-  }
-
-  async function downloadFile(item: Record<string, any>) {
-    FileSaver.saveAs(item.url || item.data, item.title)
-  }
-
-  const FileIcon = (icon: string) => {
-    switch (icon) {
-      case 'mdi-pdf-box':
-        return MdiPdfBox
-      case 'mdi-file-word-outline':
-        return MdiFileWordOutline
-      case 'mdi-file-powerpoint-box':
-        return MdiFilePowerpointBox
-      case 'mdi-file-excel-outline':
-        return MdiFileExcelOutline
-      default:
-        return IcOutlineInsertDriveFile
+
+    const visibleItems = computed<any[]>(() => (isPublicForm ? storedFiles.value : attachments.value) || ([] as any[]))
+
+    watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
+
+    return {
+      attachments,
+      storedFiles,
+      visibleItems,
+      isPublicForm,
+      isForm,
+      isPublicGrid,
+      meta,
+      column,
+      editEnabled,
+      isLoading,
+      api,
+      open,
+      onDrop,
+      modalVisible,
+      FileIcon,
+      removeFile,
+      downloadFile,
+      updateModelValue,
     }
-  }
-
-  const visibleItems = computed(() => (isPublicForm ? storedFiles.value : attachments.value) || [])
-
-  watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
-
-  return {
-    attachments,
-    storedFiles,
-    visibleItems,
-    isPublicForm,
-    isForm,
-    isPublicGrid,
-    meta,
-    column,
-    editEnabled,
-    isLoading,
-    api,
-    open,
-    onDrop,
-    modalVisible,
-    FileIcon,
-    fileRemovedHook,
-    fileAddedHook,
-    removeFile,
-    downloadFile,
-  }
-}, 'attachmentCell')
+  },
+  'attachmentCell',
+)

From c332258a7161ed05232b3b956ad694d5d0271c41 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 21:34:53 +0200
Subject: [PATCH 15/47] chore(gui-v2): use correct ref el for sortable

---
 packages/nc-gui-v2/components/cell/attachment/Modal.vue | 4 ++--
 packages/nc-gui-v2/components/cell/attachment/index.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index d88376c540..ae02af9b77 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
+import { useSortable } from './sort'
 import { ref, useDropZone, useUIPermission } from '#imports'
 import { isImage, openLink } from '~/utils'
 import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
@@ -8,7 +9,6 @@ import MdiCloseCircle from '~icons/mdi/close-circle'
 import MdiDownload from '~icons/mdi/download'
 import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
 import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
-import { useSortable } from './sort'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -34,7 +34,7 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { dragging } = useSortable(dropZoneRef, visibleItems, updateModelValue)
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index b112d132e5..8aa198833f 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useProvideAttachmentCell } from './utils'
 import Modal from './Modal.vue'
+import { useSortable } from './sort'
 import { ref, useDropZone, watch } from '#imports'
 import { isImage, openLink } from '~/utils'
 import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
@@ -8,7 +9,6 @@ import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
 import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
 import MdiReload from '~icons/mdi/reload'
 import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
-import { useSortable } from './sort'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null

From f83cb9a127d769209532c83983b000df4d493b7d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 21:35:07 +0200
Subject: [PATCH 16/47] chore(gui-v2): remove logs

---
 packages/nc-gui-v2/components/cell/attachment/sort.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/sort.ts b/packages/nc-gui-v2/components/cell/attachment/sort.ts
index ebe3fbd523..c7985cc2bc 100644
--- a/packages/nc-gui-v2/components/cell/attachment/sort.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/sort.ts
@@ -28,8 +28,6 @@ export function useSortable(
 
     const { newIndex = 0, oldIndex = 0 } = evt
 
-    console.log(newIndex, oldIndex)
-
     if (newIndex === oldIndex) return
 
     _items.splice(newIndex, 0, ..._items.splice(oldIndex, 1))

From b285ce65e0bc38e03ab355ae962bcf60fb23b93c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 22:00:51 +0200
Subject: [PATCH 17/47] feat(gui-v2): add general overlay component

---
 .../nc-gui-v2/components/general/Overlay.vue  | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/general/Overlay.vue

diff --git a/packages/nc-gui-v2/components/general/Overlay.vue b/packages/nc-gui-v2/components/general/Overlay.vue
new file mode 100644
index 0000000000..67f705648e
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/Overlay.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { onKeyDown } from '@vueuse/core'
+import { useVModel, watch } from '#imports'
+
+interface Props {
+  modelValue?: any
+}
+
+interface Emits {
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'close'): void
+  (event: 'open'): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+onKeyDown('Escape', () => {
+  vModel.value = false
+})
+
+watch(vModel, (nextVal) => {
+  if (nextVal) emits('open')
+  else emits('close')
+})
+</script>
+
+<template>
+  <teleport to="body">
+    <div
+      :class="[vModel ? 'opacity-100' : 'opacity-0 pointer-events-none']"
+      class="transition-opacity duration-200 ease-in-out fixed z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+    >
+      <slot :is-open="vModel" />
+    </div>
+  </teleport>
+</template>

From 1ef4d94da3ac23083ed52937fdcdb5286976483f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 23:43:29 +0200
Subject: [PATCH 18/47] chore(gui-v2,deps): update ant-design-vue

---
 packages/nc-gui-v2/package-lock.json | 2 +-
 packages/nc-gui-v2/package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 6c5b48eacf..6d37f39129 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -7,7 +7,7 @@
       "dependencies": {
         "@vueuse/core": "^9.0.2",
         "@vueuse/integrations": "^9.0.2",
-        "ant-design-vue": "^3.1.0-rc.6",
+        "ant-design-vue": "^3.2.10",
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
         "jwt-decode": "^3.1.2",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 64531471c0..0b030b061c 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@vueuse/core": "^9.0.2",
     "@vueuse/integrations": "^9.0.2",
-    "ant-design-vue": "^3.1.0-rc.6",
+    "ant-design-vue": "^3.2.10",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "jwt-decode": "^3.1.2",

From 21e31f9c008b03488131b436a2b033b9c7aaffe4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 23:43:43 +0200
Subject: [PATCH 19/47] feat(gui-v2,deps): add attachment views carousel

---
 packages/nc-gui-v2/components.d.ts            |   1 +
 .../components/cell/attachment/Carousel.vue   | 128 ++++++++++++++++++
 .../components/cell/attachment/Modal.vue      |   2 +-
 .../components/cell/attachment/index.vue      |  13 +-
 .../components/cell/attachment/sort.ts        |   7 +-
 .../components/cell/attachment/utils.ts       |   3 +
 6 files changed, 144 insertions(+), 10 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/cell/attachment/Carousel.vue

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index d0e6800cef..9d7df38fcc 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
new file mode 100644
index 0000000000..2274b1e9e3
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { Carousel as AntCarousel } from 'ant-design-vue'
+import { onKeyDown } from '@vueuse/core'
+import { useAttachmentCell } from './utils'
+import { isImage } from '~/utils'
+import { computed, ref } from '#imports'
+import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded'
+import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded'
+import MdiCloseCircle from '~icons/mdi/close-circle'
+
+const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
+
+const carouselRef = ref<typeof AntCarousel>()
+
+const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
+
+onKeyDown(
+  (e) => ['Left', 'ArrowLeft', 'A'].includes(e.key),
+  () => {
+    if (carouselRef.value) carouselRef.value.prev()
+  },
+)
+
+onKeyDown(
+  (e) => ['Right', 'ArrowRight', 'D'].includes(e.key),
+  () => {
+    if (carouselRef.value) carouselRef.value.next()
+  },
+)
+
+function onSlideChange(index: number) {
+  selectedImage.value = imageItems.value[index]
+}
+</script>
+
+<template>
+  <general-overlay v-model="selectedImage">
+    <template v-if="selectedImage">
+      <div class="p-12 text-center relative">
+        <div class="text-white group absolute top-5 right-5">
+          <MdiCloseCircle class="group-hover:text-red-500 cursor-pointer text-4xl" @click.stop="selectedImage = false" />
+        </div>
+
+        <div
+          class="select-none group hover:ring active:ring-pink-500 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
+          @click.stop="downloadFile(selectedImage)"
+        >
+          <h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>
+        </div>
+
+        <a-carousel
+          v-if="!!selectedImage"
+          ref="carouselRef"
+          dots-class="slick-dots slick-thumb"
+          :after-change="onSlideChange"
+          arrows
+        >
+          <template #prevArrow>
+            <div class="custom-slick-arrow left-2 z-1">
+              <MaterialSymbolsArrowCircleLeftRounded />
+            </div>
+          </template>
+
+          <template #nextArrow>
+            <div class="custom-slick-arrow !right-2 z-1">
+              <MaterialSymbolsArrowCircleRightRounded />
+            </div>
+          </template>
+
+          <template #customPaging="props">
+            <a>
+              <img
+                class="!block w-full"
+                :alt="imageItems[props.i].title || `#${props.i}`"
+                :src="imageItems[props.i].url || imageItems[props.i].data"
+              />
+            </a>
+          </template>
+
+          <div v-for="(item, i) of imageItems" :key="item.url">
+            <img class="!block w-full max-w-75vw max-h-75vh" :alt="item.title || `#${i}`" :src="item.url || item.data" />
+          </div>
+        </a-carousel>
+      </div>
+    </template>
+  </general-overlay>
+</template>
+
+<style scoped>
+.ant-carousel :deep(.slick-dots) {
+  @apply relative mt-4;
+}
+
+.ant-carousel :deep(.slick-slide) {
+  @apply w-full;
+}
+
+.ant-carousel :deep(.slick-slide img) {
+  @apply border-1 m-auto;
+}
+
+.ant-carousel :deep(.slick-thumb) {
+  @apply bottom-2;
+}
+
+.ant-carousel :deep(.slick-thumb li) {
+  @apply w-[60px] h-[45px];
+}
+
+.ant-carousel :deep(.slick-thumb li img) {
+  @apply w-full h-full block;
+  filter: grayscale(100%);
+}
+
+.ant-carousel :deep .slick-thumb li.slick-active img {
+  filter: grayscale(0%);
+}
+
+.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
+  @apply text-4xl text-white hover:text-primary active:text-pink-500 opacity-100 cursor-pointer z-1;
+}
+.ant-carousel :deep(.custom-slick-arrow:before) {
+  display: none;
+}
+.ant-carousel :deep(.custom-slick-arrow:hover) {
+  opacity: 0.5;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index ae02af9b77..da5295b52f 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -25,7 +25,7 @@ const {
   onDrop,
   downloadFile,
   updateModelValue,
-} = useAttachmentCell()
+} = useAttachmentCell()!
 
 // todo: replace placeholder var
 const isLocked = ref(false)
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 8aa198833f..3249a552a0 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -2,6 +2,7 @@
 import { useProvideAttachmentCell } from './utils'
 import Modal from './Modal.vue'
 import { useSortable } from './sort'
+import Carousel from './Carousel.vue'
 import { ref, useDropZone, watch } from '#imports'
 import { isImage, openLink } from '~/utils'
 import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
@@ -26,7 +27,8 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon } = useProvideAttachmentCell(updateModelValue)
+const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage } =
+  useProvideAttachmentCell(updateModelValue)
 
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue)
 
@@ -43,17 +45,18 @@ watch(
 )
 
 function updateModelValue(data: string | Record<string, any>) {
-  console.log(data)
   emits('update:modelValue', typeof data !== 'string' ? JSON.stringify(data) : data)
 }
 
-const selectImage = (file: any, i: unknown) => {
-  // todo: implement
+const selectImage = (file: any) => {
+  selectedImage.value = file
 }
 </script>
 
 <template>
   <div ref="dropZoneRef" class="nc-attachment-cell flex-1 color-transition flex items-center justify-between gap-1">
+    <Carousel />
+
     <template v-if="!dragging && isOverDropZone">
       <div
         class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
@@ -102,7 +105,7 @@ const selectImage = (file: any, i: unknown) => {
                 v-if="isImage(item.title, item.mimetype)"
                 :alt="item.title || `#${i}`"
                 :src="item.url || item.data"
-                @click="selectImage(item.url || item.data, i)"
+                @click="selectImage(item)"
               />
 
               <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
diff --git a/packages/nc-gui-v2/components/cell/attachment/sort.ts b/packages/nc-gui-v2/components/cell/attachment/sort.ts
index c7985cc2bc..80cf19fb46 100644
--- a/packages/nc-gui-v2/components/cell/attachment/sort.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/sort.ts
@@ -39,8 +39,6 @@ export function useSortable(
 
   // todo: replace with vuedraggable
   const initSortable = (el: HTMLElement) => {
-    if (sortable) sortable.destroy()
-
     sortable = new Sortable(el, {
       handle: '.nc-attachment',
       ghostClass: 'ghost',
@@ -50,11 +48,12 @@ export function useSortable(
   }
 
   watchPostEffect((onCleanup) => {
+    const _element = unref(element)
+
     onCleanup(() => {
-      if (sortable) sortable.destroy()
+      if (_element && sortable) sortable.destroy()
     })
 
-    const _element = unref(element)
     if (_element) initSortable(_element)
   })
 
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index 1716d85969..c874b6e6d4 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -31,6 +31,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const modalVisible = ref(false)
 
+    const selectedImage = ref()
+
     const { project } = useProject()
 
     const { api, isLoading } = useApi()
@@ -140,6 +142,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       removeFile,
       downloadFile,
       updateModelValue,
+      selectedImage,
     }
   },
   'attachmentCell',

From 72172bf6cfcc0aebe72abf8f9a664c1ea8fca1ca Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 23:51:56 +0200
Subject: [PATCH 20/47] feat(gui-v2): disable interaction on attachments for
 readonly state

---
 .../nc-gui-v2/components/cell/attachment/Modal.vue  | 10 ++++++----
 .../nc-gui-v2/components/cell/attachment/index.vue  | 13 ++++++++++---
 .../nc-gui-v2/components/cell/attachment/sort.ts    |  3 ++-
 .../nc-gui-v2/components/cell/attachment/utils.ts   |  5 ++++-
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index da5295b52f..da610af049 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -17,6 +17,7 @@ const {
   isLoading,
   isPublicGrid,
   isForm,
+  isReadonly,
   visibleItems,
   modalVisible,
   column,
@@ -34,7 +35,7 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue)
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
@@ -49,7 +50,7 @@ onKeyDown('Escape', () => {
     <template #title>
       <div class="flex gap-4">
         <div
-          v-if="(isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
+          v-if="!isReadonly && (isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
           class="nc-attach-file group"
           @click="open"
         >
@@ -58,6 +59,7 @@ onKeyDown('Escape', () => {
         </div>
 
         <div class="flex items-center gap-2">
+          <div v-if="isReadonly" class="text-gray-400">[Readonly]</div>
           Viewing Attachments of
           <div class="font-semibold underline">{{ column.title }}</div>
         </div>
@@ -66,7 +68,7 @@ onKeyDown('Escape', () => {
 
     <div ref="dropZoneRef" :class="{ dragging }">
       <div
-        v-if="!dragging"
+        v-if="!isReadonly && !dragging"
         :class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
         class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-blue-100/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
       >
@@ -77,7 +79,7 @@ onKeyDown('Escape', () => {
       <div ref="sortableRef" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
         <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
           <a-card class="nc-attachment-item group">
-            <a-tooltip>
+            <a-tooltip v-if="!isReadonly">
               <template #title> Remove File </template>
 
               <MdiCloseCircle
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 3249a552a0..ffcf4f0cb2 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
 import Modal from './Modal.vue'
 import { useSortable } from './sort'
@@ -27,10 +28,10 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage } =
+const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
   useProvideAttachmentCell(updateModelValue)
 
-const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue)
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
@@ -51,13 +52,18 @@ function updateModelValue(data: string | Record<string, any>) {
 const selectImage = (file: any) => {
   selectedImage.value = file
 }
+
+onKeyDown('Escape', () => {
+  modalVisible.value = false
+  isOverDropZone.value = false
+})
 </script>
 
 <template>
   <div ref="dropZoneRef" class="nc-attachment-cell flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
-    <template v-if="!dragging && isOverDropZone">
+    <template v-if="!isReadonly && !dragging && isOverDropZone">
       <div
         class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
       >
@@ -67,6 +73,7 @@ const selectImage = (file: any) => {
 
     <template v-else>
       <div
+        v-if="!isReadonly"
         :class="{ 'mx-auto px-4': !visibleItems.length }"
         class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
         @click.stop="open"
diff --git a/packages/nc-gui-v2/components/cell/attachment/sort.ts b/packages/nc-gui-v2/components/cell/attachment/sort.ts
index 80cf19fb46..c7931205b4 100644
--- a/packages/nc-gui-v2/components/cell/attachment/sort.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/sort.ts
@@ -8,6 +8,7 @@ export function useSortable(
   element: MaybeRef<HTMLElement | undefined>,
   items: MaybeRef<any[]>,
   updateModelValue: (data: string | Record<string, any>[]) => void,
+  isReadonly: MaybeRef<boolean> = false,
 ) {
   let dragging = $ref(false)
 
@@ -54,7 +55,7 @@ export function useSortable(
       if (_element && sortable) sortable.destroy()
     })
 
-    if (_element) initSortable(_element)
+    if (_element && !unref(isReadonly)) initSortable(_element)
   })
 
   return {
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index c874b6e6d4..0909787fb7 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -1,7 +1,7 @@
 import { notification } from 'ant-design-vue'
 import FileSaver from 'file-saver'
 import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
-import { ColumnInj, EditModeInj, MetaInj } from '~/context'
+import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj } from '~/context'
 import { isImage } from '~/utils'
 import { NOCO } from '~/lib'
 import MdiPdfBox from '~icons/mdi/pdf-box'
@@ -12,6 +12,8 @@ import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
 
 export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
   (updateModelValue: (data: string | Record<string, any>[]) => void) => {
+    const isReadonly = inject(ReadonlyInj, false)
+
     const isPublicForm = inject('isPublicForm', false)
 
     const isForm = inject('isForm', false)
@@ -130,6 +132,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       isPublicForm,
       isForm,
       isPublicGrid,
+      isReadonly,
       meta,
       column,
       editEnabled,

From 629838c874ecc9cf763d253471c0c997f950f220 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 00:13:19 +0200
Subject: [PATCH 21/47] chore(gui-v2): update attachment cell styles

---
 .../components/cell/attachment/Modal.vue      |   4 +-
 .../components/cell/attachment/index.vue      | 102 +++++++++---------
 2 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index da610af049..f51ffaf9f2 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -70,10 +70,10 @@ onKeyDown('Escape', () => {
       <div
         v-if="!isReadonly && !dragging"
         :class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
-        class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-blue-100/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
+        class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-gray-700/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
       >
         <MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
-        <div class="text-3xl text-primary">Drop here</div>
+        <div class="text-white text-3xl">Drop here</div>
       </div>
 
       <div ref="sortableRef" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index ffcf4f0cb2..1350d36499 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -60,78 +60,76 @@ onKeyDown('Escape', () => {
 </script>
 
 <template>
-  <div ref="dropZoneRef" class="nc-attachment-cell flex-1 color-transition flex items-center justify-between gap-1">
+  <div ref="dropZoneRef" class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
     <template v-if="!isReadonly && !dragging && isOverDropZone">
       <div
-        class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
+        class="z-100 absolute top-0 bottom-0 left-0 right-0 w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gray-700/75 text-white"
       >
         <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
       </div>
     </template>
 
-    <template v-else>
-      <div
-        v-if="!isReadonly"
-        :class="{ 'mx-auto px-4': !visibleItems.length }"
-        class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
-        @click.stop="open"
-      >
-        <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+    <div
+      v-if="!isReadonly"
+      :class="{ 'mx-auto px-4': !visibleItems.length }"
+      class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
+      @click.stop="open"
+    >
+      <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
-        <a-tooltip v-else placement="bottom">
-          <template #title> Click or drop a file into cell </template>
+      <a-tooltip v-else placement="bottom">
+        <template #title> Click or drop a file into cell </template>
 
-          <div class="flex items-center gap-2">
-            <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+        <div class="flex items-center gap-2">
+          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
 
-            <div v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div>
-          </div>
-        </a-tooltip>
-      </div>
+          <div v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div>
+        </div>
+      </a-tooltip>
+    </div>
 
-      <template v-if="visibleItems.length">
+    <template v-if="visibleItems.length">
+      <div
+        ref="sortableRef"
+        :class="{ dragging }"
+        class="flex gap-2 py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary"
+      >
         <div
-          ref="sortableRef"
-          :class="{ dragging }"
-          class="h-full w-full flex flex-wrap flex-col gap-2 content-start py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary"
+          v-for="(item, i) of visibleItems"
+          :id="item.url"
+          :key="item.url || item.title"
+          class="nc-attachment flex-auto flex items-center justify-center min-w-[45px] w-[45px] border-1"
         >
-          <div
-            v-for="(item, i) of visibleItems"
-            :id="item.url"
-            :key="item.url || item.title"
-            class="nc-attachment flex-auto flex items-center justify-center w-[45px] border-1"
-          >
-            <a-tooltip placement="bottom">
-              <template #title>
-                <div class="text-center w-full">{{ item.title }}</div>
-              </template>
-
-              <img
-                v-if="isImage(item.title, item.mimetype)"
-                :alt="item.title || `#${i}`"
-                :src="item.url || item.data"
-                @click="selectImage(item)"
-              />
-
-              <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
-
-              <IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
-            </a-tooltip>
-          </div>
-        </div>
+          <a-tooltip placement="bottom">
+            <template #title>
+              <div class="text-center w-full">{{ item.title }}</div>
+            </template>
 
-        <div class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10">
-          <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+            <img
+              v-if="isImage(item.title, item.mimetype)"
+              :alt="item.title || `#${i}`"
+              :src="item.url || item.data"
+              @click="selectImage(item)"
+            />
 
-          <a-tooltip v-else placement="bottom">
-            <template #title> View attachments </template>
+            <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
 
-            <MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop="modalVisible = true" />
+            <IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
           </a-tooltip>
         </div>
-      </template>
+      </div>
+
+      <div class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10">
+        <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+
+        <a-tooltip v-else placement="bottom">
+          <template #title> View attachments </template>
+
+          <MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop="modalVisible = true" />
+        </a-tooltip>
+      </div>
     </template>
 
     <Modal />

From 7bfbb43e5cec969f20825357cf39a637ff81a5b8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 00:19:35 +0200
Subject: [PATCH 22/47] chore(gui-v2): prevent image overflow in modal

---
 .../components/cell/attachment/Modal.vue         | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index f51ffaf9f2..09a8b7f7c6 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -97,8 +97,12 @@ onKeyDown('Escape', () => {
               </div>
             </a-tooltip>
 
-            <div class="nc-attachment p-2 flex items-center cursor-pointer">
-              <img v-if="isImage(item.title, item.mimetype)" :alt="item.title || `#${i}`" :src="item.url || item.data" />
+            <div class="nc-attachment h-full w-full flex items-center justify-center cursor-move">
+              <div
+                v-if="isImage(item.title, item.mimetype)"
+                :style="{ backgroundImage: `url('${item.url}')`, backgroundSize: 'cover' }"
+                class="w-full h-full"
+              />
 
               <component
                 :is="FileIcon(item.icon)"
@@ -147,21 +151,21 @@ onKeyDown('Escape', () => {
   }
 
   .nc-attachment-download {
-    @apply absolute bottom-2 right-2;
+    @apply bg-white absolute bottom-2 right-2;
     @apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
     @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
     @apply active:(ring border-0 ring-pink-500);
   }
 
   .nc-attachment-remove {
-    @apply absolute top-2 right-2;
+    @apply absolute top-2 right-2 bg-white;
     @apply hover:(ring ring-red-500);
-    @apply cursor-pointer rounded-full border-1;
+    @apply cursor-pointer rounded-full border-2;
     @apply active:(ring border-0 ring-red-500);
   }
 
   .ant-card-body {
-    @apply !p-2;
+    @apply !p-2 w-full h-full;
   }
 
   .ant-modal-body {

From 027fc9ef84b0790c916461c0895e4c4617a14528 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 00:36:16 +0200
Subject: [PATCH 23/47] chore(gui-v2): disable pointer events while dragging

---
 .../nc-gui-v2/components/cell/attachment/Modal.vue   | 12 ++++++++----
 .../nc-gui-v2/components/cell/attachment/index.vue   |  4 ++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 09a8b7f7c6..bba97751ae 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -66,7 +66,7 @@ onKeyDown('Escape', () => {
       </div>
     </template>
 
-    <div ref="dropZoneRef" :class="{ dragging }">
+    <div ref="dropZoneRef">
       <div
         v-if="!isReadonly && !dragging"
         :class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
@@ -76,7 +76,7 @@ onKeyDown('Escape', () => {
         <div class="text-white text-3xl">Drop here</div>
       </div>
 
-      <div ref="sortableRef" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
+      <div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
         <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
           <a-card class="nc-attachment-item group">
             <a-tooltip v-if="!isReadonly">
@@ -134,7 +134,7 @@ onKeyDown('Escape', () => {
   }
 
   .nc-attachment-item {
-    @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative hover:(!border-0);
+    @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative hover:!border-0;
 
     &::after {
       @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
@@ -177,7 +177,11 @@ onKeyDown('Escape', () => {
     @apply !pointer-events-none;
   }
 
-  &.dragging {
+  .dragging {
+    .nc-attachment-item {
+      @apply !pointer-events-none;
+    }
+
     .ant-tooltip {
       @apply !hidden;
     }
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 1350d36499..85afdfcba2 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -74,7 +74,7 @@ onKeyDown('Escape', () => {
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
-      class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
+      class="group flex gap-1 items-center active:ring rounded border-1 p-2 hover:bg-primary/10"
       @click.stop="open"
     >
       <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
@@ -143,7 +143,7 @@ onKeyDown('Escape', () => {
     @apply !pointer-events-none;
   }
 
-  &.dragging {
+  .dragging {
     .ant-tooltip {
       @apply !hidden;
     }

From eb7ddcd8e769a37e887828b34069ae12acfb0c43 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 00:44:54 +0200
Subject: [PATCH 24/47] chore(gui-v2): position img centered

---
 packages/nc-gui-v2/components/cell/attachment/Modal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index bba97751ae..a8f40eec88 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -100,8 +100,8 @@ onKeyDown('Escape', () => {
             <div class="nc-attachment h-full w-full flex items-center justify-center cursor-move">
               <div
                 v-if="isImage(item.title, item.mimetype)"
-                :style="{ backgroundImage: `url('${item.url}')`, backgroundSize: 'cover' }"
-                class="w-full h-full"
+                :style="{ backgroundImage: `url('${item.url}')` }"
+                class="w-full h-full bg-contain bg-center bg-no-repeat"
               />
 
               <component

From 97d0fa12eaa55a19395df76d0eec44092b80e342 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 00:59:31 +0200
Subject: [PATCH 25/47] chore(gui-v2): only enable hover styles for FF

---
 .../components/cell/attachment/Modal.vue       | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index a8f40eec88..ad685df8b8 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -134,19 +134,25 @@ onKeyDown('Escape', () => {
   }
 
   .nc-attachment-item {
-    @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative hover:!border-0;
+    @apply !h-2/3 !min-h-[200px] flex items-center justify-center relative;
+
+    @supports (-moz-appearance: none) {
+      @apply hover:border-0;
+    }
 
     &::after {
       @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
       content: '';
     }
 
-    &:hover::after {
-      @apply ring shadow transform scale-103;
-    }
+    @supports (-moz-appearance: none) {
+      &:hover::after {
+        @apply ring shadow transform scale-103;
+      }
 
-    &:active::after {
-      @apply ring ring-pink-500 shadow transform scale-103;
+      &:active::after {
+        @apply ring ring-pink-500 shadow transform scale-103;
+      }
     }
   }
 

From 153a0abcfac06b09312d98ba91d89d1a29934700 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 01:25:19 +0200
Subject: [PATCH 26/47] refactor(gui-v2): remove scrolling from view list items

---
 .../components/cell/attachment/index.vue      | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 85afdfcba2..9d4ae77f5b 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -74,7 +74,7 @@ onKeyDown('Escape', () => {
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
-      class="group flex gap-1 items-center active:ring rounded border-1 p-2 hover:bg-primary/10"
+      class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
       @click.stop="open"
     >
       <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
@@ -91,16 +91,12 @@ onKeyDown('Escape', () => {
     </div>
 
     <template v-if="visibleItems.length">
-      <div
-        ref="sortableRef"
-        :class="{ dragging }"
-        class="flex gap-2 py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary"
-      >
+      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 py-1 overflow-hidden scrollbar-thin-primary">
         <div
           v-for="(item, i) of visibleItems"
           :id="item.url"
           :key="item.url || item.title"
-          class="nc-attachment flex-auto flex items-center justify-center min-w-[45px] w-[45px] border-1"
+          class="nc-attachment flex-auto flex items-center justify-center min-h-[50px] h-[50px] min-w-[50px] w-[50px] border-1"
         >
           <a-tooltip placement="bottom">
             <template #title>
@@ -109,6 +105,8 @@ onKeyDown('Escape', () => {
 
             <img
               v-if="isImage(item.title, item.mimetype)"
+              width="150"
+              height="150"
               :alt="item.title || `#${i}`"
               :src="item.url || item.data"
               @click="selectImage(item)"
@@ -121,13 +119,16 @@ onKeyDown('Escape', () => {
         </div>
       </div>
 
-      <div class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10">
+      <div class="group flex gap-1 items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
         <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
         <a-tooltip v-else placement="bottom">
           <template #title> View attachments </template>
 
-          <MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop="modalVisible = true" />
+          <MaterialArrowExpandIcon
+            class="select-none transform group-hover:(text-pink-500 scale-120)"
+            @click.stop="modalVisible = true"
+          />
         </a-tooltip>
       </div>
     </template>

From 14e09935444f63b47dc139183ee1f89c032ee3f4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 01:29:51 +0200
Subject: [PATCH 27/47] chore(gui-v2): update attachment carousel styles

---
 .../nc-gui-v2/components/cell/attachment/Carousel.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index 2274b1e9e3..1e3ef02b14 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -57,13 +57,13 @@ function onSlideChange(index: number) {
         >
           <template #prevArrow>
             <div class="custom-slick-arrow left-2 z-1">
-              <MaterialSymbolsArrowCircleLeftRounded />
+              <MaterialSymbolsArrowCircleLeftRounded class="bg-white rounded-full" />
             </div>
           </template>
 
           <template #nextArrow>
             <div class="custom-slick-arrow !right-2 z-1">
-              <MaterialSymbolsArrowCircleRightRounded />
+              <MaterialSymbolsArrowCircleRightRounded class="bg-white rounded-full" />
             </div>
           </template>
 
@@ -77,8 +77,11 @@ function onSlideChange(index: number) {
             </a>
           </template>
 
-          <div v-for="(item, i) of imageItems" :key="item.url">
-            <img class="!block w-full max-w-75vw max-h-75vh" :alt="item.title || `#${i}`" :src="item.url || item.data" />
+          <div v-for="item of imageItems" :key="item.url">
+            <div
+              :style="{ backgroundImage: `url('${item.url}')` }"
+              class="min-w-70vw min-h-70vh w-full h-full bg-contain bg-center bg-no-repeat"
+            />
           </div>
         </a-carousel>
       </div>

From ef82d08182e0d83ce83b24552fc11a1a4a57844f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 01:33:24 +0200
Subject: [PATCH 28/47] chore(gui-v2): scale cell height

---
 packages/nc-gui-v2/components/cell/attachment/index.vue | 2 +-
 packages/nc-gui-v2/components/smartsheet/Cell.vue       | 1 +
 packages/nc-gui-v2/components/smartsheet/Grid.vue       | 4 ----
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 9d4ae77f5b..01b5a6c398 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -91,7 +91,7 @@ onKeyDown('Escape', () => {
     </div>
 
     <template v-if="visibleItems.length">
-      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 py-1 overflow-hidden scrollbar-thin-primary">
+      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 py-1 scrollbar-thin-primary">
         <div
           v-for="(item, i) of visibleItems"
           :id="item.url"
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 5064f486d9..6c16702cc2 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -90,6 +90,7 @@ div {
 
 .nc-cell {
   @apply relative w-full h-full;
+  display: inherit;
 }
 
 .nc-locked-overlay {
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 6166263a1c..e4fb52653d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -175,10 +175,6 @@ if (meta) useProvideColumnCreateStore(meta)
     height: 41px !important;
     position: relative;
     padding: 0 5px;
-
-    & > * {
-      @apply flex items-center;
-    }
     overflow: hidden;
   }
 

From e24496c5c9e86b84214ebbf0ce0785938e400be8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 02:06:20 +0200
Subject: [PATCH 29/47] fix(gui-v2): carousel not opening correct slide on
 start

---
 .../components/cell/attachment/Carousel.vue   | 20 ++++++++++++++++---
 .../components/cell/attachment/Modal.vue      |  2 ++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index 1e3ef02b14..a23bd257aa 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import type { Carousel as AntCarousel } from 'ant-design-vue'
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
 import { isImage } from '~/utils'
-import { computed, ref } from '#imports'
+import { computed, onClickOutside, ref, watch } from '#imports'
 import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded'
 import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
 
-const carouselRef = ref<typeof AntCarousel>()
+const carouselRef = ref()
 
 const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
 
@@ -31,6 +30,21 @@ onKeyDown(
 function onSlideChange(index: number) {
   selectedImage.value = imageItems.value[index]
 }
+
+watch(
+  carouselRef,
+  () => {
+    carouselRef.value?.goTo(
+      imageItems.value.findIndex((item) => item === selectedImage.value),
+      true,
+    )
+  },
+  { immediate: true },
+)
+
+onClickOutside(carouselRef, () => {
+  selectedImage.value = false
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index ad685df8b8..9c1ff958fc 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -26,6 +26,7 @@ const {
   onDrop,
   downloadFile,
   updateModelValue,
+  selectedImage,
 } = useAttachmentCell()!
 
 // todo: replace placeholder var
@@ -102,6 +103,7 @@ onKeyDown('Escape', () => {
                 v-if="isImage(item.title, item.mimetype)"
                 :style="{ backgroundImage: `url('${item.url}')` }"
                 class="w-full h-full bg-contain bg-center bg-no-repeat"
+                @click.stop="() => (selectedImage = item) && (modalVisible = false)"
               />
 
               <component

From 6c90ed4a9a3bb1a5f62bbcc9c123bd746e6952bc Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 02:32:49 +0200
Subject: [PATCH 30/47] chore(gui-v2): overlay img size

---
 packages/nc-gui-v2/components/cell/attachment/Carousel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index a23bd257aa..ecd08c8675 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -50,7 +50,7 @@ onClickOutside(carouselRef, () => {
 <template>
   <general-overlay v-model="selectedImage">
     <template v-if="selectedImage">
-      <div class="p-12 text-center relative">
+      <div class="overflow-hidden p-12 text-center relative">
         <div class="text-white group absolute top-5 right-5">
           <MdiCloseCircle class="group-hover:text-red-500 cursor-pointer text-4xl" @click.stop="selectedImage = false" />
         </div>
@@ -84,7 +84,7 @@ onClickOutside(carouselRef, () => {
           <template #customPaging="props">
             <a>
               <img
-                class="!block w-full"
+                class="!block"
                 :alt="imageItems[props.i].title || `#${props.i}`"
                 :src="imageItems[props.i].url || imageItems[props.i].data"
               />

From ff14003be0cfb64d05df7cc0cd3e20bb5a9136ac Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 08:42:21 +0200
Subject: [PATCH 31/47] chore(gui-v2): update text and textarea cells

---
 packages/nc-gui-v2/components/cell/Text.vue   | 40 ++-----------------
 .../nc-gui-v2/components/cell/TextArea.vue    | 24 +++++------
 2 files changed, 14 insertions(+), 50 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index d2acea4503..7243a1d409 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -8,50 +8,16 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj, ref(false))
 
-const vModel = useVModel(props, 'modelValue', emit)
+const vModel = useVModel(props, 'modelValue', emits)
 
 const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" />
   <span v-else>{{ vModel }}</span>
 </template>
-
-<style scoped>
-input,
-textarea {
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-  outline: none;
-}
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index b911cc5268..fc9a2b7057 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -8,26 +8,24 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj, ref(false))
 
-const vModel = useVModel(props, 'modelValue', emit)
+const vModel = useVModel(props, 'modelValue', emits)
 
 const focus = (el: HTMLTextAreaElement) => el.focus()
 </script>
 
 <template>
-  <textarea v-if="editEnabled" :ref="focus" v-model="vModel" rows="4" @keydown.alt.enter.stop @keydown.shift.enter.stop />
+  <textarea
+    v-if="editEnabled"
+    :ref="focus"
+    v-model="vModel"
+    rows="4"
+    class="h-full w-full min-h-[60px] outline-none"
+    @keydown.alt.enter.stop
+    @keydown.shift.enter.stop
+  />
   <span v-else>{{ vModel }}</span>
 </template>
-
-<style scoped>
-input,
-textarea {
-  width: 100%;
-  min-height: 60px;
-  height: 100%;
-  color: var(--v-textColor-base);
-}
-</style>

From 2d9b678398b96b81b7a17ad0e49680f789594a0c Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 3 Aug 2022 12:26:04 +0530
Subject: [PATCH 32/47] fix: cypress corrections as per new lang order

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 scripts/cypress/integration/common/6d_language_validation.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/scripts/cypress/integration/common/6d_language_validation.js b/scripts/cypress/integration/common/6d_language_validation.js
index bc0aef203c..2de8984d21 100644
--- a/scripts/cypress/integration/common/6d_language_validation.js
+++ b/scripts/cypress/integration/common/6d_language_validation.js
@@ -44,6 +44,7 @@ export const genTest = (apiType, dbType) => {
         };
 
         let langMenu = [
+            "bn.json",
             "da.json",
             "de.json",
             "en.json",
@@ -51,6 +52,7 @@ export const genTest = (apiType, dbType) => {
             "fa.json",
             "fi.json",
             "fr.json",
+            "hi.json",
             "hr.json",
             "id.json",
             "it_IT.json",
@@ -66,8 +68,8 @@ export const genTest = (apiType, dbType) => {
             "sv.json",
             "th.json",
             "tr.json",
-            "uk.json",
             "vi.json",
+            "uk.json",
             "zh_CN.json",
             "zh_HK.json",
             "zh_TW.json",

From 4f9fd9ef98c8246e209924d4137d0e748455ec00 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 09:05:37 +0200
Subject: [PATCH 33/47] feat(gui-v2): add skeleton img while loading

---
 packages/nc-gui-v2/components.d.ts                      | 1 +
 packages/nc-gui-v2/components/cell/attachment/Modal.vue | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 9d7df38fcc..88ada17810 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -45,6 +45,7 @@ declare module '@vue/runtime-core' {
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
+    ASkeletonImage: typeof import('ant-design-vue/es')['SkeletonImage']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 9c1ff958fc..2e09a67057 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -122,6 +122,14 @@ onKeyDown('Escape', () => {
             {{ item.title }}
           </div>
         </div>
+
+        <div v-if="isLoading" class="flex flex-col gap-1">
+          <a-card class="nc-attachment-item group">
+            <div class="nc-attachment h-full w-full flex items-center justify-center">
+              <a-skeleton-image class />
+            </div>
+          </a-card>
+        </div>
       </div>
     </div>
   </a-modal>

From 5d34557e201c71283a34107e2c2e1c03d2b9379f Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 3 Aug 2022 13:23:06 +0530
Subject: [PATCH 34/47] fix: lang code reorder

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/utils/Language.vue                | 2 +-
 scripts/cypress/integration/common/6d_language_validation.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/utils/Language.vue b/packages/nc-gui/components/utils/Language.vue
index b7b63af9b7..d73bbe59b8 100644
--- a/packages/nc-gui/components/utils/Language.vue
+++ b/packages/nc-gui/components/utils/Language.vue
@@ -66,8 +66,8 @@ export default {
       sv: 'Svenska',
       th: 'ไทย',
       tr: 'Turkish',
-      vi: 'Tiếng Việt',
       uk: 'Українська',
+      vi: 'Tiếng Việt',
       zh_CN: '大陆简体',
       zh_HK: '香港繁體',
       zh_TW: '臺灣正體'
diff --git a/scripts/cypress/integration/common/6d_language_validation.js b/scripts/cypress/integration/common/6d_language_validation.js
index 2de8984d21..0123ddd010 100644
--- a/scripts/cypress/integration/common/6d_language_validation.js
+++ b/scripts/cypress/integration/common/6d_language_validation.js
@@ -68,8 +68,8 @@ export const genTest = (apiType, dbType) => {
             "sv.json",
             "th.json",
             "tr.json",
-            "vi.json",
             "uk.json",
+            "vi.json",
             "zh_CN.json",
             "zh_HK.json",
             "zh_TW.json",

From 858157e6f89535b2bc956f33dcef277e06c071e8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 10:32:29 +0200
Subject: [PATCH 35/47] refactor(gui-v2): use width inheritance for cells

---
 packages/nc-gui-v2/components/smartsheet/Cell.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 6c16702cc2..e41018b4d9 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -89,7 +89,8 @@ div {
 }
 
 .nc-cell {
-  @apply relative w-full h-full;
+  @apply relative h-full;
+  width: inherit;
   display: inherit;
 }
 

From c7c1d362a8989507a69ef583c9b567ead5018860 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 10:32:40 +0200
Subject: [PATCH 36/47] fix(gui-v2): stop attachments overflowing

---
 .../components/cell/attachment/index.vue      | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 01b5a6c398..cc5367db9f 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -96,7 +96,8 @@ onKeyDown('Escape', () => {
           v-for="(item, i) of visibleItems"
           :id="item.url"
           :key="item.url || item.title"
-          class="nc-attachment flex-auto flex items-center justify-center min-h-[50px] h-[50px] min-w-[50px] w-[50px] border-1"
+          style="flex: 1 1 50px"
+          class="nc-attachment flex items-center justify-center border-1"
         >
           <a-tooltip placement="bottom">
             <template #title>
@@ -138,15 +139,17 @@ onKeyDown('Escape', () => {
 </template>
 
 <style lang="scss">
-.nc-attachment-cell {
-  .ghost,
-  .ghost > * {
-    @apply !pointer-events-none;
-  }
+.nc-cell {
+  .nc-attachment-cell {
+    .ghost,
+    .ghost > * {
+      @apply !pointer-events-none;
+    }
 
-  .dragging {
-    .ant-tooltip {
-      @apply !hidden;
+    .dragging {
+      .ant-tooltip {
+        @apply !hidden;
+      }
     }
   }
 }

From 993ac8381eb9a811eca7b211a6756592be079ce2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 10:35:27 +0200
Subject: [PATCH 37/47] chore(gui-v2): update attachment cell styles

---
 packages/nc-gui-v2/components/cell/attachment/index.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index cc5367db9f..aefc4464a6 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -97,7 +97,8 @@ onKeyDown('Escape', () => {
           :id="item.url"
           :key="item.url || item.title"
           style="flex: 1 1 50px"
-          class="nc-attachment flex items-center justify-center border-1"
+          :class="isImage(item.title, item.mimetype) ? '' : 'border-1 rounded'"
+          class="nc-attachment flex items-center justify-center"
         >
           <a-tooltip placement="bottom">
             <template #title>
@@ -110,6 +111,7 @@ onKeyDown('Escape', () => {
               height="150"
               :alt="item.title || `#${i}`"
               :src="item.url || item.data"
+              class="ring-1 ring-gray-300 rounded"
               @click="selectImage(item)"
             />
 

From fad832e1830c21234be3d42858a92745165df002 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 10:47:26 +0200
Subject: [PATCH 38/47] refactor(gui-v2): use `td` element as dropzone

---
 .../components/cell/attachment/index.vue      | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index aefc4464a6..70340c77a7 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -4,7 +4,7 @@ import { useProvideAttachmentCell } from './utils'
 import Modal from './Modal.vue'
 import { useSortable } from './sort'
 import Carousel from './Carousel.vue'
-import { ref, useDropZone, watch } from '#imports'
+import { onMounted, ref, useDropZone, watch } from '#imports'
 import { isImage, openLink } from '~/utils'
 import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
 import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
@@ -24,11 +24,11 @@ const { modelValue } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const dropZoneRef = ref<HTMLDivElement>()
+const dropZoneRef = ref<HTMLTableDataCellElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
+const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
   useProvideAttachmentCell(updateModelValue)
 
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
@@ -57,18 +57,26 @@ onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
 })
+
+onMounted(() => {
+  if (typeof document !== 'undefined') {
+    dropZoneRef.value = document.querySelector(`td[data-col="${column.id}"]`) as HTMLTableDataCellElement
+  }
+})
 </script>
 
 <template>
-  <div ref="dropZoneRef" class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
+  <div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
     <template v-if="!isReadonly && !dragging && isOverDropZone">
-      <div
-        class="z-100 absolute top-0 bottom-0 left-0 right-0 w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gray-700/75 text-white"
-      >
-        <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
-      </div>
+      <teleport :to="`td[data-col='${column.id}']`">
+        <div
+          class="z-100 absolute top-0 bottom-0 left-0 right-0 w-full h-full flex items-center justify-center gap-1 bg-gray-700/75 text-white"
+        >
+          <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+        </div>
+      </teleport>
     </template>
 
     <div

From f5487574ff110fc02f55b0add854c69ca20be999 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 10:59:08 +0200
Subject: [PATCH 39/47] chore(gui-v2): add fade to dropzone

---
 packages/nc-gui-v2/components/cell/attachment/index.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 70340c77a7..a46a58302f 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -69,10 +69,11 @@ onMounted(() => {
   <div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
-    <template v-if="!isReadonly && !dragging && isOverDropZone">
+    <template v-if="!isReadonly && !dragging && dropZoneRef">
       <teleport :to="`td[data-col='${column.id}']`">
         <div
-          class="z-100 absolute top-0 bottom-0 left-0 right-0 w-full h-full flex items-center justify-center gap-1 bg-gray-700/75 text-white"
+          :class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
+          class="text-white text-lg transition-all duration-150 ease-in-out ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
         >
           <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
         </div>

From 9e26decad5f1953ac762037b5b1dbc5a06734f1f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 11:04:50 +0200
Subject: [PATCH 40/47] chore(gui-v2): add comments

---
 .../components/cell/attachment/Carousel.vue   | 25 +++++++++++--------
 .../components/cell/attachment/index.vue      | 10 ++++----
 .../components/cell/attachment/utils.ts       |  5 ++++
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index ecd08c8675..ee5eb47d24 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -13,6 +13,7 @@ const carouselRef = ref()
 
 const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
 
+/** navigate to previous image on button click */
 onKeyDown(
   (e) => ['Left', 'ArrowLeft', 'A'].includes(e.key),
   () => {
@@ -20,6 +21,7 @@ onKeyDown(
   },
 )
 
+/** navigate to next image on button click */
 onKeyDown(
   (e) => ['Right', 'ArrowRight', 'D'].includes(e.key),
   () => {
@@ -27,21 +29,22 @@ onKeyDown(
   },
 )
 
+/** set our selected image when slide changes */
 function onSlideChange(index: number) {
   selectedImage.value = imageItems.value[index]
 }
 
-watch(
-  carouselRef,
-  () => {
-    carouselRef.value?.goTo(
-      imageItems.value.findIndex((item) => item === selectedImage.value),
-      true,
-    )
-  },
-  { immediate: true },
-)
+/** set our carousel ref and move to initial slide  */
+const setCarouselRef = (el: Element) => {
+  carouselRef.value = el
+
+  carouselRef.value?.goTo(
+    imageItems.value.findIndex((item) => item === selectedImage.value),
+    true,
+  )
+}
 
+/** close overlay view when clicking outside of image */
 onClickOutside(carouselRef, () => {
   selectedImage.value = false
 })
@@ -64,7 +67,7 @@ onClickOutside(carouselRef, () => {
 
         <a-carousel
           v-if="!!selectedImage"
-          ref="carouselRef"
+          :ref="setCarouselRef"
           dots-class="slick-dots slick-thumb"
           :after-change="onSlideChange"
           arrows
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index a46a58302f..a68fb5bd80 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -35,6 +35,7 @@ const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, is
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
+/** on new value, reparse our stored attachments */
 watch(
   () => modelValue,
   (nextModel) => {
@@ -45,19 +46,18 @@ watch(
   { immediate: true },
 )
 
+/** updates attachments array for autosave */
 function updateModelValue(data: string | Record<string, any>) {
   emits('update:modelValue', typeof data !== 'string' ? JSON.stringify(data) : data)
 }
 
-const selectImage = (file: any) => {
-  selectedImage.value = file
-}
-
+/** Close modal on escape press, disable dropzone as well */
 onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
 })
 
+/** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */
 onMounted(() => {
   if (typeof document !== 'undefined') {
     dropZoneRef.value = document.querySelector(`td[data-col="${column.id}"]`) as HTMLTableDataCellElement
@@ -121,7 +121,7 @@ onMounted(() => {
               :alt="item.title || `#${i}`"
               :src="item.url || item.data"
               class="ring-1 ring-gray-300 rounded"
-              @click="selectImage(item)"
+              @click="selectedImage = item"
             />
 
             <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index 0909787fb7..e97275449a 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -41,6 +41,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const { files, open } = useFileDialog()
 
+    /** remove a file from our stored attachments (either locally stored or saved ones) */
     function removeFile(i: number) {
       if (isPublicForm) {
         storedFiles.value.splice(i, 1)
@@ -52,6 +53,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       }
     }
 
+    /** save a file on select / drop, either locally (in-memory) or in the db */
     async function onFileSelect(selectedFiles: FileList | File[]) {
       if (!selectedFiles.length || isPublicGrid) return
 
@@ -95,6 +97,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       updateModelValue([...attachments.value, ...newAttachments])
     }
 
+    /** save files on drop */
     async function onDrop(droppedFiles: File[] | null) {
       if (droppedFiles) {
         // set files
@@ -102,6 +105,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       }
     }
 
+    /** download a file */
     async function downloadFile(item: Record<string, any>) {
       FileSaver.saveAs(item.url || item.data, item.title)
     }
@@ -121,6 +125,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       }
     }
 
+    /** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
     const visibleItems = computed<any[]>(() => (isPublicForm ? storedFiles.value : attachments.value) || ([] as any[]))
 
     watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))

From 50217bcc40b86e73203e1f6c1205df832f20b050 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 11:40:11 +0200
Subject: [PATCH 41/47] feat(gui-v2): extend overlay props

---
 .../nc-gui-v2/components/general/Overlay.vue  | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/Overlay.vue b/packages/nc-gui-v2/components/general/Overlay.vue
index 67f705648e..cebc59432e 100644
--- a/packages/nc-gui-v2/components/general/Overlay.vue
+++ b/packages/nc-gui-v2/components/general/Overlay.vue
@@ -1,9 +1,16 @@
 <script lang="ts" setup>
 import { onKeyDown } from '@vueuse/core'
+import type { TeleportProps } from '@vue/runtime-core'
 import { useVModel, watch } from '#imports'
 
 interface Props {
   modelValue?: any
+  /** if true, overlay will use `position: absolute` instead of `position: fixed` */
+  inline?: boolean
+  /** target to teleport to */
+  target?: TeleportProps['to']
+  teleportDisabled?: TeleportProps['disabled']
+  transition?: boolean
 }
 
 interface Emits {
@@ -12,11 +19,11 @@ interface Emits {
   (event: 'open'): void
 }
 
-const props = defineProps<Props>()
+const { transition = true, teleportDisabled = false, inline = false, target, ...rest } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const vModel = useVModel(props, 'modelValue', emits)
+const vModel = useVModel(rest, 'modelValue', emits)
 
 onKeyDown('Escape', () => {
   vModel.value = false
@@ -28,11 +35,22 @@ watch(vModel, (nextVal) => {
 })
 </script>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
 <template>
-  <teleport to="body">
+  <teleport :disabled="teleportDisabled || (inline && !target)" :to="target || 'body'">
     <div
-      :class="[vModel ? 'opacity-100' : 'opacity-0 pointer-events-none']"
-      class="transition-opacity duration-200 ease-in-out fixed z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+      v-bind="$attrs"
+      :class="[
+        vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
+        inline ? 'absolute' : 'fixed',
+        transition ? 'transition-opacity duration-200 ease-in-out' : '',
+      ]"
+      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
     >
       <slot :is-open="vModel" />
     </div>

From 18432ad4926e0754836980f0f54931bfeeca5b63 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 11:46:59 +0200
Subject: [PATCH 42/47] refactor(gui-v2): implement overlay in attachment
 components

---
 .../components/cell/attachment/Modal.vue       | 18 ++++++++++--------
 .../components/cell/attachment/index.vue       | 16 ++++++++--------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 2e09a67057..487b92cc16 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -68,14 +68,16 @@ onKeyDown('Escape', () => {
     </template>
 
     <div ref="dropZoneRef">
-      <div
-        v-if="!isReadonly && !dragging"
-        :class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
-        class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-gray-700/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
-      >
-        <MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
-        <div class="text-white text-3xl">Drop here</div>
-      </div>
+      <template v-if="!isReadonly && !dragging">
+        <general-overlay
+          v-model="isOverDropZone"
+          inline
+          class="text-white ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+        >
+          <MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
+          <div class="text-white text-3xl">Drop here</div>
+        </general-overlay>
+      </template>
 
       <div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
         <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index a68fb5bd80..245677c7e2 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -70,14 +70,14 @@ onMounted(() => {
     <Carousel />
 
     <template v-if="!isReadonly && !dragging && dropZoneRef">
-      <teleport :to="`td[data-col='${column.id}']`">
-        <div
-          :class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
-          class="text-white text-lg transition-all duration-150 ease-in-out ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
-        >
-          <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
-        </div>
-      </teleport>
+      <general-overlay
+        v-model="isOverDropZone"
+        inline
+        :target="`td[data-col='${column.id}']`"
+        class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+      >
+        <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+      </general-overlay>
     </template>
 
     <div

From c64c22ea303b7a1878d446a0314be3637812b2f2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 12:02:56 +0200
Subject: [PATCH 43/47] chore(gui-v2,deps-dev): add nuxt/image-edge to deps-dev

---
 packages/nc-gui-v2/nuxt.config.ts    |   2 +-
 packages/nc-gui-v2/package-lock.json | 686 ++++++++++++++++++++++++++-
 packages/nc-gui-v2/package.json      |   1 +
 packages/nc-gui-v2/tsconfig.json     |   3 +-
 4 files changed, 684 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 745d4136e7..18ff65ac2b 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -8,7 +8,7 @@ import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  modules: ['@vueuse/nuxt', 'nuxt-windicss'],
+  modules: ['@vueuse/nuxt', 'nuxt-windicss', '@nuxt/image-edge'],
 
   ssr: false,
 
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 6d37f39129..5041328883 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -33,6 +33,7 @@
         "@iconify-json/mdi": "^1.1.25",
         "@iconify-json/ri": "^1.1.3",
         "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+        "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
         "@types/file-saver": "^2.0.5",
         "@types/papaparse": "^5.3.2",
@@ -1546,6 +1547,29 @@
       "integrity": "sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==",
       "dev": true
     },
+    "node_modules/@nuxt/image-edge": {
+      "version": "1.0.0-27657146.da85542",
+      "resolved": "https://registry.npmjs.org/@nuxt/image-edge/-/image-edge-1.0.0-27657146.da85542.tgz",
+      "integrity": "sha512-iMDB1KR4D/2smyShDTJ2Jf1FMj42elYOWDpkHgFZvSIf7eZcg8TVGW45lTjlp7VbQ/TgC1I0kYZBEFdc1AGXrw==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.0.0-rc.4",
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "h3": "^0.7.10",
+        "image-meta": "^0.1.1",
+        "node-fetch-native": "^0.1.4",
+        "ohash": "^0.1.0",
+        "pathe": "^0.3.2",
+        "ufo": "^0.8.5"
+      },
+      "engines": {
+        "node": ">=14.20.0"
+      },
+      "optionalDependencies": {
+        "ipx": "^0.9.10"
+      }
+    },
     "node_modules/@nuxt/kit": {
       "version": "3.0.0-rc.6",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.6.tgz",
@@ -4477,6 +4501,20 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4495,6 +4533,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -4817,6 +4866,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/cssnano": {
       "version": "5.1.12",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.12.tgz",
@@ -5058,6 +5114,22 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
@@ -5070,6 +5142,16 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -6837,6 +6919,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -7428,6 +7520,13 @@
         "git-up": "^4.0.0"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/gittar": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/gittar/-/gittar-0.1.1.tgz",
@@ -7894,6 +7993,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-meta": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.1.1.tgz",
+      "integrity": "sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.18.0"
+      }
+    },
     "node_modules/image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -8074,6 +8182,29 @@
         "url": "https://opencollective.com/ioredis"
       }
     },
+    "node_modules/ipx": {
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/ipx/-/ipx-0.9.10.tgz",
+      "integrity": "sha512-HymTmXe2QBiPMgsJg1EQtUYgTXfIB9ha7j8tHCQqYGDS7bTYMNWyq/fBdI3S+wc9ic+hbPlTim+uf8QgZcEykQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "destr": "^1.1.1",
+        "etag": "^1.8.1",
+        "image-meta": "^0.1.1",
+        "listhen": "^0.2.13",
+        "ohmyfetch": "^0.4.18",
+        "pathe": "^0.3.2",
+        "sharp": "^0.30.7",
+        "ufo": "^0.8.5",
+        "xss": "^1.0.13"
+      },
+      "bin": {
+        "ipx": "bin/ipx.mjs"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -9327,6 +9458,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -9391,6 +9535,13 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/mlly": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
@@ -9451,6 +9602,13 @@
       "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.1.0.tgz",
       "integrity": "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
     },
+    "node_modules/napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -9634,6 +9792,26 @@
       "resolved": "../nocodb-sdk",
       "link": true
     },
+    "node_modules/node-abi": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.23.0.tgz",
+      "integrity": "sha512-XWte/uvq7hmgY27WesfxLUAPejKUlkEbikhBFaIhxe+XkHa57rXBwYqGjsIyfVXaU8kC0Wp2p/qQroauDKs1XA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.0.0.tgz",
+      "integrity": "sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -9672,9 +9850,9 @@
       }
     },
     "node_modules/node-fetch-native": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.3.tgz",
-      "integrity": "sha512-Jf1IQZdovUIv9E+5avmN6Sf+bND+rnMlODnBQhdE2VRyuWP9WgqZb/KEgPekh19DAN1X2C4vbS1VCOaz2OH19g==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.4.tgz",
+      "integrity": "sha512-10EKpOCQPXwZVFh3U1ptOMWBgKTbsN7Vvo6WVKt5pw4hp8zbv6ZVBZPlXw+5M6Tyi1oc1iD4/sNPd71KYA16tQ==",
       "dev": true
     },
     "node_modules/node-forge": {
@@ -11163,6 +11341,33 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -11269,6 +11474,17 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -11355,6 +11571,32 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rc9": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-1.2.2.tgz",
@@ -12064,6 +12306,30 @@
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
       "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
     },
+    "node_modules/sharp": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
+      "integrity": "sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.7",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -12105,6 +12371,70 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/sirv": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
@@ -12616,6 +12946,19 @@
         "node": ">=4.5"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
     "node_modules/tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -12976,6 +13319,19 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -14268,6 +14624,30 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/xss": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.13.tgz",
+      "integrity": "sha512-clu7dxTm1e8Mo5fz3n/oW3UCXBfV89xZ72jM8yzo1vR/pIS0w3sgB3XV2H8Vm6zfGnHL0FzvLJPJEBhd86/z4Q==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "bin": {
+        "xss": "bin/xss"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/xss/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/xxhashjs": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
@@ -15492,6 +15872,24 @@
       "integrity": "sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==",
       "dev": true
     },
+    "@nuxt/image-edge": {
+      "version": "1.0.0-27657146.da85542",
+      "resolved": "https://registry.npmjs.org/@nuxt/image-edge/-/image-edge-1.0.0-27657146.da85542.tgz",
+      "integrity": "sha512-iMDB1KR4D/2smyShDTJ2Jf1FMj42elYOWDpkHgFZvSIf7eZcg8TVGW45lTjlp7VbQ/TgC1I0kYZBEFdc1AGXrw==",
+      "dev": true,
+      "requires": {
+        "@nuxt/kit": "^3.0.0-rc.4",
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "h3": "^0.7.10",
+        "image-meta": "^0.1.1",
+        "ipx": "^0.9.10",
+        "node-fetch-native": "^0.1.4",
+        "ohash": "^0.1.0",
+        "pathe": "^0.3.2",
+        "ufo": "^0.8.5"
+      }
+    },
     "@nuxt/kit": {
       "version": "3.0.0-rc.6",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.6.tgz",
@@ -17707,6 +18105,17 @@
       "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
       "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="
     },
+    "color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      }
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -17722,6 +18131,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -17986,6 +18406,13 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "dev": true,
+      "optional": true
+    },
     "cssnano": {
       "version": "5.1.12",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.12.tgz",
@@ -18178,6 +18605,16 @@
       "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
       "dev": true
     },
+    "decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "mimic-response": "^3.1.0"
+      }
+    },
     "deep-eql": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
@@ -18187,6 +18624,13 @@
         "type-detect": "^4.0.0"
       }
     },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "optional": true
+    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -19402,6 +19846,13 @@
       "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
       "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
     },
+    "expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "dev": true,
+      "optional": true
+    },
     "external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -19848,6 +20299,13 @@
         "git-up": "^4.0.0"
       }
     },
+    "github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "dev": true,
+      "optional": true
+    },
     "gittar": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/gittar/-/gittar-0.1.1.tgz",
@@ -20188,6 +20646,12 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "image-meta": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.1.1.tgz",
+      "integrity": "sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==",
+      "dev": true
+    },
     "image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -20329,6 +20793,26 @@
         "standard-as-callback": "^2.1.0"
       }
     },
+    "ipx": {
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/ipx/-/ipx-0.9.10.tgz",
+      "integrity": "sha512-HymTmXe2QBiPMgsJg1EQtUYgTXfIB9ha7j8tHCQqYGDS7bTYMNWyq/fBdI3S+wc9ic+hbPlTim+uf8QgZcEykQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "destr": "^1.1.1",
+        "etag": "^1.8.1",
+        "image-meta": "^0.1.1",
+        "listhen": "^0.2.13",
+        "ohmyfetch": "^0.4.18",
+        "pathe": "^0.3.2",
+        "sharp": "^0.30.7",
+        "ufo": "^0.8.5",
+        "xss": "^1.0.13"
+      }
+    },
     "is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -21283,6 +21767,13 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "optional": true
+    },
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -21340,6 +21831,13 @@
         "minimist": "^1.2.6"
       }
     },
+    "mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true,
+      "optional": true
+    },
     "mlly": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
@@ -21388,6 +21886,13 @@
       "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.1.0.tgz",
       "integrity": "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
     },
+    "napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "dev": true,
+      "optional": true
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -21565,6 +22070,23 @@
         "typescript": "^4.0.2"
       }
     },
+    "node-abi": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.23.0.tgz",
+      "integrity": "sha512-XWte/uvq7hmgY27WesfxLUAPejKUlkEbikhBFaIhxe+XkHa57rXBwYqGjsIyfVXaU8kC0Wp2p/qQroauDKs1XA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "semver": "^7.3.5"
+      }
+    },
+    "node-addon-api": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.0.0.tgz",
+      "integrity": "sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==",
+      "dev": true,
+      "optional": true
+    },
     "node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -21583,9 +22105,9 @@
       }
     },
     "node-fetch-native": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.3.tgz",
-      "integrity": "sha512-Jf1IQZdovUIv9E+5avmN6Sf+bND+rnMlODnBQhdE2VRyuWP9WgqZb/KEgPekh19DAN1X2C4vbS1VCOaz2OH19g==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.4.tgz",
+      "integrity": "sha512-10EKpOCQPXwZVFh3U1ptOMWBgKTbsN7Vvo6WVKt5pw4hp8zbv6ZVBZPlXw+5M6Tyi1oc1iD4/sNPd71KYA16tQ==",
       "dev": true
     },
     "node-forge": {
@@ -22654,6 +23176,27 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "prebuild-install": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      }
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -22733,6 +23276,17 @@
       "optional": true,
       "peer": true
     },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -22787,6 +23341,28 @@
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
       "dev": true
     },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "dependencies": {
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "rc9": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-1.2.2.tgz",
@@ -23339,6 +23915,23 @@
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
       "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
     },
+    "sharp": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
+      "integrity": "sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.7",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      }
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -23371,6 +23964,44 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true,
+      "optional": true
+    },
+    "simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "sirv": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
@@ -23776,6 +24407,19 @@
         }
       }
     },
+    "tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
     "tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -24041,6 +24685,16 @@
         }
       }
     },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -24931,6 +25585,26 @@
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
       "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
     },
+    "xss": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.13.tgz",
+      "integrity": "sha512-clu7dxTm1e8Mo5fz3n/oW3UCXBfV89xZ72jM8yzo1vR/pIS0w3sgB3XV2H8Vm6zfGnHL0FzvLJPJEBhd86/z4Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "xxhashjs": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 0b030b061c..4e254ee8c0 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -39,6 +39,7 @@
     "@iconify-json/mdi": "^1.1.25",
     "@iconify-json/ri": "^1.1.3",
     "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+    "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",
     "@types/file-saver": "^2.0.5",
     "@types/papaparse": "^5.3.2",
diff --git a/packages/nc-gui-v2/tsconfig.json b/packages/nc-gui-v2/tsconfig.json
index 20e024fba7..7815bfba85 100644
--- a/packages/nc-gui-v2/tsconfig.json
+++ b/packages/nc-gui-v2/tsconfig.json
@@ -15,7 +15,8 @@
       "vue-i18n",
       "unplugin-icons/types/vue",
       "nuxt-windicss",
-      "vite/client"
+      "vite/client",
+      "@nuxt/image-edge"
     ]
   },
   "exclude": [

From 562c4da25fff0286f6c3d9e949bfe2d82fc40975 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 12:03:15 +0200
Subject: [PATCH 44/47] chore(gui-v2): implement nuxt image in attachment
 components

---
 packages/nc-gui-v2/components/cell/attachment/Carousel.vue | 2 +-
 packages/nc-gui-v2/components/cell/attachment/index.vue    | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index ee5eb47d24..cc92d6daf5 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -86,7 +86,7 @@ onClickOutside(carouselRef, () => {
 
           <template #customPaging="props">
             <a>
-              <img
+              <nuxt-img
                 class="!block"
                 :alt="imageItems[props.i].title || `#${props.i}`"
                 :src="imageItems[props.i].url || imageItems[props.i].data"
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 245677c7e2..d629504a5c 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -100,7 +100,7 @@ onMounted(() => {
     </div>
 
     <template v-if="visibleItems.length">
-      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 py-1 scrollbar-thin-primary">
+      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 p-1 scrollbar-thin-primary">
         <div
           v-for="(item, i) of visibleItems"
           :id="item.url"
@@ -114,8 +114,9 @@ onMounted(() => {
               <div class="text-center w-full">{{ item.title }}</div>
             </template>
 
-            <img
+            <nuxt-img
               v-if="isImage(item.title, item.mimetype)"
+              placeholder
               width="150"
               height="150"
               :alt="item.title || `#${i}`"

From 9239cddf4c96a37292532b7cb22c2a958b0d2719 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 12:03:32 +0200
Subject: [PATCH 45/47] chore(gui-v2): use pointer unless item is dragging

---
 packages/nc-gui-v2/components/cell/attachment/Modal.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 487b92cc16..5e7e2b70ac 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -100,7 +100,10 @@ onKeyDown('Escape', () => {
               </div>
             </a-tooltip>
 
-            <div class="nc-attachment h-full w-full flex items-center justify-center cursor-move">
+            <div
+              :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
+              class="nc-attachment h-full w-full flex items-center justify-center"
+            >
               <div
                 v-if="isImage(item.title, item.mimetype)"
                 :style="{ backgroundImage: `url('${item.url}')` }"

From e1cad18e10b3ea04a4cc60c5a68c2e6db80a3416 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 12:19:22 +0200
Subject: [PATCH 46/47] chore(gui-v2): revert the 0.5px change

---
 packages/nc-gui-v2/components/smartsheet/sidebar/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index e3d3c9497f..6f8de8eac4 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -73,7 +73,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     collapsiple
     collapsed-width="50"
     width="250"
-    class="shadow !mt-[-9.5px]"
+    class="shadow !mt-[-9px]"
     style="height: calc(100% + 9px)"
     theme="light"
   >

From c4d1bab95e29818f72074653dbcc3d48071558fd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 15:58:52 +0530
Subject: [PATCH 47/47] fix(gui-v2): null check

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Email.vue    | 2 +-
 packages/nc-gui-v2/components/cell/Float.vue    | 2 +-
 packages/nc-gui-v2/components/cell/Integer.vue  | 2 +-
 packages/nc-gui-v2/components/cell/Text.vue     | 2 +-
 packages/nc-gui-v2/components/cell/TextArea.vue | 2 +-
 packages/nc-gui-v2/components/cell/Url.vue      | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index b81b447a88..33407812bd 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -21,7 +21,7 @@ const vModel = useVModel(props, 'modelValue', emits)
 
 const validEmail = computed(() => isEmail(vModel.value))
 
-const focus = (el: HTMLInputElement) => el.focus()
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index ec4c49f699..6e029c67de 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -18,7 +18,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const focus = (el: HTMLInputElement) => el.focus()
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 46d609ae55..3c9e5dd9d4 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -18,7 +18,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emit)
 
-const focus = (el: HTMLInputElement) => el.focus()
+const focus = (el: HTMLInputElement) => el?.focus()
 
 function onKeyDown(evt: KeyboardEvent) {
   return evt.key === '.' && evt.preventDefault()
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 7243a1d409..396b169969 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -14,7 +14,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const focus = (el: HTMLInputElement) => el.focus()
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index fc9a2b7057..bd7427b760 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -14,7 +14,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const focus = (el: HTMLTextAreaElement) => el.focus()
+const focus = (el: HTMLTextAreaElement) => el?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 3f39bd9988..46bb61dd3e 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -26,7 +26,7 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
-const focus = (el: HTMLInputElement) => el.focus()
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>