From a49a68215e1a413806c31ee387bc18b958156803 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 17 Jan 2023 02:19:38 +0300
Subject: [PATCH] feat: ClampedText for handling line-clamping

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/cell/ClampedText.vue    | 24 +++++++++++++
 packages/nc-gui/components/cell/Text.vue      |  2 +-
 packages/nc-gui/components/cell/TextArea.vue  |  9 +----
 .../nc-gui/components/smartsheet/Cell.vue     | 22 +++++++++++-
 .../nc-gui/components/smartsheet/Grid.vue     | 25 +++++++++++--
 packages/nc-gui/package-lock.json             | 35 ++++++++++++++++++-
 packages/nc-gui/package.json                  |  1 +
 packages/nc-gui/plugins/clamp.ts              |  6 ++++
 8 files changed, 110 insertions(+), 14 deletions(-)
 create mode 100644 packages/nc-gui/components/cell/ClampedText.vue
 create mode 100644 packages/nc-gui/plugins/clamp.ts

diff --git a/packages/nc-gui/components/cell/ClampedText.vue b/packages/nc-gui/components/cell/ClampedText.vue
new file mode 100644
index 0000000000..5a74755ea3
--- /dev/null
+++ b/packages/nc-gui/components/cell/ClampedText.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps<{
+  value?: string | number | null
+  lines?: number
+}>()
+
+const wrapper = ref()
+
+const rkey = ref(0)
+
+onMounted(() => {
+  const observer = new ResizeObserver(() => {
+    rkey.value++
+  })
+
+  observer.observe(wrapper.value)
+})
+</script>
+
+<template>
+  <div ref="wrapper">
+    <text-clamp :key="rkey" class="w-full h-full break-all" :text="props.value || ''" :max-lines="props.lines" />
+  </div>
+</template>
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index ad85967e5e..47639dfc2a 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -38,5 +38,5 @@ const focus: VNodeRef = (el) => {
     @mousedown.stop
   />
 
-  <span v-else>{{ vModel }}</span>
+  <CellClampedText v-else :value="vModel" :lines="1" />
 </template>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 021c67b676..449c78e2d8 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -53,14 +53,7 @@ const rowHeight = computed(() => {
     @mousedown.stop
   />
 
-  <a-textarea
-    v-else-if="rowHeight"
-    :key="rowHeight"
-    v-model:value="vModel"
-    class="w-full h-full"
-    :auto-size="{ minRows: rowHeight, maxRows: rowHeight }"
-    :bordered="false"
-  />
+  <CellClampedText v-else-if="rowHeight" :value="vModel" :lines="rowHeight" />
 
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 9061933bb0..f10ebd9a76 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { ColumnType } from 'nocodb-sdk'
+import type { ColumnType, GridType } from 'nocodb-sdk'
 import { isSystemColumn } from 'nocodb-sdk'
 import {
   ActiveCellInj,
+  ActiveViewInj,
   ColumnInj,
   EditModeInj,
   IsFormInj,
@@ -60,6 +61,8 @@ const props = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editEnabled'])
 
+const view = inject(ActiveViewInj, ref())
+
 const column = toRef(props, 'column')
 
 const active = toRef(props, 'active', false)
@@ -124,6 +127,21 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
 
   if (!isForm.value) e.stopImmediatePropagation()
 }
+
+const rowHeight = computed(() => {
+  if ((view.value?.view as GridType)?.row_height !== undefined) {
+    switch ((view.value?.view as GridType)?.row_height) {
+      case 0:
+        return 1
+      case 1:
+        return 2
+      case 2:
+        return 4
+      case 3:
+        return 6
+    }
+  }
+})
 </script>
 
 <template>
@@ -132,6 +150,8 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
     :class="[
       `nc-cell-${(column?.uidt || 'default').toLowerCase()}`,
       { 'text-blue-600': isPrimary(column) && !props.virtual && !isForm },
+      { '!h-auto': !rowHeight || rowHeight === 1 },
+      { '!h-full': rowHeight && rowHeight !== 1 },
     ]"
     @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 77311eaed3..a6bd8e2c3f 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ColumnReqType, ColumnType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnReqType, ColumnType, GridType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import {
   ActiveViewInj,
@@ -660,6 +660,21 @@ const closeAddColumnDropdown = () => {
   columnOrder.value = null
   addColumnDropdown.value = false
 }
+
+const rowHeight = computed(() => {
+  if ((view.value?.view as GridType)?.row_height !== undefined) {
+    switch ((view.value?.view as GridType)?.row_height) {
+      case 0:
+        return 1
+      case 1:
+        return 2
+      case 2:
+        return 4
+      case 3:
+        return 6
+    }
+  }
+})
 </script>
 
 <template>
@@ -749,7 +764,11 @@ const closeAddColumnDropdown = () => {
           <tbody ref="tbodyEl">
             <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
               <template #default="{ state }">
-                <tr class="nc-grid-row" :data-testid="`grid-row-${rowIndex}`">
+                <tr
+                  class="nc-grid-row"
+                  :style="{ height: rowHeight ? `${rowHeight * 1.5}rem` : `1.5rem` }"
+                  :data-testid="`grid-row-${rowIndex}`"
+                >
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`">
                     <div class="items-center flex gap-1 min-w-[55px]">
                       <div
@@ -961,7 +980,7 @@ const closeAddColumnDropdown = () => {
 
   td:not(:first-child) > div {
     overflow: hidden;
-    @apply flex items-center h-auto px-1;
+    @apply flex items-center px-1;
   }
 
   table,
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index ff003f2e60..34dbe71381 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -41,6 +41,7 @@
         "vue-dompurify-html": "^3.0.0",
         "vue-github-button": "^3.0.3",
         "vue-i18n": "^9.2.2",
+        "vue3-text-clamp": "^0.1.1",
         "vuedraggable": "^4.1.0",
         "xlsx": "^0.18.5"
       },
@@ -95,7 +96,7 @@
       }
     },
     "../nocodb-sdk": {
-      "version": "0.101.1",
+      "version": "0.101.2",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "axios": "^0.21.1",
@@ -14208,6 +14209,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -17156,6 +17162,19 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue3-text-clamp": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/vue3-text-clamp/-/vue3-text-clamp-0.1.1.tgz",
+      "integrity": "sha512-l/30RvXLkw50axAjswAK1DmvbUc5Oyhq9GkvD98p8pykrLkIajRi3evVsMnahMBK0O7+EGIK9RbIOKPyRfuw7w==",
+      "dependencies": {
+        "resize-detector": "^0.3.0",
+        "vue": "^3.2.37"
+      },
+      "peerDependencies": {
+        "resize-detector": "^0.3.0",
+        "vue": "^3.2.37"
+      }
+    },
     "node_modules/vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
@@ -28072,6 +28091,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -30124,6 +30148,15 @@
         "is-plain-object": "3.0.1"
       }
     },
+    "vue3-text-clamp": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/vue3-text-clamp/-/vue3-text-clamp-0.1.1.tgz",
+      "integrity": "sha512-l/30RvXLkw50axAjswAK1DmvbUc5Oyhq9GkvD98p8pykrLkIajRi3evVsMnahMBK0O7+EGIK9RbIOKPyRfuw7w==",
+      "requires": {
+        "resize-detector": "^0.3.0",
+        "vue": "^3.2.37"
+      }
+    },
     "vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 49a6c5a9a0..b7a3e9e7db 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -64,6 +64,7 @@
     "vue-dompurify-html": "^3.0.0",
     "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.2.2",
+    "vue3-text-clamp": "^0.1.1",
     "vuedraggable": "^4.1.0",
     "xlsx": "^0.18.5"
   },
diff --git a/packages/nc-gui/plugins/clamp.ts b/packages/nc-gui/plugins/clamp.ts
new file mode 100644
index 0000000000..ae580ae8c9
--- /dev/null
+++ b/packages/nc-gui/plugins/clamp.ts
@@ -0,0 +1,6 @@
+import TextClamp from 'vue3-text-clamp'
+import { defineNuxtPlugin } from 'nuxt/app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(TextClamp)
+})