echo-library-vue 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,676 @@
+import { defineComponent as Y, computed as w, createElementBlock as F, openBlock as _, normalizeStyle as H, normalizeClass as D, renderSlot as K, createBlock as V, createCommentVNode as S, unref as W, ref as C, watch as J, onMounted as me, createElementVNode as p, withDirectives as ge, vModelText as _e, Fragment as oe, renderList as le, onUnmounted as be, resolveComponent as we, createVNode as ae, resolveDynamicComponent as ee, Transition as ye, withCtx as ke, toDisplayString as Q } from "vue";
+const Ce = /* @__PURE__ */ Y({
+  __name: "index",
+  props: {
+    name: {},
+    size: { default: 16 },
+    color: { default: "currentColor" },
+    spin: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(n, { emit: l }) {
+    const t = n, r = l, e = w(() => [
+      "echo-icon",
+      `echo-icon--${t.name}`,
+      {
+        "echo-icon--spin": t.spin
+      }
+    ]), u = w(() => ({
+      fontSize: typeof t.size == "number" ? `${t.size}px` : t.size,
+      color: t.color
+    })), s = (d) => {
+      r("click", d);
+    };
+    return (d, h) => (_(), F("i", {
+      class: D(e.value),
+      style: H(u.value),
+      onClick: s
+    }, [
+      K(d.$slots, "default", {}, void 0, !0)
+    ], 6));
+  }
+}), q = (n, l) => {
+  const t = n.__vccOpts || n;
+  for (const [r, e] of l)
+    t[r] = e;
+  return t;
+}, U = /* @__PURE__ */ q(Ce, [["__scopeId", "data-v-cf0db90e"]]), xe = ["disabled"], Me = {
+  key: 2,
+  class: "echo-button__text"
+}, $e = /* @__PURE__ */ Y({
+  __name: "index",
+  props: {
+    type: { default: "primary" },
+    size: { default: "medium" },
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    round: { type: Boolean, default: !1 },
+    plain: { type: Boolean, default: !1 },
+    icon: { default: "" }
+  },
+  emits: ["click"],
+  setup(n, { emit: l }) {
+    const t = n, r = l, e = w(() => [
+      "echo-button",
+      `echo-button--${t.type}`,
+      `echo-button--${t.size}`,
+      {
+        "echo-button--disabled": t.disabled,
+        "echo-button--loading": t.loading,
+        "echo-button--round": t.round,
+        "echo-button--plain": t.plain
+      }
+    ]), u = (s) => {
+      t.disabled || t.loading || r("click", s);
+    };
+    return (s, d) => (_(), F("button", {
+      class: D(e.value),
+      disabled: n.disabled || n.loading,
+      onClick: u
+    }, [
+      n.loading ? (_(), V(W(U), {
+        key: 0,
+        name: "loading",
+        class: D(["echo-button__loading", { "echo-button__loading--spinning": n.loading }])
+      }, null, 8, ["class"])) : n.icon ? (_(), V(W(U), {
+        key: 1,
+        name: n.icon,
+        class: "echo-button__icon"
+      }, null, 8, ["name"])) : S("", !0),
+      s.$slots.default ? (_(), F("span", Me, [
+        K(s.$slots, "default", {}, void 0, !0)
+      ])) : S("", !0)
+    ], 10, xe));
+  }
+}), se = /* @__PURE__ */ q($e, [["__scopeId", "data-v-131d4d78"]]), Fe = [
+  "#FFFFFF",
+  "#000000",
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FF1900",
+  "#F47365",
+  "#F89C5A",
+  "#FAC858",
+  "#73B06F",
+  "#6ECBE6",
+  "#926383",
+  "#C89616",
+  "#8E00A7",
+  "#BF3DCE",
+  "#FC3CAD",
+  "#FF89CF",
+  "#5D61FF",
+  "#00BEFF",
+  "#1BC7B1"
+], Ee = (n, l, t) => {
+  n /= 255, l /= 255, t /= 255;
+  const r = Math.max(n, l, t), e = Math.min(n, l, t);
+  let u = 0, s = 0;
+  const d = (r + e) / 2;
+  if (r !== e) {
+    const h = r - e;
+    switch (s = d > 0.5 ? h / (2 - r - e) : h / (r + e), r) {
+      case n:
+        u = ((l - t) / h + (l < t ? 6 : 0)) / 6;
+        break;
+      case l:
+        u = ((t - n) / h + 2) / 6;
+        break;
+      case t:
+        u = ((n - l) / h + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(u * 360),
+    s: Math.round(s * 100),
+    l: Math.round(d * 100)
+  };
+};
+function Be(n, l, t) {
+  n /= 360, l /= 100, t /= 100;
+  let r, e, u;
+  if (l === 0)
+    r = e = u = t;
+  else {
+    const s = (x, B, b) => (b < 0 && (b += 1), b > 1 && (b -= 1), b < 0.16666666666666666 ? x + (B - x) * 6 * b : b < 0.5 ? B : b < 0.6666666666666666 ? x + (B - x) * (0.6666666666666666 - b) * 6 : x), d = t < 0.5 ? t * (1 + l) : t + l - t * l, h = 2 * t - d;
+    r = s(h, d, n + 1 / 3), e = s(h, d, n), u = s(h, d, n - 1 / 3);
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(e * 255),
+    b: Math.round(u * 255)
+  };
+}
+function te(n) {
+  const l = n.replace("#", "");
+  return /^[0-9A-Fa-f]{6}$/.test(l) || /^[0-9A-Fa-f]{8}$/.test(l);
+}
+function Le(n, l) {
+  const t = n.replace("#", "");
+  if (!/^[0-9A-Fa-f]{6}$/.test(t) && !/^[0-9A-Fa-f]{8}$/.test(t))
+    return null;
+  const r = parseInt(t.substring(0, 2), 16), e = parseInt(t.substring(2, 4), 16), u = parseInt(t.substring(4, 6), 16);
+  let s = 1;
+  return t.length === 8 && (s = parseInt(t.substring(6, 8), 16) / 255), { r, g: e, b: u, a: s };
+}
+function Re(n, l, t, r = 1) {
+  const e = (s) => {
+    const d = Math.round(Math.max(0, Math.min(255, s))).toString(16);
+    return d.length === 1 ? "0" + d : d;
+  }, u = e(r * 255);
+  return `#${e(n)}${e(l)}${e(t)}${u}`.toUpperCase();
+}
+function re(n, l, t, r = 1) {
+  return { ...Be(n, l, t), a: r };
+}
+function ie(n, l, t, r = 1) {
+  return { ...Ee(n, l, t), a: r };
+}
+function ne(n, l, t, r = 1) {
+  const e = re(n, l, t, r);
+  return Re(e.r, e.g, e.b, e.a);
+}
+function Ie(n) {
+  const l = Le(n);
+  return l ? ie(l.r, l.g, l.b, l.a) : null;
+}
+function De(n, l, t, r = 1) {
+  return `rgba(${n}, ${l}, ${t}, ${r})`;
+}
+const Ae = { class: "color-picker__main" }, He = {
+  class: "color-picker__saturation-panel-black",
+  style: { background: "linear-gradient(to bottom, transparent, #000)" }
+}, ze = { class: "color-picker__controls" }, Te = { class: "color-picker__controls__input-group" }, Se = ["placeholder"], Pe = { class: "color-picker__controls__eyedropper" }, Ve = ["disabled"], Ue = { class: "color-picker__color-list" }, Oe = ["title", "onClick"], Ne = /* @__PURE__ */ Y({
+  __name: "index",
+  props: {
+    color: {},
+    theme: { default: "light" },
+    type: { default: "hex" },
+    mode: { default: "solid" },
+    showAlpha: { type: Boolean, default: !0 },
+    showEyeDropper: { type: Boolean, default: !0 },
+    showPickerMode: { type: Boolean, default: !0 },
+    showColorList: { type: Boolean, default: !0 },
+    defaultColors: { default: () => Fe }
+  },
+  emits: ["update:color", "colorChange"],
+  setup(n, { emit: l }) {
+    const t = n, r = l, e = C({
+      h: 0,
+      // 色相 0-360
+      s: 0,
+      // 饱和度 0-100
+      l: 0
+      // 明度 0-100
+    }), u = C(""), s = C(1), d = C(!0), h = C(null), x = C(null), B = C(null), b = C(null), O = w(() => {
+      switch (t.type) {
+        case "hex":
+          return s.value === 1 ? A.value : G.value;
+        case "rgb":
+          return s.value === 1 ? y.value : z.value;
+        case "hsl":
+          return s.value === 1 ? N.value : j.value;
+        default:
+          return "";
+      }
+    }), y = w(() => `rgb(${e.value.h}, ${e.value.s}%, ${e.value.l}%)`), z = w(() => {
+      const o = re(e.value.h, e.value.s, e.value.l, s.value);
+      return De(o.r, o.g, o.b, o.a);
+    }), A = w(() => ne(e.value.h, e.value.s, e.value.l, s.value)), G = w(() => ne(e.value.h, e.value.s, e.value.l, s.value)), N = w(() => `hsl(${e.value.h}, ${e.value.s}%, ${e.value.l}%)`), j = w(() => `hsla(${e.value.h}, ${e.value.s}%, ${e.value.l}%, ${s.value})`), R = (o) => {
+      switch (t.type) {
+        case "hex":
+          return Ie(o);
+        case "rgb":
+          const [a, i, c, m = 1] = o.split(",").map(Number);
+          return ie(a, i, c, m);
+        case "hsl":
+          return console.log(7777, o), null;
+        default:
+          return null;
+      }
+    };
+    J(
+      () => t.color,
+      (o) => {
+        if (o) {
+          const a = R(o);
+          if (a) {
+            const { h: i, s: c, l: m, a: f } = a;
+            e.value.h = i, e.value.s = c, e.value.l = m, s.value = f;
+          }
+          u.value = o;
+        }
+      }
+    ), J([A, s], () => {
+      const o = s.value === 1 ? A.value : G.value;
+      o !== t.color && (r("update:color", o), r("colorChange", o), u.value = o);
+    });
+    let T = !1, L = null;
+    const g = (o) => {
+      var m;
+      if (!x.value) return;
+      const a = (m = x.value) == null ? void 0 : m.getBoundingClientRect(), i = Math.max(0, Math.min(o.clientX - a.left, a.width)), c = Math.max(0, Math.min(o.clientY - a.top, a.height));
+      e.value.s = Math.round(i / a.width * 100), e.value.l = Math.round((1 - c / a.height) * 100);
+    }, k = (o) => {
+      var c, m;
+      o.preventDefault(), T = !0, g(o);
+      const a = (f) => {
+        T && (f.preventDefault(), L && (cancelAnimationFrame(L), L = null), L = requestAnimationFrame(() => {
+          g(f);
+        }));
+      }, i = () => {
+        var f, E;
+        T && (T = !1, L && (cancelAnimationFrame(L), L = null), (f = h.value) == null || f.removeEventListener("mousemove", a), (E = h.value) == null || E.removeEventListener("mouseup", i));
+      };
+      (c = h.value) == null || c.addEventListener("mousemove", a), (m = h.value) == null || m.addEventListener("mouseup", i);
+    };
+    let M = !1, v = null;
+    const $ = (o) => {
+      var c;
+      if (!B.value) return;
+      const a = (c = B.value) == null ? void 0 : c.getBoundingClientRect(), i = Math.max(0, Math.min(o.clientX - a.left, a.width));
+      e.value.h = Math.round(i / a.width * 360);
+    }, X = (o) => {
+      var c, m;
+      o.preventDefault(), M = !0, $(o);
+      const a = (f) => {
+        M && (f.preventDefault(), v && (cancelAnimationFrame(v), v = null), v = requestAnimationFrame(() => {
+          $(f);
+        }));
+      }, i = () => {
+        var f, E;
+        M && (M = !1, v && (cancelAnimationFrame(v), v = null), (f = h.value) == null || f.removeEventListener("mousemove", a), (E = h.value) == null || E.removeEventListener("mouseup", i));
+      };
+      (c = h.value) == null || c.addEventListener("mousemove", a), (m = h.value) == null || m.addEventListener("mouseup", i);
+    };
+    let P = !1, I = null;
+    const Z = (o) => {
+      var c;
+      if (!b.value) return;
+      const a = (c = b.value) == null ? void 0 : c.getBoundingClientRect(), i = Math.max(0, Math.min(o.clientX - a.left, a.width));
+      s.value = Math.round(i / a.width * 100) / 100;
+    }, he = (o) => {
+      var c, m;
+      o.preventDefault(), P = !0, Z(o);
+      const a = (f) => {
+        P && (f.preventDefault(), I && (cancelAnimationFrame(I), I = null), I = requestAnimationFrame(() => {
+          Z(f);
+        }));
+      }, i = () => {
+        var f, E;
+        P && (P = !1, I && (cancelAnimationFrame(I), I = null), (f = h.value) == null || f.removeEventListener("mousemove", a), (E = h.value) == null || E.removeEventListener("mouseup", i));
+      };
+      (c = h.value) == null || c.addEventListener("mousemove", a), (m = h.value) == null || m.addEventListener("mouseup", i);
+    }, ve = (o) => {
+      const a = o.target.value, i = R(u.value);
+      if (i) {
+        const { h: c, s: m, l: f, a: E } = i;
+        e.value.h = c, e.value.s = m, e.value.l = f, s.value = E;
+      }
+      u.value = a.trim().toUpperCase();
+    }, fe = async () => {
+      if (d.value)
+        try {
+          const a = await new window.EyeDropper().open();
+          if (a.sRGBHex) {
+            const i = R(a.sRGBHex);
+            if (i) {
+              const { h: c, s: m, l: f, a: E } = i;
+              e.value.h = c, e.value.s = m, e.value.l = f, s.value = E;
+            }
+          }
+        } catch (o) {
+          o.name !== "AbortError" && console.error("颜色拾取失败", o);
+        }
+    }, pe = (o) => {
+      if (!te(o)) return;
+      const a = R(o);
+      if (a) {
+        const { h: i, s: c, l: m, a: f } = a;
+        e.value.h = i, e.value.s = c, e.value.l = m, s.value = f;
+      }
+      u.value = O.value;
+    };
+    return me(() => {
+      if (d.value = !!window.EyeDropper, t.color && te(t.color)) {
+        const o = R(t.color);
+        if (o) {
+          const { h: a, s: i, l: c, a: m } = o;
+          e.value.h = a, e.value.s = i, e.value.l = c, s.value = m;
+        }
+        u.value = t.color;
+      }
+    }), (o, a) => (_(), F("div", {
+      ref_key: "colorPickerRef",
+      ref: h,
+      class: D(["color-picker", [`color-picker--${n.theme}`]])
+    }, [
+      p("div", Ae, [
+        p("div", {
+          ref_key: "saturationPanelRef",
+          ref: x,
+          class: "color-picker__saturation-panel",
+          style: H({ background: `linear-gradient(to right, #fff, hsl(${e.value.h}, 100%, 50%))` }),
+          onMousedown: k
+        }, [
+          p("div", He, [
+            p("div", {
+              class: "color-picker__saturation-panel-pointer",
+              style: H({
+                left: `${e.value.s}%`,
+                top: `${100 - e.value.l}%`,
+                background: A.value
+              })
+            }, null, 4)
+          ])
+        ], 36),
+        p("div", {
+          ref_key: "hueBarRef",
+          ref: B,
+          class: "color-picker__hue-bar",
+          onMousedown: X
+        }, [
+          p("div", {
+            class: "color-picker__hue-bar-pointer",
+            style: H({ left: `${e.value.h / 360 * 100}%` })
+          }, null, 4)
+        ], 544),
+        p("div", {
+          ref_key: "alphaBarRef",
+          ref: b,
+          class: "color-picker__alpha-bar",
+          onMousedown: he
+        }, [
+          p("div", {
+            class: "color-picker__alpha-bar-bg",
+            style: H({
+              background: `linear-gradient(to right, transparent, ${A.value})`
+            })
+          }, null, 4),
+          p("div", {
+            class: "color-picker__alpha-bar-pointer",
+            style: H({ left: `${s.value * 100}%` })
+          }, null, 4)
+        ], 544)
+      ]),
+      p("div", ze, [
+        p("div", {
+          class: "color-picker__controls__preview",
+          style: H({ background: z.value })
+        }, null, 4),
+        p("div", Te, [
+          ge(p("input", {
+            type: "text",
+            name: "color-input",
+            "onUpdate:modelValue": a[0] || (a[0] = (i) => u.value = i),
+            class: "color-picker__controls__input-group__input",
+            placeholder: s.value < 1 ? "#000000FF" : "#000000",
+            onInput: ve
+          }, null, 40, Se), [
+            [_e, u.value]
+          ])
+        ]),
+        p("div", Pe, [
+          p("button", {
+            class: "color-picker__controls__eyedropper-btn",
+            onClick: fe,
+            disabled: !d.value,
+            title: "吸取颜色"
+          }, [...a[1] || (a[1] = [
+            p("svg", {
+              t: "1768013548643",
+              class: "icon",
+              viewBox: "0 0 1109 1024",
+              version: "1.1",
+              xmlns: "http://www.w3.org/2000/svg",
+              "p-id": "1740",
+              width: "40",
+              height: "40"
+            }, [
+              p("path", {
+                d: "M968.525486 0c22.934274 0 45.015973 9.122555 61.214903 25.15097l53.200696 52.518635a85.257525 85.257525 0 0 1 0 121.321459l-123.367639 121.918261 20.206033 19.950261 4.689164 5.200709a54.564816 54.564816 0 0 1-4.689164 72.724669l-39.218461 38.706916a56.269967 56.269967 0 0 1-78.777953 0.085258l-1.278863-1.278863-486.990984 479.147291a125.072789 125.072789 0 0 1-71.786836 35.381873l-10.230903 0.937833-20.035519 19.609231a109.300147 109.300147 0 0 1-176.056789-30.692709c-17.90408-38.024856-11.850796-83.04083 15.346354-115.012402l6.394315-6.820602 19.95026-19.609231c1.449378-27.197151 11.936054-52.944923 29.669619-73.577244l6.991117-7.502662L660.74582 258.756589l-5.456481-5.371224-9.719358-9.548843-4.689164-5.200709a54.650074 54.650074 0 0 1 4.689164-72.809927l39.047946-38.621658a56.269967 56.269967 0 0 1 78.863211 0l20.206033 19.95026L907.140068 25.236227c16.369445-16.19893 38.365886-25.236227 61.385418-25.236227z",
+                fill: "#64666F",
+                "p-id": "1741"
+              }),
+              p("path", {
+                d: "M699.111707 292.433311L227.637592 763.05485a68.802823 68.802823 0 0 0-19.097685 37.342796l-0.682061 6.991117-1.193605 20.717579-33.76198 33.847238a52.00709 52.00709 0 0 0-1.70515 70.337458 51.580803 51.580803 0 0 0 69.57014 7.502662l5.115452-4.518649 34.10301-34.10301 20.632321-1.02309a66.330355 66.330355 0 0 0 38.792174-15.090582l5.285966-4.859679 471.3036-470.536281-116.80281-117.314355H699.111707z",
+                fill: "#F7F8FA",
+                "p-id": "1742"
+              })
+            ], -1)
+          ])], 8, Ve)
+        ])
+      ]),
+      p("div", Ue, [
+        (_(!0), F(oe, null, le(n.defaultColors, (i, c) => (_(), F("div", {
+          class: "color-picker__color-list__item",
+          key: c,
+          style: H({ backgroundColor: i }),
+          title: i,
+          onClick: (m) => pe(i)
+        }, null, 12, Oe))), 128))
+      ])
+    ], 2));
+  }
+}), ue = /* @__PURE__ */ q(Ne, [["__scopeId", "data-v-df743242"]]), Xe = { class: "echo-dropdown__menu__list" }, We = ["onClick"], Ye = { class: "echo-dropdown__menu__list__item__label" }, qe = /* @__PURE__ */ Y({
+  __name: "index",
+  props: {
+    trigger: { default: "click" },
+    placement: { default: "bottom-start" },
+    items: { default: () => [] },
+    disabled: { type: Boolean, default: !1 },
+    getPopupContainer: {},
+    className: {},
+    style: {},
+    hideOnClick: { type: Boolean, default: !0 },
+    icon: {}
+  },
+  emits: ["select", "openChange"],
+  setup(n, { emit: l }) {
+    const t = n, r = l, e = C(!1), u = C(null), s = C(null), d = C(null), h = w(() => ({
+      "is-disabled": t.disabled,
+      "is-visible": e.value
+    })), x = w(() => [`echo-dropdown__menu--${t.placement || "bottom-start"}`]), B = w(() => ({})), b = () => {
+      t.disabled || t.trigger === "click" && (e.value = !e.value);
+    }, O = () => {
+      t.disabled || t.trigger === "hover" && (e.value = !0);
+    }, y = () => {
+      t.trigger === "hover" && setTimeout(() => {
+        z.value || (e.value = !1);
+      }, 100);
+    }, z = C(!1), A = () => {
+      z.value = !0;
+    }, G = () => {
+      z.value = !1, t.trigger === "hover" && N();
+    }, N = () => {
+      e.value && (e.value = !1, r("openChange", !1));
+    }, j = (g, k) => {
+      g.disabled || (r("select", g, k), t.hideOnClick && N());
+    }, R = () => {
+      var I;
+      if (!s.value || !d.value) return;
+      const g = (I = s.value) == null ? void 0 : I.getBoundingClientRect(), k = d.value.getBoundingClientRect(), M = t.placement || "bottom-start";
+      let v = 0, $ = 0;
+      M.includes("bottom") ? v = g.bottom + window.scrollY : M.includes("top") ? v = g.top - k.height + window.scrollY : v = g.top, M.includes("start") || M.includes("left") ? $ = g.left + window.scrollX : M.includes("end") || M.includes("right") ? $ = g.right - k.width + window.scrollX : $ = g.left + (g.width - k.width) / 2;
+      const X = window.innerWidth, P = window.innerHeight;
+      $ < 0 && ($ = 8), $ + k.width > X && ($ = X - k.width - 8), v < 0 && (v = 8), v + k.height > P && (v = P - k.height - 8), d.value.style.left = `${$}px`, d.value.style.top = `${v}px`;
+    }, T = (g) => {
+      u.value && !u.value.contains(g.target) && e.value && t.trigger === "click" && N();
+    }, L = () => {
+      e.value && R();
+    };
+    return J(e, (g) => {
+      g ? (document.addEventListener("click", T), window.addEventListener("resize", L), window.addEventListener("scroll", R, !0)) : (document.removeEventListener("click", T), window.removeEventListener("resize", L), window.removeEventListener("scroll", R, !0));
+    }), be(() => {
+      document.removeEventListener("click", T), window.removeEventListener("resize", L), window.removeEventListener("scroll", R, !0);
+    }), (g, k) => {
+      const M = we("svg-icon");
+      return _(), F("div", {
+        ref_key: "dropdownRef",
+        ref: u,
+        class: D(["echo-dropdown", [h.value]])
+      }, [
+        p("div", {
+          ref_key: "triggerRef",
+          ref: s,
+          class: D(["echo-dropdown__trigger", { "is-disabled": n.disabled }]),
+          onClick: b,
+          onMouseenter: O,
+          onMouseleave: y
+        }, [
+          K(g.$slots, "default", {}, () => [
+            k[0] || (k[0] = p("span", null, "下拉菜单", -1)),
+            n.icon ? (_(), V(ee(n.icon), {
+              key: 0,
+              class: "echo-dropdown__trigger__icon"
+            })) : (_(), V(M, {
+              key: 1,
+              name: "arrow-down",
+              class: "echo-dropdown__trigger__icon"
+            }))
+          ], !0)
+        ], 34),
+        ae(ye, { name: "echo-dropdown-fade" }, {
+          default: ke(() => [
+            e.value ? (_(), F("div", {
+              key: 0,
+              ref_key: "menuRef",
+              ref: d,
+              class: D(["echo-dropdown__menu", [x.value]]),
+              style: H(B.value),
+              onMouseenter: A,
+              onMouseleave: G
+            }, [
+              p("ul", Xe, [
+                n.items && n.items.length > 0 ? (_(!0), F(oe, { key: 0 }, le(n.items, (v, $) => (_(), F("li", {
+                  key: v.key,
+                  class: D(["echo-dropdown__menu__list__item", [
+                    {
+                      "is-disabled": v.disabled,
+                      "is-divider": v.divider,
+                      "is-checked": v.checked
+                    }
+                  ]]),
+                  onClick: (X) => j(v, $)
+                }, [
+                  v.icon ? (_(), V(ee(v.icon), {
+                    key: 0,
+                    class: "echo-dropdown__menu__list__item__icon"
+                  })) : S("", !0),
+                  p("span", Ye, Q(v.label), 1)
+                ], 10, We))), 128)) : K(g.$slots, "menu", { key: 1 }, void 0, !0)
+              ])
+            ], 38)) : S("", !0)
+          ]),
+          _: 3
+        })
+      ], 2);
+    };
+  }
+}), ce = /* @__PURE__ */ q(qe, [["__scopeId", "data-v-f896e925"]]), Ge = { class: "echo-input__wrapper" }, Ke = ["type", "value", "placeholder", "disabled", "readonly", "maxlength"], je = {
+  key: 0,
+  class: "echo-input__word-limit"
+}, Je = /* @__PURE__ */ Y({
+  __name: "index",
+  props: {
+    modelValue: { default: "" },
+    type: { default: "text" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !1 },
+    size: { default: "medium" },
+    prefixIcon: { default: "" },
+    suffixIcon: { default: "" },
+    maxlength: { default: void 0 },
+    showWordLimit: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "focus", "blur", "clear"],
+  setup(n, { emit: l }) {
+    const t = n, r = l, e = C(), u = w(() => String(t.modelValue).length), s = w(() => [
+      "echo-input",
+      `echo-input--${t.size}`,
+      {
+        "echo-input--disabled": t.disabled,
+        "echo-input--with-prefix": t.prefixIcon,
+        "echo-input--with-suffix": t.suffixIcon || t.clearable
+      }
+    ]), d = w(() => [
+      "echo-input__inner",
+      {
+        "echo-input__inner--disabled": t.disabled
+      }
+    ]), h = (y) => {
+      const A = y.target.value;
+      r("update:modelValue", A);
+    }, x = (y) => {
+      r("focus", y);
+    }, B = (y) => {
+      r("blur", y);
+    }, b = (y) => {
+    }, O = () => {
+      var y;
+      r("update:modelValue", ""), r("clear"), (y = e.value) == null || y.focus();
+    };
+    return (y, z) => (_(), F("div", {
+      class: D(s.value)
+    }, [
+      p("div", Ge, [
+        n.prefixIcon ? (_(), V(W(U), {
+          key: 0,
+          name: n.prefixIcon,
+          class: "echo-input__prefix-icon"
+        }, null, 8, ["name"])) : S("", !0),
+        p("input", {
+          ref_key: "inputRef",
+          ref: e,
+          class: D(d.value),
+          type: n.type,
+          value: n.modelValue,
+          placeholder: n.placeholder,
+          disabled: n.disabled,
+          readonly: n.readonly,
+          maxlength: n.maxlength,
+          onInput: h,
+          onFocus: x,
+          onBlur: B,
+          onKeydown: b
+        }, null, 42, Ke),
+        n.suffixIcon ? (_(), V(W(U), {
+          key: 1,
+          name: n.suffixIcon,
+          class: "echo-input__suffix-icon"
+        }, null, 8, ["name"])) : S("", !0),
+        n.clearable && n.modelValue ? (_(), F("button", {
+          key: 2,
+          type: "button",
+          class: "echo-input__clear",
+          onClick: O
+        }, [
+          ae(W(U), { name: "close" })
+        ])) : S("", !0)
+      ]),
+      n.showWordLimit && n.maxlength ? (_(), F("div", je, Q(u.value) + "/" + Q(n.maxlength), 1)) : S("", !0)
+    ], 2));
+  }
+}), de = /* @__PURE__ */ q(Je, [["__scopeId", "data-v-52972a06"]]), Ze = se, et = de, tt = ue, nt = ce, ot = U, lt = {
+  install(n) {
+    n.component("EchoColorPicker", ue), n.component("EchoDropdown", ce), n.component("EchoIcon", U), n.component("EchoInput", de), n.component("EchoButton", se);
+  }
+};
+export {
+  se as Button,
+  ue as ColorPicker,
+  ce as Dropdown,
+  Ze as EchoButton,
+  tt as EchoColorPicker,
+  nt as EchoDropdown,
+  ot as EchoIcon,
+  et as EchoInput,
+  lt as EchoLibrary,
+  U as Icon,
+  de as Input
+};
+//# sourceMappingURL=index.esm.js.map