vueless 0.0.729 → 0.0.730

package/package.json

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

package/ui.navigation-tab/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   tabButton: {
     base: `
-      {UButton} -mb-px rounded-none border-0 border-b-2 border-transparent
+      {UButton} rounded-none border-0 border-b-2 border-transparent
       hover:bg-transparent dark:hover:bg-transparent
       active:bg-transparent dark:active:bg-transparent
     `,

package/ui.navigation-tabs/UTabs.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { computed, provide } from "vue";
+import { ref, computed, provide, onMounted, onUnmounted, useTemplateRef } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
 
 import UTab from "../ui.navigation-tab/UTab.vue";
+import UButton from "../ui.button/UButton.vue";
 
-import { COMPONENT_NAME } from "./constants.ts";
+import { COMPONENT_NAME, SCROLL_OFFSET } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
 import type { Props, Config } from "./types.ts";
@@ -32,6 +33,45 @@ const selectedItem = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
+const scrollContainerRef = useTemplateRef<HTMLDivElement | null>("scroll-container");
+const showLeftArrow = ref(false);
+const showRightArrow = ref(false);
+
+function checkScroll() {
+  if (!scrollContainerRef.value) return;
+
+  const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.value;
+
+  showLeftArrow.value = scrollLeft > 0;
+  showRightArrow.value = scrollLeft < scrollWidth - clientWidth;
+}
+
+function scrollPrev() {
+  if (!scrollContainerRef.value) return;
+
+  scrollContainerRef.value.scrollBy({ left: -SCROLL_OFFSET, behavior: "smooth" });
+}
+
+function scrollNext() {
+  if (!scrollContainerRef.value) return;
+
+  scrollContainerRef.value.scrollBy({ left: SCROLL_OFFSET, behavior: "smooth" });
+}
+
+onMounted(() => {
+  if (scrollContainerRef.value) {
+    scrollContainerRef.value.addEventListener("scroll", checkScroll, { passive: true });
+
+    checkScroll();
+  }
+});
+
+onUnmounted(() => {
+  if (scrollContainerRef.value) {
+    scrollContainerRef.value.removeEventListener("scroll", checkScroll);
+  }
+});
+
 provide("getUTabsSize", () => props.size);
 provide("getUTabsBlock", () => props.block);
 provide("getUTabsSquare", () => props.square);
@@ -42,23 +82,54 @@ provide("setUTabsSelectedItem", (value: string) => (selectedItem.value = value))
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { tabsAttrs, tabAttrs } = useUI<Config>(defaultConfig);
+const {
+  config,
+  wrapperAttrs,
+  tabsAttrs,
+  tabAttrs,
+  prevAttrs,
+  nextAttrs,
+  nextButtonAttrs,
+  prevButtonAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <div v-bind="tabsAttrs" :data-test="dataTest">
-    <!-- @slot Use it to add the UTab component. -->
-    <slot>
-      <UTab
-        v-for="(item, index) in options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-        :disabled="item.disabled"
-        :size="size"
-        v-bind="tabAttrs"
-        :data-test="`${dataTest}-item-${index}`"
-      />
-    </slot>
+  <div v-bind="wrapperAttrs">
+    <div v-if="scrollable && showLeftArrow" v-bind="prevAttrs" @click="scrollPrev">
+      <!--
+        @slot Use it to add something instead of the "prev" button.
+        @binding {string} icon-name
+      -->
+      <slot name="prev" :icon-name="config.defaults.prevIcon">
+        <UButton :icon="config.defaults.prevIcon" v-bind="prevButtonAttrs" />
+      </slot>
+    </div>
+
+    <div ref="scroll-container" v-bind="tabsAttrs" :data-test="dataTest" @scroll="checkScroll">
+      <!-- @slot Use it to add the UTab component. -->
+      <slot>
+        <UTab
+          v-for="(item, index) in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          :disabled="item.disabled"
+          :size="size"
+          v-bind="tabAttrs"
+          :data-test="`${dataTest}-item-${index}`"
+        />
+      </slot>
+    </div>
+
+    <div v-if="scrollable && showRightArrow" v-bind="nextAttrs" @click="scrollNext">
+      <!--
+        @slot Use it to add something instead of the "next" button.
+        @binding {string} icon-name
+      -->
+      <slot name="next" :icon-name="config.defaults.nextIcon">
+        <UButton :icon="config.defaults.nextIcon" v-bind="nextButtonAttrs" />
+      </slot>
+    </div>
   </div>
 </template>

package/ui.navigation-tabs/config.ts

@@ -1,16 +1,42 @@
 export default /*tw*/ {
+  wrapper: "mb-6 flex gap-1",
   tabs: {
-    base: "mb-6 flex flex-nowrap border-b border-gray-200 dark:border-gray-700",
+    base: "flex flex-nowrap border-b border-gray-200 dark:border-gray-700",
     variants: {
       block: {
         true: "w-full",
       },
+      scrollable: {
+        true: "overflow-hidden scroll-smooth",
+      },
     },
   },
   tab: "{UTab}",
+  prev: "",
+  next: "",
+  scrollButton: {
+    base: "{UButton}",
+    defaults: {
+      size: {
+        "2xs": "xs",
+        xs: "xs",
+        sm: "sm",
+        md: "sm",
+        lg: "md",
+        xl: "md",
+      },
+      variant: "thirdary",
+      square: true,
+    },
+  },
+  nextButton: "{>scrollButton}",
+  prevButton: "{>scrollButton}",
   defaults: {
     size: "md",
     block: false,
     square: false,
+    /* icons */
+    nextIcon: "chevron_right",
+    prevIcon: "chevron_left",
   },
 };

package/ui.navigation-tabs/constants.ts

@@ -3,3 +3,5 @@
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
 export const COMPONENT_NAME = "UTabs";
+
+export const SCROLL_OFFSET = 200;

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

@@ -37,6 +37,13 @@ export default {
   },
 } as Meta;
 
+function getOptionsArray(count = 40) {
+  return Array.from({ length: count }, (_, index) => ({
+    label: `Tab ${index + 1}`,
+    value: (index + 1).toString(),
+  }));
+}
+
 const DefaultTemplate: StoryFn<UTabsArgs> = (args: UTabsArgs) => ({
   components: { UTabs },
   setup() {
@@ -86,3 +93,9 @@ DisabledTab.args = {
     { label: "Tab 3", value: 3 },
   ],
 };
+
+export const Scrollable = DefaultTemplate.bind({});
+Scrollable.args = {
+  options: getOptionsArray(),
+  scrollable: true,
+};

package/ui.navigation-tabs/types.ts

@@ -30,6 +30,11 @@ export interface Props {
    */
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
+  /**
+   * Make the Tabs scrollable.
+   */
+  scrollable?: boolean;
+
   /**
    * Make the Tabs fill the width with its container.
    */