sprintify-ui 0.0.49 → 0.0.51

package/dist/sprintify-ui.es.js

@@ -1,5 +1,5 @@
 import Sl from "axios";
-import { defineComponent as G, inject as ye, resolveComponent as Se, openBlock as x, createBlock as ee, withCtx as H, createElementVNode as v, normalizeClass as R, withModifiers as He, renderSlot as Y, createElementBlock as L, createCommentVNode as Q, toDisplayString as W, h as Ee, unref as h, computed as T, ref as N, watch as Le, Teleport as Pt, createVNode as z, Transition as Ge, TransitionGroup as Ur, Fragment as fe, renderList as be, normalizeStyle as Re, onMounted as ve, withDirectives as Ne, vShow as lt, normalizeProps as Je, guardReactiveProps as Ze, mergeProps as at, resolveDynamicComponent as cn, createTextVNode as We, onBeforeUnmount as dn, cloneVNode as $l, provide as pe, watchEffect as Ue, nextTick as qe, onUnmounted as nt, reactive as Bl, isRef as Mt, withKeys as An, vModelText as Tn, useSlots as _l, createStaticVNode as zr, getCurrentInstance as Cl, pushScopeId as Il, popScopeId as El, createSlots as Al, vModelSelect as Sn, readonly as nn } from "vue";
+import { defineComponent as G, inject as ye, resolveComponent as Se, openBlock as x, createBlock as ee, withCtx as H, createElementVNode as v, normalizeClass as R, withModifiers as He, renderSlot as Y, createElementBlock as L, createCommentVNode as Q, toDisplayString as W, h as Ee, unref as h, computed as T, ref as N, watch as Ae, Teleport as Pt, createVNode as z, Transition as Ge, TransitionGroup as Ur, Fragment as fe, renderList as be, normalizeStyle as Re, onMounted as ve, withDirectives as Ne, vShow as lt, normalizeProps as Je, guardReactiveProps as Ze, mergeProps as at, resolveDynamicComponent as cn, createTextVNode as We, onBeforeUnmount as dn, cloneVNode as $l, provide as pe, watchEffect as Ue, nextTick as qe, onUnmounted as nt, reactive as Bl, isRef as Mt, withKeys as An, vModelText as Tn, useSlots as _l, createStaticVNode as zr, getCurrentInstance as Cl, pushScopeId as Il, popScopeId as El, createSlots as Al, vModelSelect as Sn, readonly as nn } from "vue";
 import { useI18n as et, createI18n as Tl } from "vue-i18n";
 import { defineStore as Xn } from "pinia";
 import wr from "qs";
