vueless 0.0.643 → 0.0.645

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.643",
+  "version": "0.0.645",
   "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.container-page/UPage.vue

@@ -157,7 +157,7 @@ const {
       <slot name="footer-after" />
     </div>
 
-    <div v-if="fixedRounding && !isMobileBreakpoint" v-bind="rightRoundingWrapperAttrs">
+    <div v-if="!isMobileBreakpoint" v-bind="rightRoundingWrapperAttrs">
       <div v-bind="rightRoundingAttrs" />
     </div>
   </div>

package/ui.container-page/config.ts

@@ -15,25 +15,20 @@ export default /*tw*/ {
         "5xl": "md:w-[75rem] md:max-[1300px]:!w-full",
         wide: "md:w-full",
       },
-      fixedRounding: {
-        true: "relative pr-0 md:pr-4 md:rounded-none",
-        false: "md:rounded-r-2xl",
-      },
-    },
-  },
-  page: {
-    base: "p-4 md:py-6 md:pl-8 mx-auto min-h-screen w-full",
-    variants: {
       gray: {
         false: "bg-white",
         true: "bg-gray-50",
       },
-      fixedRounding: {
-        true: "md:pr-4",
-        false: "md:pr-8",
+      rounding: {
+        relative: "md:relative md:pr-4 md:rounded-r-dynamic-lg",
+        fixed: "md:bg-transparent md:relative md:pr-4 md:rounded-r-dynamic-lg",
       },
     },
   },
+  page: {
+    base: "p-4 md:py-6 md:pl-8 md:pr-8 mx-auto min-h-screen w-full",
+    compoundVariants: [{ rounding: ["fixed", "relative"], class: "md:pr-4" }],
+  },
   header: "flex items-start justify-between mb-4 md:mb-6",
   headerLeft: "flex items-center gap-4",
   headerLeftFallback: "flex flex-col gap-0.5",
@@ -43,12 +38,19 @@ export default /*tw*/ {
   description: "mt-1.5 text-base font-normal text-gray-500",
   headerRight: "",
   body: "",
-  footer: `mb-0 mt-14 justify-between pt-8 md:flex md:items-baseline space-y-4 md:space-y-0 border-t border-gray-200`,
+  footer: "mb-0 mt-14 justify-between pt-8 md:flex md:items-baseline space-y-4 md:space-y-0 border-t border-gray-200",
   footerLeft: "md:flex space-y-4 md:space-x-4 md:space-y-0",
   footerRight: "md:flex space-y-4 md:space-x-4 md:space-y-0",
-  rightRoundingWrapper: "absolute right-4",
+  rightRoundingWrapper: {
+    base: "absolute right-4",
+    variants: {
+      rounding: {
+        none: "hidden",
+      },
+    },
+  },
   rightRounding: {
-    base: "fixed top-0 w-4 rounded-r-2xl bg-white h-screen",
+    base: "fixed top-0 w-4 rounded-r-dynamic-lg h-screen",
     variants: {
       gray: {
         false: "bg-white",
@@ -57,10 +59,10 @@ export default /*tw*/ {
     },
   },
   defaults: {
+    rounding: "none",
     titleSize: "md",
     size: "wide",
     gray: false,
-    fixedRounding: false,
     /* icons */
     backIcon: "arrow_back",
   },

package/ui.container-page/types.ts

@@ -37,14 +37,14 @@ export interface Props {
   backLabel?: string;
 
   /**
-   * Sets background light gray (useful if the page contains nested cards).
+   * Show rounding block on the right side of the component.
    */
-  gray?: boolean;
+  rounding?: "none" | "fixed" | "relative";
 
   /**
-   * Stick right page rounding.
+   * Sets background light gray (useful if the page contains nested cards).
    */
-  fixedRounding?: boolean;
+  gray?: boolean;
 
   /**
    * Component config object.

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.form-textarea/config.ts

@@ -51,7 +51,7 @@ export default /*tw*/ {
     ],
   },
   defaults: {
-    rows: "1",
+    rows: "2",
     size: "md",
     inputmode: "text",
     labelAlign: "topInside",

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(" | "),
-          },
         },
       };
     }