vueless 0.0.582 → 0.0.584

package/package.json

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

package/ui.dropdown-list/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: `
-    my-2 p-1 flex w-full absolute z-50 shadow
+    my-2 p-1 flex w-auto absolute z-50 shadow
     rounded-dynamic border border-gray-300 bg-white
     overflow-auto [-webkit-overflow-scrolling:touch]
     focus:outline-none

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/ui.form-select/config.js

@@ -127,7 +127,7 @@ export default /*tw*/ {
       },
     },
   },
-  dropdownList: "{UDropdownList} group-[]/top:bottom-full group-[]/top:top-auto top-full",
+  dropdownList: "{UDropdownList} group-[]/top:bottom-full group-[]/top:top-auto top-full w-full",
   i18n: {
     listIsEmpty: "List is empty.",
     noDataToShow: "No data to show.",

package/web-types.json

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