quail-ui 0.2.33 → 0.2.34

package/dist/index.js

@@ -1,8 +1,8 @@
-import { openBlock as n, createElementBlock as s, createElementVNode as o, createStaticVNode as o1, defineComponent as j, ref as S, watch as E, onMounted as u1, withDirectives as e1, vModelText as c1, computed as B, createBlock as Z, Transition as C1, withCtx as f1, normalizeClass as D, normalizeStyle as w1, withModifiers as g1, toDisplayString as q, renderSlot as l1, createCommentVNode as F, getCurrentInstance as V1, unref as X, resolveDynamicComponent as t1, Fragment as p1, renderList as v1, vModelCheckbox as b1, useSlots as z1, resolveComponent as a1, createVNode as n1 } from "vue";
+import { openBlock as n, createElementBlock as s, createElementVNode as o, createStaticVNode as o1, defineComponent as j, ref as S, watch as U, onMounted as u1, withDirectives as e1, vModelText as c1, computed as B, createBlock as Z, Transition as C1, withCtx as f1, normalizeClass as D, normalizeStyle as w1, withModifiers as g1, toDisplayString as q, renderSlot as l1, createCommentVNode as F, getCurrentInstance as V1, unref as X, resolveDynamicComponent as t1, Fragment as p1, renderList as v1, vModelCheckbox as b1, useSlots as z1, resolveComponent as a1, createVNode as n1 } from "vue";
 const c = (e, t) => {
   const i = e.__vccOpts || e;
-  for (const [h, C] of t)
-    i[h] = C;
+  for (const [_, C] of t)
+    i[_] = C;
   return i;
 }, Q1 = {}, I1 = {
   width: "24",
@@ -1285,10 +1285,10 @@ function l5(e) {
 }
 var M1 = { exports: {} };
 (function(e, t) {
-  (function(i, h) {
-    e.exports = h();
+  (function(i, _) {
+    e.exports = _();
   })(c5, function() {
-    var i = 1e3, h = 6e4, C = 36e5, _ = "millisecond", f = "second", v = "minute", $ = "hour", M = "day", x = "week", u = "month", L = "quarter", Q = "year", O = "date", _1 = "Invalid Date", x1 = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, L1 = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, y1 = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(w) {
+    var i = 1e3, _ = 6e4, C = 36e5, h = "millisecond", f = "second", v = "minute", $ = "hour", M = "day", x = "week", u = "month", L = "quarter", Q = "year", O = "date", _1 = "Invalid Date", x1 = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, L1 = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, y1 = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(w) {
       var a = ["th", "st", "nd", "rd"], r = w % 100;
       return "[" + w + (a[(r - 20) % 10] || a[r] || a[0]) + "]";
     } }, s1 = function(w, a, r) {
@@ -1305,7 +1305,7 @@ var M1 = { exports: {} };
     }, a: function(w) {
       return w < 0 ? Math.ceil(w) || 0 : Math.floor(w);
     }, p: function(w) {
-      return { M: u, y: Q, w: x, d: M, D: O, h: $, m: v, s: f, ms: _, Q: L }[w] || String(w || "").toLowerCase().replace(/s$/, "");
+      return { M: u, y: Q, w: x, d: M, D: O, h: $, m: v, s: f, ms: h, Q: L }[w] || String(w || "").toLowerCase().replace(/s$/, "");
     }, u: function(w) {
       return w === void 0;
     } }, W = "en", T = {};
@@ -1385,7 +1385,7 @@ var M1 = { exports: {} };
           return g ? P : P.endOf(M);
         }, y = function(A, z) {
           return m.w(l.toDate()[A].apply(l.toDate("s"), (g ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(z)), l);
-        }, V = this.$W, b = this.$M, I = this.$D, U = "set" + (this.$u ? "UTC" : "");
+        }, V = this.$W, b = this.$M, I = this.$D, E = "set" + (this.$u ? "UTC" : "");
         switch (p) {
           case Q:
             return g ? k(1, 0) : k(31, 11);
@@ -1396,20 +1396,20 @@ var M1 = { exports: {} };
             return k(g ? I - N : I + (6 - N), b);
           case M:
           case O:
-            return y(U + "Hours", 0);
+            return y(E + "Hours", 0);
           case $:
-            return y(U + "Minutes", 1);
+            return y(E + "Minutes", 1);
           case v:
-            return y(U + "Seconds", 2);
+            return y(E + "Seconds", 2);
           case f:
-            return y(U + "Milliseconds", 3);
+            return y(E + "Milliseconds", 3);
           default:
             return this.clone();
         }
       }, a.endOf = function(r) {
         return this.startOf(r, !1);
       }, a.$set = function(r, d) {
-        var l, g = m.p(r), p = "set" + (this.$u ? "UTC" : ""), k = (l = {}, l[M] = p + "Date", l[O] = p + "Date", l[u] = p + "Month", l[Q] = p + "FullYear", l[$] = p + "Hours", l[v] = p + "Minutes", l[f] = p + "Seconds", l[_] = p + "Milliseconds", l)[g], y = g === M ? this.$D + (d - this.$W) : d;
+        var l, g = m.p(r), p = "set" + (this.$u ? "UTC" : ""), k = (l = {}, l[M] = p + "Date", l[O] = p + "Date", l[u] = p + "Month", l[Q] = p + "FullYear", l[$] = p + "Hours", l[v] = p + "Minutes", l[f] = p + "Seconds", l[h] = p + "Milliseconds", l)[g], y = g === M ? this.$D + (d - this.$W) : d;
         if (g === u || g === Q) {
           var V = this.clone().set(O, 1);
           V.$d[k](y), V.init(), this.$d = V.set(O, Math.min(this.$D, V.daysInMonth())).$d;
@@ -1435,7 +1435,7 @@ var M1 = { exports: {} };
           return k(1);
         if (p === x)
           return k(7);
-        var y = (l = {}, l[v] = h, l[$] = C, l[f] = i, l)[p] || 1, V = this.$d.getTime() + r * y;
+        var y = (l = {}, l[v] = _, l[$] = C, l[f] = i, l)[p] || 1, V = this.$d.getTime() + r * y;
         return m.w(V, this);
       }, a.subtract = function(r, d) {
         return this.add(-1 * r, d);
@@ -1443,11 +1443,11 @@ var M1 = { exports: {} };
         var d = this, l = this.$locale();
         if (!this.isValid())
           return l.invalidDate || _1;
-        var g = r || "YYYY-MM-DDTHH:mm:ssZ", p = m.z(this), k = this.$H, y = this.$m, V = this.$M, b = l.weekdays, I = l.months, U = l.meridiem, Y = function(z, P, G, K) {
+        var g = r || "YYYY-MM-DDTHH:mm:ssZ", p = m.z(this), k = this.$H, y = this.$m, V = this.$M, b = l.weekdays, I = l.months, E = l.meridiem, Y = function(z, P, G, K) {
           return z && (z[P] || z(d, g)) || G[P].slice(0, K);
         }, N = function(z) {
           return m.s(k % 12 || 12, z, "0");
-        }, A = U || function(z, P, G) {
+        }, A = E || function(z, P, G) {
           var K = z < 12 ? "AM" : "PM";
           return G ? K.toLowerCase() : K;
         };
@@ -1509,7 +1509,7 @@ var M1 = { exports: {} };
       }, a.utcOffset = function() {
         return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
       }, a.diff = function(r, d, l) {
-        var g, p = this, k = m.p(d), y = H(r), V = (y.utcOffset() - this.utcOffset()) * h, b = this - y, I = function() {
+        var g, p = this, k = m.p(d), y = H(r), V = (y.utcOffset() - this.utcOffset()) * _, b = this - y, I = function() {
           return m.m(p, y);
         };
         switch (k) {
@@ -1532,7 +1532,7 @@ var M1 = { exports: {} };
             g = b / C;
             break;
           case v:
-            g = b / h;
+            g = b / _;
             break;
           case f:
             g = b / i;
@@ -1562,7 +1562,7 @@ var M1 = { exports: {} };
         return this.$d.toUTCString();
       }, w;
     }(), h1 = J.prototype;
-    return H.prototype = h1, [["$ms", _], ["$s", f], ["$m", v], ["$H", $], ["$W", M], ["$M", u], ["$y", Q], ["$D", O]].forEach(function(w) {
+    return H.prototype = h1, [["$ms", h], ["$s", f], ["$m", v], ["$H", $], ["$W", M], ["$M", u], ["$y", Q], ["$D", O]].forEach(function(w) {
       h1[w[1]] = function(a) {
         return this.$g(a, w[0], w[1]);
       };
@@ -1588,35 +1588,35 @@ const i1 = /* @__PURE__ */ l5(a5), d5 = { class: "q-datetime-picker" }, u5 = ["d
   },
   emits: ["update:modelValue", "change"],
   setup(e, { emit: t }) {
-    const i = e, h = S(""), C = S("");
-    E(
+    const i = e, _ = S(""), C = S("");
+    U(
       () => i.modelValue,
       (f) => {
         const v = i1(f);
-        h.value = v.format("YYYY-MM-DD"), C.value = v.format("HH:mm");
+        _.value = v.format("YYYY-MM-DD"), C.value = v.format("HH:mm");
       }
     );
-    function _() {
-      const f = i1(`${h.value} ${C.value}`).format("YYYY-MM-DDTHH:mm:ssZ");
+    function h() {
+      const f = i1(`${_.value} ${C.value}`).format("YYYY-MM-DDTHH:mm:ssZ");
       t("change", f), t("update:modelValue", f);
     }
     return u1(() => {
       const f = i1();
-      h.value = f.format("YYYY-MM-DD"), C.value = f.format("HH:mm");
+      _.value = f.format("YYYY-MM-DD"), C.value = f.format("HH:mm");
     }), (f, v) => (n(), s("div", d5, [
       e1(o("input", {
-        "onUpdate:modelValue": v[0] || (v[0] = ($) => h.value = $),
+        "onUpdate:modelValue": v[0] || (v[0] = ($) => _.value = $),
         type: "date",
         disabled: e.disabled,
-        onChange: _
+        onChange: h
       }, null, 40, u5), [
-        [c1, h.value]
+        [c1, _.value]
       ]),
       e1(o("input", {
         "onUpdate:modelValue": v[1] || (v[1] = ($) => C.value = $),
         type: "time",
         disabled: e.disabled,
-        onChange: _
+        onChange: h
       }, null, 40, _5), [
         [c1, C.value]
       ])
@@ -1653,14 +1653,14 @@ const C5 = ["onClick"], f5 = { class: "q-dialog-header" }, w5 = {
   },
   emits: ["update:modelValue", "close"],
   setup(e, { emit: t }) {
-    const i = e, h = S(!1), C = S(i.modelValue), _ = B(() => {
+    const i = e, _ = S(!1), C = S(i.modelValue), h = B(() => {
       const $ = document.body.clientWidth < 720 ? "100%" : i.width, M = i.height;
       return {
         width: $,
         height: M
       };
     });
-    E(
+    U(
       () => i.modelValue,
       ($) => {
         C.value = $;
@@ -1668,8 +1668,8 @@ const C5 = ["onClick"], f5 = { class: "q-dialog-header" }, w5 = {
     );
     function f() {
       if (i.persistent) {
-        h.value = !0, setTimeout(() => {
-          h.value = !1;
+        _.value = !0, setTimeout(() => {
+          _.value = !1;
         }, 300);
         return;
       }
@@ -1685,8 +1685,8 @@ const C5 = ["onClick"], f5 = { class: "q-dialog-header" }, w5 = {
           onClick: f
         }, [
           o("div", {
-            class: D(["q-dialog", h.value ? "shaking" : ""]),
-            style: w1(_.value),
+            class: D(["q-dialog", _.value ? "shaking" : ""]),
+            style: w1(h.value),
             onClick: g1(v, ["stop"])
           }, [
             o("div", f5, [
@@ -1727,7 +1727,7 @@ const v5 = ["href"], $5 = { class: "q-fence-text" }, m5 = {
   setup(e) {
     var i;
     const t = (i = V1()) == null ? void 0 : i.appContext.components;
-    return (h, C) => (n(), s("div", {
+    return (_, C) => (n(), s("div", {
       class: D(["q-fence", e.type])
     }, [
       e.link ? (n(), s("a", {
@@ -1786,16 +1786,16 @@ const b5 = /* @__PURE__ */ c(x5, [["render", V5]]), z5 = { class: "q-menu" }, Q5
   emits: ["action"],
   setup(e, { emit: t }) {
     const i = e;
-    function h(_) {
+    function _(h) {
       let f = "";
-      return _.disabled && (f += " disabled"), _.danger && (f += " danger"), _.icon && (f += " with-icon"), _.image && (f += " with-image"), _.divider && (f += " with-divider"), f;
+      return h.disabled && (f += " disabled"), h.danger && (f += " danger"), h.icon && (f += " with-icon"), h.image && (f += " with-image"), h.divider && (f += " with-divider"), f;
     }
-    function C(_) {
-      _.action && _.action(_), _.disabled !== !0 && t("action", _);
+    function C(h) {
+      h.action && h.action(h), h.disabled !== !0 && t("action", h);
     }
-    return (_, f) => (n(), s("div", z5, [
+    return (h, f) => (n(), s("div", z5, [
       (n(!0), s(p1, null, v1(i.items, (v) => (n(), s("div", {
-        class: D(["q-menu-item", h(v)]),
+        class: D(["q-menu-item", _(v)]),
         key: `q-menu-item-${v.id}`,
         onClick: ($) => C(v)
       }, [
@@ -1832,24 +1832,24 @@ const O5 = ["disabled"], P5 = /* @__PURE__ */ o("div", { class: "q-switch-inner"
   },
   emits: ["update:modelValue", "change"],
   setup(e, { emit: t }) {
-    const i = e, h = S(i.modelValue);
-    E(() => i.modelValue, (_) => {
-      h.value = _;
+    const i = e, _ = S(i.modelValue);
+    U(() => i.modelValue, (h) => {
+      _.value = h;
     });
-    function C(_) {
-      t("update:modelValue", h.value), t("change", h.value);
+    function C(h) {
+      t("update:modelValue", _.value), t("change", _.value);
     }
-    return (_, f) => (n(), s("label", {
+    return (h, f) => (n(), s("label", {
       class: D(["q-switch", e.disabled ? "disabled" : ""])
     }, [
       e1(o("input", {
         class: "q-switch-checkbox",
         type: "checkbox",
-        "onUpdate:modelValue": f[0] || (f[0] = (v) => h.value = v),
+        "onUpdate:modelValue": f[0] || (f[0] = (v) => _.value = v),
         onChange: C,
         disabled: i.disabled
       }, null, 40, O5), [
-        [b1, h.value]
+        [b1, _.value]
       ]),
       P5
     ], 2));
@@ -1892,29 +1892,29 @@ const Y5 = { class: "q-text-field-wrapper" }, A5 = ["placeholder"], F5 = { class
   },
   emits: ["submit", "update:modelValue"],
   setup(e, { emit: t }) {
-    const i = e, h = S(i.defaultText), C = B(() => {
+    const i = e, _ = S(i.defaultText), C = B(() => {
       const u = [];
       return i.layout === "vertical" ? u.push("vertical") : u.push("horizontal"), i.type === "code" && u.push("code"), i.glow && u.push(`glow-${i.glow}`), u.join(" ");
-    }), _ = B(() => {
+    }), h = B(() => {
       var L;
-      return i.loading || ((L = h.value) == null ? void 0 : L.trim()).length === 0 ? !1 : i.type === "email" ? f.value : i.type === "code" ? v.value : !0;
+      return i.loading || ((L = _.value) == null ? void 0 : L.trim()).length === 0 ? !1 : i.type === "email" ? f.value : i.type === "code" ? v.value : !0;
     }), f = B(() => {
       var L;
-      const u = (L = h.value) == null ? void 0 : L.trim();
+      const u = (L = _.value) == null ? void 0 : L.trim();
       return !i.disabled && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(u);
     }), v = B(() => {
       var L;
-      const u = (L = h.value) == null ? void 0 : L.trim();
+      const u = (L = _.value) == null ? void 0 : L.trim();
       return /^\d{6}$/.test(u);
     }), $ = B(() => i.loading ? "Loading..." : i.actionLabel);
-    E(() => i.modelValue, (u) => {
-      h.value = u;
+    U(() => i.modelValue, (u) => {
+      _.value = u;
     });
     function M() {
-      _.value && t("submit", { text: h.value });
+      h.value && t("submit", { text: _.value });
     }
     function x() {
-      t("update:modelValue", h.value);
+      t("update:modelValue", _.value);
     }
     return (u, L) => (n(), s("div", {
       class: D(["q-text-field-with-button", C.value])
@@ -1923,16 +1923,16 @@ const Y5 = { class: "q-text-field-wrapper" }, A5 = ["placeholder"], F5 = { class
         e1(o("input", {
           class: "q-text-field text-field",
           placeholder: i.placeholder,
-          "onUpdate:modelValue": L[0] || (L[0] = (Q) => h.value = Q),
+          "onUpdate:modelValue": L[0] || (L[0] = (Q) => _.value = Q),
           onChange: x
         }, null, 40, A5), [
-          [c1, h.value]
+          [c1, _.value]
         ])
       ]),
       o("div", F5, [
         o("button", {
           class: "q-button button primary",
-          disabled: !_.value,
+          disabled: !h.value,
           onClick: M
         }, q($.value), 9, U5)
       ]),
@@ -1977,10 +1977,10 @@ const N5 = { class: "q-dropdown-menu" }, G5 = { class: "q-dropdown-menu-inner na
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const i = e, h = z1(), C = S(!1), _ = S(null), f = S(null), v = B(() => {
+    const i = e, _ = z1(), C = S(!1), h = S(null), f = S(null), v = B(() => {
       const u = [];
-      return C.value && u.push("expanded"), i.variant === "outlined" && u.push("frame"), i.hideSelected && u.push("hide-selected"), _.value && (_.value.icon || _.value.image) ? u.push("prepend") : u.push("no-prepend"), u.join(" ");
-    }), $ = B(() => h.default !== void 0);
+      return C.value && u.push("expanded"), i.variant === "outlined" && u.push("frame"), i.hideSelected && u.push("hide-selected"), h.value && (h.value.icon || h.value.image) ? u.push("prepend") : u.push("no-prepend"), u.join(" ");
+    }), $ = B(() => _.default !== void 0);
     function M() {
       C.value || k1(), C.value = !C.value, C.value && setTimeout(() => {
         const L = f.value.querySelector(".q-menu");
@@ -1988,15 +1988,15 @@ const N5 = { class: "q-dropdown-menu" }, G5 = { class: "q-dropdown-menu-inner na
       }, 10);
     }
     function x(u) {
-      C.value = !1, _.value = u, u.action && u.action(u), t("change", u);
+      C.value = !1, h.value = u, u.action && u.action(u), t("change", u);
     }
-    return E(
+    return U(
       () => i.initialItem,
       () => {
-        i.initialItem && (_.value = i.initialItem);
+        i.initialItem && (h.value = i.initialItem);
       }
     ), u1(() => {
-      i.initialItem && (_.value = i.initialItem), window.addEventListener("storage", (u) => {
+      i.initialItem && (h.value = i.initialItem), window.addEventListener("storage", (u) => {
         u.key === "quailui_global_popup_trigger" && u.newValue && (C.value = !1);
       });
     }), (u, L) => {
@@ -2007,17 +2007,17 @@ const N5 = { class: "q-dropdown-menu" }, G5 = { class: "q-dropdown-menu-inner na
             class: D(["q-dropdown-menu-action", v.value]),
             onClick: g1(M, ["stop"])
           }, [
-            !e.hideSelected && _.value && !$.value ? (n(), s("div", J5, [
-              _.value.image ? (n(), s("img", {
+            !e.hideSelected && h.value && !$.value ? (n(), s("div", J5, [
+              h.value.image ? (n(), s("img", {
                 key: 0,
                 class: "menu-image",
-                src: _.value.image,
-                alt: _.value.title
-              }, null, 8, K5)) : _.value.icon ? (n(), Z(t1(_.value.icon), {
+                src: h.value.image,
+                alt: h.value.title
+              }, null, 8, K5)) : h.value.icon ? (n(), Z(t1(h.value.icon), {
                 key: 1,
                 class: "icon menu-icon"
               })) : F("", !0),
-              o("div", X5, q(_.value ? _.value.title : i.placeholder || "Select ..."), 1)
+              o("div", X5, q(h.value ? h.value.title : i.placeholder || "Select ..."), 1)
             ])) : F("", !0),
             l1(u.$slots, "default"),
             n1(Q, { class: "icon chevron-icon" })
@@ -2070,7 +2070,7 @@ const t7 = { class: "q-pagination" }, n7 = ["disabled"], o7 = {
   },
   emits: ["change:next", "change:prev", "change:goto", "update:modelValue"],
   setup(e, { emit: t }) {
-    const i = e, h = B(() => {
+    const i = e, _ = B(() => {
       let $ = 6;
       const M = [];
       if (i.totalPage !== 0)
@@ -2087,10 +2087,10 @@ const t7 = { class: "q-pagination" }, n7 = ["disabled"], o7 = {
         }
       return M;
     }), C = S(i.modelValue);
-    E(() => i.modelValue, ($) => {
+    U(() => i.modelValue, ($) => {
       C.value = $;
     });
-    function _() {
+    function h() {
       C.value--, t("change:prev", C.value), t("update:modelValue", C.value);
     }
     function f() {
@@ -2102,13 +2102,13 @@ const t7 = { class: "q-pagination" }, n7 = ["disabled"], o7 = {
     return ($, M) => (n(), s("div", t7, [
       o("button", {
         class: "prev q-button button sm outlined icon",
-        onClick: _,
+        onClick: h,
         disabled: !i.hasPrev
       }, [
         n1($1, { class: "icon" })
       ], 8, n7),
       e.totalPage !== 0 ? (n(), s("div", o7, [
-        (n(!0), s(p1, null, v1(h.value, (x) => (n(), s("div", s7, [
+        (n(!0), s(p1, null, v1(_.value, (x) => (n(), s("div", s7, [
           o("button", {
             class: D(["q-page-indicator q-button button sm plain", x.label === C.value ? "active" : ""]),
             disabled: x.disabled,
@@ -2151,13 +2151,13 @@ const d7 = { class: "q-progress-slot" }, u7 = /* @__PURE__ */ o("div", { class:
     }
   },
   setup(e) {
-    const t = e, i = B(() => t.infinite ? "100%" : `${t.value / t.max * 100}%`), h = B(() => t.value >= t.max);
-    return (C, _) => (n(), s("div", {
+    const t = e, i = B(() => t.infinite ? "100%" : `${t.value / t.max * 100}%`), _ = B(() => t.value >= t.max);
+    return (C, h) => (n(), s("div", {
       class: D(["q-progress", e.color])
     }, [
       o("div", d7, [
         o("div", {
-          class: D(["q-progress-bar", h.value ? "" : "animated"]),
+          class: D(["q-progress-bar", _.value ? "" : "animated"]),
           style: w1({ width: i.value })
         }, _7, 6)
       ])
@@ -2167,45 +2167,50 @@ const d7 = { class: "q-progress-slot" }, u7 = /* @__PURE__ */ o("div", { class:
 const C7 = /* @__PURE__ */ j({
   __name: "QLanguageSelector",
   props: {
-    initial: {
+    lang: {
       type: String,
       default: "en"
     }
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const i = e, h = S(null), C = B(() => [
+    const i = e, _ = S(null), C = B(() => [
       {
         title: "🇺🇸 English",
         value: "en",
-        action: _
+        action: h
       },
       {
         title: "🇨🇳 简体中文",
         value: "zh",
-        action: _
+        action: h
       },
       {
         title: "🇹🇼 正體中文",
         value: "zh-tw",
-        action: _
+        action: h
       },
       {
         title: "🇯🇵 日本語",
         value: "ja",
-        action: _
+        action: h
       }
     ]);
-    function _(f) {
-      t("change", f.value);
+    function h(f) {
+      t("change", {
+        title: f.title,
+        value: f.value
+      });
     }
-    return u1(() => {
-      h.value = C.value.find((f) => i.initial === f.value || localStorage.getItem("quail-language") === f.value) || C.value[0];
+    return U(() => i.lang, (f) => {
+      _.value = C.value.find((v) => f === v.value);
+    }), u1(() => {
+      _.value = C.value.find((f) => i.lang === f.value || localStorage.getItem("quail-language") === f.value) || C.value[0];
     }), (f, v) => {
       const $ = a1("QDropdownMenu");
       return n(), Z($, {
         items: C.value,
-        "initial-item": h.value
+        "initial-item": _.value
       }, null, 8, ["items", "initial-item"]);
     };
   }
@@ -2226,10 +2231,10 @@ const C7 = /* @__PURE__ */ j({
 const g7 = {
   install(e, t) {
     t != null && t.debug && console.log("options", t);
-    for (const [i, h] of Object.entries(i5))
-      t != null && t.debug && console.log("[quail-ui] register icon component", i, h), e.component(i, h);
-    for (const [i, h] of Object.entries(f7))
-      t != null && t.debug && console.log("[quail-ui] register common component", i, h), e.component(i, h);
+    for (const [i, _] of Object.entries(i5))
+      t != null && t.debug && console.log("[quail-ui] register icon component", i, _), e.component(i, _);
+    for (const [i, _] of Object.entries(f7))
+      t != null && t.debug && console.log("[quail-ui] register common component", i, _), e.component(i, _);
     document.body.addEventListener("click", (i) => {
       k1();
     });