From c3ebdf5b8e721a71051493bc0cf91e569c347d05 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 19:16:35 +0800
Subject: [PATCH 01/11] fix(gui-v2): email cell

---
 packages/nc-gui-v2/components/cell/Email.vue | 36 +++++++++-----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index 5e1e1c671d..8d81c0e3c1 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -2,40 +2,36 @@
 import { computed } from '#imports'
 import { isEmail } from '~/utils'
 
-const { modelValue: value } = defineProps<Props>()
-
-const emit = defineEmits(['update:modelValue'])
-
-const editEnabled = inject<boolean>('editEnabled')
-
 interface Props {
   modelValue: string
 }
 
+interface Emits {
+  (event: 'update:modelValue', model: string): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
 const root = ref<HTMLInputElement>()
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
 
-const validEmail = computed(() => isEmail(value))
-</script>
+const editEnabled = inject<boolean>('editEnabled')
 
-<script lang="ts">
-export default {
-  name: 'EmailCell',
-}
+const vModel = useVModel(props, 'modelValue', emits)
+
+const validEmail = computed(() => isEmail(vModel.value))
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" />
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none" />
   <a
     v-else-if="validEmail"
     class="caption py-2 text-primary underline hover:opacity-75"
-    :href="`mailto:${value}`"
+    :href="`mailto:${vModel}`"
     target="_blank"
   >
-    {{ value }}
+    {{ vModel }}
   </a>
-  <span v-else>{{ value }}</span>
+  <span v-else>{{ vModel }}</span>
 </template>

From 92462166a8ca2c2109b5c69571c3e815700ab2d7 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 19:27:24 +0800
Subject: [PATCH 02/11] fix(gui-v2): URL cell

---
 packages/nc-gui-v2/components/cell/Url.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 44690332a1..24178d785a 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -8,11 +8,14 @@ interface Props {
 }
 
 const { modelValue: value } = defineProps<Props>()
+
 const emit = defineEmits(['update:modelValue'])
+
 const column = inject(ColumnInj)
+
 const editEnabled = inject<boolean>('editEnabled')
 
-const localState = computed({
+const vModel = computed({
   get: () => value,
   set: (val) => {
     if (!(column && column.meta && column.meta.validate) || isValidURL(val)) {
@@ -24,19 +27,16 @@ const localState = computed({
 const isValid = computed(() => value && isValidURL(value))
 
 const root = ref<HTMLInputElement>()
+
 onMounted(() => {
   root.value?.focus()
 })
 </script>
 
 <template>
-  <span v-if="editEnabled">
-    <input ref="root" v-model="localState" />
-  </span>
-  <span v-else>
-    <a v-if="isValid" class="caption py-2 text-primary underline hover:opacity-75" :href="value" target="_blank">{{ value }}</a>
-    <span v-else>{{ value }}</span>
-  </span>
+  <input class="outline-none" v-if="editEnabled" ref="root" v-model="vModel" />
+  <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>

From edbf01d019a30204aceb5b4f4e303ed3b1b14a15 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 19:33:18 +0800
Subject: [PATCH 03/11] fix(gui-v2): wrap edit formula warning text

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

diff --git a/packages/nc-gui-v2/components/virtual-cell/Formula.vue b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
index 1e93f6ba00..ae5e223e24 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
@@ -35,7 +35,7 @@ const urls = computed(() => replaceUrlsWithLink(result.value))
     <div class="pa-2" @dblclick="showEditFormulaWarningMessage">
       <div v-if="urls" v-html="urls" />
       <div v-else>{{ result }}</div>
-      <div v-if="showEditFormulaWarning" class="text-left mt-2 text-[#e65100]">
+      <div v-if="showEditFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100]">
         <!-- TODO: i18n -->
         Warning: Formula fields should be configured in the field menu dropdown.
       </div>

From 30143bbd77f7de76ffcf1e3f3a3a08246bcdce0d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 19:40:33 +0800
Subject: [PATCH 04/11] fix(gui-v2): fix email size

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

diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index 8d81c0e3c1..b7fc82de20 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -24,10 +24,10 @@ const validEmail = computed(() => isEmail(vModel.value))
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none" />
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" />
   <a
     v-else-if="validEmail"
-    class="caption py-2 text-primary underline hover:opacity-75"
+    class="prose-sm underline hover:opacity-75"
     :href="`mailto:${vModel}`"
     target="_blank"
   >

From b45b6a11397208cef3407e282094f3c9ec4ca479 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 19:44:24 +0800
Subject: [PATCH 05/11] chore(gui-v2): lint

---
 packages/nc-gui-v2/components/cell/Email.vue | 7 +------
 packages/nc-gui-v2/components/cell/Url.vue   | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index b7fc82de20..f743c5d3f5 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -25,12 +25,7 @@ const validEmail = computed(() => isEmail(vModel.value))
 
 <template>
   <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" />
-  <a
-    v-else-if="validEmail"
-    class="prose-sm underline hover:opacity-75"
-    :href="`mailto:${vModel}`"
-    target="_blank"
-  >
+  <a v-else-if="validEmail" class="prose-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
   </a>
   <span v-else>{{ vModel }}</span>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 24178d785a..760f93955a 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -34,7 +34,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <input class="outline-none" v-if="editEnabled" ref="root" v-model="vModel" />
+  <input v-if="editEnabled" ref="root" 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>

From 1fcbae5f8eff89885594563a837ef83a94fb7076 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 1 Aug 2022 17:00:43 +0200
Subject: [PATCH 06/11] chore(gui-v2): update menu styles to fill height
 properly

---
 packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue | 2 +-
 packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index 8316d548ba..3a52b19c63 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -110,7 +110,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </button>
     </div>
 
-    <general-flipping-card class="my-4 lg:my-6 min-h-[100px] w-[250px]" :triggers="['click', { duration: 15000 }]">
+    <general-flipping-card class="my-4 lg:my-6 min-h-[100px]" :triggers="['click', { duration: 15000 }]">
       <template #front>
         <div class="flex h-full w-full gap-6 flex-col">
           <general-social />
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index 7f2be5e8d5..c63bd3bf2c 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -216,7 +216,7 @@ function onDeleted() {
 
 <style lang="scss">
 .nc-views-menu {
-  @apply flex-1 max-h-[200px] overflow-y-scroll scrollbar-thin-primary;
+  @apply flex-1 max-h-[20vh] overflow-y-scroll scrollbar-thin-primary;
 
   .ghost,
   .ghost > * {

From 222539efeeafa7090b9e5cc928d1d5a3c431372e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 1 Aug 2022 19:49:30 +0200
Subject: [PATCH 07/11] fix(gui-v2): permission type not allowing wildcard

# What's changed?

* rename `RolePermissions` to `Permission`
* allow wildcard permission for creator and owner roles
---
 .../nc-gui-v2/composables/useUIPermission/index.ts  | 13 ++++++-------
 .../composables/useUIPermission/rolePermissions.ts  |  7 ++++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index f2bdd4d8a6..861dbfb756 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -1,4 +1,4 @@
-import type { RolePermissions } from './rolePermissions'
+import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
 import { useState } from '#app'
 import { USER_PROJECT_ROLES } from '~/lib/constants'
@@ -7,7 +7,7 @@ export function useUIPermission() {
   const { $state } = useNuxtApp()
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
-  const isUIAllowed = (permission: RolePermissions, _skipPreviewAs = false) => {
+  const isUIAllowed = (permission: Permission, _skipPreviewAs = false) => {
     const user = $state.user
     let userRoles = user?.value?.roles || {}
 
@@ -32,14 +32,13 @@ export function useUIPermission() {
     //   };
     // }
 
-    return Object.entries(roles).some(([role, hasRole]) => {
-      const rolePermission = rolePermissions[role as keyof typeof rolePermissions]
+    return Object.entries<boolean>(roles).some(([role, hasRole]) => {
+      const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as Permission
 
       return (
         hasRole &&
-        (rolePermission === '*' || typeof rolePermission === 'object'
-          ? rolePermission[permission as keyof typeof rolePermission] === true
-          : false)
+        (rolePermission === '*' ||
+          (typeof rolePermission === 'object' && rolePermission[permission as keyof typeof rolePermission]))
       )
     })
   }
diff --git a/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts b/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
index e48f32c8ea..9fff66f69b 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
@@ -40,9 +40,10 @@ export default rolePermissions
 
 type GetKeys<T> = T extends Record<string, any> ? keyof T : never
 
-export type RolePermissions<T extends typeof rolePermissions = typeof rolePermissions, K extends keyof T = keyof T> =
-  | T[K] extends string
+export type Permission<T extends typeof rolePermissions = typeof rolePermissions, K extends keyof T = keyof T> = K extends
+  | 'creator'
+  | 'owner'
   ? T[K]
-  : never & T[K] extends Record<string, any>
+  : never | T[K] extends Record<string, any>
   ? GetKeys<T[K]>
   : never

From 7ad484613e195262dbf18e4ddd5182b756eff03f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 1 Aug 2022 22:08:32 +0200
Subject: [PATCH 08/11] feat(gui-v2): add `useInjectionState` composable

# What's changed?

* extends on VueUses' `createInjectionState`
* immediately returns injection state on provide
---
 packages/nc-gui-v2/composables/index.ts       |  1 +
 .../composables/useInjectionState/index.ts    | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 packages/nc-gui-v2/composables/useInjectionState/index.ts

diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index b9e13de6d8..b66fd2398b 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -1,5 +1,6 @@
 export * from './useApi'
 export * from './useGlobal'
+export * from './useInjectionState'
 export * from './useUIPermission'
 export * from './useAttachment'
 export * from './useBelongsTo'
diff --git a/packages/nc-gui-v2/composables/useInjectionState/index.ts b/packages/nc-gui-v2/composables/useInjectionState/index.ts
new file mode 100644
index 0000000000..b1a01007eb
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useInjectionState/index.ts
@@ -0,0 +1,19 @@
+import type { InjectionKey } from 'vue'
+
+export function useInjectionState<Arguments extends any[], Return>(
+  composable: (...args: Arguments) => Return,
+): readonly [useProvidingState: (...args: Arguments) => void, useInjectedState: () => Return | undefined] {
+  const key: string | InjectionKey<Return> = Symbol('InjectionState')
+
+  const useProvidingState = (...args: Arguments) => {
+    const providedState = composable(...args)
+
+    provide(key, providedState)
+
+    return providedState
+  }
+
+  const useInjectedState = () => inject(key)
+
+  return [useProvidingState, useInjectedState]
+}

From f9d8389cecd6ba10b32c7376aaa1b6ab3fc212be Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 1 Aug 2022 22:16:30 +0200
Subject: [PATCH 09/11] chore(gui-v2): remove unnecessary typecast

---
 packages/nc-gui-v2/composables/useUIPermission/index.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index 861dbfb756..304cf6e8c1 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -35,11 +35,7 @@ export function useUIPermission() {
     return Object.entries<boolean>(roles).some(([role, hasRole]) => {
       const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as Permission
 
-      return (
-        hasRole &&
-        (rolePermission === '*' ||
-          (typeof rolePermission === 'object' && rolePermission[permission as keyof typeof rolePermission]))
-      )
+      return hasRole && (rolePermission === '*' || (typeof rolePermission === 'object' && rolePermission[permission]))
     })
   }
 

From 9820ed6a206e86e633105a0c2bee8a6dab06c6ad Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 1 Aug 2022 22:21:35 +0200
Subject: [PATCH 10/11] chore(gui-v2): properly type rolePermission and remove
 unnecessary check

---
 packages/nc-gui-v2/composables/useUIPermission/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index 304cf6e8c1..5fd667e3dc 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -33,9 +33,9 @@ export function useUIPermission() {
     // }
 
     return Object.entries<boolean>(roles).some(([role, hasRole]) => {
-      const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as Permission
+      const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as '*' | Record<Permission, true>
 
-      return hasRole && (rolePermission === '*' || (typeof rolePermission === 'object' && rolePermission[permission]))
+      return hasRole && (rolePermission === '*' || rolePermission[permission])
     })
   }
 

From 4f463c6365d79a3e21781b0f7c245e03805d35c7 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 1 Aug 2022 22:25:47 +0200
Subject: [PATCH 11/11] feat(gui-v2): accept keyname as arg for
 useInjectionState

---
 packages/nc-gui-v2/composables/useInjectionState/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useInjectionState/index.ts b/packages/nc-gui-v2/composables/useInjectionState/index.ts
index b1a01007eb..6cd0f3dbd9 100644
--- a/packages/nc-gui-v2/composables/useInjectionState/index.ts
+++ b/packages/nc-gui-v2/composables/useInjectionState/index.ts
@@ -2,8 +2,9 @@ import type { InjectionKey } from 'vue'
 
 export function useInjectionState<Arguments extends any[], Return>(
   composable: (...args: Arguments) => Return,
+  keyName = 'InjectionState',
 ): readonly [useProvidingState: (...args: Arguments) => void, useInjectedState: () => Return | undefined] {
-  const key: string | InjectionKey<Return> = Symbol('InjectionState')
+  const key: string | InjectionKey<Return> = Symbol(keyName)
 
   const useProvidingState = (...args: Arguments) => {
     const providedState = composable(...args)