vueless 1.2.10 → 1.2.11

package/README.md

@@ -26,7 +26,7 @@ Vueless is simple enough for everyday use and powerful enough for advanced scena
 - ♿️ Accessibility (a11y)
 - ⚙️ Server-side rendering (SSR) friendly
 - 🖼️ 1000+ built-in SVG icons
-- 🧪️ 1200+ unit tests ensuring consistent logic
+- 🧪️ 1300+ unit tests ensuring consistent logic
 - 🛡️ Full TypeScript support with type safety
 
 ### Advanced Features

package/bin/commands/copy.js

@@ -14,15 +14,16 @@ import { COMPONENTS, VUELESS_PACKAGE_DIR, VUELESS_USER_COMPONENTS_DIR } from "..
 /**
  * Copies an existing Vueless component to a new location with a new name.
  * This includes duplicating the source files and updating the component's internal references as needed.
+ * If the target name is omitted or matches the source name, the component will override the original.
  *
- * @param {Array<string>} options - An array containing two elements:
+ * @param {Array<string>} options - An array containing one or two elements:
  * – The name of the component to be copied.
- * – The desired name for the copied component.
+ * – (Optional) The desired name for the copied component. If omitted, uses the source component name.
  * @return {Promise<void>} A promise that resolves when the component has been successfully copied.
  * If an error occurs, no value is returned, and the operation exits early with a logged message.
  */
 export async function copyVuelessComponent(options) {
-  const [componentName, newComponentName] = options;
+  const [componentName, newComponentName = ""] = options;
 
   if (!componentName) {
     console.log(styleText("red", "Component name is required."));
@@ -36,21 +37,14 @@ export async function copyVuelessComponent(options) {
     return;
   }
 
-  if (newComponentName in COMPONENTS) {
-    console.log(
-      styleText("red", `Component with name '${newComponentName}' already exists in Vueless UI.`),
-    );
-
-    return;
-  }
-
-  if (!newComponentName.startsWith("U")) {
+  if (newComponentName && !newComponentName.startsWith("U")) {
     console.log(styleText("red", `Component should have 'U' prefix (ex. 'UButtonCustom').`));
 
     return;
   }
 
   const absoluteSourcePath = path.join(cwd(), VUELESS_PACKAGE_DIR, COMPONENTS[componentName]);
+
   const absoluteDestPath = path.join(cwd(), VUELESS_USER_COMPONENTS_DIR, newComponentName);
 
   if (existsSync(absoluteDestPath)) {
@@ -62,10 +56,14 @@ export async function copyVuelessComponent(options) {
   await cp(absoluteSourcePath, absoluteDestPath, { recursive: true });
   await modifyCreatedComponent(absoluteDestPath, componentName, newComponentName);
 
-  console.log(
-    // eslint-disable-next-line vue/max-len, prettier/prettier
-    styleText("green", `The '${componentName}' was successfully copied into the '${VUELESS_USER_COMPONENTS_DIR}/${newComponentName}' directory.`)
-  );
+  const isOverridingOriginal = componentName === newComponentName;
+  const destDir = `${VUELESS_USER_COMPONENTS_DIR}/${newComponentName}`;
+
+  const successMessage = isOverridingOriginal
+    ? `The '${componentName}' was successfully copied and will override the original component.`
+    : `The '${componentName}' was successfully copied into the '${destDir}' directory.`;
+
+  console.log(styleText("green", successMessage));
 }
 
 /**

package/composables/useRequestQueue.ts

@@ -1,4 +1,5 @@
 import { readonly, ref } from "vue";
+import { isCSR } from "../utils/helper";
 
 import type { Ref } from "vue";
 
@@ -34,8 +35,10 @@ function onRemoveFromRequestQueue(event: CustomEvent<{ request: string }>) {
   removeFromRequestQueue(event.detail.request);
 }
 
-window.addEventListener("addToRequestQueue", onAddToRequestQueue as EventListener);
-window.addEventListener("removeFromRequestQueue", onRemoveFromRequestQueue as EventListener);
+if (isCSR) {
+  window.addEventListener("addToRequestQueue", onAddToRequestQueue as EventListener);
+  window.addEventListener("removeFromRequestQueue", onRemoveFromRequestQueue as EventListener);
+}
 
 export function useRequestQueue() {
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "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

@@ -20,6 +20,7 @@ import { createTailwindSafelist, clearTailwindSafelist } from "./utils/node/tail
 import { componentResolver, directiveResolver } from "./utils/node/vuelessResolver.js";
 import { setCustomPropTypes, removeCustomPropTypes } from "./utils/node/dynamicProps.js";
 import { buildWebTypes } from "./utils/node/webTypes.js";
+import { overrideComponents, restoreComponents } from "./utils/node/componentOverride.js";
 import {
   getNuxtDirs,
   getVueDirs,
@@ -84,6 +85,7 @@ export const Vueless = function (options = {}) {
   process.on("SIGINT", async () => {
     if (isInternalEnv || isStorybookEnv) {
       await removeCustomPropTypes(vuelessSrcDir);
+      await restoreComponents(vuelessSrcDir);
     }
 
     /* remove cached icons */
@@ -129,6 +131,9 @@ export const Vueless = function (options = {}) {
         await cacheMergedConfigs({ vuelessSrcDir, basePath });
       }
 
+      /* override components with custom ones from .vueless/components */
+      await overrideComponents({ vuelessSrcDir });
+
       /* set custom prop types */
       await setCustomPropTypes({ vuelessSrcDir, basePath });
 

package/ui.button-link/ULink.vue

@@ -69,6 +69,13 @@ const prefixedHref = computed(() => {
 });
 
 function onClick(event: MouseEvent) {
+  if (props.disabled) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    return;
+  }
+
   emit("click", event);
 }
 

package/ui.form-calendar/UCalendarMonthView.vue

@@ -91,7 +91,7 @@ const { monthViewAttrs, monthAttrs, currentMonthAttrs, selectedMonthAttrs, activ
         size="md"
         v-bind="selectedMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
-        :label="formatDate(month, 'F', props.locale)"
+        :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
         @mousedown.prevent.capture
       />
@@ -102,7 +102,7 @@ const { monthViewAttrs, monthAttrs, currentMonthAttrs, selectedMonthAttrs, activ
         color="primary"
         v-bind="currentMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
-        :label="formatDate(month, 'F', props.locale)"
+        :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
         @mousedown.prevent.capture
       />
@@ -114,7 +114,7 @@ const { monthViewAttrs, monthAttrs, currentMonthAttrs, selectedMonthAttrs, activ
         size="md"
         v-bind="activeMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
-        :label="formatDate(month, 'F', props.locale)"
+        :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
         @mousedown.prevent.capture
       />
@@ -126,7 +126,7 @@ const { monthViewAttrs, monthAttrs, currentMonthAttrs, selectedMonthAttrs, activ
         size="md"
         v-bind="monthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
-        :label="formatDate(month, 'F', props.locale)"
+        :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
         @mousedown.prevent.capture
       />

package/ui.form-calendar/tests/UCalendar.test.ts

@@ -585,10 +585,10 @@ describe("UCalendar.vue", () => {
     });
 
     it("Arrow Key Navigation – moves focus correctly in month view", async () => {
-      const expectedMonthAfterRight = "February";
-      const expectedMonthAfterLeft = "January";
-      const expectedMonthAfterDown = "April";
-      const expectedMonthAfterUp = "January";
+      const expectedMonthAfterRight = "Feb";
+      const expectedMonthAfterLeft = "Jan";
+      const expectedMonthAfterDown = "Apr";
+      const expectedMonthAfterUp = "Jan";
 
       const component = mount(UCalendar, {
         props: {

package/ui.form-calendar/tests/UCalendarMonthView.test.ts

@@ -205,7 +205,7 @@ describe("UCalendarMonthView.vue", () => {
 
       const allButtons = component.findAllComponents(UButton);
       const mayButton = allButtons.find((button) => button.props("label") === "May");
-      const decemberButton = allButtons.find((button) => button.props("label") === "December");
+      const decemberButton = allButtons.find((button) => button.props("label") === "Dec");
 
       expect(mayButton?.props("disabled")).toBe(true);
       expect(decemberButton?.props("disabled")).toBe(true);

package/ui.form-date-picker-range/UDatePickerRangeInputs.vue

@@ -27,26 +27,15 @@ const inputRangeToError = defineModel<string>("inputRangeToError", { required: t
 const rangeStart = defineModel<string>("rangeStart", { required: true });
 const rangeEnd = defineModel<string>("rangeEnd", { required: true });
 
-function isGraterThanTo(value: string) {
-  if (!value) return false;
+function isFromGreaterThanTo(fromValue: string, toValue: string) {
+  if (!fromValue || !toValue) return false;
 
-  const parsedValue = parseDate(value, INPUT_RANGE_FORMAT, props.locale);
-  const parsedTo = parseDate(localValue.value.to, props.dateFormat, props.locale);
+  const parsedFrom = parseDate(fromValue, INPUT_RANGE_FORMAT, props.locale);
+  const parsedTo = parseDate(toValue, INPUT_RANGE_FORMAT, props.locale);
 
-  if (!parsedValue || !parsedTo) return false;
+  if (!parsedFrom || !parsedTo) return false;
 
-  return parsedValue > parsedTo && !isSameDay(parsedValue, parsedTo);
-}
-
-function isSmallerThanFrom(value: string) {
-  if (!value) return false;
-
-  const parsedValue = parseDate(value, INPUT_RANGE_FORMAT, props.locale);
-  const parsedFrom = parseDate(localValue.value.from, props.dateFormat, props.locale);
-
-  if (!parsedValue || !parsedFrom) return false;
-
-  return parsedValue < parsedFrom && !isSameDay(parsedValue, parsedFrom);
+  return parsedFrom > parsedTo && !isSameDay(parsedFrom, parsedTo);
 }
 
 function validateInput(value: string, type: `${InputRangeType}`) {
@@ -60,18 +49,30 @@ function validateInput(value: string, type: `${InputRangeType}`) {
     error = props.locale.notCorrectMonthNumber;
   } else if (isWrongDayNumber(value) && value) {
     error = props.locale.notCorrectDayNumber;
-  } else if (isGraterThanTo(value) && type === InputRangeType.Start) {
+  } else if (type === InputRangeType.Start && isFromGreaterThanTo(value, rangeEnd.value)) {
     error = props.locale.fromDateGraterThanSecond;
-  } else if (isSmallerThanFrom(value) && type === InputRangeType.End) {
+  } else if (type === InputRangeType.End && isFromGreaterThanTo(rangeStart.value, value)) {
     error = props.locale.toDateSmallerThanFirst;
   }
 
   if (type === InputRangeType.Start) {
     inputRangeFromError.value = error;
+
+    if (!error && rangeEnd.value) {
+      inputRangeToError.value = isFromGreaterThanTo(value, rangeEnd.value)
+        ? props.locale.toDateSmallerThanFirst
+        : "";
+    }
   }
 
   if (type === InputRangeType.End) {
     inputRangeToError.value = error;
+
+    if (!error && rangeStart.value) {
+      inputRangeFromError.value = isFromGreaterThanTo(rangeStart.value, value)
+        ? props.locale.fromDateGraterThanSecond
+        : "";
+    }
   }
 }
 

package/ui.navigation-tabs/UTabs.vue

@@ -126,7 +126,6 @@ const {
           :label="item.label"
           :value="item.value"
           :disabled="item.disabled"
-          :size="size"
           v-bind="tabAttrs"
           :data-test="getDataTest(`item-${index}`)"
         />

package/utils/node/componentOverride.d.ts

@@ -0,0 +1,2 @@
+export function overrideComponents({ vuelessSrcDir }?: {}): Promise<void>;
+export function restoreComponents(vuelessSrcDir: any): Promise<void>;

package/utils/node/componentOverride.js

@@ -0,0 +1,139 @@
+import path from "node:path";
+import fs from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { cwd } from "node:process";
+
+import { CACHE_DIR, COMPONENTS, VUELESS_USER_COMPONENTS_DIR } from "../../constants.js";
+
+async function isDirNotEmpty(dirPath) {
+  if (!existsSync(dirPath)) {
+    return false;
+  }
+
+  try {
+    const files = await fs.readdir(dirPath);
+
+    return files.length > 0;
+  } catch {
+    return false;
+  }
+}
+
+async function cacheOriginalComponent(componentDir, componentName) {
+  const cacheDir = path.join(componentDir, CACHE_DIR, componentName);
+
+  if (existsSync(cacheDir)) {
+    return;
+  }
+
+  if (!existsSync(path.join(componentDir, CACHE_DIR))) {
+    await fs.mkdir(path.join(componentDir, CACHE_DIR), { recursive: true });
+  }
+
+  await fs.mkdir(cacheDir, { recursive: true });
+
+  const files = await fs.readdir(componentDir);
+
+  for (const file of files) {
+    const filePath = path.join(componentDir, file);
+    const stat = await fs.stat(filePath);
+
+    if (stat.isFile()) {
+      const destPath = path.join(cacheDir, file);
+
+      await fs.copyFile(filePath, destPath);
+    } else if (stat.isDirectory() && file !== CACHE_DIR) {
+      const destPath = path.join(cacheDir, file);
+
+      await fs.cp(filePath, destPath, { recursive: true });
+    }
+  }
+}
+
+async function copyCustomComponent(customComponentDir, targetComponentDir) {
+  const files = await fs.readdir(customComponentDir);
+
+  for (const file of files) {
+    const sourcePath = path.join(customComponentDir, file);
+    const destPath = path.join(targetComponentDir, file);
+    const stat = await fs.stat(sourcePath);
+
+    if (stat.isFile()) {
+      await fs.copyFile(sourcePath, destPath);
+    } else if (stat.isDirectory()) {
+      await fs.cp(sourcePath, destPath, { recursive: true, force: true });
+    }
+  }
+}
+
+export async function overrideComponents({ vuelessSrcDir } = {}) {
+  const customComponentsDir = path.join(cwd(), VUELESS_USER_COMPONENTS_DIR);
+
+  if (!existsSync(customComponentsDir)) {
+    return;
+  }
+
+  for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
+    const customComponentPath = path.join(customComponentsDir, componentName);
+    const isCustomComponentExists = await isDirNotEmpty(customComponentPath);
+
+    if (!isCustomComponentExists) {
+      continue;
+    }
+
+    const targetComponentDir = path.join(vuelessSrcDir, componentDir);
+
+    await cacheOriginalComponent(targetComponentDir, componentName);
+    await copyCustomComponent(customComponentPath, targetComponentDir);
+  }
+}
+
+export async function restoreComponents(vuelessSrcDir) {
+  for await (const componentDir of Object.values(COMPONENTS)) {
+    const componentPath = path.join(vuelessSrcDir, componentDir);
+    const cachePath = path.join(componentPath, CACHE_DIR);
+
+    if (!existsSync(cachePath)) {
+      continue;
+    }
+
+    const cachedDirs = await fs.readdir(cachePath);
+
+    for (const cachedDir of cachedDirs) {
+      const cachedComponentPath = path.join(cachePath, cachedDir);
+      const stat = await fs.stat(cachedComponentPath);
+
+      if (!stat.isDirectory()) {
+        continue;
+      }
+
+      const files = await fs.readdir(cachedComponentPath);
+
+      for (const file of files) {
+        const sourcePath = path.join(cachedComponentPath, file);
+        const destPath = path.join(componentPath, file);
+        const fileStat = await fs.stat(sourcePath);
+
+        if (fileStat.isFile()) {
+          await fs.copyFile(sourcePath, destPath);
+        } else if (fileStat.isDirectory()) {
+          const destExists = existsSync(destPath);
+
+          if (destExists) {
+            await fs.rm(destPath, { recursive: true, force: true });
+          }
+
+          await fs.cp(sourcePath, destPath, { recursive: true });
+        }
+      }
+
+      await fs.rm(cachedComponentPath, { recursive: true, force: true });
+    }
+
+    const remainingFiles = await fs.readdir(cachePath);
+
+    if (remainingFiles.length === 0) {
+      await fs.rmdir(cachePath);
+    }
+  }
+}

package/utils/node/dynamicProps.js

@@ -22,6 +22,7 @@ const OPTIONAL_MARK = "?";
 const CLOSING_BRACKET = "}";
 const IGNORE_PROP = "@ignore";
 const CUSTOM_PROP = "@custom";
+const DEFAULT_PROP_TYPE = "string";
 
 /* regular expressions */
 const PROPS_INTERFACE_REG_EXP = /export\s+interface\s+Props(?:<[^>]+>)?\s*{([^}]*)}/s;
@@ -243,7 +244,7 @@ async function modifyComponentTypes(filePath, props) {
     const lines = propsInterface.split("\n");
 
     for (const name in props) {
-      const { type = "string", values = [], description, required, ignore } = props[name];
+      const { type, values = [], description, required, ignore } = props[name];
 
       /* Find line with prop. */
       const propRegex = new RegExp(`^\\s*${name}[?:]?\\s*:`);
@@ -269,7 +270,7 @@ async function modifyComponentTypes(filePath, props) {
         .includes("@extendOnly");
 
       const propDescription = description?.replaceAll(/[\n\s]+/g, " ").trim() || "–"; // removes new lines and double spaces.
-      const propType = unionType.length ? unionType : type;
+      const propType = unionType.length ? unionType : type || DEFAULT_PROP_TYPE;
 
       /* Add ignore JSDoc property. */
       if (ignore) {
@@ -284,7 +285,6 @@ async function modifyComponentTypes(filePath, props) {
         if (unionType.length && (isAssignableValue || !isExtendOnly)) {
           // Remove multiline union types;
           lines.splice(propIndex + 1, propEndIndex);
-
           lines.splice(propIndex, 1, `  ${name}${defaultOptionalMark}: ${propType};`);
         }
 
@@ -311,7 +311,7 @@ async function modifyComponentTypes(filePath, props) {
         `   * ${propDescription}`,
         `   * ${CUSTOM_PROP}`,
         `   */`,
-        `  ${name}${optionalMark}: ${type};`,
+        `  ${name}${optionalMark}: ${type || DEFAULT_PROP_TYPE};`,
       ];
 
       lines.splice(closingBracketIndex, 0, ...propDefinition);

package/v.click-outside/vClickOutside.ts

@@ -1,4 +1,5 @@
 import { unref } from "vue";
+import { isSSR } from "../utils/helper";
 
 import type { MaybeRef } from "vue";
 import type {
@@ -42,6 +43,8 @@ function clickOutside(
     handler(event);
   }
 
+  if (isSSR) return () => {};
+
   window.addEventListener("click", onClick, { passive: true, capture });
   window.addEventListener("pointerdown", onClick, { passive: true });