vueless 0.0.739 → 0.0.741

package/composables/useUI.ts

@@ -6,7 +6,7 @@ import {
   STRATEGY_TYPE,
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
-  // DEFAULT_BASE_CLASSES,
+  DEFAULT_BASE_CLASSES,
   EXTENDS_PATTERN_REG_EXP,
   NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../constants.js";
@@ -75,6 +75,9 @@ export default function useUI<T>(
       const value = (config.value as ComponentConfigFull<T>)[key];
       const color = (toValue(mutatedProps || {}).color || props.color) as BrandColors;
 
+      const isTopLevelKey = (topLevelClassKey || firstClassKey) === key;
+      const isNestedComponent = Boolean(getNestedComponent(value));
+
       let classes = "";
 
       if (typeof value === "object" && isCVA(value)) {
@@ -89,9 +92,15 @@ export default function useUI<T>(
         classes = value;
       }
 
-      classes = classes.replaceAll(EXTENDS_PATTERN_REG_EXP, "");
+      if (isTopLevelKey && !isNestedComponent) {
+        classes = cx([DEFAULT_BASE_CLASSES, vuelessConfig.baseClasses, classes]);
+      }
+
+      classes = classes
+        .replaceAll(EXTENDS_PATTERN_REG_EXP, "")
+        .replace(NESTED_COMPONENT_PATTERN_REG_EXP, "");
 
-      return color && !getNestedComponent(value) ? setColor(classes, color) : classes;
+      return color && !isNestedComponent ? setColor(classes, color) : classes;
     });
   }
 
@@ -116,7 +125,6 @@ export default function useUI<T>(
    * Get an element attributes for a given key.
    */
   function getAttrs(configKey: string, classes: ComputedRef<string>) {
-    const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
     const vuelessAttrs = ref({} as KeyAttrs);
 
     const attrs = useAttrs() as KeyAttrs;
@@ -136,6 +144,7 @@ export default function useUI<T>(
       }
 
       const isDev = isCSR && import.meta.env?.DEV;
+      const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
 
       const extendsClasses = getExtendsClasses(configKey);
       const extendsKeyConfig = getExtendsKeyConfig(configKey);
@@ -234,15 +243,6 @@ export default function useUI<T>(
       return defaults;
     }
 
-    // TODO: Injecting global base classes.
-    // if (isTopLevelKey) {
-    //   vuelessAttrs.value.class = cx([
-    //     DEFAULT_BASE_CLASSES,
-    //     vuelessConfig.baseClasses,
-    //     vuelessAttrs.value.class,
-    //   ]);
-    // }
-
     return vuelessAttrs;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.739",
+  "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",
       },
     },
   },

package/utils/ui.ts

@@ -10,7 +10,6 @@ import {
   GRAYSCALE_COLOR,
   ICON_NON_PROPS_DEFAULTS,
   TAILWIND_MERGE_EXTENSION,
-  NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../constants.js";
 
 import type {
@@ -82,7 +81,7 @@ export const {
   cva: classVarianceAuthority,
 } = defineConfig({
   hooks: {
-    onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_PATTERN_REG_EXP, ""),
+    onComplete: (classNames) => twMerge(classNames),
   },
 });