vueless 0.0.603 → 0.0.604

package/composables/useUI.ts

@@ -93,6 +93,8 @@ export default function useUI<T>(
         classes = cx([classes, attrs.class]);
       }
 
+      classes = classes.replaceAll(EXTENDS_PATTERN_REG_EXP, "");
+
       return color ? setColor(classes, color) : classes;
     });
   }
@@ -118,12 +120,12 @@ export default function useUI<T>(
    * Get an element attributes for a given key.
    */
   function getAttrs(configKey: string, classes: ComputedRef<string>) {
-    const nestedComponent = getNestedComponent(config.value[configKey] || "");
+    const vuelessAttrs = ref({});
 
     const attrs = useAttrs() as KeyAttrs;
     const isDev = isCSR && import.meta.env?.DEV;
-    const vuelessAttrs = ref({});
     const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
+    const nestedComponent = getNestedComponent(config.value[configKey] || "");
 
     const commonAttrs: KeyAttrs = {
       ...(isTopLevelKey ? attrs : {}),
@@ -139,32 +141,25 @@ export default function useUI<T>(
 
     watch(config, updateVuelessAttrs, { immediate: true });
     watch(props, updateVuelessAttrs);
+    watch(classes, updateVuelessAttrs);
 
-    if (classes?.value) {
-      watch(classes, updateVuelessAttrs);
-    }
-
+    /**
+     * Updating Vueless attributes.
+     */
     function updateVuelessAttrs() {
       let configAttr: NestedComponent = {};
-      let extendsConfigAttr: NestedComponent = {};
-      let extendsClasses: string[] = [];
-
-      const baseClasses = getBaseClasses(config.value[configKey]);
-      const extendsKeys = getExtendsKeys(baseClasses);
 
       if (typeof config.value[configKey] === "object") {
         configAttr = config.value[configKey] as NestedComponent;
       }
 
-      if (extendsKeys.length) {
-        extendsClasses = extendsKeys.map((key) => toValue(getClasses(key, mutatedProps)));
-        extendsConfigAttr = getExtendsConfig(extendsKeys);
-      }
+      const extendsClasses = getExtendsClasses(configKey);
+      const extendsConfigAttr = getExtendsConfigAttr(configKey);
 
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: cx([...extendsClasses, toValue(classes).replaceAll(EXTENDS_PATTERN_REG_EXP, "")]),
-        config: merge(configAttr, extendsConfigAttr),
+        class: cx([...extendsClasses, toValue(classes)]),
+        config: merge({}, configAttr, extendsConfigAttr),
         ...getDefaults({
           ...(configAttr.defaults || {}),
           ...(extendsConfigAttr.defaults || {}),
@@ -172,21 +167,51 @@ export default function useUI<T>(
       };
     }
 
+    /**
+     * Recursively get extends classes.
+     */
+    function getExtendsClasses(configKey: string) {
+      let extendsClasses: string[] = [];
+
+      const extendsKeys = getExtendsKeys(config.value[configKey]);
+
+      if (extendsKeys.length) {
+        extendsKeys.forEach((key) => {
+          extendsClasses = [
+            ...extendsClasses,
+            ...getExtendsClasses(key),
+            toValue(getClasses(key, mutatedProps)),
+          ];
+        });
+      }
+
+      return extendsClasses;
+    }
+
     /**
      * Merge extends nested component configs.
      * TODO: Add ability to merge multiple keys in one (now works for merging only 1 first key).
      */
-    function getExtendsConfig(extendsKeys: string[]) {
-      const [firstKey] = extendsKeys;
-
-      return getMergedConfig({
-        defaultConfig: config.value[firstKey],
-        globalConfig: globalConfig[firstKey],
-        propsConfig: propsConfig[firstKey],
-      }) as NestedComponent;
+    function getExtendsConfigAttr(configKey: string) {
+      let extendsConfigAttr: NestedComponent = {};
+
+      const extendsKeys = getExtendsKeys(config.value[configKey]);
+
+      if (extendsKeys.length) {
+        const [firstKey] = extendsKeys;
+
+        extendsConfigAttr = getMergedConfig({
+          defaultConfig: config.value[firstKey],
+          globalConfig: globalConfig[firstKey],
+          propsConfig: propsConfig[firstKey],
+        }) as NestedComponent;
+      }
+
+      return extendsConfigAttr;
     }
 
     /**
+     * Get component prop default value.
      * Conditionally set props default value for nested components based on parent component prop value.
      * For example, set icon size for the nested component based on the size of the parent component.
      * Use an object where key = parent component prop value, value = nested component prop value.
@@ -221,7 +246,8 @@ function getBaseClasses(value: string | CVA | undefined) {
  * Retrieves extends keys from patterns:
  * Example: `{>someKey} {>someOtherKey}` >>> `["someKey", "someOtherKey"]`.
  */
-function getExtendsKeys(values: string = ""): string[] {
+function getExtendsKeys(configItemValue?: CVA | string): string[] {
+  const values = getBaseClasses(configItemValue);
   const matches = values.match(EXTENDS_PATTERN_REG_EXP);
 
   return matches ? matches?.map((pattern) => pattern.slice(2, -1)) : [];
@@ -249,7 +275,11 @@ function isSystemKey(key: string): boolean {
 /**
  * Check is config contains default CVA keys.
  */
-function isCVA(config: UnknownObject): boolean {
+function isCVA(config?: UnknownObject | string): boolean {
+  if (typeof config !== "object") {
+    return false;
+  }
+
   return Object.values(CVA_CONFIG_KEY).some((value) =>
     Object.keys(config).some((key) => key === value),
   );

package/directives/tooltip/vTooltip.ts

@@ -24,7 +24,6 @@ if (isCSR) {
     animation: "shift-away",
   };
 
-  settings = merge(defaultSettings, {});
   settings = merge(defaultSettings, vuelessConfig.directive?.tooltip || {}) as DefaultProps;
   tippy.setDefaultProps(settings);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.603",
+  "version": "0.0.604",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.container-modal-confirm/UModalConfirm.vue

@@ -49,7 +49,9 @@ const isShownModal = computed({
 });
 
 const i18nGlobal = tm(UModalConfirm);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props?.config?.i18n));
+const currentLocale = computed(() =>
+  merge({}, defaultConfig.i18n, i18nGlobal, props?.config?.i18n),
+);
 
 function closeModal() {
   isShownModal.value = false;

package/ui.data-list/UDataList.vue

@@ -48,7 +48,7 @@ const emit = defineEmits([
 const { tm } = useLocale();
 
 const i18nGlobal = tm(UDataListName);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const iconSize = computed(() => {
   const sizes = {

package/ui.data-table/UTable.vue

@@ -96,7 +96,7 @@ const stickyActionHeaderRowRef = useTemplateRef<HTMLDivElement>("sticky-action-h
 const actionHeaderRowRef = useTemplateRef<HTMLDivElement>("action-header-row");
 
 const i18nGlobal = tm(UTable);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const sortedRows: ComputedRef<Row[]> = computed(() => {
   const headerKeys = props.columns.map((column) =>

package/ui.data-table/config.ts

@@ -40,14 +40,7 @@ export default /*tw*/ {
   },
   headerCellCheckbox: "{>headerCellBase} w-10 pr-2",
   headerCheckbox: "{UCheckbox}",
-  headerCounter: {
-    base: "{>headerCounterBase} absolute top-4 mt-px left-11 ml-px",
-    variants: {
-      compact: {
-        true: "top-3",
-      },
-    },
-  },
+  headerCounter: "{>stickyHeaderCounter} mt-px ml-px",
   headerLoader: "{ULoaderProgress} absolute !top-auto",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
@@ -108,7 +101,6 @@ export default /*tw*/ {
   },
   defaults: {
     emptyCellLabel: "—",
-    nesting: false,
     compact: false,
     selectable: false,
     dateDivider: false,

package/ui.data-table/storybook/stories.ts

@@ -39,12 +39,12 @@ export default {
   argTypes: {
     ...getArgTypes(UTable.__name),
     row: {
-      description:
-        "The row of the table. It's not a prop (it created for ease of work with storybook).",
+      table: {
+        disable: true,
+      },
     },
     numberOfRows: {
-      description:
-        "The number of table rows. It's not a prop (it created for ease of work with storybook).",
+      description: "The number of table rows (not a component prop).",
     },
   },
   args: {

package/ui.data-table/types.ts

@@ -5,16 +5,7 @@ import type { ComponentConfig, UnknownObject } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-type RowKeys =
-  | number
-  | string
-  | boolean
-  | undefined
-  | Date
-  | Row
-  | Row[]
-  | string
-  | ((row: Row) => string);
+type RowKeys = number | string | boolean | undefined | Date | Row | Row[] | ((row: Row) => string);
 
 export interface CellObject {
   contentClasses?: string | ((value: unknown | string, row: Row) => string);

package/ui.dropdown-list/UDropdownList.vue

@@ -54,7 +54,7 @@ const elementId = props.id || useId();
 const { tm } = useLocale();
 
 const i18nGlobal = tm(UDropdownList);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";

package/ui.form-calendar/UCalendar.vue

@@ -129,7 +129,7 @@ const isCurrentView = computed(() => ({
 const i18nGlobal = tm<DefaultLocale>(UCalendar);
 
 const currentLocale: ComputedRef<Locale> = computed(() =>
-  merge(defaultConfig.i18n, i18nGlobal, props.config?.i18n),
+  merge({}, defaultConfig.i18n, i18nGlobal, props.config?.i18n),
 );
 
 const locale = computed(() => {

package/ui.form-date-picker/UDatePicker.vue

@@ -82,7 +82,7 @@ const localValue = computed({
 });
 
 const currentLocale: ComputedRef<Locale> = computed(() =>
-  merge(defaultConfig.i18n, i18nGlobal, props.config.i18n),
+  merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n),
 );
 
 const clickOutsideOptions = computed(() => ({ ignore: [datepickerInputRef.value?.inputRef] }));
@@ -268,7 +268,7 @@ watchEffect(() => {
   const calendarConfig = datepickerCalendarAttrs.value.config as unknown as UCalendarConfig;
 
   if (!calendarConfig?.i18n || props.config?.i18n) {
-    calendarConfig.i18n = merge(calendarConfig.i18n, config.value.i18n);
+    calendarConfig.i18n = merge({}, calendarConfig.i18n, config.value.i18n);
   }
 });
 </script>

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -573,7 +573,7 @@ watchEffect(() => {
   const calendarConfig = datepickerCalendarAttrs.value.config as unknown as UCalendarConfig;
 
   if (!calendarConfig.i18n || props.config?.i18n) {
-    calendarConfig.i18n = merge(calendarConfig.i18n, config.value.i18n);
+    calendarConfig.i18n = merge({}, calendarConfig.i18n, config.value.i18n);
   }
 });
 </script>

package/ui.form-date-picker-range/useLocale.ts

@@ -15,7 +15,9 @@ export function useLocale(props: UDatePickerRangeProps<unknown>) {
 
   const i18nGlobal = tm<Locale>(UDatePickerRange);
 
-  const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config?.i18n));
+  const currentLocale = computed(() =>
+    merge({}, defaultConfig.i18n, i18nGlobal, props.config?.i18n),
+  );
 
   const locale = computed(() => {
     const { months, weekdays } = currentLocale.value;

package/ui.form-input-file/UInputFile.vue

@@ -50,7 +50,7 @@ const fileInputRef = ref<HTMLInputElement | null>(null);
 const elementId = props.id || useId();
 
 const i18nGlobal = tm(UInputFile);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const currentFiles = computed<File | File[] | null>({
   get: () => props.modelValue,

package/ui.form-select/USelect.vue

@@ -97,7 +97,7 @@ const innerWrapperRef = ref<HTMLDivElement | null>(null);
 const elementId = props.id || useId();
 
 const i18nGlobal = tm(USelect);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const isTop = computed(() => {
   if (props.openDirection === DIRECTION.top) return true;

package/ui.form-switch/USwitch.vue

@@ -33,7 +33,7 @@ const emit = defineEmits([
 const { tm } = useLocale();
 
 const i18nGlobal = tm(USwitch);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config?.i18n));
+const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config?.i18n));
 
 const checkedValue = computed({
   get: () => props.modelValue,

package/ui.loader-progress/ULoaderProgress.vue

@@ -213,6 +213,6 @@ const { stripeAttrs } = useUI<Config>(defaultConfig);
 
 <template>
   <Transition :css="false" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
-    <div v-if="show" v-bind="stripeAttrs" :style="barStyle" />
+    <div v-if="show" v-bind="stripeAttrs" :data-test="dataTest" :style="barStyle" />
   </Transition>
 </template>

package/ui.loader-progress/types.ts

@@ -49,4 +49,9 @@ export interface Props {
    * Component config object.
    */
   config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
 }

package/ui.text-money/config.ts

@@ -59,7 +59,6 @@ export default /*tw*/ {
     decimalSeparator: ",",
     thousandsSeparator: " ",
     planned: false,
-    integer: false,
     symbolDivided: true,
   },
 };

package/ui.text-notify/UNotify.vue

@@ -27,7 +27,7 @@ const notifyPositionStyles = ref({});
 const notificationsWrapperRef = ref<NotificationsWrapperRef | null>(null);
 
 const i18nGlobal = tm(UNotify);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 onMounted(() => {
   window.addEventListener("resize", setPosition, { passive: true });

package/utils/node/loaderIcon.js

@@ -311,5 +311,5 @@ async function getDefaults() {
   const defaultConfigPath = path.join(cwd, defaultIconsDir, COMPONENTS[U_ICON], "config.ts");
   const uIconDefaultConfig = await getComponentDefaultConfig(U_ICON, defaultConfigPath);
 
-  return merge(uIconDefaultConfig?.defaults, vuelessConfig?.component?.[U_ICON]?.defaults);
+  return merge({}, uIconDefaultConfig?.defaults, vuelessConfig?.component?.[U_ICON]?.defaults);
 }

package/utils/ui.ts

@@ -1,7 +1,7 @@
 import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { extendTailwindMerge } from "tailwind-merge";
-import { cloneDeep, isCSR, isSSR } from "./helper.ts";
+import { isCSR, isSSR } from "./helper.ts";
 import { createGetMergedConfig } from "./node/mergeConfigs.js";
 import { UIcon } from "../ui.image-icon/constants.ts";
 import {
@@ -99,10 +99,10 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
  * Return default values for component props, icons, etc..
  */
 export function getDefaults<Props, Config>(defaultConfig: Config, name: ComponentNames) {
-  const componentDefaults = cloneDeep((defaultConfig as UnknownObject).defaults) || {};
-  const globalDefaults = cloneDeep(vuelessConfig.component?.[name]?.defaults) || {};
+  const componentDefaults = (defaultConfig as UnknownObject).defaults || {};
+  const globalDefaults = vuelessConfig.component?.[name]?.defaults || {};
 
-  const defaults = merge(componentDefaults, globalDefaults) as Props & Defaults;
+  const defaults = merge({}, componentDefaults, globalDefaults) as Props & Defaults;
 
   if (defaults.color) {
     defaults.color = getColor(defaults.color as BrandColors);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.603",
+  "version": "0.0.604",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -7858,6 +7858,15 @@
                 "kind": "expression",
                 "type": "ComponentConfig"
               }
+            },
+            {
+              "name": "dataTest",
+              "required": false,
+              "description": "Data-test attribute for automated testing.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
             }
           ],
           "source": {