vueless 0.0.595 → 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.595",
+  "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

@@ -2,7 +2,6 @@
 import { computed, ref, watchEffect, useId, watch, useSlots } from "vue";
 
 import useUI from "../composables/useUI.ts";
-import { useDarkMode } from "../composables/useDarkMode.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 import { getDefaults } from "../utils/ui.ts";
 
@@ -10,57 +9,24 @@ import ULoader from "../ui.loader/ULoader.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 
 import defaultConfig from "./config.ts";
-import { UButton } from "./constants.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 });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UButton),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   label: "",
 });
 
 const slots = useSlots();
 const elementId = props.id || useId();
-const { isDarkMode } = useDarkMode();
 
 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;
-});
-
-const iconColor = computed(() => {
-  const primaryColor = isDarkMode.value ? "black" : "white";
-
-  return props.variant === "primary" ? primaryColor : props.color;
-});
-
 watch(
   () => props.loading,
   (newValue, oldValue) => {
@@ -119,7 +85,7 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
     :data-test="dataTest"
   >
     <template v-if="loading">
-      <ULoader :loading="loading" :size="loaderSize" :color="iconColor" v-bind="loaderAttrs" />
+      <ULoader :loading="loading" color="inherit" v-bind="loaderAttrs" />
     </template>
 
     <template v-else>
@@ -127,17 +93,9 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
         @slot Use it to add something before the label.
         @binding {string} icon-name
         @binding {string} icon-size
-        @binding {string} icon-color
       -->
-      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="iconColor">
-        <UIcon
-          v-if="leftIcon"
-          internal
-          :name="leftIcon"
-          :size="iconSize"
-          :color="iconColor"
-          v-bind="leftIconAttrs"
-        />
+      <slot name="left" :icon-name="leftIcon">
+        <UIcon v-if="leftIcon" internal color="inherit" :name="leftIcon" v-bind="leftIconAttrs" />
       </slot>
 
       <!--
@@ -145,23 +103,9 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
         @binding {string} label
         @binding {string} icon-name
         @binding {string} icon-size
-        @binding {string} icon-color
       -->
-      <slot
-        name="default"
-        :label="label"
-        :icon-name="icon"
-        :icon-size="iconSize"
-        :icon-color="iconColor"
-      >
-        <UIcon
-          v-if="icon"
-          internal
-          :name="icon"
-          :size="iconSize"
-          :color="iconColor"
-          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>
@@ -171,15 +115,13 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
         @slot Use it to add something after the label.
         @binding {string} icon-name
         @binding {string} icon-size
-        @binding {string} icon-color
       -->
-      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="iconColor">
+      <slot name="right" :icon-name="rightIcon">
         <UIcon
           v-if="rightIcon"
           internal
+          color="inherit"
           :name="rightIcon"
-          :size="iconSize"
-          :color="iconColor"
           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/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UButton = "UButton";
+export const COMPONENT_NAME = "UButton";

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/ui.dropdown-button/UDropdownButton.vue

@@ -11,7 +11,7 @@ import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 import { vClickOutside } from "../directives";
 
 import defaultConfig from "./config.ts";
-import { UDropdownButton, BUTTON_VARIANT } from "./constants.ts";
+import { UDropdownButton } from "./constants.ts";
 
 import type { Props, IconSize, DropdownSize, Config } from "./types.ts";
 import type { Option } from "../ui.dropdown-list/types.ts";
@@ -41,10 +41,6 @@ const dropdownListRef = useTemplateRef<UDropdownListRef>("dropdown-list");
 
 const elementId = props.id || useId();
 
-const iconColor = computed(() => {
-  return props.variant === BUTTON_VARIANT.primary ? "white" : props.color;
-});
-
 const iconSize = computed(() => {
   const sizes = {
     "2xs": "xs",
@@ -146,8 +142,8 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
           <UIcon
             v-if="!noIcon"
             internal
+            color="inherit"
             :size="iconSize"
-            :color="iconColor"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"

package/ui.dropdown-button/constants.ts

@@ -3,7 +3,3 @@
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
 export const UDropdownButton = "UDropdownButton";
-
-export const BUTTON_VARIANT = {
-  primary: "primary",
-};

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

@@ -92,8 +92,8 @@ type UButtonRef = InstanceType<typeof UButton>;
 type UInputRef = InstanceType<typeof UInput>;
 
 const isShownMenu = ref(false);
-const wrapperRef = useTemplateRef("wrapper");
-const menuRef = useTemplateRef("menu");
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const menuRef = useTemplateRef<HTMLDivElement>("menu");
 const buttonRef = useTemplateRef<UButtonRef>("button");
 const buttonPrevRef = useTemplateRef<UButtonRef>("button-prev");
 const buttonNextRef = useTemplateRef<UButtonRef>("button-next");

package/ui.image-icon/config.ts

@@ -11,6 +11,7 @@ export default /*tw*/ {
         white: "text-white",
         black: "text-gray-900",
         grayscale: "text-gray-900 dark:text-white",
+        inherit: "text-inherit",
       },
       interactive: {
         true: "cursor-pointer",

package/ui.image-icon/types.ts

@@ -50,6 +50,7 @@ export interface Props {
     | "gray"
     | "black"
     | "white"
+    | "inherit"
     | "brand";
 
   /**

package/ui.loader/config.ts

@@ -22,6 +22,7 @@ export default /*tw*/ {
         white: "bg-white",
         black: "bg-gray-900",
         grayscale: "bg-gray-900 dark:bg-white",
+        inherit: "bg-current",
       },
       size: {
         sm: `

package/ui.loader/types.ts

@@ -35,6 +35,7 @@ export interface Props {
     | "gray"
     | "black"
     | "white"
+    | "inherit"
     | "brand";
 
   /**

package/ui.text-alert/UAlert.vue

@@ -69,12 +69,6 @@ const closeButtonColor = computed(() => {
   return props.color;
 });
 
-const iconColor = computed(() => {
-  if (props.color === "white") return "gray";
-
-  return props.variant === "primary" ? "white" : props.color;
-});
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -146,19 +140,14 @@ const {
       >
         <!--
           @slot Use it to add something instead of the close button.
+          @binding {string} icon-name
           @binding {string} icon-size
-          @binding {string} icon-color
         -->
-        <slot
-          name="close"
-          :icon-name="config.defaults.closeIcon"
-          :icon-size="closeIconSize"
-          :icon-color="iconColor"
-        >
+        <slot name="close" :icon-name="config.defaults.closeIcon" :icon-size="closeIconSize">
           <UIcon
             internal
+            color="inherit"
             :size="closeIconSize"
-            :color="iconColor"
             :name="config.defaults.closeIcon"
             v-bind="closeIconAttrs"
             :data-test="`${dataTest}-button`"

package/ui.text-badge/UBadge.vue

@@ -55,10 +55,6 @@ const iconSize = computed(() => {
   return sizes[props.size] as IconSize;
 });
 
-const iconColor = computed(() => {
-  return props.variant === "primary" ? "white" : props.color;
-});
-
 function onFocus() {
   emit("focus");
 }
@@ -115,15 +111,14 @@ const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs }
           @slot Use it to add icon before the text.
           @binding {string} icon-name
           @binding {string} icon-size
-          @binding {string} icon-color
         -->
-      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="iconColor">
+      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize">
         <UIcon
           v-if="leftIcon"
           internal
           :name="leftIcon"
           :size="iconSize"
-          :color="iconColor"
+          color="inherit"
           v-bind="leftIconAttrs"
         />
       </slot>
@@ -133,21 +128,14 @@ const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs }
         @binding {string} label
         @binding {string} icon-name
         @binding {string} icon-size
-        @binding {string} icon-color
       -->
-      <slot
-        name="default"
-        :label="label"
-        :icon-name="icon"
-        :icon-size="iconSize"
-        :icon-color="iconColor"
-      >
+      <slot name="default" :label="label" :icon-name="icon" :icon-size="iconSize">
         <UIcon
           v-if="icon"
           internal
           :name="icon"
           :size="iconSize"
-          :color="iconColor"
+          color="inherit"
           v-bind="centerIconAttrs"
         />
         <template v-else>
@@ -159,14 +147,13 @@ const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs }
           @slot Use it to add icon after the text.
           @binding {string} icon-name
           @binding {string} icon-size
-          @binding {string} icon-color
         -->
-      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="iconColor">
+      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize">
         <UIcon
           v-if="rightIcon"
           :name="rightIcon"
           :size="iconSize"
-          :color="iconColor"
+          color="inherit"
           internal
           v-bind="rightIconAttrs"
         />

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.595",
+  "version": "0.0.597",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -310,15 +310,12 @@
               "description": "Use it to add something instead of the close button.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             },
@@ -688,10 +685,6 @@
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             },
@@ -711,10 +704,6 @@
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             },
@@ -730,10 +719,6 @@
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             }
@@ -995,14 +980,6 @@
                 {
                   "type": "string",
                   "name": "icon-name"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             },
@@ -1018,14 +995,6 @@
                 {
                   "type": "string",
                   "name": "icon-name"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             },
@@ -1037,14 +1006,6 @@
                 {
                   "type": "string",
                   "name": "icon-name"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             }
@@ -5600,6 +5561,7 @@
                 "gray",
                 "black",
                 "white",
+                "inherit",
                 "brand"
               ],
               "value": {
@@ -7670,6 +7632,7 @@
                 "gray",
                 "black",
                 "white",
+                "inherit",
                 "brand"
               ],
               "value": {