vueless 0.0.596 → 0.0.597

package/composables/useUI.ts

@@ -1,4 +1,5 @@
 import { ref, watch, watchEffect, getCurrentInstance, toValue, useAttrs, computed } from "vue";
+import { merge } from "lodash-es";
 
 import { cx, cva, setColor, getColor, vuelessConfig, getMergedConfig } from "../utils/ui.ts";
 import { isCSR } from "../utils/helper.ts";
@@ -14,6 +15,7 @@ import type { Ref, ComputedRef } from "vue";
 import type {
   CVA,
   UseUI,
+  Defaults,
   KeyAttrs,
   KeysAttrs,
   Strategies,
@@ -22,7 +24,7 @@ import type {
   UnknownObject,
   ComponentNames,
   ComponentConfig,
-  KeyAttrsWithConfig,
+  NestedComponent,
   VuelessComponentInstance,
 } from "../types.ts";
 
@@ -44,7 +46,7 @@ export default function useUI<T>(
     ? (parent?.type.__name as ComponentNames)
     : (type.__name as ComponentNames);
 
-  const globalConfig = vuelessConfig?.component?.[componentName] || {};
+  const globalConfig = (vuelessConfig?.component?.[componentName] || {}) as ComponentConfig<T>;
 
   const vuelessStrategy = Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy || "")
     ? (vuelessConfig.strategy as Strategies)
@@ -107,31 +109,6 @@ export default function useUI<T>(
       if (isSystemKey(key)) continue;
 
       keysAttrs[`${key}Attrs`] = getAttrs(key, getClasses(key, mutatedProps));
-
-      const baseClasses = getBaseClasses(config.value[key]);
-      const extendsKeys = getExtendsKeys(baseClasses);
-
-      if (extendsKeys.length) {
-        const keyAttrs = keysAttrs[`${key}Attrs`];
-
-        keysAttrs[`${key}Attrs`] = computed(() => {
-          const extendsClasses = extendsKeys.map((key) => toValue(getClasses(key, mutatedProps)));
-
-          return {
-            ...keyAttrs.value,
-            class: cx([
-              ...extendsClasses,
-              keyAttrs.value.class?.replaceAll(EXTENDS_PATTERN_REG_EXP, ""),
-            ]),
-            // TODO: Add ability to merge array of keys
-            config: getMergedConfig({
-              defaultConfig: config.value[extendsKeys[0]],
-              globalConfig: keyAttrs.value.config,
-              propsConfig: propsConfig[extendsKeys[0]],
-            }),
-          };
-        }) as ComputedRef<KeyAttrsWithConfig<T>>;
-      }
     }
 
     return keysAttrs;
@@ -168,24 +145,65 @@ export default function useUI<T>(
     }
 
     function updateVuelessAttrs() {
-      const configKeyValue = config.value[configKey];
+      let configAttr: NestedComponent = {};
+      let extendsConfigAttr: NestedComponent = {};
+      let extendsClasses: string[] = [];
 
-      let configAttr = {};
-      let defaultAttrs = {};
+      const baseClasses = getBaseClasses(config.value[configKey]);
+      const extendsKeys = getExtendsKeys(baseClasses);
 
-      if (typeof configKeyValue === "object") {
-        configAttr = configKeyValue;
-        defaultAttrs = configKeyValue?.defaults;
+      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);
       }
 
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: toValue(classes),
-        config: configAttr,
-        ...defaultAttrs,
+        class: cx([...extendsClasses, toValue(classes).replaceAll(EXTENDS_PATTERN_REG_EXP, "")]),
+        config: merge(configAttr, extendsConfigAttr),
+        ...getDefaults({
+          ...(configAttr.defaults || {}),
+          ...(extendsConfigAttr.defaults || {}),
+        }),
       };
     }
 
+    /**
+     * 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;
+    }
+
+    /**
+     * 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.
+     * */
+    function getDefaults(defaultAttrs: NestedComponent["defaults"]) {
+      const defaults: Defaults = {};
+
+      for (const key in defaultAttrs) {
+        defaults[key] =
+          typeof defaultAttrs[key] === "object"
+            ? defaultAttrs[key][String(props[key])]
+            : defaultAttrs[key];
+      }
+
+      return defaults;
+    }
+
     return vuelessAttrs;
   }
 
