vueless 0.0.200 → 0.0.202

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

package/ui.dropdown-badge/composables/attrs.composable.js

@@ -4,59 +4,59 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { listWrapper } = config.value;
-
-  const cvaListWrapper = cva({
-    base: listWrapper.base,
-    variants: listWrapper.variants,
-    compoundVariants: listWrapper.compoundVariants,
-  });
-
-  // Get list wrapper position classes to apply them to list without wrapper
-  const cvaListWrapperVariants = cva({
-    base: "",
-    variants: listWrapper.variants,
-    compoundVariants: [],
-  });
-
-  const listWrapperPositionClasses = computed(() =>
-    cvaListWrapperVariants({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
+export default function useAttrs(props, { isShownOptions }) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const listWrapperClasses = computed(() =>
-    cvaListWrapper({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
-  );
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "icon") {
+      const iconAttrs = attrs[`${key}Attrs`];
+      const rotateClasses = isShownOptions.value && config.value.iconRotate;
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const badgeAttrs = getAttrs("badge", { isComponent: true });
-  const iconAttrsRaw = getAttrs("icon", { isComponent: true });
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...iconAttrs.value,
+        class: cx([iconAttrs.value.class, rotateClasses]),
+      }));
+    }
 
-  const iconAttrs = computed(() => {
-    const rotateClasses = isShownOptions.value && config.value.iconRotate;
+    if (key === "list") {
+      const getCVA = cva({
+        base: "",
+        variants: config.value["listWrapper"].variants,
+        compoundVariants: [],
+      });
 
-    return {
-      ...iconAttrsRaw.value,
-      class: cx([iconAttrsRaw.value.class, rotateClasses]),
-    };
-  });
+      const classes = computed(() =>
+        getCVA({
+          ...props,
+        }),
+      );
 
-  const listWrapperAttrs = getAttrs("listWrapper", { classes: listWrapperClasses });
-  const listAttrs = getAttrs("list", { isComponent: true, classes: listWrapperPositionClasses });
+      attrs[`${key}Attrs`] = getAttrs(key, { classes: classes });
+    }
+  }
 
   return {
-    listWrapperAttrs,
-    wrapperAttrs,
-    badgeAttrs,
-    listAttrs,
-    iconAttrs,
+    ...attrs,
     config,
     hasSlotContent,
   };

package/ui.dropdown-badge/configs/default.config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
-  badge: "cursor-pointer",
-  icon: "transition duration-300",
+  badge: "{UBadge} cursor-pointer",
+  icon: "{UIcon} transition duration-300",
   iconName: "keyboard_arrow_down",
   iconRotate: "rotate-180",
   listWrapper: {
@@ -21,7 +21,7 @@ export default /*tw*/ {
       },
     },
   },
-  list: "w-fit",
+  list: "{UDropdownList} w-fit",
   defaultVariants: {
     color: "brand",
     size: "md",

package/ui.dropdown-badge/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UDropdownBadge from "../ui.dropdown-badge";
 import UDropdownItem from "../ui.dropdown-item";
@@ -42,9 +42,7 @@ const DefaultTemplate = (args) => ({
     <UDropdownBadge
       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}
     </UDropdownBadge>
   `,
 });

package/ui.dropdown-badge/index.vue

@@ -61,7 +61,7 @@ import vClickOutside from "../directive.clickOutside";
 
 import defaultConfig from "./configs/default.config";
 import { UDropdownBadge } 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: "UDropdownBadge", inheritAttrs: false });
@@ -187,7 +187,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["select"]);
+const emit = defineEmits([
+  /**
+   * Triggers when dropdown option is selected.
+   * @property {string} value
+   */
+  "select",
+]);
 
 provide("hideDropdownOptions", hideOptions);
 

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

@@ -4,60 +4,60 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { listWrapper } = config.value;
-
-  const cvaListWrapper = cva({
-    base: listWrapper.base,
-    variants: listWrapper.variants,
-    compoundVariants: listWrapper.compoundVariants,
-  });
-
-  const listWrapperClasses = computed(() =>
-    cvaListWrapper({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
+export default function useAttrs(props, { isShownOptions }) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  // Get list wrapper position classes to apply them to list without wrapper
-  const cvaListWrapperVariants = cva({
-    base: "",
-    variants: listWrapper.variants,
-    compoundVariants: [],
-  });
-
-  const listWrapperPositionClasses = computed(() =>
-    cvaListWrapperVariants({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
-  );
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "icon") {
+      const iconAttrs = attrs[`${key}Attrs`];
+      const rotateClasses = isShownOptions.value && config.value.iconRotate;
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const buttonAttrs = getAttrs("button", { isComponent: true });
-  const iconAttrsRaw = getAttrs("icon", { isComponent: true });
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...iconAttrs.value,
+        class: cx([iconAttrs.value.class, rotateClasses]),
+      }));
+    }
 
-  const iconAttrs = computed(() => {
-    const rotateClasses = isShownOptions.value && config.value.iconRotate;
+    if (key === "list") {
+      const getCVA = cva({
+        base: "",
+        variants: config.value["listWrapper"].variants,
+        compoundVariants: [],
+      });
 
-    return {
-      ...iconAttrsRaw.value,
-      class: cx([iconAttrsRaw.value.class, rotateClasses]),
-    };
-  });
+      const classes = computed(() =>
+        getCVA({
+          ...props,
+        }),
+      );
 
-  const listWrapperAttrs = getAttrs("listWrapper", { classes: listWrapperClasses });
-  const listAttrs = getAttrs("list", { isComponent: true, classes: listWrapperPositionClasses });
+      attrs[`${key}Attrs`] = getAttrs(key, { classes: classes });
+    }
+  }
 
   return {
+    ...attrs,
     config,
-    listWrapperAttrs,
-    buttonAttrs,
-    listAttrs,
-    iconAttrs,
-    wrapperAttrs,
     hasSlotContent,
   };
 }

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

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
-  button: "",
-  icon: "transition duration-300",
+  button: "{UButton}",
+  icon: "{UIcon} transition duration-300",
   iconName: "keyboard_arrow_down",
   iconRotate: "rotate-180",
   listWrapper: {
@@ -21,7 +21,7 @@ export default /*tw*/ {
       },
     },
   },
-  list: "w-fit",
+  list: "{UDropdownList} w-fit",
   defaultVariants: {
     color: "brand",
     size: "md",

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UDropdownButton from "../ui.dropdown-button";
 import UDropdownItem from "../ui.dropdown-item";
@@ -43,9 +43,7 @@ const DefaultTemplate = (args) => ({
     <UDropdownButton
       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}
     </UDropdownButton>
   `,
 });

