@rhino-design/vue 0.2.2 → 0.2.3

package/dist/components/XCheckboxGroup.vue.js

@@ -0,0 +1,87 @@
+import { defineComponent as f, useSlots as B, ref as S, computed as o, provide as $, watch as A, openBlock as r, createElementBlock as s, normalizeClass as F, Fragment as b, renderList as L, createBlock as v, withCtx as X, renderSlot as p, unref as z, createTextVNode as G, toDisplayString as O } from "vue";
+import { useXFormField as R } from "../composables/form.js";
+import w from "./XCheckbox.vue.js";
+import { xCheckboxGroupKey as D } from "./x-checkbox-context.js";
+const N = /* @__PURE__ */ f({
+  __name: "XCheckboxGroup",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: { default: () => [] },
+    max: { default: void 0 },
+    options: { default: void 0 },
+    direction: { default: "horizontal" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(h, { emit: y }) {
+    const l = h, c = y, k = B(), t = R(), n = S([...l.defaultValue]), d = o(() => Array.isArray(l.modelValue) ? l.modelValue : n.value), i = o(() => l.max === void 0 ? !1 : d.value.length >= l.max), x = o(() => !!(l.disabled || t != null && t.disabled.value)), m = o(() => (l.options ?? []).map((e) => typeof e == "string" || typeof e == "number" ? {
+      label: e,
+      value: e
+    } : e));
+    function g(e, u) {
+      n.value = e, c("update:modelValue", e), c("change", e, u), t == null || t.notifyChange(u);
+    }
+    $(D, {
+      name: "XCheckboxGroup",
+      computedValue: d,
+      disabled: x,
+      isMaxed: i,
+      checkboxSlot: k.checkbox,
+      handleChange: g
+    }), A(
+      () => l.modelValue,
+      (e) => {
+        Array.isArray(e) ? n.value = [...e] : n.value = [];
+      }
+    );
+    const V = o(() => [
+      "x-checkbox-group",
+      "x-choice-group",
+      `x-checkbox-group-direction-${l.direction}`
+    ]), C = f({
+      name: "XCheckboxOptionLabelRenderer",
+      props: {
+        render: {
+          type: Function,
+          required: !0
+        }
+      },
+      setup(e) {
+        return () => {
+          var u;
+          return (u = e.render) == null ? void 0 : u.call(e);
+        };
+      }
+    });
+    function _(e) {
+      return typeof e == "function";
+    }
+    return (e, u) => (r(), s("span", {
+      class: F(V.value)
+    }, [
+      m.value.length > 0 ? (r(!0), s(b, { key: 0 }, L(m.value, (a) => (r(), v(w, {
+        key: String(a.value),
+        value: a.value,
+        disabled: a.disabled || !d.value.includes(a.value) && i.value,
+        indeterminate: a.indeterminate,
+        "model-value": d.value.includes(a.value)
+      }, {
+        default: X(() => [
+          e.$slots.label ? p(e.$slots, "label", {
+            key: 0,
+            data: a
+          }) : _(a.label) ? (r(), v(z(C), {
+            key: 1,
+            render: a.label
+          }, null, 8, ["render"])) : (r(), s(b, { key: 2 }, [
+            G(O(a.label), 1)
+          ], 64))
+        ]),
+        _: 2
+      }, 1032, ["value", "disabled", "indeterminate", "model-value"]))), 128)) : p(e.$slots, "default", { key: 1 })
+    ], 2));
+  }
+});
+export {
+  N as default
+};

package/dist/components/XCheckboxGroup.vue2.js

@@ -0,0 +1,4 @@
+import f from "./XCheckboxGroup.vue.js";
+export {
+  f as default
+};

package/dist/components/XCollapse.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent as v, useSlots as y, ref as m, computed as s, provide as x, openBlock as K, createElementBlock as h, normalizeClass as A, renderSlot as B } from "vue";
+import { xCollapseKey as I } from "../composables/collapse.js";
+const E = /* @__PURE__ */ v({
+  __name: "XCollapse",
+  props: {
+    activeKey: {},
+    defaultActiveKey: { default: () => [] },
+    accordion: { type: Boolean, default: !1 },
+    showExpandIcon: { type: Boolean, default: void 0 },
+    expandIconPosition: { default: "left" },
+    bordered: { type: Boolean, default: !0 },
+    destroyOnHide: { type: Boolean, default: !1 }
+  },
+  emits: ["update:activeKey", "change"],
+  setup(i, { emit: r }) {
+    const t = i, n = r, p = y(), l = m([...t.defaultActiveKey]), a = s(() => {
+      const e = t.activeKey ?? l.value;
+      return Array.isArray(e) ? e : [];
+    });
+    function u(e, c) {
+      let o = [];
+      if (t.accordion)
+        a.value.includes(e) || (o = [e]);
+      else {
+        o = [...a.value];
+        const d = o.indexOf(e);
+        d > -1 ? o.splice(d, 1) : o.push(e);
+      }
+      l.value = o, n("update:activeKey", o), n("change", o, c);
+    }
+    x(I, {
+      activeKeys: a,
+      slots: p,
+      showExpandIcon: s(() => t.showExpandIcon),
+      expandIconPosition: s(() => t.expandIconPosition),
+      destroyOnHide: s(() => t.destroyOnHide),
+      handleClick: u
+    });
+    const f = s(() => [
+      "x-collapse",
+      {
+        "x-collapse-borderless": !t.bordered
+      }
+    ]);
+    return (e, c) => (K(), h("div", {
+      class: A(f.value)
+    }, [
+      B(e.$slots, "default")
+    ], 2));
+  }
+});
+export {
+  E as default
+};

