vueless 0.0.323 → 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.323",
+  "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/ui.dropdown-list/composables/attrs.composable.js

@@ -44,15 +44,8 @@ export default function useAttrs(props) {
     }
   }
 
-  const optionAttrs = (classes = []) => {
-    const mergedClasses = cx([optionClasses.value, ...classes]);
-
-    return getAttrs("option", { classes: mergedClasses }).value;
-  };
-
   return {
     ...attrs,
-    optionAttrs,
     optionClasses,
     hasSlotContent,
     config,

package/ui.dropdown-list/index.vue

@@ -21,7 +21,8 @@
         <!-- option title -->
         <span
           v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
-          v-bind="optionAttrs(optionHighlight(index, option))"
+          v-bind="optionAttrs"
+          :class="optionHighlight(index, option)"
           @click="select(option)"
           @mouseenter.self="pointerSet(index)"
         >

package/ui.form-select/index.stories.js

@@ -102,6 +102,13 @@ const GroupValuesTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const LargeItemList = DefaultTemplate.bind({});
+LargeItemList.args = {
+  options: [...new Array(1000)].map((_, index) => {
+    return { id: index + 1, label: `value ${index + 1}`, badge: "badge" };
+  }),
+};
+
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { multiple: true, modelValue: [] };
 

package/ui.form-select/index.vue

@@ -684,6 +684,10 @@ const filteredOptions = computed(() => {
       )
     : [...props.options];
 
+  if (!normalizedSearch) {
+    return options.slice(0, props.optionsLimit || options.length);
+  }
+
   options = props.groupValueKey
     ? filterAndFlat(options, normalizedSearch, props.labelKey)
     : SelectService.filterOptions(options, normalizedSearch, props.labelKey);

package/web-types.json

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