vueless 0.0.324 → 0.0.326

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/composable.ui/index.js

@@ -10,17 +10,15 @@ import {
   Fragment,
 } from "vue";
 
-import {
-  cx,
-  setColor,
-  getColor,
-  strategy,
-  nestedComponentRegEx,
-  globalComponentConfig,
-} from "../service.ui";
+import { cx, setColor, getColor, vuelessConfig } from "../service.ui/index.js";
 
-import { cloneDeep } from "../service.helper";
-import { STRATEGY_TYPE, CVA_CONFIG_KEY, SYSTEM_CONFIG_KEY } from "../constants";
+import { cloneDeep, isCSR } from "../service.helper/index.js";
+import {
+  STRATEGY_TYPE,
+  CVA_CONFIG_KEY,
+  SYSTEM_CONFIG_KEY,
+  NESTED_COMPONENT_REG_EXP,
+} from "../constants/index.js";
 
 /**
   Merging component configs in a given sequence (bigger number = bigger priority):
@@ -32,10 +30,11 @@ import { STRATEGY_TYPE, CVA_CONFIG_KEY, SYSTEM_CONFIG_KEY } from "../constants";
 export default function useUI(defaultConfig = {}, propsConfigGetter = null, topLevelClassKey) {
   const { type, props } = getCurrentInstance();
   const componentName = type.name;
-  const globalConfig = globalComponentConfig[componentName];
+  const globalConfig = vuelessConfig?.component ? vuelessConfig?.component[componentName] : {};
 
-  const isStrategyValid = strategy && Object.values(STRATEGY_TYPE).includes(strategy);
-  const vuelessStrategy = isStrategyValid ? strategy : STRATEGY_TYPE.merge;
+  const isStrategyValid =
+    vuelessConfig.strategy && Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy);
+  const vuelessStrategy = isStrategyValid ? vuelessConfig.strategy : STRATEGY_TYPE.merge;
 
   const [firstClassKey] = Object.keys(defaultConfig);
   const config = ref({});
@@ -58,7 +57,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     const nestedComponent = getNestedComponent(defaultConfig[configKey]);
 
     const attrs = useAttrs();
-    const isDev = import.meta.env.DEV;
+    const isDev = isCSR && import.meta.env?.DEV;
     const vuelessAttrs = ref({});
     const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
 
@@ -199,7 +198,6 @@ function mergeConfigs({
     safelistColors,
     defaultVariants,
     compoundVariants,
-    iconName,
   } = SYSTEM_CONFIG_KEY;
 
   for (let key in composedConfig) {
@@ -235,7 +233,6 @@ function mergeConfigs({
 
         const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
         const isEmpty = composedConfig[key] === null;
-        const isIconName = key.toLowerCase().includes(iconName.toLowerCase());
         const isI18n = key === i18n;
 
         if (key === "variants" && !isVariants) {
@@ -252,7 +249,7 @@ function mergeConfigs({
                 isReplace,
                 isVariants,
               })
-            : isReplace || isIconName || isI18n
+            : isReplace || isI18n
               ? propsConfig[key] || globalConfig[key] || defaultConfig[key]
               : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
       }
@@ -388,7 +385,8 @@ function getBaseClasses(value) {
 function getNestedComponent(value) {
   const classes = getBaseClasses(value);
   const component = value?.component || "";
-  const match = classes.match(nestedComponentRegEx) || component.match(nestedComponentRegEx);
+  const match =
+    classes.match(NESTED_COMPONENT_REG_EXP) || component.match(NESTED_COMPONENT_REG_EXP);
 
   return match ? match[1] : "";
 }
@@ -401,11 +399,7 @@ function getNestedComponent(value) {
 function isSystemKey(key) {
   const isExactKey = Object.values(SYSTEM_CONFIG_KEY).some((value) => value === key);
 
-  return (
-    isExactKey ||
-    key.toLowerCase().includes(SYSTEM_CONFIG_KEY.iconName.toLowerCase()) ||
-    key.toLowerCase().includes(SYSTEM_CONFIG_KEY.transition.toLowerCase())
-  );
+  return isExactKey || key.toLowerCase().includes(SYSTEM_CONFIG_KEY.transition.toLowerCase());
 }
 
 /**

package/constants/index.js

@@ -62,6 +62,10 @@ export const SYSTEM_CONFIG_KEY = {
   component: "component",
   transition: "transition",
   safelistColors: "safelistColors",
-  iconName: "iconName",
   ...CVA_CONFIG_KEY,
 };
+
+/* Other */
+export const PX_IN_REM = 16;
+export const HYPHEN_SYMBOL = "-";
+export const NESTED_COMPONENT_REG_EXP = /\{U[^}]*}/g;

