vueless 0.0.602 → 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.602",
+  "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)";
@@ -151,7 +151,7 @@ function optionHighlight(index: number, option: Option) {
   return classes;
 }
 
-function addPointerElement(keyCode: string) {
+function addPointerElement(keyCode?: string) {
   if (props.options.length > 0) {
     select(props.options[pointer.value], keyCode);
     onClickOption(props.options[pointer.value]);

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-checkbox/UCheckbox.vue

@@ -142,6 +142,7 @@ const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIcon
     :align="labelAlign"
     :disabled="disabled"
     :description="description"
+    interactive
     v-bind="checkboxLabelAttrs"
     :data-test="`${dataTest}-label`"
   >

package/ui.form-checkbox/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       border rounded bg-white cursor-pointer transition checked:text-{color}-600
       border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
-      disabled:border-gray-300 disabled:bg-gray-100
+      disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
     `,
     variants: {
       size: {

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/UInput.vue

@@ -273,6 +273,7 @@ const {
     :size="size"
     :align="labelAlign"
     centred
+    interactive
     v-bind="inputLabelAttrs"
   >
     <label :for="elementId" v-bind="wrapperAttrs">

package/ui.form-input/config.ts

@@ -15,7 +15,10 @@ export default /*tw*/ {
         `,
       },
       disabled: {
-        true: "focus-within:ring-0 focus-within:ring-offset-0 pointer-events-none",
+        true: `
+          focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100 
+          hover:border-gray-300 focus-within:border-gray-300 hover:focus-within:border-gray-300
+        `,
       },
     },
   },
