vft 0.0.428 → 0.0.430

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

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

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

@@ -0,0 +1,26 @@
+import s from "./hue-slider.vue2.js";
+import { createElementBlock as t, openBlock 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 a(), t("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/components/color-picker/components/predefine.vue.js

@@ -0,0 +1,31 @@
+import t from "./predefine.vue2.js";
+import { createElementBlock as r, openBlock 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 l(), r("div", {
+    class: s(e.ns.b())
+  }, [
+    a("div", {
+      class: s(e.ns.e("colors"))
+    }, [
+      (l(!0), r(c, null, d(e.rgbaColors, (o, n) => (l(), r("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/components/color-picker/components/sv-panel.vue.js

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

package/es/components/context-menu/context-menu.vue2.js

@@ -0,0 +1,104 @@
+import { defineComponent as p, ref as c, computed as k, createBlock as d, openBlock as r, Transition as C, withCtx as b, withDirectives as g, createElementVNode as m, normalizeClass as z, withModifiers as M, normalizeStyle as $, unref as u, createElementBlock as B, Fragment as E, renderList as S, vShow as F } from "vue";
+import { useTimeoutFn as H, useClickAway as I, useEventListener as f } from "@vft/use";
+import { VftMenuItem as L } from "../menu/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as N } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+const R = { class: "vft-sub-menu" }, T = p({
+  name: "vft-context-menu"
+}), U = /* @__PURE__ */ p({
+  ...T,
+  props: {
+    axis: {},
+    styles: {},
+    width: {},
+    items: {}
+  },
+  setup(n) {
+    const v = N("context-menu");
+    let a = c();
+    const x = k(() => {
+      const { x: t, y: o } = n.axis || { x: 0, y: 0 }, e = (n.items || []).length * 40, l = n.width || 0, s = document.body, w = s.clientWidth < t + l ? t - l : t, y = s.clientHeight < o + e ? o - e : o;
+      return {
+        zIndex: 3e3,
+        ...n.styles,
+        position: "fixed",
+        width: `${n.width}px`,
+        left: `${w + 1}px`,
+        top: `${y + 1}px`
+      };
+    });
+    let i = c(!1);
+    H(() => {
+      i.value = !0;
+    }, 0), I(
+      a,
+      () => {
+        i.value = !1;
+      },
+      {
+        listenerOptions: {
+          capture: !0
+        }
+      }
+    ), f(
+      window,
+      "scroll",
+      () => {
+        i.value = !1;
+      },
+      {
+        capture: !0
+      }
+    ), f(
+      window,
+      "drag",
+      () => {
+        i.value = !1;
+      },
+      {
+        capture: !0
+      }
+    );
+    function h(t) {
+      t?.disabled || (t.handler?.(), i.value = !1);
+    }
+    return (t, o) => (r(), d(C, { name: "vft-zoom-in-top" }, {
+      default: b(() => [
+        g(m("div", {
+          ref_key: "contextMenuRef",
+          ref: a,
+          style: $(x.value),
+          onClick: o[0] || (o[0] = M(() => {
+          }, ["stop"])),
+          class: z([u(v).b(), "vft-menu"])
+        }, [
+          m("div", R, [
+            (r(!0), B(E, null, S(n.items, (e, l) => (r(), d(u(L), {
+              onClick: (s) => h(e),
+              index: l + e.text,
+              title: e.text,
+              divider: e.divider,
+              disabled: e.disabled,
+              icon: e.iconCfg,
+              "is-alone-use": "",
+              key: l
+            }, null, 8, ["onClick", "index", "title", "divider", "disabled", "icon"]))), 128))
+          ])
+        ], 6), [
+          [F, u(i)]
+        ])
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  U as default
+};