vueless 0.0.588 → 0.0.590

package/constants.js

@@ -72,8 +72,8 @@ export const SYSTEM_CONFIG_KEY = {
   ...CVA_CONFIG_KEY,
 };
 
-/* Vueless system non-props defaults */
-export const SYSTEM_NON_PROPS_DEFAULTS = ["library", "style", "weight"];
+/* UIcon non-props defaults */
+export const ICON_NON_PROPS_DEFAULTS = ["library", "path", "style", "weight"];
 
 /* Component to folder mapping. */
 export const COMPONENTS = {

package/package.json

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

package/ui.form-calendar/UCalendar.vue

@@ -559,6 +559,8 @@ function onClickSubmit() {
   emit("submit");
 }
 
+let timeInputCount = 0;
+
 function onClickTimeInput(event: MouseEvent) {
   const input = event.target as HTMLInputElement;
 
@@ -568,6 +570,8 @@ function onClickTimeInput(event: MouseEvent) {
 function onFocusTimeInput(event: FocusEvent) {
   const input = event.target as HTMLInputElement;
 
+  timeInputCount = 0;
+
   selectTimeInput(input);
 }
 
@@ -578,6 +582,8 @@ function selectTimeInput(input: HTMLInputElement) {
 }
 
 function onTimeInput(event: InputEvent, type: InputType) {
+  timeInputCount += 1;
+
   const input = event.target as HTMLInputElement;
   const value = input.value;
   const numericValue = Number(value);
@@ -666,6 +672,22 @@ function onTimeInput(event: InputEvent, type: InputType) {
   }
 
   input.value = String(numericValue).padStart(2, "0");
+
+  if (timeInputCount >= 2) {
+    if (isHours && minutesRef.value) {
+      minutesRef.value.focus();
+    }
+
+    if (isMinutes && secondsRef.value) {
+      secondsRef.value.focus();
+    }
+
+    if (isSeconds && okButton.value) {
+      okButton.value.buttonRef?.focus();
+    }
+
+    timeInputCount = 0;
+  }
 }
 
 defineExpose({

package/ui.image-icon/UIcon.vue

@@ -49,6 +49,7 @@ const dynamicComponent = computed(() => {
   const userLibrary = config.value.defaults.library as IconLibraries;
 
   const library = props.internal && isInternalIcon ? VUELESS_LIBRARY : userLibrary;
+  const customLibraryPath = config.value.defaults.path;
   const weight = config.value.defaults.weight;
   const style = config.value.defaults.style;
   const isFill = props.name?.endsWith(FILL_SUFFIX);
@@ -109,6 +110,13 @@ const dynamicComponent = computed(() => {
           ? import(/* @vite-ignore */ `node_modules/${library}/24/${fillType}/${name}.svg?component`)
           : import(/* @vite-ignore */ `/node_modules/${library}/24/${fillType}/${name}.svg?component`);
     },
+    "custom-icons": async () => {
+      return import.meta.env.PROD
+        ? await getIcon([library, name])
+        : isSSR
+          ? import(/* @vite-ignore */ `${customLibraryPath}/${name}.svg?component`)
+          : import(/* @vite-ignore */ `/${customLibraryPath}/${name}.svg?component`);
+    },
   };
   /* eslint-enable prettier/prettier */
 

package/ui.image-icon/config.ts

@@ -38,6 +38,7 @@ export default /*tw*/ {
     interactive: false,
     /* icon library */
     library: "@material-symbols",
+    path: "", // set for `custom-icons` library only.
     style: "outlined",
     weight: 500,
   },

package/ui.image-icon/types.ts

@@ -7,7 +7,12 @@ import type { Props as TippyProps } from "tippy.js";
 
 export type Config = typeof defaultConfig;
 
-export type IconLibraries = "vueless" | "@material-symbols" | "bootstrap-icons" | "heroicons";
+export type IconLibraries =
+  | "vueless"
+  | "@material-symbols"
+  | "bootstrap-icons"
+  | "heroicons"
+  | "custom-icons";
 
 export interface Props {
   /**

package/utils/node/loaderIcon.js

@@ -261,6 +261,7 @@ function copyIcon(name, defaults) {
  * @returns {source: string, destination: string}
  */
 function getIconLibraryPaths(name, defaults) {
+  const customLibraryPath = defaults.path;
   const library = defaults.library;
   const weight = defaults.weight;
   const style = defaults.style;
@@ -283,7 +284,11 @@ function getIconLibraryPaths(name, defaults) {
     "heroicons": {
       source: `${cwd}/node_modules/${library}/24/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`,
       destination: `${cacheIconsPath}/${library}/24/${style}/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`
-    }
+    },
+    "custom-icons": {
+      source: `${cwd}/${customLibraryPath}/${name}.svg`,
+      destination: `${cacheIconsPath}/${library}/${name}.svg`
+    },
   };
   /* eslint-enable prettier/prettier, vue/max-len */
 

package/utils/ui.ts

@@ -3,12 +3,13 @@ import { defineConfig } from "cva";
 import { extendTailwindMerge } from "tailwind-merge";
 import { cloneDeep, isCSR, isSSR } from "./helper.ts";
 import { createGetMergedConfig } from "./node/mergeConfigs.js";
+import { UIcon } from "../ui.image-icon/constants.ts";
 import {
   BRAND_COLOR,
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
+  ICON_NON_PROPS_DEFAULTS,
   TAILWIND_MERGE_EXTENSION,
-  SYSTEM_NON_PROPS_DEFAULTS,
   NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../constants.js";
 
@@ -110,8 +111,9 @@ export function getDefaults<Props, Config>(defaultConfig: Config, name: Componen
   /* Remove non a props defaults. */
   for (const key in defaults) {
     const isNonPropIcon = /Icon/.test(key) && !/(leftIcon|rightIcon)/.test(key);
+    const isNonPropIconDefaults = ICON_NON_PROPS_DEFAULTS.includes(key) && name === UIcon;
 
-    if (SYSTEM_NON_PROPS_DEFAULTS.includes(key) || isNonPropIcon) {
+    if (isNonPropIcon || isNonPropIconDefaults) {
       delete defaults[key];
     }
   }

package/web-types.json

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