vueless 0.0.576 → 0.0.578

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.576",
+  "version": "0.0.578",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/plugin-vite.js

@@ -10,6 +10,7 @@ import { cacheIcons, removeIconsCache, copyIconsCache } from "./utils/node/loade
 import { createTailwindSafelist, clearTailwindSafelist } from "./utils/node/tailwindSafelist.js";
 import { getNuxtFiles, getVueFiles } from "./utils/node/helper.js";
 import { componentResolver, directiveResolver } from "./utils/node/vuelessResolver.js";
+import { setCustomPropTypes, removeCustomPropTypes } from "./utils/node/dynamicProps.js";
 
 /* Automatically importing Vueless components on demand */
 export const VuelessUnpluginComponents = (options) =>
@@ -34,6 +35,8 @@ export const Vueless = function (options = {}) {
 
   /* if server stopped by developer (Ctrl+C) */
   process.on("SIGINT", async () => {
+    await removeCustomPropTypes(isVuelessEnv);
+
     /* remove cached icons */
     await removeIconsCache(mirrorCacheDir, debug);
 
@@ -82,6 +85,8 @@ export const Vueless = function (options = {}) {
         await cacheIcons({ mode: "vuelessIcons", env, debug, targetFiles });
         /* copy vueless cache folder */
         await copyIconsCache(mirrorCacheDir, debug);
+
+        await setCustomPropTypes(isVuelessEnv);
       }
     },
 

package/ui.button/UButton.vue

@@ -12,12 +12,12 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 import defaultConfig from "./config.ts";
 import { UButton } from "./constants.ts";
 
-import type { UButtonProps, LoaderSize, IconSize, Config } from "./types.ts";
+import type { Props, LoaderSize, IconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UButtonProps>(), {
-  ...getDefaults<UButtonProps>(defaultConfig, UButton),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props>(defaultConfig, UButton),
 });
 
 const slots = useSlots();

package/ui.button/storybook/stories.ts

@@ -15,9 +15,9 @@ import UCol from "../../ui.container-col/UCol.vue";
 import { useDarkMode } from "../../composables/useDarkMode.ts";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UButtonProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UButtonArgs extends UButtonProps {
+interface UButtonArgs extends Props {
   slotTemplate?: string;
   enum: "variant" | "size";
 }

package/ui.button/types.ts

@@ -6,7 +6,7 @@ export type Config = ComponentConfig<typeof defaultConfig>;
 export type LoaderSize = "sm" | "md" | "lg";
 export type IconSize = "2xs" | "xs" | "sm" | "md";
 
-export interface UButtonProps {
+export interface Props {
   /**
    * Button variant.
    */

package/ui.form-calendar/UCalendar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="TModelValue extends DateValue">
-import { computed, ref, watch, useTemplateRef, onMounted } from "vue";
+import { computed, ref, watch, useTemplateRef } from "vue";
 import { merge } from "lodash-es";
 
 import UButton from "../ui.button/UButton.vue";
@@ -333,19 +333,23 @@ watch(
   },
 );
 
-onMounted(() => {
-  if (selectedDate.value && isTimepickerEnabled.value && isInputRefs.value && props.timepicker) {
-    hoursRef.value!.value = String(selectedDate.value.getHours()).padStart(2, "0");
-    minutesRef.value!.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
-    secondsRef.value!.value = String(selectedDate.value.getSeconds()).padStart(2, "0");
+watch(
+  selectedDate,
+  () => {
+    if (selectedDate.value && isTimepickerEnabled.value && isInputRefs.value && props.timepicker) {
+      hoursRef.value!.value = String(selectedDate.value.getHours()).padStart(2, "0");
+      minutesRef.value!.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
+      secondsRef.value!.value = String(selectedDate.value.getSeconds()).padStart(2, "0");
 
-    emit("userDateChange", userFormattedDate.value);
-  }
+      emit("userDateChange", userFormattedDate.value);
+    }
 
-  if (selectedDate.value) {
-    emit("userDateChange", userFormattedDate.value);
-  }
-});
+    if (selectedDate.value) {
+      emit("userDateChange", userFormattedDate.value);
+    }
+  },
+  { immediate: true },
+);
 
 function getCurrentValueType(value: DateValue): DateValue {
   if (props.range && value === null) {

package/ui.form-calendar/utilCalendar.ts

@@ -59,7 +59,7 @@ export function parseDate<TLocale extends DateLocale>(
   }
 
   let timeless = false;
-  let parsedDate = null;
+  let parsedDate: Date | null = null;
   const originalDate = date;
 
   const isDateObject = date instanceof Date;
@@ -81,7 +81,7 @@ export function parseDate<TLocale extends DateLocale>(
       parsedDate = new Date();
       timeless = true;
     } else {
-      parsedDate = parseStringDate(date, format, locale);
+      parsedDate = parseStringDate(date, format, locale) || null;
     }
   }
 

package/ui.form-date-picker/UDatePicker.vue

@@ -154,6 +154,7 @@ function onPaste(event: ClipboardEvent) {
   try {
     const pasteContent = event.clipboardData ? event.clipboardData.getData("text/plain") : "";
     const userFormat = props.timepicker ? props.userDateTimeFormat : props.userDateFormat;
+    const dateFormat = props.timepicker ? props.dateFormat : props.dateTimeFormat;
     const relativeTokensAmount = Number(userFormat.match(/(?<!\\)r/g)?.length);
 
     // Amount of tokens used in format string without decimeters.
@@ -195,7 +196,7 @@ function onPaste(event: ClipboardEvent) {
 
     if (parsedDate) {
       localValue.value = (
-        props.dateFormat ? formatDate(parsedDate, userFormat, locale.value) : parsedDate
+        dateFormat ? formatDate(parsedDate, dateFormat, locale.value) : parsedDate
       ) as TModelValue;
     }
   } catch (error) {

package/utils/node/dynamicProps.js

@@ -0,0 +1,190 @@
+import fs from "fs/promises";
+import { existsSync } from "fs";
+import path from "node:path";
+
+import { vuelessConfig } from "./vuelessConfig.js";
+
+import { COMPONENTS, VUELESS_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
+
+const OPTIONAL_MARK = "?";
+const CLOSING_BRACKET = "}";
+const IGNORE_PROP = "@ignore";
+const CUSTOM_PROP = "@custom";
+
+const VUELESS_SRC = path.join(VUELESS_DIR, VUELESS_LOCAL_DIR);
+
+const PROPS_INTERFACE_REG_EXP = /export\s+interface\s+Props\s*{([^}]*)}/s;
+const UNION_SYMBOLS_REG_EXP = /[?|:"|;]/g;
+const WORD_IN_QUOTE_REG_EXP = /([^"]+)/;
+
+async function cacheComponentTypes(filePath) {
+  const cacheDir = path.join(filePath, ".cache");
+  const sourceFile = path.join(filePath, "types.ts");
+  const destFile = path.join(cacheDir, "types.ts");
+
+  if (existsSync(cacheDir)) {
+    return;
+  }
+
+  if (existsSync(sourceFile)) {
+    await fs.mkdir(cacheDir);
+    await fs.cp(sourceFile, destFile);
+  }
+}
+
+async function clearComponentTypesCache(filePath) {
+  await fs.rm(path.join(filePath, ".cache"), { force: true, recursive: true });
+}
+
+export async function restoreComponentTypes(filePath) {
+  const cacheDir = path.join(filePath, ".cache");
+  const sourceFile = path.join(cacheDir, "types.ts");
+  const destFile = path.join(filePath, "types.ts");
+
+  if (existsSync(sourceFile)) {
+    await fs.cp(sourceFile, destFile);
+  }
+}
+
+function getMultiLineUnionValues(lines, propIndex, propEndIndex) {
+  return lines
+    .slice(propIndex)
+    .slice(1, propEndIndex + 1)
+    .map((item) => item.replace(UNION_SYMBOLS_REG_EXP, "").trim());
+}
+
+function getInlineUnionValues(lines, propIndex, propEndIndex) {
+  const types = lines
+    .slice(propIndex)
+    .slice(0, propEndIndex + 1)
+    .at(0)
+    .match(WORD_IN_QUOTE_REG_EXP);
+
+  return types ? types.map((value) => value.replace(/"/g, "")) : [];
+}
+
+/**
+ * Updates or add a prop types dynamically.
+ * @param {string} filePath - The path to the TypeScript file.
+ * @param {Array} props - Array of prop objects to add or update.
+ */
+async function modifyComponentTypes(filePath, props) {
+  try {
+    const targetFile = path.join(filePath, "types.ts");
+
+    /* Read `types.ts` and split it by lines. */
+    let fileContent = await fs.readFile(targetFile, "utf-8");
+    const propsInterface = fileContent.match(PROPS_INTERFACE_REG_EXP)?.at(0)?.trim();
+
+    /* Remove props interface and double returns from fileContent */
+    fileContent = fileContent.replace(propsInterface, "").replace(/\n\s*\n/g, "\n");
+
+    const lines = propsInterface.split("\n");
+
+    for (const prop of props) {
+      const { name, type, values = [], description, required, ignore } = prop;
+
+      if (!name) return;
+
+      /* Find line with prop. */
+      const propRegex = new RegExp(`^\\s*${name}[?:]?\\s*:`);
+      const propIndex = lines.findIndex((line) => propRegex.test(line));
+      const propEndIndex = lines.slice(propIndex).findIndex((line) => line.endsWith(";"));
+      const propTypes = propEndIndex
+        ? getMultiLineUnionValues(lines, propIndex, propEndIndex)
+        : getInlineUnionValues(lines, propIndex, propEndIndex);
+
+      const defaultUnionType = propTypes.map((value) => `"${value}"`).join(" | ");
+
+      /* Prepare prop params. */
+      const uniqueValues = [...new Set(values)];
+      const isAssignableValue = uniqueValues.every((value) => propTypes.includes(value));
+      const unionType = uniqueValues.map((value) => `"${value}"`).join(" | ");
+      const userOptionalMark = required ? "" : OPTIONAL_MARK;
+      const defaultOptionalMark = lines[propIndex]?.includes(OPTIONAL_MARK) ? OPTIONAL_MARK : "";
+      const optionalMark = required === undefined ? defaultOptionalMark : userOptionalMark;
+
+      const propDescription = description?.replaceAll(/[\n\s]+/g, " ").trim() || "–"; // removes new lines and double spaces.
+      const propType = unionType.length ? unionType : type;
+
+      /* Add ignore JSDoc property. */
+      if (ignore) {
+        const ignoreDefinition = [`   * ${IGNORE_PROP}`, `   */`];
+        const deleteLinesCount = lines[propIndex - 2].includes(IGNORE_PROP) ? 2 : 1;
+
+        lines.splice(propIndex - deleteLinesCount, deleteLinesCount, ...ignoreDefinition);
+      }
+
+      /* Check if the prop type already exists. */
+      if (~propIndex) {
+        if (unionType.length && isAssignableValue) {
+          // Remove multiline union types;
+          lines.splice(propIndex + 1, propEndIndex);
+
+          lines.splice(propIndex, 1, `  ${name}${defaultOptionalMark}: ${propType};`);
+        }
+
+        if (unionType.length && !isAssignableValue) {
+          // eslint-disable-next-line no-console
+          console.warn(`${unionType} is not assignable to type ${defaultUnionType}.`);
+        }
+
+        const isCustomProp = lines[propIndex - 2].includes(CUSTOM_PROP);
+
+        if (!isCustomProp && (type || description || required)) {
+          // eslint-disable-next-line no-console, prettier/prettier
+          console.warn("Changing of prop type, description or required are not allowed for the default props.");
+        }
+
+        continue;
+      }
+
+      /* Add new prop. */
+      const closingBracketIndex = lines.findIndex((line) => line.trim() === CLOSING_BRACKET);
+      const propDefinition = [
+        "",
+        `  /**`,
+        `   * ${propDescription}`,
+        `   * ${CUSTOM_PROP}`,
+        `   */`,
+        `  ${name}${optionalMark}: ${type};`,
+      ];
+
+      lines.splice(closingBracketIndex, 0, ...propDefinition);
+    }
+
+    lines.unshift(fileContent);
+
+    /* Update `types.ts` file. */
+    await fs.writeFile(targetFile, lines.join("\n"), "utf-8");
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("Error updating file:", error.message);
+  }
+}
+
+export async function setCustomPropTypes(isVuelessEnv) {
+  const srcDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_SRC;
+
+  for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
+    const customProps =
+      componentName in vuelessConfig.component && vuelessConfig.component[componentName].props;
+
+    if (customProps) {
+      await cacheComponentTypes(path.join(srcDir, componentDir));
+      await modifyComponentTypes(
+        path.join(srcDir, componentDir),
+        vuelessConfig.component[componentName].props,
+      );
+    }
+  }
+}
+
+export async function removeCustomPropTypes(isVuelessEnv) {
+  const srcDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_SRC;
+
+  for await (const componentDir of Object.values(COMPONENTS)) {
+    await restoreComponentTypes(path.join(srcDir, componentDir));
+    await clearComponentTypesCache(path.join(srcDir, componentDir));
+  }
+}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.576",
+  "version": "0.0.578",
   "contributions": {
     "html": {
       "description-markup": "markdown",