@@ -26,10 +29,10 @@ export default /*tw*/ {
   passwordIcon: "{UIcon}",
   input: {
     base: `
-      block w-full py-2 px-3 font-normal !leading-none text-gray-900 bg-white
+      block w-full py-2 px-3 font-normal !leading-none text-gray-900 bg-transparent
       border-none rounded-dynamic transition focus:ring-0
       placeholder:font-normal placeholder-gray-400
-      disabled:text-gray-700 disabled:bg-gray-100
+      disabled:text-gray-700 disabled:cursor-not-allowed
     `,
     variants: {
       size: {

package/ui.form-input/storybook/stories.ts

@@ -127,6 +127,7 @@ RightIconSlot.args = {
   slotTemplate: `
     <template #right-icon>
       <UIcon
+        interactive
         name="star"
         color="green"
       />

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,
@@ -281,6 +281,7 @@ const {
     :align="labelAlign"
     :disabled="disabled"
     :description="description"
+    interactive
     v-bind="inputLabelAttrs"
   >
     <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneAttrs">

package/ui.form-label/config.ts

@@ -24,14 +24,7 @@ export default /*tw*/ {
       { align: "right", centred: true, class: "items-center justify-start w-auto" },
     ],
   },
-  content: {
-    base: "flex",
-    variants: {
-      disabled: {
-        true: "pointer-events-none",
-      },
-    },
-  },
+  content: "flex",
   label: {
     base: "text-gray-900 z-10 block !leading-none w-max",
     variants: {
@@ -51,10 +44,11 @@ export default /*tw*/ {
         true: "text-red-500",
       },
       disabled: {
-        true: "text-gray-500 pointer-events-none",
+        true: "text-gray-500 cursor-not-allowed",
       },
     },
     compoundVariants: [
+      { interactive: true, disabled: false, class: "hover:cursor-pointer" },
       { align: "topInside", size: "sm", class: "top-2 text-2xs" },
       { align: "topInside", size: "md", class: "top-2.5 text-xs" },
       { align: "topInside", size: "lg", class: "top-2.5 text-sm" },
@@ -101,5 +95,6 @@ export default /*tw*/ {
     size: "md",
     centred: false,
     disabled: false,
+    interactive: false,
   },
 };

package/ui.form-label/types.ts

@@ -25,6 +25,11 @@ export interface Props {
    */
   error?: string;
 
+  /**
+   * Make the label interactive (cursor pointer on hover).
+   */
+  interactive?: boolean;
+
   /**
    * Label align.
    */

package/ui.form-radio/URadio.vue

@@ -103,6 +103,7 @@ const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProp
     :align="labelAlign"
     :disabled="disabled"
     :description="description"
+    interactive
     v-bind="radioLabelAttrs"
     :data-test="`${dataTest}-label`"
   >

package/ui.form-radio/config.ts

@@ -6,7 +6,7 @@ export default /*tw*/ {
       border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
       disabled:border-gray-300 disabled:text-gray-100
-      checked:disabled:border-gray-400 checked:disabled:text-gray-400
+      checked:disabled:border-gray-400 checked:disabled:text-gray-400 disabled:cursor-not-allowed
     `,
     variants: {
       size: {

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;
@@ -465,6 +465,7 @@ const {
     :align="labelAlign"
     :disabled="disabled"
     centred
+    interactive
     v-bind="selectLabelAttrs"
     :data-test="dataTest"
     :tabindex="-1"
@@ -479,7 +480,7 @@ const {
       @blur="deactivate"
       @keydown.self.down.prevent="dropdownListRef?.pointerForward"
       @keydown.self.up.prevent="dropdownListRef?.pointerBackward"
-      @keydown.enter.tab.stop.self="dropdownListRef?.addPointerElement"
+      @keydown.enter.tab.stop.self="dropdownListRef?.addPointerElement()"
       @keyup.esc="deactivate"
     >
       <!-- @slot Use it to add something right. -->
@@ -677,7 +678,7 @@ const {
             @keyup.esc="deactivate"
             @keydown.down.prevent="dropdownListRef?.pointerForward"
             @keydown.up.prevent="dropdownListRef?.pointerBackward"
-            @keydown.enter.prevent.stop.self="dropdownListRef?.addPointerElement"
+            @keydown.enter.prevent.stop.self="dropdownListRef?.addPointerElement()"
           />
         </div>
 

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,
@@ -105,6 +105,7 @@ const {
     :description="description"
     :align="labelAlign"
     :disabled="disabled"
+    interactive
     v-bind="switchLabelAttrs"
     :data-test="dataTest"
     @click="onClickToggle"

package/ui.form-textarea/UTextarea.vue

@@ -200,6 +200,7 @@ const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs,
     :size="size"
     :disabled="disabled"
     :align="labelAlign"
+    interactive
     v-bind="textareaLabelAttrs"
     :data-test="dataTest"
   >

package/ui.form-textarea/config.ts

@@ -18,7 +18,10 @@ export default /*tw*/ {
         `,
       },
       disabled: {
-        true: "focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100 pointer-events-none",
+        true: `
+            focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100 
+            hover:border-gray-300 focus-within:border-gray-300 hover:focus-within:border-gray-300
+          `,
       },
     },
     compoundVariants: [
@@ -31,7 +34,7 @@ export default /*tw*/ {
     base: `
       p-0 block w-full bg-transparent border-none !leading-none font-normal text-gray-900
       placeholder:text-gray-400 placeholder:font-normal placeholder:leading-none
-      focus:border-none focus:outline-none focus:ring-0
+      focus:border-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed
     `,
     variants: {
       size: {

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.602",
+  "version": "0.0.604",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -7178,6 +7178,16 @@
                 "type": "string"
               }
             },
+            {
+              "name": "interactive",
+              "required": false,
+              "description": "Make the label interactive (cursor pointer on hover).",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "align",
               "required": false,
@@ -7848,6 +7858,15 @@
                 "kind": "expression",
                 "type": "ComponentConfig"
               }
+            },
+            {
+              "name": "dataTest",
+              "required": false,
+              "description": "Data-test attribute for automated testing.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
             }
           ],
           "source": {