package/ui.dropdown-button/index.vue

@@ -64,7 +64,7 @@ import UIService, { getRandomId } from "../service.ui";
 import vClickOutside from "../directive.clickOutside";
 
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { UDropdownButton, BUTTON_VARIANT } from "./constants";
 
 /* Should be a string for correct web-types gen */
@@ -222,7 +222,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["select"]);
+const emit = defineEmits([
+  /**
+   * Triggers when dropdown option is selected.
+   * @property {string} value
+   */
+  "select",
+]);
 
 provide("hideDropdownOptions", hideOptions);
 

package/ui.dropdown-item/index.vue

@@ -40,7 +40,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits([
+  /**
+   * Triggers when dropdown item is clicked.
+   * @property {string} value
+   */
+  "click",
+]);
 
 function onClick() {
   // invokes click event on current item

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

@@ -4,62 +4,60 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { listWrapper } = config.value;
+export default function useAttrs(props, { isShownOptions }) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
-  const cvaListWrapper = cva({
-    base: listWrapper.base,
-    variants: listWrapper.variants,
-    compoundVariants: listWrapper.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const listWrapperClasses = computed(() =>
-    cvaListWrapper({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
-  );
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  // Get list wrapper position classes to apply them to list without wrapper
-  const cvaListWrapperVariants = cva({
-    base: "",
-    variants: listWrapper.variants,
-    compoundVariants: [],
-  });
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
 
-  const listWrapperPositionClasses = computed(() =>
-    cvaListWrapperVariants({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
-  );
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "icon") {
+      const iconAttrs = attrs[`${key}Attrs`];
+      const rotateClasses = isShownOptions.value && config.value.iconRotate;
 
-  const wrapperAttrs = getAttrs("wrapper", true);
-  const triggerAttrs = getAttrs("trigger");
-  const linkAttrs = getAttrs("link", { isComponent: true });
-  const iconAttrsRaw = getAttrs("icon", { isComponent: true });
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...iconAttrs.value,
+        class: cx([iconAttrs.value.class, rotateClasses]),
+      }));
+    }
 
-  const iconAttrs = computed(() => {
-    const rotateClasses = isShownOptions.value && config.value.iconRotate;
+    if (key === "list") {
+      const getCVA = cva({
+        base: "",
+        variants: config.value["listWrapper"].variants,
+        compoundVariants: [],
+      });
 
-    return {
-      ...iconAttrsRaw.value,
-      class: cx([iconAttrsRaw.value.class, rotateClasses]),
-    };
-  });
+      const classes = computed(() =>
+        getCVA({
+          ...props,
+        }),
+      );
 
-  const listWrapperAttrs = getAttrs("listWrapper", { classes: listWrapperClasses });
-  const listAttrs = getAttrs("list", { isComponent: true, classes: listWrapperPositionClasses });
+      attrs[`${key}Attrs`] = getAttrs(key, { classes: classes });
+    }
+  }
 
   return {
+    ...attrs,
     config,
-    listWrapperAttrs,
-    wrapperAttrs,
-    linkAttrs,
-    listAttrs,
-    iconAttrs,
-    triggerAttrs,
     hasSlotContent,
   };
 }

package/ui.dropdown-link/configs/default.config.js

@@ -1,8 +1,8 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   trigger: "flex items-center relative space-x-0.5",
-  link: "",
-  icon: "block transition duration-300",
+  link: "{ULink}",
+  icon: "{UIcon} block transition duration-300",
   iconName: "keyboard_arrow_down",
   iconRotate: "rotate-180",
   listWrapper: {
@@ -22,7 +22,7 @@ export default /*tw*/ {
       },
     },
   },
-  list: "w-fit",
+  list: "{UDropdownList} w-fit",
   defaultVariants: {
     color: "brand",
     size: "md",