vueless 0.0.209 → 0.0.211

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

@@ -4,47 +4,36 @@ 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 { textarea, textareaWrapper } = config.value;
-
-  const cvaTextarea = cva({
-    base: textarea.base,
-    variants: textarea.variants,
-    compoundVariants: textarea.compoundVariants,
-  });
-
-  const cvaTextareaWrapper = cva({
-    base: textareaWrapper.base,
-    variants: textareaWrapper.variants,
-    compoundVariants: textareaWrapper.compoundVariants,
-  });
-
-  const textareaWrapperClasses = computed(() =>
-    cvaTextareaWrapper({
-      error: Boolean(props.error),
-      size: props.size,
-      readonly: props.readonly,
-      disabled: props.disabled,
-      labelAlign: props.labelAlign,
-      label: Boolean(props.label),
-    }),
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const textareaClasses = computed(() => cvaTextarea({ size: props.size }));
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const leftSlotAttrs = getAttrs("leftSlot");
-  const rightSlotAttrs = getAttrs("rightSlot");
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const textareaWrapperAttrs = getAttrs("textareaWrapper", { classes: textareaWrapperClasses });
-  const textareaAttrs = getAttrs("textarea", { classes: textareaClasses });
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+          error: Boolean(props.error),
+          label: Boolean(props.label),
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    textareaAttrs,
-    labelAttrs,
-    textareaWrapperAttrs,
-    leftSlotAttrs,
-    rightSlotAttrs,
+    ...attrs,
+    config,
     hasSlotContent,
   };
 }

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  label: "relative w-full",
+  label: "{ULabel} relative w-full",
   leftSlot: "flex items-center justify-center h-full w-11 absolute left-0",
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UTextarea from "../ui.form-textarea";
 import UIcon from "../ui.image-icon";
@@ -32,9 +32,7 @@ const DefaultTemplate = (args) => ({
     <UTextarea
       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}
     </UTextarea>
   `,
 });
@@ -140,7 +138,7 @@ slotLeft.args = {
 };
 
 export const slotRight = SlotTemplate.bind({});
-slotLeft.args = {
+slotRight.args = {
   slotTemplate: `
     <template #right>
       <UIcon

package/ui.form-textarea/index.vue

@@ -17,7 +17,7 @@
       :for="id"
       v-bind="leftSlotAttrs"
     >
-      <!-- @slot Use it to add some component before text. -->
+      <!-- @slot Use it to add something before the text. -->
       <slot name="left" />
     </label>
     <label ref="textareaWrapper" :for="id" v-bind="textareaWrapperAttrs">
@@ -42,7 +42,7 @@
       />
     </label>
     <label v-if="hasSlotContent($slots['right'])" :for="id" v-bind="rightSlotAttrs">
-      <!-- @slot Use it to add some component after text. -->
+      <!-- @slot Use it to add something after the text. -->
       <slot name="right" />
     </label>
   </ULabel>
@@ -56,7 +56,7 @@ import UIService, { getRandomId } from "../service.ui";
 
 import { UTextarea } 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: "UTextarea", inheritAttrs: false });
@@ -187,7 +187,38 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["change", "click", "focus", "blur", "update:modelValue", "mousedown"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the textarea value changes.
+   * @property {string} value
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when the textarea value changes.
+   */
+  "change",
+
+  /**
+   * Triggers when the textarea is clicked.
+   */
+  "click",
+
+  /**
+   * Triggers when the textarea is focused.
+   */
+  "focus",
+
+  /**
+   * Triggers when the textarea loses focus.
+   */
+  "blur",
+
+  /**
+   * Triggers when mouse button is released over the element.
+   */
+  "mousedown",
+]);
 
 const slots = useSlots();
 

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

