vueless 0.0.365 → 0.0.367

package/composables/useUI.js

@@ -8,9 +8,10 @@ import {
   Comment,
   Text,
   Fragment,
+  computed,
 } from "vue";
 
-import { cx, setColor, getColor, vuelessConfig } from "../utils/utilUI.js";
+import { cx, cva, setColor, getColor, vuelessConfig } from "../utils/utilUI.js";
 
 import { cloneDeep, isCSR } from "../utils/utilHelper.js";
 import {
@@ -53,6 +54,90 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     config.value = mergeClassesIntoConfig(mergedConfig, topLevelClassKey || firstClassKey, attrs);
   });
 
+  /**
+   * Get classes by given key (including CVA if config set).
+   * @param {string} key
+   * @param {Object} mutatedProps
+   * @returns {ComputedRef | String}
+   */
+  function getClasses(key, mutatedProps = {}) {
+    return computed(() => {
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          ...toValue(mutatedProps),
+          color: props.color ? getColor(props.color) : null,
+        });
+      }
+
+      return props.color ? setColor(value, props.color) : value;
+    });
+  }
+
+  /**
+   * Get an object where:
+   * – key: extendingKey
+   * – value: reactive string of extendingKey classes.
+   * @param {Array} extendingKeys
+   * @param {Object} mutatedProps
+   * @returns {Object}
+   */
+  function getExtendingKeysClasses(extendingKeys, mutatedProps = {}) {
+    const extendingClasses = {};
+
+    for (const key of extendingKeys) {
+      extendingClasses[key] = getClasses(key, mutatedProps);
+    }
+
+    return extendingClasses;
+  }
+
+  /**
+   * Get an object where:
+   * – key: elementKey
+   * – value: reactive object of string element attributes (with classes).
+   * @param mutatedProps
+   * @param extendingKeys
+   * @param keysToExtendConfig
+   * @returns {Object}
+   */
+  function getKeysAttrs(mutatedProps, extendingKeys = [], keysToExtendConfig = {}) {
+    const keysToExtend = Object.keys(keysToExtendConfig);
+    const keysAttrs = {};
+
+    for (const key in defaultConfig) {
+      if (isSystemKey(key) || extendingKeys.includes(key)) continue;
+
+      keysAttrs[`${key}Attrs`] = getAttrs(key, {
+        classes: getClasses(key, mutatedProps),
+      });
+
+      if (keysToExtend.includes(key)) {
+        const { base, extend } = keysToExtendConfig[key];
+        const keyAttrs = keysAttrs[`${key}Attrs`];
+
+        keysAttrs[`${key}Attrs`] = computed(() => ({
+          ...keyAttrs.value,
+          class: cx([
+            ...(Array.isArray(base) ? toValue(base) : [toValue(base)]),
+            keyAttrs.value.class,
+            ...(Array.isArray(extend) ? toValue(extend) : [toValue(extend)]),
+          ]),
+        }));
+      }
+    }
+
+    return keysAttrs;
+  }
+
+  /**
+   * Get an element attributes for a given key.
+   * @param {String} configKey
+   * @param {Object} options with classes
+   * @returns {Object} element attributes
+   */
   function getAttrs(configKey, options) {
     const nestedComponent = getNestedComponent(defaultConfig[configKey]);
 
@@ -105,9 +190,11 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
   return {
     config,
-    getAttrs,
-    getColor,
     setColor,
+    getColor,
+    getAttrs,
+    getKeysAttrs,
+    getExtendingKeysClasses,
     isCVA,
     isSystemKey,
     hasSlotContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.365",
+  "version": "0.0.367",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/useAttrs.js

@@ -1,43 +1,22 @@
-import { computed, useSlots } from "vue";
-
+import { useSlots, computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
   const slots = useSlots();
-  const { config, getAttrs, getColor, setColor, hasSlotContent, isSystemKey, isCVA } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
-  const attrs = {};
-
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          color: getColor(props.color),
-          square: props.loading || props.square,
-          leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
-          rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
-        });
-      }
 
-      return setColor(value, props.color);
-    });
+  const mutatedProps = computed(() => ({
+    leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
+    rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
+  }));
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.dropdown-button/config.js

@@ -1,7 +1,15 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownButton: "{UButton}",
-  dropdownButtonActive: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
+  dropdownButtonActive: {
+    base: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
+    variants: {
+      color: {
+        grayscale: "ring-gray-700/15",
+        white: "ring-gray-700/15",
+      },
+    },
+  },
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
     base: "{UDropdownList} w-fit",

package/ui.dropdown-button/constants.js

@@ -7,8 +7,3 @@ export const UDropdownButton = "UDropdownButton";
 export const BUTTON_VARIANT = {
   primary: "primary",
 };
-
-export const LIST_POSITION = {
-  bottom: "bottom",
-  right: "right",
-};

package/ui.dropdown-button/useAttrs.js

@@ -1,50 +1,28 @@
+import { computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva, cx } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
-import { computed } from "vue";
 
 export default function useAttrs(props, { isShownOptions }) {
-  const { config, getColor, setColor, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const attrs = {};
-
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          color: getColor(props.color),
-        });
-      }
-
-      return setColor(value, props.color);
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (key === "dropdownButton") {
-      const dropdownButton = attrs[`${key}Attrs`];
+  const extendingKeys = ["dropdownButtonActive"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...dropdownButton.value,
-        class: cx([
-          dropdownButton.value.class,
-          isShownOptions.value && setColor(config.value.dropdownButtonActive, props.color),
-        ]),
-      }));
-    }
-  }
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    dropdownButton: {
+      extend: computed(() => [
+        isShownOptions.value && extendingKeysClasses.dropdownButtonActive.value,
+      ]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/web-types.json

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