vueless 1.1.1-beta.8 → 1.2.0

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,32 +1,31 @@
 /* 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";
 
-const vuelessInitOptions = ["--ts", "--js"];
+const vuelessInitOptions = ["--ts", "--js", "--pnpm", "--yarn"];
 
 /**
- * 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.
+ * @param {boolean} options.includes("--pnpm") - If true, creates a `.npmrc` config with hoisting disabled.
+ * @param {boolean} options.includes("--yarn") - If true, creates a `.yarnrc.yml` config with pnp disabled.
  */
 export async function vuelessInit(options) {
   const isValidOptions = options.every((option) => vuelessInitOptions.includes(option));
@@ -40,73 +39,105 @@ export async function vuelessInit(options) {
   const hasTypeScript = await detectTypeScript();
   const fileExt = options.includes("--ts") || hasTypeScript ? TYPESCRIPT_EXT : JAVASCRIPT_EXT;
 
-  const formattedDestPath = path.format({
+  const destPath = path.format({
     dir: cwd(),
     name: VUELESS_CONFIG_FILE_NAME,
     ext: fileExt,
   });
 
   /* Backup existing config if it exists. */
-  if (existsSync(formattedDestPath)) {
-    const timestamp = new Date().valueOf();
-    const renamedTarget = `${VUELESS_CONFIG_FILE_NAME}-backup-${timestamp}${fileExt}`;
-
-    await rename(formattedDestPath, renamedTarget);
-
-    console.warn(
-      styleText(
-        "yellow",
-        // eslint-disable-next-line vue/max-len
-        `Current Vueless config backed into: '${path.basename(renamedTarget)}' folder. Don't forget to remove it before commit.`,
-      ),
-    );
-  }
+  await backupVuelessConfig(destPath);
 
   /* Create a default config file. */
-  await writeFile(formattedDestPath, DEFAULT_VUELESS_CONFIG_CONTENT, "utf-8");
+  await createVuelessConfig(destPath);
+
+  /* Create a vueless config directory and index file. */
+  await createVuelessConfigDir(fileExt);
+
+  /* Create pnpm package manager config. */
+  if (options.includes("--pnpm")) {
+    await createPackageManagerConfig(".npmrc", [
+      "# pnpm",
+      "# Vueless: disable hoisting for the package related modules.",
+      "public-hoist-pattern[] = tailwindcss",
+      "public-hoist-pattern[] = *storybook*",
+      "public-hoist-pattern[] = prettier2",
+    ]);
+  }
 
-  console.log(
+  /* Create yarn 2+ package manager config. */
+  if (options.includes("--yarn")) {
+    await createPackageManagerConfig(".yarnrc.yml", [
+      "# Yarn 2+",
+      "# Vueless: install Node packages into a standard node_modules folder, the same way as Yarn Classic or npm.",
+      "nodeLinker: node-modules",
+    ]);
+  }
+}
+
+/**
+ * Backs up the existing Vueless config file by renaming it.
+ * @param {string} destPath - The path to the Vueless config file.
+ */
+async function backupVuelessConfig(destPath) {
+  if (!existsSync(destPath)) return;
+
+  const fileNameWithoutExtension = path.basename(destPath, path.extname(destPath));
+  const extension = path.extname(destPath);
+  const timestamp = new Date().valueOf();
+
+  const backupConfigName = `${fileNameWithoutExtension}-backup-${timestamp}${extension}`;
+
+  await rename(destPath, backupConfigName);
+
+  console.warn(
     styleText(
-      "green",
-      `The '${formattedDestPath.split(path.sep).at(-1)}' was created in the project root directory.`,
+      "yellow",
+      `Current Vueless config backed into: '${path.basename(backupConfigName)}'. Remove it before commit.`,
     ),
   );
+}
 
-  /* Create .vueless directory and index file. */
-  const vuelessDir = path.join(cwd(), ".vueless");
-  const destPath = path.join(vuelessDir, `${CONFIG_INDEX_FILE_NAME}${fileExt}`);
+/**
+ * Creates a default Vueless config file.
+ * @param {string} destPath - The path to the Vueless config file.
+ */
+async function createVuelessConfig(destPath) {
+  await writeFile(destPath, DEFAULT_VUELESS_CONFIG_CONTENT, "utf-8");
 
-  if (!existsSync(vuelessDir)) {
-    mkdirSync(vuelessDir);
-    console.log(
-      styleText("green", "The '.vueless' directory was created in the project root directory."),
-    );
-  }
+  const fileName = path.basename(destPath);
+
+  console.log(styleText("green", `The '${fileName}' was created in the project root.`));
+}
+
+/**
+ * Creates a Vueless config directory and index file.
+ * @param {string} fileExt - The file extension to use for the index file.
+ */
+async function createVuelessConfigDir(fileExt) {
+  const vuelessDir = path.join(cwd(), VUELESS_CONFIG_DIR);
 
-  const suppressTsCheck = fileExt === TYPESCRIPT_EXT ? `${SUPPRESS_TS_CHECK}\n` : "";
+  if (existsSync(vuelessDir)) return;
 
-  await writeFile(
-    destPath,
-    `${suppressTsCheck}${COMPONENTS_INDEX_COMMENT}\n${COMPONENTS_INDEX_EXPORT}\n`,
-    "utf-8",
+  mkdirSync(vuelessDir);
+  console.log(
+    styleText("green", `The '${VUELESS_CONFIG_DIR}' directory was created in the project root.`),
   );
+
+  const indexFileContent = await generateConfigIndexContent();
+  const destPath = path.join(vuelessDir, `${CONFIG_INDEX_FILE_NAME}${fileExt}`);
+
+  await writeFile(destPath, indexFileContent, "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
+ * Creates a package manager config file.
+ * @param {string} fileName - The name of the config file.
+ * @param {string[]} fileContent - The content of the config file.
  */
-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;
-  }
+async function createPackageManagerConfig(fileName, fileContent) {
+  const filePath = path.join(cwd(), fileName);
+
+  await writeFile(filePath, fileContent.join("\n"), "utf-8");
+  console.log(styleText("green", `The '${fileName}' was created in the project root.`));
 }

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

@@ -53,10 +53,10 @@ 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.ts";
+import type { UnknownObject } from "../../types";
 
 // Test component for integration testing
 const TestComponent = {

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,

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] =