vueless 0.0.564 → 0.0.566

package/composables/useUI.ts

@@ -124,12 +124,9 @@ export default function useUI<T>(
       keysAttrs[`${key}Attrs`] = getAttrs(key, getClasses(key, mutatedProps));
 
       const baseClasses = getBaseClasses(config.value[key]);
-      const extendsMatches = baseClasses.match(EXTENDS_PATTERN_REG_EXP);
+      const extendsKeys = getExtendsKeys(baseClasses);
 
-      if (extendsMatches) {
-        // retrieves extends keys from patterns:
-        // Example: `{>someKey} {>someOtherKey}` >>> `["someKey", "someOtherKey"]`.
-        const extendsKeys = extendsMatches.map((pattern) => pattern.slice(2, -1));
+      if (extendsKeys.length) {
         const classes = getExtendingKeysClasses(extendsKeys, mutatedProps);
         const extendsClasses = Object.values(classes).map((item) => toValue(item));
 
@@ -141,6 +138,10 @@ export default function useUI<T>(
             ...extendsClasses,
             keyAttrs.value.class?.replaceAll(EXTENDS_PATTERN_REG_EXP, ""),
           ]),
+          config: getMergedConfig({
+            defaultConfig: config.value[extendsKeys[0]],
+            globalConfig: keyAttrs.value.config as Component,
+          }),
         }));
       }
     }
@@ -204,15 +205,21 @@ function getBaseClasses(value: string | CVA | NestedComponent) {
 }
 
 /**
- * Check is config key contains component name and if contains return it.
+ * Retrieves extends keys from patterns:
+ * Example: `{>someKey} {>someOtherKey}` >>> `["someKey", "someOtherKey"]`.
+ */
+function getExtendsKeys(values: string = ""): string[] {
+  const matches = values.match(EXTENDS_PATTERN_REG_EXP);
+
+  return matches ? matches?.map((pattern) => pattern.slice(2, -1)) : [];
+}
+
+/**
+ * Check is config key contains component name and returns it.
  */
 function getNestedComponent(value: string | NestedComponent | CVA) {
   const classes = getBaseClasses(value);
-  const component = (value as NestedComponent)?.component as ComponentNames;
-
-  const match =
-    classes.match(NESTED_COMPONENT_PATTERN_REG_EXP) ||
-    component?.match(NESTED_COMPONENT_PATTERN_REG_EXP);
+  const match = classes.match(NESTED_COMPONENT_PATTERN_REG_EXP);
 
   return match ? match[1] : "";
 }

package/constants.js

