vueless 0.0.188 → 0.0.189

package/package.json

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

package/service.ui/index.js

@@ -212,6 +212,23 @@ export default class UIService {
   setColor(classes, color) {
     return classes?.replaceAll("{color}", color);
   }
+
+  /**
+   Check is config key not contains classes or CVA config object.
+   @param { String } key
+   @returns { Boolean }
+   */
+  isSystemKey(key) {
+    return (
+      key === "i18n" ||
+      key === "strategy" ||
+      key === "safelist" ||
+      key === "safelistColors" ||
+      key === "defaultVariants" ||
+      key.includes("iconName") ||
+      key.includes("IconName")
+    );
+  }
 }
 
 export const {
@@ -222,6 +239,7 @@ export const {
   setFavicon,
   setBrandColor,
   convertHexInRgb,
+  isSystemKey,
   isMac,
   isPWA,
   isIOS,

package/ui.container-accordion/composables/attrs.composable.js

@@ -1,60 +1,37 @@
 import { computed } from "vue";
 import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
-
+import { cva, isSystemKey } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
+const componentKeys = ["icon", "divider"];
+
 export function useAttrs(props, { isOpened }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { wrapper, title, description } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaTitle = cva({
-    base: title.base,
-    variants: title.variants,
-    compoundVariants: title.compoundVariants,
-  });
-
-  const cvaDescription = cva({
-    base: description.base,
-    variants: description.variants,
-    compoundVariants: description.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() => cvaWrapper({ size: props.size }));
-
-  const titleClasses = computed(() =>
-    cvaTitle({
-      size: props.size,
-    }),
-  );
-
-  const descriptionClasses = computed(() =>
-    cvaDescription({
-      size: props.size,
-      isOpened: isOpened.value,
-    }),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const bodyAttrs = getAttrs("body");
-  const titleAttrs = getAttrs("title", { classes: titleClasses });
-  const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-  const dividerAttrs = getAttrs("divider", { isComponent: true });
+  const attrs = {};
+
+  // New approach of defining attrs dynamically (need to test).
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    let classes = "";
+    let value = config.value[key];
+
+    if (value.variants || value.compoundVariants) {
+      const getCVA = cva(value);
+
+      classes = computed(() =>
+        getCVA({
+          ...props,
+          isOpened: isOpened.value,
+        }),
+      );
+    }
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes, isComponent: componentKeys.includes(key) });
+  }
 
   return {
+    ...attrs,
     config,
-    wrapperAttrs,
-    descriptionAttrs,
-    bodyAttrs,
-    titleAttrs,
-    iconAttrs,
-    dividerAttrs,
   };
 }

package/ui.container-accordion/index.stories.js

@@ -21,11 +21,11 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UAccordion
-      v-bind="args"
       name="Excellence"
       title="Excellence by necessity"
       description="As creators and maintainers of the technologies you are using,
             our services are here to showcase the full power of our softwares."
+      v-bind="args"
     />
     <UAccordion
       v-bind="args"

package/web-types.json

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