@@ -1748,7 +1748,7 @@ Available fill gap methods: `).concat(Z, "."));
             Z.map(function(oe) {
               m.fillGapSelectors = m.fillGapSelectors.filter(function(ie) {
                 return ie !== oe;
-              }), m.scroll || Ae(oe);
+              }), m.scroll || Te(oe);
             });
           }
         }, c = function() {
@@ -1782,7 +1782,7 @@ Available fill gap methods: `).concat(Z, "."));
           });
         }, $e = function() {
           m.fillGapSelectors.map(function(_) {
-            Ae(_);
+            Te(_);
           });
         }, Fe = function(_) {
           var Z = document.querySelectorAll(_), oe = m.lockableSelectors.indexOf(_) !== -1;
@@ -1813,7 +1813,7 @@ Available fill gap methods: `).concat(Z, "."));
               _.style.paddingRight = "".concat(ut + oe, "px");
             }
           }
-        }, Ae = function(_) {
+        }, Te = function(_) {
           var Z = document.querySelectorAll(_);
           p(Z, function(oe) {
             ke(oe);
@@ -1960,7 +1960,7 @@ const Qa = {
         i.value[f.id] = "animate-shake";
       });
     }
-    return Le(
+    return Ae(
       () => l.value.length,
       () => {
         l.value.length == 0 ? fo() : co();
@@ -2268,7 +2268,7 @@ const is = { class: "relative" }, us = { class: "relative" }, cs = ["value", "pl
       var q;
       return (q = b.value[Math.min(p.value, b.value.length - 1)]) != null ? q : null;
     });
-    Le(
+    Ae(
       () => S.value,
       () => {
         var q;
@@ -2695,13 +2695,13 @@ const is = { class: "relative" }, us = { class: "relative" }, cs = ["value", "pl
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
     const n = e, l = xe.http, o = N(n.currentModel);
-    Le(
+    Ae(
       () => n.currentModel,
       (s, i) => {
         o.value = s;
       },
       { deep: !0 }
-    ), Le(
+    ), Ae(
       () => n.modelValue,
       (s, i) => {
         if (s != i && n.showRouteUrl != null) {
@@ -3660,13 +3660,13 @@ list should be an Array.`), c.length === 0)
           var P, K, ae, ge, $e = this.length - k;
           switch ((!B || $e < (B = Number(B))) && (B = $e), F = String(F || "utf8").toLowerCase()) {
             case "hex":
-              P = function(Fe, Ie, Ae, ke) {
-                Ae = Number(Ae) || 0;
-                var _e = Fe.length - Ae;
+              P = function(Fe, Ie, Te, ke) {
+                Te = Number(Te) || 0;
+                var _e = Fe.length - Te;
                 (!ke || _e < (ke = Number(ke))) && (ke = _e), V((_e = Ie.length) % 2 == 0, "Invalid hex string"), _e / 2 < ke && (ke = _e / 2);
                 for (var it = 0; it < ke; it++) {
                   var qt = parseInt(Ie.substr(2 * it, 2), 16);
-                  V(!isNaN(qt), "Invalid hex string"), Fe[Ae + it] = qt;
+                  V(!isNaN(qt), "Invalid hex string"), Fe[Te + it] = qt;
                 }
                 return b._charsWritten = 2 * it, it;
               }(this, c, k, B);
@@ -3699,8 +3699,8 @@ list should be an Array.`), c.length === 0)
           switch (c) {
             case "hex":
               F = function($e, Fe, Ie) {
-                var Ae = $e.length;
-                (!Fe || Fe < 0) && (Fe = 0), (!Ie || Ie < 0 || Ae < Ie) && (Ie = Ae);
+                var Te = $e.length;
+                (!Fe || Fe < 0) && (Fe = 0), (!Ie || Ie < 0 || Te < Ie) && (Ie = Te);
                 for (var ke = "", _e = Fe; _e < Ie; _e++)
                   ke += ce($e[_e]);
                 return ke;
@@ -3709,11 +3709,11 @@ list should be an Array.`), c.length === 0)
             case "utf8":
             case "utf-8":
               F = function($e, Fe, Ie) {
-                var Ae = "", ke = "";
+                var Te = "", ke = "";
                 Ie = Math.min($e.length, Ie);
                 for (var _e = Fe; _e < Ie; _e++)
-                  $e[_e] <= 127 ? (Ae += le(ke) + String.fromCharCode($e[_e]), ke = "") : ke += "%" + $e[_e].toString(16);
-                return Ae + le(ke);
+                  $e[_e] <= 127 ? (Te += le(ke) + String.fromCharCode($e[_e]), ke = "") : ke += "%" + $e[_e].toString(16);
+                return Te + le(ke);
               }(ge, k, B);
               break;
             case "ascii":
