golden-logic-ui 1.2.347 → 1.2.349

package/dist/components/GeneralComponents/GlDateRangePicker.vue.js

@@ -1,4 +1,4 @@
-import { ref as x, watch as C, computed as y, createElementBlock as u, openBlock as o, Fragment as N, createCommentVNode as g, normalizeClass as v, createElementVNode as m, toDisplayString as s, createVNode as D } from "vue";
+import { ref as x, watch as C, computed as y, createElementBlock as i, openBlock as u, Fragment as N, createCommentVNode as g, normalizeClass as v, createElementVNode as m, toDisplayString as r, createVNode as D } from "vue";
 import M from "./GlDatePicker.vue.js";
 const B = {
   key: 0,
@@ -36,6 +36,15 @@ const B = {
       type: String,
       default: ""
     },
+    // Optional per-picker labels shown above the start / end fields
+    label_name_start: {
+      type: String,
+      default: ""
+    },
+    label_name_end: {
+      type: String,
+      default: ""
+    },
     description: {
       type: String,
       default: ""
@@ -98,13 +107,13 @@ const B = {
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: k }) {
-    const r = e, b = k, c = x(""), a = x({
-      start: r.modelValue.start,
-      end: r.modelValue.end
+  setup(e, { emit: S }) {
+    const o = e, b = S, c = x(""), a = x({
+      start: o.modelValue.start,
+      end: o.modelValue.end
     });
     C(
-      () => r.modelValue,
+      () => o.modelValue,
       (t) => {
         t && (a.value.start = t.start, a.value.end = t.end);
       },
@@ -112,28 +121,28 @@ const B = {
     );
     const f = (t) => {
       if (!t) return null;
-      let l, d, i;
+      let l, d, s;
       const n = t.split(/[-/]/);
       if (n.length !== 3) return new Date(t);
-      switch (r.date_format) {
+      switch (o.date_format) {
         case "DD-MM-YYYY":
         case "DD/MM/YYYY":
-          i = parseInt(n[0]), d = parseInt(n[1]) - 1, l = parseInt(n[2]);
+          s = parseInt(n[0]), d = parseInt(n[1]) - 1, l = parseInt(n[2]);
           break;
         case "MM-DD-YYYY":
         case "MM/DD/YYYY":
-          d = parseInt(n[0]) - 1, i = parseInt(n[1]), l = parseInt(n[2]);
+          d = parseInt(n[0]) - 1, s = parseInt(n[1]), l = parseInt(n[2]);
           break;
         default:
-          l = parseInt(n[0]), d = parseInt(n[1]) - 1, i = parseInt(n[2]);
+          l = parseInt(n[0]), d = parseInt(n[1]) - 1, s = parseInt(n[2]);
           break;
       }
-      const Y = new Date(l, d, i);
+      const Y = new Date(l, d, s);
       return isNaN(Y.getTime()) ? null : Y;
-    }, S = y(() => a.value.start ? a.value.start : r.min_date_end), V = y(() => a.value.end ? a.value.end : r.max_date_start), _ = (t, l) => {
+    }, k = y(() => a.value.start ? a.value.start : o.min_date_end), V = y(() => a.value.end ? a.value.end : o.max_date_start), _ = (t, l) => {
       if (t && l) {
-        const d = f(t), i = f(l);
-        if (d && i && d > i)
+        const d = f(t), s = f(l);
+        if (d && s && d > s)
           return c.value = "Start date cannot be after end date.", !1;
       }
       return c.value = "", !0;
@@ -152,24 +161,24 @@ const B = {
     }, h = () => {
       const t = { start: a.value.start, end: a.value.end };
       b("update:modelValue", t), b("change", t);
-    }, w = y(() => r.error_message ? r.error_message : ""), E = y(() => "");
-    return (t, l) => (o(), u(N, null, [
-      e.show ? (o(), u("div", {
+    }, w = y(() => ""), E = y(() => "");
+    return (t, l) => (u(), i(N, null, [
+      e.show ? (u(), i("div", {
         key: 0,
         class: v(["md:col-span-2", e.field_name])
       }, [
-        e.label_name ? (o(), u("label", B, s(e.label_name), 1)) : g("", !0),
-        m("p", j, s(e.modelValue.start) + " " + s(e.separator) + " " + s(e.modelValue.end), 1),
+        e.label_name ? (u(), i("label", B, r(e.label_name), 1)) : g("", !0),
+        m("p", j, r(e.modelValue.start) + " " + r(e.separator) + " " + r(e.modelValue.end), 1),
         l[2] || (l[2] = m("hr", { class: "opacity-100! bg-gray-200 border-0 dark:bg-gray-700" }, null, -1))
       ], 2)) : g("", !0),
-      e.show ? g("", !0) : (o(), u("div", {
+      e.show ? g("", !0) : (u(), i("div", {
         key: 1,
         class: v(["md:col-span-2", {
           [e.field_name]: e.field_name && e.field_name !== "",
           [e.container_class]: e.container_class && e.container_class !== ""
         }])
       }, [
-        e.label_name ? (o(), u("label", {
+        e.label_name ? (u(), i("label", {
           key: 0,
           class: v({
             "gl-label-form": e.error_message == "" && c.value == "",
@@ -177,13 +186,14 @@ const B = {
             required: e.is_required
           }),
           for: e.field_name
-        }, s(e.label_name), 11, A)) : g("", !0),
+        }, r(e.label_name), 11, A)) : g("", !0),
         m("div", U, [
           m("div", z, [
             D(M, {
               modelValue: a.value.start,
               "onUpdate:modelValue": l[0] || (l[0] = (d) => a.value.start = d),
               field_name: e.field_name + "_start",
+              label_name: e.label_name_start,
               is_required: e.is_required,
               placeholder: e.placeholder_start,
               date_format: e.date_format,
@@ -194,31 +204,32 @@ const B = {
               locale: e.locale,
               error_message: w.value,
               onChange: q
-            }, null, 8, ["modelValue", "field_name", "is_required", "placeholder", "date_format", "min_date", "max_date", "disabled_days", "disabled_dates", "locale", "error_message"])
+            }, null, 8, ["modelValue", "field_name", "label_name", "is_required", "placeholder", "date_format", "min_date", "max_date", "disabled_days", "disabled_dates", "locale", "error_message"])
           ]),
-          m("span", F, s(e.separator), 1),
+          m("span", F, r(e.separator), 1),
           m("div", G, [
             D(M, {
               modelValue: a.value.end,
               "onUpdate:modelValue": l[1] || (l[1] = (d) => a.value.end = d),
               field_name: e.field_name + "_end",
+              label_name: e.label_name_end,
               is_required: e.is_required,
               placeholder: e.placeholder_end,
               date_format: e.date_format,
-              min_date: S.value,
+              min_date: k.value,
               max_date: e.max_date_end,
               disabled_days: e.disabled_days,
               disabled_dates: e.disabled_dates,
               locale: e.locale,
               error_message: E.value,
               onChange: I
-            }, null, 8, ["modelValue", "field_name", "is_required", "placeholder", "date_format", "min_date", "max_date", "disabled_days", "disabled_dates", "locale", "error_message"])
+            }, null, 8, ["modelValue", "field_name", "label_name", "is_required", "placeholder", "date_format", "min_date", "max_date", "disabled_days", "disabled_dates", "locale", "error_message"])
           ])
         ]),
-        c.value || e.error_message ? (o(), u("div", O, [
-          m("span", P, s(e.error_message || c.value), 1)
+        c.value || e.error_message ? (u(), i("div", O, [
+          m("span", P, r(e.error_message || c.value), 1)
         ])) : g("", !0),
-        e.description ? (o(), u("small", R, s(e.description), 1)) : g("", !0)
+        e.description ? (u(), i("small", R, r(e.description), 1)) : g("", !0)
       ], 2))
     ], 64));
   }

package/dist/components/GeneralComponents/GlDateTimePicker.vue.js

@@ -1,14 +1,14 @@
-import { ref as p, computed as G, watch as Ce, onMounted as Ne, onUnmounted as $e, createElementBlock as g, openBlock as m, Fragment as q, createCommentVNode as x, normalizeClass as b, createElementVNode as a, toDisplayString as f, withDirectives as Ve, renderList as oe, vShow as Ie } from "vue";
-const Be = {
+import { ref as h, computed as A, watch as le, onMounted as $e, onUnmounted as Ve, createElementBlock as g, openBlock as m, Fragment as q, createCommentVNode as b, normalizeClass as D, createElementVNode as a, toDisplayString as f, withDirectives as Ie, renderList as se, vShow as Be } from "vue";
+const He = {
   key: 0,
   class: "gl-label-form"
-}, He = { class: "mt-1 text-gray-900 dark:text-white" }, Fe = ["for"], Le = { class: "relative" }, Pe = {
+}, Fe = { class: "mt-1 text-gray-900 dark:text-white" }, Pe = ["for"], Le = { class: "relative" }, Ge = {
   key: 0,
   class: "flex items-center"
-}, Ge = ["innerHTML"], qe = { class: "relative w-full" }, Ae = ["required", "name", "id", "value", "placeholder"], ze = ["innerHTML"], Ee = {
+}, Ae = ["innerHTML"], qe = { class: "relative w-full" }, ze = ["required", "name", "id", "value", "placeholder"], Ee = ["innerHTML"], Ue = {
   key: 1,
   class: "relative"
-}, Ue = ["required", "name", "id", "value", "placeholder"], Ze = { class: "absolute z-50 mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 w-full" }, Re = { class: "flex items-center justify-between mb-4" }, We = { class: "text-sm font-semibold text-gray-900 dark:text-white" }, Je = { class: "grid grid-cols-7 gap-1 mb-2" }, Ke = { class: "grid grid-cols-7 gap-1" }, Qe = ["onClick", "disabled"], Xe = { class: "mt-4 pt-3 border-t border-gray-200 dark:border-gray-700" }, je = { class: "flex items-center justify-center gap-2" }, _e = { class: "text-xs font-medium text-gray-500 dark:text-gray-400 me-1" }, Oe = { class: "flex flex-col items-center" }, et = ["value"], tt = { class: "flex flex-col items-center" }, rt = ["value"], at = { class: "flex flex-col gap-1 ms-1" }, nt = { class: "flex items-center justify-between mt-4 pt-3 border-t border-gray-200 dark:border-gray-700" }, ot = { class: "flex items-center gap-3" }, lt = { class: "gl-span-form-error" }, st = { class: "block mt-1 text-sm font-normal leading-5 text-gray-500" }, ut = {
+}, Ze = ["required", "name", "id", "value", "placeholder"], Re = { class: "absolute z-50 mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 w-full" }, We = { class: "flex items-center justify-between mb-4" }, Je = { class: "text-sm font-semibold text-gray-900 dark:text-white" }, Ke = { class: "grid grid-cols-7 gap-1 mb-2" }, Qe = { class: "grid grid-cols-7 gap-1" }, Xe = ["onClick", "disabled"], je = { class: "mt-4 pt-3 border-t border-gray-200 dark:border-gray-700" }, _e = { class: "flex items-center justify-center gap-2" }, Oe = { class: "text-xs font-medium text-gray-500 dark:text-gray-400 me-1" }, et = { class: "flex flex-col items-center" }, tt = ["value"], rt = { class: "flex flex-col items-center" }, at = ["value"], nt = { class: "flex flex-col gap-1 ms-1" }, ot = { class: "flex items-center justify-between mt-4 pt-3 border-t border-gray-200 dark:border-gray-700" }, lt = { class: "flex items-center gap-3" }, st = { class: "gl-span-form-error" }, it = { class: "block mt-1 text-sm font-normal leading-5 text-gray-500" }, dt = {
   __name: "GlDateTimePicker",
   props: {
     is_required: {
@@ -62,6 +62,13 @@ const Be = {
       type: Number,
       default: 1
     },
+    // Default time (e.g. "11:00 AM") used when a date is picked before any
+    // time has been chosen. Lets a range picker seed the end picker with the
+    // start time so a same-day selection isn't treated as earlier (midnight).
+    default_time: {
+      type: String,
+      default: null
+    },
     // Min and max date constraints
     // Accepts: "YYYY-MM-DD" or relative: "+3m", "-1y", "+7d", "today"
     min_date: {
@@ -99,8 +106,8 @@ const Be = {
     }
   },
   emits: ["update:modelValue", "change", "blur-sm"],
-  setup(n, { expose: le, emit: se }) {
-    const s = n, h = se, Y = p(null), F = p(null), D = p(!1), u = p((/* @__PURE__ */ new Date()).getMonth()), c = p((/* @__PURE__ */ new Date()).getFullYear()), k = p(12), w = p(0), C = p("AM"), A = (t) => {
+  setup(n, { expose: ie, emit: ue }) {
+    const s = n, k = ue, T = h(null), F = h(null), w = h(!1), u = h((/* @__PURE__ */ new Date()).getMonth()), c = h((/* @__PURE__ */ new Date()).getFullYear()), v = h(12), x = h(0), M = h("AM"), z = (t) => {
       if (!t) return null;
       if (t.toLowerCase() === "today")
         return /* @__PURE__ */ new Date();
@@ -113,28 +120,28 @@ const Be = {
       if (r) return r;
       const o = new Date(t);
       return isNaN(o.getTime()) ? null : o;
-    }, ie = G(() => {
+    }, de = A(() => {
       const t = [];
       for (let e = 0; e < 12; e++) {
         const r = new Date(2e3, e, 1);
         t.push(r.toLocaleDateString(s.locale, { month: "long" }));
       }
       return t;
-    }), ue = G(() => {
+    }), ce = A(() => {
       const t = [];
       for (let e = 0; e < 7; e++) {
         const r = new Date(2e3, 0, 2 + e);
         t.push(r.toLocaleDateString(s.locale, { weekday: "short" }));
       }
       return t;
-    }), z = (t, e) => {
+    }), E = (t, e) => {
       let r = t % 12;
       return e === "PM" && (r += 12), r;
-    }, E = (t) => {
+    }, P = (t) => {
       const e = t >= 12 ? "PM" : "AM";
       let r = t % 12;
       return r === 0 && (r = 12), { hour: r, meridiem: e };
-    }, de = (t) => {
+    }, ge = (t) => {
       const e = t.getFullYear(), r = String(t.getMonth() + 1).padStart(2, "0"), o = String(t.getDate()).padStart(2, "0");
       switch (s.date_format) {
         case "DD-MM-YYYY":
@@ -150,13 +157,13 @@ const Be = {
         default:
           return `${e}-${r}-${o}`;
       }
-    }, ce = (t) => {
-      const { hour: e, meridiem: r } = E(t.getHours()), o = String(e).padStart(2, "0"), l = String(t.getMinutes()).padStart(2, "0");
+    }, me = (t) => {
+      const { hour: e, meridiem: r } = P(t.getHours()), o = String(e).padStart(2, "0"), l = String(t.getMinutes()).padStart(2, "0");
       return `${o}:${l} ${r}`;
     }, V = (t) => {
       if (!t) return "";
       let e;
-      return typeof t == "string" && (e = T(t)), (!e || isNaN(e.getTime())) && (e = new Date(t)), isNaN(e.getTime()) ? "" : `${de(e)} ${ce(e)}`;
+      return typeof t == "string" && (e = S(t)), (!e || isNaN(e.getTime())) && (e = new Date(t)), isNaN(e.getTime()) ? "" : `${ge(e)} ${me(e)}`;
     }, U = (t) => {
       if (!t) return null;
       let e, r, o;
@@ -182,7 +189,7 @@ const Be = {
       if (!r) return null;
       const { year: o, month: l, day: y } = r, d = new Date(o, l, y);
       return isNaN(d.getTime()) || d.getFullYear() !== o || d.getMonth() !== l || d.getDate() !== y ? null : d;
-    }, T = (t) => {
+    }, S = (t) => {
       if (!t) return null;
       const e = String(t).trim(), r = e.indexOf(" "), o = r === -1 ? e : e.slice(0, r), l = r === -1 ? "" : e.slice(r + 1).trim(), y = U(o);
       if (!y) return null;
@@ -190,36 +197,50 @@ const Be = {
       if (l) {
         const $ = l.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)?$/i);
         if ($) {
-          const ae = parseInt($[1]);
+          const ne = parseInt($[1]);
           i = parseInt($[2]);
-          const ne = $[3] ? $[3].toUpperCase() : null;
-          ne ? d = z(ae, ne) : d = ae;
+          const oe = $[3] ? $[3].toUpperCase() : null;
+          oe ? d = E(ne, oe) : d = ne;
         }
       }
-      const { year: ee, month: te, day: re } = y, N = new Date(ee, te, re, d, i);
-      return isNaN(N.getTime()) || N.getFullYear() !== ee || N.getMonth() !== te || N.getDate() !== re ? null : N;
-    }, v = p(""), L = p(!1), I = (t) => {
+      const { year: te, month: re, day: ae } = y, N = new Date(te, re, ae, d, i);
+      return isNaN(N.getTime()) || N.getFullYear() !== te || N.getMonth() !== re || N.getDate() !== ae ? null : N;
+    }, p = h(""), L = h(!1), I = (t) => {
       if (!t) return;
-      let e = typeof t == "string" ? T(t) : null;
+      let e = typeof t == "string" ? S(t) : null;
       if ((!e || isNaN(e.getTime())) && (e = new Date(t)), isNaN(e.getTime())) return;
-      const { hour: r, meridiem: o } = E(e.getHours());
-      k.value = r, w.value = e.getMinutes(), C.value = o;
+      const { hour: r, meridiem: o } = P(e.getHours());
+      v.value = r, x.value = e.getMinutes(), M.value = o;
+    }, R = () => {
+      if (!s.default_time) return;
+      const t = String(s.default_time).trim().match(/^(\d{1,2}):(\d{2})\s*(AM|PM)?$/i);
+      if (!t) return;
+      const e = parseInt(t[1]), r = parseInt(t[2]), o = t[3] ? t[3].toUpperCase() : null;
+      if (o)
+        v.value = e === 0 ? 12 : e, M.value = o;
+      else {
+        const l = P(e);
+        v.value = l.hour, M.value = l.meridiem;
+      }
+      x.value = r;
     };
-    Ce(() => s.modelValue, (t) => {
-      L.value || (v.value = V(t), I(t));
-    }, { immediate: !0 });
-    const R = (t) => {
+    le(() => s.modelValue, (t) => {
+      L.value || (p.value = V(t), t ? I(t) : R());
+    }, { immediate: !0 }), le(() => s.default_time, () => {
+      s.modelValue || R();
+    });
+    const W = (t) => {
       const e = t.target.value;
-      v.value = e, e === "" && (h("update:modelValue", ""), h("change", ""));
-    }, W = (t) => {
+      p.value = e, e === "" && (k("update:modelValue", ""), k("change", ""));
+    }, J = (t) => {
       L.value = !1;
-      const e = v.value, r = T(e);
-      if (r && !isNaN(r.getTime()) && !S(r)) {
+      const e = p.value, r = S(e);
+      if (r && !isNaN(r.getTime()) && !C(r)) {
         const o = V(r);
-        v.value = o, I(o), h("update:modelValue", o), h("change", o);
-      } else e !== "" && (v.value = V(s.modelValue));
-      h("blur-sm", t);
-    }, ge = G(() => {
+        p.value = o, I(o), k("update:modelValue", o), k("change", o);
+      } else e !== "" && (p.value = V(s.modelValue));
+      k("blur-sm", t);
+    }, fe = A(() => {
       const t = new Date(c.value, u.value, 1), e = new Date(c.value, u.value + 1, 0), r = t.getDay(), o = e.getDate(), l = [], y = new Date(c.value, u.value, 0).getDate();
       for (let i = r - 1; i >= 0; i--)
         l.push({
@@ -241,7 +262,7 @@ const Be = {
           date: new Date(c.value, u.value + 1, i)
         });
       return l;
-    }), S = (t) => {
+    }), C = (t) => {
       if (s.disabled_days.includes(t.getDay()))
         return !0;
       if (s.disabled_dates && s.disabled_dates.length > 0) {
@@ -255,66 +276,66 @@ const Be = {
       }
       const e = new Date(t);
       if (e.setHours(0, 0, 0, 0), s.min_date) {
-        const r = A(s.min_date);
+        const r = z(s.min_date);
         if (r && (r.setHours(0, 0, 0, 0), e < r))
           return !0;
       }
       if (s.max_date) {
-        const r = A(s.max_date);
+        const r = z(s.max_date);
         if (r && (r.setHours(0, 0, 0, 0), e > r))
           return !0;
       }
       return !1;
     }, B = (t) => {
       if (!s.modelValue) return !1;
-      const e = T(s.modelValue) || new Date(s.modelValue);
+      const e = S(s.modelValue) || new Date(s.modelValue);
       return isNaN(e.getTime()) ? !1 : t.toDateString() === e.toDateString();
-    }, me = (t) => t.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), fe = (t) => {
-      const e = z(k.value, C.value);
+    }, ye = (t) => t.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), ve = (t) => {
+      const e = E(v.value, M.value);
       return new Date(
         t.getFullYear(),
         t.getMonth(),
         t.getDate(),
         e,
-        w.value
+        x.value
       );
-    }, P = (t) => {
-      const e = fe(t), r = V(e);
-      v.value = r, h("update:modelValue", r), h("change", r);
-    }, ye = () => {
-      const t = T(s.modelValue);
+    }, G = (t) => {
+      const e = ve(t), r = V(e);
+      p.value = r, k("update:modelValue", r), k("change", r);
+    }, pe = () => {
+      const t = S(s.modelValue);
       return t && !isNaN(t.getTime()) ? t : /* @__PURE__ */ new Date();
-    }, ve = (t) => {
-      S(t.date) || P(t.date);
-    }, M = () => {
-      s.modelValue && P(ye());
-    }, J = (t) => {
-      C.value = t, M();
+    }, he = (t) => {
+      C(t.date) || G(t.date);
+    }, Y = () => {
+      s.modelValue && G(pe());
     }, K = (t) => {
-      let e = k.value + t;
-      e > 12 && (e = 1), e < 1 && (e = 12), k.value = e, M();
+      M.value = t, Y();
     }, Q = (t) => {
-      let e = w.value + t * s.minute_step;
-      e > 59 && (e = 0), e < 0 && (e = 59 - (59 - e) % 60), w.value = (e % 60 + 60) % 60, M();
-    }, pe = (t) => {
-      let e = t.target.value.replace(/\D/g, "").slice(0, 2), r = parseInt(e);
-      isNaN(r) && (r = 0), r > 12 && (r = 12), e !== "" && r < 1 && (r = 1), t.target.value = e === "" ? "" : String(r), e !== "" && (k.value = r, M());
-    }, he = (t) => {
-      let e = t.target.value.replace(/\D/g, "").slice(0, 2), r = parseInt(e);
-      isNaN(r) && (r = 0), r > 59 && (r = 59), r < 0 && (r = 0), t.target.value = e === "" ? "" : String(r), e !== "" && (w.value = r, M());
+      let e = v.value + t;
+      e > 12 && (e = 1), e < 1 && (e = 12), v.value = e, Y();
+    }, X = (t) => {
+      let e = x.value + t * s.minute_step;
+      e > 59 && (e = 0), e < 0 && (e = 59 - (59 - e) % 60), x.value = (e % 60 + 60) % 60, Y();
     }, ke = (t) => {
-      k.value < 1 && (k.value = 12), t.target.value = String(k.value).padStart(2, "0"), M();
+      let e = t.target.value.replace(/\D/g, "").slice(0, 2), r = parseInt(e);
+      isNaN(r) && (r = 0), r > 12 && (r = 12), e !== "" && r < 1 && (r = 1), t.target.value = e === "" ? "" : String(r), e !== "" && (v.value = r, Y());
     }, xe = (t) => {
-      t.target.value = String(w.value).padStart(2, "0"), M();
-    }, be = () => {
+      let e = t.target.value.replace(/\D/g, "").slice(0, 2), r = parseInt(e);
+      isNaN(r) && (r = 0), r > 59 && (r = 59), r < 0 && (r = 0), t.target.value = e === "" ? "" : String(r), e !== "" && (x.value = r, Y());
+    }, be = (t) => {
+      v.value < 1 && (v.value = 12), t.target.value = String(v.value).padStart(2, "0"), Y();
+    }, De = (t) => {
+      t.target.value = String(x.value).padStart(2, "0"), Y();
+    }, we = () => {
       u.value === 0 ? (u.value = 11, c.value--) : u.value--;
-    }, De = () => {
+    }, Me = () => {
       u.value === 11 ? (u.value = 0, c.value++) : u.value++;
-    }, we = () => {
+    }, Ye = () => {
       c.value--;
-    }, Me = () => {
+    }, Te = () => {
       c.value++;
-    }, X = {
+    }, j = {
       en: {
         clear: "Clear",
         now: "Now",
@@ -327,40 +348,40 @@ const Be = {
         done: "تم",
         time: "الوقت"
       }
-    }, Ye = () => s.locale && s.locale.startsWith("ar") ? "ar" : "en", H = (t) => {
-      const e = Ye();
-      return X[e][t] || X.en[t] || t;
-    }, Te = () => {
+    }, Se = () => s.locale && s.locale.startsWith("ar") ? "ar" : "en", H = (t) => {
+      const e = Se();
+      return j[e][t] || j.en[t] || t;
+    }, Ce = () => {
       const t = /* @__PURE__ */ new Date();
-      u.value = t.getMonth(), c.value = t.getFullYear(), I(t), P(t);
-    }, Se = () => {
-      v.value = "", h("update:modelValue", ""), h("change", ""), D.value = !1;
-    }, j = () => {
-      L.value = !0;
+      u.value = t.getMonth(), c.value = t.getFullYear(), I(t), G(t);
+    }, Ne = () => {
+      p.value = "", k("update:modelValue", ""), k("change", ""), w.value = !1;
     }, _ = () => {
-      if (D.value = !D.value, D.value && s.modelValue) {
-        const t = T(s.modelValue) || new Date(s.modelValue);
+      L.value = !0;
+    }, O = () => {
+      if (w.value = !w.value, w.value && s.modelValue) {
+        const t = S(s.modelValue) || new Date(s.modelValue);
         isNaN(t.getTime()) || (u.value = t.getMonth(), c.value = t.getFullYear(), I(t));
       }
-    }, O = (t) => {
-      F.value && !F.value.contains(t.target) && (D.value = !1);
+    }, ee = (t) => {
+      F.value && !F.value.contains(t.target) && (w.value = !1);
     };
-    return Ne(() => {
-      document.addEventListener("click", O), Y.value !== null && Y.value.hasAttribute("autofocus") && Y.value.focus();
-    }), $e(() => {
-      document.removeEventListener("click", O);
-    }), le({ focus: () => Y.value?.focus() }), (t, e) => (m(), g(q, null, [
+    return $e(() => {
+      document.addEventListener("click", ee), T.value !== null && T.value.hasAttribute("autofocus") && T.value.focus();
+    }), Ve(() => {
+      document.removeEventListener("click", ee);
+    }), ie({ focus: () => T.value?.focus() }), (t, e) => (m(), g(q, null, [
       n.show ? (m(), g("div", {
         key: 0,
-        class: b(n.field_name)
+        class: D(n.field_name)
       }, [
-        n.label_name ? (m(), g("label", Be, f(n.label_name), 1)) : x("", !0),
-        a("p", He, f(v.value), 1),
+        n.label_name ? (m(), g("label", He, f(n.label_name), 1)) : b("", !0),
+        a("p", Fe, f(p.value), 1),
         e[7] || (e[7] = a("hr", { class: "opacity-100! bg-gray-200 border-0 dark:bg-gray-700" }, null, -1))
-      ], 2)) : x("", !0),
-      n.show ? x("", !0) : (m(), g("div", {
+      ], 2)) : b("", !0),
+      n.show ? b("", !0) : (m(), g("div", {
         key: 1,
-        class: b({
+        class: D({
           [n.field_name]: n.field_name && n.field_name !== "",
           [n.container_class]: n.container_class && n.container_class !== ""
         }),
@@ -369,24 +390,24 @@ const Be = {
       }, [
         n.label_name ? (m(), g("label", {
           key: 0,
-          class: b({
+          class: D({
             "gl-label-form": n.error_message == "",
             "gl-label-form-invalid": n.error_message !== "",
             required: n.is_required
           }),
           for: n.field_name
-        }, f(n.label_name), 11, Fe)) : x("", !0),
+        }, f(n.label_name), 11, Pe)) : b("", !0),
         a("div", Le, [
-          n.inputGroupType ? (m(), g("div", Pe, [
+          n.inputGroupType ? (m(), g("div", Ge, [
             n.inputGroupType == "prepend" ? (m(), g("label", {
               key: 0,
               innerHTML: n.inputGroupText,
               class: "h-10 z-10 inline-flex items-center shrink-0 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 dark:text-gray-400 rounded-s-lg focus:outline-hidden dark:bg-gray-700 dark:border-gray-600"
-            }, null, 8, Ge)) : x("", !0),
+            }, null, 8, Ae)) : b("", !0),
             a("div", qe, [
               a("input", {
                 type: "text",
-                class: b(["rtl:text-right rounded-none!", {
+                class: D(["rtl:text-right rounded-none!", {
                   "gl-input-form": n.error_message == "",
                   "gl-input-form-invalid": n.error_message !== "",
                   [n.input_class]: n.input_class && n.input_class !== "",
@@ -396,17 +417,17 @@ const Be = {
                 required: n.is_required,
                 name: n.field_name,
                 id: n.field_name,
-                value: v.value,
-                onInput: R,
-                onFocus: j,
-                onBlur: W,
+                value: p.value,
+                onInput: W,
+                onFocus: _,
+                onBlur: J,
                 ref_key: "input",
-                ref: Y,
+                ref: T,
                 placeholder: n.placeholder
-              }, null, 42, Ae),
+              }, null, 42, ze),
               a("div", {
                 class: "absolute inset-y-0 end-0 flex items-center pe-3 cursor-pointer",
-                onClick: _
+                onClick: O
               }, e[8] || (e[8] = [
                 a("svg", {
                   class: "w-4 h-4 text-gray-500 dark:text-gray-400",
@@ -429,12 +450,12 @@ const Be = {
               key: 1,
               innerHTML: n.inputGroupText,
               class: "h-10 z-10 inline-flex items-center shrink-0 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 dark:text-gray-400 rounded-e-lg focus:outline-hidden dark:bg-gray-700 dark:border-gray-600"
-            }, null, 8, ze)) : x("", !0)
-          ])) : x("", !0),
-          n.inputGroupType == "" ? (m(), g("div", Ee, [
+            }, null, 8, Ee)) : b("", !0)
+          ])) : b("", !0),
+          n.inputGroupType == "" ? (m(), g("div", Ue, [
             a("input", {
               type: "text",
-              class: b(["rtl:text-right pe-10", {
+              class: D(["rtl:text-right pe-10", {
                 "gl-input-form": n.error_message == "",
                 "gl-input-form-invalid": n.error_message !== "",
                 [n.input_class]: n.input_class && n.input_class !== ""
@@ -442,17 +463,17 @@ const Be = {
               required: n.is_required,
               name: n.field_name,
               id: n.field_name,
-              value: v.value,
-              onInput: R,
-              onFocus: j,
-              onBlur: W,
+              value: p.value,
+              onInput: W,
+              onFocus: _,
+              onBlur: J,
               ref_key: "input",
-              ref: Y,
+              ref: T,
               placeholder: n.placeholder
-            }, null, 42, Ue),
+            }, null, 42, Ze),
             a("div", {
               class: "absolute inset-y-0 end-0 flex items-center pe-3 cursor-pointer",
-              onClick: _
+              onClick: O
             }, e[9] || (e[9] = [
               a("svg", {
                 class: "w-4 h-4 text-gray-500 dark:text-gray-400",
@@ -470,12 +491,12 @@ const Be = {
                 })
               ], -1)
             ]))
-          ])) : x("", !0),
-          Ve(a("div", Ze, [
-            a("div", Re, [
+          ])) : b("", !0),
+          Ie(a("div", Re, [
+            a("div", We, [
               a("button", {
                 type: "button",
-                onClick: we,
+                onClick: Ye,
                 class: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-500 dark:text-gray-400"
               }, e[10] || (e[10] = [
                 a("svg", {
@@ -494,7 +515,7 @@ const Be = {
               ])),
               a("button", {
                 type: "button",
-                onClick: be,
+                onClick: we,
                 class: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-500 dark:text-gray-400"
               }, e[11] || (e[11] = [
                 a("svg", {
@@ -511,10 +532,10 @@ const Be = {
                   })
                 ], -1)
               ])),
-              a("span", We, f(ie.value[u.value]) + " " + f(c.value), 1),
+              a("span", Je, f(de.value[u.value]) + " " + f(c.value), 1),
               a("button", {
                 type: "button",
-                onClick: De,
+                onClick: Me,
                 class: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-500 dark:text-gray-400"
               }, e[12] || (e[12] = [
                 a("svg", {
@@ -533,7 +554,7 @@ const Be = {
               ])),
               a("button", {
                 type: "button",
-                onClick: Me,
+                onClick: Te,
                 class: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-500 dark:text-gray-400"
               }, e[13] || (e[13] = [
                 a("svg", {
@@ -551,38 +572,38 @@ const Be = {
                 ], -1)
               ]))
             ]),
-            a("div", Je, [
-              (m(!0), g(q, null, oe(ue.value, (r) => (m(), g("div", {
+            a("div", Ke, [
+              (m(!0), g(q, null, se(ce.value, (r) => (m(), g("div", {
                 key: r,
                 class: "text-center text-xs font-medium text-gray-500 dark:text-gray-400 py-1"
               }, f(r), 1))), 128))
             ]),
-            a("div", Ke, [
-              (m(!0), g(q, null, oe(ge.value, (r, o) => (m(), g("button", {
+            a("div", Qe, [
+              (m(!0), g(q, null, se(fe.value, (r, o) => (m(), g("button", {
                 key: o,
                 type: "button",
-                onClick: (l) => ve(r),
-                disabled: S(r.date),
-                class: b([
+                onClick: (l) => he(r),
+                disabled: C(r.date),
+                class: D([
                   "w-8 h-8 text-sm rounded-full flex items-center justify-center transition-colors",
                   {
                     "text-gray-400 dark:text-gray-600": !r.currentMonth,
-                    "text-gray-900 dark:text-white": r.currentMonth && !B(r.date) && !S(r.date),
+                    "text-gray-900 dark:text-white": r.currentMonth && !B(r.date) && !C(r.date),
                     "bg-primary dark:bg-primaryDark text-white hover:bg-primary/90 dark:hover:bg-primaryDark/90": B(r.date),
-                    "ring-2 ring-primary dark:ring-primaryDark ring-offset-1 dark:ring-offset-gray-800": me(r.date) && !B(r.date),
-                    "hover:bg-gray-100 dark:hover:bg-gray-700": !B(r.date) && !S(r.date),
-                    "opacity-50 cursor-not-allowed": S(r.date)
+                    "ring-2 ring-primary dark:ring-primaryDark ring-offset-1 dark:ring-offset-gray-800": ye(r.date) && !B(r.date),
+                    "hover:bg-gray-100 dark:hover:bg-gray-700": !B(r.date) && !C(r.date),
+                    "opacity-50 cursor-not-allowed": C(r.date)
                   }
                 ])
-              }, f(r.day), 11, Qe))), 128))
+              }, f(r.day), 11, Xe))), 128))
             ]),
-            a("div", Xe, [
-              a("div", je, [
-                a("span", _e, f(H("time")), 1),
-                a("div", Oe, [
+            a("div", je, [
+              a("div", _e, [
+                a("span", Oe, f(H("time")), 1),
+                a("div", et, [
                   a("button", {
                     type: "button",
-                    onClick: e[0] || (e[0] = (r) => K(1)),
+                    onClick: e[0] || (e[0] = (r) => Q(1)),
                     class: "p-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
                   }, e[14] || (e[14] = [
                     a("svg", {
@@ -603,14 +624,14 @@ const Be = {
                     type: "text",
                     inputmode: "numeric",
                     maxlength: "2",
-                    value: String(k.value).padStart(2, "0"),
-                    onInput: pe,
-                    onBlur: ke,
+                    value: String(v.value).padStart(2, "0"),
+                    onInput: ke,
+                    onBlur: be,
                     class: "w-12 text-center text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white py-1 focus:outline-hidden focus:ring-2 focus:ring-primary dark:focus:ring-primaryDark"
-                  }, null, 40, et),
+                  }, null, 40, tt),
                   a("button", {
                     type: "button",
-                    onClick: e[1] || (e[1] = (r) => K(-1)),
+                    onClick: e[1] || (e[1] = (r) => Q(-1)),
                     class: "p-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
                   }, e[15] || (e[15] = [
                     a("svg", {
@@ -629,10 +650,10 @@ const Be = {
                   ]))
                 ]),
                 e[18] || (e[18] = a("span", { class: "text-lg font-semibold text-gray-900 dark:text-white pb-1" }, ":", -1)),
-                a("div", tt, [
+                a("div", rt, [
                   a("button", {
                     type: "button",
-                    onClick: e[2] || (e[2] = (r) => Q(1)),
+                    onClick: e[2] || (e[2] = (r) => X(1)),
                     class: "p-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
                   }, e[16] || (e[16] = [
                     a("svg", {
@@ -653,14 +674,14 @@ const Be = {
                     type: "text",
                     inputmode: "numeric",
                     maxlength: "2",
-                    value: String(w.value).padStart(2, "0"),
-                    onInput: he,
-                    onBlur: xe,
+                    value: String(x.value).padStart(2, "0"),
+                    onInput: xe,
+                    onBlur: De,
                     class: "w-12 text-center text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white py-1 focus:outline-hidden focus:ring-2 focus:ring-primary dark:focus:ring-primaryDark"
-                  }, null, 40, rt),
+                  }, null, 40, at),
                   a("button", {
                     type: "button",
-                    onClick: e[3] || (e[3] = (r) => Q(-1)),
+                    onClick: e[3] || (e[3] = (r) => X(-1)),
                     class: "p-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
                   }, e[17] || (e[17] = [
                     a("svg", {
@@ -678,55 +699,55 @@ const Be = {
                     ], -1)
                   ]))
                 ]),
-                a("div", at, [
+                a("div", nt, [
                   a("button", {
                     type: "button",
-                    onClick: e[4] || (e[4] = (r) => J("AM")),
-                    class: b([
+                    onClick: e[4] || (e[4] = (r) => K("AM")),
+                    class: D([
                       "px-2 py-1 text-xs font-medium rounded-md transition-colors",
-                      C.value === "AM" ? "bg-primary dark:bg-primaryDark text-white" : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
+                      M.value === "AM" ? "bg-primary dark:bg-primaryDark text-white" : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
                     ])
                   }, " AM ", 2),
                   a("button", {
                     type: "button",
-                    onClick: e[5] || (e[5] = (r) => J("PM")),
-                    class: b([
+                    onClick: e[5] || (e[5] = (r) => K("PM")),
+                    class: D([
                       "px-2 py-1 text-xs font-medium rounded-md transition-colors",
-                      C.value === "PM" ? "bg-primary dark:bg-primaryDark text-white" : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
+                      M.value === "PM" ? "bg-primary dark:bg-primaryDark text-white" : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
                     ])
                   }, " PM ", 2)
                 ])
               ])
             ]),
-            a("div", nt, [
+            a("div", ot, [
               a("button", {
                 type: "button",
-                onClick: Se,
+                onClick: Ne,
                 class: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
               }, f(H("clear")), 1),
-              a("div", ot, [
+              a("div", lt, [
                 a("button", {
                   type: "button",
-                  onClick: Te,
+                  onClick: Ce,
                   class: "text-sm text-primary dark:text-primaryDark hover:text-primary/80 dark:hover:text-primaryDark/80 font-medium"
                 }, f(H("now")), 1),
                 a("button", {
                   type: "button",
-                  onClick: e[6] || (e[6] = (r) => D.value = !1),
+                  onClick: e[6] || (e[6] = (r) => w.value = !1),
                   class: "text-sm text-primary dark:text-primaryDark hover:text-primary/80 dark:hover:text-primaryDark/80 font-medium"
                 }, f(H("done")), 1)
               ])
             ])
           ], 512), [
-            [Ie, D.value]
+            [Be, w.value]
           ])
         ]),
-        a("span", lt, f(n.error_message), 1),
-        a("small", st, f(n.description), 1)
+        a("span", st, f(n.error_message), 1),
+        a("small", it, f(n.description), 1)
       ], 2))
     ], 64));
   }
 };
 export {
-  ut as default
+  dt as default
 };

package/dist/components/GeneralComponents/GlDateTimeRangePicker.vue.js

@@ -1,15 +1,15 @@
-import { ref as I, watch as z, computed as v, createElementBlock as m, openBlock as o, Fragment as F, createCommentVNode as y, normalizeClass as h, createElementVNode as c, toDisplayString as u, createVNode as q } from "vue";
-import w from "./GlDateTimePicker.vue.js";
-const G = {
+import { ref as w, watch as R, computed as g, createElementBlock as m, openBlock as u, Fragment as J, createCommentVNode as y, normalizeClass as _, createElementVNode as o, toDisplayString as i, createVNode as q } from "vue";
+import N from "./GlDateTimePicker.vue.js";
+const K = {
   key: 0,
   class: "gl-label-form"
-}, H = { class: "mt-1 text-gray-900 dark:text-white" }, R = ["for"], J = { class: "flex justify-between gap-2 flex-col md:flex-row items-center" }, K = { class: "w-full md:flex-1" }, L = { class: "text-gray-500 dark:text-gray-400 font-medium shrink-0 py-2 md:py-0" }, Q = { class: "w-full md:flex-1" }, W = {
+}, L = { class: "mt-1 text-gray-900 dark:text-white" }, Q = ["for"], W = { class: "flex justify-between gap-2 flex-col md:flex-row items-center" }, X = { class: "w-full md:flex-1" }, Z = { class: "text-gray-500 dark:text-gray-400 font-medium shrink-0 py-2 md:py-0" }, p = { class: "w-full md:flex-1" }, ee = {
   key: 1,
   class: "text-center mt-1"
-}, X = { class: "gl-span-form-error" }, Z = {
+}, te = { class: "gl-span-form-error" }, ae = {
   key: 2,
   class: "block mt-1 text-sm font-normal leading-5 text-gray-500"
-}, ae = {
+}, de = {
   __name: "GlDateTimeRangePicker",
   props: {
     is_required: {
@@ -36,6 +36,15 @@ const G = {
       type: String,
       default: ""
     },
+    // Optional per-picker labels shown above the start / end fields
+    label_name_start: {
+      type: String,
+      default: ""
+    },
+    label_name_end: {
+      type: String,
+      default: ""
+    },
     description: {
       type: String,
       default: ""
@@ -103,154 +112,154 @@ const G = {
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: N }) {
-    const s = e, b = N, f = I(""), l = I({
-      start: s.modelValue.start,
-      end: s.modelValue.end
+  setup(e, { emit: P }) {
+    const c = e, b = P, f = w(""), l = w({
+      start: c.modelValue.start,
+      end: c.modelValue.end
     });
-    z(
-      () => s.modelValue,
-      (n) => {
-        n && (l.value.start = n.start, l.value.end = n.end);
+    R(
+      () => c.modelValue,
+      (t) => {
+        t && (l.value.start = t.start, l.value.end = t.end);
       },
       { immediate: !0, deep: !0 }
     );
-    const C = (n, t) => {
-      let a = n % 12;
-      return t === "PM" && (a += 12), a;
-    }, E = (n) => {
-      if (!n) return null;
-      let t, a, r;
-      const d = n.split(/[-/]/);
+    const C = (t, a) => {
+      let n = t % 12;
+      return a === "PM" && (n += 12), n;
+    }, E = (t) => {
+      if (!t) return null;
+      let a, n, r;
+      const d = t.split(/[-/]/);
       if (d.length !== 3) return null;
-      switch (s.date_format) {
+      switch (c.date_format) {
         case "DD-MM-YYYY":
         case "DD/MM/YYYY":
-          r = parseInt(d[0]), a = parseInt(d[1]) - 1, t = parseInt(d[2]);
+          r = parseInt(d[0]), n = parseInt(d[1]) - 1, a = parseInt(d[2]);
           break;
         case "MM-DD-YYYY":
         case "MM/DD/YYYY":
-          a = parseInt(d[0]) - 1, r = parseInt(d[1]), t = parseInt(d[2]);
+          n = parseInt(d[0]) - 1, r = parseInt(d[1]), a = parseInt(d[2]);
           break;
         default:
-          t = parseInt(d[0]), a = parseInt(d[1]) - 1, r = parseInt(d[2]);
+          a = parseInt(d[0]), n = parseInt(d[1]) - 1, r = parseInt(d[2]);
           break;
       }
-      return { year: t, month: a, day: r };
-    }, g = (n) => {
-      if (!n) return null;
-      const t = String(n).trim(), a = t.indexOf(" "), r = a === -1 ? t : t.slice(0, a), d = a === -1 ? "" : t.slice(a + 1).trim(), x = E(r);
-      if (!x) {
-        const i = new Date(t);
-        return isNaN(i.getTime()) ? null : i;
+      return { year: a, month: n, day: r };
+    }, v = (t) => {
+      if (!t) return null;
+      const a = String(t).trim(), n = a.indexOf(" "), r = n === -1 ? a : a.slice(0, n), d = n === -1 ? "" : a.slice(n + 1).trim(), M = E(r);
+      if (!M) {
+        const s = new Date(a);
+        return isNaN(s.getTime()) ? null : s;
       }
-      let M = 0, D = 0;
+      let S = 0, D = 0;
       if (d) {
-        const i = d.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)?$/i);
-        if (i) {
-          const k = parseInt(i[1]);
-          D = parseInt(i[2]);
-          const V = i[3] ? i[3].toUpperCase() : null;
-          M = V ? C(k, V) : k;
+        const s = d.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)?$/i);
+        if (s) {
+          const V = parseInt(s[1]);
+          D = parseInt(s[2]);
+          const I = s[3] ? s[3].toUpperCase() : null;
+          S = I ? C(V, I) : V;
         }
       }
-      const { year: O, month: $, day: p } = x, S = new Date(O, $, p, M, D);
-      return isNaN(S.getTime()) ? null : S;
-    }, P = v(() => l.value.start ? l.value.start : s.min_date_end), B = v(() => l.value.end ? l.value.end : s.max_date_start), _ = (n, t) => {
-      if (n && t) {
-        const a = g(n), r = g(t);
-        if (a && r && a > r)
+      const { year: F, month: G, day: H } = M, k = new Date(F, G, H, S, D);
+      return isNaN(k.getTime()) ? null : k;
+    }, T = g(() => l.value.start ? l.value.start : c.min_date_end), B = g(() => l.value.end ? l.value.end : c.max_date_start), h = (t, a) => {
+      if (t && a) {
+        const n = v(t), r = v(a);
+        if (n && r && n > r)
           return f.value = "Start date/time cannot be after end date/time.", !1;
       }
       return f.value = "", !0;
-    }, T = (n) => {
-      if (l.value.start = n, l.value.end) {
-        const t = g(n), a = g(l.value.end);
-        t && a && t > a && (l.value.end = "");
-      }
-      _(l.value.start, l.value.end), Y();
-    }, A = (n) => {
-      if (l.value.end = n, l.value.start) {
-        const t = g(l.value.start), a = g(n);
-        t && a && t > a && (l.value.start = "");
-      }
-      _(l.value.start, l.value.end), Y();
-    }, Y = () => {
-      const n = { start: l.value.start, end: l.value.end };
-      b("update:modelValue", n), b("change", n);
-    }, U = v(() => s.error_message ? s.error_message : ""), j = v(() => "");
-    return (n, t) => (o(), m(F, null, [
-      e.show ? (o(), m("div", {
+    }, A = (t) => {
+      l.value.start = t, h(l.value.start, l.value.end), x();
+    }, O = (t) => {
+      l.value.end = t, h(l.value.start, l.value.end), x();
+    }, Y = (t) => {
+      if (!t) return null;
+      const a = t.indexOf(" ");
+      return a === -1 ? null : t.slice(a + 1).trim();
+    }, U = g(() => Y(l.value.start)), j = g(() => Y(l.value.end)), x = () => {
+      const t = { start: l.value.start, end: l.value.end };
+      b("update:modelValue", t), b("change", t);
+    }, $ = g(() => ""), z = g(() => "");
+    return (t, a) => (u(), m(J, null, [
+      e.show ? (u(), m("div", {
         key: 0,
-        class: h(["md:col-span-2", e.field_name])
+        class: _(["md:col-span-2", e.field_name])
       }, [
-        e.label_name ? (o(), m("label", G, u(e.label_name), 1)) : y("", !0),
-        c("p", H, u(e.modelValue.start) + " " + u(e.separator) + " " + u(e.modelValue.end), 1),
-        t[2] || (t[2] = c("hr", { class: "opacity-100! bg-gray-200 border-0 dark:bg-gray-700" }, null, -1))
+        e.label_name ? (u(), m("label", K, i(e.label_name), 1)) : y("", !0),
+        o("p", L, i(e.modelValue.start) + " " + i(e.separator) + " " + i(e.modelValue.end), 1),
+        a[2] || (a[2] = o("hr", { class: "opacity-100! bg-gray-200 border-0 dark:bg-gray-700" }, null, -1))
       ], 2)) : y("", !0),
-      e.show ? y("", !0) : (o(), m("div", {
+      e.show ? y("", !0) : (u(), m("div", {
         key: 1,
-        class: h(["md:col-span-2", {
+        class: _(["md:col-span-2", {
           [e.field_name]: e.field_name && e.field_name !== "",
           [e.container_class]: e.container_class && e.container_class !== ""
         }])
       }, [
-        e.label_name ? (o(), m("label", {
+        e.label_name ? (u(), m("label", {
           key: 0,
-          class: h({
+          class: _({
             "gl-label-form": e.error_message == "" && f.value == "",
             "gl-label-form-invalid": e.error_message !== "" || f.value !== "",
             required: e.is_required
           }),
           for: e.field_name
-        }, u(e.label_name), 11, R)) : y("", !0),
-        c("div", J, [
-          c("div", K, [
-            q(w, {
+        }, i(e.label_name), 11, Q)) : y("", !0),
+        o("div", W, [
+          o("div", X, [
+            q(N, {
               modelValue: l.value.start,
-              "onUpdate:modelValue": t[0] || (t[0] = (a) => l.value.start = a),
+              "onUpdate:modelValue": a[0] || (a[0] = (n) => l.value.start = n),
               field_name: e.field_name + "_start",
+              label_name: e.label_name_start,
               is_required: e.is_required,
               placeholder: e.placeholder_start,
               date_format: e.date_format,
               minute_step: e.minute_step,
+              default_time: j.value,
               min_date: e.min_date_start,
               max_date: B.value,
               disabled_days: e.disabled_days,
               disabled_dates: e.disabled_dates,
               locale: e.locale,
-              error_message: U.value,
-              onChange: T
-            }, null, 8, ["modelValue", "field_name", "is_required", "placeholder", "date_format", "minute_step", "min_date", "max_date", "disabled_days", "disabled_dates", "locale", "error_message"])
+              error_message: $.value,
+              onChange: A
+            }, null, 8, ["modelValue", "field_name", "label_name", "is_required", "placeholder", "date_format", "minute_step", "default_time", "min_date", "max_date", "disabled_days", "disabled_dates", "locale", "error_message"])
           ]),
-          c("span", L, u(e.separator), 1),
-          c("div", Q, [
-            q(w, {
+          o("span", Z, i(e.separator), 1),
+          o("div", p, [
+            q(N, {
               modelValue: l.value.end,
-              "onUpdate:modelValue": t[1] || (t[1] = (a) => l.value.end = a),
+              "onUpdate:modelValue": a[1] || (a[1] = (n) => l.value.end = n),
               field_name: e.field_name + "_end",
+              label_name: e.label_name_end,
               is_required: e.is_required,
               placeholder: e.placeholder_end,
               date_format: e.date_format,
               minute_step: e.minute_step,
-              min_date: P.value,
+              default_time: U.value,
+              min_date: T.value,
               max_date: e.max_date_end,
               disabled_days: e.disabled_days,
               disabled_dates: e.disabled_dates,
               locale: e.locale,
-              error_message: j.value,
-              onChange: A
-            }, null, 8, ["modelValue", "field_name", "is_required", "placeholder", "date_format", "minute_step", "min_date", "max_date", "disabled_days", "disabled_dates", "locale", "error_message"])
+              error_message: z.value,
+              onChange: O
+            }, null, 8, ["modelValue", "field_name", "label_name", "is_required", "placeholder", "date_format", "minute_step", "default_time", "min_date", "max_date", "disabled_days", "disabled_dates", "locale", "error_message"])
           ])
         ]),
-        f.value || e.error_message ? (o(), m("div", W, [
-          c("span", X, u(e.error_message || f.value), 1)
+        f.value || e.error_message ? (u(), m("div", ee, [
+          o("span", te, i(e.error_message || f.value), 1)
         ])) : y("", !0),
-        e.description ? (o(), m("small", Z, u(e.description), 1)) : y("", !0)
+        e.description ? (u(), m("small", ae, i(e.description), 1)) : y("", !0)
       ], 2))
     ], 64));
   }
 };
 export {
-  ae as default
+  de as default
 };

package/package.json

@@ -3,7 +3,7 @@
   "description": "The most popular library of interactive components built with Vuejs && Tailwind CSS",
   "type": "module",
   "private": false,
-  "version": "1.2.347",
+  "version": "1.2.349",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mrgiant/GoldenLogicUi.git"