vueless 0.0.479 → 0.0.481

package/directives/clickOutside/vClickOutside.ts

@@ -0,0 +1,96 @@
+import { unref } from "vue";
+
+import type { MaybeRef } from "vue";
+import type {
+  ClickOutsideOptions,
+  ClickCallback,
+  RemoveEvents,
+  ClickOutsideTargetElement,
+  DirectiveBindingCallback,
+  DirectiveBindingOptions,
+} from "./types";
+
+function clickOutside(
+  target: MaybeRef<HTMLElement | null>,
+  handler: ClickCallback,
+  options: ClickOutsideOptions,
+): RemoveEvents {
+  const { capture = true, ignore = [] } = options;
+
+  const ignoreList = ignore.map((item) => unref(item));
+  const el = unref(target);
+
+  function onClick(event: MouseEvent) {
+    if (!(event.target instanceof HTMLElement)) return;
+
+    const targetElements = event.composedPath().filter((element) => element instanceof HTMLElement);
+
+    if (
+      !el ||
+      el === event.target ||
+      targetElements.some((pathEl) => ignoreList.includes(pathEl)) ||
+      targetElements.includes(el) ||
+      ignoreList.includes(event.target)
+    ) {
+      return;
+    }
+
+    handler(event);
+  }
+
+  window.addEventListener("click", onClick, { passive: true, capture });
+  window.addEventListener("pointerdown", onClick, { passive: true });
+
+  function removeEvents() {
+    window.removeEventListener("click", onClick, capture);
+    window.removeEventListener("pointerdown", onClick);
+  }
+
+  return removeEvents;
+}
+
+function onMounted(el: ClickOutsideTargetElement, binding: DirectiveBindingCallback): void;
+function onMounted(el: ClickOutsideTargetElement, binding: DirectiveBindingOptions): void;
+function onMounted(
+  el: ClickOutsideTargetElement,
+  binding: DirectiveBindingOptions | DirectiveBindingCallback,
+): void {
+  const capture = !binding.modifiers.bubble;
+
+  if (typeof binding.value === "function") {
+    el._clickOutsideRemove = clickOutside(el, binding.value, { capture });
+  } else {
+    const [handler, options] = binding.value;
+
+    el._clickOutsideRemove = clickOutside(el, handler, Object.assign({ capture }, options));
+  }
+}
+
+function onUpdated(el: ClickOutsideTargetElement, binding: DirectiveBindingCallback): void;
+function onUpdated(el: ClickOutsideTargetElement, binding: DirectiveBindingOptions): void;
+function onUpdated(
+  el: ClickOutsideTargetElement,
+  binding: DirectiveBindingOptions | DirectiveBindingCallback,
+): void {
+  el._clickOutsideRemove();
+
+  const capture = !binding.modifiers.bubble;
+
+  if (typeof binding.value === "function") {
+    el._clickOutsideRemove = clickOutside(el, binding.value, { capture });
+  } else {
+    const [handler, options] = binding.value;
+
+    el._clickOutsideRemove = clickOutside(el, handler, Object.assign({ capture }, options));
+  }
+}
+
+function onUnmounted(el: ClickOutsideTargetElement) {
+  el._clickOutsideRemove();
+}
+
+export default {
+  mounted: onMounted,
+  updated: onUpdated,
+  unmounted: onUnmounted,
+};

package/directives/index.js

@@ -1,2 +1,7 @@
-export { default as vTooltip } from "./tooltip/vTooltip.js";
-export { default as vClickOutside } from "./clickOutside/vClickOutside.js";
+/**
+ * The file should have `.js` extension to allow import from the folder without adding `/index.ts` in the end.
+ * Vite doesn't recognize `.ts` files without extension.
+ */
+
+export { default as vTooltip } from "./tooltip/vTooltip.ts";
+export { default as vClickOutside } from "./clickOutside/vClickOutside.ts";

package/directives/tooltip/storybook/Docs.mdx

@@ -1,6 +1,6 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 
-import * as stories from "./stories.js";
+import * as stories from "./stories.ts";
 
 <Meta of={stories} />
 <Title of={stories} />

package/directives/tooltip/storybook/{stories.js → stories.ts}

@@ -1,8 +1,20 @@
-import { getArgTypes } from "../../../utils/utilStorybook.js";
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { getArgTypes } from "../../../utils/storybook.ts";
 
 import UIcon from "../../../ui.image-icon/UIcon.vue";
 import URow from "../../../ui.container-row/URow.vue";
-import tooltip from "../vTooltip.js";
+import tooltip from "../vTooltip.ts";
+
+import type { Props } from "tippy.js";
+
+interface VTooltipArgs {
+  tooltip: Partial<Props> | string;
+}
+
+interface VTooltipEnumArgs extends VTooltipArgs {
+  enum: keyof Props;
+  options: unknown[];
+}
 
 /**
  * The `v-tooltip` directive. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/directives/tooltip)
@@ -15,9 +27,9 @@ export default {
   argTypes: {
     ...getArgTypes(UIcon.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
   components: { UIcon },
   directives: { tooltip },
   setup() {
@@ -28,7 +40,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumTemplate = (args) => ({
+const EnumTemplate: StoryFn<VTooltipEnumArgs> = (args: VTooltipEnumArgs) => ({
   components: { UIcon, URow },
   directives: { tooltip },
   setup() {
@@ -36,11 +48,11 @@ const EnumTemplate = (args) => ({
   },
   template: `
     <URow>
-      <UIcon 
-        v-for="option in args.options" 
-        interactive 
-        name="sentiment_satisfied" 
-        v-tooltip="{ content: option, ...args.tooltip, [args.enum]: option }" 
+      <UIcon
+        v-for="option in args.options"
+        interactive
+        name="sentiment_satisfied"
+        v-tooltip="{ content: option, ...args.tooltip, [args.enum]: option }"
       >
     </URow>
   `,

package/directives/tooltip/types.ts

@@ -0,0 +1,14 @@
+import type { Instance as TippyInstance, Props } from "tippy.js";
+import type { DirectiveBinding } from "vue";
+
+export interface TippyTargetElement extends HTMLElement {
+  _tippy: TippyInstance;
+}
+
+export interface DirectiveBindingContent extends DirectiveBinding {
+  value: string;
+}
+
+export interface DirectiveBindingProps extends DirectiveBinding {
+  value: Props;
+}

package/directives/tooltip/vTooltip.ts

@@ -0,0 +1,82 @@
+import tippy from "tippy.js";
+import { merge } from "lodash-es";
+
+import { vuelessConfig } from "../../utils/ui.ts";
+import { isCSR, isSSR } from "../../utils/helper.ts";
+
+import type { DefaultProps } from "tippy.js";
+import type {
+  TippyTargetElement,
+  DirectiveBindingContent,
+  DirectiveBindingProps,
+} from "./types.ts";
+
+let settings: Partial<DefaultProps> = {};
+
+if (isCSR) {
+  import("tippy.js/dist/tippy.css");
+  import("tippy.js/themes/light.css");
+  import("tippy.js/animations/shift-away.css");
+
+  const defaultSettings = {
+    arrow: true,
+    theme: "light",
+    animation: "shift-away",
+  };
+
+  settings = merge(defaultSettings, {});
+  settings = merge(defaultSettings, vuelessConfig.directive?.tooltip || {}) as DefaultProps;
+  tippy.setDefaultProps(settings);
+}
+
+function onMounted(el: TippyTargetElement, bindings: DirectiveBindingContent): void;
+function onMounted(el: TippyTargetElement, bindings: DirectiveBindingProps): void;
+function onMounted(
+  el: TippyTargetElement,
+  bindings: DirectiveBindingProps | DirectiveBindingContent,
+): void {
+  if (isSSR) return;
+
+  if (typeof bindings.value === "string" && bindings.value.length) {
+    tippy(el, merge(settings, { content: bindings.value }));
+
+    return;
+  }
+
+  if (
+    typeof bindings.value !== "string" &&
+    bindings.value.content &&
+    String(bindings.value.content).length
+  ) {
+    tippy(el, merge(settings, bindings.value || {}));
+  }
+}
+
+function onUpdated(el: TippyTargetElement, bindings: DirectiveBindingContent): void;
+function onUpdated(el: TippyTargetElement, bindings: DirectiveBindingProps): void;
+function onUpdated(
+  el: TippyTargetElement,
+  bindings: DirectiveBindingProps | DirectiveBindingContent,
+): void {
+  if (!el._tippy || isSSR) return;
+
+  if (typeof bindings.value === "string") {
+    el._tippy.setProps(merge(settings, { content: bindings.value }));
+
+    return;
+  }
+
+  el._tippy.setProps(merge(settings, bindings.value || {}));
+}
+
+function onUnmounted(el: TippyTargetElement) {
+  if (!el._tippy || isSSR) return;
+
+  el._tippy.destroy();
+}
+
+export default {
+  mounted: onMounted,
+  updated: onUpdated,
+  unmounted: onUnmounted,
+};

package/{index.js → index.ts}

@@ -1,14 +1,17 @@
-/* eslint-disable vue/max-len, prettier/prettier */
-import { createLocale, LocaleSymbol } from "./composables/useLocale.js";
+/* eslint-disable prettier/prettier */
+import { createLocale, LocaleSymbol } from "./composables/useLocale.ts";
 import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay.js";
 import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress.js";
-import { themeInit } from "./utils/utilTheme.js";
+import { themeInit } from "./utils/theme.ts";
 
-export { setTitle } from "./utils/utilHelper.js";
-export { setTheme } from "./utils/utilTheme.js";
+import type { App } from 'vue'
+import type { CreateVuelessOptions } from './types.ts'
+
+export { setTitle } from "./utils/helper.ts";
+export { setTheme } from "./utils/theme.ts";
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
-export { useLocale } from "./composables/useLocale.js";
+export { useLocale } from "./composables/useLocale.ts";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress.js";
 export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress.js";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay.js";
@@ -22,14 +25,14 @@ export {
   setDelayedNotify,
   getDelayedNotify,
 } from "./ui.text-notify/utilNotify.js";
-/* eslint-enable vue/max-len, prettier/prettier */
+/* eslint-enable prettier/prettier */
 
-export function createVueless(options = {}) {
+export function createVueless(options: CreateVuelessOptions = {}) {
   const i18n = createLocale(options.i18n);
   const loaderOverlay = createLoaderOverlay();
   const loaderProgress = createLoaderProgress();
 
-  const install = (app) => {
+  const install = (app: App) => {
     app.provide(LocaleSymbol, i18n);
     app.provide(LoaderOverlaySymbol, loaderOverlay);
     app.provide(LoaderProgressSymbol, loaderProgress);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.479",
+  "version": "0.0.481",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -21,58 +21,71 @@
   ],
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
-  "main": "index.js",
+  "main": "index.ts",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "dev:docs": "npx @vueless/web-types && node prepare.icons && storybook dev -p 6006 --docs --no-open",
-    "dev": "npx @vueless/web-types && node prepare.icons && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
-    "build": "npx @vueless/web-types && node prepare.icons && storybook build --docs",
+    "pre:start": "npx @vueless/web-types && node .scripts/icons",
+    "dev:docs": "npm run pre:start && storybook dev -p 6006 --docs --no-open",
+    "dev": "npm run pre:start && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
+    "build": "npm run pre:start && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
-    "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package",
+    "ts:check": "vue-tsc --build --force",
+    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md node_modules/.cache/vueless/web-types.json dist/ && node .scripts/package",
+    "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
-    "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/",
-    "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/",
-    "lint:ci": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore --max-warnings=0"
+    "lint": "eslint --no-fix src/ .storybook/",
+    "lint:fix": "eslint --fix src/ .storybook/",
+    "lint:ci": "eslint --no-fix --max-warnings=0"
   },
   "dependencies": {
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.9",
     "cva": "^1.0.0-beta.1",
     "lodash-es": "^4.17.21",
-    "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.4",
+    "svgo": "^3.3.2",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss": "^3.4.14",
     "tippy.js": "^6.3.7",
+    "unplugin-vue-components": "^0.27.4",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.12.0",
     "@material-symbols/svg-500": "^0.17.4",
     "@release-it/bumper": "^6.0.1",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.7.7",
     "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.76",
+    "@vitest/eslint-plugin": "^1.1.7",
+    "@vue/eslint-config-prettier": "^10.0.0",
+    "@vue/eslint-config-typescript": "^14.1.1",
+    "@vue/tsconfig": "^0.5.1",
     "@vueless/storybook": "^0.0.37",
-    "@vueless/web-types": "^0.0.17",
+    "@vueless/web-types": "^0.0.21",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
-    "eslint": "^8.55.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-tailwindcss": "^3.15.1",
+    "eslint": "^9.12.0",
+    "eslint-plugin-storybook": "^0.10.0--canary.156.ce8985b.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "eslint-plugin-vue": "^9.25.0",
+    "globals": "^15.11.0",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0",
+    "prettier": "^3.3.3",
     "release-it": "^17.2.1",
-    "vite": "^5.2.13",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-eslint": "^1.8.1",
     "vue": "^3.5.4",
-    "vue-router": "^4.3.2"
+    "vue-i18n": "^10.0.4",
+    "vue-router": "^4.3.2",
+    "vue-tsc": "^2.1.6"
   },
   "resolutions": {
     "jackspeak": "2.3.6"

package/plugin-vite.d.ts

@@ -0,0 +1,10 @@
+export function VuelessUnpluginComponents(options?: unknown): import("vite").Plugin<unknown> & {
+  api: import("unplugin-vue-components/types.js").PublicPluginAPI;
+};
+
+export function Vueless(options?: {
+  env?: string;
+  mode?: string;
+  debug?: boolean;
+  include?: string[];
+}): never;

package/plugin-vite.js

@@ -0,0 +1,97 @@
+/**
+ * The file has `.js` extension because it is a node script.
+ * Please do not change the extension if you do not fully understand the consequences.
+ */
+
+import UnpluginVueComponents from "unplugin-vue-components/vite";
+
+import { loadSvg } from "./utils/node/loaderSvg.js";
+import { copyIcons, removeIcons } from "./utils/node/loaderIcon.js";
+import { createTailwindSafelist, clearTailwindSafelist } from "./utils/node/tailwindSafelist.js";
+import { getNuxtFiles, getVueSourceFile } from "./utils/node/helper.js";
+import { componentResolver, directiveResolver } from "./utils/node/vuelessResolver.js";
+
+/* Automatically importing Vueless components on demand */
+export const VuelessUnpluginComponents = (options) =>
+  UnpluginVueComponents({
+    resolvers: [componentResolver, directiveResolver],
+    dts: false,
+    ...options,
+  });
+
+/*
+  – Creates tailwind colors safelist (collect only used on the project colors).
+  – Collects SVG icons for build (UIcon bundle size optimization).
+  – Loads SVG images as a Vue components.
+ */
+export const Vueless = function (options = {}) {
+  const { mode, debug, env, include } = options;
+
+  const isNuxt = mode === "nuxt-module";
+  const srcDir = isNuxt ? process.cwd() : getVueSourceFile();
+
+  const targetFiles = [srcDir, ...(include || []), ...(isNuxt ? getNuxtFiles() : [])];
+
+  /* if server stopped by developer (Ctrl+C) */
+  process.on("SIGINT", async () => {
+    /* remove dynamically copied icons */
+    await removeIcons({ debug, isNuxt });
+
+    /* clear tailwind safelist */
+    clearTailwindSafelist(debug);
+    process.exit(0);
+  });
+
+  return {
+    name: "vite-plugin-vue-vueless",
+    enforce: "pre",
+
+    config: () => ({
+      define: {
+        "process.env": {},
+      },
+      optimizeDeps: {
+        include: ["tailwindcss/colors.js"],
+      },
+    }),
+
+    configResolved: async (config) => {
+      /* collect used in project colors for tailwind safelist */
+      if (!isNuxt) {
+        await createTailwindSafelist({ mode, env, debug, targetFiles });
+      }
+
+      if (config.command === "build") {
+        await removeIcons({ debug, isNuxt });
+
+        /* dynamically copy used icons before build */
+        await copyIcons({ mode: "vuelessIcons", env, debug, targetFiles });
+        await copyIcons({ mode, env, debug, targetFiles, isNuxt });
+      }
+
+      if (config.command === "dev" || config.command === "serve") {
+        /* remove dynamically copied icons on dev server start */
+        await removeIcons({ debug, isNuxt });
+      }
+    },
+
+    /* remove dynamically copied icons after build */
+    buildEnd: async () => {
+      await removeIcons({ debug, isNuxt });
+    },
+
+    /* load SVG images as a Vue components */
+    load: async (id) => await loadSvg(id, options),
+
+    handleHotUpdate: async ({ file, read }) => {
+      if (!isNuxt && [".js", ".jsx", ".ts", ".tsx", ".vue"].some((ext) => file.endsWith(ext))) {
+        const fileContent = await read();
+
+        if (fileContent.includes("safelist:") || fileContent.includes("color=")) {
+          /* collect used in project colors for tailwind safelist */
+          await createTailwindSafelist({ mode, env, debug, targetFiles });
+        }
+      }
+    },
+  };
+};

package/{preset.tailwind.js → preset-tailwind.js}

@@ -1,3 +1,8 @@
+/**
+ * The file has `.js` extension because it is a node script.
+ * Please do not change the extension if you do not fully understand the consequences.
+ */
+
 import forms from "@tailwindcss/forms";
 import colors from "tailwindcss/colors.js";
 import {
@@ -10,9 +15,14 @@ import {
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
+  DEFAULT_BRAND_COLOR,
+  DEFAULT_GRAY_COLOR,
+  GRAYSCALE_COLOR,
 } from "./constants.js";
 
 const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
+const brandColor = process.env.VUELESS_BRAND || DEFAULT_BRAND_COLOR;
+const grayColor = process.env.VUELESS_GRAY || DEFAULT_GRAY_COLOR;
 
 /**
  * Vueless Tailwind CSS `content` config.
@@ -76,6 +86,9 @@ export const vuelessTailwindConfig = {
       fontSize: {
         "2xs": ["0.625rem", "0.875rem"] /* 10px / 14px */,
       },
+      borderRadius: {
+        dynamic: "var(--vl-rounding)",
+      },
       ringWidth: {
         dynamic: "var(--vl-ring)",
       },
@@ -83,10 +96,7 @@ export const vuelessTailwindConfig = {
         dynamic: "var(--vl-ring-offset)",
       },
       ringOffsetColor: {
-        dynamic: "var(--vl-ring-offset-color)",
-      },
-      borderRadius: {
-        dynamic: "var(--vl-rounding)",
+        "color-dynamic": twColorWithOpacity("--vl-ring-offset-color"),
       },
     },
     configViewer: {
@@ -96,8 +106,8 @@ export const vuelessTailwindConfig = {
         "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
         "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
         "var(--vl-rounding)": DEFAULT_ROUNDING,
-        ...getReplacementColors(GRAY_COLOR, GRAY_COLOR),
-        ...getReplacementColors(BRAND_COLOR, GRAY_COLOR),
+        ...getReplacementColors(GRAY_COLOR, grayColor),
+        ...getReplacementColors(BRAND_COLOR, brandColor),
       },
     },
   },
@@ -141,7 +151,7 @@ function twColorWithOpacity(variableName) {
  * @returns { Object } - TailwindCSS color object palette.
  */
 function getPalette(color) {
-  let palette = {
+  const palette = {
     DEFAULT: twColorWithOpacity(`--vl-color-${color}-default`),
   };
 
@@ -159,6 +169,10 @@ function getPalette(color) {
  * @returns { Object } - `tailwind-config-viewer` color replacement object.
  */
 function getReplacementColors(color, tailwindColor) {
+  if (tailwindColor === GRAYSCALE_COLOR || tailwindColor === COOL_COLOR) {
+    tailwindColor = GRAY_COLOR;
+  }
+
   const varsPalette = {
     [twColorWithOpacity(`--vl-color-${color}-default`)]: colors[tailwindColor][600],
   };