vueless 0.0.478-beta.3 → 0.0.479

package/composables/useBreakpoint.js

@@ -59,7 +59,7 @@ export default function useBreakpoint() {
   onBeforeUnmount(() => {
     if (isSSR) return;
 
-    window.removeEventListener("resize", resizeListener);
+    window.removeEventListener("resize", resizeListener, { passive: true });
   });
 
   watch(windowWidth, setBreakpoint, { immediate: true });

package/composables/useUI.js

@@ -11,7 +11,7 @@ import {
   computed,
 } from "vue";
 
-import { cx, cva, setColor, getColor, vuelessConfig } from "../utils/utilUI.js";
+import { cx, cva, setColor, getColor, vuelessConfig, mergeConfigs } from "../utils/utilUI.js";
 
 import { cloneDeep, isCSR } from "../utils/utilHelper.js";
 import {
@@ -241,209 +241,6 @@ function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStra
   }
 }
 
-/**
- * Recursively merge config objects with removing tailwind classes duplicates.
- * @param {Object} defaultConfig
- * @param {Object} globalConfig
- * @param {Object} propsConfig
- * @param {Object} config - final merged config.
- * @param {boolean} isReplace - enables class replacement instead of merge.
- * @param {boolean} isVarinants - if true, prevents adding a "base" key into nested objects.
- *
- * @returns {Object}
- */
-function mergeConfigs({
-  defaultConfig,
-  globalConfig,
-  propsConfig,
-  config = {},
-  isReplace = false,
-  isVariants = false,
-}) {
-  globalConfig = cloneDeep(globalConfig || {});
-  propsConfig = cloneDeep(propsConfig || {});
-
-  const isGlobalConfig = Object.keys(globalConfig).length;
-  const isPropsConfig = Object.keys(propsConfig).length;
-
-  // Add unique keys from defaultConfig to composedConfig
-  let composedConfig = cloneDeep(defaultConfig);
-
-  // Add unique keys from globalConfig to composedConfig
-  for (let key in globalConfig) {
-    if (!Object.keys(composedConfig).includes(key)) {
-      composedConfig[key] = globalConfig[key];
-    }
-  }
-
-  // Add unique keys from propsConfig to composedConfig
-  for (let key in propsConfig) {
-    if (!Object.keys(composedConfig).includes(key)) {
-      composedConfig[key] = propsConfig[key];
-    }
-  }
-
-  const {
-    i18n,
-    defaults,
-    strategy,
-    safelist,
-    component,
-    safelistColors,
-    defaultVariants,
-    compoundVariants,
-  } = SYSTEM_CONFIG_KEY;
-
-  for (let key in composedConfig) {
-    if (isGlobalConfig || isPropsConfig) {
-      if (key === safelist || key === safelistColors) {
-        if (propsConfig[key]) {
-          // eslint-disable-next-line no-console
-          console.warn(`Passing '${key}' key in 'config' prop is not allowed.`);
-        }
-      } else if (key === component) {
-        config[key] = propsConfig[key] || defaultConfig[key];
-
-        if (globalConfig[key]) {
-          // eslint-disable-next-line no-console
-          console.warn(`Passing '${key}' key in 'config' prop or by global config is not allowed.`);
-        }
-      } else if (key === strategy) {
-        config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
-      } else if (key === defaults || key === defaultVariants) {
-        config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
-      } else if (key === compoundVariants) {
-        config[key] = mergeCompoundVariants({
-          defaultConfig: composedConfig,
-          globalConfig,
-          propsConfig,
-          isReplace,
-          key,
-        });
-      } else {
-        const isObjectComposedConfig = typeof composedConfig[key] === "object";
-        const isObjectGlobalConfig = typeof globalConfig[key] === "object";
-        const isObjectPropsConfig = typeof propsConfig[key] === "object";
-
-        const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
-        const isEmpty = composedConfig[key] === null;
-        const isI18n = key === i18n;
-
-        if (key === "variants" && !isVariants) {
-          isVariants = true;
-        }
-
-        config[key] =
-          isObject && !isEmpty && !isI18n
-            ? mergeConfigs({
-                defaultConfig: stringToObject(composedConfig[key], { addBase: !isVariants }),
-                globalConfig: stringToObject(globalConfig[key], { addBase: !isVariants }),
-                propsConfig: stringToObject(propsConfig[key], { addBase: !isVariants }),
-                config: stringToObject(composedConfig[key], { addBase: !isVariants }),
-                isReplace,
-                isVariants,
-              })
-            : isReplace || isI18n
-              ? propsConfig[key] || globalConfig[key] || defaultConfig[key]
-              : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
-      }
-    } else {
-      config[key] = composedConfig[key];
-    }
-  }
-
-  return config;
-}
-
-/**
- Turn simplified nested component config to regular config.
- @param {Object | String} value
- @param {Boolean} addBase
- @returns {Object}
- */
-function stringToObject(value, { addBase = false }) {
-  if (value === undefined) value = "";
-
-  return typeof value !== "object" ? addBase && { base: value } : value;
-}
-
-/**
- * Merge CVA compound variants arrays.
- * @param {Object} defaultConfig
- * @param {Object} globalConfig
- * @param {Object} propsConfig
- * @param {string} key
- * @param {boolean} isReplace - enables class replacement instead of merge.
- *
- * @returns {Array}
- */
-function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key, isReplace }) {
-  if (
-    (globalConfig[key] && !Array.isArray(globalConfig[key])) ||
-    (propsConfig[key] && !Array.isArray(propsConfig[key])) ||
-    (defaultConfig[key] && !Array.isArray(defaultConfig[key]))
-  ) {
-    // eslint-disable-next-line no-console
-    console.error("CompoundVariants should be an array.");
-  }
-
-  let globalConfigUniqueItems = cloneDeep(globalConfig[key] || []);
-  let propsConfigUniqueItems = cloneDeep(propsConfig[key] || []);
-
-  const config = defaultConfig[key].map((defaultConfigItem) => {
-    /**
-     * Compare two objects by keys for match.
-     * @param {Object} configItem
-     * @returns {Boolean}
-     */
-    function isSameItem(configItem) {
-      const hasConfigItemKeys = Object.keys(defaultConfigItem)
-        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
-        .every((item) => !!item);
-
-      const hasDefaultConfigItemKeys = Object.keys(configItem)
-        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
-        .every((item) => !!item);
-
-      return hasConfigItemKeys && hasDefaultConfigItemKeys;
-    }
-
-    /**
-     * Find the same compound variant item in custom config if exist.
-     * @param {Object} config
-     * @returns {Object|undefined}
-     */
-    function findItem(config = []) {
-      const globalConfigUniqueItemIndex = globalConfigUniqueItems.findIndex(isSameItem);
-      const propsConfigUniqueItemIndex = propsConfigUniqueItems.findIndex(isSameItem);
-
-      if (~globalConfigUniqueItemIndex) {
-        globalConfigUniqueItems.splice(globalConfigUniqueItemIndex, 1);
-      }
-
-      if (~propsConfigUniqueItemIndex) {
-        propsConfigUniqueItems.splice(propsConfigUniqueItemIndex, 1);
-      }
-
-      return config.find(isSameItem);
-    }
-
-    const globalConfigItem = findItem(globalConfig[key]);
-    const propsConfigItem = findItem(propsConfig[key]);
-
-    return globalConfigItem || propsConfigItem
-      ? {
-          ...defaultConfigItem,
-          class: isReplace
-            ? propsConfigItem?.class || globalConfigItem?.class || defaultConfigItem.class
-            : cx([defaultConfigItem.class, globalConfigItem?.class, propsConfigItem?.class]),
-        }
-      : defaultConfigItem;
-  });
-
-  return [...config, ...globalConfigUniqueItems, ...propsConfigUniqueItems];
-}
-
 /**
  * Merge component classes from "class" attribute into final config.
  * @param {Object} config

package/constants.js

@@ -14,7 +14,7 @@ export const DEFAULT_GRAY_COLOR = COOL_COLOR;
 export const DEFAULT_RING = 4; /* pixels */
 export const DEFAULT_RING_OFFSET = 0; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
