vueless 0.0.813 → 0.0.814

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.813",
+  "version": "0.0.814",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

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

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

@@ -7,6 +7,8 @@ import {
 
 import UTab from "../../ui.navigation-tab/UTab.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -52,13 +54,55 @@ Default.args = {};
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
-export const SlotDefault = DefaultTemplate.bind({});
-SlotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      <div class="flex items-center">
-        <UIcon name="star" size="sm" color="inherit" />
-      </div>
-    </template>
+export const IconProps: StoryFn<UTabArgs> = (args) => ({
+  components: { UTab, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UTab
+        v-bind="args"
+        label="Inbox"
+        left-icon="inbox"
+      />
+      <UTab
+        v-bind="args"
+        icon="inbox_customize"
+      />
+      <UTab
+        v-bind="args"
+        label="Spam"
+        right-icon="error"
+      />
+    </URow>
+  `,
+});
+
+export const Slots: StoryFn<UTabArgs> = (args) => ({
+  components: { UTab, URow, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UTab v-bind="args" label="What's new?">
+        <template #left>
+          <UBadge label="Info" size="sm" />
+        </template>
+      </UTab>
+
+      <UTab v-bind="args" label="Inbox">
+        <template #label="{ label }">
+          <UBadge :label="label" size="sm" />
+        </template>
+      </UTab>
+
+      <UTab v-bind="args" >
+        <template #right>
+          <UBadge label="New!" size="sm" />
+        </template>
+      </UTab>
+    </URow>
   `,
-};
+});

package/ui.navigation-tabs/config.ts

@@ -42,6 +42,7 @@ export default /*tw*/ {
     size: "md",
     block: false,
     square: false,
+    scrollable: false,
     /* icons */
     nextIcon: "chevron_right",
     prevIcon: "chevron_left",

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

@@ -6,6 +6,8 @@ import {
 } from "../../utils/storybook.ts";
 
 import UTabs from "../../ui.navigation-tabs/UTabs.vue";
+import URow from "../../ui.container-row/URow.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -22,9 +24,9 @@ export default {
   args: {
     modelValue: "1",
     options: [
-      { label: "Tab 1", value: "1" },
-      { label: "Tab 2", value: "2" },
-      { label: "Tab 3", value: "3" },
+      { label: "Dashboard", value: "1" },
+      { label: "Orders", value: "2" },
+      { label: "Settings", value: "3" },
     ],
   },
   argTypes: {
@@ -59,7 +61,7 @@ const DefaultTemplate: StoryFn<UTabsArgs> = (args: UTabsArgs) => ({
 });
 
 const EnumVariantTemplate: StoryFn<UTabsArgs> = (args: UTabsArgs, { argTypes }) => ({
-  components: { UTabs },
+  components: { UTabs, URow, ULabel },
   setup() {
     return {
       args,
@@ -67,15 +69,20 @@ const EnumVariantTemplate: StoryFn<UTabsArgs> = (args: UTabsArgs, { argTypes })
     };
   },
   template: `
-    <div class="space-y-16">
-      <UTabs
-        v-for="(option, index) in options"
-        :key="index"
-        v-bind="args"
-        v-model="args.modelValue"
-        :[args.enum]="option"
-      />
-    </div>
+
+    <URow
+      v-for="(option, index) in options"
+      :key="index"
+      align="center"
+    >
+      <ULabel :label="option">
+        <UTabs
+          v-bind="args"
+          v-model="args.modelValue"
+          :[args.enum]="option"
+        />
+      </ULabel>
+    </URow>
   `,
 });
 
@@ -85,17 +92,53 @@ Default.args = {};
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const DisabledTab = DefaultTemplate.bind({});
-DisabledTab.args = {
-  options: [
-    { label: "Tab 1", value: 1 },
-    { label: "Tab 2", value: 2, disabled: true },
-    { label: "Tab 3", value: 3 },
-  ],
-};
-
 export const Scrollable = DefaultTemplate.bind({});
 Scrollable.args = {
   options: getOptionsArray(),
   scrollable: true,
 };
+
+export const Block = DefaultTemplate.bind({});
+Block.args = { block: true };
+
+export const Square = DefaultTemplate.bind({});
+Square.args = { square: true };
+Square.parameters = {
+  docs: {
+    description: {
+      story: "Set the same paddings for the tabs.",
+    },
+  },
+};
+
+export const Slots: StoryFn<UTabsArgs> = (args) => ({
+  components: { UTabs },
+  setup() {
+    args.config = { next: "flex items-center", prev: "flex items-center" };
+
+    return { args, getOptionsArray };
+  },
+  template: `
+    <UTabs
+      v-bind="args"
+      :options="getOptionsArray()"
+      scrollable
+    >
+      <template #prev>
+        <span class="cursor-pointer">◀️</span>
+      </template>
+      <template #next>
+        <span class="cursor-pointer">▶️</span>
+      </template>
+    </UTabs>
+  `,
+});
+Slots.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "When the `scrollable` prop is set to `true`, you can replace the default `prev` and `next` slot icons with custom content.",
+    },
+  },
+};