package/dist/components/XCollapse.vue2.js

@@ -0,0 +1,4 @@
+import f from "./XCollapse.vue.js";
+export {
+  f as default
+};

package/dist/components/XCollapseItem.vue.js

@@ -0,0 +1,152 @@
+import { defineComponent as C, getCurrentInstance as N, computed as n, ref as O, watch as V, onBeforeUnmount as X, openBlock as i, createElementBlock as v, normalizeClass as m, createElementVNode as x, renderSlot as p, normalizeProps as z, mergeProps as E, createBlock as I, unref as w, createCommentVNode as f, createTextVNode as L, toDisplayString as _, createVNode as A, Transition as U, toHandlers as j, withCtx as q, withDirectives as F, vShow as G } from "vue";
+import J from "./XIcon.js";
+import { useXCollapse as M } from "../composables/collapse.js";
+const Q = ["aria-disabled", "aria-expanded", "tabindex"], R = { class: "x-collapse-item-header-title" }, W = {
+  key: 1,
+  class: "x-collapse-item-header-extra"
+}, Y = {
+  key: 0,
+  class: "x-collapse-item-content-box"
+}, ae = /* @__PURE__ */ C({
+  __name: "XCollapseItem",
+  props: {
+    header: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    showExpandIcon: { type: Boolean, default: !0 },
+    destroyOnHide: { type: Boolean, default: !1 }
+  },
+  setup(d) {
+    const s = d, t = M(), h = N(), y = n(() => {
+      const e = h == null ? void 0 : h.vnode.key;
+      return typeof e == "number" ? e : String(e ?? "");
+    }), l = n(() => (t == null ? void 0 : t.activeKeys.value.includes(y.value)) ?? !1), c = n(() => (t == null ? void 0 : t.expandIconPosition.value) ?? "left"), u = n(() => !!(t != null && t.destroyOnHide.value || s.destroyOnHide)), g = n(() => (t == null ? void 0 : t.showExpandIcon.value) ?? s.showExpandIcon), r = O(u.value ? l.value : !0);
+    let o = null;
+    V(l, (e) => {
+      if (o && (clearTimeout(o), o = null), e && !r.value) {
+        r.value = !0;
+        return;
+      }
+      !e && u.value && (o = setTimeout(() => {
+        !l.value && u.value && (r.value = !1), o = null;
+      }, 220));
+    }), X(() => {
+      o && (clearTimeout(o), o = null);
+    });
+    function b(e) {
+      s.disabled || !t || t.handleClick(y.value, e);
+    }
+    function B(e) {
+      e.key !== "Enter" && e.key !== " " || (e.preventDefault(), b(e));
+    }
+    const $ = {
+      onEnter: (e) => {
+        const a = e;
+        a.style.height = `${a.scrollHeight}px`;
+      },
+      onAfterEnter: (e) => {
+        const a = e;
+        a.style.height = "auto";
+      },
+      onBeforeLeave: (e) => {
+        const a = e;
+        a.style.height = `${a.scrollHeight}px`;
+      },
+      onLeave: (e) => {
+        const a = e;
+        a.style.height = "0";
+      },
+      onAfterLeave: () => {
+        o && (clearTimeout(o), o = null), u.value && (r.value = !1);
+      }
+    }, H = n(() => [
+      "x-collapse-item",
+      {
+        "x-collapse-item-active": l.value,
+        "x-collapse-item-disabled": s.disabled,
+        "x-collapse-item-no-icon": !g.value
+      }
+    ]), P = n(() => [
+      "x-collapse-item-header",
+      `x-collapse-item-header-${c.value}`,
+      {
+        "x-collapse-item-header-disabled": s.disabled
+      }
+    ]), S = n(() => [
+      "x-collapse-item-icon-hover",
+      {
+        "x-collapse-item-icon-right": c.value === "right"
+      }
+    ]), T = n(() => [
+      "x-collapse-item-content",
+      {
+        "x-collapse-item-content-expanded": l.value
+      }
+    ]), k = n(() => ({
+      active: l.value,
+      disabled: s.disabled,
+      position: c.value
+    })), D = n(() => {
+      var e;
+      return !!((e = t == null ? void 0 : t.slots) != null && e["expand-icon"]);
+    }), K = C({
+      name: "XCollapseParentExpandIcon",
+      setup() {
+        return () => {
+          var e, a;
+          return ((a = (e = t == null ? void 0 : t.slots) == null ? void 0 : e["expand-icon"]) == null ? void 0 : a.call(e, k.value)) ?? null;
+        };
+      }
+    });
+    return (e, a) => (i(), v("section", {
+      class: m(H.value)
+    }, [
+      x("div", {
+        role: "button",
+        "aria-disabled": d.disabled,
+        "aria-expanded": l.value,
+        tabindex: d.disabled ? -1 : 0,
+        class: m(P.value),
+        onClick: b,
+        onKeydown: B
+      }, [
+        g.value ? (i(), v("span", {
+          key: 0,
+          class: m(S.value)
+        }, [
+          e.$slots["expand-icon"] ? p(e.$slots, "expand-icon", z(E({ key: 0 }, k.value))) : D.value ? (i(), I(w(K), { key: 1 })) : (i(), I(w(J), {
+            key: 2,
+            name: c.value === "right" ? "fanhui" : "gengduo",
+            class: "x-collapse-item-expand-icon",
+            size: 14
+          }, null, 8, ["name"]))
+        ], 2)) : f("", !0),
+        x("div", R, [
+          p(e.$slots, "header", {}, () => [
+            L(_(d.header), 1)
+          ])
+        ]),
+        e.$slots.extra ? (i(), v("div", W, [
+          p(e.$slots, "extra")
+        ])) : f("", !0)
+      ], 42, Q),
+      A(U, E({ name: "collapse-slider" }, j($)), {
+        default: q(() => [
+          F(x("div", {
+            role: "region",
+            class: m(T.value)
+          }, [
+            r.value ? (i(), v("div", Y, [
+              p(e.$slots, "default")
+            ])) : f("", !0)
+          ], 2), [
+            [G, l.value]
+          ])
+        ]),
+        _: 3
+      }, 16)
+    ], 2));
+  }
+});
+export {
+  ae as default
+};

