vueless 0.0.373 → 0.0.375

package/composables/useUI.js

@@ -62,17 +62,19 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
    */
   function getClasses(key, mutatedProps = {}) {
     return computed(() => {
+      const color = toValue(mutatedProps)?.color || props.color;
+
       let value = config.value[key];
 
       if (isCVA(value)) {
         value = cva(value)({
           ...props,
           ...toValue(mutatedProps),
-          color: props.color ? getColor(props.color) : null,
+          color: color ? getColor(color) : null,
         });
       }
 
-      return props.color ? setColor(value, props.color) : value;
+      return color ? setColor(value, color) : value;
     });
   }
 

package/package.json

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

package/ui.button-link/storybook/stories.js

@@ -81,15 +81,15 @@ Underlined.args = { enum: "color", underlined: true, dashed: false };
 export const Dashed = EnumVariantTemplate.bind({});
 Dashed.args = { enum: "color", dashed: true };
 
-export const Url = DefaultTemplate.bind({});
-Url.args = { url: "https://storybook.js.org/docs/react/get-started/introduction" };
+export const Href = DefaultTemplate.bind({});
+Href.args = { href: "https://storybook.js.org/docs/react/get-started/introduction" };
 
 export const Route = DefaultTemplate.bind({});
 Route.args = { name: "SomeRouterRouteName" };
 
 export const TargetBlank = DefaultTemplate.bind({});
 TargetBlank.args = {
-  url: "https://storybook.js.org/docs/react/get-started/introduction",
+  href: "https://storybook.js.org/docs/react/get-started/introduction",
   targetBlank: true,
 };
 

package/ui.button-link/useAttrs.js

@@ -1,67 +1,38 @@
 import { computed, useSlots } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva, cx } from "../utils/utilUI.js";
+
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props, { isActive, isExactActive }) {
-  const slots = useSlots();
-
-  const { config, getAttrs, hasSlotContent, getColor, setColor, 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 === "wrapper") {
-      const wrapperAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...wrapperAttrs.value,
-        class: cx([
-          wrapperAttrs.value.class,
-          hasSlotContent(slots["default"]) && config.value.withChild,
-          isActive.value && props.wrapperActiveClass,
-          isExactActive.value && props.wrapperExactActiveClass,
-        ]),
-      }));
-    }
-
-    if (key === "link") {
-      const linkAttrs = attrs[`${key}Attrs`];
+  const slots = useSlots();
 
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...linkAttrs.value,
-        class: cx([
-          linkAttrs.value.class,
-          hasSlotContent(slots["default"]) && config.value.withChild,
-          isActive.value && props.activeClass,
-          isExactActive.value && props.exactActiveClass,
-        ]),
-      }));
-    }
-  }
+  const extendingKeys = ["withChild"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    wrapper: {
+      extend: computed(() => [
+        hasSlotContent(slots["default"]) && extendingKeysClasses.withChild.value,
+        isActive.value && props.wrapperActiveClass,
+        isExactActive.value && props.wrapperExactActiveClass,
+      ]),
+    },
+    link: {
+      extend: computed(() => [
+        hasSlotContent(slots["default"]) && extendingKeysClasses.withChild.value,
+        isActive.value && props.activeClass,
+        isExactActive.value && props.exactActiveClass,
+      ]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.button-toggle/useAttrs.js

@@ -1,36 +1,15 @@
-import { 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, getAttrs, 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,
-        });
-      }
-
-      return value;
-    });
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

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

