@xto/feedback 0.1.0

package/es/index.mjs

@@ -0,0 +1,1233 @@
+import { defineComponent as N, ref as E, computed as I, watch as ne, openBlock as x, createBlock as X, Teleport as le, createVNode as ie, Transition as j, withCtx as F, createElementBlock as $, normalizeStyle as H, normalizeClass as m, unref as v, createElementVNode as z, withModifiers as pe, renderSlot as L, createTextVNode as W, toDisplayString as V, createCommentVNode as M, nextTick as Q, onUnmounted as ae, withDirectives as he, vShow as ge, onMounted as xe, reactive as be, createApp as me, h as b } from "vue";
+import { useNamespace as U, useZIndex as we, useEscape as Ce, nextMessageZIndex as ke } from "@xto/core";
+const Ze = /* @__PURE__ */ N({
+  name: "XModal",
+  __name: "index",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    title: { default: "" },
+    width: { default: "50%" },
+    top: { default: "15vh" },
+    modal: { type: Boolean, default: !0 },
+    closeOnClickModal: { type: Boolean, default: !0 },
+    closeOnPressEscape: { type: Boolean, default: !0 },
+    showClose: { type: Boolean, default: !0 },
+    center: { type: Boolean, default: !1 },
+    destroyOnClose: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "close", "open"],
+  setup(e, { emit: l }) {
+    const t = e, a = l, o = U("modal"), { next: i } = we(), f = E(i()), d = I({
+      get: () => t.modelValue,
+      set: (g) => a("update:modelValue", g)
+    }), u = E(), n = () => {
+      d.value = !1, a("close");
+    }, p = () => {
+      t.closeOnClickModal && t.modal && n();
+    };
+    Ce(() => {
+      t.closeOnPressEscape && d.value && n();
+    }), ne(() => t.modelValue, (g) => {
+      g && (f.value = i(), a("open"));
+    });
+    const r = I(() => ({
+      paddingTop: t.top
+    })), h = I(() => ({
+      width: typeof t.width == "number" ? `${t.width}px` : t.width,
+      zIndex: f.value
+    }));
+    return (g, B) => (x(), X(le, { to: "body" }, [
+      ie(j, { name: "x-modal-fade" }, {
+        default: F(() => [
+          e.modelValue ? (x(), $("div", {
+            key: 0,
+            class: m(v(o).e("wrapper")),
+            style: H(r.value),
+            onClick: p
+          }, [
+            z("div", {
+              ref_key: "modalRef",
+              ref: u,
+              class: m(v(o).b()),
+              style: H(h.value),
+              onClick: B[0] || (B[0] = pe(() => {
+              }, ["stop"]))
+            }, [
+              z("div", {
+                class: m(v(o).e("header"))
+              }, [
+                z("span", {
+                  class: m(v(o).e("title"))
+                }, [
+                  L(g.$slots, "title", {}, () => [
+                    W(V(e.title), 1)
+                  ])
+                ], 2),
+                e.showClose ? (x(), $("button", {
+                  key: 0,
+                  class: m(v(o).e("close")),
+                  onClick: n
+                }, " ✕ ", 2)) : M("", !0)
+              ], 2),
+              z("div", {
+                class: m(v(o).e("body"))
+              }, [
+                L(g.$slots, "default")
+              ], 2),
+              g.$slots.footer ? (x(), $("div", {
+                key: 0,
+                class: m(v(o).e("footer"))
+              }, [
+                L(g.$slots, "footer")
+              ], 2)) : M("", !0)
+            ], 6)
+          ], 6)) : M("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}), Ke = /* @__PURE__ */ N({
+  name: "XDrawer",
+  __name: "index",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    title: { default: "" },
+    direction: { default: "rtl" },
+    size: { default: "30%" },
+    withHeader: { type: Boolean, default: !0 },
+    showClose: { type: Boolean, default: !0 },
+    closeOnClickModal: { type: Boolean, default: !0 },
+    destroyOnClose: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "close", "open"],
+  setup(e, { emit: l }) {
+    const t = e, a = l, o = U("drawer"), i = E(2e3), f = () => {
+      a("update:modelValue", !1), a("close");
+    }, d = () => {
+      t.closeOnClickModal && f();
+    }, u = (r) => {
+      r.key === "Escape" && t.modelValue && f();
+    };
+    ne(() => t.modelValue, (r) => {
+      r ? (i.value = 2e3 + Math.floor(Math.random() * 100), a("open"), document.addEventListener("keydown", u)) : document.removeEventListener("keydown", u);
+    });
+    const n = I(() => ({
+      zIndex: i.value
+    })), p = I(() => {
+      const r = typeof t.size == "number" ? `${t.size}px` : t.size;
+      return {
+        ltr: { width: r, height: "100%" },
+        rtl: { width: r, height: "100%" },
+        ttb: { width: "100%", height: r },
+        btt: { width: "100%", height: r }
+      }[t.direction];
+    });
+    return (r, h) => (x(), X(le, { to: "body" }, [
+      ie(j, { name: "x-drawer-fade" }, {
+        default: F(() => [
+          e.modelValue ? (x(), $("div", {
+            key: 0,
+            class: m(v(o).e("overlay")),
+            style: H(n.value),
+            onClick: d
+          }, [
+            z("div", {
+              class: m([v(o).b(), v(o).m(e.direction)]),
+              style: H(p.value),
+              onClick: h[0] || (h[0] = pe(() => {
+              }, ["stop"]))
+            }, [
+              e.withHeader ? (x(), $("div", {
+                key: 0,
+                class: m(v(o).e("header"))
+              }, [
+                z("span", {
+                  class: m(v(o).e("title"))
+                }, [
+                  L(r.$slots, "title", {}, () => [
+                    W(V(e.title), 1)
+                  ])
+                ], 2),
+                e.showClose ? (x(), $("button", {
+                  key: 0,
+                  class: m(v(o).e("close")),
+                  onClick: f
+                }, " ✕ ", 2)) : M("", !0)
+              ], 2)) : M("", !0),
+              z("div", {
+                class: m(v(o).e("body"))
+              }, [
+                L(r.$slots, "default")
+              ], 2),
+              r.$slots.footer ? (x(), $("div", {
+                key: 1,
+                class: m(v(o).e("footer"))
+              }, [
+                L(r.$slots, "footer")
+              ], 2)) : M("", !0)
+            ], 6)
+          ], 6)) : M("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}), Ue = /* @__PURE__ */ N({
+  name: "XAlert",
+  __name: "index",
+  props: {
+    type: { default: "info" },
+    title: { default: "" },
+    description: {},
+    closable: { type: Boolean, default: !0 },
+    showIcon: { type: Boolean, default: !1 },
+    center: { type: Boolean, default: !1 }
+  },
+  emits: ["close"],
+  setup(e, { emit: l }) {
+    const t = e, a = l, o = U("alert"), i = E(!0), f = {
+      success: "✓",
+      warning: "⚠",
+      error: "✕",
+      info: "ℹ"
+    }, d = I(() => [
+      o.b(),
+      o.m(t.type),
+      o.is("center", t.center),
+      o.is("with-description", t.description)
+    ]), u = (n) => {
+      i.value = !1, a("close", n);
+    };
+    return (n, p) => (x(), X(j, { name: "x-alert-fade" }, {
+      default: F(() => [
+        i.value ? (x(), $("div", {
+          key: 0,
+          class: m(d.value)
+        }, [
+          e.showIcon ? (x(), $("span", {
+            key: 0,
+            class: m(v(o).e("icon"))
+          }, V(f[e.type]), 3)) : M("", !0),
+          z("div", {
+            class: m(v(o).e("content"))
+          }, [
+            e.title || n.$slots.title ? (x(), $("span", {
+              key: 0,
+              class: m(v(o).e("title"))
+            }, [
+              L(n.$slots, "title", {}, () => [
+                W(V(e.title), 1)
+              ])
+            ], 2)) : M("", !0),
+            e.description || n.$slots.default ? (x(), $("span", {
+              key: 1,
+              class: m(v(o).e("description"))
+            }, [
+              L(n.$slots, "default", {}, () => [
+                W(V(e.description), 1)
+              ])
+            ], 2)) : M("", !0)
+          ], 2),
+          e.closable ? (x(), $("button", {
+            key: 1,
+            class: m(v(o).e("close")),
+            onClick: u
+          }, " ✕ ", 2)) : M("", !0)
+        ], 2)) : M("", !0)
+      ]),
+      _: 3
+    }));
+  }
+}), Ye = /* @__PURE__ */ N({
+  name: "XTooltip",
+  __name: "index",
+  props: {
+    content: { default: "" },
+    placement: { default: "top" },
+    effect: { default: "dark" },
+    disabled: { type: Boolean, default: !1 },
+    offset: { default: 8 },
+    transition: { default: "fade" },
+    visibleArrow: { type: Boolean, default: !0 },
+    trigger: { default: "hover" },
+    openDelay: { default: 0 },
+    closeDelay: { default: 0 }
+  },
+  emits: ["update:visible", "show", "hide"],
+  setup(e, { emit: l }) {
+    const t = e, a = l, o = U("tooltip"), i = E(!1), f = E(), d = E();
+    let u, n;
+    const p = E({}), r = () => {
+      if (!f.value || !d.value) return;
+      const k = f.value.getBoundingClientRect(), O = d.value;
+      O.style.visibility = "hidden", O.style.display = "block";
+      const _ = O.offsetWidth, D = O.offsetHeight, A = t.offset, ce = window.innerWidth, de = window.innerHeight;
+      let P = 0, R = 0, Y = t.placement;
+      switch (t.placement) {
+        case "top":
+          P = k.top - D - A, R = k.left + (k.width - _) / 2;
+          break;
+        case "bottom":
+          P = k.bottom + A, R = k.left + (k.width - _) / 2;
+          break;
+        case "left":
+          P = k.top + (k.height - D) / 2, R = k.left - _ - A;
+          break;
+        case "right":
+          P = k.top + (k.height - D) / 2, R = k.right + A;
+          break;
+      }
+      t.placement === "top" && P < 0 ? (Y = "bottom", P = k.bottom + A) : t.placement === "bottom" && P + D > de ? (Y = "top", P = k.top - D - A) : t.placement === "left" && R < 0 ? (Y = "right", R = k.right + A) : t.placement === "right" && R + _ > ce && (Y = "left", R = k.left - _ - A), R < 8 && (R = 8), R + _ > ce - 8 && (R = ce - _ - 8), P < 8 && (P = 8), P + D > de - 8 && (P = de - D - 8), p.value = {
+        position: "fixed",
+        top: `${P}px`,
+        left: `${R}px`,
+        visibility: "visible",
+        zIndex: "2000"
+      }, h.value = Y;
+    }, h = E(t.placement), g = () => {
+      t.disabled || (clearTimeout(n), u = setTimeout(() => {
+        i.value = !0, a("update:visible", !0), a("show"), Q(() => {
+          r();
+        });
+      }, t.openDelay));
+    }, B = () => {
+      clearTimeout(u), n = setTimeout(() => {
+        i.value = !1, a("update:visible", !1), a("hide");
+      }, t.closeDelay);
+    }, w = () => {
+      i.value ? B() : g();
+    }, C = () => {
+      t.trigger === "hover" && g();
+    }, s = () => {
+      t.trigger === "hover" && B();
+    }, c = () => {
+      t.trigger === "click" && w();
+    }, Z = () => {
+      t.trigger === "focus" && g();
+    }, S = () => {
+      t.trigger === "focus" && B();
+    }, T = (k) => {
+      var O, _;
+      t.trigger === "click" && !((O = f.value) != null && O.contains(k.target)) && !((_ = d.value) != null && _.contains(k.target)) && B();
+    }, y = () => {
+      i.value && r();
+    };
+    ne(i, (k) => {
+      k ? Q(() => {
+        r(), t.trigger === "click" && document.addEventListener("click", T), window.addEventListener("scroll", y, !0), window.addEventListener("resize", y);
+      }) : (document.removeEventListener("click", T), window.removeEventListener("scroll", y, !0), window.removeEventListener("resize", y));
+    }), ae(() => {
+      clearTimeout(u), clearTimeout(n), document.removeEventListener("click", T), window.removeEventListener("scroll", y, !0), window.removeEventListener("resize", y);
+    });
+    const ee = I(() => [
+      o.b(),
+      o.m(t.effect)
+    ]), te = I(() => [
+      o.e("arrow"),
+      o.e(`arrow-${h.value}`)
+    ]);
+    return (k, O) => (x(), $("div", {
+      class: m(v(o).e("wrapper"))
+    }, [
+      z("div", {
+        ref_key: "triggerRef",
+        ref: f,
+        class: m(v(o).e("trigger")),
+        onMouseenter: C,
+        onMouseleave: s,
+        onClick: c,
+        onFocus: Z,
+        onBlur: S
+      }, [
+        L(k.$slots, "default")
+      ], 34),
+      (x(), X(le, { to: "body" }, [
+        ie(j, {
+          name: `x-tooltip-${e.transition}`
+        }, {
+          default: F(() => [
+            he(z("div", {
+              ref_key: "tooltipRef",
+              ref: d,
+              class: m(ee.value),
+              style: H(p.value),
+              onMouseenter: C,
+              onMouseleave: s
+            }, [
+              L(k.$slots, "content", {}, () => [
+                W(V(e.content), 1)
+              ]),
+              e.visibleArrow ? (x(), $("div", {
+                key: 0,
+                class: m(te.value)
+              }, null, 2)) : M("", !0)
+            ], 38), [
+              [ge, i.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ]))
+    ], 2));
+  }
+}), Be = { class: "x-popconfirm-wrapper" }, Te = { class: "x-popconfirm__main" }, $e = { class: "x-popconfirm__title" }, Ee = { class: "x-popconfirm__action" }, qe = /* @__PURE__ */ N({
+  name: "XPopconfirm",
+  __name: "index",
+  props: {
+    title: { default: "" },
+    confirmButtonText: { default: "确定" },
+    cancelButtonText: { default: "取消" },
+    confirmButtonType: { default: "primary" },
+    cancelButtonType: { default: "default" },
+    icon: { default: "" },
+    iconColor: { default: "#faad14" },
+    hideIcon: { type: Boolean, default: !1 },
+    hideCancelButton: { type: Boolean, default: !1 },
+    hideConfirmButton: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    width: { default: 200 },
+    placement: { default: "top" },
+    offset: { default: 12 },
+    showArrow: { type: Boolean, default: !0 }
+  },
+  emits: ["confirm", "cancel"],
+  setup(e, { emit: l }) {
+    const t = e, a = l, o = E(!1), i = E(null), f = E(null), d = E({}), u = () => {
+      if (!i.value || !f.value) return;
+      const s = i.value.getBoundingClientRect(), c = f.value.getBoundingClientRect(), Z = t.placement, S = t.offset;
+      let T = 0, y = 0;
+      switch (Z) {
+        case "top":
+          T = s.top - c.height - S, y = s.left + (s.width - c.width) / 2;
+          break;
+        case "top-start":
+          T = s.top - c.height - S, y = s.left;
+          break;
+        case "top-end":
+          T = s.top - c.height - S, y = s.right - c.width;
+          break;
+        case "bottom":
+          T = s.bottom + S, y = s.left + (s.width - c.width) / 2;
+          break;
+        case "bottom-start":
+          T = s.bottom + S, y = s.left;
+          break;
+        case "bottom-end":
+          T = s.bottom + S, y = s.right - c.width;
+          break;
+        case "left":
+          T = s.top + (s.height - c.height) / 2, y = s.left - c.width - S;
+          break;
+        case "left-start":
+          T = s.top, y = s.left - c.width - S;
+          break;
+        case "left-end":
+          T = s.bottom - c.height, y = s.left - c.width - S;
+          break;
+        case "right":
+          T = s.top + (s.height - c.height) / 2, y = s.right + S;
+          break;
+        case "right-start":
+          T = s.top, y = s.right + S;
+          break;
+        case "right-end":
+          T = s.bottom - c.height, y = s.right + S;
+          break;
+        default:
+          T = s.top - c.height - S, y = s.left + (s.width - c.width) / 2;
+      }
+      const ee = window.innerWidth, te = window.innerHeight;
+      y < 0 && (y = 10), y + c.width > ee && (y = ee - c.width - 10), T < 0 && (T = 10), T + c.height > te && (T = te - c.height - 10), d.value = {
+        position: "fixed",
+        top: `${T}px`,
+        left: `${y}px`,
+        zIndex: "2000"
+      };
+    }, n = (s) => {
+      var c, Z;
+      o.value && ((c = i.value) != null && c.contains(s.target) || (Z = f.value) != null && Z.contains(s.target) || (o.value = !1));
+    }, p = (s) => {
+      t.disabled || (s.stopPropagation(), o.value = !o.value, o.value && setTimeout(u, 0));
+    }, r = () => {
+      o.value = !1, a("confirm");
+    }, h = () => {
+      o.value = !1, a("cancel");
+    }, g = () => {
+      o.value && u();
+    }, B = () => {
+      o.value && u();
+    };
+    ne(o, (s) => {
+      s ? (setTimeout(u, 0), document.addEventListener("click", n), window.addEventListener("scroll", g, !0), window.addEventListener("resize", B)) : (document.removeEventListener("click", n), window.removeEventListener("scroll", g, !0), window.removeEventListener("resize", B));
+    }), ae(() => {
+      document.removeEventListener("click", n), window.removeEventListener("scroll", g, !0), window.removeEventListener("resize", B);
+    });
+    const w = I(() => ({
+      width: typeof t.width == "number" ? `${t.width}px` : t.width
+    })), C = I(() => {
+      const s = t.placement, c = {};
+      switch (s) {
+        case "top":
+        case "top-start":
+        case "top-end":
+          c.bottom = "-6px", c.transform = "rotate(45deg)";
+          break;
+        case "bottom":
+        case "bottom-start":
+        case "bottom-end":
+          c.top = "-6px", c.transform = "rotate(225deg)";
+          break;
+        case "left":
+        case "left-start":
+        case "left-end":
+          c.right = "-6px", c.transform = "rotate(315deg)";
+          break;
+        case "right":
+        case "right-start":
+        case "right-end":
+          c.left = "-6px", c.transform = "rotate(135deg)";
+          break;
+      }
+      return c;
+    });
+    return (s, c) => (x(), $("span", Be, [
+      z("span", {
+        ref_key: "triggerRef",
+        ref: i,
+        class: "x-popconfirm-trigger",
+        onClick: p
+      }, [
+        L(s.$slots, "default")
+      ], 512),
+      (x(), X(le, { to: "body" }, [
+        ie(j, { name: "x-popconfirm-fade" }, {
+          default: F(() => [
+            o.value ? (x(), $("div", {
+              key: 0,
+              ref_key: "popperRef",
+              ref: f,
+              class: "x-popconfirm",
+              style: H({ ...d.value, ...w.value }),
+              onClick: c[0] || (c[0] = pe(() => {
+              }, ["stop"]))
+            }, [
+              e.showArrow ? (x(), $("span", {
+                key: 0,
+                class: "x-popconfirm__arrow",
+                style: H(C.value)
+              }, null, 4)) : M("", !0),
+              z("div", Te, [
+                e.hideIcon ? M("", !0) : (x(), $("span", {
+                  key: 0,
+                  class: "x-popconfirm__icon",
+                  style: H({ color: e.iconColor })
+                }, [
+                  L(s.$slots, "icon", {}, () => [
+                    W(V(e.icon || "⚠"), 1)
+                  ])
+                ], 4)),
+                z("div", $e, [
+                  L(s.$slots, "title", {}, () => [
+                    W(V(e.title), 1)
+                  ])
+                ])
+              ]),
+              z("div", Ee, [
+                e.hideCancelButton ? M("", !0) : (x(), $("button", {
+                  key: 0,
+                  class: "x-button p-button--default p-button--small",
+                  onClick: h
+                }, V(e.cancelButtonText), 1)),
+                e.hideConfirmButton ? M("", !0) : (x(), $("button", {
+                  key: 1,
+                  class: m(["x-button x-button--small", `x-button--${e.confirmButtonType}`]),
+                  onClick: r
+                }, V(e.confirmButtonText), 3))
+              ])
+            ], 4)) : M("", !0)
+          ]),
+          _: 3
+        })
+      ]))
+    ]));
+  }
+}), Ge = /* @__PURE__ */ N({
+  name: "XBacktop",
+  __name: "index",
+  props: {
+    visibilityHeight: { default: 200 },
+    right: { default: 40 },
+    bottom: { default: 40 }
+  },
+  emits: ["click"],
+  setup(e, { emit: l }) {
+    const t = e, a = l, o = U("backtop"), i = E(!1), f = () => {
+      const n = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
+      i.value = n >= t.visibilityHeight;
+    }, d = (n) => {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      }), a("click", n);
+    }, u = I(() => ({
+      right: `${t.right}px`,
+      bottom: `${t.bottom}px`
+    }));
+    return xe(() => {
+      window.addEventListener("scroll", f, { passive: !0, capture: !0 }), setTimeout(f, 100);
+    }), ae(() => {
+      window.removeEventListener("scroll", f, !0);
+    }), (n, p) => (x(), X(j, { name: "x-fade" }, {
+      default: F(() => [
+        he(z("div", {
+          class: m(v(o).b()),
+          style: H(u.value),
+          onClick: d
+        }, [
+          L(n.$slots, "default", {}, () => [
+            z("span", {
+              class: m(v(o).e("icon"))
+            }, "↑", 2)
+          ])
+        ], 6), [
+          [ge, i.value]
+        ])
+      ]),
+      _: 3
+    }));
+  }
+}), Me = /* @__PURE__ */ N({
+  name: "XMessage",
+  __name: "index",
+  props: {
+    message: { default: "" },
+    type: { default: "info" },
+    duration: { default: 3e3 },
+    showClose: { type: Boolean, default: !1 },
+    center: { type: Boolean, default: !1 },
+    offset: { default: 20 },
+    customClass: {},
+    onClose: {}
+  },
+  emits: ["close", "destroy"],
+  setup(e, { expose: l, emit: t }) {
+    const a = e, o = t, i = U("message"), f = E(!1), d = E(ke()), u = {
+      success: "✓",
+      warning: "⚠",
+      error: "✕",
+      info: "ℹ"
+    }, n = I(() => [
+      i.b(),
+      i.m(a.type),
+      i.is("center", a.center),
+      i.is("closable", a.showClose),
+      a.customClass
+    ]), p = I(() => ({
+      top: `${a.offset}px`,
+      zIndex: d.value
+    }));
+    let r = null;
+    const h = () => {
+      a.duration > 0 && (r = setTimeout(() => {
+        B();
+      }, a.duration));
+    }, g = () => {
+      r && (clearTimeout(r), r = null);
+    }, B = () => {
+      var C;
+      f.value = !1, (C = a.onClose) == null || C.call(a), o("close");
+    }, w = () => {
+      o("destroy");
+    };
+    return xe(() => {
+      h(), f.value = !0;
+    }), ae(() => {
+      g();
+    }), l({
+      close: B
+    }), (C, s) => (x(), X(j, {
+      name: "x-message-fade",
+      onAfterLeave: w
+    }, {
+      default: F(() => [
+        f.value ? (x(), $("div", {
+          key: 0,
+          class: m(n.value),
+          style: H(p.value),
+          onMouseenter: g,
+          onMouseleave: h
+        }, [
+          z("span", {
+            class: m(v(i).e("icon"))
+          }, V(u[e.type]), 3),
+          z("span", {
+            class: m(v(i).e("content"))
+          }, [
+            L(C.$slots, "default", {}, () => [
+              W(V(e.message), 1)
+            ])
+          ], 2),
+          e.showClose ? (x(), $("button", {
+            key: 0,
+            class: m(v(i).e("close")),
+            onClick: B
+          }, " ✕ ", 2)) : M("", !0)
+        ], 38)) : M("", !0)
+      ]),
+      _: 3
+    }));
+  }
+}), q = [];
+let ze = 1;
+const Se = () => {
+  q.slice().forEach((e) => e.close());
+};
+function ve(e) {
+  const l = ze++, t = document.createElement("div");
+  document.body.appendChild(t);
+  const a = {
+    success: { bg: "#f0f9eb", border: "#67c23a", icon: "✓" },
+    warning: { bg: "#fdf6ec", border: "#e6a23c", icon: "⚠" },
+    error: { bg: "#fef0f0", border: "#f56c6c", icon: "✕" },
+    info: { bg: "#f4f4f5", border: "#909399", icon: "ℹ" }
+  }, o = e.type || "info", i = a[o] || a.info, f = be({
+    visible: !1,
+    offset: e.offset ?? 20
+  });
+  let d = e.offset ?? 20;
+  q.forEach((w) => {
+    const C = w.container.firstElementChild;
+    C && C.offsetHeight && (d += C.offsetHeight + 16);
+  }), f.offset = d;
+  let u = null, n = !1;
+  const p = () => {
+    n || (f.visible = !1, setTimeout(() => {
+      if (n) return;
+      n = !0;
+      const w = q.findIndex((C) => C.id === l);
+      w !== -1 && q.splice(w, 1);
+      try {
+        g.unmount();
+      } catch {
+      }
+      t.parentNode && t.parentNode.removeChild(t);
+    }, 300));
+  }, r = () => {
+    const w = e.duration ?? 3e3;
+    w > 0 && (u = setTimeout(p, w));
+  }, h = () => {
+    u && (clearTimeout(u), u = null);
+  }, g = me({
+    render() {
+      if (!f.visible) return null;
+      const w = [
+        // Icon
+        b("span", {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "20px",
+            height: "20px",
+            marginRight: "10px",
+            fontSize: "16px",
+            color: i.border
+          }
+        }, i.icon),
+        // Content
+        b("span", {
+          style: {
+            flex: "1",
+            fontSize: "14px",
+            color: "#606266",
+            lineHeight: "1.4"
+          }
+        }, e.message || "")
+      ];
+      return e.showClose && w.push(
+        b("button", {
+          style: {
+            position: "absolute",
+            top: "50%",
+            right: "12px",
+            transform: "translateY(-50%)",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            fontSize: "14px",
+            color: "#909399",
+            padding: "0"
+          },
+          onClick: (C) => {
+            C.stopPropagation(), p();
+          }
+        }, "✕")
+      ), b("div", {
+        class: ["x-message", `x-message--${o}`, e.center ? "is-center" : "", e.showClose ? "is-closable" : ""],
+        style: {
+          position: "fixed",
+          left: "50%",
+          top: `${f.offset}px`,
+          transform: "translateX(-50%)",
+          display: "flex",
+          alignItems: "center",
+          padding: e.showClose ? "12px 40px 12px 16px" : "12px 16px",
+          borderRadius: "4px",
+          boxShadow: "0 2px 12px rgba(0,0,0,0.1)",
+          minWidth: "280px",
+          maxWidth: "480px",
+          backgroundColor: i.bg,
+          border: `1px solid ${i.border}`,
+          zIndex: 2e3 + l,
+          transition: "opacity 0.3s, transform 0.3s"
+        },
+        onMouseenter: h,
+        onMouseleave: r
+      }, w);
+    }
+  });
+  g.mount(t), Q(() => {
+    f.visible = !0, r();
+  });
+  const B = { id: l, app: g, container: t, close: p };
+  return q.push(B), { close: p };
+}
+function Ie(e) {
+  return ve(typeof e == "string" ? { message: e } : e);
+}
+const oe = (e) => (l) => ve({ ...typeof l == "string" ? { message: l } : l, type: e }), ue = Object.assign(Ie, {
+  info: oe("info"),
+  success: oe("success"),
+  warning: oe("warning"),
+  error: oe("error"),
+  closeAll: Se
+}), Je = ue, Qe = Me, et = {
+  install(e) {
+    e.config.globalProperties.$message = ue, e.provide("message", ue);
+  }
+}, G = [], Le = () => {
+  G.slice().forEach((e) => e.close());
+}, Pe = {
+  success: { icon: "✓", color: "#67c23a" },
+  warning: { icon: "⚠", color: "#e6a23c" },
+  error: { icon: "✕", color: "#f56c6c" },
+  info: { icon: "ℹ", color: "#909399" }
+};
+function re(e) {
+  return new Promise((l) => {
+    const t = document.createElement("div");
+    document.body.appendChild(t);
+    let a = !1;
+    const o = N({
+      name: "TMessageBox",
+      setup() {
+        const d = E(!1), u = E(e.inputValue ?? ""), n = E(""), p = 2e3 + G.length + 1, r = (C) => {
+          a || (a = !0, d.value = !1, setTimeout(() => {
+            const s = G.findIndex((c) => c.container === t);
+            s !== -1 && G.splice(s, 1);
+            try {
+              i.unmount();
+            } catch {
+            }
+            t.parentNode && t.parentNode.removeChild(t), l({
+              action: C,
+              value: C === "confirm" ? u.value : void 0
+            });
+          }, 300));
+        }, h = () => {
+          if (e.showInput && e.inputPattern && !e.inputPattern.test(u.value)) {
+            n.value = e.inputErrorMessage || "输入格式不正确";
+            return;
+          }
+          n.value = "", r("confirm");
+        }, g = () => {
+          r("cancel");
+        }, B = () => {
+          r("close");
+        }, w = () => {
+          e.closeOnClickModal !== !1 && B();
+        };
+        return Q(() => {
+          d.value = !0;
+        }), {
+          visible: d,
+          inputValue: u,
+          inputError: n,
+          zIndex: p,
+          handleConfirm: h,
+          handleCancel: g,
+          handleClose: B,
+          handleMaskClick: w
+        };
+      },
+      render() {
+        if (!this.visible) return null;
+        const d = e.type, u = d ? Pe[d] : null, n = [];
+        u && n.push(
+          b("span", {
+            class: "x-message-box__icon",
+            style: { color: u.color, marginRight: "10px", fontSize: "20px" }
+          }, u.icon)
+        ), n.push(
+          b("span", { class: "x-message-box__title" }, e.title || "提示")
+        ), e.showClose !== !1 && n.push(
+          b("button", {
+            class: "x-message-box__close",
+            onClick: this.handleClose
+          }, "✕")
+        );
+        const p = [];
+        p.push(
+          b("div", { class: "x-message-box__content" }, e.message || "")
+        ), e.showInput && p.push(
+          b("div", { class: "x-message-box__input", style: { marginTop: "12px" } }, [
+            b("input", {
+              class: ["x-message-box__input-inner", this.inputError ? "is-error" : ""].filter(Boolean),
+              type: e.inputType || "text",
+              placeholder: e.inputPlaceholder || "请输入",
+              value: this.inputValue,
+              onInput: (h) => {
+                this.inputValue = h.target.value, this.inputError = "";
+              },
+              onKeyup: (h) => {
+                h.key === "Enter" && this.handleConfirm();
+              }
+            }),
+            this.inputError ? b("div", { class: "x-message-box__error", style: { color: "#f56c6c", fontSize: "12px", marginTop: "4px" } }, this.inputError) : null
+          ])
+        );
+        const r = [];
+        return e.showCancelButton && r.push(
+          b("button", {
+            class: "x-button p-button--default",
+            onClick: this.handleCancel
+          }, e.cancelButtonText || "取消")
+        ), e.showConfirmButton !== !1 && r.push(
+          b("button", {
+            class: "x-button p-button--primary",
+            onClick: this.handleConfirm,
+            style: { marginLeft: "10px" }
+          }, e.confirmButtonText || "确定")
+        ), b("div", {
+          class: ["x-message-box-wrapper", e.center ? "is-center" : ""],
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            zIndex: this.zIndex
+          },
+          onClick: this.handleMaskClick
+        }, [
+          b("div", {
+            class: ["x-message-box", e.customClass],
+            style: {
+              backgroundColor: "#fff",
+              borderRadius: "4px",
+              boxShadow: "0 2px 12px rgba(0, 0, 0, 0.1)",
+              minWidth: "300px",
+              maxWidth: "500px"
+            },
+            onClick: (h) => h.stopPropagation()
+          }, [
+            // Header
+            b("div", {
+              class: "x-message-box__header",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "16px 20px",
+                borderBottom: "1px solid #eee"
+              }
+            }, n),
+            // Body
+            b("div", {
+              class: "x-message-box__body",
+              style: {
+                padding: "20px",
+                fontSize: "14px",
+                color: "#606266"
+              }
+            }, p),
+            // Footer
+            b("div", {
+              class: "x-message-box__footer",
+              style: {
+                padding: "10px 20px 16px",
+                textAlign: "right"
+              }
+            }, r)
+          ])
+        ]);
+      }
+    }), i = me(o);
+    i.mount(t);
+    const f = {
+      app: i,
+      container: t,
+      close: () => {
+        var u;
+        const d = (u = i._instance) == null ? void 0 : u.proxy;
+        d != null && d.handleClose && d.handleClose();
+      }
+    };
+    G.push(f);
+  });
+}
+async function Re(e, l, t) {
+  return re({
+    message: e,
+    title: l,
+    ...t,
+    showConfirmButton: !0,
+    showCancelButton: !1
+  });
+}
+async function Ve(e, l, t) {
+  return re({
+    message: e,
+    title: l,
+    ...t,
+    showConfirmButton: !0,
+    showCancelButton: !0
+  });
+}
+async function _e(e, l, t) {
+  return re({
+    message: e,
+    title: l,
+    ...t,
+    showInput: !0,
+    showConfirmButton: !0,
+    showCancelButton: !0
+  });
+}
+function He(e) {
+  return re(e);
+}
+const K = Object.assign(He, {
+  alert: Re,
+  confirm: Ve,
+  prompt: _e,
+  closeAll: Le
+}), tt = K, ot = {
+  install(e) {
+    e.config.globalProperties.$msgbox = K, e.config.globalProperties.$alert = K.alert, e.config.globalProperties.$confirm = K.confirm, e.config.globalProperties.$prompt = K.prompt, e.provide("messageBox", K);
+  }
+}, J = [];
+let Ne = 1;
+const Oe = () => {
+  J.slice().forEach((e) => e.close());
+}, Ae = {
+  success: { icon: "✓", color: "#67c23a" },
+  warning: { icon: "⚠", color: "#e6a23c" },
+  error: { icon: "✕", color: "#f56c6c" },
+  info: { icon: "ℹ", color: "#909399" }
+}, We = (e, l) => {
+  const t = J.filter((o) => o.position === e);
+  let a = 16;
+  for (const o of t)
+    if (o.id < l) {
+      const i = o.container.firstElementChild;
+      i && (a += i.offsetHeight + 16);
+    }
+  return a;
+}, De = (e, l) => {
+  const t = {
+    position: "fixed",
+    width: "330px",
+    zIndex: "2010"
+  };
+  switch (e) {
+    case "top-right":
+      t.top = `${l}px`, t.right = "16px";
+      break;
+    case "top-left":
+      t.top = `${l}px`, t.left = "16px";
+      break;
+    case "bottom-right":
+      t.bottom = `${l}px`, t.right = "16px";
+      break;
+    case "bottom-left":
+      t.bottom = `${l}px`, t.left = "16px";
+      break;
+    default:
+      t.top = `${l}px`, t.right = "16px";
+  }
+  return t;
+};
+function ye(e) {
+  const l = Ne++, t = e.position || "top-right", a = document.createElement("div");
+  document.body.appendChild(a);
+  let o = null, i = !1;
+  const f = N({
+    name: "TNotification",
+    setup() {
+      const n = E(!1), p = () => {
+        i || (i = !0, n.value = !1, setTimeout(() => {
+          var C;
+          const w = J.findIndex((s) => s.id === l);
+          w !== -1 && J.splice(w, 1), o && clearTimeout(o), (C = e.onClose) == null || C.call(e);
+          try {
+            d.unmount();
+          } catch {
+          }
+          a.parentNode && a.parentNode.removeChild(a);
+        }, 300));
+      }, r = () => {
+        const w = e.duration ?? 4500;
+        w > 0 && (o = setTimeout(p, w));
+      }, h = () => {
+        o && (clearTimeout(o), o = null);
+      }, g = I(() => (e.offset ?? 0) + We(t, l)), B = I(() => De(t, g.value));
+      return Q(() => {
+        n.value = !0, r();
+      }), {
+        visible: n,
+        close: p,
+        positionStyles: B,
+        startTimer: r,
+        clearTimer: h
+      };
+    },
+    render() {
+      if (!this.visible) return null;
+      const n = e.type, p = n ? Ae[n] : null, r = [];
+      e.title && r.push(
+        b("div", {
+          class: "x-notification__title",
+          style: {
+            fontWeight: "600",
+            fontSize: "16px",
+            color: "#303133",
+            marginBottom: e.message ? "6px" : "0"
+          }
+        }, e.title)
+      ), e.message && (e.dangerouslyUseHTMLString ? r.push(
+        b("div", {
+          class: "x-notification__content",
+          style: {
+            fontSize: "14px",
+            color: "#606266",
+            lineHeight: "1.5"
+          },
+          innerHTML: e.message
+        })
+      ) : r.push(
+        b("div", {
+          class: "x-notification__content",
+          style: {
+            fontSize: "14px",
+            color: "#606266",
+            lineHeight: "1.5"
+          }
+        }, e.message)
+      ));
+      const h = [];
+      return p && h.push(
+        b("div", {
+          class: "x-notification__icon",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "24px",
+            height: "24px",
+            marginRight: "12px",
+            fontSize: "18px",
+            color: p.color
+          }
+        }, p.icon)
+      ), h.push(
+        b("div", {
+          class: "x-notification__main",
+          style: {
+            flex: "1"
+          }
+        }, r)
+      ), e.showClose !== !1 && h.push(
+        b("button", {
+          class: "x-notification__close",
+          style: {
+            position: "absolute",
+            top: "18px",
+            right: "15px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            fontSize: "14px",
+            color: "#909399",
+            padding: "0"
+          },
+          onClick: (g) => {
+            g.stopPropagation(), this.close();
+          }
+        }, "✕")
+      ), b("div", {
+        class: ["x-notification", e.customClass],
+        style: {
+          ...this.positionStyles,
+          display: "flex",
+          alignItems: "flex-start",
+          padding: "14px 26px 14px 13px",
+          borderRadius: "8px",
+          backgroundColor: "#fff",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+          transition: "opacity 0.3s, transform 0.3s",
+          boxSizing: "border-box"
+        },
+        onMouseenter: this.clearTimer,
+        onMouseleave: this.startTimer
+      }, h);
+    }
+  }), d = me(f);
+  d.mount(a);
+  const u = {
+    id: l,
+    app: d,
+    container: a,
+    position: t,
+    close: () => {
+      var p;
+      const n = (p = d._instance) == null ? void 0 : p.proxy;
+      n != null && n.close && n.close();
+    }
+  };
+  return J.push(u), { close: u.close };
+}
+function Xe(e) {
+  return ye(typeof e == "string" ? { message: e } : e);
+}
+const se = (e) => (l) => ye({ ...typeof l == "string" ? { message: l } : l, type: e }), fe = Object.assign(Xe, {
+  info: se("info"),
+  success: se("success"),
+  warning: se("warning"),
+  error: se("error"),
+  closeAll: Oe
+}), st = fe, nt = {
+  install(e) {
+    e.config.globalProperties.$notify = fe, e.provide("notification", fe);
+  }
+};
+export {
+  Ue as Alert,
+  Ge as Backtop,
+  Ke as Drawer,
+  Je as Message,
+  tt as MessageBox,
+  Qe as MessageComponent,
+  Ze as Modal,
+  st as Notification,
+  qe as Popconfirm,
+  et as TMessage,
+  ot as TMessageBox,
+  nt as TNotification,
+  Ye as Tooltip
+};

package/es/style.css

@@ -0,0 +1 @@
+.x-modal{position:relative;margin:0 auto 20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 12px #00000026;max-height:43vh;display:flex;flex-direction:column}.x-modal__wrapper{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:2000;display:flex;justify-content:center}.x-modal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e8e8e8;flex-shrink:0}.x-modal__title{font-size:15px;font-weight:500;color:#303133}.x-modal__close{background:none;border:none;font-size:16px;color:#909399;cursor:pointer}.x-modal__close:hover{color:#409eff}.x-modal__body{padding:16px;color:#606266;font-size:14px;overflow-y:auto;flex:1}.x-modal__footer{padding:10px 16px 14px;text-align:right;flex-shrink:0}.x-modal-fade-enter-active,.x-modal-fade-leave-active{transition:opacity .3s ease}.x-modal-fade-enter-from,.x-modal-fade-leave-to{opacity:0}.x-drawer__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080}.x-drawer{position:fixed;background-color:#fff;box-shadow:0 8px 10px -5px #0003;transition:transform .3s}.x-drawer--ltr{top:0;left:0}.x-drawer--rtl{top:0;right:0}.x-drawer--ttb{top:0;left:0}.x-drawer--btt{bottom:0;left:0}.x-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e8e8e8}.x-drawer__title{font-size:18px;font-weight:500;color:#303133}.x-drawer__close{background:none;border:none;font-size:20px;color:#909399;cursor:pointer}.x-drawer__close:hover{color:#409eff}.x-drawer__body{padding:20px;height:calc(100% - 60px);overflow-y:auto}.x-drawer__footer{padding:16px 20px;border-top:1px solid #e8e8e8;text-align:right}.x-drawer-fade-enter-active,.x-drawer-fade-leave-active{transition:opacity .3s}.x-drawer-fade-enter-active .x-drawer,.x-drawer-fade-leave-active .x-drawer{transition:transform .3s}.x-drawer-fade-enter-from,.x-drawer-fade-leave-to{opacity:0}.x-drawer-fade-enter-from .x-drawer--ltr,.x-drawer-fade-leave-to .x-drawer--ltr{transform:translate(-100%)}.x-drawer-fade-enter-from .x-drawer--rtl,.x-drawer-fade-leave-to .x-drawer--rtl{transform:translate(100%)}.x-drawer-fade-enter-from .x-drawer--ttb,.x-drawer-fade-leave-to .x-drawer--ttb{transform:translateY(-100%)}.x-drawer-fade-enter-from .x-drawer--btt,.x-drawer-fade-leave-to .x-drawer--btt{transform:translateY(100%)}.x-alert{position:relative;padding:12px 16px;margin-bottom:16px;border-radius:4px;display:flex;align-items:flex-start;transition:opacity .3s}.x-alert--success{background-color:#e1f3d8;color:#67c23a}.x-alert--success .x-alert__icon{color:#67c23a}.x-alert--warning{background-color:#fdf6ec;color:#e6a23c}.x-alert--warning .x-alert__icon{color:#e6a23c}.x-alert--error{background-color:#fef0f0;color:#f56c6c}.x-alert--error .x-alert__icon{color:#f56c6c}.x-alert--info{background-color:#f4f4f5;color:#909399}.x-alert--info .x-alert__icon{color:#909399}.x-alert.is-center{justify-content:center;text-align:center}.x-alert.is-with-description{padding:14px 16px}.x-alert.is-with-description .x-alert__title{font-weight:500;font-size:16px}.x-alert__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:10px;font-size:16px}.x-alert__content{flex:1}.x-alert__title{display:block;font-size:14px;font-weight:500}.x-alert__description{display:block;font-size:14px;margin-top:6px;opacity:.8}.x-alert__close{position:absolute;top:12px;right:12px;background:none;border:none;cursor:pointer;font-size:14px;opacity:.6}.x-alert__close:hover{opacity:1}.x-alert-fade-enter-active,.x-alert-fade-leave-active{transition:opacity .2s ease}.x-alert-fade-enter-from,.x-alert-fade-leave-to{opacity:0}.x-tooltip{padding:8px 12px;font-size:13px;line-height:1.4;border-radius:4px;max-width:300px;word-wrap:break-word;position:fixed}.x-tooltip--dark{background-color:#303133;color:#fff;box-shadow:0 2px 8px #00000026}.x-tooltip--dark .x-tooltip__arrow--top{border-top-color:#303133}.x-tooltip--dark .x-tooltip__arrow--bottom{border-bottom-color:#303133}.x-tooltip--dark .x-tooltip__arrow--left{border-left-color:#303133}.x-tooltip--dark .x-tooltip__arrow--right{border-right-color:#303133}.x-tooltip--light{background-color:#fff;color:#303133;box-shadow:0 2px 12px #0000001f}.x-tooltip--light .x-tooltip__arrow--top{border-top-color:#fff}.x-tooltip--light .x-tooltip__arrow--bottom{border-bottom-color:#fff}.x-tooltip--light .x-tooltip__arrow--left{border-left-color:#fff}.x-tooltip--light .x-tooltip__arrow--right{border-right-color:#fff}.x-tooltip__wrapper,.x-tooltip__trigger{display:inline-block}.x-tooltip__arrow{position:absolute;width:0;height:0;border:6px solid transparent}.x-tooltip__arrow--top{bottom:-12px;left:50%;transform:translate(-50%);border-bottom:none}.x-tooltip__arrow--bottom{top:-12px;left:50%;transform:translate(-50%);border-top:none}.x-tooltip__arrow--left{right:-12px;top:50%;transform:translateY(-50%);border-right:none}.x-tooltip__arrow--right{left:-12px;top:50%;transform:translateY(-50%);border-left:none}.x-tooltip-fade-enter-active,.x-tooltip-fade-leave-active{transition:opacity .2s ease,transform .2s ease}.x-tooltip-fade-enter-from,.x-tooltip-fade-leave-to{opacity:0;transform:scale(.9)}.x-popconfirm-wrapper,.x-popconfirm-trigger{display:inline-block}.x-popconfirm{background:#fff;border-radius:4px;box-shadow:0 2px 12px #0000001a;padding:12px 16px;box-sizing:border-box}.x-popconfirm__arrow{position:absolute;width:12px;height:12px;background:#fff;box-shadow:-1px -1px 2px #0000000d}.x-popconfirm__main{display:flex;align-items:flex-start;margin-bottom:12px}.x-popconfirm__icon{display:flex;align-items:center;justify-content:center;font-size:16px;margin-right:8px;flex-shrink:0}.x-popconfirm__title{font-size:14px;color:#606266;line-height:1.4}.x-popconfirm__action{display:flex;justify-content:flex-end;gap:8px}.x-popconfirm-fade-enter-active,.x-popconfirm-fade-leave-active{transition:opacity .2s,transform .2s}.x-popconfirm-fade-enter-from,.x-popconfirm-fade-leave-to{opacity:0;transform:scale(.9)}.x-backtop{position:fixed;width:40px;height:40px;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #0000001f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:1000}.x-backtop:hover{background-color:#f5f5f5;box-shadow:0 4px 12px #00000026}.x-backtop:active{transform:scale(.95)}.x-backtop__icon{font-size:20px;color:#606266;font-weight:700}.x-fade-enter-active,.x-fade-leave-active{transition:opacity .3s,transform .3s}.x-fade-enter-from,.x-fade-leave-to{opacity:0;transform:translateY(20px)}.x-message{position:fixed;left:50%;top:20px;transform:translate(-50%);display:flex;align-items:center;padding:12px 16px;border-radius:4px;box-shadow:0 2px 12px #0000001a;transition:opacity .3s,transform .3s,top .3s;min-width:280px;max-width:480px}.x-message--success{background-color:#f0f9eb;border:1px solid #67c23a}.x-message--success .x-message__icon{color:#67c23a}.x-message--warning{background-color:#fdf6ec;border:1px solid #e6a23c}.x-message--warning .x-message__icon{color:#e6a23c}.x-message--error{background-color:#fef0f0;border:1px solid #f56c6c}.x-message--error .x-message__icon{color:#f56c6c}.x-message--info{background-color:#f4f4f5;border:1px solid #909399}.x-message--info .x-message__icon{color:#909399}.x-message.is-center{justify-content:center;text-align:center}.x-message.is-closable{padding-right:40px}.x-message__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:10px;font-size:16px;flex-shrink:0}.x-message__content{flex:1;font-size:14px;color:#606266;line-height:1.4;word-break:break-word}.x-message__close{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:14px;color:#909399;padding:0}.x-message__close:hover{color:#606266}.x-message-fade-enter-active,.x-message-fade-leave-active{transition:opacity .3s,transform .3s}.x-message-fade-enter-from,.x-message-fade-leave-to{opacity:0;transform:translate(-50%) translateY(-100%)}

package/lib/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),z=require("@xto/core"),q=e.defineComponent({name:"XModal",__name:"index",props:{modelValue:{type:Boolean,default:!1},title:{default:""},width:{default:"50%"},top:{default:"15vh"},modal:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},center:{type:Boolean,default:!1},destroyOnClose:{type:Boolean,default:!1}},emits:["update:modelValue","close","open"],setup(t,{emit:a}){const o=t,r=a,n=z.useNamespace("modal"),{next:i}=z.useZIndex(),m=e.ref(i()),u=e.computed({get:()=>o.modelValue,set:g=>r("update:modelValue",g)}),f=e.ref(),l=()=>{u.value=!1,r("close")},p=()=>{o.closeOnClickModal&&o.modal&&l()};z.useEscape(()=>{o.closeOnPressEscape&&u.value&&l()}),e.watch(()=>o.modelValue,g=>{g&&(m.value=i(),r("open"))});const c=e.computed(()=>({paddingTop:o.top})),h=e.computed(()=>({width:typeof o.width=="number"?`${o.width}px`:o.width,zIndex:m.value}));return(g,C)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"x-modal-fade"},{default:e.withCtx(()=>[t.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(n).e("wrapper")),style:e.normalizeStyle(c.value),onClick:p},[e.createElementVNode("div",{ref_key:"modalRef",ref:f,class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(h.value),onClick:C[0]||(C[0]=e.withModifiers(()=>{},["stop"]))},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).e("header"))},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(n).e("title"))},[e.renderSlot(g.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],2),t.showClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(e.unref(n).e("close")),onClick:l}," ✕ ",2)):e.createCommentVNode("",!0)],2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).e("body"))},[e.renderSlot(g.$slots,"default")],2),g.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(n).e("footer"))},[e.renderSlot(g.$slots,"footer")],2)):e.createCommentVNode("",!0)],6)],6)):e.createCommentVNode("",!0)]),_:3})]))}}),K=e.defineComponent({name:"XDrawer",__name:"index",props:{modelValue:{type:Boolean,default:!1},title:{default:""},direction:{default:"rtl"},size:{default:"30%"},withHeader:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},destroyOnClose:{type:Boolean,default:!1}},emits:["update:modelValue","close","open"],setup(t,{emit:a}){const o=t,r=a,n=z.useNamespace("drawer"),i=e.ref(2e3),m=()=>{r("update:modelValue",!1),r("close")},u=()=>{o.closeOnClickModal&&m()},f=c=>{c.key==="Escape"&&o.modelValue&&m()};e.watch(()=>o.modelValue,c=>{c?(i.value=2e3+Math.floor(Math.random()*100),r("open"),document.addEventListener("keydown",f)):document.removeEventListener("keydown",f)});const l=e.computed(()=>({zIndex:i.value})),p=e.computed(()=>{const c=typeof o.size=="number"?`${o.size}px`:o.size;return{ltr:{width:c,height:"100%"},rtl:{width:c,height:"100%"},ttb:{width:"100%",height:c},btt:{width:"100%",height:c}}[o.direction]});return(c,h)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"x-drawer-fade"},{default:e.withCtx(()=>[t.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(n).e("overlay")),style:e.normalizeStyle(l.value),onClick:u},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(n).b(),e.unref(n).m(t.direction)]),style:e.normalizeStyle(p.value),onClick:h[0]||(h[0]=e.withModifiers(()=>{},["stop"]))},[t.withHeader?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(n).e("header"))},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(n).e("title"))},[e.renderSlot(c.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],2),t.showClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(e.unref(n).e("close")),onClick:m}," ✕ ",2)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).e("body"))},[e.renderSlot(c.$slots,"default")],2),c.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(n).e("footer"))},[e.renderSlot(c.$slots,"footer")],2)):e.createCommentVNode("",!0)],6)],6)):e.createCommentVNode("",!0)]),_:3})]))}}),Y=e.defineComponent({name:"XAlert",__name:"index",props:{type:{default:"info"},title:{default:""},description:{},closable:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!1},center:{type:Boolean,default:!1}},emits:["close"],setup(t,{emit:a}){const o=t,r=a,n=z.useNamespace("alert"),i=e.ref(!0),m={success:"✓",warning:"⚠",error:"✕",info:"ℹ"},u=e.computed(()=>[n.b(),n.m(o.type),n.is("center",o.center),n.is("with-description",o.description)]),f=l=>{i.value=!1,r("close",l)};return(l,p)=>(e.openBlock(),e.createBlock(e.Transition,{name:"x-alert-fade"},{default:e.withCtx(()=>[i.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(u.value)},[t.showIcon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(n).e("icon"))},e.toDisplayString(m[t.type]),3)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).e("content"))},[t.title||l.$slots.title?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(n).e("title"))},[e.renderSlot(l.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],2)):e.createCommentVNode("",!0),t.description||l.$slots.default?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(e.unref(n).e("description"))},[e.renderSlot(l.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.description),1)])],2)):e.createCommentVNode("",!0)],2),t.closable?(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(e.unref(n).e("close")),onClick:f}," ✕ ",2)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)]),_:3}))}}),G=e.defineComponent({name:"XTooltip",__name:"index",props:{content:{default:""},placement:{default:"top"},effect:{default:"dark"},disabled:{type:Boolean,default:!1},offset:{default:8},transition:{default:"fade"},visibleArrow:{type:Boolean,default:!0},trigger:{default:"hover"},openDelay:{default:0},closeDelay:{default:0}},emits:["update:visible","show","hide"],setup(t,{emit:a}){const o=t,r=a,n=z.useNamespace("tooltip"),i=e.ref(!1),m=e.ref(),u=e.ref();let f,l;const p=e.ref({}),c=()=>{if(!m.value||!u.value)return;const b=m.value.getBoundingClientRect(),S=u.value;S.style.visibility="hidden",S.style.display="block";const E=S.offsetWidth,V=S.offsetHeight,N=o.offset,W=window.innerWidth,j=window.innerHeight;let B=0,T=0,I=o.placement;switch(o.placement){case"top":B=b.top-V-N,T=b.left+(b.width-E)/2;break;case"bottom":B=b.bottom+N,T=b.left+(b.width-E)/2;break;case"left":B=b.top+(b.height-V)/2,T=b.left-E-N;break;case"right":B=b.top+(b.height-V)/2,T=b.right+N;break}o.placement==="top"&&B<0?(I="bottom",B=b.bottom+N):o.placement==="bottom"&&B+V>j?(I="top",B=b.top-V-N):o.placement==="left"&&T<0?(I="right",T=b.right+N):o.placement==="right"&&T+E>W&&(I="left",T=b.left-E-N),T<8&&(T=8),T+E>W-8&&(T=W-E-8),B<8&&(B=8),B+V>j-8&&(B=j-V-8),p.value={position:"fixed",top:`${B}px`,left:`${T}px`,visibility:"visible",zIndex:"2000"},h.value=I},h=e.ref(o.placement),g=()=>{o.disabled||(clearTimeout(l),f=setTimeout(()=>{i.value=!0,r("update:visible",!0),r("show"),e.nextTick(()=>{c()})},o.openDelay))},C=()=>{clearTimeout(f),l=setTimeout(()=>{i.value=!1,r("update:visible",!1),r("hide")},o.closeDelay)},y=()=>{i.value?C():g()},v=()=>{o.trigger==="hover"&&g()},s=()=>{o.trigger==="hover"&&C()},d=()=>{o.trigger==="click"&&y()},$=()=>{o.trigger==="focus"&&g()},w=()=>{o.trigger==="focus"&&C()},k=b=>{var S,E;o.trigger==="click"&&!((S=m.value)!=null&&S.contains(b.target))&&!((E=u.value)!=null&&E.contains(b.target))&&C()},x=()=>{i.value&&c()};e.watch(i,b=>{b?e.nextTick(()=>{c(),o.trigger==="click"&&document.addEventListener("click",k),window.addEventListener("scroll",x,!0),window.addEventListener("resize",x)}):(document.removeEventListener("click",k),window.removeEventListener("scroll",x,!0),window.removeEventListener("resize",x))}),e.onUnmounted(()=>{clearTimeout(f),clearTimeout(l),document.removeEventListener("click",k),window.removeEventListener("scroll",x,!0),window.removeEventListener("resize",x)});const D=e.computed(()=>[n.b(),n.m(o.effect)]),_=e.computed(()=>[n.e("arrow"),n.e(`arrow-${h.value}`)]);return(b,S)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(n).e("wrapper"))},[e.createElementVNode("div",{ref_key:"triggerRef",ref:m,class:e.normalizeClass(e.unref(n).e("trigger")),onMouseenter:v,onMouseleave:s,onClick:d,onFocus:$,onBlur:w},[e.renderSlot(b.$slots,"default")],34),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:`x-tooltip-${t.transition}`},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"tooltipRef",ref:u,class:e.normalizeClass(D.value),style:e.normalizeStyle(p.value),onMouseenter:v,onMouseleave:s},[e.renderSlot(b.$slots,"content",{},()=>[e.createTextVNode(e.toDisplayString(t.content),1)]),t.visibleArrow?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(_.value)},null,2)):e.createCommentVNode("",!0)],38),[[e.vShow,i.value]])]),_:3},8,["name"])]))],2))}}),J={class:"x-popconfirm-wrapper"},Q={class:"x-popconfirm__main"},ee={class:"x-popconfirm__title"},te={class:"x-popconfirm__action"},oe=e.defineComponent({name:"XPopconfirm",__name:"index",props:{title:{default:""},confirmButtonText:{default:"确定"},cancelButtonText:{default:"取消"},confirmButtonType:{default:"primary"},cancelButtonType:{default:"default"},icon:{default:""},iconColor:{default:"#faad14"},hideIcon:{type:Boolean,default:!1},hideCancelButton:{type:Boolean,default:!1},hideConfirmButton:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},width:{default:200},placement:{default:"top"},offset:{default:12},showArrow:{type:Boolean,default:!0}},emits:["confirm","cancel"],setup(t,{emit:a}){const o=t,r=a,n=e.ref(!1),i=e.ref(null),m=e.ref(null),u=e.ref({}),f=()=>{if(!i.value||!m.value)return;const s=i.value.getBoundingClientRect(),d=m.value.getBoundingClientRect(),$=o.placement,w=o.offset;let k=0,x=0;switch($){case"top":k=s.top-d.height-w,x=s.left+(s.width-d.width)/2;break;case"top-start":k=s.top-d.height-w,x=s.left;break;case"top-end":k=s.top-d.height-w,x=s.right-d.width;break;case"bottom":k=s.bottom+w,x=s.left+(s.width-d.width)/2;break;case"bottom-start":k=s.bottom+w,x=s.left;break;case"bottom-end":k=s.bottom+w,x=s.right-d.width;break;case"left":k=s.top+(s.height-d.height)/2,x=s.left-d.width-w;break;case"left-start":k=s.top,x=s.left-d.width-w;break;case"left-end":k=s.bottom-d.height,x=s.left-d.width-w;break;case"right":k=s.top+(s.height-d.height)/2,x=s.right+w;break;case"right-start":k=s.top,x=s.right+w;break;case"right-end":k=s.bottom-d.height,x=s.right+w;break;default:k=s.top-d.height-w,x=s.left+(s.width-d.width)/2}const D=window.innerWidth,_=window.innerHeight;x<0&&(x=10),x+d.width>D&&(x=D-d.width-10),k<0&&(k=10),k+d.height>_&&(k=_-d.height-10),u.value={position:"fixed",top:`${k}px`,left:`${x}px`,zIndex:"2000"}},l=s=>{var d,$;n.value&&((d=i.value)!=null&&d.contains(s.target)||($=m.value)!=null&&$.contains(s.target)||(n.value=!1))},p=s=>{o.disabled||(s.stopPropagation(),n.value=!n.value,n.value&&setTimeout(f,0))},c=()=>{n.value=!1,r("confirm")},h=()=>{n.value=!1,r("cancel")},g=()=>{n.value&&f()},C=()=>{n.value&&f()};e.watch(n,s=>{s?(setTimeout(f,0),document.addEventListener("click",l),window.addEventListener("scroll",g,!0),window.addEventListener("resize",C)):(document.removeEventListener("click",l),window.removeEventListener("scroll",g,!0),window.removeEventListener("resize",C))}),e.onUnmounted(()=>{document.removeEventListener("click",l),window.removeEventListener("scroll",g,!0),window.removeEventListener("resize",C)});const y=e.computed(()=>({width:typeof o.width=="number"?`${o.width}px`:o.width})),v=e.computed(()=>{const s=o.placement,d={};switch(s){case"top":case"top-start":case"top-end":d.bottom="-6px",d.transform="rotate(45deg)";break;case"bottom":case"bottom-start":case"bottom-end":d.top="-6px",d.transform="rotate(225deg)";break;case"left":case"left-start":case"left-end":d.right="-6px",d.transform="rotate(315deg)";break;case"right":case"right-start":case"right-end":d.left="-6px",d.transform="rotate(135deg)";break}return d});return(s,d)=>(e.openBlock(),e.createElementBlock("span",J,[e.createElementVNode("span",{ref_key:"triggerRef",ref:i,class:"x-popconfirm-trigger",onClick:p},[e.renderSlot(s.$slots,"default")],512),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"x-popconfirm-fade"},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"popperRef",ref:m,class:"x-popconfirm",style:e.normalizeStyle({...u.value,...y.value}),onClick:d[0]||(d[0]=e.withModifiers(()=>{},["stop"]))},[t.showArrow?(e.openBlock(),e.createElementBlock("span",{key:0,class:"x-popconfirm__arrow",style:e.normalizeStyle(v.value)},null,4)):e.createCommentVNode("",!0),e.createElementVNode("div",Q,[t.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:"x-popconfirm__icon",style:e.normalizeStyle({color:t.iconColor})},[e.renderSlot(s.$slots,"icon",{},()=>[e.createTextVNode(e.toDisplayString(t.icon||"⚠"),1)])],4)),e.createElementVNode("div",ee,[e.renderSlot(s.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])])]),e.createElementVNode("div",te,[t.hideCancelButton?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,class:"x-button p-button--default p-button--small",onClick:h},e.toDisplayString(t.cancelButtonText),1)),t.hideConfirmButton?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["x-button x-button--small",`x-button--${t.confirmButtonType}`]),onClick:c},e.toDisplayString(t.confirmButtonText),3))])],4)):e.createCommentVNode("",!0)]),_:3})]))]))}}),ne=e.defineComponent({name:"XBacktop",__name:"index",props:{visibilityHeight:{default:200},right:{default:40},bottom:{default:40}},emits:["click"],setup(t,{emit:a}){const o=t,r=a,n=z.useNamespace("backtop"),i=e.ref(!1),m=()=>{const l=window.scrollY||document.documentElement.scrollTop||document.body.scrollTop||0;i.value=l>=o.visibilityHeight},u=l=>{window.scrollTo({top:0,behavior:"smooth"}),r("click",l)},f=e.computed(()=>({right:`${o.right}px`,bottom:`${o.bottom}px`}));return e.onMounted(()=>{window.addEventListener("scroll",m,{passive:!0,capture:!0}),setTimeout(m,100)}),e.onUnmounted(()=>{window.removeEventListener("scroll",m,!0)}),(l,p)=>(e.openBlock(),e.createBlock(e.Transition,{name:"x-fade"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(f.value),onClick:u},[e.renderSlot(l.$slots,"default",{},()=>[e.createElementVNode("span",{class:e.normalizeClass(e.unref(n).e("icon"))},"↑",2)])],6),[[e.vShow,i.value]])]),_:3}))}}),se=e.defineComponent({name:"XMessage",__name:"index",props:{message:{default:""},type:{default:"info"},duration:{default:3e3},showClose:{type:Boolean,default:!1},center:{type:Boolean,default:!1},offset:{default:20},customClass:{},onClose:{}},emits:["close","destroy"],setup(t,{expose:a,emit:o}){const r=t,n=o,i=z.useNamespace("message"),m=e.ref(!1),u=e.ref(z.nextMessageZIndex()),f={success:"✓",warning:"⚠",error:"✕",info:"ℹ"},l=e.computed(()=>[i.b(),i.m(r.type),i.is("center",r.center),i.is("closable",r.showClose),r.customClass]),p=e.computed(()=>({top:`${r.offset}px`,zIndex:u.value}));let c=null;const h=()=>{r.duration>0&&(c=setTimeout(()=>{C()},r.duration))},g=()=>{c&&(clearTimeout(c),c=null)},C=()=>{var v;m.value=!1,(v=r.onClose)==null||v.call(r),n("close")},y=()=>{n("destroy")};return e.onMounted(()=>{h(),m.value=!0}),e.onUnmounted(()=>{g()}),a({close:C}),(v,s)=>(e.openBlock(),e.createBlock(e.Transition,{name:"x-message-fade",onAfterLeave:y},{default:e.withCtx(()=>[m.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(l.value),style:e.normalizeStyle(p.value),onMouseenter:g,onMouseleave:h},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(i).e("icon"))},e.toDisplayString(f[t.type]),3),e.createElementVNode("span",{class:e.normalizeClass(e.unref(i).e("content"))},[e.renderSlot(v.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.message),1)])],2),t.showClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(e.unref(i).e("close")),onClick:C}," ✕ ",2)):e.createCommentVNode("",!0)],38)):e.createCommentVNode("",!0)]),_:3}))}}),L=[];let le=1;const ae=()=>{L.slice().forEach(t=>t.close())};function U(t){const a=le++,o=document.createElement("div");document.body.appendChild(o);const r={success:{bg:"#f0f9eb",border:"#67c23a",icon:"✓"},warning:{bg:"#fdf6ec",border:"#e6a23c",icon:"⚠"},error:{bg:"#fef0f0",border:"#f56c6c",icon:"✕"},info:{bg:"#f4f4f5",border:"#909399",icon:"ℹ"}},n=t.type||"info",i=r[n]||r.info,m=e.reactive({visible:!1,offset:t.offset??20});let u=t.offset??20;L.forEach(y=>{const v=y.container.firstElementChild;v&&v.offsetHeight&&(u+=v.offsetHeight+16)}),m.offset=u;let f=null,l=!1;const p=()=>{l||(m.visible=!1,setTimeout(()=>{if(l)return;l=!0;const y=L.findIndex(v=>v.id===a);y!==-1&&L.splice(y,1);try{g.unmount()}catch{}o.parentNode&&o.parentNode.removeChild(o)},300))},c=()=>{const y=t.duration??3e3;y>0&&(f=setTimeout(p,y))},h=()=>{f&&(clearTimeout(f),f=null)},g=e.createApp({render(){if(!m.visible)return null;const y=[e.h("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px",marginRight:"10px",fontSize:"16px",color:i.border}},i.icon),e.h("span",{style:{flex:"1",fontSize:"14px",color:"#606266",lineHeight:"1.4"}},t.message||"")];return t.showClose&&y.push(e.h("button",{style:{position:"absolute",top:"50%",right:"12px",transform:"translateY(-50%)",background:"none",border:"none",cursor:"pointer",fontSize:"14px",color:"#909399",padding:"0"},onClick:v=>{v.stopPropagation(),p()}},"✕")),e.h("div",{class:["x-message",`x-message--${n}`,t.center?"is-center":"",t.showClose?"is-closable":""],style:{position:"fixed",left:"50%",top:`${m.offset}px`,transform:"translateX(-50%)",display:"flex",alignItems:"center",padding:t.showClose?"12px 40px 12px 16px":"12px 16px",borderRadius:"4px",boxShadow:"0 2px 12px rgba(0,0,0,0.1)",minWidth:"280px",maxWidth:"480px",backgroundColor:i.bg,border:`1px solid ${i.border}`,zIndex:2e3+a,transition:"opacity 0.3s, transform 0.3s"},onMouseenter:h,onMouseleave:c},y)}});g.mount(o),e.nextTick(()=>{m.visible=!0,c()});const C={id:a,app:g,container:o,close:p};return L.push(C),{close:p}}function ie(t){return U(typeof t=="string"?{message:t}:t)}const H=t=>a=>U({...typeof a=="string"?{message:a}:a,type:t}),X=Object.assign(ie,{info:H("info"),success:H("success"),warning:H("warning"),error:H("error"),closeAll:ae}),re=X,ce=se,de={install(t){t.config.globalProperties.$message=X,t.provide("message",X)}},P=[],ue=()=>{P.slice().forEach(t=>t.close())},fe={success:{icon:"✓",color:"#67c23a"},warning:{icon:"⚠",color:"#e6a23c"},error:{icon:"✕",color:"#f56c6c"},info:{icon:"ℹ",color:"#909399"}};function A(t){return new Promise(a=>{const o=document.createElement("div");document.body.appendChild(o);let r=!1;const n=e.defineComponent({name:"TMessageBox",setup(){const u=e.ref(!1),f=e.ref(t.inputValue??""),l=e.ref(""),p=2e3+P.length+1,c=v=>{r||(r=!0,u.value=!1,setTimeout(()=>{const s=P.findIndex(d=>d.container===o);s!==-1&&P.splice(s,1);try{i.unmount()}catch{}o.parentNode&&o.parentNode.removeChild(o),a({action:v,value:v==="confirm"?f.value:void 0})},300))},h=()=>{if(t.showInput&&t.inputPattern&&!t.inputPattern.test(f.value)){l.value=t.inputErrorMessage||"输入格式不正确";return}l.value="",c("confirm")},g=()=>{c("cancel")},C=()=>{c("close")},y=()=>{t.closeOnClickModal!==!1&&C()};return e.nextTick(()=>{u.value=!0}),{visible:u,inputValue:f,inputError:l,zIndex:p,handleConfirm:h,handleCancel:g,handleClose:C,handleMaskClick:y}},render(){if(!this.visible)return null;const u=t.type,f=u?fe[u]:null,l=[];f&&l.push(e.h("span",{class:"x-message-box__icon",style:{color:f.color,marginRight:"10px",fontSize:"20px"}},f.icon)),l.push(e.h("span",{class:"x-message-box__title"},t.title||"提示")),t.showClose!==!1&&l.push(e.h("button",{class:"x-message-box__close",onClick:this.handleClose},"✕"));const p=[];p.push(e.h("div",{class:"x-message-box__content"},t.message||"")),t.showInput&&p.push(e.h("div",{class:"x-message-box__input",style:{marginTop:"12px"}},[e.h("input",{class:["x-message-box__input-inner",this.inputError?"is-error":""].filter(Boolean),type:t.inputType||"text",placeholder:t.inputPlaceholder||"请输入",value:this.inputValue,onInput:h=>{this.inputValue=h.target.value,this.inputError=""},onKeyup:h=>{h.key==="Enter"&&this.handleConfirm()}}),this.inputError?e.h("div",{class:"x-message-box__error",style:{color:"#f56c6c",fontSize:"12px",marginTop:"4px"}},this.inputError):null]));const c=[];return t.showCancelButton&&c.push(e.h("button",{class:"x-button p-button--default",onClick:this.handleCancel},t.cancelButtonText||"取消")),t.showConfirmButton!==!1&&c.push(e.h("button",{class:"x-button p-button--primary",onClick:this.handleConfirm,style:{marginLeft:"10px"}},t.confirmButtonText||"确定")),e.h("div",{class:["x-message-box-wrapper",t.center?"is-center":""],style:{position:"fixed",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(0, 0, 0, 0.5)",zIndex:this.zIndex},onClick:this.handleMaskClick},[e.h("div",{class:["x-message-box",t.customClass],style:{backgroundColor:"#fff",borderRadius:"4px",boxShadow:"0 2px 12px rgba(0, 0, 0, 0.1)",minWidth:"300px",maxWidth:"500px"},onClick:h=>h.stopPropagation()},[e.h("div",{class:"x-message-box__header",style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px 20px",borderBottom:"1px solid #eee"}},l),e.h("div",{class:"x-message-box__body",style:{padding:"20px",fontSize:"14px",color:"#606266"}},p),e.h("div",{class:"x-message-box__footer",style:{padding:"10px 20px 16px",textAlign:"right"}},c)])])}}),i=e.createApp(n);i.mount(o);const m={app:i,container:o,close:()=>{var f;const u=(f=i._instance)==null?void 0:f.proxy;u!=null&&u.handleClose&&u.handleClose()}};P.push(m)})}async function me(t,a,o){return A({message:t,title:a,...o,showConfirmButton:!0,showCancelButton:!1})}async function pe(t,a,o){return A({message:t,title:a,...o,showConfirmButton:!0,showCancelButton:!0})}async function he(t,a,o){return A({message:t,title:a,...o,showInput:!0,showConfirmButton:!0,showCancelButton:!0})}function ge(t){return A(t)}const M=Object.assign(ge,{alert:me,confirm:pe,prompt:he,closeAll:ue}),xe=M,ye={install(t){t.config.globalProperties.$msgbox=M,t.config.globalProperties.$alert=M.alert,t.config.globalProperties.$confirm=M.confirm,t.config.globalProperties.$prompt=M.prompt,t.provide("messageBox",M)}},R=[];let ve=1;const be=()=>{R.slice().forEach(t=>t.close())},Ce={success:{icon:"✓",color:"#67c23a"},warning:{icon:"⚠",color:"#e6a23c"},error:{icon:"✕",color:"#f56c6c"},info:{icon:"ℹ",color:"#909399"}},ke=(t,a)=>{const o=R.filter(n=>n.position===t);let r=16;for(const n of o)if(n.id<a){const i=n.container.firstElementChild;i&&(r+=i.offsetHeight+16)}return r},we=(t,a)=>{const o={position:"fixed",width:"330px",zIndex:"2010"};switch(t){case"top-right":o.top=`${a}px`,o.right="16px";break;case"top-left":o.top=`${a}px`,o.left="16px";break;case"bottom-right":o.bottom=`${a}px`,o.right="16px";break;case"bottom-left":o.bottom=`${a}px`,o.left="16px";break;default:o.top=`${a}px`,o.right="16px"}return o};function Z(t){const a=ve++,o=t.position||"top-right",r=document.createElement("div");document.body.appendChild(r);let n=null,i=!1;const m=e.defineComponent({name:"TNotification",setup(){const l=e.ref(!1),p=()=>{i||(i=!0,l.value=!1,setTimeout(()=>{var v;const y=R.findIndex(s=>s.id===a);y!==-1&&R.splice(y,1),n&&clearTimeout(n),(v=t.onClose)==null||v.call(t);try{u.unmount()}catch{}r.parentNode&&r.parentNode.removeChild(r)},300))},c=()=>{const y=t.duration??4500;y>0&&(n=setTimeout(p,y))},h=()=>{n&&(clearTimeout(n),n=null)},g=e.computed(()=>(t.offset??0)+ke(o,a)),C=e.computed(()=>we(o,g.value));return e.nextTick(()=>{l.value=!0,c()}),{visible:l,close:p,positionStyles:C,startTimer:c,clearTimer:h}},render(){if(!this.visible)return null;const l=t.type,p=l?Ce[l]:null,c=[];t.title&&c.push(e.h("div",{class:"x-notification__title",style:{fontWeight:"600",fontSize:"16px",color:"#303133",marginBottom:t.message?"6px":"0"}},t.title)),t.message&&(t.dangerouslyUseHTMLString?c.push(e.h("div",{class:"x-notification__content",style:{fontSize:"14px",color:"#606266",lineHeight:"1.5"},innerHTML:t.message})):c.push(e.h("div",{class:"x-notification__content",style:{fontSize:"14px",color:"#606266",lineHeight:"1.5"}},t.message)));const h=[];return p&&h.push(e.h("div",{class:"x-notification__icon",style:{display:"flex",alignItems:"center",justifyContent:"center",width:"24px",height:"24px",marginRight:"12px",fontSize:"18px",color:p.color}},p.icon)),h.push(e.h("div",{class:"x-notification__main",style:{flex:"1"}},c)),t.showClose!==!1&&h.push(e.h("button",{class:"x-notification__close",style:{position:"absolute",top:"18px",right:"15px",background:"none",border:"none",cursor:"pointer",fontSize:"14px",color:"#909399",padding:"0"},onClick:g=>{g.stopPropagation(),this.close()}},"✕")),e.h("div",{class:["x-notification",t.customClass],style:{...this.positionStyles,display:"flex",alignItems:"flex-start",padding:"14px 26px 14px 13px",borderRadius:"8px",backgroundColor:"#fff",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",transition:"opacity 0.3s, transform 0.3s",boxSizing:"border-box"},onMouseenter:this.clearTimer,onMouseleave:this.startTimer},h)}}),u=e.createApp(m);u.mount(r);const f={id:a,app:u,container:r,position:o,close:()=>{var p;const l=(p=u._instance)==null?void 0:p.proxy;l!=null&&l.close&&l.close()}};return R.push(f),{close:f.close}}function Be(t){return Z(typeof t=="string"?{message:t}:t)}const O=t=>a=>Z({...typeof a=="string"?{message:a}:a,type:t}),F=Object.assign(Be,{info:O("info"),success:O("success"),warning:O("warning"),error:O("error"),closeAll:be}),Te=F,Ee={install(t){t.config.globalProperties.$notify=F,t.provide("notification",F)}};exports.Alert=Y;exports.Backtop=ne;exports.Drawer=K;exports.Message=re;exports.MessageBox=xe;exports.MessageComponent=ce;exports.Modal=q;exports.Notification=Te;exports.Popconfirm=oe;exports.TMessage=de;exports.TMessageBox=ye;exports.TNotification=Ee;exports.Tooltip=G;

package/lib/style.css

@@ -0,0 +1 @@
+.x-modal{position:relative;margin:0 auto 20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 12px #00000026;max-height:43vh;display:flex;flex-direction:column}.x-modal__wrapper{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:2000;display:flex;justify-content:center}.x-modal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e8e8e8;flex-shrink:0}.x-modal__title{font-size:15px;font-weight:500;color:#303133}.x-modal__close{background:none;border:none;font-size:16px;color:#909399;cursor:pointer}.x-modal__close:hover{color:#409eff}.x-modal__body{padding:16px;color:#606266;font-size:14px;overflow-y:auto;flex:1}.x-modal__footer{padding:10px 16px 14px;text-align:right;flex-shrink:0}.x-modal-fade-enter-active,.x-modal-fade-leave-active{transition:opacity .3s ease}.x-modal-fade-enter-from,.x-modal-fade-leave-to{opacity:0}.x-drawer__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080}.x-drawer{position:fixed;background-color:#fff;box-shadow:0 8px 10px -5px #0003;transition:transform .3s}.x-drawer--ltr{top:0;left:0}.x-drawer--rtl{top:0;right:0}.x-drawer--ttb{top:0;left:0}.x-drawer--btt{bottom:0;left:0}.x-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e8e8e8}.x-drawer__title{font-size:18px;font-weight:500;color:#303133}.x-drawer__close{background:none;border:none;font-size:20px;color:#909399;cursor:pointer}.x-drawer__close:hover{color:#409eff}.x-drawer__body{padding:20px;height:calc(100% - 60px);overflow-y:auto}.x-drawer__footer{padding:16px 20px;border-top:1px solid #e8e8e8;text-align:right}.x-drawer-fade-enter-active,.x-drawer-fade-leave-active{transition:opacity .3s}.x-drawer-fade-enter-active .x-drawer,.x-drawer-fade-leave-active .x-drawer{transition:transform .3s}.x-drawer-fade-enter-from,.x-drawer-fade-leave-to{opacity:0}.x-drawer-fade-enter-from .x-drawer--ltr,.x-drawer-fade-leave-to .x-drawer--ltr{transform:translate(-100%)}.x-drawer-fade-enter-from .x-drawer--rtl,.x-drawer-fade-leave-to .x-drawer--rtl{transform:translate(100%)}.x-drawer-fade-enter-from .x-drawer--ttb,.x-drawer-fade-leave-to .x-drawer--ttb{transform:translateY(-100%)}.x-drawer-fade-enter-from .x-drawer--btt,.x-drawer-fade-leave-to .x-drawer--btt{transform:translateY(100%)}.x-alert{position:relative;padding:12px 16px;margin-bottom:16px;border-radius:4px;display:flex;align-items:flex-start;transition:opacity .3s}.x-alert--success{background-color:#e1f3d8;color:#67c23a}.x-alert--success .x-alert__icon{color:#67c23a}.x-alert--warning{background-color:#fdf6ec;color:#e6a23c}.x-alert--warning .x-alert__icon{color:#e6a23c}.x-alert--error{background-color:#fef0f0;color:#f56c6c}.x-alert--error .x-alert__icon{color:#f56c6c}.x-alert--info{background-color:#f4f4f5;color:#909399}.x-alert--info .x-alert__icon{color:#909399}.x-alert.is-center{justify-content:center;text-align:center}.x-alert.is-with-description{padding:14px 16px}.x-alert.is-with-description .x-alert__title{font-weight:500;font-size:16px}.x-alert__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:10px;font-size:16px}.x-alert__content{flex:1}.x-alert__title{display:block;font-size:14px;font-weight:500}.x-alert__description{display:block;font-size:14px;margin-top:6px;opacity:.8}.x-alert__close{position:absolute;top:12px;right:12px;background:none;border:none;cursor:pointer;font-size:14px;opacity:.6}.x-alert__close:hover{opacity:1}.x-alert-fade-enter-active,.x-alert-fade-leave-active{transition:opacity .2s ease}.x-alert-fade-enter-from,.x-alert-fade-leave-to{opacity:0}.x-tooltip{padding:8px 12px;font-size:13px;line-height:1.4;border-radius:4px;max-width:300px;word-wrap:break-word;position:fixed}.x-tooltip--dark{background-color:#303133;color:#fff;box-shadow:0 2px 8px #00000026}.x-tooltip--dark .x-tooltip__arrow--top{border-top-color:#303133}.x-tooltip--dark .x-tooltip__arrow--bottom{border-bottom-color:#303133}.x-tooltip--dark .x-tooltip__arrow--left{border-left-color:#303133}.x-tooltip--dark .x-tooltip__arrow--right{border-right-color:#303133}.x-tooltip--light{background-color:#fff;color:#303133;box-shadow:0 2px 12px #0000001f}.x-tooltip--light .x-tooltip__arrow--top{border-top-color:#fff}.x-tooltip--light .x-tooltip__arrow--bottom{border-bottom-color:#fff}.x-tooltip--light .x-tooltip__arrow--left{border-left-color:#fff}.x-tooltip--light .x-tooltip__arrow--right{border-right-color:#fff}.x-tooltip__wrapper,.x-tooltip__trigger{display:inline-block}.x-tooltip__arrow{position:absolute;width:0;height:0;border:6px solid transparent}.x-tooltip__arrow--top{bottom:-12px;left:50%;transform:translate(-50%);border-bottom:none}.x-tooltip__arrow--bottom{top:-12px;left:50%;transform:translate(-50%);border-top:none}.x-tooltip__arrow--left{right:-12px;top:50%;transform:translateY(-50%);border-right:none}.x-tooltip__arrow--right{left:-12px;top:50%;transform:translateY(-50%);border-left:none}.x-tooltip-fade-enter-active,.x-tooltip-fade-leave-active{transition:opacity .2s ease,transform .2s ease}.x-tooltip-fade-enter-from,.x-tooltip-fade-leave-to{opacity:0;transform:scale(.9)}.x-popconfirm-wrapper,.x-popconfirm-trigger{display:inline-block}.x-popconfirm{background:#fff;border-radius:4px;box-shadow:0 2px 12px #0000001a;padding:12px 16px;box-sizing:border-box}.x-popconfirm__arrow{position:absolute;width:12px;height:12px;background:#fff;box-shadow:-1px -1px 2px #0000000d}.x-popconfirm__main{display:flex;align-items:flex-start;margin-bottom:12px}.x-popconfirm__icon{display:flex;align-items:center;justify-content:center;font-size:16px;margin-right:8px;flex-shrink:0}.x-popconfirm__title{font-size:14px;color:#606266;line-height:1.4}.x-popconfirm__action{display:flex;justify-content:flex-end;gap:8px}.x-popconfirm-fade-enter-active,.x-popconfirm-fade-leave-active{transition:opacity .2s,transform .2s}.x-popconfirm-fade-enter-from,.x-popconfirm-fade-leave-to{opacity:0;transform:scale(.9)}.x-backtop{position:fixed;width:40px;height:40px;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #0000001f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:1000}.x-backtop:hover{background-color:#f5f5f5;box-shadow:0 4px 12px #00000026}.x-backtop:active{transform:scale(.95)}.x-backtop__icon{font-size:20px;color:#606266;font-weight:700}.x-fade-enter-active,.x-fade-leave-active{transition:opacity .3s,transform .3s}.x-fade-enter-from,.x-fade-leave-to{opacity:0;transform:translateY(20px)}.x-message{position:fixed;left:50%;top:20px;transform:translate(-50%);display:flex;align-items:center;padding:12px 16px;border-radius:4px;box-shadow:0 2px 12px #0000001a;transition:opacity .3s,transform .3s,top .3s;min-width:280px;max-width:480px}.x-message--success{background-color:#f0f9eb;border:1px solid #67c23a}.x-message--success .x-message__icon{color:#67c23a}.x-message--warning{background-color:#fdf6ec;border:1px solid #e6a23c}.x-message--warning .x-message__icon{color:#e6a23c}.x-message--error{background-color:#fef0f0;border:1px solid #f56c6c}.x-message--error .x-message__icon{color:#f56c6c}.x-message--info{background-color:#f4f4f5;border:1px solid #909399}.x-message--info .x-message__icon{color:#909399}.x-message.is-center{justify-content:center;text-align:center}.x-message.is-closable{padding-right:40px}.x-message__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:10px;font-size:16px;flex-shrink:0}.x-message__content{flex:1;font-size:14px;color:#606266;line-height:1.4;word-break:break-word}.x-message__close{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:14px;color:#909399;padding:0}.x-message__close:hover{color:#606266}.x-message-fade-enter-active,.x-message-fade-leave-active{transition:opacity .3s,transform .3s}.x-message-fade-enter-from,.x-message-fade-leave-to{opacity:0;transform:translate(-50%) translateY(-100%)}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@xto/feedback",
+  "version": "0.1.0",
+  "description": "Xto Feedback - Feedback components",
+  "main": "./lib/index.cjs",
+  "module": "./es/index.mjs",
+  "types": "./es/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./es/index.mjs",
+      "require": "./lib/index.cjs",
+      "types": "./es/index.d.ts"
+    }
+  },
+  "files": [
+    "es",
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@xto/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.2",
+    "vite": "^5.2.0",
+    "vitest": "^1.4.0",
+    "vue": "^3.4.21",
+    "@xto/build": "0.1.0"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}