vueless 0.0.813 → 0.0.815

package/ui.form-date-picker-range/types.ts

@@ -45,6 +45,7 @@ export interface UDatePickerRangePeriodMenuAttrs {
   rangeSwitchButtonAttrs: Ref<UnknownObject>;
   rangeSwitchTitleAttrs: Ref<UnknownObject>;
   rangeSwitchWrapperAttrs: Ref<UnknownObject>;
+  customRangeButtonAttrs: Ref<UnknownObject>;
   customRangeDescriptionAttrs: Ref<UnknownObject>;
 }
 
@@ -89,6 +90,31 @@ export interface UDatePickerRangeProps<TModelValue> {
    */
   modelValue: TModelValue;
 
+  /**
+   * Datepicker label.
+   */
+  label?: string;
+
+  /**
+   * Datepicker placeholder.
+   */
+  placeholder?: string;
+
+  /**
+   * Datepicker description.
+   */
+  description?: string;
+
+  /**
+   * Datepicker error message.
+   */
+  error?: string;
+
+  /**
+   * Make datepicker disabled.
+   */
+  disabled?: boolean;
+
   /**
    * Custom range button.
    */
@@ -136,45 +162,20 @@ export interface UDatePickerRangeProps<TModelValue> {
    */
   size?: "sm" | "md" | "lg";
 
-  /**
-   * Left icon name.
-   */
-  leftIcon?: string;
-
-  /**
-   * Right icon name.
-   */
-  rightIcon?: string;
-
-  /**
-   * Datepicker label.
-   */
-  label?: string;
-
   /**
    * Datepicker label placement.
    */
   labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
 
   /**
-   * Datepicker placeholder.
-   */
-  placeholder?: string;
-
-  /**
-   * Datepicker description.
-   */
-  description?: string;
-
-  /**
-   * Datepicker error message.
+   * Left icon name.
    */
-  error?: string;
+  leftIcon?: string;
 
   /**
-   * Make datepicker disabled.
+   * Right icon name.
    */
-  disabled?: boolean;
+  rightIcon?: string;
 
   /**
    * Unique element id.

package/ui.navigation-breadcrumbs/storybook/stories.ts

@@ -4,13 +4,16 @@ import UBreadcrumbs from "../../ui.navigation-breadcrumbs/UBreadcrumbs.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UButton from "../../ui.button/UButton.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UBreadcrumbsArgs extends Props {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "color";
 }
 
 interface UBreadcrumbsArgs extends Props {
@@ -35,7 +38,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UBreadcrumbsArgs> = (args: UBreadcrumbsArgs) => ({
-  components: { UBreadcrumbs },
+  components: { UBreadcrumbs, UButton, UBadge, UIcon },
   setup() {
     const slots = getSlotNames(UBreadcrumbs.__name);
 
@@ -49,7 +52,7 @@ const DefaultTemplate: StoryFn<UBreadcrumbsArgs> = (args: UBreadcrumbsArgs) => (
 });
 
 const EnumVariantTemplate: StoryFn<UBreadcrumbsArgs> = (args: UBreadcrumbsArgs, { argTypes }) => ({
-  components: { UBreadcrumbs, UCol },
+  components: { UBreadcrumbs, UCol, URow, ULabel },
   setup() {
     return {
       args,
@@ -58,12 +61,11 @@ const EnumVariantTemplate: StoryFn<UBreadcrumbsArgs> = (args: UBreadcrumbsArgs,
   },
   template: `
     <UCol>
-      <UBreadcrumbs
-        v-for="(option, index) in options"
-        :key="index"
-        v-bind="args"
-        :[args.enum]="option"
-      />
+      <URow v-for="(option, index) in options" :key="index" align="center">
+        <ULabel :label="option">
+          <UBreadcrumbs v-bind="args" :[args.enum]="option" />
+        </ULabel>
+      </URow>
     </UCol>
   `,
 });
@@ -74,16 +76,31 @@ Default.args = {};
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Styles = DefaultTemplate.bind({});
-Styles.args = { color: "green", dashed: true };
-Styles.parameters = {
-  docs: {
-    description: {
-      story:
-        "For a full list of ULink's supported colors, underlined/dashed styles, etc., see the [ULink Documentation](https://ui.vueless.com/?path=/docs/1060--docs).",
-    },
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = { enum: "color" };
+
+export const UnderlineVariants: StoryFn<UBreadcrumbsArgs> = (args: UBreadcrumbsArgs) => ({
+  components: { UBreadcrumbs },
+  setup() {
+    const variants = [
+      { name: "Default", props: {} },
+      { name: "Dashed", props: { dashed: true } },
+      { name: "Underlined", props: { underlined: true } },
+      { name: "No underline", props: { underlined: false } },
+    ];
+
+    return {
+      args,
+      variants,
+    };
   },
-};
+  template: `
+    <div v-for="variant in variants" :key="variant.name" class="mb-8">
+      <div class="text-sm font-medium mb-2">{{ variant.name }}</div>
+      <UBreadcrumbs v-bind="variant.props" :links="args.links" />
+    </div>
+  `,
+});
 
 export const LinkStates = DefaultTemplate.bind({});
 LinkStates.args = {
@@ -102,7 +119,7 @@ LinkStates.parameters = {
     description: {
       story:
         // eslint-disable-next-line vue/max-len
-        "A breadcrumb is automatically disabled, if: <br /> - it does not have both `route` and `href` properties; <br /> - it has `disabled` property set to `true.",
+        "A breadcrumb is automatically disabled, if: <br /> - it does not have both `route` and `href` properties; <br /> - it has `disabled` property set to `true`.",
     },
   },
 };
@@ -124,33 +141,34 @@ LinkIcon.parameters = {
   },
 };
 
-export const Slots: StoryFn<UBreadcrumbsArgs> = (args) => ({
-  components: { UBreadcrumbs, UBadge, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UBreadcrumbs v-bind="args">
-      <template #icon="{ index }">
-        <UBadge
-          v-if="index === 1"
-          label="Info"
-          color="green"
-          size="sm"
-        />
-      </template>
-    </UBreadcrumbs>
+export const SlotIcon = DefaultTemplate.bind({});
+SlotIcon.args = {
+  slotTemplate: `
+    <template #icon="{ index }">
+      <UBadge
+        v-if="index === 1"
+        label="Info"
+        color="green"
+        size="sm"
+      />
+    </template>
+  `,
+};
 
-    <UBreadcrumbs v-bind="args">
-      <template #label="{ label, index }">
-        <UButton v-if="index === 0" :label="label" size="2xs" />
-      </template>
-    </UBreadcrumbs>
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  slotTemplate: `
+    <template #label="{ label, index }">
+      <UButton v-if="index === 0" :label="label" size="2xs" />
+    </template>
+  `,
+};
 
-    <UBreadcrumbs v-bind="args">
-      <template #divider="{ index }">
-        <span>/</span>
-      </template>
-    </UBreadcrumbs>
+export const SlotDivider = DefaultTemplate.bind({});
+SlotDivider.args = {
+  slotTemplate: `
+    <template #divider="{ index }">
+      <UIcon v-if="index === 1" name="double_arrow" size="xs" />
+    </template>
   `,
-});
+};

package/ui.navigation-pagination/UPagination.vue

@@ -133,8 +133,11 @@ const {
       :data-test="getDataTest('first')"
       @click="goToFirstPage"
     >
-      <!-- @slot Use it to add something instead of the "first" label. -->
-      <slot name="first">
+      <!--
+        @slot Use it to add something instead of the "first" label.
+        @binding {string} icon-name
+      -->
+      <slot name="first" :icon-name="config.defaults.firstIcon">
         <UIcon
           v-if="!firstLabel"
           internal
@@ -154,8 +157,11 @@ const {
       :data-test="getDataTest('prev')"
       @click="goToPrevPage"
     >
-      <!-- @slot Use it to add something instead of the "prev" label. -->
-      <slot name="prev">
+      <!--
+        @slot Use it to add something instead of the "prev" label.
+        @binding {string} icon-name
+      -->
+      <slot name="prev" :icon-name="config.defaults.prevIcon">
         <UIcon
           v-if="!prevLabel"
           internal
@@ -208,7 +214,10 @@ const {
       :data-test="getDataTest('next')"
       @click="goToNextPage"
     >
-      <!-- @slot Use it to add something instead of the "next" label. -->
+      <!--
+        @slot Use it to add something instead of the "next" label.
+        @binding {string} icon-name
+      -->
       <slot name="next">
         <UIcon
           v-if="!nextLabel"
@@ -230,7 +239,10 @@ const {
       :data-test="getDataTest('last')"
       @click="goToLastPage"
     >
-      <!-- @slot Use it to add something instead of the "last" label. -->
+      <!--
+        @slot Use it to add something instead of the "last" label.
+        @binding {string} icon-name
+      -->
       <slot name="last">
         <UIcon
           v-if="!lastLabel"

package/ui.navigation-pagination/config.ts

@@ -40,8 +40,8 @@ export default /*tw*/ {
     perPage: 20,
     disabled: false,
     ellipsis: true,
-    showFirst: false,
-    showLast: false,
+    showFirst: true,
+    showLast: true,
     /* icons */
     firstIcon: "first_page",
     lastIcon: "last_page",

package/ui.navigation-pagination/storybook/stories.ts

@@ -6,12 +6,18 @@ import {
 } from "../../utils/storybook.ts";
 
 import UPagination from "../../ui.navigation-pagination/UPagination.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UPaginationArgs extends Props {
   slotTemplate?: string;
+  enum: "variant" | "size";
 }
 
 export default {
@@ -44,23 +50,60 @@ const DefaultTemplate: StoryFn<UPaginationArgs> = (args: UPaginationArgs) => ({
   `,
 });
 
+const EnumVariantTemplate: StoryFn<UPaginationArgs> = (args: UPaginationArgs, { argTypes }) => ({
+  components: { UPagination, UCol, URow, ULabel },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <UCol>
+      <URow
+        v-for="(option, index) in options"
+        :key="index"
+        align="center"
+      >
+        <ULabel :label="option">
+          <UPagination v-bind="args" :[args.enum]="option" />
+        </ULabel>
+      </URow>
+    </UCol>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const PerPage1 = DefaultTemplate.bind({});
-PerPage1.args = { perPage: 1 };
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
 
-export const Limit = DefaultTemplate.bind({});
-Limit.args = { limit: 3 };
+export const PerPage = DefaultTemplate.bind({});
+PerPage.args = { perPage: 100 };
+PerPage.parameters = {
+  docs: {
+    description: {
+      story: "Use `perPage` prop to control number of items shown per page.",
+    },
+  },
+};
 
-export const HideEllipsis = DefaultTemplate.bind({});
-HideEllipsis.args = { ellipsis: false };
+export const Limit = DefaultTemplate.bind({});
+Limit.args = { limit: 11 };
+Limit.parameters = {
+  docs: {
+    description: {
+      story: "`limit` prop controls the limit of visible pages.",
+    },
+  },
+};
 
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
+export const Variant = EnumVariantTemplate.bind({});
+Variant.args = { enum: "variant" };
 
-export const HideNavButtons = DefaultTemplate.bind({});
-HideNavButtons.args = { showLast: false, showFirst: false };
+export const Size = EnumVariantTemplate.bind({});
+Size.args = { enum: "size" };
 
 export const SetCustomNavigationLabel = DefaultTemplate.bind({});
 SetCustomNavigationLabel.args = {
@@ -69,3 +112,76 @@ SetCustomNavigationLabel.args = {
   lastLabel: "⏩",
   firstLabel: "⏪",
 };
+SetCustomNavigationLabel.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "Feel free to customize each navigation button via the respective prop (`firstLabel`, `prevLabel`, `nextLabel`, `lastLabel`).",
+    },
+  },
+};
+
+export const HideEllipsis = DefaultTemplate.bind({});
+HideEllipsis.args = { ellipsis: false };
+HideEllipsis.parameters = {
+  docs: {
+    description: {
+      story: "You can hide ellipsis by setting `ellipsis` prop to `false`.",
+    },
+  },
+};
+
+export const HideNavButtons = DefaultTemplate.bind({});
+HideNavButtons.args = { showLast: false, showFirst: false };
+HideNavButtons.parameters = {
+  docs: {
+    description: {
+      story:
+        "If you need to hide first / last navigation buttons - set `showFirst` / `showLast` props to `false`.",
+    },
+  },
+};
+
+export const Slots: StoryFn<UPaginationArgs> = (args) => ({
+  components: { UPagination, UBadge, UCol, URow, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCol>
+      <UPagination v-bind="args" v-model="args.modelValue">
+        <template #first>
+          <UBadge label="Slot First" size="sm" />
+        </template>
+      </UPagination>
+
+      <UPagination v-bind="args" v-model="args.modelValue">
+        <template #prev>
+          <UBadge label="Slot Prev" size="sm" />
+        </template>
+      </UPagination>
+
+      <URow align="center">
+        <UPagination v-bind="args" v-model="args.modelValue">
+          <template #ellipsis>
+            <UIcon name="more_horiz" size="sm" />
+          </template>
+        </UPagination>
+        <span class="text-sm">Slot Ellipsis</span>
+      </URow>
+
+      <UPagination v-bind="args" v-model="args.modelValue">
+        <template #next>
+          <UBadge label="Slot Next" size="sm" />
+        </template>
+      </UPagination>
+
+      <UPagination v-bind="args" v-model="args.modelValue">
+        <template #last>
+          <UBadge label="Slot Last" size="sm" />
+        </template>
+      </UPagination>
+    </UCol>
+  `,
+});

package/ui.navigation-progress/UProgress.vue

@@ -86,7 +86,6 @@ const {
       <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

package/ui.navigation-progress/storybook/stories.ts

@@ -9,6 +9,7 @@ import UProgress from "../../ui.navigation-progress/UProgress.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { UProgressProps } from "../types.ts";
@@ -35,11 +36,11 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UProgressArgs> = (args: UProgressArgs) => ({
-  components: { UCol, UProgress, UButton, UIcon },
+  components: { UCol, UProgress, UButton, UIcon, UBadge },
   setup() {
     const slots = getSlotNames(UProgress.__name);
 
-    args.value = args.max ? 1 : 10;
+    args.value = args.max ? 0 : 10;
     args.iterator = args.max ? 1 : 10;
 
     function updateProgress() {
@@ -53,7 +54,7 @@ const DefaultTemplate: StoryFn<UProgressArgs> = (args: UProgressArgs) => ({
   template: `
     <UCol>
       <UProgress v-bind="args">${args.slotTemplate || getSlotsFragment("")}</UProgress>
-      <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
+      <UButton label="Next Step" size="sm" variant="thirdary" filled @click="updateProgress" />
     </UCol>
   `,
 });
@@ -77,8 +78,13 @@ const EnumVariantTemplate: StoryFn<UProgressArgs> = (args: UProgressArgs, { argT
         v-bind="args"
         :[args.enum]="option"
         :value="args.progress"
-      />
-    <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
+        indicator
+      >
+        <template #indicator>
+          {{ option }}
+        </template>
+      </UProgress>
+    <UButton label="Next Step" size="sm" variant="thirdary" filled @click="updateProgress" />
     </UCol>
   `,
 });
@@ -86,46 +92,71 @@ const EnumVariantTemplate: StoryFn<UProgressArgs> = (args: UProgressArgs, { argT
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Max = DefaultTemplate.bind({});
+Max.args = { max: ["Step 0", "Step 1", "Step 2"] };
+Max.parameters = {
+  docs: {
+    description: {
+      story: "Control Progress max amount of steps using the `max` prop.",
+    },
+  },
+};
+
 export const VariantStepper = DefaultTemplate.bind({});
-VariantStepper.args = { variant: "stepper", max: ["Step 0", "Step 1", "Step 2"] };
+VariantStepper.args = {
+  variant: "stepper",
+  max: ["Introduction", "Personal Information", "Shipment Address"],
+};
 
 export const Indicator = DefaultTemplate.bind({});
 Indicator.args = { indicator: true };
+Indicator.parameters = {
+  docs: {
+    description: {
+      story: "This prop controls Progress indicator visibility.",
+    },
+  },
+};
 
-export const Steps = DefaultTemplate.bind({});
-Steps.args = { max: ["Step 0", "Step 1", "Step 2"] };
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
 
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color" };
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
-
-export const IndicatorSlot = DefaultTemplate.bind({});
-IndicatorSlot.args = {
+export const SlotIndicator = DefaultTemplate.bind({});
+SlotIndicator.args = {
   indicator: true,
   slotTemplate: `
-  <template #indicator>
-    <UIcon
-      name="star"
-      color="black"
-    />
+  <template #indicator="{ percent }">
+    <UBadge :label="'Current percent is: ' + percent" />
   </template>
 `,
 };
 
-export const StepSlot = DefaultTemplate.bind({});
-StepSlot.args = {
-  max: ["Step 0", "Step 1", "Step 2"],
+export const SlotStep = DefaultTemplate.bind({});
+SlotStep.args = {
+  max: ["Order Placed", "Processing", "Shipped", "Delivered"],
   slotTemplate: `
-  <template #step-0>
-    💻
+  <template #step-0="{ step, value, max }">
+    <div class="flex items-center gap-2">
+      📦 <span>Step: {{ step }} ({{ value + 1 }} / {{ max.length }})</span>
+    </div>
   </template>
-  <template #step-1>
-    🧇
+  <template #step-1="{ step, value, max }">
+    <div class="flex items-center gap-2">
+      ⚙️ <span>Step: {{ step }} ({{ value + 1 }} / {{ max.length }})</span>
+    </div>
   </template>
-  <template #step-2>
-    😴
+  <template #step-2="{ step, value, max }">
+    <div class="flex items-center gap-2">
+      🚚 <span>Step: {{ step }} ({{ value + 1 }} / {{ max.length }})</span>
+    </div>
   </template>
-`,
+  <template #step-3="{ step, value, max }">
+    <div class="flex items-center gap-2">
+      🏠 <span>Step: {{ step }} ({{ value + 1 }} / {{ max.length }})</span>
+    </div>
+  </template>
+  `,
 };

package/ui.navigation-tab/UTab.vue

@@ -86,7 +86,7 @@ const { getDataTest, tabButtonAttrs, tabButtonActiveAttrs } = useUI<Config>(
         @binding {boolean} active
         @binding {string} icon-name
       -->
-      <slot :label="label" :active="isActive" :icon-name="iconName" />
+      <slot name="label" :label="label" :active="isActive" :icon-name="iconName" />
     </template>
 
     <template #right="{ iconName }">