vueless 0.0.643 → 0.0.644

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.643",
+  "version": "0.0.644",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -66,7 +66,7 @@
     "@vue/eslint-config-prettier": "^10.0.0",
     "@vue/eslint-config-typescript": "^14.1.1",
     "@vue/tsconfig": "^0.5.1",
-    "@vueless/storybook": "^0.0.54",
+    "@vueless/storybook": "^0.0.57",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^9.12.0",

package/ui.boilerplate/storybook/{stories_.ts → stories.ts}

@@ -10,7 +10,7 @@ interface UBoilerplateArgs extends Props {
 }
 
 export default {
-  id: "10010",
+  id: "110010",
   title: "Custom / UBoilerplate",
   component: UBoilerplate,
   args: {

package/ui.form-calendar/types.ts

@@ -65,12 +65,12 @@ export interface UCalendarProps<TModelValue extends DateValue> {
   /**
    * Min date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  minDate?: string | Date;
+  minDate?: Date | string;
 
   /**
    * Max date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  maxDate?: string | Date;
+  maxDate?: Date | string;
 
   /**
    * Component config object.

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

@@ -305,10 +305,6 @@ watchEffect(() => {
           @slot Use it add something before the date.
           @binding {string} icon-name
         -->
-        <slot name="left-icon" :icon-name="iconName" />
-      </template>
-
-      <template #right-icon="{ iconName }">
         <slot name="left" :icon-name="iconName" />
       </template>
 

package/ui.form-date-picker/types.ts

@@ -81,12 +81,12 @@ export interface UDatePickerProps<TModelValue> {
   /**
    * Min date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  minDate?: string | Date;
+  minDate?: Date | string;
 
   /**
    * Max date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  maxDate?: string | Date;
+  maxDate?: Date | string;
 
   /**
    * Left icon name.

package/ui.form-date-picker-range/types.ts

@@ -114,12 +114,12 @@ export interface UDatePickerRangeProps<TModelValue> {
   /**
    * Min date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  minDate?: string | Date;
+  minDate?: Date | string;
 
   /**
    * Max date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  maxDate?: string | Date;
+  maxDate?: Date | string;
 
   /**
    * Date string format.

package/ui.image-avatar/UAvatar.vue

@@ -55,7 +55,7 @@ function onClick(event: MouseEvent) {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfig);
+const { config, avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -78,7 +78,7 @@ const { avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfig);
           internal
           :size="size"
           :color="componentColor"
-          :name="placeholderIcon"
+          :name="placeholderIcon || config.defaults.placeholderIcon"
           v-bind="placeholderIconAttrs"
         />
       </slot>

package/utils/node/helper.js

@@ -1,6 +1,7 @@
 import path from "path";
 import { statSync, existsSync } from "fs";
 import { readdir } from "node:fs/promises";
+import { cwd } from "node:process";
 import esbuild from "esbuild";
 
 import { VUELESS_CONFIGS_CACHED_DIR } from "../../constants.js";
@@ -52,27 +53,27 @@ export async function getDirFiles(dirPath, ext, { recursive = true, exclude = []
 
 export function getNuxtFiles() {
   return [
-    path.join(process.cwd(), "composables"),
-    path.join(process.cwd(), "components"),
-    path.join(process.cwd(), "layouts"),
-    path.join(process.cwd(), "pages"),
-    path.join(process.cwd(), "plugins"),
-    path.join(process.cwd(), "utils"),
-    path.join(process.cwd(), "Error.vue"),
-    path.join(process.cwd(), "App.vue"),
-    path.join(process.cwd(), "Error.vue"),
-    path.join(process.cwd(), "app.vue"),
-    path.join(process.cwd(), "error.vue"),
-    path.join(process.cwd(), "playground", "app.vue"),
+    path.join(cwd(), "composables"),
+    path.join(cwd(), "components"),
+    path.join(cwd(), "layouts"),
+    path.join(cwd(), "pages"),
+    path.join(cwd(), "plugins"),
+    path.join(cwd(), "utils"),
+    path.join(cwd(), "Error.vue"),
+    path.join(cwd(), "App.vue"),
+    path.join(cwd(), "Error.vue"),
+    path.join(cwd(), "app.vue"),
+    path.join(cwd(), "error.vue"),
+    path.join(cwd(), "playground", "app.vue"),
   ];
 }
 
 export function getVueFiles() {
-  return [path.join(process.cwd(), "src")];
+  return [path.join(cwd(), "src")];
 }
 
 export async function getComponentDefaultConfig(name, entryPath) {
-  const configOutPath = path.join(process.cwd(), `${VUELESS_CONFIGS_CACHED_DIR}/${name}.mjs`);
+  const configOutPath = path.join(cwd(), `${VUELESS_CONFIGS_CACHED_DIR}/${name}.mjs`);
 
   await buildTSFile(entryPath, configOutPath);
 

package/utils/node/loaderIcon.js

@@ -7,8 +7,9 @@
 /* eslint-disable no-console */
 import fs from "node:fs";
 import path from "node:path";
-import { createRequire } from "module";
+import { cwd } from "node:process";
 import { rm, cp } from "node:fs/promises";
+import { createRequire } from "module";
 import { merge } from "lodash-es";
 
 import { vuelessConfig } from "./vuelessConfig.js";
@@ -25,11 +26,9 @@ import {
   ICONS_DIR,
 } from "../../constants.js";
 
-const cwd = process.cwd();
-
-const DEFAULT_ICONS_DIR = path.join(cwd, VUELESS_ICONS_DIR);
-const DEFAULT_ICONS_LOCAL_DIR = path.join(cwd, VUELESS_ICONS_LOCAL_DIR);
-const CACHED_ICONS_DIR = path.join(cwd, VUELESS_ICONS_CACHED_DIR);
+const DEFAULT_ICONS_DIR = path.join(cwd(), VUELESS_ICONS_DIR);
+const DEFAULT_ICONS_LOCAL_DIR = path.join(cwd(), VUELESS_ICONS_LOCAL_DIR);
+const CACHED_ICONS_DIR = path.join(cwd(), VUELESS_ICONS_CACHED_DIR);
 const U_ICON = "UIcon";
 
 let isDebug = false;
@@ -53,8 +52,8 @@ export async function cacheIcons({ mode, env, debug, targetFiles = [] } = {}) {
 
   if (isVuelessIconsMode) {
     targetFiles = isVuelessEnv
-      ? [path.join(cwd, VUELESS_LOCAL_DIR)]
-      : [path.join(cwd, VUELESS_DIR)];
+      ? [path.join(cwd(), VUELESS_LOCAL_DIR)]
+      : [path.join(cwd(), VUELESS_DIR)];
   }
 
   const commonExcludes = ["/types.ts", "/constants.ts"];
@@ -93,7 +92,7 @@ export async function removeIconsCache(mirrorCacheDir, debug) {
   }
 
   if (mirrorCacheDir) {
-    const mirrorCacheIconsPath = path.join(cwd, mirrorCacheDir, ICONS_DIR);
+    const mirrorCacheIconsPath = path.join(cwd(), mirrorCacheDir, ICONS_DIR);
 
     if (fs.existsSync(mirrorCacheIconsPath)) {
       await rm(mirrorCacheIconsPath, { recursive: true, force: true });
@@ -112,10 +111,10 @@ export async function removeIconsCache(mirrorCacheDir, debug) {
  * @returns {Promise<void>}
  */
 export async function copyIconsCache(mirrorCacheDir, debug) {
-  const cachePath = path.join(cwd, VUELESS_ICONS_CACHED_DIR);
+  const cachePath = path.join(cwd(), VUELESS_ICONS_CACHED_DIR);
 
   if (mirrorCacheDir && fs.existsSync(cachePath)) {
-    await cp(cachePath, path.join(cwd, mirrorCacheDir, ICONS_DIR), { recursive: true });
+    await cp(cachePath, path.join(cwd(), mirrorCacheDir, ICONS_DIR), { recursive: true });
   }
 
   if (debug) {
@@ -275,23 +274,23 @@ function getIconLibraryPaths(name, defaults) {
   const libraries = {
     [VUELESS_LIBRARY]: {
       // @material-symbols icons which used across the components (this works only at Vueless env).
-      source: `${cwd}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
+      source: `${cwd()}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
       destination: `${CACHED_ICONS_DIR}/${VUELESS_LIBRARY}/${name}.svg`
     },
     "@material-symbols": {
-      source: `${cwd}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
+      source: `${cwd()}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
       destination: `${CACHED_ICONS_DIR}/${library}/svg-${weight}/${style}/${name}.svg`
     },
     "bootstrap-icons": {
-      source: `${cwd}/node_modules/${library}/icons/${name}.svg`,
+      source: `${cwd()}/node_modules/${library}/icons/${name}.svg`,
       destination: `${CACHED_ICONS_DIR}/${library}/${name}.svg`
     },
     "heroicons": {
-      source: `${cwd}/node_modules/${library}/24/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`,
+      source: `${cwd()}/node_modules/${library}/24/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`,
       destination: `${CACHED_ICONS_DIR}/${library}/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`
     },
     "custom-icons": {
-      source: `${cwd}/${customLibraryPath}/${name}.svg`,
+      source: `${cwd()}/${customLibraryPath}/${name}.svg`,
       destination: `${CACHED_ICONS_DIR}/${library}/${name}.svg`
     },
   };
@@ -308,7 +307,7 @@ function getIconLibraryPaths(name, defaults) {
  */
 async function getDefaults() {
   const defaultIconsDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_DIR;
-  const defaultConfigPath = path.join(cwd, defaultIconsDir, COMPONENTS[U_ICON], "config.ts");
+  const defaultConfigPath = path.join(cwd(), defaultIconsDir, COMPONENTS[U_ICON], "config.ts");
   const uIconDefaultConfig = await getComponentDefaultConfig(U_ICON, defaultConfigPath);
 
   return merge({}, uIconDefaultConfig?.defaults, vuelessConfig?.component?.[U_ICON]?.defaults);

package/utils/node/tailwindSafelist.js

@@ -1,9 +1,9 @@
 import path from "node:path";
-import { merge, cloneDeep } from "lodash-es";
+import { cwd } from "node:process";
 import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
+import { merge, cloneDeep, isEqual } from "lodash-es";
 import { extendTailwindMerge } from "tailwind-merge";
-import { isEqual } from "lodash-es";
 import { defineConfig } from "cva";
 
 import { vuelessConfig } from "./vuelessConfig.js";
@@ -24,7 +24,6 @@ import {
   TAILWIND_VARIANT_DELIMITER_REG_EXP,
 } from "../../constants.js";
 
-const cwd = process.cwd();
 const twMerge = extendTailwindMerge(merge(TAILWIND_MERGE_EXTENSION, vuelessConfig.tailwindMerge));
 
 export const { cx } = defineConfig({
@@ -188,7 +187,7 @@ async function retrieveComponentDefaultConfig(componentName, vuelessConfigFiles)
   );
 
   return componentDefaultConfigPath
-    ? await getComponentDefaultConfig(componentName, path.join(cwd, componentDefaultConfigPath))
+    ? await getComponentDefaultConfig(componentName, path.join(cwd(), componentDefaultConfigPath))
     : {};
 }
 

package/utils/node/vuelessConfig.js

@@ -1,5 +1,6 @@
 import fs from "node:fs";
 import path from "node:path";
+import { cwd } from "node:process";
 
 import { buildTSFile } from "./helper.js";
 import { VUELESS_CACHE_DIR, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
@@ -11,12 +12,9 @@ import { VUELESS_CACHE_DIR, VUELESS_CONFIG_FILE_NAME } from "../../constants.js"
 export let vuelessConfig = {};
 
 (async () => {
-  const configPathJs = path.join(process.cwd(), `${VUELESS_CONFIG_FILE_NAME}.js`);
-  const configPathTs = path.join(process.cwd(), `${VUELESS_CONFIG_FILE_NAME}.ts`);
-  const configOutPath = path.join(
-    process.cwd(),
-    `${VUELESS_CACHE_DIR}/${VUELESS_CONFIG_FILE_NAME}.mjs`,
-  );
+  const configPathJs = path.join(cwd(), `${VUELESS_CONFIG_FILE_NAME}.js`);
+  const configPathTs = path.join(cwd(), `${VUELESS_CONFIG_FILE_NAME}.ts`);
+  const configOutPath = path.join(cwd(), `${VUELESS_CACHE_DIR}/${VUELESS_CONFIG_FILE_NAME}.mjs`);
 
   if (!fs.existsSync(configPathJs) && !fs.existsSync(configPathTs)) {
     vuelessConfig = {};

package/utils/storybook.ts

@@ -91,19 +91,20 @@ export function getArgTypes(componentName: string | undefined) {
   component.attributes?.forEach((attribute: Attribute) => {
     const type = attribute.value.type;
 
-    if (type.includes("|")) {
+    if (attribute.enum) {
       types[attribute.name] = {
-        control: type.split("|")[0].toLowerCase() as ArgType["control"],
+        options: attribute.enum,
+        control: "select",
         table: {
           defaultValue: { summary: attribute.default || "" },
+          type: { summary: attribute.enum.join(" | ") },
         },
       };
     }
 
-    if (attribute.enum) {
+    if (attribute.enum?.length === 1) {
       types[attribute.name] = {
-        options: attribute.enum,
-        control: "select",
+        control: "object",
         table: {
           defaultValue: { summary: attribute.default || "" },
           type: { summary: attribute.enum.join(" | ") },
@@ -111,17 +112,36 @@ export function getArgTypes(componentName: string | undefined) {
       };
     }
 
-    if (attribute.enum?.length === 1) {
+    const nonUnionTypes = [
+      "string",
+      "number",
+      "boolean",
+      "Date",
+      "UnknownObject",
+      "UnknownArray",
+      "Array",
+    ];
+
+    if (attribute.enum?.every((value) => nonUnionTypes.includes(value))) {
+      let control = attribute.enum[0];
+
+      if (control === "string") {
+        control = "text";
+      }
+
+      if (control === "Date") {
+        control = "date";
+      }
+
       types[attribute.name] = {
-        control: "object",
+        control: control as ArgType["control"],
         table: {
           defaultValue: { summary: attribute.default || "" },
-          type: { summary: attribute.enum.join(" | ") },
         },
       };
     }
 
-    if (type === "string" || type.includes("string")) {
+    if (type === "string") {
       types[attribute.name] = {
         control: "text",
         table: {
@@ -139,14 +159,11 @@ export function getArgTypes(componentName: string | undefined) {
       };
     }
 
-    if (type === "Date" || attribute.enum?.includes("Date")) {
+    if (type === "Date") {
       types[attribute.name] = {
         control: "date",
         table: {
           defaultValue: { summary: attribute.default || "" },
-          type: {
-            summary: ["Date", "string"].join(" | "),
-          },
         },
       };
     }