@@ -195,7 +213,7 @@ export default function useUI<T>(
 /**
  * Return base classes.
  */
-function getBaseClasses(value: string | CVA) {
+function getBaseClasses(value: string | CVA | undefined) {
   return typeof value === "object" ? value.base || "" : value || "";
 }
 

package/package.json

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

package/types.ts

@@ -241,12 +241,13 @@ export type ComponentConfig<T> = Partial<{
   NestedComponent;
 
 export interface NestedComponent {
-  [key: string]: Record<string, string | UnknownObject> | string;
+  defaults?: Record<string, string | UnknownObject>;
+  [key: string]: Record<string, string | UnknownObject> | string | undefined;
 }
 
 export type Defaults = {
   color?: string;
-  [key: string]: unknown;
+  [key: string]: unknown | UnknownObject;
 };
 
 export interface Transition {

package/ui.button/UButton.vue

@@ -11,7 +11,7 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 import defaultConfig from "./config.ts";
 import { COMPONENT_NAME } from "./constants.ts";
 
-import type { Props, LoaderSize, IconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -27,32 +27,6 @@ const buttonRef = ref<HTMLElement | null>(null);
 const buttonStyle = ref({});
 const buttonWidth = ref(0);
 
-const loaderSize = computed(() => {
-  const sizes = {
-    "2xs": "sm",
-    xs: "sm",
-    sm: "md",
-    md: "md",
-    lg: "lg",
-    xl: "lg",
-  };
-
-  return sizes[props.size] as LoaderSize;
-});
-
-const iconSize = computed(() => {
-  const sizes = {
-    "2xs": "2xs",
-    xs: "xs",
-    sm: "sm",
-    md: "sm",
-    lg: "sm",
-    xl: "sm",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 watch(
   () => props.loading,
   (newValue, oldValue) => {
@@ -111,7 +85,7 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
     :data-test="dataTest"
   >
     <template v-if="loading">
-      <ULoader :loading="loading" :size="loaderSize" color="inherit" v-bind="loaderAttrs" />
+      <ULoader :loading="loading" color="inherit" v-bind="loaderAttrs" />
     </template>
 
     <template v-else>
@@ -120,15 +94,8 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
         @binding {string} icon-name
         @binding {string} icon-size
       -->
-      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize">
-        <UIcon
-          v-if="leftIcon"
-          internal
-          color="inherit"
-          :name="leftIcon"
-          :size="iconSize"
-          v-bind="leftIconAttrs"
-        />
+      <slot name="left" :icon-name="leftIcon">
+        <UIcon v-if="leftIcon" internal color="inherit" :name="leftIcon" v-bind="leftIconAttrs" />
       </slot>
 
       <!--
@@ -137,15 +104,8 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
         @binding {string} icon-name
         @binding {string} icon-size
       -->
-      <slot name="default" :label="label" :icon-name="icon" :icon-size="iconSize">
-        <UIcon
-          v-if="icon"
-          internal
-          color="inherit"
-          :name="icon"
-          :size="iconSize"
-          v-bind="centerIconAttrs"
-        />
+      <slot name="default" :label="label" :icon-name="icon">
+        <UIcon v-if="icon" internal color="inherit" :name="icon" v-bind="centerIconAttrs" />
         <template v-else>
           {{ label }}
         </template>
@@ -156,13 +116,12 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
         @binding {string} icon-name
         @binding {string} icon-size
       -->
-      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize">
+      <slot name="right" :icon-name="rightIcon">
         <UIcon
           v-if="rightIcon"
           internal
           color="inherit"
           :name="rightIcon"
-          :size="iconSize"
           v-bind="rightIconAttrs"
         />
       </slot>

package/ui.button/config.ts

@@ -149,10 +149,34 @@ export default /*tw*/ {
       { square: true, size: "xl", class: "p-3.5" },
     ],
   },
-  loader: "{ULoader}",
-  leftIcon: "{UIcon}",
-  rightIcon: "{UIcon}",
-  centerIcon: "{UIcon}",
+  loader: {
+    base: "{ULoader}",
+    defaults: {
+      size: {
+        "2xs": "sm",
+        xs: "sm",
+        sm: "md",
+        md: "md",
+        lg: "lg",
+        xl: "lg",
+      },
+    },
+  },
+  leftIcon: "{UIcon} {>centerIcon}",
+  rightIcon: "{UIcon} {>centerIcon}",
+  centerIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        "2xs": "2xs",
+        xs: "xs",
+        sm: "sm",
+        md: "sm",
+        lg: "sm",
+        xl: "sm",
+      },
+    },
+  },
   defaults: {
     color: "brand",
     variant: "primary",

package/ui.button/storybook/stories.ts

@@ -172,10 +172,12 @@ export const IconProps: StoryFn<UButtonArgs> = (args) => ({
   template: `
     <URow no-mobile>
       <UButton
+        v-bind="args"
         left-icon="download"
         label="Download"
       />
       <UButton
+        v-bind="args"
         right-icon="menu"
         label="Menu"
       />

package/ui.button/types.ts

@@ -3,9 +3,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type LoaderSize = "sm" | "md" | "lg";
-export type IconSize = "2xs" | "xs" | "sm" | "md";
-
 export interface Props {
   /**
    * Button variant.

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.596",
+  "version": "0.0.597",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -980,10 +980,6 @@
                 {
                   "type": "string",
                   "name": "icon-name"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-size"
                 }
               ]
             },
@@ -999,10 +995,6 @@
                 {
                   "type": "string",
                   "name": "icon-name"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-size"
                 }
               ]
             },
@@ -1014,10 +1006,6 @@
                 {
                   "type": "string",
                   "name": "icon-name"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-size"
                 }
               ]
             }