@@ -4,49 +4,46 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { loader, ellipse } = config.value;
-
-  const cvaLoader = cva({
-    base: loader.base,
-    variants: loader.variants,
-    compoundVariants: loader.compoundVariants,
-  });
-
-  const cvaEllipse = cva({
-    base: ellipse.base,
-    variants: ellipse.variants,
-    compoundVariants: ellipse.compoundVariants,
-  });
-
-  const loaderClasses = computed(() =>
-    cvaLoader({
-      size: props.size,
-    }),
+export default function useAttrs(props) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const ellipseClasses = computed(() =>
-    setColor(
-      cvaEllipse({
-        size: props.size,
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
+  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 });
 
-  const loaderAttrs = getAttrs("loader", { classes: loaderClasses });
-  const ellipseRaw = getAttrs("ellipse", { classes: ellipseClasses });
+    if (key === "ellipse") {
+      const ellipseAttrs = attrs[`${key}Attrs`];
 
-  const ellipseAttrs = computed(() => (classes) => ({
-    ...ellipseRaw.value,
-    class: cx([ellipseRaw.value.class, classes]),
-  }));
+      attrs[`${key}Attrs`] = computed(() => (classes) => ({
+        ...ellipseAttrs,
+        class: cx([ellipseAttrs.value.class, classes]),
+      }));
+    }
+  }
 
   return {
-    loaderAttrs,
-    ellipseAttrs,
+    ...attrs,
     config,
   };
 }

package/ui.loader/index.vue

@@ -16,7 +16,7 @@ import UIService from "../service.ui";
 
 import { ULoader } 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: "ULoader", inheritAttrs: false });

package/ui.loader-rendering/composables/attrs.composable.js

@@ -4,29 +4,37 @@ import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
+export default function useAttrs(props) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses, isComponent: true });
+  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 });
+  }
 
   return {
-    wrapperAttrs,
+    ...attrs,
     config,
   };
 }

package/ui.loader-rendering/configs/default.config.js

@@ -14,6 +14,7 @@ export default /*tw*/ {
       },
     },
   },
+  loader: "{ULoader}",
   transition: {
     enterFromClass: "scale-110 transform",
     leaveActiveClass: "scale-110 transform",

package/ui.loader-rendering/index.vue

@@ -1,7 +1,12 @@
 <template>
   <Transition v-bind="config.transition">
     <div v-if="showLoader" v-bind="wrapperAttrs">
-      <ULoader :loading="showLoader" size="lg" :color="color === 'white' ? 'grayscale' : 'white'" />
+      <ULoader
+        :loading="showLoader"
+        size="lg"
+        :color="color === 'white' ? 'grayscale' : 'white'"
+        v-bind="loaderAttrs"
+      />
     </div>
   </Transition>
 </template>
@@ -14,7 +19,7 @@ import ULoader from "../ui.loader";
 
 import { ULoaderRendering } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { useLoaderRendering } from "./composables/useLoaderRendering";
 
 /* Should be a string for correct web-types gen */
@@ -39,7 +44,7 @@ const props = defineProps({
   },
 });
 
