vueless 0.0.201 → 0.0.202

package/composable.ui/index.js

@@ -102,11 +102,12 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
       const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
-      const classes = toValue(options?.classes) || getBaseClasses(configKeyValue);
+      // TODO: Uncomment and add into `cx` when getAttrs as a function will be resolved.
+      // const classes = toValue(options?.classes) || getBaseClasses(configKeyValue);
 
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: cx([classes, attrClass]),
+        class: cx([getBaseClasses(configKeyValue), toValue(options?.classes), attrClass]),
         ...((isObject && configAttrs) || {}),
       };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.201",
+  "version": "0.0.202",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.34",
+    "@vueless/plugin-vite": "^0.0.36",
     "@vueless/storybook": "^0.0.33",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",

package/ui.button-link/composables/attrs.composable.js

@@ -1,146 +1,80 @@
 import { computed, useSlots } from "vue";
-
 import useUI from "../../composable.ui";
 import { cva, cx } from "../../service.ui";
-
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { isActive, isExactActive }) {
+export default function useAttrs(props, { isActive, isExactActive }) {
   const slots = useSlots();
 
-  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+  const { config, getAttrs, hasSlotContent, getColor, setColor, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const { wrapper, link, text, rightSlot, leftSlot } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaLink = cva({
-    base: link.base,
-    variants: link.variants,
-    compoundVariants: link.compoundVariants,
-  });
-
-  const cvaText = cva({
-    base: text.base,
-    variants: text.variants,
-    compoundVariants: text.compoundVariants,
-  });
-
-  const cvaRightSlot = cva({
-    base: rightSlot.base,
-    variants: rightSlot.variants,
-    compoundVariants: rightSlot.compoundVariants,
-  });
-
-  const cvaLeftSlot = cva({
-    base: leftSlot.base,
-    variants: leftSlot.variants,
-    compoundVariants: leftSlot.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        size: props.size,
-        color: getColor(props.color),
-        block: props.block,
-        noRing: props.noRing,
-        disabled: props.disabled,
-      }),
-      props.color,
-    ),
-  );
-
-  const linkClasses = computed(() =>
-    setColor(
-      cvaLink({
-        size: props.size,
-        color: getColor(props.color),
-        dashed: props.dashed,
-        underlined: props.underlined,
-      }),
-      props.color,
-    ),
-  );
-
-  const textClasses = computed(() =>
-    setColor(
-      cvaText({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
-
-  const rightSlotClasses = computed(() =>
-    setColor(
-      cvaRightSlot({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
-
-  const leftSlotClasses = computed(() =>
-    setColor(
-      cvaLeftSlot({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
-
-  const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });
-
-  const wrapperAttrs = computed(() => {
-    const hasDefaultSlot = hasSlotContent(slots["default"]);
-    const hasRightSlot = hasSlotContent(slots["right"]);
-    const hasLeftSlot = hasSlotContent(slots["left"]);
-
-    return {
-      ...wrapperAttrsRaw.value,
-      class: cx([
-        wrapperAttrsRaw.value.class,
-        (hasDefaultSlot || hasLeftSlot || hasRightSlot) && config.value.withSlots,
-        isActive.value && props.wrapperActiveClass,
-        isExactActive.value && props.wrapperExactActiveClass,
-      ]),
-    };
-  });
-
-  const linkAttrsRaw = getAttrs("link", { classes: linkClasses });
-
-  const linkAttrs = computed(() => {
-    const hasDefaultSlot = hasSlotContent(slots["default"]);
-
-    return {
-      ...linkAttrsRaw.value,
-      class: cx([
-        linkAttrsRaw.value.class,
-        hasDefaultSlot && config.value.withSlots,
-        isActive.value && props.activeClass,
-        isExactActive.value && props.exactActiveClass,
-      ]),
-    };
-  });
-
-  const rightSlotAttrs = getAttrs("rightSlot", { classes: rightSlotClasses });
-  const leftSlotAttrs = getAttrs("leftSlot", { classes: leftSlotClasses });
-  const textAttrs = getAttrs("text", { classes: textClasses });
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "wrapper") {
+      const wrapperAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => {
+        const hasDefaultSlot = hasSlotContent(slots["default"]);
+        const hasRightSlot = hasSlotContent(slots["right"]);
+        const hasLeftSlot = hasSlotContent(slots["left"]);
+
+        return {
+          ...wrapperAttrs.value,
+          class: cx([
+            wrapperAttrs.value.class,
+            (hasDefaultSlot || hasLeftSlot || hasRightSlot) && config.value.withSlots,
+            isActive.value && props.wrapperActiveClass,
+            isExactActive.value && props.wrapperExactActiveClass,
+          ]),
+        };
+      });
+    }
+
+    if (key === "link") {
+      const linkAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => {
+        const hasDefaultSlot = hasSlotContent(slots["default"]);
+
+        return {
+          ...linkAttrs.value,
+          class: cx([
+            linkAttrs.value.class,
+            hasDefaultSlot && config.value.withSlots,
+            isActive.value && props.activeClass,
+            isExactActive.value && props.exactActiveClass,
+          ]),
+        };
+      });
+    }
+  }
 
   return {
+    ...attrs,
     config,
     hasSlotContent,
-    wrapperAttrs,
-    linkAttrs,
-    rightSlotAttrs,
-    leftSlotAttrs,
-    textAttrs,
   };
 }

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import ULink from "../ui.button-link";
 import UButton from "../ui.button";
@@ -29,9 +29,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <ULink v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </ULink>
   `,
 });

package/ui.button-link/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-bind="wrapperAttrs" ref="wrapperRef" tabindex="-1">
     <div v-if="hasSlotContent($slots['left'])" v-bind="leftSlotAttrs">
-      <!-- @slot Use it to add something before text. -->
+      <!-- @slot Use it to add something before the text. -->
       <slot name="left" />
     </div>
 
@@ -42,7 +42,7 @@
     </a>
 
     <div v-if="hasSlotContent($slots['right'])" v-bind="rightSlotAttrs">
-      <!-- @slot Use it to add something after text. -->
+      <!-- @slot Use it to add something after the text. -->
       <slot name="right" />
     </div>
   </div>
@@ -53,14 +53,39 @@ import { computed, ref } from "vue";
 import { RouterLink, useLink } from "vue-router";
 import UIService from "../service.ui";
 
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
 import { ULink } from "./constants";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "ULink", inheritAttrs: false });
 
-const emit = defineEmits(["click", "mouseover", "focus", "blur", "keydown"]);
+const emit = defineEmits([
+  /**
+   * Triggers when link is clicked.
+   */
+  "click",
+
+  /**
+   * Triggers when cursor is on the link.
+   */
+  "mouseover",
+
+  /**
+   * Triggers when link is focused.
+   */
+  "focus",
+
+  /**
+   * Triggers when link loses focus.
+   */
+  "blur",
+
+  /**
+   * Triggers when link is clicked.
+   */
+  "keydown",
+]);
 
 const props = defineProps({
   /**

package/ui.button-toggle/composables/attrs.composable.js

@@ -1,48 +1,36 @@
 import { computed } from "vue";
 import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
-
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { label, items } = config.value;
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
-  const cvaItems = cva({
-    base: items.base,
-    variants: items.variants,
-    compoundVariants: items.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaLabel = cva({
-    base: label.base,
-    variants: label.variants,
-    compoundVariants: label.compoundVariants,
-  });
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const itemsClasses = computed(() =>
-    cvaItems({
-      size: props.size,
-      variant: props.variant,
-      multiple: props.multiple,
-      separated: props.separated,
-    }),
-  );
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
 
-  const labelClasses = computed(() =>
-    cvaLabel({
-      block: props.block,
-    }),
-  );
+      return "";
+    });
 
-  const labelAttrs = getAttrs("label", { isComponent: true, classes: labelClasses });
-  const itemsAttrs = getAttrs("items", { classes: itemsClasses });
-  const itemAttrs = getAttrs("item", { isComponent: true });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    labelAttrs,
-    itemsAttrs,
-    itemAttrs,
+    hasSlotContent,
   };
 }

package/ui.button-toggle/configs/default.config.js

@@ -24,14 +24,14 @@ export default /*tw*/ {
     ],
   },
   label: {
-    base: "flex flex-wrap",
+    base: "{ULabel} flex flex-wrap",
     variants: {
       block: {
         true: "w-full",
       },
     },
   },
-  item: "",
+  item: "{UToggleItem}",
   defaultVariants: {
     variant: "primary",
     labelAlign: "top",

package/ui.button-toggle/index.vue

@@ -36,7 +36,7 @@ import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UToggle", inheritAttrs: false });
@@ -174,7 +174,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when toggle item is selected.
+   * @property {string} modelValue
+   */
+  "update:modelValue",
+]);
 
 const { labelAttrs, itemsAttrs, itemAttrs } = useAttrs(props);
 

package/ui.button-toggle-item/composables/attrs.composable.js

@@ -1,54 +1,64 @@
 import { computed, toValue } from "vue";
-import { cx, cva } from "../../service.ui";
 import useUI from "../../composable.ui";
-
+import { cx, cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { selectedValue, separated, variant }) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { button, selected } = config.value;
+export default function useAttrs(props, { selectedValue, separated, variant }) {
+  const { config, getAttrs, isSystemKey, hasSlotContent } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+
+  const skipKeys = ["selected"];
+
+  const attrs = {};
 
-  const cvaButton = cva({
-    base: button.base,
-    variants: button.variants,
-    compoundVariants: button.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key) || skipKeys.includes(key)) continue;
 
-  const buttonClasses = computed(() => {
-    return cvaButton({
-      variant: toValue(variant),
-      separated: toValue(separated),
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+          variant: toValue(variant),
+          separated: toValue(separated),
+        });
+      }
+
+      return "";
     });
-  });
-
-  const cvaSelected = cva({
-    base: selected.base,
-    variants: selected.variants,
-    compoundVariants: selected.compoundVariants,
-  });
-
-  const selectedClasses = computed(() =>
-    cvaSelected({
-      variant: toValue(variant),
-    }),
-  );
 
-  const inputAttrs = getAttrs("input");
-  const buttonAttrsRaw = getAttrs("button", { isComponent: true, classes: buttonClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "button") {
+      const selectedClasses = computed(() =>
+        cva(config.value.selected)({
+          ...props,
+          variant: toValue(variant),
+          separated: toValue(separated),
+        }),
+      );
+
+      const buttonAttrs = attrs[`${key}Attrs`];
 
-  const buttonAttrs = computed(() => {
-    const isSelected = Array.isArray(selectedValue?.value)
-      ? selectedValue?.value?.includes(props.value)
-      : selectedValue?.value === props.value;
+      attrs[`${key}Attrs`] = computed(() => {
+        const isSelected = Array.isArray(selectedValue?.value)
+          ? selectedValue?.value?.includes(props.value)
+          : selectedValue?.value === props.value;
 
-    return {
-      ...buttonAttrsRaw.value,
-      class: cx([buttonAttrsRaw.value.class, isSelected && selectedClasses.value]),
-    };
-  });
+        return {
+          ...buttonAttrs.value,
+          class: cx([buttonAttrs.value.class, isSelected && selectedClasses.value]),
+        };
+      });
+    }
+  }
 
   return {
-    buttonAttrs,
-    inputAttrs,
+    ...attrs,
+    config,
+    hasSlotContent,
   };
 }

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

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   button: {
     base: `
-      border-gray-300 font-normal
+      {UButton} border-gray-300 font-normal
       hover:text-brand-600 hover:border-brand-600 hover:relative hover:z-10
       focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-600 focus-within:ring-brand-600
       active:text-brand-700 active:border-brand-700 active:relative active:z-10

package/ui.button-toggle-item/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UToggleItem from "../ui.button-toggle-item";
 import UIcon from "../ui.image-icon";
@@ -29,9 +29,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UToggleItem v-bind="args" name="toggle">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UToggleItem>
   `,
 });

package/ui.button-toggle-item/index.vue

@@ -14,6 +14,7 @@
     @click.stop="onClickSetValue"
   >
     <template #left>
+      <!-- @slot Use it to add something before the text. -->
       <slot name="left" />
     </template>
 
@@ -28,11 +29,12 @@
         v-bind="inputAttrs"
         @click.stop
       />
-
+      <!-- @slot Use it to add something instead of the text. -->
       <slot name="default" />
     </template>
 
     <template #right>
+      <!-- @slot Use it to add something after the text. -->
       <slot name="right" />
     </template>
   </UButton>
@@ -46,7 +48,7 @@ import UIService, { getRandomId } from "../service.ui";
 
 import { TYPE_RADIO } from "../ui.button-toggle/constants";
 
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
 import { UToggleItem } from "./constants";
 
@@ -112,7 +114,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when new value is set.
+   * @property {string} modelValue
+   */
+  "update:modelValue",
+]);
 
 const name = inject("toggleName", () => "toggle");
 const type = inject("toggleType", UIService.get(defaultConfig, UToggleItem).default.type);