vueless 0.0.740 → 0.0.741

package/package.json

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

package/ui.navigation-tab/UTab.vue

@@ -15,6 +15,7 @@ defineOptions({ inheritAttrs: false });
 
 const setUTabsSelectedItem = inject<SetUTabsSelectedItem>("setUTabsSelectedItem");
 const getUTabsSelectedItem = inject("getUTabsSelectedItem");
+const getUTabsScrollable = inject<UTabsProps["scrollable"]>("getUTabsScrollable");
 const getUTabsSquare = inject<UTabsProps["square"]>("getUTabsSquare");
 const getUTabsBlock = inject<UTabsProps["block"]>("getUTabsBlock");
 const getUTabsSize = inject<UTabsProps["size"]>("getUTabsSize", "md");
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
 const size = computed(() => toValue(getUTabsSize));
 const block = computed(() => toValue(getUTabsBlock));
 const square = computed(() => toValue(getUTabsSquare));
+const scrollable = computed(() => toValue(getUTabsScrollable));
 const isActive = computed(() => toValue(getUTabsSelectedItem) === props.value && !props.disabled);
 
 async function onClickSetValue() {
@@ -42,6 +44,7 @@ const mutatedProps = computed(() => ({
   size: size.value,
   block: block.value,
   square: square.value,
+  scrollable: scrollable.value,
   /* component state, not a props */
   active: isActive.value,
 }));

package/ui.navigation-tab/config.ts

@@ -5,6 +5,11 @@ export default /*tw*/ {
       hover:bg-transparent dark:hover:bg-transparent
       active:bg-transparent dark:active:bg-transparent
     `,
+    variants: {
+      scrollable: {
+        false: "-mb-px",
+      },
+    },
     defaults: {
       color: "gray",
     },

package/ui.navigation-tabs/UTabs.vue

@@ -75,6 +75,7 @@ onUnmounted(() => {
 provide("getUTabsSize", () => props.size);
 provide("getUTabsBlock", () => props.block);
 provide("getUTabsSquare", () => props.square);
+provide("getUTabsScrollable", () => props.scrollable);
 provide("getUTabsSelectedItem", () => selectedItem.value);
 provide("setUTabsSelectedItem", (value: string) => (selectedItem.value = value));
 

package/ui.navigation-tabs/config.ts

@@ -1,13 +1,20 @@
 export default /*tw*/ {
-  wrapper: "mb-6 flex gap-1",
-  tabs: {
-    base: "flex flex-nowrap border-b border-gray-200 dark:border-gray-700",
+  wrapper: {
+    base: "mb-6 flex gap-1",
     variants: {
       block: {
         true: "w-full",
       },
+    },
+  },
+  tabs: {
+    base: "flex border-b border-gray-200 dark:border-gray-700",
+    variants: {
       scrollable: {
-        true: "overflow-hidden scroll-smooth",
+        true: "overflow-hidden flex-nowrap scroll-smooth",
+      },
+      block: {
+        true: "w-full",
       },
     },
   },