@@ -3728,8 +3728,8 @@ list should be an Array.`), c.length === 0)
             case "utf16le":
             case "utf-16le":
               F = function($e, Fe, Ie) {
-                for (var Ae = $e.slice(Fe, Ie), ke = "", _e = 0; _e < Ae.length; _e += 2)
-                  ke += String.fromCharCode(Ae[_e] + 256 * Ae[_e + 1]);
+                for (var Te = $e.slice(Fe, Ie), ke = "", _e = 0; _e < Te.length; _e += 2)
+                  ke += String.fromCharCode(Te[_e] + 256 * Te[_e + 1]);
                 return ke;
               }(ge, k, B);
               break;
@@ -4190,7 +4190,7 @@ function ui() {
 function Ye() {
   return ui();
 }
-var Te = ((e) => (e.Space = " ", e.Enter = "Enter", e.Escape = "Escape", e.Backspace = "Backspace", e.Delete = "Delete", e.ArrowLeft = "ArrowLeft", e.ArrowUp = "ArrowUp", e.ArrowRight = "ArrowRight", e.ArrowDown = "ArrowDown", e.Home = "Home", e.End = "End", e.PageUp = "PageUp", e.PageDown = "PageDown", e.Tab = "Tab", e))(Te || {});
+var Le = ((e) => (e.Space = " ", e.Enter = "Enter", e.Escape = "Escape", e.Backspace = "Backspace", e.Delete = "Delete", e.ArrowLeft = "ArrowLeft", e.ArrowUp = "ArrowUp", e.ArrowRight = "ArrowRight", e.ArrowDown = "ArrowDown", e.Home = "Home", e.End = "End", e.PageUp = "PageUp", e.PageDown = "PageDown", e.Tab = "Tab", e))(Le || {});
 function ci(e) {
   throw new Error("Unexpected object: " + e);
 }
@@ -4469,7 +4469,7 @@ function Si({ ownerDocument: e }, r) {
     !n.value || ($t(n.value), n.value = null);
   }
   ve(() => {
-    Le(r, (a, s) => {
+    Ae(r, (a, s) => {
       a !== s && (a ? l() : o());
     }, { immediate: !0 });
   }), nt(o);
@@ -4477,7 +4477,7 @@ function Si({ ownerDocument: e }, r) {
 function $i({ ownerDocument: e, container: r, initialFocus: n }, l) {
   let o = N(null), a = N(!1);
   return ve(() => a.value = !0), nt(() => a.value = !1), ve(() => {
-    Le([r, n, l], (s, i) => {
+    Ae([r, n, l], (s, i) => {
       if (s.every((f, y) => (i == null ? void 0 : i[y]) === f) || !l.value)
         return;
       let p = we(r);
@@ -4619,7 +4619,7 @@ function Li({ type: e, enabled: r, element: n, onUpdate: l }) {
     l == null || l(...s), o(...s);
   }
   ve(() => {
-    Le(r, (s, i) => {
+    Ae(r, (s, i) => {
       s ? a(0, e, n) : i === !0 && a(1, e, n);
     }, { immediate: !0, flush: "sync" });
   }), nt(() => {
@@ -4720,7 +4720,7 @@ let Kt = "DC8F892D-2EBD-447C-A4C8-A03058436FF4", Fi = G({ name: "Dialog", inheri
   }, ($, u) => {
     w.close(), qe(() => u == null ? void 0 : u.focus());
   }, T(() => S.value === 0 && !b.value)), Io((a = A.value) == null ? void 0 : a.defaultView, "keydown", ($) => {
-    $.defaultPrevented || $.key === Te.Escape && S.value === 0 && (b.value || ($.preventDefault(), $.stopPropagation(), w.close()));
+    $.defaultPrevented || $.key === Le.Escape && S.value === 0 && (b.value || ($.preventDefault(), $.stopPropagation(), w.close()));
   }), Ue(($) => {
     var u;
     if (S.value !== 0 || E)
@@ -4848,15 +4848,15 @@ let qi = G({ name: "Menu", props: { as: { type: [Object, String], default: "temp
   l({ el: o.buttonRef, $el: o.buttonRef });
   function s(y) {
     switch (y.key) {
-      case Te.Space:
-      case Te.Enter:
-      case Te.ArrowDown:
+      case Le.Space:
+      case Le.Enter:
+      case Le.ArrowDown:
         y.preventDefault(), y.stopPropagation(), o.openMenu(), qe(() => {
           var g;
           (g = we(o.itemsRef)) == null || g.focus({ preventScroll: !0 }), o.goToItem(Ke.First);
         });
         break;
-      case Te.ArrowUp:
+      case Le.ArrowUp:
         y.preventDefault(), y.stopPropagation(), o.openMenu(), qe(() => {
           var g;
           (g = we(o.itemsRef)) == null || g.focus({ preventScroll: !0 }), o.goToItem(Ke.Last);
@@ -4866,7 +4866,7 @@ let qi = G({ name: "Menu", props: { as: { type: [Object, String], default: "temp
   }
   function i(y) {
     switch (y.key) {
-      case Te.Space:
+      case Le.Space:
         y.preventDefault();
         break;
     }
@@ -4896,33 +4896,33 @@ let qi = G({ name: "Menu", props: { as: { type: [Object, String], default: "temp
   function i(g) {
     var I;
     switch (s.value && clearTimeout(s.value), g.key) {
-      case Te.Space:
+      case Le.Space:
         if (o.searchQuery.value !== "")
           return g.preventDefault(), g.stopPropagation(), o.search(g.key);
-      case Te.Enter:
+      case Le.Enter:
         if (g.preventDefault(), g.stopPropagation(), o.activeItemIndex.value !== null) {
           let A = o.items.value[o.activeItemIndex.value];
           (I = we(A.dataRef.domRef)) == null || I.click();
         }
         o.closeMenu(), Bo(we(o.buttonRef));
         break;
-      case Te.ArrowDown:
+      case Le.ArrowDown:
         return g.preventDefault(), g.stopPropagation(), o.goToItem(Ke.Next);
-      case Te.ArrowUp:
+      case Le.ArrowUp:
         return g.preventDefault(), g.stopPropagation(), o.goToItem(Ke.Previous);
-      case Te.Home:
-      case Te.PageUp:
+      case Le.Home:
+      case Le.PageUp:
         return g.preventDefault(), g.stopPropagation(), o.goToItem(Ke.First);
-      case Te.End:
-      case Te.PageDown:
+      case Le.End:
+      case Le.PageDown:
         return g.preventDefault(), g.stopPropagation(), o.goToItem(Ke.Last);
-      case Te.Escape:
+      case Le.Escape:
         g.preventDefault(), g.stopPropagation(), o.closeMenu(), qe(() => {
           var A;
           return (A = we(o.buttonRef)) == null ? void 0 : A.focus({ preventScroll: !0 });
         });
         break;
-      case Te.Tab:
+      case Le.Tab:
         g.preventDefault(), g.stopPropagation(), o.closeMenu(), qe(() => gi(we(o.buttonRef), g.shiftKey ? wt.Previous : wt.Next));
         break;
       default:
@@ -4932,7 +4932,7 @@ let qi = G({ name: "Menu", props: { as: { type: [Object, String], default: "temp
   }
   function p(g) {
     switch (g.key) {
-      case Te.Space:
+      case Le.Space:
         g.preventDefault();
         break;
     }
@@ -5018,7 +5018,7 @@ let Hi = G({ name: "Label", props: { as: { type: [Object, String], default: "lab
     b.preventDefault(), f();
   }
   function S(b) {
-    b.key === Te.Space ? (b.preventDefault(), f()) : b.key === Te.Enter && yi(b.currentTarget);
+    b.key === Le.Space ? (b.preventDefault(), f()) : b.key === Le.Enter && yi(b.currentTarget);
   }
   function M(b) {
     b.preventDefault();
@@ -5139,7 +5139,7 @@ let qo = _t.RenderStrategy, Xt = G({ props: { as: { type: [Object, String], defa
     })));
   }
   return ve(() => {
-    Le([p], (u, m, d) => {
+    Ae([p], (u, m, d) => {
       $(d), I.value = !1;
     }, { immediate: !0 });
   }), pe(hr, M), xo(T(() => Qe(s.value, { visible: tt.Open, hidden: tt.Closed }))), () => {
@@ -5378,7 +5378,7 @@ const nu = { class: "flex items-center" }, ru = {
   emits: ["update:model-value"],
   setup(e, { emit: r }) {
     const n = e, l = N(null), o = N(n.modelValue);
-    Le(
+    Ae(
       () => n.modelValue,
       ($) => {
         o.value = $;
@@ -5561,7 +5561,7 @@ function vr(e) {
 }
 function zo(e, r, n) {
   const l = N(!1);
-  Le(
+  Ae(
     () => e.value,
     () => {
       o();
@@ -5792,7 +5792,7 @@ const $u = { class: "flex min-h-full w-full pt-20 sm:pt-0" }, Bu = { class: "min
       childList: !0
     }), ve(() => {
       $();
-    }), Le(
+    }), Ae(
       () => O.value,
       () => {
         qe(() => {
@@ -5844,7 +5844,7 @@ const $u = { class: "flex min-h-full w-full pt-20 sm:pt-0" }, Bu = { class: "min
       const P = De(E.value);
       P.page = 1, P.search = S.value, C(P);
     }, 350);
-    Le(
+    Ae(
       () => s.query,
       () => {
         ue();
@@ -5860,8 +5860,8 @@ const $u = { class: "flex min-h-full w-full pt-20 sm:pt-0" }, Bu = { class: "min
       K != b && (b = K, E.value = P, a.value && a.value !== document.activeElement && c(), se());
     }
     function se(F = !1) {
-      var Ae;
-      const P = re.value.split(/[?#]/), K = P[0], ae = (Ae = P[1]) != null ? Ae : null, ge = xe.parseQueryString(ae), $e = xr(
+      var Te;
+      const P = re.value.split(/[?#]/), K = P[0], ae = (Te = P[1]) != null ? Te : null, ge = xe.parseQueryString(ae), $e = xr(
         De(E.value),
         De(n.urlQuery),
         De(ge)
@@ -6246,18 +6246,18 @@ const Qo = /* @__PURE__ */ Pe(Uu, [["render", Gu], ["__scopeId", "data-v-945515f
       let V = t.value.length;
       return V += l.checkable ? 1 : 0, V += l.detailed ? 1 : 0, V;
     }), D = T(() => l.detailed);
-    Le(
+    Ae(
       () => l.checkedRows,
       (V) => {
         s.value = [...V];
       },
       { deep: !0 }
-    ), Le(
+    ), Ae(
       () => l.sortField,
       () => {
         Be();
       }
-    ), Le(
+    ), Ae(
       () => l.sortDirection,
       () => {
         Be();
@@ -6894,7 +6894,7 @@ const Mc = /* @__PURE__ */ Pe(Ic, [["render", Lc]]), Oc = { class: "flex justify
       localStorage.getItem(t) + ""
     );
     O && Xe(O) && O.length > 0 && (b.value = O);
-    const D = Le(
+    const D = Ae(
       () => p.value,
       () => {
         p.value && p.value.newColumns.length && b.value.length == 0 && (b.value = p.value.newColumns.filter((u) => !u.optional).map((u) => u.newKey), D());
@@ -7137,7 +7137,17 @@ const Mc = /* @__PURE__ */ Pe(Ic, [["render", Lc]]), Oc = { class: "flex justify
         (S) => Wt(S)
       ),
       !0
-    ), y = T(() => n.modelValue ? ot.fromISO(n.modelValue).toISODate() : null);
+    ), y = T(() => {
+      var S;
+      return n.modelValue && (S = ot.fromISO(n.modelValue, { zone: "utc" }).toISODate()) != null ? S : null;
+    });
+    Ae(
+      () => y.value,
+      () => {
+        n.modelValue !== y.value && o(y.value);
+      },
+      { immediate: !0 }
+    );
     let g = null;
     ve(() => {
       !s.value || (g = new Pl({
@@ -7158,7 +7168,7 @@ const Mc = /* @__PURE__ */ Pe(Ic, [["render", Lc]]), Oc = { class: "flex justify
         parse(S) {
           if (!S)
             return null;
-          const M = ot.fromISO(S), b = M.year, E = M.month - 1, t = M.day;
+          const M = ot.fromISO(S, { zone: "utc" }), b = M.year, E = M.month - 1, t = M.day;
           return new Date(b, E, t);
         },
         minDate: n.minDate,
@@ -7282,11 +7292,11 @@ const Mc = /* @__PURE__ */ Pe(Ic, [["render", Lc]]), Oc = { class: "flex justify
       month: null,
       day: null
     });
-    Le(
+    Ae(
       () => n.modelValue,
       () => {
         if (n.modelValue) {
-          const S = ot.fromISO(n.modelValue);
+          const S = ot.fromISO(n.modelValue, { zone: "utc" });
           f.value.year = S.year, f.value.month = S.month, f.value.day = S.day;
         }
       },
@@ -7301,7 +7311,8 @@ const Mc = /* @__PURE__ */ Pe(Ic, [["render", Lc]]), Oc = { class: "flex justify
     }
     function I() {
       return !f.value.year || !f.value.month || !f.value.day ? null : ot.fromISO(
-        gt(f.value.year + "", 4, "0") + "-" + gt(f.value.month + "", 2, "0") + "-" + gt(f.value.day + "", 2, "0")
+        gt(f.value.year + "", 4, "0") + "-" + gt(f.value.month + "", 2, "0") + "-" + gt(f.value.day + "", 2, "0"),
+        { zone: "utc" }
       );
     }
     const A = T(() => p.value.length == 0 || n.disabled);
@@ -8012,7 +8023,7 @@ const Vd = /* @__PURE__ */ Pe(Od, [["render", Pd]]), Nd = {
     const r = e;
     let n = null;
     const l = N(!1);
-    return Le(
+    return Ae(
       () => r.modelValue,
       (o) => {
         o ? n = setTimeout(() => {
@@ -8853,7 +8864,7 @@ const Gd = { class: "absolute inset-0 flex h-full w-full items-center justify-ce
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
     const n = e, l = N(n.currentModels);
-    Le(
+    Ae(
       () => n.currentModels,
       (a, s) => {
         l.value = a;
@@ -9858,7 +9869,7 @@ const tm = /* @__PURE__ */ Pe(Qf, [["render", em], ["__scopeId", "data-v-e5ae83e
       var t, O;
       return n.modelValue === o ? !0 : [...(O = (t = s.value) == null ? void 0 : t.options) != null ? O : []].findIndex((D) => Ml(D.value, n.modelValue)) != -1;
     }
-    Le(
+    Ae(
       () => n.modelValue,
       () => M()
     ), ve(() => {
@@ -12044,9 +12055,9 @@ const fp = ml.exports, mp = ["innerHTML"], pp = {
       o.value.plus({ second: 1 });
     }, 1e3), s = T(() => {
       if (n.notification.created_at) {
-        const p = ot.fromISO(n.notification.created_at).diff(
-          o.value
-        ).milliseconds, f = fp(p, {
+        const p = ot.fromISO(n.notification.created_at, {
+          zone: "utc"
+        }).diff(o.value).milliseconds, f = fp(p, {
           language: l.locale.value,
           round: !0,
           largest: 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDatePicker.stories.js

@@ -12,7 +12,7 @@ export default {
 const Template = (args) => ({
   components: { BaseDatePicker, ShowValue },
   setup() {
-    const value = ref(null);
+    const value = ref('2022-11-16T10:00:00Z');
     return { value, args };
   },
   template: `