package/directive.tooltip/index.js

@@ -1,14 +1,13 @@
 import tippy from "tippy.js";
 import { merge } from "lodash-es";
 
+// Fix for SSR
 import "tippy.js/dist/tippy.css";
 import "tippy.js/themes/light.css";
 import "tippy.js/animations/shift-away.css";
 
-/* Load Vueless config from the project root. */
-const [vuelessConfig] = Object.values(
-  import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
-);
+import { vuelessConfig } from "../service.ui/index.js";
+import { isCSR, isSSR } from "../service.helper/index.js";
 
 const globalSettings = vuelessConfig?.directive?.tooltip || {};
 const defaultSettings = {
@@ -19,21 +18,21 @@ const defaultSettings = {
 
 const mergedSettings = merge(defaultSettings, globalSettings);
 
-tippy.setDefaultProps(mergedSettings);
+isCSR && tippy.setDefaultProps(mergedSettings);
 
 export default {
   mounted(el, bindings) {
-    tippy(el, merge(mergedSettings, bindings.value || {}));
+    isCSR && tippy(el, merge(mergedSettings, bindings.value || {}));
   },
 
   updated(el, bindings) {
-    if (!el._tippy) return;
+    if (!el._tippy || isSSR) return;
 
     el._tippy.setProps(merge(mergedSettings, bindings.value || {}));
   },
 
   unmounted(el) {
-    if (!el._tippy) return;
+    if (!el._tippy || isSSR) return;
 
     el._tippy.destroy();
   },

package/index.js

@@ -2,8 +2,10 @@
 import { createLocale, LocaleSymbol } from "./composable.locale";
 import { createLoaderRendering, LoaderRenderingSymbol } from "./ui.loader-rendering/composables/useLoaderRendering";
 import { createLoaderTop, LoaderTopSymbol } from "./ui.loader-top/composables/useLoaderTop";
+import { themeInit } from "./service.theme";
 
-export { setTheme } from "./service.ui";
+export { setTitle } from "./service.helper";
+export { setTheme } from "./service.theme";
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en";
 export { useLocale } from "./composable.locale";
@@ -33,6 +35,8 @@ export function createVueless(options = {}) {
     app.provide(LoaderTopSymbol, loaderTop);
   };
 
+  themeInit();
+
   return {
     install,
   };

package/package.json

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

package/service.helper/index.js

@@ -37,6 +37,13 @@ export function cloneDeep(entity, cache = new WeakMap()) {
   );
 }
 
+/**
+ Invoke function with delay (same as lodash.debounce).
+ @param {Function} func
+ @param {Number} wait
+
+ @returns {Function}
+ */
 export function debounce(func, wait) {
   let timeout;
 
@@ -47,3 +54,28 @@ export function debounce(func, wait) {
     timeout = setTimeout(() => func.apply(context, args), wait);
   };
 }
+
+/**
+ Change page title in runtime by provided config.
+ @param {Object} config
+ @param {string} config.title
+ @param {string} config.separator
+ @param {string} config.suffix
+
+ @returns {VoidFunction}
+ */
+export function setTitle({ title, separator = " / ", suffix = "" }) {
+  document.title = title ? title + separator + suffix : suffix;
+}
+
+/**
+ Check is code rendering on the server side.
+ @returns {boolean}
+ */
+export const isSSR = typeof window === "undefined";
+
+/**
+ Check is code rendering on the client side.
+ @returns {boolean}
+ */
+export const isCSR = typeof window !== "undefined";

package/service.theme/index.js

@@ -0,0 +1,124 @@
+import colors from "tailwindcss/colors.js";
+
+import { vuelessConfig } from "../service.ui";
+import {
+  GRAY_COLOR,
+  COOL_COLOR,
+  BRAND_COLORS,
+  GRAYSCALE_COLOR,
+  DEFAULT_RING,
+  DEFAULT_RING_OFFSET,
+  DEFAULT_ROUNDING,
+  DEFAULT_BRAND_COLOR,
+  DEFAULT_GRAY_COLOR,
+  DARK_MODE_SELECTOR,
+  GRAY_COLORS,
+  PX_IN_REM,
+} from "../constants/index.js";
+
+export function themeInit() {
+  const prefersColorSchemeDark = window && window.matchMedia("(prefers-color-scheme: dark)");
+
+  setTheme({ systemDarkMode: prefersColorSchemeDark.matches });
+
+  prefersColorSchemeDark.addEventListener("change", (event) =>
+    setTheme({ systemDarkMode: event.matches }),
+  );
+}
+
+export function setTheme(config = {}) {
+  const isDarkMode = setDarkMode(config);
+  const ring = config?.ring ?? vuelessConfig?.ring ?? DEFAULT_RING;
+  const ringOffset = config?.ringOffset ?? vuelessConfig?.ringOffset ?? DEFAULT_RING_OFFSET;
+  const rounding = config?.rounding ?? vuelessConfig?.rounding ?? DEFAULT_ROUNDING;
+  let brand = config?.brand ?? vuelessConfig?.brand ?? DEFAULT_BRAND_COLOR;
+  let gray = config?.gray ?? vuelessConfig?.gray ?? DEFAULT_GRAY_COLOR;
+
+  const isBrandColor = BRAND_COLORS.some((color) => color === brand);
+  const isGrayColor = GRAY_COLORS.some((color) => color === gray);
+
+  if (!isBrandColor) {
+    // eslint-disable-next-line no-console
+    console.warn(`Brand color '${brand}' is incorrect.`);
+  }
+
+  if (!isGrayColor) {
+    // eslint-disable-next-line no-console
+    console.warn(`Gray color '${gray}' is incorrect.`);
+  }
+
+  const defaultBrandShade = isDarkMode ? 400 : 600;
+  const defaultGrayShade = isDarkMode ? 400 : 600;
+
+  if (gray === COOL_COLOR) {
+    gray = GRAY_COLOR;
+  }
+
+  if (brand === GRAYSCALE_COLOR) {
+    brand = gray;
+  }
+
+  const variables = {
+    "--vl-ring": `${ring}px`,
+    "--vl-ring-offset": `${ringOffset}px`,
+    "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
+    "--vl-color-gray-default": convertHexInRgb(colors[gray][defaultBrandShade]),
+    "--vl-color-brand-default": convertHexInRgb(colors[brand][defaultGrayShade]),
+  };
+
+  for (const key in colors[gray]) {
+    variables[`--vl-color-gray-${key}`] = convertHexInRgb(colors[gray][key]);
+  }
+
+  for (const key in colors[brand]) {
+    variables[`--vl-color-brand-${key}`] = convertHexInRgb(colors[brand][key]);
+  }
+
+  const style = document.createElement("style");
+  const stringVariables = Object.entries(variables)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join(" ");
+
+  style.innerHTML = `:root {${stringVariables}`;
+
+  document.head.appendChild(style);
+}
+
+function setDarkMode(config) {
+  config?.darkMode === undefined
+    ? localStorage.removeItem(DARK_MODE_SELECTOR)
+    : localStorage.setItem(DARK_MODE_SELECTOR, Number(!!config?.darkMode));
+
+  const storedDarkMode = localStorage.getItem(DARK_MODE_SELECTOR);
+
+  let isDarkMode =
+    storedDarkMode !== null
+      ? !!Number(storedDarkMode)
+      : !!(config?.darkMode ?? vuelessConfig?.darkMode ?? config?.systemDarkMode);
+
+  isDarkMode
+    ? document.documentElement.classList.add(DARK_MODE_SELECTOR)
+    : document.documentElement.classList.remove(DARK_MODE_SELECTOR);
+
+  return isDarkMode;
+}
+
+function convertHexInRgb(hex) {
+  const color = hex.replace(/#/g, "");
+
+  let r, g, b;
+
+  if (color.length === 6) {
+    r = parseInt(color.substring(0, 2), 16);
+    g = parseInt(color.substring(2, 4), 16);
+    b = parseInt(color.substring(4, 6), 16);
+  }
+
+  if (color.length === 3) {
+    r = parseInt(color.substring(0, 1).repeat(2), 16);
+    g = parseInt(color.substring(1, 2).repeat(2), 16);
+    b = parseInt(color.substring(2, 3).repeat(2), 16);
+  }
+
+  return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
+}

package/service.ui/index.js

@@ -1,46 +1,36 @@
 import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { extendTailwindMerge } from "tailwind-merge";
-import colors from "tailwindcss/colors";
-
-import { cloneDeep } from "../service.helper";
+import { cloneDeep, isCSR, isSSR } from "../service.helper/index.js";
 import {
-  GRAY_COLOR,
-  COOL_COLOR,
   BRAND_COLOR,
-  BRAND_COLORS,
   GRAYSCALE_COLOR,
-  DEFAULT_RING,
-  DEFAULT_RING_OFFSET,
-  DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
-  DEFAULT_GRAY_COLOR,
-  DARK_MODE_SELECTOR,
-  GRAY_COLORS,
-} from "../constants";
+  NESTED_COMPONENT_REG_EXP,
+} from "../constants/index.js";
 
-/* Load Vueless config from the project root. */
-const [vuelessConfig] = Object.values(
-  import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
-);
+/**
+ Load Vueless config from the project root.
+ Both for server and client side renderings.
+ IIFE is used to cache the results.
+ */
+export const vuelessConfig = (() => {
+  let config = {};
 
-/*
-  Export global config settings for the current library.
-  Did as a separate variables for more comfortable usage.
-*/
-export const {
-  layout,
-  strategy,
-  rounding,
-  gray,
-  brand,
-  tailwindMerge: globalTailwindMergeConfig,
-  component: globalComponentConfig,
-} = vuelessConfig;
+  if (isSSR) {
+    // TODO: test it in SSR, maybe `await` is needed
+    config = import(/* @vite-ignore */ `${process.cwd()}/vueless.config.js`).default;
+  }
 
-export const nestedComponentRegEx = /\{U[^}]*}/g;
+  if (isCSR) {
+    config = Object.values(
+      import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
+    )[0];
+  }
+
+  return config;
+})();
 
-//
 /**
  Extend twMerge (tailwind merge) by vueless and user config:
  All list of rules available here:
@@ -61,7 +51,7 @@ const twMerge = extendTailwindMerge(
         },
       },
     },
-    globalTailwindMergeConfig,
+    vuelessConfig.tailwindMerge,
   ),
 );
 
@@ -69,83 +59,52 @@ const twMerge = extendTailwindMerge(
   Export cva (class variance authority) methods:
    * extended with tailwind-merge
    * remove all Vueless nested component names ({U...} strings) from class list string.
-  It helps to make class variation switchers and removes class duplications.
   https://beta.cva.style
 */
-export const {
-  cva: classVarianceAuthority,
-  cx,
-  compose,
-} = defineConfig({
+export const { cva, cx, compose } = defineConfig({
   hooks: {
-    onComplete: (classNames) => twMerge(classNames).replace(nestedComponentRegEx, ""),
+    onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_REG_EXP, ""),
   },
 });
 
-export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>
-  classVarianceAuthority({
-    base,
-    variants,
-    compoundVariants,
-    defaultVariants,
-  });
-
-const PX_IN_REM = 16;
-const HYPHEN_SYMBOL = "-";
-
-(() => {
-  const prefersColorSchemeDark = window && window.matchMedia("(prefers-color-scheme: dark)");
-
-  setTheme({ systemDarkMode: prefersColorSchemeDark.matches });
+/**
+ Return default values for component props, icons, etc..
+ @param { Object } defaultConfig
+ @param { String } name
 
-  prefersColorSchemeDark.addEventListener("change", (event) =>
-    setTheme({ systemDarkMode: event.matches }),
+ @returns { Object }
+ */
+export function getDefault(defaultConfig, name) {
+  const defaults = merge(
+    cloneDeep(defaultConfig.defaults),
+    vuelessConfig?.component ? vuelessConfig?.component[name]?.defaults : {},
   );
-})();
-
-function getRandomId(length = 15) {
-  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-  const charactersLength = characters.length;
-  let id = "";
-
-  while (id.length < length) {
-    id += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-
-  return id;
-}
-
-function setTitle({ title, separator = " / ", suffix = "" }) {
-  document.title = title ? title + separator + suffix : suffix;
-}
-
-function setFavicon(faviconPath) {
-  if (!faviconPath) return;
-
-  const head = document.querySelector("head");
-  const faviconTag = document.createElement("link");
-
-  faviconTag.setAttribute("rel", "shortcut icon");
-  faviconTag.setAttribute("href", `${faviconPath}?${Math.random()}`);
-
-  head.appendChild(faviconTag);
-}
-
-function getDefault(defaultConfig, name) {
-  const defaults = merge(cloneDeep(defaultConfig.defaults), globalComponentConfig[name]?.defaults);
 
   defaults.color = getColor(defaults.color);
 
   return defaults;
 }
 
-function getColor(color) {
-  return (brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR && color === BRAND_COLOR
+/**
+ Return `grayscale` color if in component config it `brand` but in vueless config it `grayscale`
+ Otherwise return given color.
+ @param { String } color
+ @returns { String }
+ */
+export function getColor(color) {
+  return (vuelessConfig.brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR && color === BRAND_COLOR
     ? GRAYSCALE_COLOR
     : color;
 }
 
-function setColor(classes, color) {
+/**
+ Replace in tailwind classes `{color}` variable into given color.
+ @param { String } classes
+ @param { String } color
+
+ @returns { String }
+ */
+export function setColor(classes, color) {
   if (typeof classes !== "string") {
     return "";
   }
@@ -153,113 +112,20 @@ function setColor(classes, color) {
   return classes?.replaceAll("{color}", color);
 }
 
-function setDarkMode(config) {
-  config?.darkMode === undefined
-    ? localStorage.removeItem(DARK_MODE_SELECTOR)
-    : localStorage.setItem(DARK_MODE_SELECTOR, Number(!!config?.darkMode));
-
-  const storedDarkMode = localStorage.getItem(DARK_MODE_SELECTOR);
-
-  let isDarkMode =
-    storedDarkMode !== null
-      ? !!Number(storedDarkMode)
-      : !!(config?.darkMode ?? vuelessConfig?.darkMode ?? config?.systemDarkMode);
-
-  isDarkMode
-    ? document.documentElement.classList.add(DARK_MODE_SELECTOR)
-    : document.documentElement.classList.remove(DARK_MODE_SELECTOR);
-
-  return isDarkMode;
-}
-
-function setTheme(config = {}) {
-  const isDarkMode = setDarkMode(config);
-  const ring = config?.ring ?? vuelessConfig?.ring ?? DEFAULT_RING;
-  const ringOffset = config?.ringOffset ?? vuelessConfig?.ringOffset ?? DEFAULT_RING_OFFSET;
-  const rounding = config?.rounding ?? vuelessConfig?.rounding ?? DEFAULT_ROUNDING;
-  let brand = config?.brand ?? vuelessConfig?.brand ?? DEFAULT_BRAND_COLOR;
-  let gray = config?.gray ?? vuelessConfig?.gray ?? DEFAULT_GRAY_COLOR;
-
-  const isBrandColor = BRAND_COLORS.some((color) => color === brand);
-  const isGrayColor = GRAY_COLORS.some((color) => color === gray);
-
-  if (!isBrandColor) {
-    // eslint-disable-next-line no-console
-    console.warn(`Brand color '${brand}' is incorrect.`);
-  }
-
-  if (!isGrayColor) {
-    // eslint-disable-next-line no-console
-    console.warn(`Gray color '${gray}' is incorrect.`);
-  }
-
-  const defaultBrandShade = isDarkMode ? 400 : 600;
-  const defaultGrayShade = isDarkMode ? 400 : 600;
-
-  if (gray === COOL_COLOR) {
-    gray = GRAY_COLOR;
-  }
-
-  if (brand === GRAYSCALE_COLOR) {
-    brand = gray;
-  }
-
-  const variables = {
-    "--vl-ring": `${ring}px`,
-    "--vl-ring-offset": `${ringOffset}px`,
-    "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
-    "--vl-color-gray-default": convertHexInRgb(colors[gray][defaultBrandShade]),
-    "--vl-color-brand-default": convertHexInRgb(colors[brand][defaultGrayShade]),
-  };
-
-  for (const key in colors[gray]) {
-    variables[`--vl-color-gray-${key}`] = convertHexInRgb(colors[gray][key]);
-  }
-
-  for (const key in colors[brand]) {
-    variables[`--vl-color-brand-${key}`] = convertHexInRgb(colors[brand][key]);
-  }
-
-  const style = document.createElement("style");
-  const stringVariables = Object.entries(variables)
-    .map(([key, value]) => `${key}: ${value};`)
-    .join(" ");
-
-  style.innerHTML = `:root {${stringVariables}`;
-
-  document.head.appendChild(style);
-}
-
-function convertHexInRgb(hex) {
-  const color = hex.replace(/#/g, "");
-
-  let r, g, b;
+/**
+ Generates unique #id.
+ @param { Number } length
+ @returns { String }
+ */
+export function getRandomId(length = 15) {
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+  const charactersLength = characters.length;
 
-  if (color.length === 6) {
-    r = parseInt(color.substring(0, 2), 16);
-    g = parseInt(color.substring(2, 4), 16);
-    b = parseInt(color.substring(4, 6), 16);
-  }
+  let id = "";
 
-  if (color.length === 3) {
-    r = parseInt(color.substring(0, 1).repeat(2), 16);
-    g = parseInt(color.substring(1, 2).repeat(2), 16);
-    b = parseInt(color.substring(2, 3).repeat(2), 16);
+  while (id.length < length) {
+    id += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
 
-  return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
+  return id;
 }
-
-export {
-  PX_IN_REM,
-  HYPHEN_SYMBOL,
-  getRandomId,
-  setTitle,
-  setFavicon,
-  getDefault,
-  getColor,
-  setColor,
-  setDarkMode,
-  setTheme,
-  convertHexInRgb,
-};

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

@@ -43,29 +43,48 @@
 
       <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"
+            :title="isElementOverflown(cellRef?.[index]) ? value.primary : ''"
+            :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"
+                :title="isElementOverflown(cellRef?.[index]) ? value.secondary : ''"
+              >
                 <span v-bind="attrs.bodyCellSecondaryEmptyAttrs">
                   {{ secondary }}
                 </span>
               </div>
             </template>
 
-            <template v-else>
+            <div
+              v-else
+              ref="cellRef"
+              :title="isElementOverflown(cellRef?.[index]) ? value.secondary : ''"
+            >
               {{ 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"
+            :title="isElementOverflown(cellRef?.[index]) ? value : ''"
+            :data-test="`${dataTest}-${key}-cell`"
+          >
             {{ value || value === 0 ? value : HYPHEN_SYMBOL }}
           </div>
         </slot>
@@ -90,11 +109,13 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
-import { HYPHEN_SYMBOL } from "../../service.ui";
+import { HYPHEN_SYMBOL } from "../../constants";
 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 +158,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 +191,26 @@ function onClickToggleRowChild(rowId) {
 function onClick(row) {
   emit("click", row);
 }
+
+function setCellTitle(mutations) {
+  mutations.forEach((mutation) => {
+    const { target } = mutation;
+
+    const isOverflown = isElementOverflown(target);
+
+    if (isOverflown) {
+      target.setAttribute("title", target.textContent);
+    }
+
+    if (!isOverflown && target.hasAttribute("title")) {
+      target.removeAttribute("title");
+    }
+  });
+}
+
+function isElementOverflown(element) {
+  if (!cellRef.value) return false;
+
+  return element.clientWidth < element.scrollWidth || element.clientHeight < element.scrollHeight;
+}
 </script>

package/ui.data-table/index.vue

@@ -292,7 +292,7 @@ import {
   getFlatRows,
 } from "./services/table.service";
 
-import { PX_IN_REM } from "../service.ui";
+import { PX_IN_REM } from "../constants";
 import { UTable } from "./constants";
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";

package/ui.loader/composables/attrs.composable.js

@@ -1,7 +1,7 @@
 import useUI from "../../composable.ui";
 import { cva, cx } from "../../service.ui";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "../configs/default.config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props) {

package/ui.text-notify/index.vue

@@ -80,8 +80,7 @@
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { merge } from "lodash-es";
 
-import { globalComponentConfig, cx, getDefault } from "../service.ui";
-
+import { cx, getDefault, vuelessConfig } from "../service.ui";
 import { useLocale } from "../composable.locale";
 import useAttrs from "./composables/attrs.composable";
 
@@ -193,7 +192,7 @@ function getOffsetWidth(selector) {
 }
 
 function setPosition() {
-  const positionClasses = globalComponentConfig.UNotify?.positionClasses;
+  const positionClasses = vuelessConfig.component?.UNotify?.positionClasses;
   const pageClass = positionClasses?.page || config.value.positionClasses.page;
   const asideClass = positionClasses?.aside || config.value.positionClasses.aside;
   const pageWidth = getOffsetWidth(`${pageClass}`);

package/ui.text-notify/services/index.js

@@ -1,7 +1,7 @@
-import { globalComponentConfig, getRandomId } from "../../service.ui";
+import { getRandomId, vuelessConfig } from "../../service.ui";
 import { DELAY_BETWEEN_CLONES, DURATION, LOCAL_STORAGE_ID, NOTIFY_TYPE } from "../constants";
 
-const globalNotifyDuration = globalComponentConfig.UNotify?.duration;
+const globalNotifyDuration = vuelessConfig.component?.UNotify?.duration;
 const notifyClearAllEvent = new Event("notifyClearAll");
 
 let lastMessageTime = undefined;

package/web-types.json

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