feat: ClampedText for handling line-clamping

Signed-off-by: mertmit <mertmit99@gmail.com>
1 year ago · a49a68215e
8 changed files with 110 additions and 14 deletions
--- a/packages/nc-gui/components/cell/ClampedText.vue
+++ 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>
--- 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>
--- 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>
--- 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)"
--- 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,
--- 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",
--- 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"
  },
--- a/packages/nc-gui/plugins/clamp.ts
+++ 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)
+})