package/dist/components/XCollapseItem.vue2.js

@@ -0,0 +1,4 @@
+import f from "./XCollapseItem.vue.js";
+export {
+  f as default
+};

package/dist/components/XColorGroup.vue.js

@@ -0,0 +1,7 @@
+import o from "./XColorGroup.vue2.js";
+/* empty css                 */
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-473789ee"]]);
+export {
+  m as default
+};

package/dist/components/XColorGroup.vue2.js

@@ -0,0 +1,306 @@
+import { defineComponent as ce, useSlots as de, ref as b, computed as c, watch as M, onBeforeUnmount as pe, openBlock as v, createElementBlock as g, normalizeClass as j, createElementVNode as n, normalizeStyle as H, toDisplayString as k, unref as P, createVNode as C, withCtx as q, withKeys as f, withModifiers as d, createCommentVNode as J, Fragment as Q, renderList as ve, renderSlot as ge, isVNode as fe } from "vue";
+import N from "./XIcon.js";
+import me from "./XTrigger.vue.js";
+import { useXI18n as _e } from "../composables/i18n.js";
+const be = ["disabled"], xe = {
+  key: 0,
+  class: "x-color-group__panel"
+}, he = { class: "x-color-group__css-line" }, ye = { class: "x-color-group__toolbar" }, we = { class: "x-color-group__toolbar-angle" }, ke = { class: "x-color-group__toolbar-angle-title" }, Pe = ["disabled"], Ce = ["aria-valuenow", "aria-disabled"], $e = {
+  class: "x-color-group__dial-svg",
+  viewBox: "0 0 100 100",
+  "aria-hidden": "true"
+}, Ve = ["x1", "y1", "x2", "y2"], Ae = ["cx", "cy"], Le = ["cx", "cy"], Ee = ["aria-disabled", "onKeydown"], De = { class: "x-color-group__list" }, Me = { class: "x-color-group__swatch" }, Ne = ["value", "disabled", "onInput"], ze = { class: "x-color-group__item-color" }, Be = { class: "x-color-group__item-right" }, Ie = { class: "x-color-group__percent-wrap" }, Se = ["value", "disabled", "onInput"], Fe = ["disabled", "onClick"], Xe = { class: "x-color-group__slot-hidden" }, Ye = /* @__PURE__ */ ce({
+  __name: "XColorGroup",
+  props: {
+    modelValue: { default: "" },
+    plus: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    angle: { default: 278 },
+    max: { default: 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(i, { emit: W }) {
+    const x = ["rgba(255,218,254,1)", "rgba(242,218,255,1)"], s = i, z = W, { t: Z } = _e(), $ = de(), m = b(!1), B = b(!1), h = b(s.angle), a = b([]), V = b(!1);
+    let _ = null;
+    function A(t, e) {
+      t.forEach((o) => {
+        if (!fe(o)) return;
+        if (o.type === Q && Array.isArray(o.children)) {
+          A(o.children, e);
+          return;
+        }
+        const l = o.props, r = l == null ? void 0 : l.modelValue;
+        typeof r == "string" && r.trim() && e.push(r.trim()), Array.isArray(o.children) && A(o.children, e);
+      });
+    }
+    const ee = c(() => {
+      var o;
+      const t = ((o = $.default) == null ? void 0 : o.call($, {})) ?? [], e = [];
+      return A(t, e), e;
+    });
+    function L(t) {
+      let e = t % 360;
+      return e < 0 && (e += 360), Number(e.toFixed(2));
+    }
+    const u = c(() => L(h.value));
+    function y(t, e) {
+      const o = (t - 90) * Math.PI / 180;
+      return {
+        x: 50 + Math.cos(o) * e,
+        y: 50 + Math.sin(o) * e
+      };
+    }
+    const I = c(() => y(u.value, 32)), S = c(() => y(u.value + 180, 32)), F = c(() => y(u.value, 28)), X = c(() => y(u.value + 180, 28));
+    function O(t) {
+      const e = Number(t);
+      return !Number.isFinite(e) || e < 0 ? 0 : e > 100 ? 100 : Number(e.toFixed(2));
+    }
+    function T(t) {
+      if (t <= 1) return [100];
+      const e = 100 / (t - 1);
+      return Array.from({ length: t }, (o, l) => Number((l * e).toFixed(2)));
+    }
+    function K() {
+      const t = T(a.value.length);
+      a.value = a.value.map((e, o) => ({ ...e, percent: t[o] ?? 0 }));
+    }
+    M(
+      ee,
+      (t) => {
+        if (a.value.length > 0) return;
+        const e = t.length >= 2 ? t : [...x], o = T(e.length);
+        a.value = e.map((l, r) => ({ color: l, percent: o[r] ?? 0 }));
+      },
+      { immediate: !0 }
+    );
+    const E = c(() => {
+      if (a.value.length === 0) {
+        const e = `${x[0]} 0%, ${x[1]} 100%`;
+        return `linear-gradient(${u.value}deg, ${e})`;
+      }
+      const t = a.value.map((e) => `${e.color} ${O(e.percent)}%`).join(", ");
+      return `linear-gradient(${u.value}deg, ${t})`;
+    }), U = c(() => !s.plus || s.disabled ? !1 : s.max <= 0 ? !0 : a.value.length < s.max);
+    function te() {
+      s.disabled || (m.value = !m.value);
+    }
+    function Y(t) {
+      s.disabled && t || (B.value = t, t || p());
+    }
+    function D() {
+      var e;
+      if (!U.value) return;
+      const t = ((e = a.value[a.value.length - 1]) == null ? void 0 : e.color) ?? x[1];
+      a.value = [...a.value, { color: t, percent: 100 }], K();
+    }
+    function oe(t) {
+      s.disabled || a.value.length <= 2 || (a.value = a.value.filter((e, o) => o !== t), K());
+    }
+    function le(t, e) {
+      const o = e.target.value, l = [...a.value];
+      l[t] = { ...l[t], color: o }, a.value = l;
+    }
+    function ne(t, e) {
+      const o = e.target.value, l = [...a.value];
+      l[t] = { ...l[t], percent: O(o) }, a.value = l;
+    }
+    function G(t, e, o) {
+      const l = o.getBoundingClientRect(), r = t - l.left, re = e - l.top, ie = l.width / 2, se = l.height / 2, ue = Math.atan2(re - se, r - ie) * 180 / Math.PI + 90;
+      h.value = L(ue);
+    }
+    function R(t) {
+      !V.value || !_ || G(t.clientX, t.clientY, _);
+    }
+    function p() {
+      V.value = !1, _ = null, window.removeEventListener("pointermove", R), window.removeEventListener("pointerup", p), window.removeEventListener("pointercancel", p);
+    }
+    function ae(t) {
+      s.disabled || (_ = t.currentTarget, V.value = !0, G(t.clientX, t.clientY, _), window.addEventListener("pointermove", R), window.addEventListener("pointerup", p), window.addEventListener("pointercancel", p));
+    }
+    function w(t) {
+      s.disabled || (h.value = L(h.value + t));
+    }
+    return M(
+      E,
+      (t) => {
+        z("update:modelValue", t), z("change", t);
+      },
+      { immediate: !0 }
+    ), M(m, (t) => {
+      t || Y(!1);
+    }), pe(() => {
+      p();
+    }), (t, e) => (v(), g("div", {
+      class: j(["x-color-group", { "is-disabled": i.disabled, "is-open": m.value }])
+    }, [
+      n("button", {
+        type: "button",
+        class: "x-color-group__summary",
+        disabled: i.disabled,
+        onClick: te
+      }, [
+        n("div", {
+          class: "x-color-group__summary-preview",
+          style: H({ background: E.value })
+        }, null, 4)
+      ], 8, be),
+      m.value ? (v(), g("div", xe, [
+        n("div", he, k(E.value), 1),
+        n("div", ye, [
+          n("div", we, [
+            n("span", ke, k(P(Z)("colorGroup.angle", void 0, "角度")), 1),
+            C(me, {
+              trigger: "click",
+              position: "bottom-start",
+              offset: 6,
+              "show-arrow": !1,
+              "popup-visible": B.value,
+              disabled: i.disabled,
+              "unmount-on-close": !1,
+              "content-class": "x-color-group__dial-popup",
+              "onUpdate:popupVisible": Y
+            }, {
+              content: q(() => [
+                n("div", {
+                  class: j(["x-color-group__dial", { "is-disabled": i.disabled }]),
+                  role: "slider",
+                  tabindex: "0",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 360,
+                  "aria-valuenow": Math.round(u.value),
+                  "aria-disabled": i.disabled ? "true" : "false",
+                  onPointerdown: d(ae, ["prevent"]),
+                  onKeydown: [
+                    e[0] || (e[0] = f(d((o) => w(-1), ["prevent"]), ["left"])),
+                    e[1] || (e[1] = f(d((o) => w(1), ["prevent"]), ["right"])),
+                    e[2] || (e[2] = f(d((o) => w(5), ["prevent"]), ["up"])),
+                    e[3] || (e[3] = f(d((o) => w(-5), ["prevent"]), ["down"]))
+                  ]
+                }, [
+                  (v(), g("svg", $e, [
+                    e[4] || (e[4] = n("line", {
+                      x1: "18",
+                      y1: "50",
+                      x2: "82",
+                      y2: "50",
+                      class: "x-color-group__dial-grid"
+                    }, null, -1)),
+                    n("line", {
+                      x1: F.value.x,
+                      y1: F.value.y,
+                      x2: X.value.x,
+                      y2: X.value.y,
+                      class: "x-color-group__dial-axis"
+                    }, null, 8, Ve),
+                    e[5] || (e[5] = n("circle", {
+                      cx: "50",
+                      cy: "50",
+                      r: "32",
+                      class: "x-color-group__dial-ring"
+                    }, null, -1)),
+                    n("circle", {
+                      cx: S.value.x,
+                      cy: S.value.y,
+                      r: "6",
+                      class: "x-color-group__dial-dot-back"
+                    }, null, 8, Ae),
+                    n("circle", {
+                      cx: I.value.x,
+                      cy: I.value.y,
+                      r: "6",
+                      class: "x-color-group__dial-dot-front"
+                    }, null, 8, Le)
+                  ]))
+                ], 42, Ce)
+              ]),
+              default: q(() => [
+                n("button", {
+                  type: "button",
+                  class: "x-color-group__angle-button",
+                  disabled: i.disabled
+                }, [
+                  n("span", null, k(Math.round(u.value)) + "deg", 1),
+                  C(P(N), {
+                    name: "xiangxia",
+                    size: 10
+                  })
+                ], 8, Pe)
+              ]),
+              _: 1
+            }, 8, ["popup-visible", "disabled"])
+          ]),
+          U.value ? (v(), g("span", {
+            key: 0,
+            class: "x-color-group__toolbar-plus",
+            role: "button",
+            tabindex: "0",
+            "aria-disabled": i.disabled ? "true" : "false",
+            onClick: D,
+            onKeydown: [
+              f(d(D, ["prevent"]), ["enter"]),
+              f(d(D, ["prevent"]), ["space"])
+            ]
+          }, [
+            C(P(N), {
+              name: "checkbox-plus",
+              size: 14
+            })
+          ], 40, Ee)) : J("", !0)
+        ]),
+        n("div", De, [
+          (v(!0), g(Q, null, ve(a.value, (o, l) => (v(), g("div", {
+            key: `stop-${l}`,
+            class: "x-color-group__item"
+          }, [
+            n("label", Me, [
+              n("input", {
+                type: "color",
+                class: "x-color-group__swatch-input",
+                value: o.color,
+                disabled: i.disabled,
+                onInput: (r) => le(l, r)
+              }, null, 40, Ne),
+              n("span", {
+                class: "x-color-group__swatch-block",
+                style: H({ background: o.color })
+              }, null, 4)
+            ]),
+            n("span", ze, k(o.color), 1),
+            n("div", Be, [
+              n("label", Ie, [
+                n("input", {
+                  type: "number",
+                  min: "0",
+                  max: "100",
+                  step: "0.01",
+                  class: "x-color-group__item-percent",
+                  value: o.percent,
+                  disabled: i.disabled,
+                  onInput: (r) => ne(l, r)
+                }, null, 40, Se),
+                e[6] || (e[6] = n("span", null, "%", -1)),
+                n("button", {
+                  type: "button",
+                  class: "x-color-group__item-remove",
+                  disabled: i.disabled || a.value.length <= 2,
+                  onClick: (r) => oe(l)
+                }, [
+                  C(P(N), {
+                    name: "guanbi",
+                    size: 10
+                  })
+                ], 8, Fe)
+              ])
+            ])
+          ]))), 128))
+        ])
+      ])) : J("", !0),
+      n("div", Xe, [
+        ge(t.$slots, "default", {}, void 0, !0)
+      ])
+    ], 2));
+  }
+});
+export {
+  Ye as default
+};

package/dist/components/XColorPicker.vue.js

@@ -0,0 +1,62 @@
+import { defineComponent as h, ref as x, computed as p, openBlock as u, createElementBlock as f, normalizeClass as D, createElementVNode as m, unref as r, createVNode as V, createCommentVNode as g, toDisplayString as _ } from "vue";
+import C from "./XIcon.js";
+import { useXI18n as P } from "../composables/i18n.js";
+const E = ["value", "disabled"], B = ["disabled", "aria-label", "title"], I = { class: "x-color-picker__value" }, z = /* @__PURE__ */ h({
+  __name: "XColorPicker",
+  props: {
+    modelValue: { default: "#409eff" },
+    disabled: { type: Boolean },
+    dropper: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: k }) {
+    const v = e, t = k, { t: l } = P(), a = x(!1), d = p(() => typeof window > "u" ? !1 : !!window.EyeDropper && window.isSecureContext), s = p(() => v.disabled || !d.value || a.value);
+    function y(n) {
+      const o = n.target.value;
+      t("update:modelValue", o), t("change", o);
+    }
+    async function w() {
+      if (s.value || typeof window > "u") return;
+      const o = window.EyeDropper;
+      if (o) {
+        a.value = !0;
+        try {
+          const c = await new o().open(), i = c == null ? void 0 : c.sRGBHex;
+          typeof i == "string" && i.trim() && (t("update:modelValue", i), t("change", i));
+        } catch {
+        } finally {
+          a.value = !1;
+        }
+      }
+    }
+    return (n, o) => (u(), f("label", {
+      class: D(["x-color-picker", { "is-disabled": e.disabled }])
+    }, [
+      m("input", {
+        class: "x-color-picker__native",
+        type: "color",
+        value: e.modelValue,
+        disabled: e.disabled,
+        onInput: y
+      }, null, 40, E),
+      e.dropper ? (u(), f("button", {
+        key: 0,
+        type: "button",
+        class: "x-color-picker__dropper x-color-dropper x-color-d",
+        disabled: s.value,
+        "aria-label": a.value ? r(l)("colorPicker.picking", void 0, "正在吸取颜色") : r(l)("colorPicker.pickScreen", void 0, "吸取屏幕颜色"),
+        title: d.value ? r(l)("colorPicker.dropper", void 0, "吸管取色") : r(l)("colorPicker.unsupported", void 0, "当前浏览器不支持吸管取色"),
+        onClick: w
+      }, [
+        V(r(C), {
+          name: "dropper",
+          size: 18
+        })
+      ], 8, B)) : g("", !0),
+      m("span", I, _(e.modelValue), 1)
+    ], 2));
+  }
+});
+export {
+  z as default
+};