vueless 0.0.324 → 0.0.325

package/composable.mutationObserver/index.js

@@ -0,0 +1,45 @@
+import { onBeforeUnmount, onMounted, toValue, watch } from "vue";
+
+export function useMutationObserver(
+  target,
+  callBack,
+  config = { childList: true, attributes: true, characterData: true },
+) {
+  const observer = new MutationObserver(callBack);
+
+  onMounted(() => {
+    if (!toValue(target)) return;
+
+    if (Array.isArray) {
+      toValue(target).forEach((element) => {
+        observer.observe(element, config);
+      });
+    } else {
+      observer.observe(toValue(target), config);
+    }
+  });
+
+  watch(
+    () => toValue(target),
+    () => {
+      if (Array.isArray) {
+        toValue(target).forEach((element) => {
+          observer.observe(element, config);
+        });
+
+        return;
+      }
+
+      observer.observe(toValue(target), config);
+    },
+    {
+      deep: true,
+    },
+  );
+
+  onBeforeUnmount(() => {
+    observer.disconnect();
+  });
+
+  return { observer };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.324",
+  "version": "0.0.325",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.data-table/components/TableRow.vue

@@ -43,29 +43,37 @@
 
       <div v-if="value?.hasOwnProperty('secondary')">
         <slot :name="`cell-${key}`" :value="value" :row="row">
-          <div :data-test="`${dataTest}-${key}-cell`" v-bind="attrs.bodyCellPrimaryAttrs">
+          <div
+            v-bind="attrs.bodyCellPrimaryAttrs"
+            ref="cellRef"
+            :data-test="`${dataTest}-${key}-cell`"
+          >
             {{ value.primary || HYPHEN_SYMBOL }}
           </div>
 
           <div v-bind="attrs.bodyCellSecondaryAttrs">
             <template v-if="Array.isArray(value.secondary)">
-              <div v-for="(secondary, idx) in value.secondary" :key="idx">
+              <div v-for="(secondary, idx) in value.secondary" ref="cellRef" :key="idx">
                 <span v-bind="attrs.bodyCellSecondaryEmptyAttrs">
                   {{ secondary }}
                 </span>
               </div>
             </template>
 
-            <template v-else>
+            <div v-else ref="cellRef">
               {{ value.secondary }}
-            </template>
+            </div>
           </div>
         </slot>
       </div>
 
       <template v-else>
         <slot :name="`cell-${key}`" :value="value" :row="row">
-          <div :data-test="`${dataTest}-${key}-cell`" v-bind="attrs.bodyCellPrimaryAttrs">
+          <div
+            v-bind="attrs.bodyCellPrimaryAttrs"
+            ref="cellRef"
+            :data-test="`${dataTest}-${key}-cell`"
+          >
             {{ value || value === 0 ? value : HYPHEN_SYMBOL }}
           </div>
         </slot>
@@ -90,11 +98,13 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 import { HYPHEN_SYMBOL } from "../../service.ui";
 import { getFilteredRow } from "../services/table.service.js";
 
+import { useMutationObserver } from "../../composable.mutationObserver/index.js";
+
 import UIcon from "../../ui.image-icon";
 import UCheckbox from "../../ui.form-checkbox";
 
@@ -137,6 +147,10 @@ const emit = defineEmits(["toggleRowVisibility", "click"]);
 
 const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
 
+const cellRef = ref(null);
+
+useMutationObserver(cellRef, setCellTitle, { childList: true });
+
 const toggleIconConfig = computed(() =>
   props.row?.row?.isHidden
     ? props.attrs.bodyCellNestedExpandIconAttrs
@@ -166,4 +180,21 @@ function onClickToggleRowChild(rowId) {
 function onClick(row) {
   emit("click", row);
 }
+
+function setCellTitle(mutations) {
+  mutations.forEach((mutation) => {
+    const { target } = mutation;
+
+    const isOverflown =
+      target.clientWidth < target.scrollWidth || target.clientHeight < target.scrollHeight;
+
+    if (isOverflown) {
+      target.setAttribute("title", target.textContent);
+    }
+
+    if (!isOverflown && target.hasAttribute("title")) {
+      target.removeAttribute("title");
+    }
+  });
+}
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.324",
+  "version": "0.0.325",
   "contributions": {
     "html": {
       "description-markup": "markdown",