vueless 0.0.484 → 0.0.485

package/README.md

@@ -29,7 +29,7 @@ createApp(App).use(vueless).mount('#app');
 3. Add TailwindCSS preset.
 
 ```javascript
-import { vuelessPreset } from "vueless/preset-tailwind.js";
+import { vuelessPreset } from "vueless/preset-tailwind";
 
 export default {
   presets: [vuelessPreset],

package/composables/useUI.ts

@@ -25,7 +25,6 @@ import type {
   BrandColors,
   Strategies,
   UnknownObject,
-  VueAttrs,
   Component,
   NestedComponent,
   ComponentNames,
@@ -72,14 +71,12 @@ export default function useUI<T>(
   watchEffect(() => {
     const propsConfig = propsConfigGetter ? propsConfigGetter() : {};
 
-    const mergedConfig = getMergedConfig({
+    config.value = getMergedConfig({
       defaultConfig,
       globalConfig,
       propsConfig,
       vuelessStrategy,
     });
-
-    config.value = mergeClassesIntoConfig(mergedConfig, topLevelClassKey || firstClassKey, attrs);
   });
 
   /**
@@ -104,6 +101,10 @@ export default function useUI<T>(
         classes = value;
       }
 
+      if (key === (topLevelClassKey || firstClassKey)) {
+        classes = cx([classes, attrs.class]);
+      }
+
       return color ? setColor(classes, color) : classes;
     });
   }
@@ -193,18 +194,11 @@ export default function useUI<T>(
       const configKeyValue = config.value[configKey] as Component | string;
       const isObject = typeof configKeyValue === "object";
 
-      const configAttrs = {
-        config: configKeyValue,
-        ...(isObject ? configKeyValue.defaults : {}),
-      };
-
-      const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
-      const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
-
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: cx([getBaseClasses(toValue(classes)), attrClass]),
-        ...((isObject && configAttrs) || {}),
+        class: toValue(classes),
+        ...(isObject ? { config: configKeyValue } : {}),
+        ...(isObject ? configKeyValue.defaults : {}),
       };
     }
 
@@ -213,8 +207,6 @@ export default function useUI<T>(
 
   return {
     config,
-    setColor,
-    getColor,
     getKeysAttrs,
     getExtendingKeysClasses,
     hasSlotContent,
@@ -256,23 +248,6 @@ function getMergedConfig({
   return mergedConfig;
 }
 
-/**
- * Merge component classes from "class" attribute into final config.
- */
-function mergeClassesIntoConfig(config: Component, topLevelClassKey: string, attrs: VueAttrs) {
-  const configTopKey = config[topLevelClassKey];
-
-  if (typeof configTopKey === "object") {
-    (configTopKey as CVA).base = cx([(configTopKey as CVA)?.base, attrs.class]);
-
-    config[topLevelClassKey] = configTopKey;
-  } else {
-    config[topLevelClassKey] = cx([configTopKey, attrs.class]);
-  }
-
-  return config;
-}
-
 /**
  * Return base classes.
  */

package/package.json

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

package/plugin-vite.js

@@ -27,6 +27,7 @@ export const VuelessUnpluginComponents = (options) =>
 export const Vueless = function (options = {}) {
   const { mode, debug, env, include } = options;
 
+  const isVuelessEnv = env === "vueless";
   const isNuxt = mode === "nuxt-module";
   const srcDir = isNuxt ? process.cwd() : getVueSourceFile();
 
@@ -51,7 +52,7 @@ export const Vueless = function (options = {}) {
         "process.env": {},
       },
       optimizeDeps: {
-        include: ["tailwindcss/colors.js"],
+        include: ["tailwindcss/colors.js", ...(!isVuelessEnv ? ["vueless/preset-tailwind"] : [])],
       },
     }),
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.484",
+  "version": "0.0.485",
   "contributions": {
     "html": {
       "description-markup": "markdown",