vueless 0.0.200 → 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.200",
+  "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/service.storybook/index.js

@@ -108,7 +108,7 @@ export function getArgTypes(componentName) {
     });
 
     types[event.name] = {
-      type: event.properties ? `{ ${properties.join(", ")} }` : null,
+      type: event.properties ? properties.join(", ") : null,
       name: event.name,
       description: event.description,
     };

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

@@ -1,10 +1,11 @@
-import { computed } from "vue";
+import { computed, useSlots } from "vue";
 import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, getColor, setColor } = useUI(
+  const slots = useSlots();
+  const { config, getAttrs, getColor, setColor, hasSlotContent, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -21,6 +22,9 @@ export default function useAttrs(props) {
           cva(value)({
             ...props,
             color: getColor(props.color),
+            square: props.loading || props.square,
+            iconLeft: Boolean(props.iconLeft) || hasSlotContent(slots["icon-left"]),
+            iconRight: Boolean(props.iconRight) || hasSlotContent(slots["icon-right"]),
           }),
           props.color,
         );

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

@@ -130,12 +130,24 @@ export default /*tw*/ {
         class: "bg-gray-800 bg-opacity-10 hover:bg-opacity-15 focus:bg-opacity-15 active:bg-opacity-20",
       },
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
-      { square: true, size: "xs", class: "p-1" },
+      { square: true, size: "2xs", class: "p-1" },
       { square: true, size: "xs", class: "p-1.5" },
       { square: true, size: "sm", class: "p-2.5" },
       { square: true, size: "md", class: "p-3.5" },
       { square: true, size: "lg", class: "p-4" },
-      { square: true, size: "lg", class: "p-5" },
+      { square: true, size: "xl", class: "p-5" },
+      { iconLeft: true, size: "2xs", class: "pl-1" },
+      { iconLeft: true, size: "xs", class: "pl-1.5" },
+      { iconLeft: true, size: "sm", class: "pl-2.5" },
+      { iconLeft: true, size: "md", class: "pl-3.5" },
+      { iconLeft: true, size: "lg", class: "pl-4" },
+      { iconLeft: true, size: "xl", class: "pl-5" },
+      { iconRight: true, size: "2xs", class: "pr-1" },
+      { iconRight: true, size: "xs", class: "pr-1.5" },
+      { iconRight: true, size: "sm", class: "pr-2.5" },
+      { iconRight: true, size: "md", class: "pr-3.5" },
+      { iconRight: true, size: "lg", class: "pr-4" },
+      { iconRight: true, size: "xl", class: "pr-5" },
     ],
   },
   text: "whitespace-nowrap focus-visible:outline-none",

package/ui.button/index.stories.js

@@ -41,7 +41,7 @@ const SlotTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      ${args.slotTemplate || ""}
+      ${args.slotTemplate}
     </UButton>
   `,
 });
@@ -153,7 +153,7 @@ slotDefault.args = {
 export const iconLeftSlot = SlotTemplate.bind({});
 iconLeftSlot.args = {
   slotTemplate: `
-    <template #left>
+    <template #icon-left>
       <UIcon
         name="star"
         color="green"
@@ -165,7 +165,7 @@ iconLeftSlot.args = {
 export const iconRightSlot = SlotTemplate.bind({});
 iconRightSlot.args = {
   slotTemplate: `
-    <template #right>
+    <template #icon-right>
       <UIcon
         name="star"
         color="green"
@@ -173,3 +173,27 @@ iconRightSlot.args = {
     </template>
   `,
 };
+
+export const leftSlot = SlotTemplate.bind({});
+leftSlot.args = {
+  slotTemplate: `
+    <template #left>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const rightSlot = SlotTemplate.bind({});
+rightSlot.args = {
+  slotTemplate: `
+    <template #right>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};

package/ui.button/index.vue

@@ -14,19 +14,49 @@
     </template>
 
     <template v-else>
-      <!-- @slot Use it to add icon before text. -->
-      <slot name="left">
-        <UIcon v-if="iconLeft" :name="iconLeft" :color="componentColor" />
-      </slot>
-
-      <!-- @slot Use it to add something instead of text. -->
+      <div v-if="hasSlotContent($slots['icon-left']) || iconLeft">
+        <!--
+          @slot Use it to add icon before the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+          @binding {string} icon-color
+        -->
+        <slot
+          name="icon-left"
+          :icon-name="iconLeft"
+          :icon-size="iconSize"
+          :icon-color="componentColor"
+        >
+          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" :color="componentColor" />
+        </slot>
+      </div>
+
+      <!-- @slot Use it to add something before the text. -->
+      <slot name="left" />
+
+      <!-- @slot Use it to add something instead of the text. -->
       <slot />
       <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
 
-      <!-- @slot Use it to add icon after text. -->
-      <slot name="right">
-        <UIcon v-if="iconRight" :name="iconRight" :color="componentColor" />
-      </slot>
+      <!-- @slot Use it to add something after the text. -->
+      <slot name="right" />
+
+      <div v-if="hasSlotContent($slots['icon-right']) || iconRight">
+        <!--
+          @slot Use it to add icon after the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+          @binding {string} icon-color
+        -->
+        <slot
+          name="icon-right"
+          :icon-name="iconRight"
+          :icon-size="iconSize"
+          :icon-color="componentColor"
+        >
+          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" :color="componentColor" />
+        </slot>
+      </div>
     </template>
   </component>
 </template>
@@ -73,6 +103,22 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UButton).default.size,
   },
 
+  /**
+   * Left side icon name.
+   */
+  iconLeft: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  iconRight: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Button label.
    */
@@ -161,25 +207,9 @@ const props = defineProps({
     type: String,
     default: "",
   },
-
-  /**
-   * Left side icon name.
-   */
-  iconLeft: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right side icon name.
-   */
-  iconRight: {
-    type: String,
-    default: "",
-  },
 });
 
-const { buttonAttrs, loaderAttrs, textAttrs } = useAttrs(props);
+const { buttonAttrs, loaderAttrs, textAttrs, hasSlotContent } = useAttrs(props);
 
 const buttonRef = ref(null);
 
@@ -198,6 +228,19 @@ const loaderSize = computed(() => {
   return sizes[props.size];
 });
 
+const iconSize = computed(() => {
+  const sizes = {
+    "2xs": "sm",
+    xs: "sm",
+    sm: "md",
+    md: "md",
+    lg: "lg",
+    xl: "lg",
+  };
+
+  return sizes[props.size];
+});
+
 const componentColor = computed(() => {
   return props.variant === "primary" ? "white" : props.color;
 });

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);