vueless 0.0.201 → 0.0.203

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",

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

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

package/ui.dropdown-link/index.vue

@@ -67,7 +67,7 @@ import vClickOutside from "../directive.clickOutside";
 
 import { UDropdownLink } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { UDropdownButton } from "../ui.dropdown-button/constants/index.js";
 
 /* Should be a string for correct web-types gen */
@@ -208,7 +208,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-list/composables/attrs.composable.js

@@ -5,65 +5,53 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { subGroupLabel, groupLabel, option } = config.value;
-
-  const cvaSubGroupLabel = cva({
-    base: subGroupLabel.base,
-    variants: subGroupLabel.variants,
-    compoundVariants: subGroupLabel.compoundVariants,
-  });
-  const cvaGroupLabel = cva({
-    base: groupLabel.base,
-    variants: groupLabel.variants,
-    compoundVariants: groupLabel.compoundVariants,
-  });
-  const cvaOption = cva({
-    base: option.base,
-    variants: option.variants,
-    compoundVariants: option.compoundVariants,
-  });
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
   const optionClasses = computed(() =>
-    cvaOption({
-      disabled: props.disabled,
-      size: props.size,
-    }),
-  );
-  const subGroupLabelClasses = computed(() =>
-    cvaSubGroupLabel({
-      size: props.size,
-    }),
-  );
-  const groupLabelClasses = computed(() =>
-    cvaGroupLabel({
-      size: props.size,
+    cva(config.value.option)({
+      ...props,
     }),
   );
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const listAttrs = getAttrs("list");
-  const optionHighlightAttrs = getAttrs("optionHighlight");
-  const optionSelectedAttrs = getAttrs("optionSelected");
-  const optionItemAttrs = getAttrs("optionItem");
-  const addTitleWrapperAttrs = getAttrs("addTitleWrapper");
-  const addTitleAttrs = getAttrs("addTitle");
-  const addTitleHotkeyAttrs = getAttrs("addTitleHotkey");
-  const buttonAddAttrs = getAttrs("buttonAdd", { isComponent: true });
-  const addIconAttrs = getAttrs("addIcon", { isComponent: true });
-  const optionContentAttrs = getAttrs("optionContent");
+  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,
+        });
+      }
 
-  const subGroupLabelAttrsRaw = getAttrs("subGroupLabel", { classes: subGroupLabelClasses });
-  const subGroupLabelAttrs = computed(() => ({
-    ...subGroupLabelAttrsRaw.value,
-    class: cx([optionClasses.value, subGroupLabelAttrsRaw.value.class]),
-  }));
+      return "";
+    });
 
-  const groupLabelAttrsRaw = getAttrs("groupLabel", { classes: groupLabelClasses });
-  const groupLabelAttrs = computed(() => ({
-    ...groupLabelAttrsRaw.value,
-    class: cx([optionClasses.value, groupLabelAttrsRaw.value.class]),
-  }));
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "subGroupLabel") {
+      const subGroupLabelAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...subGroupLabelAttrs.value,
+        class: cx([subGroupLabelAttrs.value.class, optionClasses.value]),
+      }));
+    }
+
+    if (key === "groupLabel") {
+      const groupLabelAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...groupLabelAttrs.value,
+        class: cx([groupLabelAttrs.value.class, optionClasses.value]),
+      }));
+    }
+  }
 
   const optionAttrs = (classes = []) => {
     const mergedClasses = cx([optionClasses.value, ...classes]);
@@ -72,22 +60,10 @@ export default function useAttrs(props) {
   };
 
   return {
-    hasSlotContent,
-    config,
-    wrapperAttrs,
-    listAttrs,
-    optionHighlightAttrs,
-    optionSelectedAttrs,
-    optionItemAttrs,
-    addTitleWrapperAttrs,
-    addTitleAttrs,
-    addTitleHotkeyAttrs,
-    buttonAddAttrs,
-    addIconAttrs,
+    ...attrs,
     optionAttrs,
-    subGroupLabelAttrs,
-    groupLabelAttrs,
     optionClasses,
-    optionContentAttrs,
+    hasSlotContent,
+    config,
   };
 }

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

@@ -54,9 +54,9 @@ export default /*tw*/ {
   `,
   addTitle: "text-sm font-medium text-gray-900",
   addTitleHotkey: "text-gray-500",
-  buttonAdd: "sticky left-[calc(100%-2.3rem)] bottom-2.5 p-1",
+  buttonAdd: "{UButton} sticky left-[calc(100%-2.3rem)] bottom-2.5 p-1",
   addIconName: "add",
-  addIcon: "bg-transparent",
+  addIcon: "{UIcon} bg-transparent",
   i18n: {
     noDataToShow: "No data to show.",
     add: "Add",