@tekkare/auriga 0.2.224 → 0.2.226

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.2.224"
+  "version": "0.2.226"
 }

package/dist/runtime/components/argChart.vue

@@ -344,7 +344,10 @@ export default defineComponent({
           };
         }
         if (props.tooltipOptions) {
-          props.options["tooltip"] = props.tooltipOptions;
+          props.options["tooltip"] = {
+            shared: props.sharedTooltip,
+            ...props.tooltipOptions
+          };
         } else {
           props.options["tooltip"] = {
             y: {

package/dist/runtime/components/tableRowCrop.vue

@@ -1,24 +1,20 @@
 <template>
-  <div ref="element" class="oip_list gap-6">
+  <div class="oip_list gap-6">
     <div
       v-if="custom"
-      :class="custom && isBig && !showMore ? 'fix-height' : ''"
-      :style="
-        custom && isBig && !showMore
-          ? 'max-height: ' + maxLines * 16.6 + 'px'
-          : ''
-      "
+      ref="content"
+      :class="showMore ? '' : 'fix-height'"
+      :style="showMore ? '' : `max-height: ${clampHeight}px`"
     >
       <slot />
     </div>
 
     <p
       v-else-if="typeof value === 'string'"
-      :class="isBig && !showMore ? 'crop' : ''"
+      ref="content"
+      :class="showMore ? '' : 'crop'"
       :style="
-        isBig && !showMore
-          ? `  -webkit-line-clamp: ${maxLines}; line-clamp:  {maxLines};`
-          : ''
+        showMore ? '' : `-webkit-line-clamp: ${maxLines}; line-clamp: ${maxLines};`
       "
       class="wrap-line"
     >
@@ -37,11 +33,13 @@
 <script>
 import {
   onMounted,
+  onBeforeUnmount,
   ref,
-  computed,
+  nextTick,
   watch,
   defineComponent
 } from "vue";
+const FALLBACK_LINE_HEIGHT = 16.6;
 export default defineComponent({
   name: "tableRowCrop",
   /*   components: { argIcon, argStyle }, */
@@ -50,31 +48,59 @@ export default defineComponent({
     custom: { type: Boolean, default: false },
     maxLines: { type: Number, default: 3 }
   },
-  setup(props, { emit }) {
-    const isBig = ref(false);
-    const element = ref(null);
-    const height = computed(() => element.value?.offsetHeight);
+  setup(props) {
+    const content = ref(null);
     const showMore = ref(false);
     const showReadMore = ref(false);
+    const clampHeight = ref(props.maxLines * FALLBACK_LINE_HEIGHT);
     function toggleShowMore() {
       showMore.value = !showMore.value;
     }
-    onMounted(() => {
-      if (height.value > props.maxLines * 16.6) {
-        isBig.value = true;
-        showReadMore.value = true;
-      } else showReadMore.value = false;
+    function readClampHeight() {
+      const el = content.value;
+      if (!el) return;
+      const lineHeight = Number.parseFloat(getComputedStyle(el).lineHeight);
+      clampHeight.value = Number.isFinite(lineHeight) && lineHeight > 0 ? props.maxLines * lineHeight : props.maxLines * FALLBACK_LINE_HEIGHT;
+    }
+    function measure() {
+      if (showMore.value) return;
+      const el = content.value;
+      if (!el) {
+        showReadMore.value = false;
+        return;
+      }
+      showReadMore.value = el.scrollHeight > el.clientHeight + 1;
+    }
+    let observer = null;
+    onMounted(async () => {
+      await nextTick();
+      readClampHeight();
+      await nextTick();
+      measure();
+      if (typeof ResizeObserver !== "undefined" && content.value) {
+        observer = new ResizeObserver(() => measure());
+        observer.observe(content.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      observer = null;
     });
     watch(
-      () => height.value,
-      () => {
-        if (height.value > props.maxLines * 16.6) {
-          isBig.value = true;
-          showReadMore.value = true;
-        } else showReadMore.value = false;
+      () => [props.value, props.maxLines],
+      async () => {
+        await nextTick();
+        readClampHeight();
+        await nextTick();
+        measure();
       }
     );
-    return { isBig, element, showMore, toggleShowMore, showReadMore };
+    watch(showMore, async (expanded) => {
+      if (expanded) return;
+      await nextTick();
+      measure();
+    });
+    return { content, showMore, showReadMore, clampHeight, toggleShowMore };
   }
 });
 </script>

package/dist/runtime/components/tableRowCrop.vue.d.ts

@@ -11,11 +11,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: number;
     };
 }>, {
-    isBig: import("vue").Ref<boolean, boolean>;
-    element: import("vue").Ref<null, null>;
+    content: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
     showMore: import("vue").Ref<boolean, boolean>;
-    toggleShowMore: () => void;
     showReadMore: import("vue").Ref<boolean, boolean>;
+    clampHeight: import("vue").Ref<number, number>;
+    toggleShowMore: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         default: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.2.224",
+  "version": "0.2.226",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",