vueless 1.1.1-beta.6 → 1.1.1-beta.61

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 vuelessjs
+Copyright (c) 2025 vuelessjs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/adapter.locale/locales/en.ts

@@ -1,14 +1,14 @@
-import selectConfig from "../../ui.form-select/config.ts";
-import switchConfig from "../../ui.form-switch/config.ts";
-import inputFileConfig from "../../ui.form-input-file/config.ts";
-import listboxConfig from "../../ui.form-listbox/config.ts";
-import modalConfirmConfig from "../../ui.container-modal-confirm/config.ts";
-import tableConfig from "../../ui.data-table/config.ts";
-import calendarConfig from "../../ui.form-calendar/config.ts";
-import datepickerConfig from "../../ui.form-date-picker/config.ts";
-import datepickerRangeConfig from "../../ui.form-date-picker-range/config.ts";
-import dataListConfig from "../../ui.data-list/config.ts";
-import notifyDefaultConfig from "../../ui.text-notify/config.ts";
+import selectConfig from "../../ui.form-select/config";
+import switchConfig from "../../ui.form-switch/config";
+import inputFileConfig from "../../ui.form-input-file/config";
+import listboxConfig from "../../ui.form-listbox/config";
+import modalConfirmConfig from "../../ui.container-modal-confirm/config";
+import tableConfig from "../../ui.data-table/config";
+import calendarConfig from "../../ui.form-calendar/config";
+import datepickerConfig from "../../ui.form-date-picker/config";
+import datepickerRangeConfig from "../../ui.form-date-picker-range/config";
+import dataListConfig from "../../ui.data-list/config";
+import notifyDefaultConfig from "../../ui.text-notify/config";
 
 export default {
   USelect: selectConfig.i18n,

package/adapter.locale/vue-i18n.ts

@@ -1,5 +1,5 @@
-import type { I18n } from "vue-i18n";
-import type { LocaleInstance } from "../types.ts";
+import type { I18n } from "virtual:vueless/vue-i18n";
+import type { LocaleInstance } from "../types";
 
 export function createVueI18nAdapter(i18n: I18n): LocaleInstance {
   return {
@@ -7,7 +7,6 @@ export function createVueI18nAdapter(i18n: I18n): LocaleInstance {
     locale: i18n.global.locale,
     fallback: i18n.global.fallbackLocale as string,
     messages: i18n.global.messages,
-    // @ts-expect-error Type instantiation is excessively deep and possibly infinite
     t: (key: string, ...params: unknown[]) => i18n.global.t(key, params),
     tm: i18n.global.tm,
     n: i18n.global.n,

package/adapter.locale/vueless.ts

@@ -1,11 +1,11 @@
 import { shallowRef, ref } from "vue";
 import { merge } from "lodash-es";
 
-import en from "./locales/en.ts";
+import en from "./locales/en";
 
 import type { Ref } from "vue";
-import type { VueMessageType } from "vue-i18n";
-import type { UnknownObject, LocaleOptions, LocaleMessages, LocaleInstance } from "../types.ts";
+import type { VueMessageType } from "virtual:vueless/vue-i18n";
+import type { UnknownObject, LocaleOptions, LocaleMessages, LocaleInstance } from "../types";
 
 const FALLBACK_LOCALE_CODE = "en";
 

package/bin/commands/init.js

@@ -1,21 +1,18 @@
 /* eslint-disable no-console */
 
-import { cwd } from "node:process";
 import path from "node:path";
-import { existsSync, mkdirSync } from "node:fs";
-import { writeFile, rename, readFile } from "node:fs/promises";
+import { cwd } from "node:process";
 import { styleText } from "node:util";
+import { existsSync, mkdirSync } from "node:fs";
+import { writeFile, rename } from "node:fs/promises";
 
-import {
-  SUPPRESS_TS_CHECK,
-  COMPONENTS_INDEX_EXPORT,
-  COMPONENTS_INDEX_COMMENT,
-  DEFAULT_VUELESS_CONFIG_CONTENT,
-} from "../constants.js";
+import { detectTypeScript, generateConfigIndexContent } from "../../utils/node/helper.js";
 
+import { DEFAULT_VUELESS_CONFIG_CONTENT } from "../constants.js";
 import {
   JAVASCRIPT_EXT,
   TYPESCRIPT_EXT,
+  VUELESS_CONFIG_DIR,
   CONFIG_INDEX_FILE_NAME,
   VUELESS_CONFIG_FILE_NAME,
 } from "../../constants.js";
@@ -23,7 +20,7 @@ import {
 const vuelessInitOptions = ["--ts", "--js"];
 
 /**
- * Initializes Vueless in the project by creating a default config file and .vueless directory.
+ * Initializes Vueless in the project by creating a default config file and vueless config directory.
  * @param {string[]} options - The function options.
  * @param {boolean} options.includes("--ts") - If true, creates a TypeScript config file.
  * @param {boolean} options.includes("--js") - If true, creates a JavaScript config file.
@@ -72,41 +69,21 @@ export async function vuelessInit(options) {
     ),
   );
 
-  /* Create .vueless directory and index file. */
-  const vuelessDir = path.join(cwd(), ".vueless");
+  /* Create a vueless config directory and index file. */
+  const vuelessDir = path.join(cwd(), VUELESS_CONFIG_DIR);
   const destPath = path.join(vuelessDir, `${CONFIG_INDEX_FILE_NAME}${fileExt}`);
 
   if (!existsSync(vuelessDir)) {
     mkdirSync(vuelessDir);
     console.log(
-      styleText("green", "The '.vueless' directory was created in the project root directory."),
+      styleText(
+        "green",
+        `The '${VUELESS_CONFIG_DIR}' directory was created in the project root directory.`,
+      ),
     );
   }
 
-  const suppressTsCheck = fileExt === TYPESCRIPT_EXT ? `${SUPPRESS_TS_CHECK}\n` : "";
+  const indexFileContent = await generateConfigIndexContent();
 
-  await writeFile(
-    destPath,
-    `${suppressTsCheck}${COMPONENTS_INDEX_COMMENT}\n${COMPONENTS_INDEX_EXPORT}\n`,
-    "utf-8",
-  );
-}
-
-/**
- * Detects if TypeScript is a dependency in the project's package.json
- * @returns {Promise<boolean>} True if TypeScript is found in dependencies or devDependencies
- */
-async function detectTypeScript() {
-  try {
-    const packageJsonPath = path.join(cwd(), "package.json");
-    const packageJsonContent = await readFile(packageJsonPath, "utf-8");
-    const pkg = JSON.parse(packageJsonContent);
-    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
-
-    return Boolean(deps.typescript);
-  } catch (error) {
-    console.error("Failed to detect TypeScript:", error);
-
-    return false;
-  }
+  await writeFile(destPath, indexFileContent, "utf-8");
 }

package/bin/constants.d.ts

@@ -0,0 +1,3 @@
+export const SRC_COMPONENTS_PATH: "/src/components";
+export const COMPONENTS_PATH: "/components";
+export const DEFAULT_VUELESS_CONFIG_CONTENT: "import { componentConfigs } from \"./.vueless\";\n\nexport default {\n  /**\n   * Global settings.\n   */\n  primary: \"grayscale\",\n  neutral: \"gray\",\n  text: 14,\n  outline: 2,\n  rounding: 8,\n  disabledOpacity: 50,\n  colorMode: \"auto\",\n\n  /**\n   * Component settings.\n   */\n  components: /*tw*/ {\n    ...componentConfigs,\n  },\n\n  /**\n   * Directive settings.\n   */\n  directives: {},\n\n  /**\n   * Light theme CSS variable settings.\n   */\n  lightTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-600\",\n    \"--vl-primary-lifted\": \"--vl-primary-700\",\n    \"--vl-primary-accented\": \"--vl-primary-800\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-500\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-600\",\n    \"--vl-secondary-accented\": \"--vl-neutral-700\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-600\",\n    \"--vl-success-lifted\": \"--color-green-700\",\n    \"--vl-success-accented\": \"--color-green-800\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-600\",\n    \"--vl-info-lifted\": \"--color-blue-700\",\n    \"--vl-info-accented\": \"--color-blue-800\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-600\",\n    \"--vl-notice-lifted\": \"--color-violet-700\",\n    \"--vl-notice-accented\": \"--color-violet-800\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-600\",\n    \"--vl-warning-lifted\": \"--color-orange-700\",\n    \"--vl-warning-accented\": \"--color-orange-800\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-600\",\n    \"--vl-error-lifted\": \"--color-red-700\",\n    \"--vl-error-accented\": \"--color-red-800\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-900\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-800\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-700\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-500\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-600\",\n    \"--vl-neutral-accented\": \"--vl-neutral-700\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--color-white\",\n    \"--vl-text-muted\": \"--vl-neutral-400\",\n    \"--vl-text-lifted\": \"--vl-neutral-500\",\n    \"--vl-text-accented\": \"--vl-neutral-600\",\n    \"--vl-text\": \"--vl-neutral-900\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-200\",\n    \"--vl-border\": \"--vl-neutral-300\",\n    \"--vl-border-lifted\": \"--vl-neutral-400\",\n    \"--vl-border-accented\": \"--vl-neutral-600\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--color-white\",\n    \"--vl-bg-muted\": \"--vl-neutral-50\",\n    \"--vl-bg-lifted\": \"--vl-neutral-100\",\n    \"--vl-bg-accented\": \"--vl-neutral-200\",\n    \"--vl-bg-inverted\": \"--vl-neutral-900\",\n  },\n\n  /**\n   * Dark theme CSS variable settings.\n   */\n  darkTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-400\",\n    \"--vl-primary-lifted\": \"--vl-primary-500\",\n    \"--vl-primary-accented\": \"--vl-primary-600\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-300\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-400\",\n    \"--vl-secondary-accented\": \"--vl-neutral-500\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-400\",\n    \"--vl-success-lifted\": \"--color-green-500\",\n    \"--vl-success-accented\": \"--color-green-600\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-400\",\n    \"--vl-info-lifted\": \"--color-blue-500\",\n    \"--vl-info-accented\": \"--color-blue-600\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-400\",\n    \"--vl-notice-lifted\": \"--color-violet-500\",\n    \"--vl-notice-accented\": \"--color-violet-600\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-400\",\n    \"--vl-warning-lifted\": \"--color-orange-500\",\n    \"--vl-warning-accented\": \"--color-orange-600\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-400\",\n    \"--vl-error-lifted\": \"--color-red-500\",\n    \"--vl-error-accented\": \"--color-red-600\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-100\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-200\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-300\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-300\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-400\",\n    \"--vl-neutral-accented\": \"--vl-neutral-500\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--vl-neutral-900\",\n    \"--vl-text-muted\": \"--vl-neutral-600\",\n    \"--vl-text-lifted\": \"--vl-neutral-400\",\n    \"--vl-text-accented\": \"--vl-neutral-300\",\n    \"--vl-text\": \"--vl-neutral-100\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-800\",\n    \"--vl-border\": \"--vl-neutral-700\",\n    \"--vl-border-lifted\": \"--vl-neutral-600\",\n    \"--vl-border-accented\": \"--vl-neutral-400\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--vl-neutral-900\",\n    \"--vl-bg-muted\": \"--vl-neutral-800\",\n    \"--vl-bg-lifted\": \"--vl-neutral-800\",\n    \"--vl-bg-accented\": \"--vl-neutral-700\",\n    \"--vl-bg-inverted\": \"--vl-neutral-100\",\n  },\n};\n";

package/bin/constants.js

@@ -168,17 +168,3 @@ export default {
   },
 };
 `;
-
-export const SUPPRESS_TS_CHECK = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck`;
-
-export const COMPONENTS_INDEX_COMMENT = `/**
- * ⚠️ This file is auto-generated — do not edit it manually.
- * It gets updated automatically whenever the Vite server restarts.
- *
- * This file imports all component config files from the current directory.
- * Only files following the naming pattern "U[Component].config.[ts|js]" will be included.
- * Example: "UButton.config.ts"
- */`;
-
-export const COMPONENTS_INDEX_EXPORT = `export const componentConfigs = {};`;

package/composables/tests/useUI.test.ts

@@ -2,14 +2,15 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { computed, nextTick } from "vue";
 import { mount } from "@vue/test-utils";
 
+import type { ComponentInternalInstance } from "vue";
+
 // TODO: Autogenerated, need to be reviewed
 
 // Mock the ui utils
 vi.mock("../../utils/ui.ts", () => ({
   cx: vi.fn((classes) => (Array.isArray(classes) ? classes.filter(Boolean).join(" ") : classes)),
   cva: vi.fn((config) => {
-    // Return a spy function that can be called and tracked
-    const cvaSpy = vi.fn((props) => {
+    return vi.fn((props) => {
       if (!config.variants) return config.base || "";
 
       let classes = config.base || "";
@@ -17,16 +18,15 @@ vi.mock("../../utils/ui.ts", () => ({
       // Apply variants
       Object.entries(config.variants).forEach(([key, variants]) => {
         const value = props[key];
+        const variantsRecord = variants as UnknownObject;
 
-        if (value && variants[value]) {
-          classes += ` ${variants[value]}`;
+        if (variantsRecord?.[value]) {
+          classes += ` ${variantsRecord[value]}`;
         }
       });
 
       return classes.trim();
     });
-
-    return cvaSpy;
   }),
   setColor: vi.fn((classes, color) => classes?.replace(/{color}/g, color)),
   vuelessConfig: { components: {}, unstyled: false },
@@ -53,13 +53,28 @@ vi.mock("vue", async () => {
   };
 });
 
-import useUI from "../useUI.ts";
-import * as uiUtils from "../../utils/ui.ts";
+import useUI from "../useUI";
+import * as uiUtils from "../../utils/ui";
 import { getCurrentInstance, useAttrs } from "vue";
+import type { UnknownObject } from "../../types";
 
 // Test component for integration testing
 const TestComponent = {
   template: '<div :data-test="getDataTest()" v-bind="bodyAttrs">Test</div>',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+    dataTest: {
+      type: String,
+      default: null,
+    },
+    color: {
+      type: String,
+      default: "primary",
+    },
+  },
   setup() {
     const defaultConfig = {
       body: {
@@ -97,7 +112,7 @@ describe("useUI", () => {
       type: { __name: "TestComponent" },
       props: { dataTest: "test", color: "primary", config: {} },
       parent: null,
-    });
+    } as unknown as ComponentInternalInstance);
 
     vi.mocked(useAttrs).mockReturnValue({
       class: "",
@@ -148,7 +163,7 @@ describe("useUI", () => {
         type: { __name: "TestComponent" },
         props: { config: propsConfig, dataTest: "test" },
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       // Call useUI to trigger the config merging
       useUI(defaultConfig);
@@ -201,7 +216,7 @@ describe("useUI", () => {
         type: { __name: "TestComponent" },
         props: { color: "blue", dataTest: "test" },
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       // Test the setColor function directly
       expect(uiUtils.setColor).toBeDefined();
@@ -247,7 +262,7 @@ describe("useUI", () => {
         type: { __name: "TestComponent" },
         props: {},
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       const result = useUI({});
       const dataTest = result.getDataTest();
@@ -336,7 +351,7 @@ describe("useUI", () => {
         type: { __name: "UButton" },
         props: { dataTest: "test" },
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       const result = useUI({});
 
@@ -349,8 +364,8 @@ describe("useUI", () => {
         props: { dataTest: "test" },
         parent: {
           type: { __name: "UButton" },
-        },
-      });
+        } as UnknownObject,
+      } as unknown as ComponentInternalInstance);
 
       const result = useUI({});
 

package/composables/useAutoPosition.ts

@@ -1,5 +1,5 @@
 import { computed, toValue, ref } from "vue";
-import { isSSR } from "../utils/helper.ts";
+import { isSSR } from "../utils/helper";
 
 import type { ComputedRef, MaybeRef, Reactive } from "vue";
 

package/composables/useBreakpoint.ts

@@ -1,5 +1,5 @@
 import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
-import { isSSR } from "../utils/helper.ts";
+import { isSSR } from "../utils/helper";
 
 import type { Ref } from "vue";
 

package/composables/useComponentLocaleMassages.ts

@@ -1,12 +1,12 @@
 import { computed, ref, watch } from "vue";
 import { merge } from "lodash-es";
-import { recursiveRt } from "../adapter.locale/vueless.ts";
+import { recursiveRt } from "../adapter.locale/vueless";
 
-import { useLocale } from "./useLocale.ts";
+import { useLocale } from "./useLocale";
 
 import { COMPONENTS } from "../constants";
 
-import type { VueMessageType } from "vue-i18n";
+import type { VueMessageType } from "virtual:vueless/vue-i18n";
 
 export function useComponentLocaleMessages<TLocale>(
   componentName: keyof typeof COMPONENTS,
@@ -17,9 +17,12 @@ export function useComponentLocaleMessages<TLocale>(
 
   const globalComponentMassages = ref(recursiveRt(tm(componentName) as VueMessageType));
 
-  watch(locale, () => {
-    globalComponentMassages.value = recursiveRt(tm(componentName) as VueMessageType);
-  });
+  watch(
+    () => locale,
+    () => {
+      globalComponentMassages.value = recursiveRt(tm(componentName) as VueMessageType);
+    },
+  );
 
   const localeMessages = computed(
     () => merge({}, defaultLocale, globalComponentMassages.value, propsLocale) as TLocale,

package/composables/useDarkMode.ts

@@ -1,6 +1,6 @@
 import { onMounted, ref, nextTick } from "vue";
-import { COLOR_MODE_KEY, DARK_MODE_CLASS } from "../constants.js";
-import { ColorMode } from "../types.js";
+import { COLOR_MODE_KEY, DARK_MODE_CLASS } from "../constants";
+import { ColorMode } from "../types";
 
 export function useDarkMode() {
   const isDarkMode = ref(false);

package/composables/useLocale.ts

@@ -1,8 +1,8 @@
 import { inject } from "vue";
-import { createVuelessAdapter } from "../adapter.locale/vueless.ts";
+import { createVuelessAdapter } from "../adapter.locale/vueless";
 
 import type { InjectionKey } from "vue";
-import type { LocaleInstance, LocaleOptions } from "../types.ts";
+import type { LocaleInstance, LocaleOptions } from "../types";
 
 export const LocaleSymbol: InjectionKey<LocaleInstance> = Symbol.for("vueless:locale");
 

package/composables/useMutationObserver.ts

@@ -1,5 +1,5 @@
 import { computed, onBeforeUnmount, onMounted, toValue, watch } from "vue";
-import { isSSR } from "../utils/helper.ts";
+import { isSSR } from "../utils/helper";
 
 import type { MaybeRef } from "vue";
 

package/composables/useUI.ts

@@ -1,19 +1,18 @@
 import { ref, watch, getCurrentInstance, toValue, useAttrs, computed } from "vue";
 import { isEqual } from "lodash-es";
 
-import { cx, cva, setColor, vuelessConfig, getMergedConfig } from "../utils/ui.ts";
+import { cx, cva, setColor, vuelessConfig, getMergedConfig } from "../utils/ui";
 import {
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
   EXTENDS_PATTERN_REG_EXP,
   NESTED_COMPONENT_PATTERN_REG_EXP,
-} from "../constants.js";
+} from "../constants";
 
 import type { Ref, ComputedRef } from "vue";
 import type {
   CVA,
   UseUI,
-  Defaults,
   KeyAttrs,
   KeysAttrs,
   MutatedProps,
@@ -21,9 +20,10 @@ import type {
   PrimaryColors,
   ComponentNames,
   NestedComponent,
+  ComponentDefaults,
   ComponentConfigFull,
   VuelessComponentInstance,
-} from "../types.ts";
+} from "../types";
 
 /**
  * Merging component configs in a given sequence (bigger number = bigger priority):
@@ -235,7 +235,7 @@ export default function useUI<T>(
      * Use an object where key = parent component prop value, value = nested component prop value.
      * */
     function getDefaults(defaultAttrs: NestedComponent["defaults"]) {
-      const defaults: Defaults = {};
+      const defaults: ComponentDefaults = {};
 
       for (const key in defaultAttrs) {
         defaults[key] =