vueless 1.5.2-beta.3 → 1.5.2-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.2-beta.3",
+  "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)),
+    ),
+  );
 }
 
 /**