vueless 0.0.603 → 0.0.605

package/composables/useUI.ts

@@ -53,11 +53,12 @@ export default function useUI<T>(
     : (STRATEGY_TYPE.merge as Strategies);
 
   const firstClassKey = Object.keys(defaultConfig || {})[0];
-  const propsConfig = props.config as ComponentConfig<T>;
   const config = ref({}) as Ref<ComponentConfig<T>>;
   const attrs = useAttrs();
 
   watchEffect(() => {
+    const propsConfig = props.config as ComponentConfig<T>;
+
     config.value = getMergedConfig({
       defaultConfig,
       globalConfig,
@@ -93,6 +94,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 +121,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 : {}),
@@ -137,34 +140,25 @@ export default function useUI<T>(
     /* Delete value key to prevent v-model overwrite. */
     delete commonAttrs.value;
 
-    watch(config, updateVuelessAttrs, { immediate: true });
-    watch(props, updateVuelessAttrs);
-
-    if (classes?.value) {
-      watch(classes, updateVuelessAttrs);
-    }
+    watch([config, props, classes], updateVuelessAttrs, { immediate: true });
 
+    /**
+     * 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 +166,54 @@ 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) => {
+          if (key === configKey) return;
+
+          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 propsConfig = props.config as ComponentConfig<T>;
+      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 +248,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 +277,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.605",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button/UButton.vue

@@ -119,9 +119,9 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
       <slot name="right" :icon-name="rightIcon">
         <UIcon
           v-if="rightIcon"
-          internal
-          color="inherit"
           :name="rightIcon"
+          color="inherit"
+          internal
           v-bind="rightIconAttrs"
         />
       </slot>

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-badge/UDropdownBadge.vue

@@ -102,7 +102,7 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
         <slot :label="label" :opened="isShownOptions" />
       </template>
 
-      <template #right="{ iconColor }">
+      <template #right="{ iconSize }">
         <!--
           @slot Use it to add something after the label.
           @binding {boolean} opened
@@ -111,8 +111,8 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
           <UIcon
             v-if="!noIcon"
             internal
-            :color="iconColor"
-            :size="size"
+            color="inherit"
+            :size="iconSize"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"

package/ui.dropdown-button/config.ts

@@ -1,11 +1,10 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownButton: {
-    base: "{UButton}",
+    base: "{UButton} transition",
     variants: {
       opened: {
         true: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
-        false: "reactive-fix", // todo: remove it later
       },
     },
     compoundVariants: [{ opened: true, color: ["grayscale", "white"], class: "ring-gray-700/15" }],

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

@@ -63,7 +63,9 @@ const userFormatDate = ref("");
 const formattedDate = ref("");
 const customView = ref(View.Day);
 
-const datepickerInputRef = useTemplateRef<typeof UInput>("input");
+type UInputRef = InstanceType<typeof UInput>;
+
+const datepickerInputRef = useTemplateRef<UInputRef>("input");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const calendarRef = useTemplateRef<ComponentExposed<typeof UCalendar>>("calendar");
 
@@ -82,7 +84,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] }));
@@ -258,6 +260,7 @@ const mutatedProps = computed(() => ({
 const {
   config,
   wrapperAttrs,
+  rightIconAttrs,
   datepickerInputAttrs,
   datepickerInputActiveAttrs,
   datepickerCalendarAttrs,
@@ -268,7 +271,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>
@@ -318,7 +321,7 @@ watchEffect(() => {
           @binding {string} icon-size
         -->
         <slot name="right-icon" :icon-name="iconName" :icon-size="iconSize">
-          <UIcon :name="iconName" :size="iconSize" color="gray" />
+          <UIcon :name="iconName" :size="iconSize" color="gray" v-bind="rightIconAttrs" />
         </slot>
       </template>
 

package/ui.form-date-picker/config.ts

@@ -12,6 +12,7 @@ export default /*tw*/ {
       },
     },
   },
+  rightIcon: "{UIcon}",
   datepickerCalendar: {
     base: "{UCalendar} absolute mb-3 z-40",
     variants: {

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

@@ -543,6 +543,7 @@ const mutatedProps = computed(() => ({
 const {
   config,
   wrapperAttrs,
+  rightIconAttrs,
   datepickerCalendarAttrs,
   datepickerInputAttrs,
   menuAttrs,
@@ -551,7 +552,7 @@ const {
   shiftRangeButtonAttrs,
   rangeInputWrapperAttrs,
   rangeInputErrorAttrs,
-  datepickerActiveInputAttrs,
+  datepickerInputActiveAttrs,
   rangeInputFirstAttrs,
   rangeInputLastAttrs,
   periodRowAttrs,
@@ -573,7 +574,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>
@@ -595,8 +596,9 @@ watchEffect(() => {
       readonly
       :left-icon="leftIcon"
       :right-icon="rightIcon || config.defaults.calendarIcon"
-      v-bind="isShownMenu ? datepickerActiveInputAttrs : datepickerInputAttrs"
+      v-bind="isShownMenu ? datepickerInputActiveAttrs : datepickerInputAttrs"
       @focus="activate"
+      @keydown.esc="deactivate"
     >
       <template #left>
         <!-- @slot Use it to add something before the date. -->
@@ -608,14 +610,14 @@ watchEffect(() => {
         <slot name="left-icon" />
       </template>
 
-      <template #right-icon>
+      <template #right-icon="{ iconName, iconSize }">
         <!--
           @slot Use it add an icon after the date.
           @binding {string} icon-name
           @binding {string} icon-size
         -->
-        <slot name="right-icon" :icon-name="rightIcon" :icon-size="size">
-          <UIcon :name="rightIcon" :size="size" color="gray" />
+        <slot name="right-icon" :icon-name="iconName" :icon-size="size">
+          <UIcon :name="iconName" :size="iconSize" color="gray" v-bind="rightIconAttrs" />
         </slot>
       </template>
 

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

@@ -12,6 +12,7 @@ export default /*tw*/ {
       },
     },
   },
+  rightIcon: "{UIcon}",
   buttonWrapper: {
     base: `
       flex rounded-dynamic max-md:justify-between
@@ -211,7 +212,6 @@ export default /*tw*/ {
     labelAlign: "topInside",
     openDirectionX: "auto",
     openDirectionY: "auto",
-    timepicker: false,
     disabled: false,
     dateFormat: undefined,
     maxDate: undefined,

package/ui.form-date-picker-range/storybook/stories.ts

@@ -31,6 +31,7 @@ export default {
   title: "Form Inputs & Controls / Date Picker Range",
   component: UDatePickerRange,
   args: {
+    label: "Datepicker range",
     modelValue: {
       from: new Date(2022, 1, 14),
       to: new Date(2022, 2, 20),
@@ -41,15 +42,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UDatePickerRangeName),
       story: {
         height: "620px",
       },
     },
-    parameters: {
-      docs: {
-        ...getDocsDescription(UDatePickerRangeName),
-      },
-    },
   },
 } as Meta;
 

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

@@ -124,11 +124,6 @@ export interface UDatePickerRangeProps<TModelValue> {
    */
   dateFormat?: string;
 
-  /**
-   * Same as date format, but used when timepicker is enabled.
-   */
-  dateTimeFormat?: string;
-
   /**
    * User-friendly date format (it will be shown in UI).
    */

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.605",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3282,15 +3282,6 @@
                 "type": "string"
               }
             },
-            {
-              "name": "dateTimeFormat",
-              "required": false,
-              "description": "Same as date format, but used when timepicker is enabled.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
             {
               "name": "userDateFormat",
               "required": false,
@@ -7858,6 +7849,15 @@
                 "kind": "expression",
                 "type": "ComponentConfig"
               }
+            },
+            {
+              "name": "dataTest",
+              "required": false,
+              "description": "Data-test attribute for automated testing.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
             }
           ],
           "source": {