vueless 0.0.210 → 0.0.211

package/ui.form-input-number/index.vue

@@ -56,7 +56,7 @@ import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UInputNumber } 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: "UInputNumber", inheritAttrs: false });
@@ -128,7 +128,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the input value changes.
+   * @property {number} modelValue
+   */
+  "update:modelValue",
+]);
 
 const {
   config,

package/ui.form-input-rating/composables/attrs.composable.js

@@ -3,7 +3,7 @@ import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
+export default function useAttrs(props) {
   const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
@@ -13,18 +13,17 @@ export function useAttrs(props) {
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
-    let classes = "";
-    let value = config.value[key];
+    const classes = computed(() => {
+      const value = config.value[key];
 
-    if (value.variants || value.compoundVariants) {
-      const getCVA = cva(value);
-
-      classes = computed(() =>
-        getCVA({
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
           ...props,
-        }),
-      );
-    }
+        });
+      }
+
+      return "";
+    });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
   }

package/ui.form-input-rating/index.vue

@@ -58,7 +58,7 @@ import UIService from "../service.ui";
 
 import { UInputRating } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UInputRating", inheritAttrs: false });
@@ -165,7 +165,7 @@ const props = defineProps({
 
 const emit = defineEmits([
   /**
-   * Triggers when the rating is changes.
+   * Triggers when the rating value changes.
    * @property {number} modelValue
    */
   "update:modelValue",

package/ui.form-input-search/composables/attrs.composable.js

@@ -1,21 +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, hasSlotContent } = useUI(defaultConfig, () => props.config);
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  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 cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
 
-  const inputAttrs = getAttrs("input", { isComponent: true });
-  const searchIconAttrs = getAttrs("searchIcon", { isComponent: true });
-  const closeIconAttrs = getAttrs("closeIcon", { isComponent: true });
-  const buttonAttrs = getAttrs("button", { isComponent: true });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    inputAttrs,
-    searchIconAttrs,
-    closeIconAttrs,
-    buttonAttrs,
     hasSlotContent,
   };
 }

package/ui.form-input-search/configs/default.config.js

@@ -1,16 +1,16 @@
 export default /*tw*/ {
   input: {
     wrapper: "relative flex items-center justify-between w-full rounded-lg bg-gray-900 bg-opacity-5",
-    input: "w-full",
+    input: "{UInput} w-full",
     label: "w-full",
     rightSlot: "pr-0",
     leftSlot: "pl-0",
   },
-  closeIcon: "flex h-full items-center mr-2",
+  closeIcon: "{UIcon} flex h-full items-center mr-2",
   closeIconName: "close",
-  searchIcon: "mr-3",
+  searchIcon: "{UIcon} mr-3",
   searchIconName: "search",
-  button: "rounded-l-none ml-1 !ring-0 outline outline-1 outline-gray-900",
+  button: "{UButton} rounded-l-none ml-1 !ring-0 outline outline-1 outline-gray-900",
   defaultVariants: {
     size: "md",
     labelAlign: "topInside",

package/ui.form-input-search/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UInputSearch from "../ui.form-input-search";
 import UButton from "../ui.button";
@@ -28,9 +28,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UInputSearch 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}
     </UInputSearch>
   `,
 });

package/ui.form-input-search/index.vue

@@ -16,12 +16,12 @@
     @keyup.enter="onClickSearch"
   >
     <template #left>
-      <!-- @slot Use it to add something before text. -->
+      <!-- @slot Use it to add something before the text. -->
       <slot name="left" />
     </template>
 
     <template #right>
-      <!-- @slot Use it to add something before text. -->
+      <!-- @slot Use it to add something after the text. -->
       <slot name="right" />
 
       <template v-if="!hasSlotContent($slots['right'])">
@@ -70,7 +70,7 @@ import UIService, { getRandomId } from "../service.ui";
 
 import { UInputSearch } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UInputSearch" });
@@ -176,7 +176,24 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue", "clear", "search"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the input value changes.
+   * @property {string} value
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when the input value is cleared.
+   */
+  "clear",
+
+  /**
+   * Triggers when the search button is clicked.
+   * @property {string} value
+   */
+  "search",
+]);
 
 const localValue = ref("");
 

package/ui.form-label/composables/attrs.composable.js

@@ -4,62 +4,35 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { wrapper, label, description } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaLabel = cva({
-    base: label.base,
-    variants: label.variants,
-    compoundVariants: label.compoundVariants,
-  });
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
-  const cvaDescription = cva({
-    base: description.base,
-    variants: description.variants,
-    compoundVariants: description.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const wrapperClasses = computed(() =>
-    cvaWrapper({
-      size: props.size,
-      align: props.align,
-    }),
-  );
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const labelClasses = computed(() =>
-    cvaLabel({
-      size: props.size,
-      error: Boolean(props.error),
-      disabled: props.disabled,
-      align: props.align,
-    }),
-  );
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+          error: Boolean(props.error),
+        });
+      }
 
-  const descriptionClasses = computed(() =>
-    cvaDescription({
-      size: props.size,
-      error: Boolean(props.error),
-      align: props.align,
-    }),
-  );
+      return "";
+    });
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const labelAttrs = getAttrs("label", { classes: labelClasses });
-  const labelWrapperAttrs = getAttrs("labelWrapper");
-  const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    wrapperAttrs,
-    labelWrapperAttrs,
-    labelAttrs,
-    descriptionAttrs,
+    ...attrs,
+    config,
     hasSlotContent,
   };
 }

package/ui.form-label/index.vue

@@ -25,6 +25,7 @@
         v-text="description"
       />
 
+      <!-- @slot Use it to add something to the label's footer -->
       <slot name="footer" />
     </div>
   </div>
@@ -50,6 +51,7 @@
       v-text="description"
     />
 
+    <!-- @slot Use it to add something to the label's footer -->
     <slot name="footer" />
   </div>
 </template>
@@ -61,12 +63,17 @@ import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { ULabel, PLACEMENT } 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: "ULabel", inheritAttrs: false });
 
-const emit = defineEmits(["click", "mousedown"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the label is clicked.
+   */
+  "click",
+]);
 
 const props = defineProps({
   /**

package/ui.form-radio/composables/attrs.composable.js

@@ -4,31 +4,38 @@ import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { radioColor, radioSize }) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { radio } = config.value;
-
-  const cvaRadio = cva({
-    base: radio.base,
-    variants: radio.variants,
-    compoundVariants: radio.compoundVariants,
-  });
-
-  const radioClasses = computed(() =>
-    setColor(
-      cvaRadio({
-        color: getColor(radioColor.value),
-        size: radioSize.value,
-      }),
-      radioColor.value,
-    ),
+export default function useAttrs(props, { radioColor, radioSize }) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const radioAttrs = getAttrs("radio", { classes: radioClasses });
+  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(radioColor.value),
+            size: radioSize.value,
+          }),
+          radioColor.value,
+        );
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    radioAttrs,
-    labelAttrs,
+    ...attrs,
+    config,
   };
 }

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

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   label: {
     wrapper: "inline-flex",
-    label: "cursor-pointer",
+    label: "{ULabel} cursor-pointer",
   },
   radio: {
     base: `

package/ui.form-radio/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import URadio from "../ui.form-radio";
 import UBadge from "../ui.text-badge";
@@ -30,9 +30,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <URadio 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}
     </URadio>
   `,
 });

package/ui.form-radio/index.vue

@@ -36,7 +36,7 @@ import ULabel from "../ui.form-label";
 import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { URadio } from "./constants";
 
 /* Should be a string for correct web-types gen */
@@ -158,7 +158,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the value attribute changes.
+   * @property {string} value
+   */
+  "update:modelValue",
+]);
 
 const localValue = ref("");
 const radioName = ref(null);

package/ui.form-radio-group/composables/attrs.composable.js

@@ -5,25 +5,30 @@ import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { list } = config.value;
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
 
-  const cvaList = cva({
-    base: list.base,
-    variants: list.variants,
-    compoundVariants: list.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const listClasses = computed(() => cvaList({ size: props.size }));
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const listAttrs = getAttrs("list", { classes: listClasses });
-  const radioAttrs = getAttrs("radio", { isComponent: true });
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    labelAttrs,
-    listAttrs,
-    radioAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.form-radio-group/configs/default.config.js

@@ -1,5 +1,6 @@
 export default /*tw*/ {
-  label: "",
+  label: "{ULabel}",
+  radio: "{URadio}",
   list: {
     base: "flex flex-col",
     variants: {

package/ui.form-radio-group/index.vue

@@ -36,7 +36,7 @@ import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { URadioGroup } 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: "URadioGroup", inheritAttrs: false });
@@ -133,7 +133,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the value attribute changes.
+   * @property {string} value
+   */
+  "update:modelValue",
+]);
 
 const { labelAttrs, listAttrs, radioAttrs } = useAttrs(props);
 

package/ui.form-switch/composables/attrs.composable.js

@@ -4,74 +4,38 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { checked }) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { wrapper, circle, toggleLabel } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaCircle = cva({
-    base: circle.base,
-    variants: circle.variants,
-    compoundVariants: circle.compoundVariants,
-  });
+export default function useAttrs(props, { checked }) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
-  const cvaToggleLabel = cva({
-    base: toggleLabel.base,
-    variants: toggleLabel.variants,
-    compoundVariants: toggleLabel.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        size: props.size,
-        color: getColor(props.color),
-        disabled: props.disabled,
-        checked: Boolean(checked.value),
-        toggleLabel: props.toggleLabel,
-      }),
-      props.color,
-    ),
-  );
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const circleClasses = computed(() =>
-    cvaCircle({
-      size: props.size,
-      checked: Boolean(checked.value),
-    }),
-  );
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+            checked: Boolean(checked.value),
+          }),
+          props.color,
+        );
+      }
 
-  const toggleLabelClasses = computed(() =>
-    setColor(
-      cvaToggleLabel({
-        size: props.size,
-        color: getColor(props.color),
-        toggleLabel: props.toggleLabel,
-        checked: Boolean(checked.value),
-      }),
-      props.color,
-    ),
-  );
+      return "";
+    });
 
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const inputAttrs = getAttrs("input");
-  const circleAttrs = getAttrs("circle", { classes: circleClasses });
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-  const toggleLabelAttrs = getAttrs("toggleLabel", { classes: toggleLabelClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    iconAttrs,
-    labelAttrs,
-    wrapperAttrs,
-    circleAttrs,
-    toggleLabelAttrs,
-    inputAttrs,
   };
 }

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  label: "flex items-start",
+  label: "{ULabel} flex items-start",
   wrapper: {
     base: `
       transition duration-300
@@ -42,7 +42,7 @@ export default /*tw*/ {
       { checked: true, size: "lg", class: "ml-[calc(100%-1.5rem)]" },
     ],
   },
-  icon: "",
+  icon: "{UIcon}",
   selectedIconName: "check",
   unselectedIconName: "close",
   toggleLabel: {

package/ui.form-switch/index.vue

@@ -47,7 +47,7 @@ import UIService, { getRandomId } from "../service.ui";
 
 import { USwitch } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 
 /* Should be a string for correct web-types gen */
@@ -154,7 +154,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when switch value changes.
+   * @property {Boolean} value
+   */
+  "update:modelValue",
+]);
 
 const { tm } = useLocale();