@@ -67,7 +67,6 @@ export const SYSTEM_CONFIG_KEY = {
   defaults: "defaults",
   strategy: "strategy",
   safelist: "safelist",
-  component: "component",
   transition: "transition",
   safelistColors: "safelistColors",
   ...CVA_CONFIG_KEY,

package/package.json

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

package/ui.button-toggle/config.ts

@@ -1,7 +1,6 @@
 export default /*tw*/ {
   toggleLabel: {
-    component: "{ULabel}",
-    base: "flex flex-wrap",
+    base: "{ULabel} flex flex-wrap",
     variants: {
       block: {
         true: "w-full",

package/ui.button-toggle-item/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   toggleButton: {
-    component: "{UButton}",
     base: `
+      {UButton}
       border-gray-300 font-normal
       hover:text-brand-600 hover:border-brand-600 hover:relative hover:z-10
       focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-700/15

package/ui.container-group/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "w-full",
   upperline: "{UDivider}",
   underline: {
-    component: "{UDivider}",
+    base: "{UDivider}",
     variants: {
       underlined: {
         true: "pt-1.5",

package/ui.data-list/UDataList.vue

@@ -153,7 +153,7 @@
                 @binding {boolean} active
               -->
               <slot name="label" :item="item" :active="active">
-                <div v-bind="active ? labelCrossedAttrs : labelAttrs" v-text="item[labelKey]" />
+                <div v-bind="active ? labelAttrs : labelCrossedAttrs" v-text="item[labelKey]" />
               </slot>
             </template>
 

package/ui.data-table/config.ts

@@ -71,12 +71,12 @@ export default /*tw*/ {
   bodyCellNested: "mr-2 flex gap-0.5",
   bodyCellNestedExpandIconWrapper: "",
   bodyCellNestedExpandIcon: {
-    component: "{UIcon}",
+    base: "{UIcon}",
     wrapper: "rounded-sm",
     container: "bg-gray-200",
   },
   bodyCellNestedCollapseIcon: {
-    component: "{UIcon}",
+    base: "{UIcon}",
     wrapper: "rounded-sm",
     container: "bg-gray-200",
   },

package/ui.dropdown-badge/config.ts

@@ -1,8 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownBadge: {
-    component: "{UBadge}",
-    base: "transition",
+    base: "{UBadge} transition",
     variants: {
       opened: {
         true: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
@@ -12,8 +11,7 @@ export default /*tw*/ {
   },
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
-    component: "{UDropdownList}",
-    base: "w-fit",
+    base: "{UDropdownList} w-fit",
     variants: {
       yPosition: {
         top: "bottom-6 mb-6",

package/ui.dropdown-button/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownButton: {
-    component: "{UButton}",
+    base: "{UButton}",
     variants: {
       opened: {
         true: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",

package/ui.form-color-picker/config.js

@@ -13,11 +13,11 @@ export default /*tw*/ {
   unselected: "relative flex",
   unselectedIcon: "{UIcon} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
   unselectedColorPickerRadio: {
-    component: "{URadio}",
+    base: "{URadio}",
     radio: "checked:text-white !border-gray-300",
   },
   colorPickerRadio: {
-    component: "{URadio}",
+    base: "{URadio}",
     radio: `
       bg-{color}-600 border-{color}-600 hover:border-{color}-600 active:bg-{color}-800
       disabled:border-{color}-400 disabled:bg-{color}-400

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

@@ -2,12 +2,18 @@ export default /*tw*/ {
   wrapper: "relative",
   datepickerInput: "{UInput}",
   datepickerInputActive: {
-    component: "{UInput}",
-    wrapper: "ring-dynamic rounded-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+    base: "{UInput} {>datepickerInput}",
+    wrapper: {
+      base: "ring-dynamic rounded-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+      variants: {
+        error: {
+          true: "ring-red-700/15",
+        },
+      },
+    },
   },
   calendar: {
-    component: "{UCalendar}",
-    base: "absolute mb-3 z-40",
+    base: "{UCalendar} absolute mb-3 z-40",
     variants: {
       openDirectionX: {
         left: "left-0 right-auto",

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

@@ -2,12 +2,12 @@ export default /*tw*/ {
   wrapper: "relative",
   datepickerInput: "{UInput}",
   datepickerInputActive: {
-    component: "{UInput}",
+    base: "{UInput} {>datepickerInput}",
     wrapper: {
       base: "ring-dynamic rounded-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
       variants: {
         error: {
-          true: "ring-red-500/15",
+          true: "ring-red-700/15",
         },
       },
     },
@@ -23,10 +23,7 @@ export default /*tw*/ {
       },
     },
   },
-  button: {
-    component: "{UButton}",
-    base: "shrink-0 grow rounded-none",
-  },
+  button: "{UButton} shrink-0 grow rounded-none",
   shiftRangeButton: `
     first:rounded-dynamic first:rounded-r-none
     last:rounded-dynamic last:rounded-l-none
@@ -87,9 +84,9 @@ export default /*tw*/ {
   customRangeDescription: "",
   rangeInputWrapper: "flex mt-4 -space-x-px group/range-input-wrapper",
   rangeInputFirst: {
-    component: "{UInput}",
+    base: "{UInput}",
     inputLabel: {
-      component: "{ULabel}",
+      base: "{ULabel}",
       wrapper: "w-full hover:z-10 focus:z-10 !rounded-none",
       description: "hidden",
     },
@@ -100,9 +97,9 @@ export default /*tw*/ {
     `,
   },
   rangeInputLast: {
-    component: "{UInput}",
+    base: "{UInput}",
     inputLabel: {
-      component: "{ULabel}",
+      base: "{ULabel}",
       wrapper: "w-full hover:z-10 focus:z-10",
       description: "hidden",
     },
@@ -114,7 +111,7 @@ export default /*tw*/ {
   },
   rangeInputError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {
-    component: "{UCalendar}",
+    base: "{UCalendar}",
     wrapper: "p-0 pt-2 w-full border-none shadow-none rounded-none",
     navigation: "pb-0 mb-0 border-none",
     day: "w-full",

package/ui.form-input-file/config.js

@@ -52,7 +52,7 @@ export default /*tw*/ {
   fileList: "{UFiles} w-full",
   buttons: "flex gap-3 items-center",
   chooseFileButton: {
-    component: "{UButton}",
+    base: "{UButton}",
     variants: {
       disabled: {
         true: "opacity-75",

package/ui.form-input-number/config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   label: {
-    component: "{ULabel}",
+    base: "{ULabel}",
     content: "gap-6 items-center",
   },
   number: "",

package/ui.form-select/config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   selectLabel: {
-    component: "{ULabel}",
+    base: "{ULabel}",
     variants: {
       opened: {
         true: "group/active",

package/ui.text-file/config.ts

@@ -1,7 +1,6 @@
 export default /*tw*/ {
   file: {
-    component: "{ULink}",
-    base: "flex items-center",
+    base: "{ULink} flex items-center",
     variants: {
       size: {
         sm: "gap-0.5",

package/utils/node/mergeConfigs.js

@@ -24,7 +24,7 @@ export function createMergeConfigs(cx) {
     const isPropsConfig = Object.keys(propsConfig).length;
 
     // Add unique keys from defaultConfig to composedConfig
-    const composedConfig = cloneDeep(defaultConfig);
+    const composedConfig = cloneDeep(stringToObject(defaultConfig, { addBase: true }));
 
     // Add unique keys from globalConfig to composedConfig
     for (const key in globalConfig) {
@@ -45,7 +45,6 @@ export function createMergeConfigs(cx) {
       defaults,
       strategy,
       safelist,
-      component,
       safelistColors,
       defaultVariants,
       compoundVariants,
@@ -58,15 +57,6 @@ export function createMergeConfigs(cx) {
             // 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) {
@@ -231,7 +221,7 @@ export function createGetMergedConfig(cx) {
     const strategy =
       !globalConfig && !propsConfig
         ? STRATEGY_TYPE.merge
-        : propsConfig?.strategy || globalConfig?.strategy || vuelessStrategy;
+        : propsConfig?.strategy || globalConfig?.strategy || vuelessStrategy || STRATEGY_TYPE.merge;
 
     if (strategy === STRATEGY_TYPE.merge) {
       mergedConfig = mergeConfigs({ defaultConfig, globalConfig, propsConfig });

package/web-types.json

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