-export const DEFAULT_RING_OFFSET_COLOR_DARK = "#1f2937"; // gray-800
+export const DEFAULT_RING_OFFSET_COLOR_DARK = "#4b5563"; // gray-600
 export const DEFAULT_ROUNDING = 8; /* pixels */
 
 /* Vueless supported colors and shades */
@@ -61,7 +61,6 @@ export const SYSTEM_CONFIG_KEY = {
   i18n: "i18n",
   defaults: "defaults",
   strategy: "strategy",
-  safelist: "safelist",
   component: "component",
   transition: "transition",
   safelistColors: "safelistColors",

package/directives/clickOutside/vClickOutside.js

@@ -24,8 +24,8 @@ function clickOutside(target, handler, options) {
   window.addEventListener("pointerdown", onClick, { passive: true });
 
   function removeEvents() {
-    window.removeEventListener("click", onClick, capture);
-    window.removeEventListener("pointerdown", onClick);
+    window.removeEventListener("click", onClick, { capture, passive: true });
+    window.removeEventListener("pointerdown", onClick, { passive: true });
   }
 
   return removeEvents;

package/directives/tooltip/storybook/stories.js

@@ -36,11 +36,11 @@ const EnumTemplate = (args) => ({
   },
   template: `
     <URow>
-      <UIcon
-        v-for="option in args.options"
-        interactive
-        name="sentiment_satisfied"
-        v-tooltip="{ content: option, ...args.tooltip, [args.enum]: option }"
+      <UIcon 
+        v-for="option in args.options" 
+        interactive 
+        name="sentiment_satisfied" 
+        v-tooltip="{ content: option, ...args.tooltip, [args.enum]: option }" 
       >
     </URow>
   `,

package/{index.ts → index.js}

@@ -1,14 +1,11 @@
-/* eslint-disable prettier/prettier */
+/* eslint-disable vue/max-len, prettier/prettier */
 import { createLocale, LocaleSymbol } from "./composables/useLocale.js";
 import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay.js";
 import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress.js";
-import { themeInit } from "./utilsTs/utilTheme.ts";
+import { themeInit } from "./utils/utilTheme.js";
 
-import type { App } from 'vue'
-import type { CreateVuelessOptions } from './types.ts'
-
-export { setTitle } from "./utilsTs/utilHelper.ts";
-export { setTheme } from "./utilsTs/utilTheme.ts";
+export { setTitle } from "./utils/utilHelper.js";
+export { setTheme } from "./utils/utilTheme.js";
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
 export { useLocale } from "./composables/useLocale.js";
@@ -25,14 +22,14 @@ export {
   setDelayedNotify,
   getDelayedNotify,
 } from "./ui.text-notify/utilNotify.js";
-/* eslint-enable prettier/prettier */
+/* eslint-enable vue/max-len, prettier/prettier */
 
-export function createVueless(options: CreateVuelessOptions = {}) {
+export function createVueless(options = {}) {
   const i18n = createLocale(options.i18n);
   const loaderOverlay = createLoaderOverlay();
   const loaderProgress = createLoaderProgress();
 
-  const install = (app: App) => {
+  const install = (app) => {
     app.provide(LocaleSymbol, i18n);
     app.provide(LoaderOverlaySymbol, loaderOverlay);
     app.provide(LoaderProgressSymbol, loaderProgress);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.478-beta.3",
+  "version": "0.0.479",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -21,7 +21,7 @@
   ],
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
-  "main": "index.ts",
+  "main": "index.js",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -31,15 +31,13 @@
     "dev": "npx @vueless/web-types && node prepare.icons && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
     "build": "npx @vueless/web-types && node prepare.icons && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
-    "ts:check": "vue-tsc --build --force",
-    "release:prepare": "node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && node prepare.package",
-    "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
+    "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
-    "lint": "eslint --no-fix src/ .storybook/",
-    "lint:fix": "eslint --fix src/ .storybook/",
-    "lint:ci": "eslint --no-fix --max-warnings=0"
+    "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/",
+    "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/",
+    "lint:ci": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore --max-warnings=0"
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.7",
@@ -51,38 +49,30 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.12.0",
     "@material-symbols/svg-500": "^0.17.4",
     "@release-it/bumper": "^6.0.1",
-    "@tsconfig/node20": "^20.1.4",
-    "@types/jsdom": "^21.1.7",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.7.7",
     "@vitejs/plugin-vue": "^5.0.5",
-    "@vitest/eslint-plugin": "^1.1.7",
-    "@vue/eslint-config-prettier": "^10.0.0",
-    "@vue/eslint-config-typescript": "^14.1.1",
-    "@vue/tsconfig": "^0.5.1",
-    "@vueless/plugin-vite": "^0.0.74",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vueless/plugin-vite": "^0.0.76",
     "@vueless/storybook": "^0.0.37",
     "@vueless/web-types": "^0.0.17",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
-    "eslint": "^9.12.0",
-    "eslint-plugin-storybook": "^0.10.0--canary.156.ce8985b.0",
-    "eslint-plugin-tailwindcss": "^3.17.5",
+    "eslint": "^8.55.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-tailwindcss": "^3.15.1",
     "eslint-plugin-vue": "^9.25.0",
-    "globals": "^15.11.0",
-    "jsdom": "^25.0.1",
     "postcss": "^8.4.38",
-    "prettier": "^3.3.3",
+    "prettier": "^3.2.5",
+    "prettier-eslint": "^16.3.0",
     "release-it": "^17.2.1",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.9",
+    "vite": "^5.2.13",
     "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-eslint": "^1.8.1",
     "vue": "^3.5.4",
-    "vue-router": "^4.3.2",
-    "vue-tsc": "^2.1.6"
+    "vue-router": "^4.3.2"
   },
   "resolutions": {
     "jackspeak": "2.3.6"

package/preset.tailwind.js

@@ -10,14 +10,9 @@ import {
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
-  DEFAULT_BRAND_COLOR,
-  DEFAULT_GRAY_COLOR,
-  GRAYSCALE_COLOR,
 } from "./constants.js";
 
 const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
-const brandColor = process.env.VUELESS_BRAND || DEFAULT_BRAND_COLOR;
-const grayColor = process.env.VUELESS_GRAY || DEFAULT_GRAY_COLOR;
 
 /**
  * Vueless Tailwind CSS `content` config.
@@ -81,9 +76,6 @@ export const vuelessTailwindConfig = {
       fontSize: {
         "2xs": ["0.625rem", "0.875rem"] /* 10px / 14px */,
       },
-      borderRadius: {
-        dynamic: "var(--vl-rounding)",
-      },
       ringWidth: {
         dynamic: "var(--vl-ring)",
       },
@@ -91,7 +83,10 @@ export const vuelessTailwindConfig = {
         dynamic: "var(--vl-ring-offset)",
       },
       ringOffsetColor: {
-        dynamic: twColorWithOpacity("--vl-ring-offset-color"),
+        dynamic: "var(--vl-ring-offset-color)",
+      },
+      borderRadius: {
+        dynamic: "var(--vl-rounding)",
       },
     },
     configViewer: {
@@ -101,8 +96,8 @@ export const vuelessTailwindConfig = {
         "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
         "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
         "var(--vl-rounding)": DEFAULT_ROUNDING,
-        ...getReplacementColors(GRAY_COLOR, grayColor),
-        ...getReplacementColors(BRAND_COLOR, brandColor),
+        ...getReplacementColors(GRAY_COLOR, GRAY_COLOR),
+        ...getReplacementColors(BRAND_COLOR, GRAY_COLOR),
       },
     },
   },
@@ -146,7 +141,7 @@ function twColorWithOpacity(variableName) {
  * @returns { Object } - TailwindCSS color object palette.
  */
 function getPalette(color) {
-  const palette = {
+  let palette = {
     DEFAULT: twColorWithOpacity(`--vl-color-${color}-default`),
   };
 
@@ -164,10 +159,6 @@ function getPalette(color) {
  * @returns { Object } - `tailwind-config-viewer` color replacement object.
  */
 function getReplacementColors(color, tailwindColor) {
-  if (tailwindColor === GRAYSCALE_COLOR || tailwindColor === COOL_COLOR) {
-    tailwindColor = GRAY_COLOR;
-  }
-
   const varsPalette = {
     [twColorWithOpacity(`--vl-color-${color}-default`)]: colors[tailwindColor][600],
   };

package/ui.button/config.js

@@ -161,16 +161,4 @@ export default /*tw*/ {
     loading: false,
     disabled: false,
   },
-  safelist: (colors) => [
-    { pattern: `border-(${colors})-600` },
-    { pattern: `border-(${colors})-700`, variants: ["hover", "focus"] },
-    { pattern: `border-(${colors})-800`, variants: ["active"] },
-    { pattern: `bg-(${colors})-600` },
-    { pattern: `bg-(${colors})-700`, variants: ["hover", "focus"] },
-    { pattern: `bg-(${colors})-800`, variants: ["active"] },
-    { pattern: `text-(${colors})-600` },
-    { pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
-    { pattern: `text-(${colors})-800`, variants: ["active"] },
-    { pattern: `ring-(${colors})-700`, variants: ["focus", "focus-within"] },
-  ],
 };

package/ui.button/storybook/stories.js

@@ -34,7 +34,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UButton, URow, UCol },
   setup() {
     return { args, options: argTypes[args.enum].options };
@@ -54,7 +54,7 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const ColorTemplate = (args, { argTypes }) => ({
+const ColorTemplate = (args, { argTypes } = {}) => ({
   components: { UButton, URow, UCol },
   setup() {
     return {

package/ui.button-link/ULink.vue

@@ -256,7 +256,7 @@ const props = defineProps({
 });
 
 const isPresentRoute = computed(() => {
-  for (const key in props.to) return true;
+  for (let key in props.to) return true;
 
   return false;
 });

package/ui.button-link/config.js

@@ -80,13 +80,4 @@ export default /*tw*/ {
     custom: false,
     replace: false,
   },
-  safelist: (colors) => [
-    { pattern: `text-(${colors})-600` },
-    { pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
-    { pattern: `text-(${colors})-800`, variants: ["active"] },
-    { pattern: `decoration-(${colors})-600` },
-    { pattern: `decoration-(${colors})-700`, variants: ["hover", "focus"] },
-    { pattern: `decoration-(${colors})-800`, variants: ["active"] },
-    { pattern: `ring-(${colors})-700`, variants: ["focus-within"] },
-  ],
 };

package/ui.button-link/storybook/stories.js

@@ -34,7 +34,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { ULink, URow },
   setup() {
     function getText(value) {

package/ui.button-toggle/storybook/stories.js

@@ -41,7 +41,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UToggle, URow },
   setup() {
     const value = ref("");

package/ui.container-divider/storybook/stories.js

@@ -29,7 +29,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDivider, URow },
   setup() {
     return {

package/ui.container-modal/storybook/stories.js

@@ -62,7 +62,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UModal, UButton, URow, UInput, UTextarea },
   setup() {
     function onClick(value) {

package/ui.container-modal-confirm/storybook/stories.js

@@ -57,7 +57,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UModalConfirm, UButton, URow },
   setup() {
     function onClick(value) {

package/ui.container-row/storybook/stories.js

@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCol, URow, UInput, UButton },
   setup() {
     const isGapEnum = argTypes[args.enum].name === "gap";

package/ui.data-list/UDataList.vue

@@ -366,20 +366,20 @@ function onClickDelete(value, label) {
 }
 
 function prepareSortData(list, parentId) {
-  const sortData = [];
+  let sortData = [];
 
   list.forEach((item) => {
-    const hasItemChildren = item?.children?.length;
+    let hasItemChildren = item?.children?.length;
 
     if (hasItemChildren) {
-      const childrenItem = prepareSortData(item.children, item[props.valueKey]);
+      let childrenItem = prepareSortData(item.children, item[props.valueKey]);
 
       childrenItem.forEach((item) => {
         sortData.push(item);
       });
     }
 
-    const parentItem = { ...item, parentId: 0 || parentId };
+    let parentItem = { ...item, parentId: 0 || parentId };
 
     sortData.push(parentItem);
   });

package/ui.data-table/UTable.vue

@@ -703,7 +703,7 @@ function onChangeSelectedRows(selectedRows) {
   if (selectedRows.length) {
     canSelectAll.value = false;
 
-    isCheckedMoreOneTableItems.value && setFooterCellWidth();
+    isCheckedMoreOneTableItems.value ? setFooterCellWidth() : "";
   } else {
     nextTick(setHeaderCellWidth);
   }

package/ui.dropdown-badge/config.js

@@ -30,5 +30,4 @@ export default /*tw*/ {
     /* icons */
     dropdownIcon: "keyboard_arrow_down",
   },
-  safelist: (colors) => [{ pattern: `ring-(${colors})-700` }],
 };

package/ui.dropdown-badge/storybook/stories.js

@@ -43,7 +43,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownBadge, URow },
   setup() {
     return {

package/ui.dropdown-button/config.js

@@ -40,5 +40,4 @@ export default /*tw*/ {
     /* icons */
     dropdownIcon: "keyboard_arrow_down",
   },
-  safelist: (colors) => [{ pattern: `ring-(${colors})-700` }],
 };

package/ui.dropdown-button/storybook/stories.js

@@ -42,7 +42,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownButton, URow },
   setup() {
     return {
@@ -63,7 +63,7 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const VariantColorsTemplate = (args, { argTypes }) => ({
+const VariantColorsTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownButton, URow, UCol },
   setup() {
     return {