vueless 0.0.188 → 0.0.190

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.188",
+  "version": "0.0.190",
   "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 { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
+
+  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,
+    hasSlotContent,
   };
 }

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/ui.form-select/composables/attrs.composable.js

@@ -1,184 +1,116 @@
+import { computed } from "vue";
 import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
-
+import { cva, cx, isSystemKey } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
+
+const componentKeys = ["dropdownList", "toggleIcon", "clearIcon", "removeItemIcon", "label"];
 
 export default function useAttrs(props, { isTop, isOpen, selectedLabel: selectedLabelValue }) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { wrapper, innerWrapper, searchInput, selectedLabel, caret, caretClearText } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaInnerWrapper = cva({
-    base: innerWrapper.base,
-    variants: innerWrapper.variants,
-    compoundVariants: innerWrapper.compoundVariants,
-  });
-
-  const cvaSearchInput = cva({
-    base: searchInput.base,
-    variants: searchInput.variants,
-    compoundVariants: searchInput.compoundVariants,
-  });
-
-  const cvaSelectedLabel = cva({
-    base: selectedLabel.base,
-    variants: selectedLabel.variants,
-    compoundVariants: selectedLabel.compoundVariants,
-  });
-
-  const cvaCaret = cva({
-    base: caret.base,
-    variants: caret.variants,
-    compoundVariants: caret.compoundVariants,
-  });
-
-  const cvaCaretClearText = cva({
-    base: caretClearText.base,
-    variants: caretClearText.variants,
-    compoundVariants: caretClearText.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    cvaWrapper({
-      size: props.size,
-      error: Boolean(props.error),
-      disabled: props.disabled,
-      labelAlign: props.labelAlign,
-      label: Boolean(props.label),
-    }),
-  );
-
-  const innerWrapperClasses = computed(() =>
-    cvaInnerWrapper({
-      multiple: props.multiple,
-      size: props.size,
-    }),
-  );
-
-  const searchInputClasses = computed(() =>
-    cvaSearchInput({
-      size: props.size,
-    }),
-  );
-
-  const selectedLabelClasses = computed(() =>
-    cvaSelectedLabel({
-      size: props.size,
-      disabled: props.disabled,
-      multiple: props.multiple,
-    }),
-  );
+  const attrs = {};
 
   const caretClasses = computed(() =>
-    cvaCaret({
-      size: props.size,
-      labelAlign: props.labelAlign,
+    cva(config.value.caret)({
+      ...props,
+      error: Boolean(props.error),
       label: Boolean(props.label),
     }),
   );
 
-  const caretClearTextClasses = computed(() =>
-    cvaCaretClearText({
-      size: props.size,
-    }),
-  );
-
-  const innerWrapperAttrs = getAttrs("innerWrapper", { classes: innerWrapperClasses });
-  const wrapperTopAttrs = getAttrs("wrapperTop");
-  const leftSlotAttrs = getAttrs("leftSlot");
-  const searchInputAttrs = getAttrs("searchInput", { classes: searchInputClasses });
-  const selectedLabelsAttrs = getAttrs("selectedLabels");
-  const selectedLabelAttrs = getAttrs("selectedLabel", { classes: selectedLabelClasses });
-  const dropdownListAttrs = getAttrs("dropdownList", { isComponent: true });
-  const caretClearTextAttrs = getAttrs("caretClearText", { classes: caretClearTextClasses });
-  const caretRemoveItemAttrs = getAttrs("caretRemoveItem");
-  const toggleIconAttrs = getAttrs("toggleIcon", { isComponent: true });
-  const clearIconAttrs = getAttrs("clearIcon", { isComponent: true });
-  const removeItemIconAttrs = getAttrs("removeItemIcon", { isComponent: true });
-
-  const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });
-
-  const wrapperAttrs = computed(() => ({
-    ...wrapperAttrsRaw.value,
-    class: cx([wrapperAttrsRaw.value.class, isOpen.value && config.value.wrapperActive]),
-  }));
-
-  const labelAttrsRaw = getAttrs("label", { isComponent: true });
-
-  const labelAttrs = computed(() => ({
-    ...labelAttrsRaw.value,
-    class: cx([
-      labelAttrsRaw.value.class,
-      isOpen.value && config.value.labelWrapperActive,
-      isTop.value && config.value.labelWrapperTop,
-    ]),
-  }));
-
-  const caretToggleAttrsRaw = getAttrs("caretToggle");
-
-  const caretToggleAttrs = computed(() => ({
-    ...caretToggleAttrsRaw.value,
-    class: cx([caretToggleAttrsRaw.value.class, caretClasses.value]),
-  }));
-
-  const caretClearAttrsRaw = getAttrs("caretClear");
-
-  const caretClearAttrs = computed(() => ({
-    ...caretClearAttrsRaw.value,
-    class: cx([caretClearAttrsRaw.value.class, caretClasses.value]),
-  }));
-
-  const beforeCaretSlotAttrsRaw = getAttrs("beforeCaretSlot");
-
-  const beforeCaretSlotAttrs = computed(() => ({
-    ...beforeCaretSlotAttrsRaw.value,
-    class: cx([beforeCaretSlotAttrsRaw.value.class, caretClasses.value]),
-  }));
-
-  const afterCaretSlotAttrsRaw = getAttrs("afterCaretSlot");
-
-  const afterCaretSlotAttrs = computed(() => ({
-    ...afterCaretSlotAttrsRaw.value,
-    class: cx([afterCaretSlotAttrsRaw.value.class, caretClasses.value]),
-  }));
-
-  const searchAttrsRaw = getAttrs("search");
-
-  const searchAttrs = computed(() => ({
-    ...searchAttrsRaw.value,
-    class: cx([
-      searchAttrsRaw.value.class,
-      Boolean(selectedLabelValue.value) && !isOpen.value && "w-0", // this is not configurable
-    ]),
-  }));
+  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,
+          error: Boolean(props.error),
+          label: Boolean(props.label),
+        }),
+      );
+    }
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes, isComponent: componentKeys.includes(key) });
+
+    if (key === "wrapper") {
+      const wrapperAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...wrapperAttrs.value,
+        class: cx([wrapperAttrs.value.class, isOpen.value && config.value.wrapperActive]),
+      }));
+    }
+
+    if (key === "label") {
+      const labelAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...labelAttrs.value,
+        class: cx([
+          labelAttrs.value.class,
+          isOpen.value && config.value.labelWrapperActive,
+          isTop.value && config.value.labelWrapperTop,
+        ]),
+      }));
+    }
+
+    if (key === "caretToggle") {
+      const caretToggleAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...caretToggleAttrs.value,
+        class: cx([caretToggleAttrs.value.class, caretClasses.value]),
+      }));
+    }
+
+    if (key === "caretClear") {
+      const caretClearAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...caretClearAttrs.value,
+        class: cx([caretClearAttrs.value.class, caretClasses.value]),
+      }));
+    }
+
+    if (key === "beforeCaretSlot") {
+      const beforeCaretSlotAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...beforeCaretSlotAttrs.value,
+        class: cx([beforeCaretSlotAttrs.value.class, caretClasses.value]),
+      }));
+    }
+
+    if (key === "afterCaretSlot") {
+      const afterCaretSlotAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...afterCaretSlotAttrs.value,
+        class: cx([afterCaretSlotAttrs.value.class, caretClasses.value]),
+      }));
+    }
+
+    if (key === "search") {
+      const searchAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...searchAttrs.value,
+        class: cx([
+          searchAttrs.value.class,
+          Boolean(selectedLabelValue.value) && !isOpen.value && "w-0", // this is not configurable
+        ]),
+      }));
+    }
+  }
 
   return {
+    ...attrs,
     config,
     hasSlotContent,
-    labelAttrs,
-    wrapperAttrs,
-    innerWrapperAttrs,
-    wrapperTopAttrs,
-    leftSlotAttrs,
-    beforeCaretSlotAttrs,
-    afterCaretSlotAttrs,
-    caretToggleAttrs,
-    caretClearAttrs,
-    caretClearTextAttrs,
-    caretRemoveItemAttrs,
-    searchAttrs,
-    searchInputAttrs,
-    selectedLabelsAttrs,
-    selectedLabelAttrs,
-    dropdownListAttrs,
-    toggleIconAttrs,
-    clearIconAttrs,
-    removeItemIconAttrs,
   };
 }

package/ui.form-select/configs/default.config.js

@@ -62,7 +62,9 @@ export default /*tw*/ {
   removeItemIcon: "",
   removeItemIconName: "close_small",
   caretRemoveItem: "flex items-center",
+  caretClear: "",
   caretClearText: {
+    // TODO: caretClearMultiple is better
     base: "cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500 transition",
     compoundVariants: [
       { size: "sm", class: "text-sm" },

package/web-types.json

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