vueless 0.0.210 → 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.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: {

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

@@ -4,45 +4,42 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
+export default function useAttrs(props) {
   const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
   );
+
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
-    let classes = "";
-    let value = config.value[key];
-
-    const isVariants = value.variants || value.compoundVariants;
-    const excludeKeys = ["progress", "indicator", "step"];
+    const classes = computed(() => {
+      const value = config.value[key];
 
-    if (isVariants && !excludeKeys.includes(key)) {
-      const getCVA = cva(value);
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
 
-      classes = computed(() => getCVA({ ...props }));
-    }
+      return "";
+    });
 
-    if (isVariants && excludeKeys.includes(key)) {
-      const getCVA = cva(value);
-
-      classes = computed(() =>
-        setColor(getCVA({ ...props, color: getColor(props.color) }), props.color),
-      );
-    }
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
     if (key === "step") {
-      const stepAttrsRaw = getAttrs("step", { classes });
+      const stepAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => (classes) => ({
-        ...stepAttrsRaw.value,
-        class: cx([stepAttrsRaw.value.class, classes]),
+        ...stepAttrs,
+        class: cx([stepAttrs.value.class, classes]),
       }));
-    } else {
-      attrs[`${key}Attrs`] = getAttrs(key, { classes });
     }
   }
 

package/ui.navigation-progress/index.vue

@@ -2,6 +2,12 @@
   <div v-bind="wrapperAttrs">
     <template v-if="isVariant.progress">
       <div v-if="indicator" v-bind="indicatorAttrs" :style="{ width: progressPercent }">
+        <!--
+          @slot Use it to add something instead of the progress indicator.
+          @binding {number} percent
+          @binding {number} value
+          @binding {number} max
+        -->
         <slot name="indicator" :percent="progressPercent" :value="value" :max="realMax">
           {{ progressPercent }}
         </slot>
@@ -12,6 +18,13 @@
 
     <div v-if="isSteps" v-bind="stepAttrs(!value && config.firstStep)">
       <template v-for="(step, index) in max" :key="index">
+        <!--
+          @slot Use it to add something instead of the progress step label.
+          @binding {string} name
+          @binding {number} step
+          @binding {number} value
+          @binding {number} max
+        -->
         <slot
           v-if="isActiveStep(index)"
           :name="`step-${index}`"
@@ -40,7 +53,7 @@
 import { computed } from "vue";
 
 import UIService from "../service.ui";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 import defaultConfig from "./configs/default.config";
 import { UProgress, VARIANT } from "./constants";

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

@@ -4,27 +4,32 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { selected, size }) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    cvaWrapper({
-      disabled: props.disabled,
-      size: size.value,
-      selected: selected.value,
-    }),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+export default function useAttrs(props, { selected, size }) {
+  const { config, getAttrs, 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,
+          size: size.value,
+          selected: selected.value,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    wrapperAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.navigation-tab/index.vue

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

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

@@ -4,24 +4,30 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
 
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const wrapperClasses = computed(() => cvaWrapper({ underlined: props.underlined }));
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
 
-  const tabAttrs = getAttrs("tab", { isComponent: true });
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    wrapperAttrs,
-    tabAttrs,
+    ...attrs,
+    config,
   };
 }

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

@@ -7,7 +7,7 @@ export default /*tw*/ {
       },
     },
   },
-  tab: "",
+  tab: "{UTab}",
   defaultVariants: {
     size: "md",
     underlined: false,

package/ui.navigation-tabs/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <!-- @slot Use it to add the UTab component. -->
     <slot>
       <UTab
         v-for="(item, index) in options"
@@ -23,7 +24,7 @@ import UIService from "../service.ui";
 
 import { UTabs } 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: "UTabs", inheritAttrs: false });
@@ -85,7 +86,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the selected tab changes.
+   * @property {string} modelValue
+   */
+  "update:modelValue",
+]);
 
 const selectedItem = computed({
   get: () => props.modelValue,

package/ui.text-file/configs/default.config.js

@@ -17,4 +17,7 @@ export default /*tw*/ {
       },
     },
   },
+  defaultVariants: {
+    size: "md",
+  },
 };