vueless 0.0.727 → 0.0.729

package/composables/useUI.ts

@@ -6,6 +6,7 @@ import {
   STRATEGY_TYPE,
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
+  DEFAULT_BASE_CLASSES,
   EXTENDS_PATTERN_REG_EXP,
   NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../constants.js";
@@ -53,7 +54,6 @@ export default function useUI<T>(
 
   const firstClassKey = Object.keys(defaultConfig || {})[0];
   const config = ref({}) as Ref<ComponentConfigFull<T>>;
-  const attrs = useAttrs();
 
   watchEffect(() => {
     const propsConfig = props.config as ComponentConfigFull<T>;
@@ -90,7 +90,7 @@ export default function useUI<T>(
       }
 
       if (key === (topLevelClassKey || firstClassKey)) {
-        classes = cx([classes, attrs.class]);
+        classes = cx([DEFAULT_BASE_CLASSES, vuelessConfig.baseClasses, classes]);
       }
 
       classes = classes.replaceAll(EXTENDS_PATTERN_REG_EXP, "");
@@ -149,18 +149,21 @@ export default function useUI<T>(
 
       const commonAttrs: KeyAttrs = {
         ...(isTopLevelKey ? attrs : {}),
+        "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,
         "vl-child-key": isDev && attrs["vl-component"] ? configKey : null,
       };
 
+      const topLevelClasses = (!attrs["data-vl-child"] && commonAttrs.class) || "";
+
       /* Delete value key to prevent v-model overwrite. */
       delete commonAttrs.value;
 
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: cx([...extendsClasses, toValue(classes)]),
+        class: cx([...extendsClasses, toValue(classes), topLevelClasses]),
         config: getMergedConfig({
           defaultConfig: extendsKeyConfig,
           globalConfig: keyConfig,

package/constants.js

@@ -23,6 +23,9 @@ export const OUTLINE_INCREMENT = 1; /* pixels */
 export const DEFAULT_ROUNDING = 8; /* pixels */
 export const ROUNDING_DECREMENT = 4; /* pixels */
 export const ROUNDING_INCREMENT = 6; /* pixels */
+export const DEFAULT_BASE_CLASSES = `
+  text-gray-900 dark:text-gray-100
+`;
 
 /* Vueless supported colors and shades */
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];

package/package.json

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

package/types.ts

@@ -124,6 +124,11 @@ export interface Config extends ThemeConfig {
    */
   strategy?: Strategies;
 
+  /**
+   * Classes which will be applied to the root element of all vueless components.
+   */
+  baseClasses?: string;
+
   /**
    * Component configs.
    */
@@ -305,11 +310,12 @@ export type KeyAttrsWithConfig<T> = {
 } & KeyAttrs;
 
 export interface KeyAttrs extends VueAttrs {
+  "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 | undefined | null;
+  [key: string]: string | boolean | undefined | null;
 }
 
 export interface VueAttrs {

package/ui.container-accordion/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "group cursor-pointer",
   body: "",
   title: {
-    base: "flex items-center justify-between font-medium text-gray-900",
+    base: "flex items-center justify-between font-medium",
     variants: {
       size: {
         sm: "text-sm",

package/ui.data-list/config.ts

@@ -31,7 +31,7 @@ export default /*tw*/ {
   },
   dragIcon: "{UIcon} {>dataListIcon} icon-drag cursor-move opacity-100",
   label: {
-    base: "font-normal text-gray-900 flex-auto pt-px",
+    base: "font-normal flex-auto pt-px",
     variants: {
       size: {
         sm: "text-xs",

package/ui.data-table/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: "relative w-full overflow-auto",
-  headerCounterBase: "mr-1.5 pr-1.5 font-medium text-sm text-gray-900",
+  headerCounterBase: "mr-1.5 pr-1.5 font-medium text-sm",
   stickyHeader: {
     base: "fixed top-0 flex items-center z-30 overflow-hidden border rounded-none",
     variants: {

package/ui.dropdown-list/config.ts

@@ -10,7 +10,7 @@ export default /*tw*/ {
   option: {
     base: `
       rounded-dynamic-sm px-2 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
-      font-normal !leading-none text-gray-900
+      font-normal !leading-none
       hover:bg-{color}-600/5 active:bg-{color}-600/10
       overflow-hidden text-ellipsis
     `,

package/ui.form-input/config.ts

@@ -33,7 +33,7 @@ export default /*tw*/ {
   rightSlot: "pr-2.5 flex items-center",
   input: {
     base: `
-      block w-full py-2 px-3 font-normal !leading-none text-gray-900 bg-transparent
+      block w-full py-2 px-3 font-normal !leading-none bg-transparent
       border-none rounded-inherit transition focus:ring-0
       placeholder:font-normal placeholder-gray-400
       disabled:text-gray-700 disabled:cursor-not-allowed

package/ui.form-label/config.ts

@@ -24,7 +24,7 @@ export default /*tw*/ {
   },
   content: "flex",
   label: {
-    base: "text-gray-900 z-10 block !leading-none w-max transition",
+    base: "z-10 block !leading-none w-max transition",
     variants: {
       size: {
         sm: "text-xs",

package/ui.form-select/config.ts

@@ -42,7 +42,7 @@ export default /*tw*/ {
   selectedLabels: "flex flex-col col-span-2",
   selectedLabel: {
     base: `
-        font-normal !leading-none text-gray-900 relative truncate
+        font-normal !leading-none relative truncate
         inline-flex items-center whitespace-nowrap mb-0 w-full
       `,
     variants: {
@@ -116,7 +116,7 @@ export default /*tw*/ {
   },
   searchInput: {
     base: `
-        p-0 font-normal !leading-none text-gray-900 relative w-full border-none bg-transparent
+        p-0 font-normal !leading-none relative w-full border-none bg-transparent
         focus:shadow-none focus:outline-none focus:ring-0
         placeholder:text-gray-400 placeholder:font-normal
       `,

package/ui.form-textarea/config.ts

@@ -20,7 +20,7 @@ export default /*tw*/ {
   },
   textarea: {
     base: `
-      px-3 pt-2 pb-1.5 block w-full bg-transparent border-none font-normal text-gray-900
+      px-3 pt-2 pb-1.5 block w-full bg-transparent border-none font-normal
       placeholder:text-gray-400 placeholder:font-normal placeholder:leading-none
       focus:ring-0 disabled:cursor-not-allowed
     `,

package/ui.navigation-progress/config.ts

@@ -32,7 +32,7 @@ export default /*tw*/ {
       },
     },
   },
-  stepperCount: "text-md font-bold text-gray-900 translate-y-2 transform",
+  stepperCount: "text-md font-bold translate-y-2 transform",
   indicator: {
     base: "text-{color}-600 flex justify-end w-full min-w-fit font-medium transition",
     variants: {