@@ -41,10 +41,34 @@ MaxDate.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  modelValue: '2022-11-16',
   disabled: true,
 };
 
+export const DateTimeConversion = (args) => {
+  return {
+    components: { BaseDatePicker, ShowValue },
+    setup() {
+      const updatedValue = ref(null);
+      return { args, updatedValue };
+    },
+    template: `
+    <BaseDatePicker v-bind="args" @update:modelValue="(v) => updatedValue = v">
+    </BaseDatePicker>
+
+    <p class="mt-2"></p>
+    <small>Original props</small>
+    <ShowValue class='mt-1' :value="args.modelValue" />
+    
+    <p class="mt-2"></p>
+    <small>Updated value</small>
+    <ShowValue class='mt-1' :value="updatedValue" />
+  `,
+  };
+};
+DateTimeConversion.args = {
+  modelValue: '2022-11-05T10:00:00Z',
+};
+
 export const Field = createFieldStory({
   component: BaseDatePicker,
   componentName: 'BaseDatePicker',

package/src/components/BaseDatePicker.vue

@@ -106,11 +106,25 @@ const weekdaysShort = arrayRotate(
 );
 
 const modelValueFormatted = computed((): string | null => {
-  return props.modelValue
-    ? DateTime.fromISO(props.modelValue).toISODate()
-    : null;
+  if (!props.modelValue) {
+    return null;
+  }
+  return (
+    DateTime.fromISO(props.modelValue, { zone: 'utc' }).toISODate() ?? null
+  );
 });
 
+// Make sure the model value is always formatted on the parent component
+watch(
+  () => modelValueFormatted.value,
+  () => {
+    if (props.modelValue !== modelValueFormatted.value) {
+      emitUpdate(modelValueFormatted.value);
+    }
+  },
+  { immediate: true }
+);
+
 let picker = null as Pikaday | null;
 
 onMounted(() => {
@@ -141,7 +155,7 @@ onMounted(() => {
         return null;
       }
 
-      const datetime = DateTime.fromISO(dateString);
+      const datetime = DateTime.fromISO(dateString, { zone: 'utc' });
       const year = datetime.year;
       const month = datetime.month - 1;
       const day = datetime.day;

package/src/components/BaseDateSelect.vue

@@ -161,7 +161,7 @@ watch(
   () => props.modelValue,
   () => {
     if (props.modelValue) {
-      const datetime = DateTime.fromISO(props.modelValue);
+      const datetime = DateTime.fromISO(props.modelValue, { zone: 'utc' });
       date.value.year = datetime.year;
       date.value.month = datetime.month;
       date.value.day = datetime.day;
@@ -198,7 +198,8 @@ function getDateTime(): DateTime | null {
       '-' +
       padStart(date.value.month + '', 2, '0') +
       '-' +
-      padStart(date.value.day + '', 2, '0')
+      padStart(date.value.day + '', 2, '0'),
+    { zone: 'utc' }
   );
 }
 

package/src/components/BaseLayoutNotificationItem.vue

@@ -44,9 +44,9 @@ const intervalId = setInterval(() => {
 
 const createdAt = computed(() => {
   if (props.notification.created_at) {
-    const duration = DateTime.fromISO(props.notification.created_at).diff(
-      now.value
-    ).milliseconds;
+    const duration = DateTime.fromISO(props.notification.created_at, {
+      zone: 'utc',
+    }).diff(now.value).milliseconds;
 
     const durationHuman = humanizeDuration(duration, {
       language: i18n.locale.value,