-const { wrapperAttrs, config } = useAttrs(props);
+const { wrapperAttrs, loaderAttrs, config } = useAttrs(props);
 const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
 
 onMounted(() => {

package/ui.loader-top/composables/attrs.composable.js

@@ -4,28 +4,37 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { progress } = config.value;
-
-  const cvaProgress = cva({
-    base: progress.base,
-    variants: progress.variants,
-    compoundVariants: progress.compoundVariants,
-  });
-
-  const progressClasses = computed(() =>
-    setColor(
-      cvaProgress({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
+export default function useAttrs(props) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const progressAttrs = getAttrs("progress", { classes: progressClasses.value });
+  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 });
+  }
 
   return {
-    progressAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.loader-top/index.vue

@@ -13,7 +13,7 @@ import { useLoaderTop } from "./composables/useLoaderTop";
 
 import { ULoaderTop, MAXIMUM, SPEED } 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: "ULoaderTop", inheritAttrs: false });

package/ui.navigation-pagination/composables/attrs.composable.js

@@ -1,45 +1,55 @@
 import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
-import { cx } from "../../service.ui";
+import { cva, cx } from "../../service.ui";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
 
-  const listAttrs = getAttrs("list");
-  const itemAttrsRaw = getAttrs("item");
-  const itemEllipsisAttrs = getAttrs("itemEllipsis");
-  const ellipsisAttrs = getAttrs("ellipsis");
-  const navigationButtonAttrs = getAttrs("navigationButton", { isComponent: true });
-  const navigationButtonTextAttrs = getAttrs("navigationButtonText");
-  const pageButtonAttrsRaw = getAttrs("pageButton", { isComponent: true });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const itemAttrs = computed(() => (page = 0) => {
-    const itemClass = page && !isFinite(page.number) && ellipsisAttrs;
+    const classes = computed(() => {
+      const value = config.value[key];
 
-    return {
-      ...itemAttrsRaw.value,
-      class: cx([itemAttrsRaw.value.class, itemClass]),
-    };
-  });
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
 
-  const pageButtonAttrs = computed(() => (page) => {
-    const pageButtonActiveClasses = page.isActive && config.value.pageButtonActive;
+      return "";
+    });
 
-    return {
-      ...pageButtonAttrsRaw.value,
-      class: cx([pageButtonAttrsRaw.value.class, pageButtonActiveClasses]),
-    };
-  });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "item") {
+      attrs.itemAttrs = computed(() => (page = 0) => {
+        const itemClass = page && !isFinite(page.number) && getAttrs("ellipsis");
+
+        return {
+          ...getAttrs("item"),
+          class: cx([getAttrs("item").value.class, itemClass]),
+        };
+      });
+    }
+
+    if (key === "pageButton") {
+      attrs.pageButtonAttrs = computed(() => (page) => {
+        const pageButtonActiveClasses = page.isActive && config.value.pageButtonActive;
+
+        return {
+          ...getAttrs("pageButton"),
+          class: cx([getAttrs("pageButton").value.class, pageButtonActiveClasses]),
+        };
+      });
+    }
+  }
 
   return {
-    listAttrs,
-    itemAttrs,
-    itemEllipsisAttrs,
-    navigationButtonAttrs,
-    navigationButtonTextAttrs,
-    pageButtonAttrs,
-    ellipsisAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.navigation-pagination/configs/default.config.js

@@ -3,9 +3,9 @@ export default /*tw*/ {
   item: "h-9 min-w-9 flex items-center justify-center",
   ellipsis: "hidden md:flex",
   itemEllipsis: "leading-none",
-  navigationButton: "size-full rounded font-normal disabled:hover:bg-transparent",
+  navigationButton: "{UButton} size-full rounded font-normal disabled:hover:bg-transparent",
   navigationButtonText: "h-9 min-w-9 leading-none",
-  pageButton: "size-full rounded font-normal disabled:hover:bg-transparent",
+  pageButton: "{UButton} size-full rounded font-normal disabled:hover:bg-transparent",
   pageButtonActive: `
     rounded !bg-brand-900/15
     hover:!text-brand-900 !hover:bg-brand-900/15 disabled:hover:bg-brand-900/15

package/ui.navigation-pagination/index.vue

@@ -9,7 +9,8 @@
         v-bind="navigationButtonAttrs"
         @click="goToFirstPage"
       >
-        <slot name="first-label">
+        <!-- @slot Use it to add something instead of the "first" label. -->
+        <slot name="first">
           <span v-bind="navigationButtonTextAttrs" v-html="firstLabel" />
         </slot>
       </UButton>
@@ -23,7 +24,8 @@
         v-bind="navigationButtonAttrs"
         @click="goToPrevPage"
       >
-        <slot name="prev-label">
+        <!-- @slot Use it to add something instead of the "prev" label. -->
+        <slot name="prev">
           <span v-bind="navigationButtonTextAttrs" v-html="prevLabel" />
         </slot>
       </UButton>
@@ -54,7 +56,8 @@
         v-bind="navigationButtonAttrs"
         @click="goToNextPage"
       >
-        <slot name="next-label">
+        <!-- @slot Use it to add something instead of the "next" label. -->
+        <slot name="next">
           <span v-bind="navigationButtonTextAttrs" v-html="nextLabel" />
         </slot>
       </UButton>
@@ -68,7 +71,8 @@
         v-bind="navigationButtonAttrs"
         @click="goToLastPage"
       >
-        <slot name="next-label">
+        <!-- @slot Use it to add something instead of the "last" label. -->
+        <slot name="last">
           <span v-bind="navigationButtonTextAttrs" v-html="lastLabel" />
         </slot>
       </UButton>
@@ -85,7 +89,7 @@ import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UPagination, ELLIPSIS_LABEL } 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: "UPagination", inheritAttrs: false });
@@ -207,7 +211,19 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["change", "update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when current page changes.
+   * @property {number} value
+   */
+  "change",
+
+  /**
+   * Triggers when current page changes.
+   * @property {number} value
+   */
+  "update:modelValue",
+]);
 
 const {
   listAttrs,

package/ui.navigation-progress/components/StepperProgress.vue

@@ -40,7 +40,7 @@ import { computed } from "vue";
 
 import { GRAY_COLORS } from "../../preset.tailwind/constants";
 
-import { useAttrs } from "../composables/attrs.composable";
+import useAttrs from "../composables/attrs.composable";
 
 const props = defineProps({
   progressPercent: {