vueless 0.0.736 → 0.0.738

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";
@@ -72,8 +72,8 @@ export default function useUI<T>(
   function getClasses(key: string, mutatedProps?: MutatedProps) {
     return computed(() => {
       const mutatedPropsValue = toValue(mutatedProps);
-      const color = (toValue(mutatedProps || {}).color || props.color) as BrandColors;
       const value = (config.value as ComponentConfigFull<T>)[key];
+      const color = (toValue(mutatedProps || {}).color || props.color) as BrandColors;
 
       let classes = "";
 
@@ -89,12 +89,6 @@ export default function useUI<T>(
         classes = value;
       }
 
-      if (key === (topLevelClassKey || firstClassKey)) {
-        classes = cx([classes]);
-        // TODO: It will be fixed soon
-        //classes = cx([DEFAULT_BASE_CLASSES, vuelessConfig.baseClasses, classes]);
-      }
-
       classes = classes.replaceAll(EXTENDS_PATTERN_REG_EXP, "");
 
       return color && !getNestedComponent(value) ? setColor(classes, color) : classes;
@@ -122,7 +116,8 @@ export default function useUI<T>(
    * Get an element attributes for a given key.
    */
   function getAttrs(configKey: string, classes: ComputedRef<string>) {
-    const vuelessAttrs = ref({});
+    const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
+    const vuelessAttrs = ref({} as KeyAttrs);
 
     const attrs = useAttrs() as KeyAttrs;
 
@@ -141,7 +136,6 @@ 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);
@@ -151,8 +145,6 @@ export default function useUI<T>(
 
       const commonAttrs: KeyAttrs = {
         ...(isTopLevelKey ? attrs : {}),
-        "data-vl-root": isTopLevelKey || null,
-        "data-vl-child": attrs["data-vl-child"] ? null : true,
         "vl-component": isDev ? attrs["vl-component"] || componentName || null : null,
         "vl-key": isDev ? attrs["vl-key"] || configKey || null : null,
         "vl-child-component": isDev && attrs["vl-component"] ? nestedComponent : null,
@@ -162,21 +154,9 @@ export default function useUI<T>(
       /* Delete value key to prevent v-model overwrite. */
       delete commonAttrs.value;
 
-      let topLevelClasses;
-
-      if (!commonAttrs["data-vl-child"] && !attrs["data-vl-root"]) {
-        topLevelClasses = commonAttrs.class || "";
-      }
-
-      // console.log(configKey, isTopLevelKey, commonAttrs["data-vl-child"], attrs["data-vl-root"]);
-
-      if (isTopLevelKey) {
-        topLevelClasses = attrs.class;
-      }
-
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: cx([...extendsClasses, toValue(classes), topLevelClasses]),
+        class: cx([...extendsClasses, toValue(classes), commonAttrs.class]),
         config: getMergedConfig({
           defaultConfig: extendsKeyConfig,
           globalConfig: keyConfig,
@@ -254,6 +234,15 @@ export default function useUI<T>(
       return defaults;
     }
 
+    // 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.736",
+  "version": "0.0.738",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -310,13 +310,11 @@ export type KeyAttrsWithConfig<T> = {
 } & KeyAttrs;
 
 export interface KeyAttrs extends VueAttrs {
-  "data-vl-root"?: boolean | null;
-  "data-vl-child"?: boolean | null;
   "vl-component"?: string | null;
   "vl-key"?: string | null;
   "vl-child-component"?: string | null;
   "vl-child-key"?: string | null;
-  [key: string]: string | boolean | undefined | null;
+  [key: string]: string | boolean | unknown | undefined | null;
 }
 
 export interface VueAttrs {

package/ui.data-table/UTable.vue

@@ -357,7 +357,7 @@ function isShownDateDivider(rowIndex: number) {
   const isPrevSameDate = prevItem?.rowDate === currentItem?.rowDate;
   const isNextSameDate = nextItem?.rowDate === currentItem?.rowDate;
 
-  return isPrevSameDate && !isNextSameDate && props.dateDivider;
+  return !isPrevSameDate && isNextSameDate && props.dateDivider;
 }
 
 function onClickRow(row: Row) {

package/ui.data-table/config.ts

@@ -81,7 +81,7 @@ export default /*tw*/ {
   },
   bodySelectedDateDivider: {
     base: "{>bodyDateDivider}",
-    label: "bg-gray-200 transition",
+    label: "bg-gray-100 transition",
   },
   bodyEmptyState: "{UEmpty} my-8",
   footer: {