vueless 0.0.483 → 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/adatper.locale/vueless.ts

@@ -24,7 +24,7 @@ export interface LocaleInstance {
   fallback: Ref<string>;
   t: (key: string, ...params: unknown[]) => string;
   n: (value: number) => string;
-  tm: (key: string, ...params: unknown[]) => string;
+  tm: <TMassages>(key: string) => Partial<TMassages>;
 }
 
 const FALLBACK_LOCALE_CODE = "en";
@@ -86,7 +86,7 @@ function createTranslateMessageFunction(
   fallback: Ref<string>,
   messages: Ref<LocaleMessages>,
 ) {
-  return (key: string) => {
+  return <TMassages>(key: string): Partial<TMassages> => {
     const currentLocale = current.value && messages.value[current.value];
     const fallbackLocale = fallback.value && messages.value[fallback.value];
 
@@ -100,7 +100,7 @@ function createTranslateMessageFunction(
       str = getObjectValueByPath(fallbackLocale, key, null);
     }
 
-    return String(str);
+    return str as TMassages;
   };
 }
 

package/composables/useUI.ts

@@ -25,13 +25,13 @@ import type {
   BrandColors,
   Strategies,
   UnknownObject,
-  VueAttrs,
   Component,
   NestedComponent,
   ComponentNames,
   CVA,
   KeyAttrs,
   KeysToExtend,
+  ExtendedKeyClasses,
 } from "../types.ts";
 
 interface MergedConfigOptions {
@@ -71,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);
   });
 
   /**
@@ -103,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;
     });
   }
@@ -113,7 +115,7 @@ export default function useUI<T>(
    * – value: reactive string of extendingKey classes.
    */
   function getExtendingKeysClasses(extendingKeys: string[], mutatedProps = {}) {
-    const extendingClasses: UnknownObject = {};
+    const extendingClasses: ExtendedKeyClasses = {};
 
     for (const key of extendingKeys) {
       extendingClasses[key] = getClasses(key, mutatedProps);
@@ -192,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 : {}),
       };
     }
 
@@ -212,8 +207,6 @@ export default function useUI<T>(
 
   return {
     config,
-    setColor,
-    getColor,
     getKeysAttrs,
     getExtendingKeysClasses,
     hasSlotContent,
@@ -255,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.483",
+  "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/types.ts

@@ -4,13 +4,18 @@ import { hasSlotContent } from "./composables/useUI.ts";
 import UTextDefaultConfig from "./ui.text-block/config.ts";
 import UButtonDefaultConfig from "./ui.button/config.ts";
 import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
+import UCalendarDefaultConfig from "./ui.form-calendar/config.ts";
 
-import type { ComputedRef, MaybeRef } from "vue";
+import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
 export type TemplateRefElement = MaybeRef<HTMLElement | HTMLElement[] | null>;
 
+export interface ExtendedKeyClasses {
+  [key: string]: Ref<string>;
+}
+
 export interface ThemeConfig {
   /**
    * Components brand (primary) color.
@@ -109,6 +114,7 @@ export interface Components {
   UText?: Partial<typeof UTextDefaultConfig>;
   UButton?: Partial<typeof UButtonDefaultConfig>;
   UBadge?: Partial<typeof UBadgeDefaultConfig>;
+  UCalendar?: Partial<typeof UCalendarDefaultConfig>;
 }
 
 export interface Directives {
@@ -162,9 +168,10 @@ export interface VueAttrs {
   value?: string;
 }
 
-export interface UseAttrs {
+export interface UseAttrs<TConfig> {
   hasSlotContent: typeof hasSlotContent;
-  [key: string]: object | undefined;
+  config: Ref<TConfig | undefined>;
+  [key: string]: Ref<TConfig | undefined> | typeof hasSlotContent;
 }
 
 export interface KeyAttrs extends VueAttrs {