vueless 0.0.583 → 0.0.585

package/composables/useMutationObserver.ts

@@ -1,10 +1,10 @@
 import { computed, onBeforeUnmount, onMounted, toValue, watch } from "vue";
 import { isSSR } from "../utils/helper.ts";
 
-import type { TemplateRefElement } from "../types.ts";
+import type { MaybeRef } from "vue";
 
 export function useMutationObserver(
-  target: TemplateRefElement,
+  target: MaybeRef<Element | Element[] | null>,
   callback: MutationCallback,
   config = { childList: true, attributes: true, characterData: true },
 ) {

package/directives/clickOutside/types.ts

@@ -1,12 +1,11 @@
-import type { DirectiveBinding } from "vue";
-import type { TemplateRefElement } from "../../types.ts";
+import type { DirectiveBinding, MaybeRef } from "vue";
 
 export type RemoveEvents = () => void;
 export type ClickCallback = (event: MouseEvent) => void;
 
 export interface ClickOutsideOptions {
   capture?: boolean;
-  ignore?: TemplateRefElement[];
+  ignore?: MaybeRef<Element | Element[] | null>[];
 }
 
 export interface DirectiveBindingCallback extends DirectiveBinding {

package/directives/clickOutside/vClickOutside.ts

@@ -10,6 +10,10 @@ import type {
   DirectiveBindingOptions,
 } from "./types.ts";
 
+function isElement(element: EventTarget | null) {
+  return element instanceof HTMLElement || element instanceof SVGElement;
+}
+
 function clickOutside(
   target: MaybeRef<HTMLElement | null>,
   handler: ClickCallback,
@@ -21,9 +25,9 @@ function clickOutside(
   const el = unref(target);
 
   function onClick(event: MouseEvent) {
-    if (!(event.target instanceof HTMLElement)) return;
+    if (!isElement(event.target)) return;
 
-    const targetElements = event.composedPath().filter((element) => element instanceof HTMLElement);
+    const targetElements = event.composedPath().filter((element) => isElement(element));
 
     if (
       !el ||

package/package.json

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

package/types.ts

@@ -55,12 +55,10 @@ import UInputFileConfig from "./ui.form-input-file/config.ts";
 import UInputMoneyConfig from "./ui.form-input-money/config.ts";
 import UDataListConfig from "./ui.data-list/config.ts";
 
-import type { ComputedRef, MaybeRef, Ref, ComponentInternalInstance } from "vue";
+import type { ComputedRef, Ref, ComponentInternalInstance } from "vue";
 import type { Props } from "tippy.js";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
-export type TemplateRefElement = MaybeRef<HTMLElement | HTMLElement[] | null>;
-
 export enum ColorMode {
   Dark = "dark",
   Light = "light",

package/ui.form-calendar/UCalendar.vue

@@ -42,10 +42,12 @@ import defaultConfig from "./config.ts";
 import type { UCalendarProps, DateValue, RangeDate, Locale, Config } from "./types.ts";
 import type { ComputedRef, Ref } from "vue";
 import type { DateLocale } from "./utilFormatting.ts";
+import type { ComponentExposed } from "../types.ts";
 
 import DayView from "./UCalendarDayView.vue";
 import MonthView from "./UCalendarMonthView.vue";
 import YearView from "./UCalendarYearView.vue";
+import { nextTick } from "process";
 
 type DefaultLocale = typeof defaultConfig.i18n;
 
@@ -97,6 +99,7 @@ const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const hoursRef = useTemplateRef<HTMLInputElement>("hours-input");
 const minutesRef = useTemplateRef<HTMLInputElement>("minutes-input");
 const secondsRef = useTemplateRef<HTMLInputElement>("seconds-input");
+const okButton = useTemplateRef<ComponentExposed<typeof UButton>>("ok-button");
 
 const activeDate: Ref<Date | null> = ref(null);
 const activeMonth: Ref<Date | null> = ref(null);
@@ -319,13 +322,13 @@ watch(
 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);
-    }
+    nextTick(() => {
+      if (selectedDate.value && isTimepickerEnabled.value && isInputRefs.value) {
+        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");
+      }
+    });
 
     if (selectedDate.value) {
       emit("userDateChange", userFormattedDate.value);
@@ -557,6 +560,24 @@ function onClickSubmit() {
   emit("submit");
 }
 
+function onClickTimeInput(event: MouseEvent) {
+  const input = event.target as HTMLInputElement;
+
+  selectTimeInput(input);
+}
+
+function onFocusTimeInput(event: FocusEvent) {
+  const input = event.target as HTMLInputElement;
+
+  selectTimeInput(input);
+}
+
+function selectTimeInput(input: HTMLInputElement) {
+  const value = input.value;
+
+  input.setSelectionRange(0, value.length, "backward");
+}
+
 function onTimeInput(event: InputEvent, type: InputType) {
   const input = event.target as HTMLInputElement;
   const value = input.value;
@@ -586,22 +607,38 @@ function onTimeInput(event: InputEvent, type: InputType) {
 
   if (event.data !== null && !isNumeric(event.data)) {
     if (isHours) {
-      input.value = String(lastValidHourValue);
+      input.value = String(lastValidHourValue).padStart(2, "0");
     }
 
     if (isMinutes) {
-      input.value = String(lastValidMinuteValue);
+      input.value = String(lastValidMinuteValue).padStart(2, "0");
     }
 
     if (isSeconds) {
-      input.value = String(lastValidSecondValue);
+      input.value = String(lastValidSecondValue).padStart(2, "0");
     }
 
     return;
   }
 
   if (numericValue > maxValue || numericValue < minValue) {
-    input.value = "0".padStart(2, "0");
+    if (isHours && minutesRef.value) {
+      input.value = String(lastValidHourValue).padStart(2, "0");
+
+      minutesRef.value.focus();
+    }
+
+    if (isMinutes && secondsRef.value) {
+      input.value = String(lastValidMinuteValue).padStart(2, "0");
+
+      secondsRef.value.focus();
+    }
+
+    if (isSeconds && okButton.value) {
+      input.value = String(lastValidSecondValue).padStart(2, "0");
+
+      okButton.value.buttonRef?.focus();
+    }
 
     return;
   }
@@ -759,6 +796,8 @@ const {
           type="text"
           v-bind="timepickerInputHoursAttrs"
           @input.prevent="onTimeInput($event as InputEvent, InputType.Hours)"
+          @click.prevent="onClickTimeInput"
+          @focus.prevent="onFocusTimeInput"
           @keydown="onTimeKeydown"
         />
         &#8282;
@@ -768,6 +807,8 @@ const {
           type="text"
           v-bind="timepickerInputMinutesAttrs"
           @input.prevent="onTimeInput($event as InputEvent, InputType.Minutes)"
+          @click.prevent="onClickTimeInput"
+          @focus.prevent="onFocusTimeInput"
           @keydown="onTimeKeydown"
         />
         &#8282;
@@ -777,11 +818,14 @@ const {
           type="text"
           v-bind="timepickerInputSecondsAttrs"
           @input.prevent="onTimeInput($event as InputEvent, InputType.Seconds)"
+          @click.prevent="onClickTimeInput"
+          @focus.prevent="onFocusTimeInput"
           @keydown="onTimeKeydown"
         />
       </div>
 
       <UButton
+        ref="ok-button"
         variant="thirdary"
         size="sm"
         filled

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

@@ -131,7 +131,10 @@ function onSubmit() {
 
 function onInput() {
   nextTick(() => {
-    deactivate();
+    if (!props.timepicker) {
+      deactivate();
+    }
+
     emit("input", localValue.value);
   });
 }

package/web-types.json

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