@qikdev/vue-ui 0.2.389 → 0.2.392

package/dist/lib.es.js

@@ -4,7 +4,7 @@ var Lh = (e, t, n) => t in e ? $h(e, t, { enumerable: !0, configurable: !0, writ
 var re = (e, t, n) => Lh(e, typeof t != "symbol" ? t + "" : t, n);
 import { defineComponent as Fo, ref as bt, toRefs as of, onMounted as Ao, onBeforeUnmount as Ph, watch as ci, computed as In, createElementBlock as h, openBlock as u, createCommentVNode as _, renderSlot as H, normalizeClass as L, useSlots as Rh, reactive as fn, provide as Ci, resolveComponent as y, createVNode as c, Fragment as D, createBlock as k, unref as _t, withCtx as f, renderList as N, toDisplayString as b, createTextVNode as O, withDirectives as X, vShow as dr, withModifiers as z, createElementVNode as w, h as uo, mergeProps as mt, toHandlers as wt, normalizeStyle as Ge, resolveDirective as lf, resolveDynamicComponent as Vt, vModelSelect as Et, pushScopeId as je, popScopeId as qe, getCurrentScope as Uh, onScopeDispose as jh, getCurrentInstance as qh, Teleport as uf, Transition as Bh, withKeys as Ee, vModelText as be, TransitionGroup as zh, nextTick as df, vModelDynamic as Tr, normalizeProps as Wh } from "vue";
 import { EventDispatcher as cf } from "@qikdev/sdk";
-const Hh = "0.2.389";
+const Hh = "0.2.392";
 class pn extends Error {
 }
 class Gh extends pn {
@@ -12215,17 +12215,17 @@ const zw = {
   },
   emits: ["update:modelValue"],
   data() {
+    const e = this.modelValue ? new Date(this.modelValue) : null;
     return {
+      internalDate: e,
       displayText: "",
       menuOpen: !1,
-      viewMonth: (/* @__PURE__ */ new Date()).getMonth(),
-      viewYear: (/* @__PURE__ */ new Date()).getFullYear(),
+      viewMonth: e ? e.getMonth() : (/* @__PURE__ */ new Date()).getMonth(),
+      viewYear: e ? e.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear(),
       selectedHour: 12,
       selectedMinute: 0,
       selectedMeridian: "PM",
-      lastValidValue: null,
       parseTimeout: null,
-      syncingFromModel: !1,
       weekdayNames: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
       monthNames: [
         "January",
@@ -12310,30 +12310,34 @@ const zw = {
         { title: "AM", value: "AM" },
         { title: "PM", value: "PM" }
       ];
+    },
+    dateAsString() {
+      if (!this.internalDate) return null;
+      const e = new Date(this.internalDate);
+      return e.setSeconds(0, 0), e.toISOString();
+    },
+    modelValueAsString() {
+      if (!this.modelValue) return null;
+      const e = new Date(this.modelValue);
+      return isNaN(e.getTime()) ? null : (e.setSeconds(0, 0), e.toISOString());
     }
   },
   watch: {
+    dateAsString(e) {
+      e !== this.modelValueAsString && this.$emit("update:modelValue", e);
+    },
     modelValue: {
       immediate: !0,
       handler(e) {
         if (e) {
           const t = new Date(e);
-          isNaN(t.getTime()) || (this.lastValidValue = t, this.displayText = this.formatDateForDisplay(t), this.viewMonth = t.getMonth(), this.viewYear = t.getFullYear(), this.syncTimeFromDate(t));
+          isNaN(t.getTime()) || (this.internalDate = t, this.displayText = this.formatDateForDisplay(t), this.viewMonth = t.getMonth(), this.viewYear = t.getFullYear(), this.syncTimeFromDate(t));
         } else
-          this.lastValidValue = null, this.displayText = "";
+          this.internalDate = null, this.displayText = "";
       }
     },
     displayText(e) {
       this.debouncedParse(e);
-    },
-    selectedHour() {
-      this.syncingFromModel || this.emitTimeChange();
-    },
-    selectedMinute() {
-      this.syncingFromModel || this.emitTimeChange();
-    },
-    selectedMeridian() {
-      this.syncingFromModel || this.emitTimeChange();
     }
   },
   methods: {
@@ -12393,7 +12397,7 @@ const zw = {
       var i;
       const e = (i = this.displayText) == null ? void 0 : i.trim();
       if (!e) {
-        this.$emit("update:modelValue", null), this.lastValidValue = null;
+        this.internalDate = null;
         return;
       }
       const n = yd().parse(e);
@@ -12407,9 +12411,9 @@ const zw = {
           let a = this.selectedHour;
           this.selectedMeridian === "PM" && a !== 12 ? a += 12 : this.selectedMeridian === "AM" && a === 12 && (a = 0), r.setHours(a, this.selectedMinute, 0, 0);
         }
-        this.lastValidValue = r, this.displayText = this.formatDateForDisplay(r), this.$emit("update:modelValue", r.toISOString());
+        this.internalDate = r, this.displayText = this.formatDateForDisplay(r);
       } else
-        this.lastValidValue ? this.displayText = this.formatDateForDisplay(this.lastValidValue) : this.displayText = "";
+        this.internalDate ? this.displayText = this.formatDateForDisplay(this.internalDate) : this.displayText = "";
     },
     selectDate(e) {
       if (e.isDisabled) return;
@@ -12420,18 +12424,26 @@ const zw = {
         let n = this.selectedHour;
         this.selectedMeridian === "PM" && n !== 12 ? n += 12 : this.selectedMeridian === "AM" && n === 12 && (n = 0), t.setHours(n, this.selectedMinute, 0, 0);
       }
-      this.lastValidValue = t, this.displayText = this.formatDateForDisplay(t), this.$emit("update:modelValue", t.toISOString()), this.dateOnly && this.closeMenu();
+      this.internalDate = t, this.displayText = this.formatDateForDisplay(t), this.dateOnly && this.closeMenu();
     },
     syncTimeFromDate(e) {
-      this.syncingFromModel = !0;
       let t = e.getHours(), n = "AM";
-      t >= 12 && (n = "PM", t > 12 && (t -= 12)), t === 0 && (t = 12), this.selectedHour = t === 12 ? 0 : t, this.selectedMinute = Math.floor(e.getMinutes() / 5) * 5, this.selectedMeridian = n, this.syncingFromModel = !1;
+      t >= 12 && (n = "PM", t > 12 && (t -= 12)), t === 0 && (t = 12), this.selectedHour = t === 12 ? 0 : t, this.selectedMinute = Math.floor(e.getMinutes() / 5) * 5, this.selectedMeridian = n;
+    },
+    onHourChange(e) {
+      this.selectedHour = e, this.updateTimeValue();
+    },
+    onMinuteChange(e) {
+      this.selectedMinute = e, this.updateTimeValue();
+    },
+    onMeridianChange(e) {
+      this.selectedMeridian = e, this.updateTimeValue();
     },
-    emitTimeChange() {
-      if (!this.lastValidValue || this.dateOnly) return;
-      const e = new Date(this.lastValidValue);
+    updateTimeValue() {
+      if (!this.internalDate || this.dateOnly) return;
+      const e = new Date(this.internalDate);
       let t = this.selectedHour;
-      this.selectedMeridian === "PM" && t !== 12 ? t += 12 : this.selectedMeridian === "AM" && t === 12 && (t = 0), this.selectedHour === 0 && (t = this.selectedMeridian === "PM" ? 12 : 0), e.setHours(t, this.selectedMinute, 0, 0), this.lastValidValue = e, this.displayText = this.formatDateForDisplay(e), this.$emit("update:modelValue", e.toISOString());
+      this.selectedMeridian === "PM" && t !== 12 ? t += 12 : this.selectedMeridian === "AM" && t === 12 && (t = 0), this.selectedHour === 0 && (t = this.selectedMeridian === "PM" ? 12 : 0), e.setHours(t, this.selectedMinute, 0, 0), this.internalDate = e, this.displayText = this.formatDateForDisplay(e);
     },
     openMenu() {
       this.menuOpen = !0;
@@ -12453,7 +12465,7 @@ const zw = {
   beforeUnmount() {
     this.parseTimeout && clearTimeout(this.parseTimeout);
   }
-}, Nm = (e) => (je("data-v-210facd3"), e = e(), qe(), e), Ww = {
+}, Nm = (e) => (je("data-v-82a7dff8"), e = e(), qe(), e), Ww = {
   class: "ux-datepicker",
   ref: "container"
 }, Hw = { class: "ux-datepicker-input-wrap" }, Gw = ["placeholder"], Yw = /* @__PURE__ */ Nm(() => /* @__PURE__ */ w("span", null, null, -1)), Jw = { class: "ux-datepicker-calendar" }, Kw = { class: "ux-datepicker-header" }, Zw = { class: "ux-datepicker-month-year" }, Xw = { class: "ux-datepicker-weekdays" }, Qw = { class: "ux-datepicker-days" }, ex = ["disabled", "onClick"], tx = {
@@ -12488,7 +12500,7 @@ function ax(e, t, n, i, s, r) {
     c(m, {
       ref: "menu",
       modelValue: s.menuOpen,
-      "onUpdate:modelValue": t[11] || (t[11] = (p) => s.menuOpen = p),
+      "onUpdate:modelValue": t[8] || (t[8] = (p) => s.menuOpen = p),
       closeOnClick: !1
     }, {
       activator: f(() => [
@@ -12497,7 +12509,7 @@ function ax(e, t, n, i, s, r) {
       default: f(() => [
         w("div", {
           class: "ux-datepicker-popup",
-          onClick: t[10] || (t[10] = z(() => {
+          onClick: t[7] || (t[7] = z(() => {
           }, ["stop"]))
         }, [
           w("div", Jw, [
@@ -12543,7 +12555,7 @@ function ax(e, t, n, i, s, r) {
                   default: f(() => [
                     c(o, {
                       modelValue: s.selectedHour,
-                      "onUpdate:modelValue": t[7] || (t[7] = (p) => s.selectedHour = p),
+                      "onUpdate:modelValue": r.onHourChange,
                       field: { minimum: 1, maximum: 1, options: r.hourOptions }
                     }, {
                       default: f(() => [
@@ -12556,7 +12568,7 @@ function ax(e, t, n, i, s, r) {
                         ])
                       ]),
                       _: 1
-                    }, 8, ["modelValue", "field"])
+                    }, 8, ["modelValue", "onUpdate:modelValue", "field"])
                   ]),
                   _: 1
                 }),
@@ -12570,7 +12582,7 @@ function ax(e, t, n, i, s, r) {
                   default: f(() => [
                     c(o, {
                       modelValue: s.selectedMinute,
-                      "onUpdate:modelValue": t[8] || (t[8] = (p) => s.selectedMinute = p),
+                      "onUpdate:modelValue": r.onMinuteChange,
                       field: { minimum: 1, maximum: 1, options: r.minuteOptions }
                     }, {
                       default: f(() => [
@@ -12583,7 +12595,7 @@ function ax(e, t, n, i, s, r) {
                         ])
                       ]),
                       _: 1
-                    }, 8, ["modelValue", "field"])
+                    }, 8, ["modelValue", "onUpdate:modelValue", "field"])
                   ]),
                   _: 1
                 }),
@@ -12591,7 +12603,7 @@ function ax(e, t, n, i, s, r) {
                   default: f(() => [
                     c(o, {
                       modelValue: s.selectedMeridian,
-                      "onUpdate:modelValue": t[9] || (t[9] = (p) => s.selectedMeridian = p),
+                      "onUpdate:modelValue": r.onMeridianChange,
                       field: { minimum: 1, maximum: 1, options: r.meridianOptions }
                     }, {
                       default: f(() => [
@@ -12604,7 +12616,7 @@ function ax(e, t, n, i, s, r) {
                         ])
                       ]),
                       _: 1
-                    }, 8, ["modelValue", "field"])
+                    }, 8, ["modelValue", "onUpdate:modelValue", "field"])
                   ]),
                   _: 1
                 })
@@ -12618,7 +12630,7 @@ function ax(e, t, n, i, s, r) {
     }, 8, ["modelValue"])
   ], 512);
 }
-const $m = /* @__PURE__ */ M(zw, [["render", ax], ["__scopeId", "data-v-210facd3"]]);
+const $m = /* @__PURE__ */ M(zw, [["render", ax], ["__scopeId", "data-v-82a7dff8"]]);
 function Nr(e) {
   var t = new Date(e);
   if (t instanceof Date && !isNaN(t.getTime()))