@toife/vue 2.0.26 → 2.1.1

package/dist/index.es.js

@@ -1,25 +1,25 @@
-import { createElementBlock as f, openBlock as i, renderSlot as g, defineComponent as b, ref as v, computed as w, reactive as ue, watch as N, onMounted as j, Fragment as q, withDirectives as F, createCommentVNode as z, normalizeStyle as x, normalizeClass as B, vShow as K, createElementVNode as $, createVNode as G, createBlock as V, withCtx as P, toDisplayString as A, renderList as U, createTextVNode as M, createApp as J, h as Q, provide as de, unref as O, onUnmounted as re, resolveDynamicComponent as ke, markRaw as $e, inject as pe, useAttrs as Te, nextTick as ce } from "vue";
-import { gesture as ae } from "@toife/gesture";
-import { useRouter as fe, useRoute as we } from "vue-router";
-const xe = (t) => t && (t.tagName == "INPUT" || t.tagName == "TEXTAREA" || t.isContentEditable), Se = () => {
+import { createElementBlock as f, openBlock as i, renderSlot as b, defineComponent as h, ref as m, computed as x, reactive as ie, watch as W, onMounted as H, Fragment as q, withDirectives as U, createCommentVNode as I, normalizeStyle as T, normalizeClass as B, vShow as j, createElementVNode as $, createVNode as ue, createBlock as C, withCtx as N, toDisplayString as A, renderList as G, createTextVNode as M, createApp as J, h as Q, provide as de, unref as O, onUnmounted as se, resolveDynamicComponent as ke, markRaw as $e, inject as pe, useAttrs as xe, nextTick as le } from "vue";
+import { gesture as re } from "@toife/gesture";
+import { useRouter as fe, useRoute as Te } from "vue-router";
+const we = (t) => t && (t.tagName == "INPUT" || t.tagName == "TEXTAREA" || t.isContentEditable), Se = () => {
   const t = document.activeElement;
   t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable) && t.blur();
 }, Be = () => {
   document.addEventListener("contextmenu", (t) => t.preventDefault()), document.addEventListener("pointerup", (t) => {
-    !xe(t.target) && Se();
+    !we(t.target) && Se();
   }), "virtualKeyboard" in navigator && (navigator.virtualKeyboard.overlaysContent = !0);
 }, _ = (t, o) => {
   const e = t.__vccOpts || t;
-  for (const [s, n] of o)
-    e[s] = n;
+  for (const [s, r] of o)
+    e[s] = r;
   return e;
-}, Ce = {}, Ie = { class: "t-app" };
-function ze(t, o) {
-  return i(), f("div", Ie, [
-    g(t.$slots, "default")
+}, ze = {}, Ee = { class: "t-app" };
+function Ie(t, o) {
+  return i(), f("div", Ee, [
+    b(t.$slots, "default")
   ]);
 }
-const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
+const Pe = /* @__PURE__ */ _(ze, [["render", Ie]]), Ve = /* @__PURE__ */ h({
   __name: "t-present",
   props: {
     keepalive: { type: Boolean, default: !0 },
@@ -33,86 +33,85 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
   },
   emits: ["dismiss"],
   setup(t, { expose: o, emit: e }) {
-    const s = v(0), n = v(!1), l = v(), u = v(), r = t, d = e, y = w(() => n.value || r.keepalive), p = v(!1), a = ue({
+    const s = m(0), r = m(!1), l = m(), u = m(), n = t, p = e, v = x(() => r.value || n.keepalive), d = m(!1), a = ie({
       "--t-present-backdrop-opacity": "0.4",
       "--t-present-transition": "0.2s",
       "--t-present-content-transform": "0px",
       "--t-present-content-opacity": "1"
-    }), c = w(() => r.duration / 1e3 + "s"), m = (T) => {
-      r.backdrop ? T?.backdropOpacity && (a["--t-present-backdrop-opacity"] = T.backdropOpacity) : a["--t-present-backdrop-opacity"] = "0", T.transition && (a["--t-present-transition"] = T.transition), T.contentTransform && (a["--t-present-content-transform"] = T.contentTransform), T.contentOpacity && (a["--t-present-content-opacity"] = T.contentOpacity);
-    }, k = () => {
-      if (r.bounce !== void 0 && !p.value) {
-        p.value = !0;
-        let T = r.bounce;
-        (r.placement == "bottom" || r.placement == "right") && (T = `calc(${r.bounce} * -1)`), m({
-          contentTransform: T,
+    }), c = x(() => n.duration / 1e3 + "s"), y = (k) => {
+      n.backdrop ? k?.backdropOpacity && (a["--t-present-backdrop-opacity"] = k.backdropOpacity) : a["--t-present-backdrop-opacity"] = "0", k.transition && (a["--t-present-transition"] = k.transition), k.contentTransform && (a["--t-present-content-transform"] = k.contentTransform), k.contentOpacity && (a["--t-present-content-opacity"] = k.contentOpacity);
+    }, w = () => {
+      if (n.bounce !== void 0 && !d.value) {
+        d.value = !0;
+        let k = n.bounce;
+        (n.placement == "bottom" || n.placement == "right") && (k = `calc(${n.bounce} * -1)`), y({
+          contentTransform: k,
           transition: c.value,
           backdropOpacity: "0.4",
           contentOpacity: "1"
         }), setTimeout(() => {
-          m({
+          y({
             contentTransform: "0px"
           });
-        }, r.duration);
+        }, n.duration);
       } else
-        m({
+        y({
           contentTransform: "0px",
           transition: c.value,
           backdropOpacity: "0.4",
           contentOpacity: "1"
         });
-    }, h = () => {
-      let T = "0px", se = "1";
-      r.placement == "bottom" || r.placement == "right" ? T = "100%" : r.placement == "top" || r.placement == "left" ? T = "-100%" : r.placement == "center" && (T = "0px", se = "0"), m({
-        contentTransform: T,
+    }, g = () => {
+      let k = "0px", K = "1";
+      n.placement == "bottom" || n.placement == "right" ? k = "100%" : n.placement == "top" || n.placement == "left" ? k = "-100%" : n.placement == "center" && (k = "0px", K = "0"), y({
+        contentTransform: k,
         transition: c.value,
-        contentOpacity: se,
+        contentOpacity: K,
         backdropOpacity: "0"
       });
     };
-    N(() => r.visible, () => {
-      r.visible ? (p.value = !1, n.value = !0, s.value = Ke.getNewIndex(), setTimeout(() => {
-        k();
-      }, 50)) : (h(), setTimeout(() => {
-        n.value = !1;
+    W(() => n.visible, () => {
+      n.visible ? (d.value = !1, r.value = !0, s.value = Fe.getNewIndex(), setTimeout(() => {
+        w();
+      }, 50)) : (g(), setTimeout(() => {
+        r.value = !1;
       }, 200));
     }), o({
-      render: m,
-      open: k,
-      close: h
+      render: y,
+      open: w,
+      close: g
     });
-    const W = (T) => {
-      T.preventDefault(), d("dismiss", "backdrop");
+    const P = (k) => {
+      k.preventDefault(), p("dismiss", "backdrop");
     };
-    return j(() => {
-      r.visible ? k() : h();
-    }), (T, se) => (i(), f(q, null, [
-      y.value ? F((i(), f("div", {
+    return H(() => {
+      n.visible ? w() : g();
+    }), (k, K) => (i(), f(q, null, [
+      v.value ? U((i(), f("div", {
         key: 0,
-        class: B(["t-present", [{ [T.placement]: !0 }, r.class]]),
+        class: B(["t-present", [{ [k.placement]: !0 }, n.class]]),
         ref_key: "present",
         ref: u,
-        style: x([a, { zIndex: s.value }, r.style])
+        style: T([a, { zIndex: s.value }, n.style])
       }, [
-        g(T.$slots, "default", {}, void 0, !0)
+        b(k.$slots, "default", {}, void 0, !0)
       ], 6)), [
-        [K, n.value]
-      ]) : z("", !0),
-      y.value ? F((i(), f("div", {
+        [j, r.value]
+      ]) : I("", !0),
+      v.value ? U((i(), f("div", {
         key: 1,
         class: "t-present-backdrop",
-        onClick: W,
-        onTouchend: W,
+        onPointerup: P,
         ref_key: "backdrop",
         ref: l,
-        style: x([a, { zIndex: s.value - 1 }, r.style])
+        style: T([a, { zIndex: s.value - 1 }, n.style])
       }, null, 36)), [
-        [K, n.value]
-      ]) : z("", !0)
+        [j, r.value]
+      ]) : I("", !0)
     ], 64));
   }
-}), H = /* @__PURE__ */ _(Ve, [["__scopeId", "data-v-b7870f48"]]), Pe = /* @__PURE__ */ b({
-  __name: "t-loading-icon",
+}), F = /* @__PURE__ */ _(Ve, [["__scopeId", "data-v-cab98086"]]), Ce = /* @__PURE__ */ h({
+  __name: "t-icon-spinner",
   props: {
     size: {
       type: String,
@@ -125,8 +124,8 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
   },
   setup(t) {
     return (o, e) => (i(), f("span", {
-      class: "t-loading-icon",
-      style: x({
+      class: "t-icon-spinner",
+      style: T({
         width: t.size,
         height: t.size,
         borderTopColor: t.color
@@ -135,10 +134,10 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
       "aria-label": "Loading..."
     }, null, 4));
   }
-}), Z = /* @__PURE__ */ _(Pe, [["__scopeId", "data-v-7c463303"]]), Re = { class: "t-button-content" }, Ae = {
+}), ne = /* @__PURE__ */ _(Ce, [["__scopeId", "data-v-6192deb4"]]), Re = { class: "t-button-content" }, Ae = {
   key: 0,
   class: "loader"
-}, Oe = /* @__PURE__ */ b({
+}, Oe = /* @__PURE__ */ h({
   __name: "t-button",
   props: {
     color: { default: null },
@@ -151,7 +150,7 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
     activeBackground: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const o = t, e = w(() => {
+    const o = t, e = x(() => {
       let s;
       return o.variant == "default" && (o.color ? ["warning", "info", "danger", "primary", "secondary", "success"].includes(o.color) ? s = {
         "--border": "none",
@@ -191,27 +190,27 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
         "--background": "transparent"
       }), s;
     });
-    return (s, n) => (i(), f("button", {
+    return (s, r) => (i(), f("button", {
       class: B(["t-button", { "active-background": o.activeBackground, rounded: o.rounded, block: o.block, ["size-" + o.size]: !0 }]),
-      style: x(e.value)
+      style: T(e.value)
     }, [
-      F($("span", Re, [
-        g(s.$slots, "default", {}, void 0, !0)
+      U($("span", Re, [
+        b(s.$slots, "default", {}, void 0, !0)
       ], 512), [
-        [K, !o.loading]
+        [j, !o.loading]
       ]),
       o.loading ? (i(), f("span", Ae, [
-        G(Z, {
+        ue(ne, {
           color: "var(--color)",
           type: o.loadingType
         }, null, 8, ["type"])
-      ])) : z("", !0)
+      ])) : I("", !0)
     ], 6));
   }
-}), Y = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-d8c9aca1"]]), Xe = {
+}), Z = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-f1db05a6"]]), Ne = {
   key: 0,
   class: "t-alert-header"
-}, De = { class: "t-alert-content" }, We = { class: "t-alert-footer" }, Ne = /* @__PURE__ */ b({
+}, Xe = { class: "t-alert-content" }, De = { class: "t-alert-footer" }, We = /* @__PURE__ */ h({
   __name: "t-alert",
   props: {
     title: {},
@@ -221,48 +220,48 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
   },
   emits: ["dismiss"],
   setup(t, { expose: o, emit: e }) {
-    const s = t, n = e, l = v(!1), u = v(), r = v(!1), d = () => {
+    const s = t, r = e, l = m(!1), u = m(), n = m(!1), p = () => {
       l.value = !0;
-    }, y = (a) => {
-      l.value = !1, a.handler && a.handler(), n("dismiss", "choose", a?.data);
-    }, p = (a) => {
-      s.dismiss && s.dismiss.includes(a) ? (l.value = !1, n("dismiss", a)) : a == "backdrop" && (r.value = !0, setTimeout(() => {
-        r.value = !1;
+    }, v = (a) => {
+      l.value = !1, a.handler && a.handler(), r("dismiss", "choose", a?.data);
+    }, d = (a) => {
+      s.dismiss && s.dismiss.includes(a) ? (l.value = !1, r("dismiss", a)) : a == "backdrop" && (n.value = !0, setTimeout(() => {
+        n.value = !1;
       }, 300));
     };
     return o({
-      open: d
-    }), (a, c) => (i(), V(H, {
+      open: p
+    }), (a, c) => (i(), C(F, {
       placement: "center",
       backdrop: !0,
       keepalive: !1,
       visible: l.value,
-      onDismiss: p
+      onDismiss: d
     }, {
-      default: P(() => [
+      default: N(() => [
         $("div", {
-          class: B(["t-alert", { pop: r.value }]),
+          class: B(["t-alert", { pop: n.value }]),
           ref_key: "container",
           ref: u
         }, [
-          g(a.$slots, "header", {}, () => [
-            s.title ? (i(), f("div", Xe, A(s.title), 1)) : z("", !0)
+          b(a.$slots, "header", {}, () => [
+            s.title ? (i(), f("div", Ne, A(s.title), 1)) : I("", !0)
           ], !0),
-          g(a.$slots, "content", {}, () => [
-            $("div", De, A(s.message), 1)
+          b(a.$slots, "content", {}, () => [
+            $("div", Xe, A(s.message), 1)
           ], !0),
-          g(a.$slots, "footer", {}, () => [
-            $("div", We, [
-              (i(!0), f(q, null, U(s.actions, (m) => (i(), V(Y, {
-                color: m.color,
-                variant: m.variant,
-                onClick: (k) => y(m)
+          b(a.$slots, "footer", {}, () => [
+            $("div", De, [
+              (i(!0), f(q, null, G(s.actions, (y) => (i(), C(Z, {
+                color: y.color,
+                variant: y.variant,
+                onPointerup: (w) => v(y)
               }, {
-                default: P(() => [
-                  M(A(m.text), 1)
+                default: N(() => [
+                  M(A(y.text), 1)
                 ]),
                 _: 2
-              }, 1032, ["color", "variant", "onClick"]))), 256))
+              }, 1032, ["color", "variant", "onPointerup"]))), 256))
             ])
           ], !0)
         ], 2)
@@ -270,158 +269,159 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
       _: 3
     }, 8, ["visible"]));
   }
-}), me = /* @__PURE__ */ _(Ne, [["__scopeId", "data-v-fe19a4e9"]]), bo = (t = {}) => ({
+}), me = /* @__PURE__ */ _(We, [["__scopeId", "data-v-9786ec4e"]]), ho = (t = {}) => ({
   open() {
     return new Promise((o) => {
       let e = document.body.querySelector(".t-app");
       if (!e) return;
-      const s = document.createElement("div"), n = v();
+      const s = document.createElement("div"), r = m();
       e.appendChild(s);
       const l = J({
         render() {
           return Q(me, {
             ...t,
-            ref: n,
-            onDismiss: (u, r) => {
+            ref: r,
+            onDismiss: (u, n) => {
               setTimeout(() => {
                 l.unmount(), s.remove();
-              }, 300), o({ type: u, data: r });
+              }, 300), o({ type: u, data: n });
             }
           });
         }
       });
       l.mount(s), setTimeout(() => {
-        n.value?.open?.();
+        r.value?.open?.();
       }, 50);
     });
   }
-}), qe = /* @__PURE__ */ b({
+}), qe = /* @__PURE__ */ h({
   __name: "t-action",
   props: {
-    actions: {},
+    actions: { default: () => [] },
     visible: { type: Boolean, default: !1 },
-    dismiss: {}
+    dismiss: { default: () => [] }
   },
   emits: ["dismiss"],
   setup(t, { expose: o, emit: e }) {
-    const s = t, n = e, l = v(!1), u = v(), r = v(!1), d = () => {
+    const s = t, r = e, l = m(!1), u = m(), n = m(!1), p = () => {
       l.value = !0;
-    }, y = (a) => {
-      l.value = !1, a.handler && a.handler(), n("dismiss", "choose", a?.data);
-    }, p = (a) => {
-      s.dismiss && s.dismiss.includes(a) ? (l.value = !1, n("dismiss", a)) : a == "backdrop" && (r.value = !0, setTimeout(() => {
-        r.value = !1;
+    }, v = () => {
+      l.value = !1;
+    }, d = (c) => {
+      v(), c.handler && c.handler(), r("dismiss", "choose", c?.data);
+    }, a = (c) => {
+      s.dismiss && s.dismiss.includes(c) ? (v(), r("dismiss", c)) : c === "backdrop" && (n.value = !0, setTimeout(() => {
+        n.value = !1;
       }, 300));
     };
-    return N(() => s.visible, (a) => {
-      a ? d() : close();
-    }), o({
-      open: d,
-      close
-    }), (a, c) => (i(), V(H, {
+    return W(() => s.visible, (c) => {
+      c ? p() : v();
+    }, { immediate: !0 }), o({
+      open: p,
+      close: v
+    }), (c, y) => (i(), C(F, {
       placement: "bottom",
       backdrop: !0,
       keepalive: !1,
       visible: l.value,
-      onDismiss: p
+      onDismiss: a
     }, {
-      default: P(() => [
+      default: N(() => [
         $("div", {
-          class: B(["t-action", { pop: r.value }]),
+          class: B(["t-action", { pop: n.value }]),
           ref_key: "container",
           ref: u
         }, [
-          (i(!0), f(q, null, U(s.actions, (m) => (i(), f("div", null, [
-            (i(!0), f(q, null, U(m, (k) => (i(), V(Y, {
-              color: k.color,
-              size: k.size,
-              variant: k.variant,
-              onClick: (h) => y(k),
+          (i(!0), f(q, null, G(s.actions, (w, g) => (i(), f("div", { key: g }, [
+            (i(!0), f(q, null, G(w, (P, k) => (i(), C(Z, {
+              key: P.key ?? `${g}-${k}`,
+              color: P.color,
+              size: P.size,
+              variant: P.variant,
+              onPointerup: (K) => d(P),
               block: ""
             }, {
-              default: P(() => [
-                M(A(k.text), 1)
+              default: N(() => [
+                M(A(P.text), 1)
               ]),
               _: 2
-            }, 1032, ["color", "size", "variant", "onClick"]))), 256))
-          ]))), 256))
+            }, 1032, ["color", "size", "variant", "onPointerup"]))), 128))
+          ]))), 128))
         ], 2)
       ]),
       _: 1
     }, 8, ["visible"]));
   }
-}), Me = /* @__PURE__ */ _(qe, [["__scopeId", "data-v-7db152ee"]]), ho = (t = {}) => ({
+}), Me = /* @__PURE__ */ _(qe, [["__scopeId", "data-v-c3900ce1"]]), ko = (t = {}) => ({
   open() {
     return new Promise((o) => {
       let e = document.body.querySelector(".t-app");
       if (!e) return;
-      const s = document.createElement("div"), n = v();
+      const s = document.createElement("div"), r = m();
       e.appendChild(s);
       const l = J({
         render() {
           return Q(Me, {
             ...t,
-            ref: n,
-            onDismiss: (u, r) => {
+            ref: r,
+            onDismiss: (u, n) => {
               setTimeout(() => {
                 l.unmount(), s.remove();
-              }, 300), o({ type: u, data: r });
+              }, 300), o({ type: u, data: n });
             }
           });
         }
       });
       l.mount(s), setTimeout(() => {
-        n.value?.open?.();
+        r.value?.open?.();
       }, 50);
     });
   }
-}), Le = { class: "t-loading" }, He = /* @__PURE__ */ b({
+}), Le = { class: "t-loading" }, He = /* @__PURE__ */ h({
   __name: "t-loading",
   props: {
     type: { default: "spinner" }
   },
   emits: ["dismiss"],
   setup(t, { expose: o, emit: e }) {
-    const s = t, n = v(!1);
+    const s = m(!1);
     return o({
       open: () => {
-        n.value = !0;
+        s.value = !0;
       },
       close: () => {
-        n.value = !1;
+        s.value = !1;
       }
-    }), (r, d) => (i(), V(H, {
+    }), (u, n) => (i(), C(F, {
       placement: "center",
       backdrop: !0,
       keepalive: !1,
-      visible: n.value
+      visible: s.value
     }, {
-      default: P(() => [
+      default: N(() => [
         $("div", Le, [
-          g(r.$slots, "default", {}, () => [
-            G(Z, {
-              type: s.type
-            }, null, 8, ["type"])
+          b(u.$slots, "default", {}, () => [
+            u.type === "spinner" ? (i(), C(ne, { key: 0 })) : I("", !0)
           ], !0)
         ])
       ]),
       _: 3
     }, 8, ["visible"]));
   }
-}), Fe = /* @__PURE__ */ _(He, [["__scopeId", "data-v-8f84c14e"]]), ko = (t = {}) => {
-  const o = v(), e = document.body.querySelector(".t-app");
-  let s = null, n = null;
+}), ve = /* @__PURE__ */ _(He, [["__scopeId", "data-v-598c3462"]]), $o = (t = {}) => {
+  const o = m(), e = document.body.querySelector(".t-app");
+  let s = null, r = null;
   return {
     open() {
       return new Promise((l) => {
-        e && (n = document.createElement("div"), e.appendChild(n), s = J({
+        e && (r = document.createElement("div"), e.appendChild(r), s = J({
           render() {
-            return Q(Fe, {
+            return Q(ve, {
               ...t,
               ref: o
             });
           }
-        }), s.mount(n), setTimeout(() => {
+        }), s.mount(r), setTimeout(() => {
           o.value?.open?.(), l(!0);
         }, 50));
       });
@@ -429,36 +429,36 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
     close() {
       return new Promise((l) => {
         o.value?.close?.(), setTimeout(() => {
-          s?.unmount?.(), n?.remove?.(), l(!0);
+          s?.unmount?.(), r?.remove?.(), l(!0);
         }, 300);
       });
     }
   };
-}, ie = v(1e3), Ke = {
+}, ce = m(1e3), Fe = {
   getNewIndex() {
-    return ie.value += 2, ie.value;
+    return ce.value += 2, ce.value;
   }
-}, X = ue([]), ee = v(!0), I = v(!1), R = v(-1), C = w(() => X[R.value]), L = w(() => X[R.value + 1] || void 0), E = w(() => X[X.length - 2]), ve = w(() => !I.value && ee.value && E.value), D = (t = !0) => {
-  let e = C.value.target.closest(".t-app").offsetWidth;
+}, X = ie([]), Y = m(!0), E = m(!1), R = m(-1), z = x(() => X[R.value]), L = x(() => X[R.value + 1] || void 0), V = x(() => X[X.length - 2]), ye = x(() => !E.value && Y.value && V.value), D = (t = !0) => {
+  let e = z.value.target.closest(".t-app").offsetWidth;
   return t ? e + "px" : e;
-}, te = {
+}, ee = {
   reset() {
-    I.value = !0;
-    const t = D(), o = C.value.target, e = E.value.target;
+    E.value = !0;
+    const t = D(), o = z.value.target, e = V.value.target;
     o.style.transition = "transform 0.35s ease", o.style.transform = "translateX(0px)", e.style.transition = "transform 0.35s ease", e.style.transform = `translateX(calc(${t} / 100 * 30 * -1)) scale(0.5) perspective(${t}) rotateY(30deg)`, document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0.35s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0.5"), setTimeout(() => {
-      I.value = !1;
+      E.value = !1;
     }, 400);
   },
   move(t) {
-    if (!ve.value) return;
-    const o = D(!1), e = o + "px", s = t / o * 100, n = C.value.target, l = E.value.target;
-    t > 15 && t <= o && (n.style.transition = "transform 0s ease", n.style.transform = `translateX(${t}px)`, l.style.transition = "transform 0s ease", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0s"), l.style.transform = `translateX(calc((${e} / 100 * 30 * -1) + ((${e} / 100 * 30) / 100 * ${s}))) scale(${0.5 + 0.5 / 100 * s}) perspective(${e}) rotateY(${30 - 30 / 100 * s}deg)`, document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", `${0.5 - 0.5 / 100 * s}`));
+    if (!ye.value) return;
+    const o = D(!1), e = o + "px", s = t / o * 100, r = z.value.target, l = V.value.target;
+    t > 15 && t <= o && (r.style.transition = "transform 0s ease", r.style.transform = `translateX(${t}px)`, l.style.transition = "transform 0s ease", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0s"), l.style.transform = `translateX(calc((${e} / 100 * 30 * -1) + ((${e} / 100 * 30) / 100 * ${s}))) scale(${0.5 + 0.5 / 100 * s}) perspective(${e}) rotateY(${30 - 30 / 100 * s}deg)`, document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", `${0.5 - 0.5 / 100 * s}`));
   },
   back(t) {
-    if (!E.value) return;
+    if (!V.value) return;
     const o = D();
-    C.value.target.style.transition = "transform 0.35s ease", C.value.target.style.transform = `translateX(${o}) scale(1)`, E.value.target.style.transition = "transform 0.35s ease", E.value.target.style.transform = `translateX(0px) scale(1) perspective(${o}) rotateY(0deg)`, document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0.35s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0"), I.value = !0, setTimeout(() => {
-      le(), I.value = !1, R.value -= 1, t && t();
+    z.value.target.style.transition = "transform 0.35s ease", z.value.target.style.transform = `translateX(${o}) scale(1)`, V.value.target.style.transition = "transform 0.35s ease", V.value.target.style.transform = `translateX(0px) scale(1) perspective(${o}) rotateY(0deg)`, document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0.35s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0"), E.value = !0, setTimeout(() => {
+      ae(), E.value = !1, R.value -= 1, t && t();
     }, 400);
   },
   next(t) {
@@ -467,31 +467,31 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
       R.value += 1, t && t();
       return;
     }
-    I.value = !0;
+    E.value = !0;
     const o = L.value.target, e = D();
     o.style.transform = `translateX(${e})`, o.transitionOrigin = "center", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0"), setTimeout(() => {
-      o.style.transition = "transform 0.35s ease", o.style.transform = "translateX(0px)", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0.35s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0.5"), C.value && (C.value.target.style.transitionOrigin = "left center", C.value.target.style.transition = "transform 0.35s ease", C.value.target.style.transform = `translateX(calc(${e} / 100 * 30 * -1)) scale(0.5) perspective(${e}) rotateY(30deg)`), setTimeout(() => {
-        I.value = !1, R.value += 1, t && t();
+      o.style.transition = "transform 0.35s ease", o.style.transform = "translateX(0px)", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0.35s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0.5"), z.value && (z.value.target.style.transitionOrigin = "left center", z.value.target.style.transition = "transform 0.35s ease", z.value.target.style.transform = `translateX(calc(${e} / 100 * 30 * -1)) scale(0.5) perspective(${e}) rotateY(30deg)`), setTimeout(() => {
+        E.value = !1, R.value += 1, t && t();
       }, 400);
     }, 100);
   }
-}, oe = {
+}, te = {
   reset() {
-    I.value = !0;
-    const t = D(), o = C.value.target, e = E.value.target;
+    E.value = !0;
+    const t = D(), o = z.value.target, e = V.value.target;
     o.style.transition = "transform 0.35s ease", o.style.transform = "translateX(0px)", e.style.transition = "transform 0.35s ease", e.style.transform = `translateX(calc(${t} / 100 * 30 * -1))`, document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0.35s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0.5"), setTimeout(() => {
-      I.value = !1;
+      E.value = !1;
     }, 400);
   },
   move(t) {
-    const o = D(!1), e = o + "px", s = t / o * 100, n = C.value.target, l = E.value.target;
-    t > 15 && t <= o && (n.style.transition = "transform 0s ease", n.style.transform = `translateX(${t}px)`, l.style.transition = "transform 0s ease", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0s"), l.style.transform = `translateX(calc((${e} / 100 * 30 * -1) + ((${e} / 100 * 30) / 100 * ${s})))`, document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", `${0.5 - 0.5 / 100 * s}`));
+    const o = D(!1), e = o + "px", s = t / o * 100, r = z.value.target, l = V.value.target;
+    t > 15 && t <= o && (r.style.transition = "transform 0s ease", r.style.transform = `translateX(${t}px)`, l.style.transition = "transform 0s ease", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0s"), l.style.transform = `translateX(calc((${e} / 100 * 30 * -1) + ((${e} / 100 * 30) / 100 * ${s})))`, document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", `${0.5 - 0.5 / 100 * s}`));
   },
   back(t) {
-    if (!E.value) return;
+    if (!V.value) return;
     const o = D();
-    C.value.target.style.transition = "transform 0.35s ease", C.value.target.style.transform = `translateX(${o}) scale(1)`, E.value.target.style.transition = "transform 0.35s ease", E.value.target.style.transform = "translateX(0px)", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0.35s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0"), I.value = !0, setTimeout(() => {
-      le(), I.value = !1, R.value -= 1, t && t();
+    z.value.target.style.transition = "transform 0.35s ease", z.value.target.style.transform = `translateX(${o}) scale(1)`, V.value.target.style.transition = "transform 0.35s ease", V.value.target.style.transform = "translateX(0px)", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0.35s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0"), E.value = !0, setTimeout(() => {
+      ae(), E.value = !1, R.value -= 1, t && t();
     }, 400);
   },
   next(t) {
@@ -500,53 +500,53 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
       R.value += 1, t && t();
       return;
     }
-    I.value = !0;
+    E.value = !0;
     const o = L.value.target, e = D();
     o.style.transform = `translateX(${e})`, o.transitionOrigin = "center", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0"), setTimeout(() => {
-      o.style.transition = "transform 0.35s ease", o.style.transform = "translateX(0px)", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0.35s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0.5"), C.value && (C.value.target.style.transitionOrigin = "left center", C.value.target.style.transition = "transform 0.35s ease", C.value.target.style.transform = `translateX(calc(${e} / 100 * 30 * -1))`), setTimeout(() => {
-        I.value = !1, R.value += 1, t && t();
+      o.style.transition = "transform 0.35s ease", o.style.transform = "translateX(0px)", document.documentElement.style.setProperty("--t-screen-backdrop-duration", "0.35s"), document.documentElement.style.setProperty("--t-swipe-backdrop-opacity", "0.5"), z.value && (z.value.target.style.transitionOrigin = "left center", z.value.target.style.transition = "transform 0.35s ease", z.value.target.style.transform = `translateX(calc(${e} / 100 * 30 * -1))`), setTimeout(() => {
+        E.value = !1, R.value += 1, t && t();
       }, 400);
     }, 100);
   }
-}, Ue = (t) => {
+}, Ke = (t) => {
   X.push(t);
-}, je = (t, o) => {
+}, Ue = (t, o) => {
   X[t].target = o;
-}, le = (t) => {
+}, ae = (t) => {
   t || X.pop();
-}, Ge = () => {
+}, je = () => {
   X.splice(0, X.length);
+}, Ge = () => {
+  Y.value = !1;
 }, Je = () => {
-  ee.value = !1;
-}, Qe = () => {
-  ee.value = !0;
+  Y.value = !0;
+}, Qe = (t, o) => {
+  t == "scale" && ee.next(o), t == "transform" && te.next(o);
 }, Ze = (t, o) => {
-  t == "scale" && te.next(o), t == "transform" && oe.next(o);
+  t == "scale" && ee.back(o), t == "transform" && te.back(o);
 }, Ye = (t, o) => {
-  t == "scale" && te.back(o), t == "transform" && oe.back(o);
-}, et = (t, o) => {
-  t == "scale" && te.move(o), t == "transform" && oe.move(o);
-}, tt = (t) => {
-  t == "scale" && te.reset(), t == "transform" && oe.reset();
+  t == "scale" && ee.move(o), t == "transform" && te.move(o);
+}, et = (t) => {
+  t == "scale" && ee.reset(), t == "transform" && te.reset();
 }, S = {
-  isBusy: I,
-  isSwipeable: ve,
-  reset: tt,
-  next: Ze,
-  back: Ye,
-  move: et,
+  isBusy: E,
+  isSwipeable: ye,
+  reset: et,
+  next: Qe,
+  back: Ze,
+  move: Ye,
   screens: X,
-  addScreen: Ue,
-  addScreenEl: je,
-  removeScreen: le,
-  removeAllScreen: Ge,
-  lockSwipe: Je,
-  unlockSwipe: Qe,
-  swipeable: ee,
-  currentScreen: C,
-  lastScreen: E,
+  addScreen: Ke,
+  addScreenEl: Ue,
+  removeScreen: ae,
+  removeAllScreen: je,
+  lockSwipe: Ge,
+  unlockSwipe: Je,
+  swipeable: Y,
+  currentScreen: z,
+  lastScreen: V,
   nextScreen: L
-}, ot = { class: "t-toast-content" }, st = /* @__PURE__ */ b({
+}, tt = { class: "t-toast-content" }, ot = /* @__PURE__ */ h({
   __name: "t-toast",
   props: {
     message: {},
@@ -558,19 +558,19 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
   },
   emits: ["dismiss"],
   setup(t, { expose: o, emit: e }) {
-    const s = t, n = e, l = v(!1), u = v(!1), r = v(!1), d = () => {
-      u.value = !0, r.value = !1, setTimeout(() => {
+    const s = t, r = e, l = m(!1), u = m(!1), n = m(!1), p = () => {
+      u.value = !0, n.value = !1, setTimeout(() => {
         l.value = !0;
       }, 10);
-    }, y = () => {
-      r.value = !0, setTimeout(() => {
-        u.value = !1, l.value = !1, n("dismiss");
+    }, v = () => {
+      n.value = !0, setTimeout(() => {
+        u.value = !1, l.value = !1, r("dismiss");
       }, 300);
     };
-    N(() => s.visible, (a) => {
-      a ? d() : y();
+    W(() => s.visible, (a) => {
+      a ? p() : v();
     });
-    const p = w(() => {
+    const d = x(() => {
       let a;
       return s.variant == "default" && (s.color ? ["warning", "info", "danger", "primary", "secondary", "success"].includes(s.color) ? a = {
         "--border": "none",
@@ -611,73 +611,73 @@ const Ee = /* @__PURE__ */ _(Ce, [["render", ze]]), Ve = /* @__PURE__ */ b({
       }), a;
     });
     return o({
-      open: d,
-      close: y
+      open: p,
+      close: v
     }), (a, c) => u.value ? (i(), f("div", {
       key: 0,
-      class: B(["t-toast", { [s.placement]: !0, open: l.value, closing: r.value }]),
-      style: x({ "--space": s.space, ...p.value })
+      class: B(["t-toast", { [s.placement]: !0, open: l.value, closing: n.value }]),
+      style: T({ "--space": s.space, ...d.value })
     }, [
-      g(a.$slots, "content", {}, () => [
-        $("div", ot, A(s.message), 1)
+      b(a.$slots, "content", {}, () => [
+        $("div", tt, A(s.message), 1)
       ], !0)
-    ], 6)) : z("", !0);
+    ], 6)) : I("", !0);
   }
-}), ye = /* @__PURE__ */ _(st, [["__scopeId", "data-v-2802d43f"]]), $o = (t = {}) => ({
+}), _e = /* @__PURE__ */ _(ot, [["__scopeId", "data-v-bac1506b"]]), xo = (t = {}) => ({
   open() {
     let o = document.body.querySelector(".t-app");
     if (!o) return;
-    const e = document.createElement("div"), s = v();
+    const e = document.createElement("div"), s = m();
     o.appendChild(e);
-    const n = J({
+    const r = J({
       render() {
-        return Q(ye, {
+        return Q(_e, {
           ...t,
           ref: s,
           onDismiss: () => {
             setTimeout(() => {
-              n.unmount(), e.remove();
+              r.unmount(), e.remove();
             }, 300);
           }
         });
       }
     });
-    n.mount(e), setTimeout(() => {
+    r.mount(e), setTimeout(() => {
       s.value?.open?.(), setTimeout(() => {
         s.value?.close?.();
       }, t.duration + 10);
     }, 50);
   }
-}), nt = v(0);
-function _e() {
+}), st = m(0);
+function ge() {
   return {
-    height: nt
+    height: st
   };
 }
-const rt = /* @__PURE__ */ b({
+const rt = /* @__PURE__ */ h({
   __name: "t-cable",
   props: {
     keyboard: { type: Boolean, default: !1 },
     placement: { default: "bottom" }
   },
   setup(t) {
-    const o = t, { height: e } = _e();
+    const o = t, { height: e } = ge();
     return de("cableState", {
       placement: o.placement
-    }), (s, n) => (i(), f("div", {
+    }), (s, r) => (i(), f("div", {
       class: B(["t-cable", { keyboard: o.keyboard && O(e) > 0, [o.placement]: !0 }]),
-      style: x({ "--t-keyboard-height": O(e) + "px", "--t-keyboard-transition": O(e) > 0 ? "0.3s" : "0.1s" })
+      style: T({ "--t-keyboard-height": O(e) + "px", "--t-keyboard-transition": O(e) > 0 ? "0.3s" : "0.1s" })
     }, [
-      g(s.$slots, "default", {}, void 0, !0)
+      b(s.$slots, "default", {}, void 0, !0)
     ], 6));
   }
-}), at = /* @__PURE__ */ _(rt, [["__scopeId", "data-v-27e0d794"]]), lt = /* @__PURE__ */ b({
+}), nt = /* @__PURE__ */ _(rt, [["__scopeId", "data-v-27e0d794"]]), at = /* @__PURE__ */ h({
   __name: "t-card",
   props: {
     color: { default: null }
   },
   setup(t) {
-    const o = t, e = w(() => {
+    const o = t, e = x(() => {
       let s;
       return o.color ? ["warning", "info", "danger", "primary", "secondary", "success"].includes(o.color) ? s = {
         "--background": "var(--t-color-status-" + o.color + ")"
@@ -687,20 +687,20 @@ const rt = /* @__PURE__ */ b({
         "--background": "var(--t-color-surface)"
       }, s;
     });
-    return (s, n) => (i(), f("div", {
+    return (s, r) => (i(), f("div", {
       class: "t-card",
-      style: x(e.value)
+      style: T(e.value)
     }, [
-      g(s.$slots, "default")
+      b(s.$slots, "default")
     ], 4));
   }
-}), ct = {}, it = { class: "t-content" };
-function ut(t, o) {
-  return i(), f("div", it, [
-    g(t.$slots, "default", {}, void 0, !0)
+}), lt = {}, ct = { class: "t-content" };
+function it(t, o) {
+  return i(), f("div", ct, [
+    b(t.$slots, "default", {}, void 0, !0)
   ]);
 }
-const ge = /* @__PURE__ */ _(ct, [["render", ut], ["__scopeId", "data-v-ce0031a0"]]), dt = /* @__PURE__ */ b({
+const ut = /* @__PURE__ */ _(lt, [["render", it], ["__scopeId", "data-v-ce0031a0"]]), dt = /* @__PURE__ */ h({
   __name: "t-refresher",
   props: {
     threshold: { default: 120 },
@@ -709,19 +709,19 @@ const ge = /* @__PURE__ */ _(ct, [["render", ut], ["__scopeId", "data-v-ce0031a0
   },
   emits: ["refresh", "move", "cancel", "start"],
   setup(t, { emit: o }) {
-    const e = o, s = t, n = v(0), l = v(!1), u = v();
-    let r, d = !1;
-    const y = () => {
-      l.value = !1, n.value = 0, d = !1;
-    }, p = () => {
-      d = !0, l.value = !0, n.value = s.threshold, e("refresh", y);
+    const e = o, s = t, r = m(0), l = m(!1), u = m();
+    let n, p = !1;
+    const v = () => {
+      l.value = !1, r.value = 0, p = !1;
+    }, d = () => {
+      p = !0, l.value = !0, r.value = s.threshold, e("refresh", v);
     }, a = () => {
-      n.value = 0, l.value = !1, d = !1, e("cancel");
+      r.value = 0, l.value = !1, p = !1, e("cancel");
     };
-    return N(() => u.value, () => {
-      r && r.destroy();
+    return W(() => u.value, () => {
+      n && n.destroy();
       let c = u.value.closest(".t-content");
-      c && (r = ae(c, {
+      c && (n = re(c, {
         options: {
           minMove: 20
         },
@@ -729,49 +729,49 @@ const ge = /* @__PURE__ */ _(ct, [["render", ut], ["__scopeId", "data-v-ce0031a0
           return !(c.scrollTop > 0);
         },
         down() {
-          l.value || d || e("start");
+          l.value || p || e("start");
         },
-        move({ deltaY: m, initialDirection: k }) {
-          if (l.value || d || k != "down") return;
-          if (s.variant == "max" && m >= s.threshold) {
-            p();
+        move({ deltaY: y, initialDirection: w }) {
+          if (l.value || p || w != "down") return;
+          if (s.variant == "max" && y >= s.threshold) {
+            d();
             return;
           }
-          const h = m < 0 ? 0 : m;
-          n.value = h, e("move", h);
+          const g = y < 0 ? 0 : y;
+          r.value = g, e("move", g);
         },
-        up({ deltaY: m, initialDirection: k }) {
-          l.value || d || k != "down" || (s.variant == "up" && m >= s.threshold ? p() : a());
+        up({ deltaY: y, initialDirection: w }) {
+          l.value || p || w != "down" || (s.variant == "up" && y >= s.threshold ? d() : a());
         },
         cancel() {
-          l.value || d || a();
+          l.value || p || a();
         }
       }, {
         passive: !1
       }));
-    }), re(() => {
-      r && r.destroy();
-    }), (c, m) => F((i(), f("div", {
+    }), se(() => {
+      n && n.destroy();
+    }), (c, y) => U((i(), f("div", {
       class: B(["t-refresher", { safe: c.safe }]),
       ref_key: "container",
       ref: u
     }, [
-      g(c.$slots, "default", {
-        offset: n.value,
+      b(c.$slots, "default", {
+        offset: r.value,
         refreshing: l.value
       }, void 0, !0)
     ], 2)), [
-      [K, n.value > 0]
+      [j, r.value > 0]
     ]);
   }
 }), pt = /* @__PURE__ */ _(dt, [["__scopeId", "data-v-c77146a5"]]), ft = {}, mt = { class: "t-screen" };
 function vt(t, o) {
   return i(), f("div", mt, [
-    g(t.$slots, "default", {}, void 0, !0)
+    b(t.$slots, "default", {}, void 0, !0)
   ]);
 }
-const be = /* @__PURE__ */ _(ft, [["render", vt], ["__scopeId", "data-v-c2a3436c"]]), yt = /* @__PURE__ */ b({
-  __name: "t-swipe-screen",
+const be = /* @__PURE__ */ _(ft, [["render", vt], ["__scopeId", "data-v-c2a3436c"]]), yt = /* @__PURE__ */ h({
+  __name: "t-screen-router",
   props: {
     variant: { default: "scale" },
     router: {},
@@ -780,72 +780,72 @@ const be = /* @__PURE__ */ _(ft, [["render", vt], ["__scopeId", "data-v-c2a3436c
   emits: ["change"],
   setup(t, { emit: o }) {
     let e = {};
-    const s = o, n = t;
+    const s = o, r = t;
     let l;
-    const u = n.router || fe(), r = n.route || we(), d = u.getRoutes(), y = v();
-    for (let c of d)
+    const u = r.router || fe(), n = r.route || Te(), p = u.getRoutes(), v = m();
+    for (let c of p)
       e[c.name] = c.component || c.components;
-    const p = (c) => {
+    const d = (c) => {
       c && S.addScreen({
         name: c,
         target: null,
         component: $e(e[c] || null)
       });
-    }, a = (c, m) => {
-      !m || S.screens[c].target || (S.addScreenEl(c, m.$el), S.nextScreen && S.next(n.variant, () => {
+    }, a = (c, y) => {
+      !y || S.screens[c].target || (S.addScreenEl(c, y.$el), S.nextScreen && S.next(r.variant, () => {
         s("change");
       }));
     };
-    return N(() => r.name, (c, m) => {
-      c != S.currentScreen.value?.name && (S.lastScreen.value?.name == c ? S.back(n.variant, () => {
+    return W(() => n.name, (c, y) => {
+      c != S.currentScreen.value?.name && (S.lastScreen.value?.name == c ? S.back(r.variant, () => {
         s("change");
-      }) : p(r.name));
-    }), j(() => {
-      p(r.name), l = ae(document.body, {
+      }) : d(n.name));
+    }), H(() => {
+      d(n.name), l = re(document.body, {
         beforeEvent(c) {
           return !!S.isSwipeable.value;
         },
         fast({ initialDirection: c }) {
           S.lastScreen.value && c == "right" && u.back();
         },
-        move({ deltaX: c, initialDirection: m }) {
-          m == "right" && S.move(n.variant, c);
+        move({ deltaX: c, initialDirection: y }) {
+          y == "right" && S.move(r.variant, c);
         },
-        up({ deltaX: c, initialDirection: m }) {
-          if (m != "right") {
-            S.reset(n.variant);
+        up({ deltaX: c, initialDirection: y }) {
+          if (y != "right") {
+            S.reset(r.variant);
             return;
           }
-          const k = y.value.offsetParent.offsetWidth;
-          c / k * 100 >= 50 ? u.back() : S.reset(n.variant);
+          const w = v.value.offsetParent.offsetWidth;
+          c / w * 100 >= 50 ? u.back() : S.reset(r.variant);
         },
         cancel() {
-          S.reset(n.variant);
+          S.reset(r.variant);
         }
       });
-    }), re(() => {
+    }), se(() => {
       l && l.destroy(), S.removeAllScreen();
-    }), (c, m) => (i(), f(q, null, [
-      (i(!0), f(q, null, U(O(S).screens, (k, h) => (i(), V(be, {
+    }), (c, y) => (i(), f(q, null, [
+      (i(!0), f(q, null, G(O(S).screens, (w, g) => (i(), C(be, {
         ref_for: !0,
-        ref: (W) => a(h, W),
-        style: x({ zIndex: h + (h == O(S).screens.length - 1 ? 2 : 1) }),
-        key: h
+        ref: (P) => a(g, P),
+        style: T({ zIndex: g + (g == O(S).screens.length - 1 ? 2 : 1) }),
+        key: g
       }, {
-        default: P(() => [
-          (i(), V(ke(k.component.default)))
+        default: N(() => [
+          (i(), C(ke(w.component.default)))
         ]),
         _: 2
       }, 1032, ["style"]))), 128)),
       $("div", {
-        class: "t-swipe-backdrop",
+        class: "t-screen-router-backdrop",
         ref_key: "backdrop",
-        ref: y,
-        style: x({ zIndex: O(S).screens.length })
+        ref: v,
+        style: T({ zIndex: O(S).screens.length })
       }, null, 4)
     ], 64));
   }
-}), _t = /* @__PURE__ */ _(yt, [["__scopeId", "data-v-4d584b03"]]), gt = /* @__PURE__ */ b({
+}), _t = /* @__PURE__ */ _(yt, [["__scopeId", "data-v-2d6fbfe1"]]), gt = /* @__PURE__ */ h({
   __name: "t-toolbar",
   props: {
     placement: { default: null },
@@ -853,24 +853,24 @@ const be = /* @__PURE__ */ _(ft, [["render", vt], ["__scopeId", "data-v-c2a3436c
     size: { default: "50px" }
   },
   setup(t) {
-    const o = t, e = pe("cableState"), s = w(() => o?.placement || e?.placement);
-    return (n, l) => (i(), f("div", {
+    const o = t, e = pe("cableState"), s = x(() => o?.placement || e?.placement);
+    return (r, l) => (i(), f("div", {
       class: B(["t-toolbar", { [s.value]: !0, safe: o.safe }]),
-      style: x({ "--t-size-toolbar": o.size })
+      style: T({ "--t-size-toolbar": o.size })
     }, [
       $("div", null, [
-        g(n.$slots, "default", {}, void 0, !0)
+        b(r.$slots, "default", {}, void 0, !0)
       ])
     ], 6));
   }
-}), bt = /* @__PURE__ */ _(gt, [["__scopeId", "data-v-1ee9866d"]]), ht = /* @__PURE__ */ b({
+}), bt = /* @__PURE__ */ _(gt, [["__scopeId", "data-v-1ee9866d"]]), ht = /* @__PURE__ */ h({
   __name: "t-back-button",
   props: {
     to: {},
     router: {}
   },
   setup(t) {
-    const o = t, e = Te(), s = o.router || fe(), n = (l) => {
+    const o = t, e = xe(), s = o.router || fe(), r = (l) => {
       if (e.onBack) {
         e.onBack(l);
         return;
@@ -880,35 +880,35 @@ const be = /* @__PURE__ */ _(ft, [["render", vt], ["__scopeId", "data-v-c2a3436c
     return (l, u) => l.to || O(S).lastScreen ? (i(), f("button", {
       key: 0,
       class: "t-back-button",
-      onClick: n
+      onPointerup: r
     }, [
-      g(l.$slots, "default", {}, () => [
+      b(l.$slots, "default", {}, () => [
         u[0] || (u[0] = $("i", { class: "ri-arrow-left-s-line" }, null, -1))
       ], !0)
-    ])) : z("", !0);
+    ], 32)) : I("", !0);
   }
-}), kt = /* @__PURE__ */ _(ht, [["__scopeId", "data-v-437fb635"]]), $t = /* @__PURE__ */ b({
+}), kt = /* @__PURE__ */ _(ht, [["__scopeId", "data-v-eb92b1fe"]]), $t = /* @__PURE__ */ h({
   __name: "t-text",
   props: {
     color: { default: "var(--t-color-text)" },
     size: { default: "standard" }
   },
   setup(t) {
-    const o = t, e = w(() => {
-      let s, n = o.color;
-      return o.size == "standard" ? s = "var(--t-fs-10)" : o.size == "small" ? s = "var(--t-fs-08)" : o.size == "large" ? s = "var(--t-fs-12)" : s = o.size, ["warning", "info", "danger", "primary", "secondary", "success"].includes(o.color) && (n = `var(--t-color-status-${o.color})`), {
-        "--color": n,
+    const o = t, e = x(() => {
+      let s, r = o.color;
+      return o.size == "standard" ? s = "var(--t-fs-10)" : o.size == "small" ? s = "var(--t-fs-08)" : o.size == "large" ? s = "var(--t-fs-12)" : s = o.size, ["warning", "info", "danger", "primary", "secondary", "success"].includes(o.color) && (r = `var(--t-color-status-${o.color})`), {
+        "--color": r,
         "--font-size": s
       };
     });
-    return (s, n) => (i(), f("span", {
+    return (s, r) => (i(), f("span", {
       class: "t-text",
-      style: x(e.value)
+      style: T(e.value)
     }, [
-      g(s.$slots, "default", {}, void 0, !0)
+      b(s.$slots, "default", {}, void 0, !0)
     ], 4));
   }
-}), ne = /* @__PURE__ */ _($t, [["__scopeId", "data-v-f0f94f05"]]), Tt = /* @__PURE__ */ b({
+}), oe = /* @__PURE__ */ _($t, [["__scopeId", "data-v-f0f94f05"]]), xt = /* @__PURE__ */ h({
   __name: "t-gesture-indicator",
   props: {
     placement: { default: "bottom" }
@@ -918,7 +918,7 @@ const be = /* @__PURE__ */ _(ft, [["render", vt], ["__scopeId", "data-v-c2a3436c
       class: B(["t-gesture-indicator", { [o.placement]: !0 }])
     }, null, 2));
   }
-}), he = /* @__PURE__ */ _(Tt, [["__scopeId", "data-v-ed8f7308"]]), wt = /* @__PURE__ */ b({
+}), he = /* @__PURE__ */ _(xt, [["__scopeId", "data-v-ed8f7308"]]), Tt = /* @__PURE__ */ h({
   __name: "t-sheet",
   props: {
     background: { default: "var(--t-color-surface)" },
@@ -937,22 +937,22 @@ const be = /* @__PURE__ */ _(ft, [["render", vt], ["__scopeId", "data-v-c2a3436c
   },
   emits: ["dismiss"],
   setup(t, { emit: o }) {
-    const e = t, s = o, n = v(), l = v(), u = v(!1);
-    let r = null;
-    const d = w(() => {
+    const e = t, s = o, r = m(), l = m(), u = m(!1);
+    let n = null;
+    const p = x(() => {
       if (e.placement == "bottom") return "down";
       if (e.placement == "top") return "up";
       if (e.placement == "left") return "left";
       if (e.placement == "right") return "right";
-    }), y = (a) => {
+    }), v = (a) => {
       s("dismiss", a);
-    }, p = () => {
+    }, d = () => {
       u.value = !0, setTimeout(() => {
         u.value = !1;
       }, 300);
     };
-    return N(() => n.value, (a) => {
-      a && (r = ae(n.value, {
+    return W(() => r.value, (a) => {
+      a && (n = re(r.value, {
         isMoving: !1,
         options: {
           minDist: 30
@@ -964,31 +964,31 @@ const be = /* @__PURE__ */ _(ft, [["render", vt], ["__scopeId", "data-v-c2a3436c
           this.isMoving = !1;
         },
         fast({ initialDirection: c }) {
-          p(), c == d.value ? s("dismiss", "gesture") : l.value.open();
+          d(), c == p.value ? s("dismiss", "gesture") : l.value.open();
         },
-        move({ deltaY: c, deltaX: m, initialDirection: k }) {
-          if (k != d.value) return;
-          let h = 0;
-          e.placement == "bottom" || e.placement == "top" ? h = c : h = m, e.placement == "bottom" && (h = c > 0 ? c : 0), e.placement == "top" && (h = c < 0 ? c : 0), e.placement == "left" && (h = m < 0 ? m : 0), e.placement == "right" && (h = m > 0 ? m : 0), (e.placement == "bottom" && (h >= 10 || this.isMoving) || e.placement == "top" && (h <= -10 || this.isMoving) || e.placement == "left" && (h <= -10 || this.isMoving) || e.placement == "right" && (h >= 10 || this.isMoving)) && (this.isMoving = !0, l.value.render({
-            contentTransform: h + "px",
+        move({ deltaY: c, deltaX: y, initialDirection: w }) {
+          if (w != p.value) return;
+          let g = 0;
+          e.placement == "bottom" || e.placement == "top" ? g = c : g = y, e.placement == "bottom" && (g = c > 0 ? c : 0), e.placement == "top" && (g = c < 0 ? c : 0), e.placement == "left" && (g = y < 0 ? y : 0), e.placement == "right" && (g = y > 0 ? y : 0), (e.placement == "bottom" && (g >= 10 || this.isMoving) || e.placement == "top" && (g <= -10 || this.isMoving) || e.placement == "left" && (g <= -10 || this.isMoving) || e.placement == "right" && (g >= 10 || this.isMoving)) && (this.isMoving = !0, l.value.render({
+            contentTransform: g + "px",
             transition: "0s"
           }));
         },
-        up({ deltaY: c, deltaX: m, initialDirection: k }) {
-          if (this.isMoving = !1, p(), k != d.value) {
+        up({ deltaY: c, deltaX: y, initialDirection: w }) {
+          if (this.isMoving = !1, d(), w != p.value) {
             l.value.open();
             return;
           }
-          let h, W, T;
-          e.placement == "bottom" || e.placement == "top" ? (h = n.value.offsetHeight, T = c) : (h = n.value.offsetWidth, T = m), W = T / h * 100, W > 50 ? s("dismiss", "gesture") : l.value.open();
+          let g, P, k;
+          e.placement == "bottom" || e.placement == "top" ? (g = r.value.offsetHeight, k = c) : (g = r.value.offsetWidth, k = y), P = k / g * 100, P > 50 ? s("dismiss", "gesture") : l.value.open();
         },
         cancel() {
-          this.isMoving = !1, p(), l.value.open();
+          this.isMoving = !1, d(), l.value.open();
         }
       }));
-    }), re(() => {
-      r && r.destroy();
-    }), (a, c) => (i(), V(H, {
+    }), se(() => {
+      n && n.destroy();
+    }), (a, c) => (i(), C(F, {
       ref_key: "present",
       ref: l,
       duration: e.duration,
@@ -998,27 +998,27 @@ const be = /* @__PURE__ */ _(ft, [["render", vt], ["__scopeId", "data-v-c2a3436c
       backdrop: a.backdrop,
       visible: e.visible,
       keepalive: e.keepalive,
-      onDismiss: y,
-      style: x(e.style)
+      onDismiss: v,
+      style: T(e.style)
     }, {
-      default: P(() => [
-        e.gesture && e.indicator && e.placement != "center" ? (i(), V(he, {
+      default: N(() => [
+        e.gesture && e.indicator && e.placement != "center" ? (i(), C(he, {
           key: 0,
           placement: e.placement
-        }, null, 8, ["placement"])) : z("", !0),
+        }, null, 8, ["placement"])) : I("", !0),
         $("div", {
           class: B(["t-sheet", { fullscreen: e.fullscreen, [e.placement]: !0, rounded: a.rounded }]),
-          style: x({ "--background": e.background }),
+          style: T({ "--background": e.background }),
           ref_key: "sheet",
-          ref: n
+          ref: r
         }, [
-          g(a.$slots, "default", {}, void 0, !0)
+          b(a.$slots, "default", {}, void 0, !0)
         ], 6)
       ]),
       _: 3
     }, 8, ["duration", "bounce", "class", "placement", "backdrop", "visible", "keepalive", "style"]));
   }
-}), xt = /* @__PURE__ */ _(wt, [["__scopeId", "data-v-dcfbb6a3"]]), St = { class: "t-input-label" }, Bt = { class: "t-input-content" }, Ct = ["placeholder", "value", "type", "readonly"], It = /* @__PURE__ */ b({
+}), wt = /* @__PURE__ */ _(Tt, [["__scopeId", "data-v-dcfbb6a3"]]), St = { class: "t-input-label" }, Bt = { class: "t-input-content" }, zt = ["placeholder", "value", "type", "readonly"], Et = /* @__PURE__ */ h({
   __name: "t-input",
   props: {
     size: { default: "standard" },
@@ -1034,81 +1034,85 @@ const be = /* @__PURE__ */ _(ft, [["render", vt], ["__scopeId", "data-v-c2a3436c
   },
   emits: ["update:modelValue"],
   setup(t, { emit: o }) {
-    const e = t, s = o, n = v(!1), l = v(null), u = w(
+    const e = t, s = o, r = m(!1), l = m(null), u = x(
       () => !(e.modelValue === "" || e.modelValue == null)
-    ), r = (p) => {
-      s("update:modelValue", p.target.value);
-    }, d = async (p) => {
-      n.value = !0;
-    }, y = () => {
-      n.value = !1;
+    ), n = (d) => {
+      s("update:modelValue", d.target.value);
+    }, p = async (d) => {
+      r.value = !0;
+    }, v = () => {
+      r.value = !1;
     };
-    return (p, a) => (i(), f("div", {
+    return (d, a) => (i(), f("div", {
       class: B(["t-input", {
-        rounded: p.rounded,
-        ["size-" + p.size]: !0,
-        ["variant-" + p.variant]: !0,
-        focus: n.value,
+        rounded: d.rounded,
+        ["size-" + d.size]: !0,
+        ["variant-" + d.variant]: !0,
+        focus: r.value,
         "has-value": u.value,
-        readonly: p.readonly
+        readonly: d.readonly
       }])
     }, [
       $("label", null, [
-        $("span", St, A(p.label), 1),
+        $("span", St, A(d.label), 1),
         $("div", Bt, [
-          g(p.$slots, "start", {}, void 0, !0),
+          b(d.$slots, "start", {}, void 0, !0),
           $("input", {
             ref_key: "editable",
             ref: l,
             class: "t-input-editable",
-            placeholder: p.placeholder,
-            value: p.modelValue,
-            type: p.type,
-            onInput: r,
-            onFocus: d,
-            onBlur: y,
-            readonly: p.readonly
-          }, null, 40, Ct),
-          g(p.$slots, "end", {}, void 0, !0)
+            placeholder: d.placeholder,
+            value: d.modelValue,
+            type: d.type,
+            onInput: n,
+            onFocus: p,
+            onBlur: v,
+            readonly: d.readonly
+          }, null, 40, zt),
+          b(d.$slots, "end", {}, void 0, !0)
         ])
       ]),
-      p.error ? (i(), V(ne, {
+      d.error ? (i(), C(oe, {
         key: 0,
         color: "danger"
       }, {
-        default: P(() => [
-          M(A(p.error), 1)
+        default: N(() => [
+          M(A(d.error), 1)
         ]),
         _: 1
-      })) : p.help ? (i(), V(ne, {
+      })) : d.help ? (i(), C(oe, {
         key: 1,
         color: "secondary"
       }, {
-        default: P(() => [
-          M(A(p.help), 1)
+        default: N(() => [
+          M(A(d.help), 1)
         ]),
         _: 1
-      })) : z("", !0)
+      })) : I("", !0)
     ], 2));
   }
-}), zt = /* @__PURE__ */ _(It, [["__scopeId", "data-v-11ddaa71"]]), Et = {};
+}), It = /* @__PURE__ */ _(Et, [["__scopeId", "data-v-11ddaa71"]]), Pt = {};
 function Vt(t, o) {
   return i(), f("textarea");
 }
-const Pt = /* @__PURE__ */ _(Et, [["render", Vt]]), Rt = {};
+const Ct = /* @__PURE__ */ _(Pt, [["render", Vt]]), Rt = {};
 function At(t, o) {
   return i(), f("div");
 }
-const Ot = /* @__PURE__ */ _(Rt, [["render", At]]), Xt = { class: "t-grid" }, Dt = /* @__PURE__ */ b({
+const Ot = /* @__PURE__ */ _(Rt, [["render", At]]), Nt = /* @__PURE__ */ h({
   __name: "t-grid",
   props: {
     gap: { default: 0 },
-    template: { default: 1 }
+    template: { default: "repeat(1, 1fr) / repeat(1, 1fr)" }
   },
   setup(t) {
-    return (o, e) => (i(), f("div", Xt));
+    const o = t, e = x(() => isNaN(o.gap) ? o.gap : `var(--t-size-${o.gap})`);
+    return (s, r) => (i(), f("div", {
+      class: "t-grid",
+      style: T({ "--gap": e.value, "--template": o.template })
+    }, null, 4));
   }
-}), Wt = /* @__PURE__ */ _(Dt, [["__scopeId", "data-v-93ba455c"]]), Nt = /* @__PURE__ */ b({
+}), Xt = /* @__PURE__ */ _(Nt, [["__scopeId", "data-v-eb14fddc"]]), Dt = /* @__PURE__ */ h({
   __name: "t-divider",
   props: {
     direction: { default: "horizontal" }
@@ -1119,108 +1123,108 @@ const Ot = /* @__PURE__ */ _(Rt, [["render", At]]), Xt = { class: "t-grid" }, Dt
       class: B(["t-divider", { [o.direction]: !0 }])
     }, null, 2));
   }
-}), qt = /* @__PURE__ */ _(Nt, [["__scopeId", "data-v-47ee8991"]]), Mt = /* @__PURE__ */ b({
+}), Wt = /* @__PURE__ */ _(Dt, [["__scopeId", "data-v-47ee8991"]]), qt = /* @__PURE__ */ h({
   __name: "t-toggle-password",
   props: {
     color: { default: "warning" }
   },
   emits: ["change"],
   setup(t, { emit: o }) {
-    const e = t, s = o, n = v(!1), l = v(), u = w(() => {
-      let y = e.color;
-      return ["warning", "info", "danger", "primary", "secondary", "success"].includes(e.color) && (y = `var(--t-color-status-${e.color})`), {
-        "--color": y
+    const e = t, s = o, r = m(!1), l = m(), u = x(() => {
+      let v = e.color;
+      return ["warning", "info", "danger", "primary", "secondary", "success"].includes(e.color) && (v = `var(--t-color-status-${e.color})`), {
+        "--color": v
       };
-    }), r = () => l.value?.parentElement?.querySelector?.("input");
-    j(() => {
-      let y = r();
-      y && (n.value = y.type != "password", s("change", n.value));
+    }), n = () => l.value?.parentElement?.querySelector?.("input");
+    H(() => {
+      let v = n();
+      v && (r.value = v.type != "password", s("change", r.value));
     });
-    const d = () => {
-      let y = r();
-      y && (n.value = !n.value, n.value ? y.type = "text" : y.type = "password", s("change", n.value));
+    const p = () => {
+      let v = n();
+      v && (r.value = !r.value, r.value ? v.type = "text" : v.type = "password", s("change", r.value));
     };
-    return (y, p) => (i(), f("button", {
+    return (v, d) => (i(), f("button", {
       ref_key: "toggle",
       ref: l,
       class: "t-toggle-password",
-      style: x(u.value),
-      onClick: d
+      style: T(u.value),
+      onPointerup: p
     }, [
-      n.value ? g(y.$slots, "on", { key: 0 }, () => [
-        p[0] || (p[0] = $("i", { class: "ri-eye-line" }, null, -1))
-      ], !0) : z("", !0),
-      n.value ? z("", !0) : g(y.$slots, "off", { key: 1 }, () => [
-        p[1] || (p[1] = $("i", { class: "ri-eye-off-line" }, null, -1))
+      r.value ? b(v.$slots, "on", { key: 0 }, () => [
+        d[0] || (d[0] = $("i", { class: "ri-eye-line" }, null, -1))
+      ], !0) : I("", !0),
+      r.value ? I("", !0) : b(v.$slots, "off", { key: 1 }, () => [
+        d[1] || (d[1] = $("i", { class: "ri-eye-off-line" }, null, -1))
       ], !0)
-    ], 4));
+    ], 36));
   }
-}), Lt = /* @__PURE__ */ _(Mt, [["__scopeId", "data-v-3268e9e3"]]), Ht = /* @__PURE__ */ b({
+}), Mt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-e5aa6028"]]), Lt = /* @__PURE__ */ h({
   __name: "t-avatar",
   props: {
     square: { type: Boolean, default: !1 },
     size: { default: "standard" }
   },
   setup(t) {
-    const o = t, e = w(() => o.size == "small" ? "24px" : o.size == "standard" ? "40px" : o.size == "large" ? "60px" : o.size);
-    return (s, n) => (i(), f("div", {
+    const o = t, e = x(() => o.size == "small" ? "24px" : o.size == "standard" ? "40px" : o.size == "large" ? "60px" : o.size);
+    return (s, r) => (i(), f("div", {
       class: B(["t-avatar", { square: s.square }]),
-      style: x({ "--size": e.value })
+      style: T({ "--size": e.value })
     }, [
-      g(s.$slots, "default", {}, void 0, !0)
+      b(s.$slots, "default", {}, void 0, !0)
     ], 6));
   }
-}), Ft = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-1d223827"]]), Kt = { class: "t-collapse-title" }, Ut = {
+}), Ht = /* @__PURE__ */ _(Lt, [["__scopeId", "data-v-1d223827"]]), Ft = { class: "t-collapse-title" }, Kt = {
   key: 0,
   class: "icon"
-}, jt = {
+}, Ut = {
   key: 1,
   class: "icon"
-}, Gt = { class: "t-collapse-content" }, Jt = /* @__PURE__ */ b({
+}, jt = { class: "t-collapse-content" }, Gt = /* @__PURE__ */ h({
   __name: "t-collapse",
   props: {
     title: {}
   },
   emits: ["change"],
   setup(t, { emit: o }) {
-    const e = t, s = o, n = v(!1), l = v(""), u = v(), r = () => {
-      n.value = !n.value, l.value = `calc(${u.value.offsetHeight}px + 2rem)`, s("change", n.value);
+    const e = t, s = o, r = m(!1), l = m(""), u = m(), n = () => {
+      r.value = !r.value, l.value = `calc(${u.value.offsetHeight}px + 2rem)`, s("change", r.value);
     };
-    return s("change", n.value), (d, y) => (i(), f("div", {
-      class: B(["t-collapse", { open: n.value }]),
-      style: x({ "--height": l.value })
+    return s("change", r.value), (p, v) => (i(), f("div", {
+      class: B(["t-collapse", { open: r.value }]),
+      style: T({ "--height": l.value })
     }, [
       $("div", {
         class: "t-collapse-header",
-        onClick: r
+        onPointerup: n
       }, [
-        g(d.$slots, "icon"),
-        $("div", Kt, [
-          g(d.$slots, "title", {}, () => [
+        b(p.$slots, "icon"),
+        $("div", Ft, [
+          b(p.$slots, "title", {}, () => [
             M(A(e.title), 1)
           ])
         ]),
-        g(d.$slots, "toggle", {}, () => [
-          n.value ? (i(), f("div", Ut, [...y[0] || (y[0] = [
+        b(p.$slots, "toggle", {}, () => [
+          r.value ? (i(), f("div", Kt, [...v[0] || (v[0] = [
             $("i", { class: "ri-arrow-up-s-line" }, null, -1)
-          ])])) : (i(), f("div", jt, [...y[1] || (y[1] = [
+          ])])) : (i(), f("div", Ut, [...v[1] || (v[1] = [
             $("i", { class: "ri-arrow-down-s-line" }, null, -1)
           ])]))
         ])
-      ]),
-      $("div", Gt, [
+      ], 32),
+      $("div", jt, [
         $("div", {
           ref_key: "content",
           ref: u
         }, [
-          g(d.$slots, "content", {}, () => [
-            g(d.$slots, "default")
+          b(p.$slots, "content", {}, () => [
+            b(p.$slots, "default")
           ])
         ], 512)
       ])
     ], 6));
   }
-}), Qt = /* @__PURE__ */ b({
+}), Jt = /* @__PURE__ */ h({
   __name: "t-switch",
   props: {
     modelValue: { type: Boolean },
@@ -1228,9 +1232,9 @@ const Ot = /* @__PURE__ */ _(Rt, [["render", At]]), Xt = { class: "t-grid" }, Dt
   },
   emits: ["update:modelValue"],
   setup(t, { emit: o }) {
-    const e = t, s = o, n = () => {
+    const e = t, s = o, r = () => {
       s("update:modelValue", !e.modelValue);
-    }, l = w(() => {
+    }, l = x(() => {
       let u = {
         "--background": e.color,
         "--color": "#ffffff"
@@ -1240,41 +1244,41 @@ const Ot = /* @__PURE__ */ _(Rt, [["render", At]]), Xt = { class: "t-grid" }, Dt
         "--color": `var(--t-color-status-${e.color}-text)`
       }), u;
     });
-    return (u, r) => (i(), f("div", {
+    return (u, n) => (i(), f("div", {
       class: B(["t-switch", { on: e.modelValue }]),
-      style: x(l.value),
-      onClick: n
-    }, [...r[0] || (r[0] = [
+      style: T(l.value),
+      onPointerup: r
+    }, [...n[0] || (n[0] = [
       $("div", { class: "t-switch-icon" }, null, -1)
-    ])], 6));
+    ])], 38));
   }
-}), Zt = /* @__PURE__ */ _(Qt, [["__scopeId", "data-v-3616970e"]]), Yt = /* @__PURE__ */ b({
+}), Qt = /* @__PURE__ */ _(Jt, [["__scopeId", "data-v-ac24f5cf"]]), Zt = /* @__PURE__ */ h({
   __name: "t-tab",
   props: {
     value: {},
     disabled: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const o = t, e = pe("tabsState"), s = w(() => e.activeValue.value === o.value), n = () => {
+    const o = t, e = pe("tabsState"), s = x(() => e.activeValue.value === o.value), r = () => {
       o.disabled || e.setValue(o.value);
     };
     return (l, u) => (i(), f("li", {
       class: B(["t-tab", { active: s.value }])
     }, [
-      G(Y, {
+      ue(Z, {
         variant: "text",
-        onClick: n,
+        onPointerup: r,
         size: O(e).size,
         color: s.value ? O(e).color.text : void 0
       }, {
-        default: P(() => [
-          g(l.$slots, "default", {}, void 0, !0)
+        default: N(() => [
+          b(l.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["size", "color"])
     ], 2));
   }
-}), eo = /* @__PURE__ */ _(Yt, [["__scopeId", "data-v-4b7f4e98"]]), to = /* @__PURE__ */ b({
+}), Yt = /* @__PURE__ */ _(Zt, [["__scopeId", "data-v-d25a3a3e"]]), eo = /* @__PURE__ */ h({
   __name: "t-tabs",
   props: {
     placement: { default: "top-start" },
@@ -1288,82 +1292,72 @@ const Ot = /* @__PURE__ */ _(Rt, [["render", At]]), Xt = { class: "t-grid" }, Dt
   },
   emits: ["update:modelValue"],
   setup(t, { emit: o }) {
-    const e = t, s = o, n = v("0px"), l = v(0), u = v(0), r = v(), d = w(() => {
+    const e = t, s = o, r = m("0px"), l = m(0), u = m(0), n = m(), p = x(() => {
       let a = "", c = "";
       return e.variant == "text" && (a = "transparent", ["warning", "info", "danger", "primary", "secondary", "success"].includes(e.color) ? c = `var(--t-color-status-${e.color})` : c = e.color), e.variant == "border-under" && (c = "currentColor", ["warning", "info", "danger", "primary", "secondary", "success"].includes(e.color) ? a = `var(--t-color-status-${e.color})` : a = e.color), e.variant == "tag" && (["warning", "info", "danger", "primary", "secondary", "success"].includes(e.color) ? (a = `var(--t-color-status-${e.color})`, c = `var(--t-color-status-${e.color}-text)`) : (a = e.color, c = "currentColor")), { background: a, text: c };
-    }), y = w(() => e.variant == "border-under" ? {
-      "--transform": n.value,
+    }), v = x(() => e.variant == "border-under" ? {
+      "--transform": r.value,
       "--border": e.border + "px"
     } : e.variant == "tag" ? {
       "--top": e.margin[0] + "px",
       "--height": u.value - e.margin[0] * 2 + "px",
       "--left": e.margin[1] + "px",
       "--width": l.value - e.margin[1] * 2 + "px",
-      "--transform": n.value,
+      "--transform": r.value,
       "--radius": e.radius + "px"
-    } : {}), p = () => {
+    } : {}), d = () => {
       if (e.variant == "border-under") {
-        let a = r.value.querySelector(".active");
+        let a = n.value.querySelector(".active");
         if (a) {
           if (e.placement.startsWith("top-") || e.placement.startsWith("bottom-")) {
-            let c = a.getBoundingClientRect().left - r.value.getBoundingClientRect().left + r.value.scrollLeft, m = a.offsetWidth / 2;
-            n.value = c + m - e.border / 2 + "px";
+            let c = a.getBoundingClientRect().left - n.value.getBoundingClientRect().left + n.value.scrollLeft, y = a.offsetWidth / 2;
+            r.value = c + y - e.border / 2 + "px";
           } else if (e.placement.startsWith("left-") || e.placement.startsWith("right-")) {
-            let c = a.getBoundingClientRect().top - r.value.getBoundingClientRect().top + r.value.scrollTop, m = a.offsetHeight / 2;
-            n.value = c + m - e.border / 2 + "px";
+            let c = a.getBoundingClientRect().top - n.value.getBoundingClientRect().top + n.value.scrollTop, y = a.offsetHeight / 2;
+            r.value = c + y - e.border / 2 + "px";
           }
         }
       }
       if (e.variant == "tag") {
-        let a = r.value.querySelector(".active");
+        let a = n.value.querySelector(".active");
         if (a) {
-          let c = a.offsetWidth, m = a.offsetHeight;
+          let c = a.offsetWidth, y = a.offsetHeight;
           if (e.placement.startsWith("top-") || e.placement.startsWith("bottom-")) {
-            let k = a.getBoundingClientRect().left - r.value.getBoundingClientRect().left + r.value.scrollLeft;
-            n.value = k + "px";
+            let w = a.getBoundingClientRect().left - n.value.getBoundingClientRect().left + n.value.scrollLeft;
+            r.value = w + "px";
           } else if (e.placement.startsWith("left-") || e.placement.startsWith("right-")) {
-            let k = a.getBoundingClientRect().top - r.value.getBoundingClientRect().top + r.value.scrollTop;
-            n.value = k + "px";
+            let w = a.getBoundingClientRect().top - n.value.getBoundingClientRect().top + n.value.scrollTop;
+            r.value = w + "px";
           }
-          l.value = c, u.value = m;
+          l.value = c, u.value = y;
         }
       }
     };
     return de("tabsState", {
-      activeValue: w(() => e.modelValue),
-      color: d.value,
+      activeValue: x(() => e.modelValue),
+      color: p.value,
       size: e.size,
       variant: e.variant,
       setValue: (a) => {
         s("update:modelValue", a);
       }
-    }), N(() => e.modelValue, async () => {
-      await ce(), p();
-    }), j(async () => {
-      await ce(), p();
+    }), W(() => e.modelValue, async () => {
+      await le(), d();
+    }), H(async () => {
+      await le(), d();
     }), (a, c) => (i(), f("ul", {
       ref_key: "container",
-      ref: r,
+      ref: n,
       class: B(["t-tabs", { [a.placement]: !0, [`variant-${a.variant}`]: !0 }]),
-      style: x([{ "--background": d.value.background, "--color": d.value.text }, y.value])
+      style: T([{ "--background": p.value.background, "--color": p.value.text }, v.value])
     }, [
-      g(a.$slots, "default", {}, void 0, !0)
+      b(a.$slots, "default", {}, void 0, !0)
     ], 6));
   }
-}), oo = /* @__PURE__ */ _(to, [["__scopeId", "data-v-8d370631"]]), so = /* @__PURE__ */ b({
-  __name: "t-loading-app",
-  setup(t) {
-    return (o, e) => (i(), V(ge, null, {
-      default: P(() => [
-        G(Z, { type: "spinner" })
-      ]),
-      _: 1
-    }));
-  }
-}), no = /* @__PURE__ */ _(so, [["__scopeId", "data-v-1436aa9f"]]), ro = { key: 0 }, ao = {
+}), to = /* @__PURE__ */ _(eo, [["__scopeId", "data-v-b512ed8e"]]), oo = { key: 0 }, so = {
   key: 0,
   class: "t-checkbox-label"
-}, lo = /* @__PURE__ */ b({
+}, ro = /* @__PURE__ */ h({
   __name: "t-checkbox",
   props: {
     label: { default: "" },
@@ -1376,50 +1370,49 @@ const Ot = /* @__PURE__ */ _(Rt, [["render", At]]), Xt = { class: "t-grid" }, Dt
   },
   emits: ["update:modelValue"],
   setup(t, { emit: o }) {
-    const e = t, s = o, n = w(() => {
-      let r = {
+    const e = t, s = o, r = x(() => {
+      let n = {
         "--background": e.color,
         "--color": "#ffffff"
       };
-      return ["warning", "info", "danger", "primary", "secondary", "success"].includes(e.color) && (r = {
+      return ["warning", "info", "danger", "primary", "secondary", "success"].includes(e.color) && (n = {
         "--background": `var(--t-color-status-${e.color})`,
         "--color": `var(--t-color-status-${e.color}-text)`
-      }), r;
-    }), l = w(() => e.multiple ? e.modelValue.includes(e.value) : e.value === void 0 ? e.modelValue : e.modelValue == e.value), u = (r) => {
-      if (r.preventDefault(), r.stopPropagation(), e.multiple) {
-        let d = e.modelValue;
-        e.modelValue.includes(e.value) ? d.splice(d.indexOf(e.value), 1) : d.push(e.value), s("update:modelValue", d);
+      }), n;
+    }), l = x(() => e.multiple ? e.modelValue.includes(e.value) : e.value === void 0 ? e.modelValue : e.modelValue == e.value), u = (n) => {
+      if (n.preventDefault(), n.stopPropagation(), e.multiple) {
+        let p = e.modelValue;
+        e.modelValue.includes(e.value) ? p.splice(p.indexOf(e.value), 1) : p.push(e.value), s("update:modelValue", p);
       } else e.value === void 0 ? s("update:modelValue", !e.modelValue) : s("update:modelValue", e.value);
     };
-    return (r, d) => (i(), f("div", {
+    return (n, p) => (i(), f("div", {
       class: B(["t-checkbox", { active: l.value }]),
-      style: x(n.value),
-      onClick: u,
-      onTouchend: u
+      style: T(r.value),
+      onPointerup: u
     }, [
       $("div", {
-        class: B(`t-checkbox-${r.type}`)
+        class: B(`t-checkbox-${n.type}`)
       }, [
-        r.type == "radio" ? (i(), f("div", ro)) : z("", !0),
-        r.type == "check" ? g(r.$slots, "icon", { key: 1 }, () => [
-          d[0] || (d[0] = $("i", { class: "ri-check-line" }, null, -1))
-        ], !0) : z("", !0)
+        n.type == "radio" ? (i(), f("div", oo)) : I("", !0),
+        n.type == "check" ? b(n.$slots, "icon", { key: 1 }, () => [
+          p[0] || (p[0] = $("i", { class: "ri-check-line" }, null, -1))
+        ], !0) : I("", !0)
       ], 2),
-      g(r.$slots, "label", {}, () => [
-        r.label ? (i(), f("span", ao, A(e.label), 1)) : z("", !0)
+      b(n.$slots, "label", {}, () => [
+        n.label ? (i(), f("span", so, A(e.label), 1)) : I("", !0)
       ], !0)
     ], 38));
   }
-}), co = /* @__PURE__ */ _(lo, [["__scopeId", "data-v-0f5d6aae"]]), io = /* @__PURE__ */ b({
+}), no = /* @__PURE__ */ _(ro, [["__scopeId", "data-v-b1f8b112"]]), ao = /* @__PURE__ */ h({
   __name: "t-keyboard-space",
   setup(t) {
-    const { height: o } = _e();
+    const { height: o } = ge();
     return (e, s) => (i(), f("div", {
       class: "t-keyboard-space",
-      style: x({ "--height": O(o) + "px" })
+      style: T({ "--height": O(o) + "px" })
     }, null, 4));
   }
-}), uo = /* @__PURE__ */ _(io, [["__scopeId", "data-v-4b06018d"]]), po = /* @__PURE__ */ b({
+}), lo = /* @__PURE__ */ _(ao, [["__scopeId", "data-v-4b06018d"]]), co = /* @__PURE__ */ h({
   __name: "t-skeleton",
   props: {
     width: { default: "100%" },
@@ -1428,23 +1421,23 @@ const Ot = /* @__PURE__ */ _(Rt, [["render", At]]), Xt = { class: "t-grid" }, Dt
     color: { default: null }
   },
   setup(t) {
-    const o = t, e = w(() => ({
+    const o = t, e = x(() => ({
       "--width": o.width,
       "--height": o.height,
       "--radius": o.radius
     }));
-    return (s, n) => (i(), f("div", {
+    return (s, r) => (i(), f("div", {
       class: "t-skeleton",
-      style: x(e.value)
+      style: T(e.value)
     }, null, 4));
   }
-}), fo = /* @__PURE__ */ _(po, [["__scopeId", "data-v-877bbdb5"]]), mo = /* @__PURE__ */ b({
+}), io = /* @__PURE__ */ _(co, [["__scopeId", "data-v-877bbdb5"]]), uo = /* @__PURE__ */ h({
   __name: "t-ripple",
   props: {
     color: { default: "primary" }
   },
   setup(t) {
-    const o = t, e = w(() => {
+    const o = t, e = x(() => {
       let s = {};
       return o.color ? ["warning", "info", "danger", "primary", "secondary", "success"].includes(o.color) ? s = {
         "--color": "var(--t-color-status-" + o.color + ")"
@@ -1454,25 +1447,55 @@ const Ot = /* @__PURE__ */ _(Rt, [["render", At]]), Xt = { class: "t-grid" }, Dt
         "--color": "var(--t-color-surface)"
       }, s;
     });
-    return (s, n) => (i(), f("div", {
+    return (s, r) => (i(), f("div", {
       class: "t-ripple",
-      style: x(e.value)
+      style: T(e.value)
+    }, null, 4));
+  }
+}), po = /* @__PURE__ */ _(uo, [["__scopeId", "data-v-42cb3d71"]]), fo = /* @__PURE__ */ h({
+  __name: "t-flex",
+  props: {
+    gap: { default: 0 },
+    direction: { default: "row" }
+  },
+  setup(t) {
+    const o = t, e = x(() => isNaN(o.gap) ? o.gap : `var(--t-size-${o.gap})`);
+    return (s, r) => (i(), f("div", {
+      class: "t-flex",
+      style: T({ "--gap": e.value, "--direction": o.direction })
     }, null, 4));
   }
-}), vo = /* @__PURE__ */ _(mo, [["__scopeId", "data-v-42cb3d71"]]), To = () => ({
+}), mo = /* @__PURE__ */ _(fo, [["__scopeId", "data-v-d9a0e65c"]]), vo = ["src"], yo = /* @__PURE__ */ h({
+  __name: "t-image",
+  props: {
+    defaultSrc: {},
+    src: {}
+  },
+  setup(t) {
+    const o = m(""), e = () => {
+      t.defaultSrc && (o.value = t.defaultSrc);
+    };
+    return H(() => {
+      o.value = t.src;
+    }), (s, r) => (i(), f("img", {
+      onError: e,
+      src: o.value
+    }, null, 40, vo));
+  }
+}), To = () => ({
   install: (t) => {
-    Be(), t.component("t-app", Ee), t.component("t-screen", be), t.component("t-swipe-screen", _t), t.component("t-cable", at), t.component("t-toolbar", bt), t.component("t-content", ge), t.component("t-card", lt), t.component("t-refresher", pt), t.component("t-button", Y), t.component("t-back-button", kt), t.component("t-present", H), t.component("t-text", ne), t.component("t-sheet", xt), t.component("t-gesture-indicator", he), t.component("t-input", zt), t.component("t-textarea", Pt), t.component("t-rich-text", Ot), t.component("t-grid", Wt), t.component("t-divider", qt), t.component("t-toggle-password", Lt), t.component("t-loading-icon", Z), t.component("t-alert", me), t.component("t-avatar", Ft), t.component("t-collapse", Jt), t.component("t-toast", ye), t.component("t-switch", Zt), t.component("t-tab", eo), t.component("t-tabs", oo), t.component("t-loading-app", no), t.component("t-checkbox", co), t.component("t-keyboard-space", uo), t.component("t-skeleton", fo), t.component("t-ripple", vo);
+    Be(), t.component("t-app", Pe), t.component("t-screen", be), t.component("t-screen-router", _t), t.component("t-cable", nt), t.component("t-toolbar", bt), t.component("t-content", ut), t.component("t-card", at), t.component("t-refresher", pt), t.component("t-button", Z), t.component("t-back-button", kt), t.component("t-present", F), t.component("t-text", oe), t.component("t-sheet", wt), t.component("t-gesture-indicator", he), t.component("t-input", It), t.component("t-textarea", Ct), t.component("t-rich-text", Ot), t.component("t-grid", Xt), t.component("t-divider", Wt), t.component("t-toggle-password", Mt), t.component("t-icon-spinner", ne), t.component("t-alert", me), t.component("t-avatar", Ht), t.component("t-collapse", Gt), t.component("t-toast", _e), t.component("t-switch", Qt), t.component("t-tab", Yt), t.component("t-tabs", to), t.component("t-checkbox", no), t.component("t-keyboard-space", lo), t.component("t-skeleton", io), t.component("t-ripple", po), t.component("t-loading", ve), t.component("t-flex", mo), t.component("t-image", yo);
   }
 });
 export {
   Se as blurCurrentActive,
-  ho as createAction,
-  bo as createAlert,
-  ko as createLoading,
-  $o as createToast,
+  ko as createAction,
+  ho as createAlert,
+  $o as createLoading,
+  xo as createToast,
   To as createToife,
-  xe as isFormElement,
-  Ke as presentController,
+  we as isFormElement,
+  Fe as presentController,
   S as screenController,
-  _e as useKeyboard
+  ge as useKeyboard
 };