vft 0.0.48 → 0.0.50

package/es/packages/components/color-picker/color-picker.vue2.js

@@ -0,0 +1,267 @@
+import { defineComponent as G, ref as d, reactive as ne, computed as h, onMounted as ie, watch as g, nextTick as y, provide as se, openBlock as m, createBlock as C, unref as e, withCtx as V, withDirectives as _, createElementBlock as L, createElementVNode as p, normalizeClass as r, createVNode as f, createCommentVNode as E, withKeys as H, createTextVNode as M, normalizeStyle as ce, vShow as ue } from "vue";
+import { debounce as de } from "lodash";
+import { VftButton as O } from "../button/index.js";
+import { VftIcon as R } from "../icon/index.js";
+import { ClickOutside as pe } from "../../../common/directives/dist/es/index.js";
+import { VftTooltip as me } from "../tooltip/index.js";
+import { VftInput as fe } from "../input/index.js";
+import "../form/index.js";
+import { useNamespace as ve } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import { debugWarn as U } from "../../utils/error.js";
+import "../../utils/ns-cover.js";
+import { UPDATE_MODEL_EVENT as $, CHANGE_EVENT as be } from "../../constants/event.js";
+import he from "./components/alpha-slider.vue2.js";
+import { colorPickerContextKey as ke } from "./contants.js";
+import we from "./components/hue-slider.vue.js";
+import ge from "./components/predefine.vue.js";
+import ye from "./components/sv-panel.vue.js";
+import z from "./utils/color.js";
+import { useFormItem as Ce, useFormItemInputId as Ve } from "../form/hooks/use-form-item.js";
+import { useFormSize as Ee, useFormDisabled as Ae } from "../form/hooks/use-form-common-props.js";
+const xe = ["id", "aria-label", "aria-labelledby", "aria-description", "tabindex", "onKeydown"], Se = G({
+  name: "VftColorPicker"
+}), Ye = /* @__PURE__ */ G({
+  ...Se,
+  props: {
+    modelValue: null,
+    id: null,
+    showAlpha: { type: Boolean },
+    colorFormat: null,
+    disabled: { type: Boolean },
+    size: null,
+    popperClass: null,
+    label: null,
+    tabindex: { default: 0 },
+    predefine: null,
+    validateEvent: { type: Boolean, default: !0 }
+  },
+  emits: [$, be, "activeChange"],
+  setup(i, { expose: W, emit: v }) {
+    const a = i, o = ve("color"), { formItem: s } = Ce(), j = Ee(), A = Ae(), { inputId: q, isLabeledByFormItem: B } = Ve(a, {
+      formItemContext: s
+    }), F = d(), J = d(), N = d(), Q = d();
+    let x = !0;
+    const t = ne(
+      new z({
+        enableAlpha: a.showAlpha,
+        format: a.colorFormat || "",
+        value: a.modelValue
+      })
+    ), k = d(!1), c = d(!1), b = d(""), X = h(() => !a.modelValue && !c.value ? "transparent" : le(t, a.showAlpha)), S = h(() => !a.modelValue && !c.value ? "" : t.value), Y = h(() => B.value ? void 0 : a.label || "色彩选择器"), Z = h(() => B.value ? s == null ? void 0 : s.labelId : void 0), ee = h(() => [
+      o.b("picker"),
+      o.is("disabled", A.value),
+      o.bm("picker", j.value)
+    ]);
+    function le(l, n) {
+      if (!(l instanceof z))
+        throw new TypeError("color should be instance of _color Class");
+      const { r: u, g: K, b: D } = l.toRgb();
+      return n ? `rgba(${u}, ${K}, ${D}, ${l.get("alpha") / 100})` : `rgb(${u}, ${K}, ${D})`;
+    }
+    function oe(l) {
+      k.value = l;
+    }
+    const w = de(oe, 100);
+    function ae() {
+      w(!1), P();
+    }
+    function P() {
+      y(() => {
+        a.modelValue ? t.fromString(a.modelValue) : (t.value = "", y(() => {
+          c.value = !1;
+        }));
+      });
+    }
+    function T() {
+      A.value || w(!k.value);
+    }
+    function I() {
+      t.fromString(b.value);
+    }
+    function te() {
+      const l = t.value;
+      v($, l), v("change", l), a.validateEvent && (s == null || s.validate("change").catch((n) => U(n))), w(!1), y(() => {
+        const n = new z({
+          enableAlpha: a.showAlpha,
+          format: a.colorFormat || "",
+          value: a.modelValue
+        });
+        t.compare(n) || P();
+      });
+    }
+    function re() {
+      w(!1), v($, null), v("change", null), a.modelValue !== null && a.validateEvent && (s == null || s.validate("change").catch((l) => U(l))), P();
+    }
+    return ie(() => {
+      a.modelValue && (b.value = S.value);
+    }), g(
+      () => a.modelValue,
+      (l) => {
+        l ? l && l !== t.value && (x = !1, t.fromString(l)) : c.value = !1;
+      }
+    ), g(
+      () => S.value,
+      (l) => {
+        b.value = l, x && v("activeChange", l), x = !0;
+      }
+    ), g(
+      () => t.value,
+      () => {
+        !a.modelValue && !c.value && (c.value = !0);
+      }
+    ), g(
+      () => k.value,
+      () => {
+        y(() => {
+          var l, n, u;
+          (l = F.value) == null || l.update(), (n = J.value) == null || n.update(), (u = N.value) == null || u.update();
+        });
+      }
+    ), se(ke, {
+      currentColor: S
+    }), W({
+      /**
+       * @description current color object
+       */
+      color: t
+    }), (l, n) => (m(), C(e(me), {
+      ref_key: "popper",
+      ref: Q,
+      visible: k.value,
+      "show-arrow": !1,
+      "fallback-placements": ["bottom", "top", "right", "left"],
+      offset: 0,
+      "gpu-acceleration": !1,
+      "popper-class": [e(o).be("picker", "panel"), e(o).b("dropdown"), i.popperClass],
+      "stop-popper-mouse-event": !1,
+      effect: "light",
+      trigger: "click",
+      transition: `${e(o).namespace.value}-zoom-in-top`,
+      persistent: ""
+    }, {
+      content: V(() => [
+        _((m(), L("div", null, [
+          p("div", {
+            class: r(e(o).be("dropdown", "main-wrapper"))
+          }, [
+            f(we, {
+              ref_key: "hue",
+              ref: F,
+              class: "hue-slider",
+              color: e(t),
+              vertical: ""
+            }, null, 8, ["color"]),
+            f(ye, {
+              ref: "svPanel",
+              color: e(t)
+            }, null, 8, ["color"])
+          ], 2),
+          i.showAlpha ? (m(), C(he, {
+            key: 0,
+            ref_key: "alpha",
+            ref: N,
+            color: e(t)
+          }, null, 8, ["color"])) : E("", !0),
+          i.predefine ? (m(), C(ge, {
+            key: 1,
+            ref: "predefine",
+            color: e(t),
+            colors: i.predefine
+          }, null, 8, ["color", "colors"])) : E("", !0),
+          p("div", {
+            class: r(e(o).be("dropdown", "btns"))
+          }, [
+            p("span", {
+              class: r(e(o).be("dropdown", "value"))
+            }, [
+              f(e(fe), {
+                modelValue: b.value,
+                "onUpdate:modelValue": n[0] || (n[0] = (u) => b.value = u),
+                "validate-event": !1,
+                size: "small",
+                onKeyup: H(I, ["enter"]),
+                onBlur: I
+              }, null, 8, ["modelValue", "onKeyup"])
+            ], 2),
+            f(e(O), {
+              class: r(e(o).be("dropdown", "link-btn")),
+              text: "",
+              size: "small",
+              onClick: re
+            }, {
+              default: V(() => [
+                M(" 取消 ")
+              ]),
+              _: 1
+            }, 8, ["class"]),
+            f(e(O), {
+              plain: "",
+              size: "small",
+              class: r(e(o).be("dropdown", "btn")),
+              onClick: te
+            }, {
+              default: V(() => [
+                M(" 确认 ")
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ], 2)
+        ])), [
+          [e(pe), ae]
+        ])
+      ]),
+      default: V(() => [
+        p("div", {
+          id: e(q),
+          class: r(e(ee)),
+          role: "button",
+          "aria-label": e(Y),
+          "aria-labelledby": e(Z),
+          "aria-description": `目前色彩為 {color}。按一下 Enter 以選擇新色彩${i.modelValue}`,
+          tabindex: i.tabindex,
+          onKeydown: H(T, ["enter"])
+        }, [
+          e(A) ? (m(), L("div", {
+            key: 0,
+            class: r(e(o).be("picker", "mask"))
+          }, null, 2)) : E("", !0),
+          p("div", {
+            class: r(e(o).be("picker", "trigger")),
+            onClick: T
+          }, [
+            p("span", {
+              class: r([e(o).be("picker", "color"), e(o).is("alpha", i.showAlpha)])
+            }, [
+              p("span", {
+                class: r(e(o).be("picker", "color-inner")),
+                style: ce({
+                  backgroundColor: e(X)
+                })
+              }, [
+                _(f(e(R), {
+                  icon: "ico-ep:arrow-down",
+                  class: r([e(o).be("picker", "icon"), e(o).is("icon-arrow-down")])
+                }, null, 8, ["class"]), [
+                  [ue, i.modelValue || c.value]
+                ]),
+                !i.modelValue && !c.value ? (m(), C(e(R), {
+                  key: 0,
+                  icon: "ico-ep:circle-close",
+                  class: r([e(o).be("picker", "empty"), e(o).is("icon-close")])
+                }, null, 8, ["class"])) : E("", !0)
+              ], 6)
+            ], 2)
+          ], 2)
+        ], 42, xe)
+      ]),
+      _: 1
+    }, 8, ["visible", "popper-class", "transition"]));
+  }
+});
+export {
+  Ye as default
+};

package/es/packages/components/color-picker/components/alpha-slider.vue.js

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

package/es/packages/components/color-picker/components/alpha-slider.vue2.js

@@ -0,0 +1,55 @@
+import { defineComponent as u, openBlock as C, createElementBlock as S, normalizeClass as r, unref as e, createElementVNode as a, normalizeStyle as c } from "vue";
+import { useAlphaSlider as v, useAlphaSliderDOM as A } from "../composables/use-alpha-slider.js";
+const E = "VftColorAlphaSlider", N = u({
+  name: E
+}), O = /* @__PURE__ */ u({
+  ...N,
+  props: {
+    color: null,
+    vertical: { type: Boolean }
+  },
+  setup(i, { expose: m }) {
+    const o = i, { bar: l, thumb: t, handleDrag: p, handleClick: n } = v(o), { rootKls: d, barKls: f, barStyle: _, thumbKls: b, thumbStyle: h, update: y } = A(o, {
+      bar: l,
+      thumb: t,
+      handleDrag: p
+    });
+    return m({
+      /**
+       * @description update alpha slider manually
+       * @type {Function}
+       */
+      update: y,
+      /**
+       * @description bar element ref
+       * @type {HTMLElement}
+       */
+      bar: l,
+      /**
+       * @description thumb element ref
+       * @type {HTMLElement}
+       */
+      thumb: t
+    }), (B, s) => (C(), S("div", {
+      class: r(e(d))
+    }, [
+      a("div", {
+        ref_key: "bar",
+        ref: l,
+        class: r(e(f)),
+        style: c(e(_)),
+        onClick: s[0] || (s[0] = //@ts-ignore
+        (...k) => e(n) && e(n)(...k))
+      }, null, 6),
+      a("div", {
+        ref_key: "thumb",
+        ref: t,
+        class: r(e(b)),
+        style: c(e(h))
+      }, null, 6)
+    ], 2));
+  }
+});
+export {
+  O as default
+};

package/es/packages/components/color-picker/components/hue-slider.vue.js

@@ -0,0 +1,26 @@
+import s from "./hue-slider.vue2.js";
+import { openBlock as t, createElementBlock as a, normalizeClass as l, createElementVNode as n, normalizeStyle as i } from "vue";
+import m from "../../../../_virtual/_plugin-vue_export-helper.js";
+function p(e, r, f, d, u, b) {
+  return t(), a("div", {
+    class: l([e.ns.b(), e.ns.is("vertical", e.vertical)])
+  }, [
+    n("div", {
+      ref: "bar",
+      class: l(e.ns.e("bar")),
+      onClick: r[0] || (r[0] = (...o) => e.handleClick && e.handleClick(...o))
+    }, null, 2),
+    n("div", {
+      ref: "thumb",
+      class: l(e.ns.e("thumb")),
+      style: i({
+        left: e.thumbLeft + "px",
+        top: e.thumbTop + "px"
+      })
+    }, null, 6)
+  ], 2);
+}
+const v = /* @__PURE__ */ m(s, [["render", p]]);
+export {
+  v as default
+};

package/es/packages/components/color-picker/components/hue-slider.vue2.js

@@ -0,0 +1,100 @@
+import { defineComponent as W, getCurrentInstance as T, ref as a, computed as w, watch as x, onMounted as B } from "vue";
+import "@vft/utils";
+import "lodash";
+import "@vueuse/core";
+import "../../../utils/ns-cover.js";
+import { getClientXY as L } from "../../../utils/dom/position.js";
+import { useNamespace as V } from "../../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../../hooks/use-z-index/index.js";
+import { draggable as v } from "../utils/draggable.js";
+const O = W({
+  name: "VftColorHueSlider",
+  props: {
+    color: {
+      type: Object,
+      required: !0
+    },
+    vertical: Boolean
+  },
+  setup(u) {
+    const g = V("color-hue-slider"), l = T(), e = a(), i = a(), s = a(0), d = a(0), m = w(() => u.color.get("hue"));
+    x(
+      () => m.value,
+      () => {
+        c();
+      }
+    );
+    function p(t) {
+      t.target !== e.value && f(t);
+    }
+    function f(t) {
+      if (!i.value || !e.value)
+        return;
+      const r = l.vnode.el.getBoundingClientRect(), { clientX: C, clientY: H } = L(t);
+      let h;
+      if (u.vertical) {
+        let o = H - r.top;
+        o = Math.min(o, r.height - e.value.offsetHeight / 2), o = Math.max(e.value.offsetHeight / 2, o), h = Math.round(
+          (o - e.value.offsetHeight / 2) / (r.height - e.value.offsetHeight) * 360
+        );
+      } else {
+        let o = C - r.left;
+        o = Math.min(o, r.width - e.value.offsetWidth / 2), o = Math.max(e.value.offsetWidth / 2, o), h = Math.round(
+          (o - e.value.offsetWidth / 2) / (r.width - e.value.offsetWidth) * 360
+        );
+      }
+      u.color.set("hue", h);
+    }
+    function M() {
+      if (!e.value)
+        return 0;
+      const t = l.vnode.el;
+      if (u.vertical)
+        return 0;
+      const n = u.color.get("hue");
+      return t ? Math.round(
+        n * (t.offsetWidth - e.value.offsetWidth / 2) / 360
+      ) : 0;
+    }
+    function b() {
+      if (!e.value)
+        return 0;
+      const t = l.vnode.el;
+      if (!u.vertical)
+        return 0;
+      const n = u.color.get("hue");
+      return t ? Math.round(
+        n * (t.offsetHeight - e.value.offsetHeight / 2) / 360
+      ) : 0;
+    }
+    function c() {
+      s.value = M(), d.value = b();
+    }
+    return B(() => {
+      if (!i.value || !e.value)
+        return;
+      const t = {
+        drag: (n) => {
+          f(n);
+        },
+        end: (n) => {
+          f(n);
+        }
+      };
+      v(i.value, t), v(e.value, t), c();
+    }), {
+      bar: i,
+      thumb: e,
+      thumbLeft: s,
+      thumbTop: d,
+      hueValue: m,
+      handleClick: p,
+      update: c,
+      ns: g
+    };
+  }
+});
+export {
+  O as default
+};

package/es/packages/components/color-picker/components/predefine.vue.js

@@ -0,0 +1,31 @@
+import t from "./predefine.vue2.js";
+import { openBlock as r, createElementBlock as l, normalizeClass as s, createElementVNode as a, Fragment as c, renderList as d, normalizeStyle as i } from "vue";
+import p from "../../../../_virtual/_plugin-vue_export-helper.js";
+const m = ["onClick"];
+function u(e, f, k, v, h, C) {
+  return r(), l("div", {
+    class: s(e.ns.b())
+  }, [
+    a("div", {
+      class: s(e.ns.e("colors"))
+    }, [
+      (r(!0), l(c, null, d(e.rgbaColors, (o, n) => (r(), l("div", {
+        key: e.colors[n],
+        class: s([
+          e.ns.e("color-selector"),
+          e.ns.is("alpha", o._alpha < 100),
+          { selected: o.selected }
+        ]),
+        onClick: ($) => e.handleSelect(n)
+      }, [
+        a("div", {
+          style: i({ backgroundColor: o.value })
+        }, null, 4)
+      ], 10, m))), 128))
+    ], 2)
+  ], 2);
+}
+const y = /* @__PURE__ */ p(t, [["render", u]]);
+export {
+  y as default
+};

package/es/packages/components/color-picker/components/predefine.vue2.js

@@ -0,0 +1,53 @@
+import { defineComponent as f, inject as s, ref as p, watch as d, watchEffect as C } from "vue";
+import { useNamespace as g } from "../../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../../utils/ns-cover.js";
+import { colorPickerContextKey as h } from "../contants.js";
+import a from "../utils/color.js";
+const _ = f({
+  props: {
+    colors: {
+      type: Array,
+      required: !0
+    },
+    color: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(o) {
+    const m = g("color-predefine"), { currentColor: i } = s(h), n = p(l(o.colors, o.color));
+    d(
+      () => i.value,
+      (e) => {
+        const t = new a();
+        t.fromString(e), n.value.forEach((c) => {
+          c.selected = t.compare(c);
+        });
+      }
+    ), C(() => {
+      n.value = l(o.colors, o.color);
+    });
+    function u(e) {
+      o.color.fromString(o.colors[e]);
+    }
+    function l(e, t) {
+      return e.map((c) => {
+        const r = new a();
+        return r.enableAlpha = !0, r.format = "rgba", r.fromString(c), r.selected = r.value === t.value, r;
+      });
+    }
+    return {
+      rgbaColors: n,
+      handleSelect: u,
+      ns: m
+    };
+  }
+});
+export {
+  _ as default
+};

package/es/packages/components/color-picker/components/sv-panel.vue.js

@@ -0,0 +1,32 @@
+import l from "./sv-panel.vue2.js";
+import { openBlock as n, createElementBlock as t, normalizeClass as o, normalizeStyle as r, createElementVNode as s } from "vue";
+import a from "../../../../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ s("div", null, null, -1), i = [
+  c
+];
+function d(e, p, u, m, f, v) {
+  return n(), t("div", {
+    class: o(e.ns.b()),
+    style: r({
+      backgroundColor: e.background
+    })
+  }, [
+    s("div", {
+      class: o(e.ns.e("white"))
+    }, null, 2),
+    s("div", {
+      class: o(e.ns.e("black"))
+    }, null, 2),
+    s("div", {
+      class: o(e.ns.e("cursor")),
+      style: r({
+        top: e.cursorTop + "px",
+        left: e.cursorLeft + "px"
+      })
+    }, i, 6)
+  ], 6);
+}
+const h = /* @__PURE__ */ a(l, [["render", d]]);
+export {
+  h as default
+};

package/es/packages/components/color-picker/components/sv-panel.vue2.js

@@ -0,0 +1,63 @@
+import { defineComponent as p, getCurrentInstance as M, ref as d, computed as w, watch as C, onMounted as b } from "vue";
+import "@vft/utils";
+import "lodash";
+import "@vueuse/core";
+import "../../../utils/ns-cover.js";
+import { getClientXY as x } from "../../../utils/dom/position.js";
+import { useNamespace as V } from "../../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../../hooks/use-z-index/index.js";
+import { draggable as X } from "../utils/draggable.js";
+const L = p({
+  name: "VftSlPanel",
+  props: {
+    color: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(o) {
+    const f = V("color-svpanel"), a = M(), r = d(0), i = d(0), g = d("hsl(0, 100%, 50%)"), v = w(() => {
+      const t = o.color.get("hue"), c = o.color.get("value");
+      return { hue: t, value: c };
+    });
+    function u() {
+      const t = o.color.get("saturation"), c = o.color.get("value"), e = a.vnode.el, { clientWidth: m, clientHeight: h } = e;
+      i.value = t * m / 100, r.value = (100 - c) * h / 100, g.value = `hsl(${o.color.get("hue")}, 100%, 50%)`;
+    }
+    function s(t) {
+      const e = a.vnode.el.getBoundingClientRect(), { clientX: m, clientY: h } = x(t);
+      let n = m - e.left, l = h - e.top;
+      n = Math.max(0, n), n = Math.min(n, e.width), l = Math.max(0, l), l = Math.min(l, e.height), i.value = n, r.value = l, o.color.set({
+        saturation: n / e.width * 100,
+        value: 100 - l / e.height * 100
+      });
+    }
+    return C(
+      () => v.value,
+      () => {
+        u();
+      }
+    ), b(() => {
+      X(a.vnode.el, {
+        drag: (t) => {
+          s(t);
+        },
+        end: (t) => {
+          s(t);
+        }
+      }), u();
+    }), {
+      cursorTop: r,
+      cursorLeft: i,
+      background: g,
+      colorValue: v,
+      handleDrag: s,
+      update: u,
+      ns: f
+    };
+  }
+});
+export {
+  L as default
+};