vueless 0.0.825-beta.99 → 1.0.0

package/README.md

@@ -1,12 +1,42 @@
-![logo.png](public/images/vueless-logo-git.png)
+![vueless-examples.png](public/images/vueless-examples.png)
 
-## Vueless UI
+# Vueless UI
 
-* [Documentation](https://docs.vueless.com/)
-* [UI Components](https://ui.vueless.com/)
-* [Website](http://vueless.com/)
+Vueless is an open-source UI library and design system framework for Vue.js 3 and Nuxt.js 3, built on top of Tailwind CSS v4.
 
-## Quick Start
+It’s completely styleless, allowing you to extend or override default styles without modifying the components themselves — only your custom styles are included in the final build.
+
+Vueless is simple enough for everyday use and powerful enough for advanced scenarios, making it ideal for quickly building beautiful UIs in minutes or developing a fully customized corporate UI library that strictly follows your design guidelines.
+
+[Documentation](https://docs.vueless.com/) | [UI Components](https://ui.vueless.com/) | [Website](http://vueless.com/)
+
+### Key features
+
+- 🧩 65+ UI components (including range date picker, multi-selects, and nested table)
+- 📘 Built-in Storybook support
+- 🌈 Beautiful, modern default UI theme
+- 🌗 Light and dark mode support
+- 🌀 Unstyled mode
+- 🎨️ Flexible color palettes
+- 🎛️ Runtime theme and color switching
+- 🧬 Design tokens powered by CSS variables
+- ✨ Powerful yet simple styling customization system
+- 🌍 Internationalization (i18n)
+- ♿️ Accessibility (a11y)
+- ⚙️ Server-side rendering (SSR) friendly
+- 🖼️ 1000+ built-in SVG icons
+- 🛡️ Full TypeScript support with type safety
+
+### Advanced Features
+
+- 🧰 Copy and extend existing components
+- 🧱 Create your own components
+- 🔧️ Define default values for props
+- 🔩️ Add or hide props to components
+- 🧿 `npm` package ships full source without TypeScript transpilation for better DX.
+
+
+## Quick Start (Vue)
 
 1. Install `vueless` UI library packages.
 
@@ -15,7 +45,6 @@ npm install vueless
 npx vueless init
 ```
 
-
 2. In the file where you create the Vue application, add the following code:
 ```javascript
 import { createApp } from 'vue';
@@ -49,7 +78,32 @@ export default defineConfig({
 })
 ```
 
-That's it! You can use components in your app now ✨
+## Quick Start (Nuxt)
+
+1. Install Vueless Nuxt module.
+
+```bash
+npm install @vueless/nuxt
+npx vueless init
+```
+
+
+2. Register `@vueless/nuxt` into the Nuxt config modules section.
+```javascript
+export default defineNuxtConfig({
+  modules: [
+    '@vueless/nuxt'
+  ],
+  ...
+})
+```
+
+3. Import Tailwind CSS and Vueless at the top of the main CSS file.
+
+```scss
+@import "tailwindcss";
+@import "vueless";
+```
 
 ## Contributing
 

package/{adatper.locale → adapter.locale}/locales/en.ts

@@ -1,14 +1,14 @@
-import selectConfig from "../../ui.form-select/config.js";
-import switchConfig from "../../ui.form-switch/config.js";
-import inputFileConfig from "../../ui.form-input-file/config.js";
-import listboxConfig from "../../ui.form-listbox/config.js";
-import modalConfirmConfig from "../../ui.container-modal-confirm/config.js";
-import tableConfig from "../../ui.data-table/config.js";
+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.js";
-import datepickerRangeConfig from "../../ui.form-date-picker-range/config.js";
-import dataListConfig from "../../ui.data-list/config.js";
-import notifyDefaultConfig from "../../ui.text-notify/config.js";
+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";
 
 export default {
   USelect: selectConfig.i18n,

package/{adatper.locale → adapter.locale}/vueless.ts

@@ -5,6 +5,7 @@ import en from "./locales/en.ts";
 
 import type { Ref } from "vue";
 import type { UnknownObject } from "../types.ts";
+import type { VueMessageType } from "vue-i18n";
 
 export interface LocaleMessages {
   [key: string]: LocaleMessages | string;
@@ -148,19 +149,47 @@ export function getNestedValue<T, K = unknown>(
     return obj === undefined ? fallback : (obj as unknown as K);
   }
 
-  const unknownObject = obj as Record<string | number, unknown>;
-
   for (let i = 0; i < last; i++) {
     if (obj == null) {
       return fallback;
     }
 
-    obj = unknownObject[path[i]] as T;
+    obj = (obj as Record<string | number, unknown>)[path[i]] as T;
   }
 
   if (obj == null) {
     return fallback;
   }
 
+  const unknownObject = obj as Record<string | number, unknown>;
+
   return (unknownObject[path[last]] === undefined ? fallback : unknownObject[path[last]]) as K;
 }
+
+export function recursiveRt(obj: VueMessageType): unknown {
+  if (typeof obj !== "object" || obj === null) {
+    return obj;
+  }
+
+  if ("loc" in obj) {
+    return obj.loc!.source;
+  }
+
+  const messages: Record<string, unknown> = {};
+
+  for (const key in obj) {
+    const val = obj[key as keyof typeof obj];
+
+    if (val && typeof val === "object") {
+      if ("loc" in val) {
+        messages[key] = val.loc.source;
+      } else {
+        messages[key] = recursiveRt(val as VueMessageType);
+      }
+    } else {
+      messages[key] = val;
+    }
+  }
+
+  return messages;
+}

package/bin/commands/copy.js

@@ -11,21 +11,25 @@ import { replaceRelativeImports } from "../utils/formatUtil.js";
 import { getStorybookId, getStoryMetaKeyIndex } from "../utils/dataUtils.js";
 
 import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
-import { COMPONENTS, VUELESS_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
+import { COMPONENTS, VUELESS_PACKAGE_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
 
 function getSourcePath(componentName) {
-  return path.join(cwd(), VUELESS_DIR, COMPONENTS[componentName]);
+  return path.join(cwd(), VUELESS_PACKAGE_DIR, COMPONENTS[componentName]);
 }
 
 export async function copyVuelessComponent(options) {
   const [componentName, newComponentName] = options;
 
   if (!componentName) {
-    throw new Error("Component name is required.");
+    console.log(styleText("red", "Component name is required."));
+
+    return;
   }
 
   if (!(componentName in COMPONENTS)) {
-    throw new Error("There is no such component.");
+    console.log(styleText("red", "There is no such component."));
+
+    return;
   }
 
   const sourceComponentPath = getSourcePath(componentName);
@@ -39,7 +43,9 @@ export async function copyVuelessComponent(options) {
   const isComponentExists = newComponentName in COMPONENTS || existsSync(absoluteDestPath);
 
   if (isComponentExists) {
-    throw new Error(`Component with name ${newComponentName} already exists.`);
+    console.log(styleText("red", `Component with name ${newComponentName} already exists.`));
+
+    return;
   }
 
   await cp(sourceComponentPath, absoluteDestPath, { recursive: true });

package/bin/commands/create.js

@@ -3,7 +3,7 @@
 import { existsSync } from "node:fs";
 import path from "node:path";
 import { cwd } from "node:process";
-import { cp, readFile, writeFile, rename } from "node:fs/promises";
+import { readFile, writeFile, rename, mkdir, readdir, copyFile } from "node:fs/promises";
 import { styleText } from "node:util";
 
 import { getDirFiles } from "../../utils/node/helper.js";
@@ -12,16 +12,18 @@ import { getStorybookId } from "../utils/dataUtils.js";
 
 import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
 
-import { COMPONENTS, VUELESS_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
+import { COMPONENTS, VUELESS_PACKAGE_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
 
-const boilerplateName = "UBoilerplate";
-const boilerplatePath = path.join(cwd(), VUELESS_DIR, "ui.boilerplate");
+const BOILERPLATE_NAME = "UBoilerplate";
+const BOILERPLATE_PATH = path.join(cwd(), VUELESS_PACKAGE_DIR, "ui.boilerplate");
 
 export async function createVuelessComponent(options) {
   const [componentName] = options;
 
   if (!componentName) {
-    throw new Error("Component name is required.");
+    console.log(styleText("red", "Component name is required."));
+
+    return;
   }
 
   const isSrcDir = existsSync(path.join(cwd(), VUELESS_LOCAL_DIR));
@@ -33,18 +35,36 @@ export async function createVuelessComponent(options) {
   const isComponentExists = componentName in COMPONENTS || existsSync(absoluteDestPath);
 
   if (isComponentExists) {
-    throw new Error(`Component with name ${componentName} already exists.`);
+    console.log(styleText("red", `Component with name ${componentName} already exists.`));
+
+    return;
   }
 
-  await cp(boilerplatePath, absoluteDestPath, { recursive: true });
+  await copyAndRenameFiles(BOILERPLATE_PATH, absoluteDestPath);
   await modifyCreatedComponent(absoluteDestPath, componentName);
 
-  const successMessage = styleText(
-    "green",
-    `The '${componentName}' was successfully created in the '${destPath}' directory.`,
+  console.log(
+    // eslint-disable-next-line prettier/prettier
+    styleText("green", `The '${componentName}' was successfully created in the '${destPath}' directory.`,),
   );
+}
+
+async function copyAndRenameFiles(srcDir, destDir) {
+  await mkdir(destDir, { recursive: true });
+  const entries = await readdir(srcDir, { withFileTypes: true });
 
-  console.log(successMessage);
+  for (const entry of entries) {
+    const srcPath = path.join(srcDir, entry.name);
+
+    const renamed = entry.name.replace(".hidden", "");
+    const destPath = path.join(destDir, renamed);
+
+    console.log(entry.name, renamed);
+
+    entry.isDirectory()
+      ? await copyAndRenameFiles(srcPath, destPath)
+      : await copyFile(srcPath, destPath);
+  }
 }
 
 async function modifyCreatedComponent(destPath, componentName) {
@@ -58,17 +78,17 @@ async function modifyCreatedComponent(destPath, componentName) {
     let targetPath = filePath;
 
     if (filePath.endsWith("constants.ts")) {
-      updatedContent = updatedContent.replace(boilerplateName, componentName);
+      updatedContent = updatedContent.replace(BOILERPLATE_NAME, componentName);
     }
 
     if (filePath.endsWith("stories.ts")) {
       updatedContent = updatedContent
-        .replaceAll(boilerplateName, componentName)
+        .replaceAll(BOILERPLATE_NAME, componentName)
         .replace("{{component_id}}", String(storybookId));
     }
 
-    if (targetPath.endsWith(`${boilerplateName}.vue`)) {
-      targetPath = targetPath.replace(boilerplateName, componentName);
+    if (targetPath.endsWith(`${BOILERPLATE_NAME}.vue`)) {
+      targetPath = targetPath.replace(BOILERPLATE_NAME, componentName);
 
       await rename(filePath, targetPath);
     }

package/bin/commands/init.js

@@ -15,7 +15,9 @@ export async function vuelessInit(options) {
   const isValidOptions = options.every((option) => vuelessInitOptions.includes(option));
 
   if (options.length && !isValidOptions) {
-    throw new Error("Invalid options were provided.");
+    console.log(styleText("red", "Invalid options were provided."));
+
+    return;
   }
 
   const fileExt = options.includes("--ts") ? TYPESCRIPT_EXT : JAVASCRIPT_EXT;
@@ -31,21 +33,21 @@ export async function vuelessInit(options) {
 
     await rename(formattedDestPath, renamedTarget);
 
-    const warnMessage = 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.`,
+    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.`,
+      ),
     );
-
-    console.warn(warnMessage);
   }
 
   await writeFile(formattedDestPath, DEFAULT_VUELESS_CONFIG_CONTENT, "utf-8");
 
-  const successMessage = styleText(
-    "green",
-    `The '${formattedDestPath.split(path.sep).at(-1)}' was created in the project root directory.`,
+  console.log(
+    styleText(
+      "green",
+      `The '${formattedDestPath.split(path.sep).at(-1)}' was created in the project root directory.`,
+    ),
   );
-
-  console.log(successMessage);
 }

package/bin/constants.js

@@ -1,5 +1,6 @@
 export const SRC_COMPONENTS_PATH = "/src/components";
 export const COMPONENTS_PATH = "/components";
+
 export const DEFAULT_VUELESS_CONFIG_CONTENT = `
 export default {
   /**
@@ -10,7 +11,7 @@ export default {
   text: 14,
   outline: 2,
   rounding: 8,
-  unstyled: false,
+  disabledOpacity: 50,
   colorMode: "auto",
 
   /**

package/bin/utils/dataUtils.js

@@ -6,14 +6,14 @@ import { readFile } from "node:fs/promises";
 import { getDirFiles } from "../../utils/node/helper.js";
 
 import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
-import { VUELESS_DIR } from "../../constants.js";
+import { VUELESS_PACKAGE_DIR } from "../../constants.js";
 
 const storiesName = "stories.ts";
 
 export async function getStorybookId() {
   const srcComponentsDir = path.join(cwd(), SRC_COMPONENTS_PATH);
   const componentsDir = path.join(cwd(), COMPONENTS_PATH);
-  const vuelessPackagePath = path.join(cwd(), VUELESS_DIR);
+  const vuelessPackagePath = path.join(cwd(), VUELESS_PACKAGE_DIR);
   const isSrcComponentsDir = existsSync(srcComponentsDir);
   const isComponentsDir = existsSync(componentsDir);
 

package/composables/useComponentLocaleMassages.ts

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

package/composables/useDarkMode.ts

@@ -1,5 +1,5 @@
 import { onMounted, ref, nextTick } from "vue";
-import { COLOR_MODE_KEY, DARK_MODE_SELECTOR } from "../constants.js";
+import { COLOR_MODE_KEY, DARK_MODE_CLASS } from "../constants.js";
 import { ColorMode } from "../types.js";
 
 export function useDarkMode() {
@@ -7,7 +7,7 @@ export function useDarkMode() {
 
   onMounted(async () => {
     await nextTick(() => {
-      const isDarkModeClass = document.documentElement.classList.contains(DARK_MODE_SELECTOR);
+      const isDarkModeClass = document.documentElement.classList.contains(DARK_MODE_CLASS);
       const cashedDarkMode = localStorage.getItem(COLOR_MODE_KEY) as ColorMode | null;
       const isDarkModeCashed = cashedDarkMode !== null && cashedDarkMode === ColorMode.Dark;
 

package/composables/useLocale.ts

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

package/composables/useUI.ts

@@ -67,7 +67,7 @@ export default function useUI<T>(
   );
 
   /**
-   * Get classes by given key (including CVA if config set).
+   * Get classes by a given key (including CVA if config set).
    */
   function getClasses(key: string, mutatedProps?: MutatedProps) {
     return computed(() => {
@@ -117,7 +117,7 @@ export default function useUI<T>(
   }
 
   /**
-   * Get an element attributes for a given key.
+   * Get element attributes for a given key.
    */
   function getAttrs(configKey: string, classes: ComputedRef<string>) {
     const vuelessAttrs = ref({} as KeyAttrs);
@@ -215,7 +215,7 @@ export default function useUI<T>(
 
         if (config.value[firstKey] === undefined) {
           // eslint-disable-next-line no-console
-          console.warn(`[Vueless] Missing ${firstKey} extend key.`);
+          console.warn(`[vueless] Missing ${firstKey} extend key.`);
         }
 
         extendsKeyConfig = getMergedConfig({

package/constants.js

@@ -10,16 +10,17 @@ export const SECONDARY_COLOR = "secondary";
 export const GRAYSCALE_COLOR = "grayscale";
 export const INHERIT_COLOR = "inherit";
 
-/* Vueless cookies keys */
-export const PRIMARY_COLOR_KEY = "vl-primary";
-export const NEUTRAL_COLOR_KEY = "vl-neutral";
-export const ROUNDING_KEY = "vl-rounding";
+/* Vueless keys */
+export const TEXT = "text";
+export const OUTLINE = "outline";
+export const ROUNDING = "rounding";
+export const DISABLED_OPACITY = "disabled-opacity";
+
+/* Vueless color mode keys */
 export const COLOR_MODE_KEY = "vl-color-mode";
 export const AUTO_MODE_KEY = "vl-auto-mode";
-
-/* Vueless dark mode */
-export const DARK_MODE_SELECTOR = "vl-dark";
-export const LIGHT_MODE_SELECTOR = "vl-light";
+export const DARK_MODE_CLASS = "vl-dark";
+export const LIGHT_MODE_CLASS = "vl-light";
 
 /* Vueless defaults */
 export const DEFAULT_PRIMARY_COLOR = GRAYSCALE_COLOR;
@@ -33,6 +34,7 @@ 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_DISABLED_OPACITY = 50; /* presents */
 
 /* Vueless supported color shades */
 export const PRIMARY_COLORS = [
@@ -239,10 +241,10 @@ export const COMPONENTS = {
   UInput: "ui.form-input",
   UInputFile: "ui.form-input-file",
   UInputNumber: "ui.form-input-number",
-  UInputSearch: "ui.form-input-search",
   UInputCounter: "ui.form-input-counter",
   UInputPassword: "ui.form-input-password",
   UInputRating: "ui.form-input-rating",
+  UInputSearch: "ui.form-input-search",
   UTextarea: "ui.form-textarea",
   USelect: "ui.form-select",
   UListbox: "ui.form-listbox",
@@ -263,12 +265,11 @@ export const COMPONENTS = {
   UText: "ui.text-block",
   UAlert: "ui.text-alert",
   UNotify: "ui.text-notify",
-  UMoney: "ui.text-money",
+  UNumber: "ui.text-number",
   UFile: "ui.text-file",
   UFiles: "ui.text-files",
   UEmpty: "ui.text-empty",
   UBadge: "ui.text-badge",
-  UNumber: "ui.text-number",
 
   /* Containers */
   UDivider: "ui.container-divider",
@@ -301,9 +302,14 @@ export const COMPONENTS = {
   ULoader: "ui.loader",
   ULoaderProgress: "ui.loader-progress",
   ULoaderOverlay: "ui.loader-overlay",
+  USkeleton: "ui.skeleton",
+  USkeletonText: "ui.skeleton-text",
+  USkeletonInput: "ui.skeleton-input",
+  USkeletonChoice: "ui.skeleton-choice",
 
   /* Other */
   UDot: "ui.other-dot",
+  UChip: "ui.other-chip",
   UThemeColorToggle: "ui.other-theme-color-toggle",
 };
 
@@ -315,7 +321,6 @@ export const COMPONENTS = {
 export const TAILWIND_MERGE_EXTENSION = {
   extend: {
     theme: {
-      colors: ["brand", "brand-"],
       spacing: ["safe-top", "safe-bottom", "safe-left", "safe-right"],
     },
     classGroups: {
@@ -367,23 +372,29 @@ export const DEFAULT_SVGO_CONFIG = {
 };
 
 /* Vueless general */
+export const INTERNAL_ENV = "internal";
+export const STORYBOOK_ENV = "storybook";
+export const NUXT_MODULE_ENV = "nuxt-module";
+
+export const VUELESS_LIBRARY = "vueless";
+export const INTERNAL_ICONS_LIBRARY = "internal";
+export const STORYBOOK_ICONS_LIBRARY = "storybook";
+
+export const NODE_MODULES_DIR = "node_modules";
+export const VUELESS_PACKAGE_DIR = `${NODE_MODULES_DIR}/vueless`;
+export const VUELESS_CACHE_DIR = `${NODE_MODULES_DIR}/.cache/vueless`;
+export const VUELESS_LOCAL_DIR = "src";
 export const ICONS_DIR = "icons";
-export const VUELESS = "vueless";
-export const VUELESS_LIBRARY = VUELESS;
-export const STORYBOOK_DIR = "storybook";
-export const STORYBOOK_ICONS = `${ICONS_DIR}/${STORYBOOK_DIR}`;
-export const VUELESS_CONFIG_FILE_NAME = "vueless.config";
-export const VUELESS_CACHE_DIR = "node_modules/.cache/vueless";
-export const VUELESS_DIR = `node_modules/${VUELESS_LIBRARY}`;
-export const VUELESS_LOCAL_DIR = `src`;
-export const VUELESS_ICONS_DIR = `${VUELESS_DIR}/${ICONS_DIR}/app`;
-export const APP_ICONS_LOCAL_DIR = `src/${ICONS_DIR}/app`;
-export const APP_ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}/app`;
+export const ICONS_VUELESS_DIR = `${VUELESS_PACKAGE_DIR}/${ICONS_DIR}`;
+export const ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}`;
+
+export const ICONS_VIRTUAL_MODULE_ID = "virtual:vueless/icons";
+export const RESOLVED_ICONS_VIRTUAL_MODULE_ID = `\0${ICONS_VIRTUAL_MODULE_ID}`;
+
+export const VUELESS_TAILWIND_SAFELIST = `${VUELESS_CACHE_DIR}/safelist.txt`;
 export const VUELESS_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/configs`;
 export const VUELESS_MERGED_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/mergedConfigs`;
-export const VUELESS_TAILWIND_SAFELIST = `${VUELESS_CACHE_DIR}/safelist.txt`;
-export const STORYBOOK_ICONS_LOCAL_DIR = `${VUELESS_LOCAL_DIR}/${STORYBOOK_ICONS}`;
-export const STORYBOOK_ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${STORYBOOK_ICONS}`;
+export const VUELESS_CONFIG_FILE_NAME = "vueless.config";
 
 /* System error codes */
 export const DEFAULT_EXIT_CODE = 0;
@@ -396,3 +407,4 @@ export const EXTENDS_PATTERN_REG_EXP = /\{>[^}]*}/g;
 export const DYNAMIC_COLOR_PATTERN = "{color}";
 export const JAVASCRIPT_EXT = ".js";
 export const TYPESCRIPT_EXT = ".ts";
+export const VUE_EXT = ".vue";

package/directives/clickOutside/storybook/docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./stories.ts";
 

package/directives/tooltip/storybook/docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./stories.ts";
 

package/icons/storybook/add_circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M451.57-278.57h62.86v-166h167v-62.86h-167v-174h-62.86v174h-173v62.86h173v166ZM480.3-74.02q-84.2 0-158.04-31.88-73.84-31.88-129.16-87.2-55.32-55.32-87.2-129.2-31.88-73.88-31.88-158.17 0-84.28 31.88-158.2 31.88-73.91 87.16-128.74 55.28-54.84 129.18-86.82 73.9-31.99 158.21-31.99 84.3 0 158.25 31.97 73.94 31.97 128.75 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.33 0 84.24-31.99 158.07-31.98 73.84-86.82 128.95-54.83 55.1-128.87 87.17Q564.5-74.02 480.3-74.02Zm.2-68.13q140.54 0 238.95-98.75 98.4-98.76 98.4-239.6 0-140.54-98.22-238.95-98.21-98.4-239.75-98.4-140.16 0-238.95 98.22-98.78 98.21-98.78 239.75 0 140.16 98.75 238.95 98.76 98.78 239.6 98.78ZM480-480Z"/></svg>

package/icons/storybook/arrow_outward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M243.91-240.02 195.93-288l407.94-407.93H231.61v-68.14h488.37v488.14h-68.37v-372.03l-407.7 407.94Z"/></svg>

package/icons/storybook/delivery_truck_speed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M268.09-146.85q-51.7 0-84.88-37.18-33.19-37.19-28.19-87.88H53.35l14.91-68.13h119.65q14.52-16.09 35.04-25.51 20.52-9.43 45.11-9.43t45.01 9.44q20.41 9.45 35.19 25.5h199.2l93.19-404.98h-458l3.37-14.8q5.55-23.95 23.85-38.76 18.29-14.81 42.15-14.81h473.91l-40.91 179.32h124.76L926.17-479.2l-41.39 207.29H802.1q5 50.69-28.67 87.88-33.67 37.18-85.34 37.18-51.7 0-84.88-37.18-33.19-37.19-28.19-87.88H382.15q5 50.91-28.68 87.99-33.69 37.07-85.38 37.07Zm369.74-282.19h208.06l6.48-34.44-76.65-102.45h-106.6l-31.29 136.89Zm-5.94-279.47 8.76-36.51-93.19 404.98 8-36 35.19-151.26 41.24-181.21ZM17.46-432.46l16.91-68.13h228.37l-16.91 68.13H17.46Zm80-151.26 16.91-68.37h268.37l-16.91 68.37H97.46Zm170.59 368.74q19.26 0 32.61-13.82 13.36-13.82 13.36-32.08 0-19.25-13.32-32.61t-32.58-13.36q-18.25 0-32.11 13.32t-13.86 32.58q0 18.26 13.82 32.11 13.82 13.86 32.08 13.86Zm420 0q19.26 0 32.61-13.82 13.36-13.82 13.36-32.08 0-19.25-13.32-32.61t-32.58-13.36q-18.25 0-32.11 13.32t-13.86 32.58q0 18.26 13.82 32.11 13.82 13.86 32.08 13.86Z"/></svg>

package/index.d.ts

@@ -12,8 +12,8 @@ export {
 } from "./utils/helper.ts";
 export { getArgTypes, getSlotNames, getSlotsFragment, getSource } from "./utils/storybook.ts";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform.ts";
-export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.ts";
-export { default as defaultEnLocale } from "./adatper.locale/locales/en.ts";
+export { default as createVueI18nAdapter } from "./adapter.locale/vue-i18n.ts";
+export { default as defaultEnLocale } from "./adapter.locale/locales/en.ts";
 export { default as useUI } from "./composables/useUI.ts";
 export { useLocale } from "./composables/useLocale.ts";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress.ts";