@@ -19,27 +19,16 @@ export default /*tw*/ {
         `,
       },
     },
-    compoundVariants: [
-      {
-        selected: true,
-        class: "relative disabled:z-10",
-      },
-      {
-        selected: true,
-        variant: "primary",
-        class: "!text-white bg-brand-600 border-brand-600",
-      },
-      {
-        selected: true,
-        variant: "secondary",
-        class: "text-brand-600 border-brand-600 bg-brand-600/10",
-      },
-      {
-        selected: true,
-        variant: "thirdary",
-        class: "!bg-brand-600/20",
+  },
+  toggleButtonActive: {
+    base: "relative disabled:z-10",
+    variants: {
+      variant: {
+        primary: "!text-white bg-brand-600 border-brand-600",
+        secondary: "text-brand-600 border-brand-600 bg-brand-600/10",
+        thirdary: "!bg-brand-600/20",
       },
-    ],
+    },
   },
   toggleInput: "p-0 m-0 size-0 invisible absolute",
   defaults: {

package/ui.button-toggle-item/useAttrs.js

@@ -1,40 +1,31 @@
 import { computed, toValue } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
+
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props, { isSelected, separated, variant }) {
-  const { config, getAttrs, isSystemKey, hasSlotContent, 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,
-          variant: toValue(variant),
-          separated: toValue(separated),
-          selected: isSelected.value,
-        });
-      }
+  const mutatedProps = computed(() => ({
+    variant: toValue(variant),
+    separated: toValue(separated),
+  }));
 
-      return value;
-    });
+  const extendingKeys = ["toggleButtonActive"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys, mutatedProps);
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
+    toggleButton: {
+      extend: computed(() => [isSelected.value && extendingKeysClasses.toggleButtonActive.value]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.container-accordion/config.js

@@ -19,11 +19,9 @@ export default /*tw*/ {
         md: "text-sm",
         lg: "text-base",
       },
-      isOpened: {
-        true: "pt-2 h-full opacity-100",
-      },
     },
   },
+  isOpened: "pt-2 h-full opacity-100",
   toggleIcon: "{UIcon}",
   divider: "{UDivider} group-last:hidden",
   defaults: {

package/ui.container-accordion/useAttrs.js

@@ -1,37 +1,26 @@
 import { 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, { isOpened }) {
-  const { config, 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,
-          isOpened: isOpened.value,
-        });
-      }
 
-      return value;
-    });
+  const extendingKeys = ["isOpened"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    description: {
+      extend: computed(() => [isOpened.value && extendingKeysClasses.isOpened.value]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.container-card/useAttrs.js

@@ -1,49 +1,30 @@
+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, { isMobileBreakpoint }) {
-  const { config, 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,
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (key === "footer") {
-      const footerAttrs = attrs[`${key}Attrs`];
+  const extendingKeys = ["footerMobileReverse"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...footerAttrs.value,
-        class: cx([
-          footerAttrs.value.class,
-          props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
-        ]),
-      }));
-    }
-  }
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    footer: {
+      extend: computed(() => [
+        props.mobileFooterReverse &&
+          isMobileBreakpoint.value &&
+          extendingKeysClasses.footerMobileReverse.value,
+      ]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.container-col/useAttrs.js

@@ -1,37 +1,15 @@
 import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
-import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
-  const attrs = {};
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.container-divider/useAttrs.js

@@ -1,38 +1,15 @@
 import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
-import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
-  const attrs = {};
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          label: Boolean(props.label),
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.container-group/useAttrs.js

@@ -1,37 +1,15 @@
 import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
-import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
-  const attrs = {};
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.container-modal/useAttrs.js

@@ -1,64 +1,33 @@
+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";
 
 import useBreakpoint from "../composables/useBreakpoint.js";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
   );
   const { isMobileBreakpoint } = useBreakpoint();
-  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,
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "header") {
-      const headerAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...headerAttrs.value,
-        class: cx([
-          headerAttrs.value.class,
-          props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
-        ]),
-      }));
-    }
 
-    if (key === "footer") {
-      const footerAttrs = attrs[`${key}Attrs`];
+  const extendingKeys = ["footerMobileReverse"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...footerAttrs.value,
-        class: cx([
-          footerAttrs.value.class,
-          props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
-        ]),
-      }));
-    }
-  }
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    footer: {
+      extend: computed(() => [
+        props.mobileFooterReverse &&
+          isMobileBreakpoint.value &&
+          extendingKeysClasses.footerMobileReverse.value,
+      ]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.container-modal-confirm/useAttrs.js

@@ -1,37 +1,15 @@
 import useUI from "../composables/useUI.js";
+
 import defaultConfig from "./config.js";
-import { cva } from "../utils/utilUI.js";
-import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, getColor, setColor, 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),
-        });
-      }
-
-      return setColor(value, props.color);
-    });
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }