vueless 1.5.2-beta.2 → 1.5.2-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.2-beta.2",
+  "version": "1.5.2-beta.4",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/plugin-vite.js

@@ -12,6 +12,7 @@ import {
   removeIconsCache,
   copyIconsCache,
   generateIconExports,
+  hasIconsCache,
   reloadServerOnIconsCacheUpdate,
   extractIconLines,
   isIconChanged,
@@ -81,21 +82,28 @@ export const Vueless = function (options = {}) {
   // Cache to store previous icon content for change detection
   const iconContentCache = new Map();
 
+  let isProductionBuild = false;
+
   const targetFiles = [
     ...(include || []),
     ...getVuelessAppDirs(),
     ...(isNuxtModuleEnv ? getNuxtDirs() : getVueDirs()),
   ];
 
+  async function cacheIcons(files) {
+    await createIconsCache({ env, targetFiles: files, basePath, debug });
+
+    if (isNuxtModuleEnv) {
+      await copyIconsCache(basePath);
+    }
+  }
+
   /* if server stopped by developer (Ctrl+C) */
   process.on("SIGINT", async () => {
     /* remove `.cache` folder in components and restore changes */
     await removeCustomPropTypes(vuelessSrcDir);
     await restoreComponents(vuelessSrcDir);
 
-    /* remove cached icons */
-    await removeIconsCache(basePath);
-
     /* clear tailwind safelist */
     await clearTailwindSafelist(debug);
 
@@ -130,6 +138,8 @@ export const Vueless = function (options = {}) {
     }),
 
     configResolved: async (config) => {
+      isProductionBuild = config.command === "build" && !config.build.watch;
+
       if (!isNuxtModuleEnv) {
         /* auto import user configs */
         await autoImportUserConfigs(basePath);
@@ -152,14 +162,13 @@ export const Vueless = function (options = {}) {
       /* collect used in project colors for tailwind safelist */
       await createTailwindSafelist({ env, srcDir: vuelessSrcDir, targetFiles, basePath, debug });
 
-      /* cache vueless built-in and project icons */
-      await removeIconsCache(basePath);
-      await createIconsCache({ env, targetFiles, basePath, debug });
-
-      if (isNuxtModuleEnv) {
-        await copyIconsCache(basePath);
+      /* cache vueless built-in and project icons (the dev cache is shared between processes) */
+      if (isProductionBuild) {
+        await removeIconsCache(basePath);
       }
 
+      await cacheIcons(targetFiles);
+
       /* suppress SOURCEMAP_BROKEN warning from Tailwind */
       for (const key of ["rollupOptions", "rolldownOptions"]) {
         const opts = config.build?.[key];
@@ -197,11 +206,7 @@ export const Vueless = function (options = {}) {
 
       if (hasIconChanges && currentIconLines.length) {
         /* cache vueless built-in and project icons */
-        await createIconsCache({ env, targetFiles: [file], basePath, debug });
-
-        if (isNuxtModuleEnv) {
-          await copyIconsCache(basePath);
-        }
+        await cacheIcons([file]);
 
         reloadServerOnIconsCacheUpdate(server);
 
@@ -219,6 +224,11 @@ export const Vueless = function (options = {}) {
     /* load SVG images as a Vue components */
     load: async (id) => {
       if (id === RESOLVED_ICONS_VIRTUAL_MODULE_ID) {
+        /* restore icons cache if it was removed by another process */
+        if (!isProductionBuild && !(await hasIconsCache())) {
+          await cacheIcons(targetFiles);
+        }
+
         return generateIconExports();
       }
 
@@ -226,9 +236,9 @@ export const Vueless = function (options = {}) {
     },
 
     /* remove cached icons */
-    buildEnd: async function () {
-      /* skip in watch mode — configResolved won't re-run */
-      if (this.meta.watchMode) return;
+    buildEnd: async () => {
+      /* skip in dev and watch mode — the cache is shared and configResolved won't re-run */
+      if (!isProductionBuild) return;
 
       await removeIconsCache(basePath);
     },

package/ui.form-date-picker/storybook/stories.ts

@@ -379,7 +379,7 @@ export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
           v-bind="args"
           v-model="args.leftModel"
           class="w-full"
-          :config="{ datepickerInput: { wrapper: 'pl-0' } }"
+          :config="{ datepickerInput: { leftSlot: 'pl-0' } }"
         >
           <template #left>
             <UButton
@@ -396,7 +396,7 @@ export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
           v-bind="args"
           v-model="args.modelValue"
           class="w-full"
-          :config="{ datepickerInput: { wrapper: 'pr-0' } }"
+          :config="{ datepickerInput: { rightSlot: 'pr-0' } }"
         >
           <template #right>
             <UButton

package/ui.form-date-picker-range/storybook/stories.ts

@@ -391,7 +391,7 @@ export const Slots: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
           v-model="leftModel"
           variant="input"
           class="w-full"
-          :config="{ datepickerInput: { wrapper: 'pl-0' } }"
+          :config="{ datepickerInput: { leftSlot: 'pl-0' } }"
         >
           <template #left>
             <UButton
@@ -408,7 +408,7 @@ export const Slots: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
           v-model="args.modelValue"
           variant="input"
           class="w-full"
-          :config="{ datepickerInput: { wrapper: 'pr-0' } }"
+          :config="{ datepickerInput: { rightSlot: 'pr-0' } }"
         >
           <template #right>
             <UButton

package/ui.form-input/UInput.vue

@@ -222,19 +222,9 @@ function setLabelPosition() {
 
   if (leftSlotWrapperRef.value && inputRef.value && labelComponentRef.value?.labelElement) {
     const leftSlotOrIconWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
-    const wrapperElement = inputRef.value.parentElement;
+    const inputLeftPadding = parseFloat(getComputedStyle(inputRef.value).paddingLeft);
 
-    let wrapperGap = 0;
-    let wrapperLeftPadding = 0;
-
-    if (wrapperElement) {
-      wrapperGap = parseFloat(getComputedStyle(wrapperElement).gap);
-      wrapperLeftPadding = parseFloat(getComputedStyle(wrapperElement).paddingLeft);
-    }
-
-    if (labelComponentRef.value?.labelElement) {
-      labelComponentRef.value.labelElement.style.left = `${leftSlotOrIconWidth + wrapperLeftPadding + wrapperGap}px`;
-    }
+    labelComponentRef.value.labelElement.style.left = `${leftSlotOrIconWidth + inputLeftPadding}px`;
   }
 }
 

package/ui.form-input/config.ts

@@ -11,7 +11,7 @@ export default /*tw*/ {
   },
   wrapper: {
     base: `
-      flex gap-3 w-full px-3 relative bg-default transition
+      flex w-full relative bg-default transition
       border border-solid rounded-medium border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
@@ -37,11 +37,11 @@ export default /*tw*/ {
   },
   leftIcon: "{UIcon} {>inputIcon} -mr-0.5",
   rightIcon: "{UIcon} {>inputIcon} -ml-0.5",
-  leftSlot: "flex items-center",
-  rightSlot: "flex items-center",
+  leftSlot: "flex items-center shrink-0 pl-3",
+  rightSlot: "flex items-center shrink-0 pr-3",
   input: {
     base: `
-      block w-full py-2 font-normal leading-none! bg-transparent
+      block w-full min-w-0 px-3 py-2 font-normal leading-none! bg-transparent
       border-none rounded-inherit transition focus:outline-none
       placeholder:font-normal placeholder:text-muted
       disabled:text-accented disabled:cursor-not-allowed

package/ui.form-input/storybook/stories.ts

@@ -211,7 +211,7 @@ export const Slots: StoryFn<UInputArgs> = (args) => ({
         <UInput
           label="Phone Number"
           placeholder="Enter your phone number"
-          :config="{ wrapper: 'pl-0' }"
+          :config="{ leftSlot: 'pl-0' }"
         >
           <template #label="{ label }">
             {{ label }}

package/ui.form-input-number/storybook/stories.ts

@@ -221,7 +221,7 @@ export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
         <UInputNumber
           label="Left slot"
           placeholder="Enter discount amount"
-          :config="{ numberInput: { wrapper: 'pl-0' } }"
+          :config="{ numberInput: { leftSlot: 'pl-0' } }"
         >
           <template #left>
             <UDropdownButton

package/ui.form-input-password/storybook/stories.ts

@@ -161,7 +161,7 @@ export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
           v-bind="args"
           v-model="args.modelValue"
           label="Enter your password"
-          :config="{ passwordInput: { wrapper: 'pl-0' } }"
+          :config="{ passwordInput: { leftSlot: 'pl-0' } }"
         >
           <template #label="{ label }">
             {{ label }}
@@ -184,7 +184,7 @@ export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
           v-bind="args"
           v-model="args.modelValue"
           label="Enter your password"
-          :config="{ passwordInput: { wrapper: 'pr-0' } }"
+          :config="{ passwordInput: { rightSlot: 'pr-0' } }"
         >
           <template #label="{ label }">
             {{ label }}

package/ui.form-input-search/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   searchInput: "{UInput}",
   searchInputWithButton: {
     base: "{UInput} {>searchInput}",
-    wrapper: "pr-0",
+    rightSlot: "pr-0",
   },
   inputIcon: {
     base: "{UIcon}",
@@ -17,7 +17,7 @@ export default /*tw*/ {
   clearIcon: "{>inputIcon}",
   searchIcon: "{>inputIcon} -mr-1",
   searchButton: {
-    base: "{UButton} rounded-l-none ml-2",
+    base: "{UButton} self-stretch py-0 rounded-l-none ml-2",
     defaults: {
       size: {
         sm: "xs",

package/ui.form-input-search/storybook/stories.ts

@@ -179,7 +179,7 @@ export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
 
       <UInputSearch
         placeholder="Ask something..."
-        :config="{ searchInput: { wrapper: 'pl-0' } }"
+        :config="{ searchInput: { leftSlot: 'pl-0' } }"
       >
         <template #left>
           <UDropdownButton

package/ui.form-label/config.ts

@@ -25,7 +25,7 @@ export default /*tw*/ {
   },
   content: "flex",
   label: {
-    base: "z-10 block leading-none! transition",
+    base: "z-1 block leading-none! transition",
     variants: {
       size: {
         sm: "text-small",

package/ui.form-textarea/UTextarea.vue

@@ -146,19 +146,9 @@ function setLabelPosition() {
 
   if (leftSlotWrapperRef.value && textareaRef.value && labelComponentRef.value?.labelElement) {
     const leftSlotWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
-    const wrapperElement = textareaRef.value.parentElement;
+    const textareaPaddingLeft = parseFloat(getComputedStyle(textareaRef.value).paddingLeft);
 
-    let wrapperGap = 0;
-    let wrapperLeftPadding = 0;
-
-    if (wrapperElement) {
-      wrapperGap = parseFloat(getComputedStyle(wrapperElement).gap);
-      wrapperLeftPadding = parseFloat(getComputedStyle(wrapperElement).paddingLeft);
-    }
-
-    if (labelComponentRef.value?.labelElement) {
-      labelComponentRef.value.labelElement.style.left = `${leftSlotWidth + wrapperLeftPadding + wrapperGap}px`;
-    }
+    labelComponentRef.value.labelElement.style.left = `${leftSlotWidth + textareaPaddingLeft}px`;
   }
 }
 

package/ui.form-textarea/config.ts

@@ -9,12 +9,12 @@ export default /*tw*/ {
       },
     },
   },
-  slot: "flex items-center justify-center whitespace-nowrap gap-1 rounded-medium",
-  leftSlot: "{>slot} rounded-r-none",
-  rightSlot: "{>slot} rounded-l-none",
+  slot: "flex shrink-0 items-center justify-center whitespace-nowrap gap-1 rounded-medium",
+  leftSlot: "{>slot} pl-3 rounded-r-none",
+  rightSlot: "{>slot} pr-3 rounded-l-none",
   wrapper: {
     base: `
-      flex px-3 py-2 gap-3 w-full bg-default transition
+      flex w-full bg-default transition
       rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
@@ -30,7 +30,7 @@ export default /*tw*/ {
   },
   textarea: {
     base: `
-      block w-full bg-transparent border-none font-normal
+      block w-full min-w-0 px-3 py-2 bg-transparent border-none font-normal
       placeholder:text-muted placeholder:font-normal placeholder:leading-none
       focus:outline-none disabled:cursor-not-allowed
     `,
@@ -51,9 +51,9 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, size: "sm", class: "mt-3" },
-      { labelAlign: "topInside", label: true, size: "md", class: "mt-4" },
-      { labelAlign: "topInside", label: true, size: "lg", class: "mt-5" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
     ],
   },
   defaults: {

package/utils/node/loaderIcon.d.ts

@@ -2,6 +2,7 @@ export function createIconsCache({ env, debug, targetFiles, basePath }?: string)
 export function removeIconsCache(basePath: string, isVuelessEnv?: boolean): Promise<void>;
 export function copyIconsCache(basePath: string, isVuelessEnv?: boolean): Promise<void>;
 export function generateIconExports(): string;
+export function hasIconsCache(): Promise<boolean>;
 export function reloadServerOnIconsCacheUpdate(server: Object): void;
 export function extractIconLines(content: string): string[];
 export function isIconChanged(currentLines: string[], previousLines: string[]): boolean;

package/utils/node/loaderIcon.js

@@ -126,10 +126,7 @@ export async function copyIconsCache(basePath, isVuelessEnv = false) {
  * @return {string} A string containing the export statement for the cached SVG icons as an array to be used in Vite.
  */
 export async function generateIconExports() {
-  const cachePath = path.join(cwd(), ICONS_CACHED_DIR);
-  const files = await getDirFiles(cachePath, ".svg", {
-    recursive: true,
-  });
+  const files = await getCachedIconFiles();
 
   const entries = files.map((filePath) => {
     const fullImportPath = path.resolve(filePath).replace(/\\/g, "/");
@@ -142,6 +139,22 @@ export async function generateIconExports() {
   return `export const cachedIcons = [\n${entries.join(",\n")}\n];`;
 }
 
+/**
+ * Check if the icons cache contains at least one SVG icon.
+ * @returns {Promise<boolean>}
+ */
+export async function hasIconsCache() {
+  return (await getCachedIconFiles()).length > 0;
+}
+
+/**
+ * Get paths of all cached SVG icons.
+ * @returns {Promise<string[]>}
+ */
+function getCachedIconFiles() {
+  return getDirFiles(path.join(cwd(), ICONS_CACHED_DIR), ".svg", { recursive: true });
+}
+
 /**
  * Reloads the server when the icons cache is updated. This function sets up a file system watcher
  * on the icons cache directory and triggers a full server reload whenever files are added or removed.
@@ -193,9 +206,11 @@ async function findAndCopyIcons(files, library, vuelessConfig, debug) {
   const validIconNamesRegex = /^(?!icon$|name$)[a-z0-9_-]+$/;
   const ternaryRegex = /\?.*:/;
 
+  const iconNames = new Set();
+
   safelistIcons?.forEach((iconName) => {
     if (validIconNamesRegex.test(iconName)) {
-      copyIcon(iconName, library);
+      iconNames.add(iconName);
     }
   });
 
@@ -212,11 +227,7 @@ async function findAndCopyIcons(files, library, vuelessConfig, debug) {
         const iconName = iconNameMatch && iconNameMatch[2];
 
         if (validIconNamesRegex.test(iconName)) {
-          try {
-            iconName && copyIcon(iconName, library);
-          } catch (error) {
-            debug && console.log(error);
-          }
+          iconNames.add(iconName);
         }
 
         iconNameRegex.lastIndex = 0;
@@ -249,10 +260,10 @@ async function findAndCopyIcons(files, library, vuelessConfig, debug) {
               continue;
             }
 
-            copyIcon(trueName, library);
-            copyIcon(falseName, library);
+            iconNames.add(trueName);
+            iconNames.add(falseName);
           } else {
-            copyIcon(iconName, library);
+            iconNames.add(iconName);
           }
         } catch (error) {
           debug && console.log(error);
@@ -260,6 +271,12 @@ async function findAndCopyIcons(files, library, vuelessConfig, debug) {
       }
     }
   });
+
+  await Promise.all(
+    [...iconNames].map((iconName) =>
+      copyIcon(iconName, library).catch((error) => debug && console.log(error)),
+    ),
+  );
 }
 
 /**

package/utils/tests/ui.test.ts

@@ -1,9 +1,7 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 
 import { COLOR_MODE_KEY } from "../../constants.js";
-import { loadSSRVuelessConfig, setVuelessConfig, vuelessConfig } from "../ui";
-
-import type { Config } from "../../types";
+import { setVuelessConfig } from "../ui";
 
 /* jsdom doesn't implement matchMedia, which theme.ts evaluates on import. */
 const prefersDark = { matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() };
@@ -12,37 +10,17 @@ window.matchMedia = vi.fn(() => prefersDark) as unknown as typeof window.matchMe
 
 const { getThemeCookieName } = await import("../theme");
 
-beforeEach(() => {
-  Object.keys(vuelessConfig).forEach((key) => delete vuelessConfig[key as keyof Config]);
-});
-
-describe("loadSSRVuelessConfig", () => {
-  it.each([
-    ["resolves", () => ({ cookiePrefix: "from-file" })],
-    [
-      "fails",
-      () => {
-        throw new Error("Cannot find module '/vueless.config'");
-      },
-    ],
-  ])("keeps the injected config when a deferred import %s", async (_, settle: () => Config) => {
-    let release!: () => void;
-    const released = new Promise<void>((resolve) => (release = resolve));
-
-    const loading = loadSSRVuelessConfig(() => released.then(() => ({ default: settle() })));
-
+describe("setVuelessConfig", () => {
+  it("uses the injected config", () => {
     setVuelessConfig({ cookiePrefix: "app-a" });
-    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
-
-    release();
-    await loading;
 
     expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
   });
 
-  it("uses the imported config when none was injected", async () => {
-    await loadSSRVuelessConfig(async () => ({ default: { cookiePrefix: "from-file" } }));
+  it("keeps the current config when an empty one is injected", () => {
+    setVuelessConfig({ cookiePrefix: "app-a" });
+    setVuelessConfig({});
 
-    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`from-file-${COLOR_MODE_KEY}`);
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
   });
 });

package/utils/ui.ts

@@ -3,7 +3,6 @@ import { cx as cvaCx } from "cva";
 import { defineConfig } from "cva/config";
 import { extendTailwindMerge } from "tailwind-merge";
 
-import { isCSR, isSSR } from "./helper";
 import { createGetMergedConfig } from "./node/mergeConfigs";
 import { COMPONENT_NAME as U_ICON } from "../ui.image-icon/constants";
 import { ICON_NON_PROPS_DEFAULTS, TAILWIND_MERGE_EXTENSION } from "../constants";
@@ -30,7 +29,13 @@ type GetMergedConfig = (options: MergedConfigOptions) => unknown;
  * Load Vueless config from the project root.
  * Both for server and client side renderings.
  */
-export let vuelessConfig: Config = {};
+export let vuelessConfig: Config =
+  Object.values(
+    import.meta.glob(["/vueless.config.{js,ts}"], {
+      eager: true,
+      import: "default",
+    }),
+  )[0] || {};
 
 export function setVuelessConfig(config?: Config) {
   config = config || {};
@@ -38,32 +43,6 @@ export function setVuelessConfig(config?: Config) {
   vuelessConfig = Object.keys(config).length ? config : vuelessConfig;
 }
 
-if (isCSR) {
-  vuelessConfig =
-    Object.values(
-      import.meta.glob(["/vueless.config.{js,ts}"], {
-        eager: true,
-        import: "default",
-      }),
-    )[0] || {};
-}
-
-/** Load Vueless config on the server; a config injected via `createVueless` meanwhile wins. */
-export async function loadSSRVuelessConfig(
-  // @ts-expect-error: vueless.config.{js,ts} is optional
-  importConfig = () => import(/* @vite-ignore */ "/vueless.config"),
-) {
-  try {
-    const { default: config } = await importConfig();
-
-    if (!Object.keys(vuelessConfig).length) vuelessConfig = config;
-  } catch {
-    /* No config file: keep the current config. */
-  }
-}
-
-if (isSSR) loadSSRVuelessConfig();
-
 /**
  * Extend twMerge (tailwind merge) by vueless and user config:
  */