vft 0.0.48 → 0.0.51

package/es/components/color-picker/color-picker.vue.d.ts

@@ -0,0 +1,124 @@
+import type { PropType as __PropType } from 'vue';
+import { type ComponentSize } from 'vft/es/constants';
+import Color from './utils/color';
+export interface ColorPickerProps {
+    modelValue?: string;
+    id?: string;
+    showAlpha?: boolean;
+    colorFormat?: string;
+    disabled?: boolean;
+    size?: ComponentSize;
+    popperClass?: string;
+    label?: string;
+    tabindex?: string | number;
+    predefine?: string[];
+    validateEvent?: boolean;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    modelValue: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    id: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    showAlpha: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    colorFormat: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    size: {
+        type: __PropType<"" | "default" | "small" | "large" | undefined>;
+        required: false;
+    };
+    popperClass: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    label: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    tabindex: {
+        type: __PropType<string | number | undefined>;
+        required: false;
+        default: number;
+    };
+    predefine: {
+        type: __PropType<string[] | undefined>;
+        required: false;
+    };
+    validateEvent: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        default: boolean;
+    };
+}, {
+    /**
+     * @description current color object
+     */
+    color: Color;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "activeChange")[], "update:modelValue" | "change" | "activeChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    id: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    showAlpha: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    colorFormat: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    size: {
+        type: __PropType<"" | "default" | "small" | "large" | undefined>;
+        required: false;
+    };
+    popperClass: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    label: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    tabindex: {
+        type: __PropType<string | number | undefined>;
+        required: false;
+        default: number;
+    };
+    predefine: {
+        type: __PropType<string[] | undefined>;
+        required: false;
+    };
+    validateEvent: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onActiveChange?: ((...args: any[]) => any) | undefined;
+}, {
+    validateEvent: boolean | undefined;
+    tabindex: string | number | undefined;
+}>;
+export default _sfc_main;

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

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

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

@@ -0,0 +1,269 @@
+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 L, createElementBlock as H, createElementVNode as p, normalizeClass as t, createVNode as f, createCommentVNode as E, withKeys as M, createTextVNode as O, normalizeStyle as ce, vShow as ue } from "vue";
+import { debounce as de } from "lodash";
+import { VftButton as R } from "../button/index.js";
+import { VftIcon as U } from "../icon/index.js";
+import { ClickOutside as pe } from "@vft/directives";
+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 _ } from "../../utils/error.js";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+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"
+}), el = /* @__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 r = 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(r, a.showAlpha)), S = h(() => !a.modelValue && !c.value ? "" : r.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 ? r.fromString(a.modelValue) : (r.value = "", y(() => {
+          c.value = !1;
+        }));
+      });
+    }
+    function T() {
+      A.value || w(!k.value);
+    }
+    function I() {
+      r.fromString(b.value);
+    }
+    function re() {
+      const l = r.value;
+      v($, l), v("change", l), a.validateEvent && (s == null || s.validate("change").catch((n) => _(n))), w(!1), y(() => {
+        const n = new z({
+          enableAlpha: a.showAlpha,
+          format: a.colorFormat || "",
+          value: a.modelValue
+        });
+        r.compare(n) || P();
+      });
+    }
+    function te() {
+      w(!1), v($, null), v("change", null), a.modelValue !== null && a.validateEvent && (s == null || s.validate("change").catch((l) => _(l))), P();
+    }
+    return ie(() => {
+      a.modelValue && (b.value = S.value);
+    }), g(
+      () => a.modelValue,
+      (l) => {
+        l ? l && l !== r.value && (x = !1, r.fromString(l)) : c.value = !1;
+      }
+    ), g(
+      () => S.value,
+      (l) => {
+        b.value = l, x && v("activeChange", l), x = !0;
+      }
+    ), g(
+      () => r.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: r
+    }), (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(() => [
+        L((m(), H("div", null, [
+          p("div", {
+            class: t(e(o).be("dropdown", "main-wrapper"))
+          }, [
+            f(we, {
+              ref_key: "hue",
+              ref: F,
+              class: "hue-slider",
+              color: e(r),
+              vertical: ""
+            }, null, 8, ["color"]),
+            f(ye, {
+              ref: "svPanel",
+              color: e(r)
+            }, null, 8, ["color"])
+          ], 2),
+          i.showAlpha ? (m(), C(he, {
+            key: 0,
+            ref_key: "alpha",
+            ref: N,
+            color: e(r)
+          }, null, 8, ["color"])) : E("", !0),
+          i.predefine ? (m(), C(ge, {
+            key: 1,
+            ref: "predefine",
+            color: e(r),
+            colors: i.predefine
+          }, null, 8, ["color", "colors"])) : E("", !0),
+          p("div", {
+            class: t(e(o).be("dropdown", "btns"))
+          }, [
+            p("span", {
+              class: t(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: M(I, ["enter"]),
+                onBlur: I
+              }, null, 8, ["modelValue", "onKeyup"])
+            ], 2),
+            f(e(R), {
+              class: t(e(o).be("dropdown", "link-btn")),
+              text: "",
+              size: "small",
+              onClick: te
+            }, {
+              default: V(() => [
+                O(" 取消 ")
+              ]),
+              _: 1
+            }, 8, ["class"]),
+            f(e(R), {
+              plain: "",
+              size: "small",
+              class: t(e(o).be("dropdown", "btn")),
+              onClick: re
+            }, {
+              default: V(() => [
+                O(" 确认 ")
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ], 2)
+        ])), [
+          [e(pe), ae]
+        ])
+      ]),
+      default: V(() => [
+        p("div", {
+          id: e(q),
+          class: t(e(ee)),
+          role: "button",
+          "aria-label": e(Y),
+          "aria-labelledby": e(Z),
+          "aria-description": `目前色彩為 {color}。按一下 Enter 以選擇新色彩${i.modelValue}`,
+          tabindex: i.tabindex,
+          onKeydown: M(T, ["enter"])
+        }, [
+          e(A) ? (m(), H("div", {
+            key: 0,
+            class: t(e(o).be("picker", "mask"))
+          }, null, 2)) : E("", !0),
+          p("div", {
+            class: t(e(o).be("picker", "trigger")),
+            onClick: T
+          }, [
+            p("span", {
+              class: t([e(o).be("picker", "color"), e(o).is("alpha", i.showAlpha)])
+            }, [
+              p("span", {
+                class: t(e(o).be("picker", "color-inner")),
+                style: ce({
+                  backgroundColor: e(X)
+                })
+              }, [
+                L(f(e(U), {
+                  icon: "ico-ep:arrow-down",
+                  class: t([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(U), {
+                  key: 0,
+                  icon: "ico-ep:circle-close",
+                  class: t([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 {
+  el as default
+};

package/es/components/color-picker/components/alpha-slider.vue.d.ts

@@ -0,0 +1,42 @@
+import type { PropType as __PropType } from 'vue';
+import type Color from '../utils/color';
+export interface AlphaSliderProps {
+    color: Color;
+    vertical?: boolean;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    color: {
+        type: __PropType<Color>;
+        required: true;
+    };
+    vertical: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}, {
+    /**
+     * @description update alpha slider manually
+     * @type {Function}
+     */
+    update: () => void;
+    /**
+     * @description bar element ref
+     * @type {HTMLElement}
+     */
+    bar: import("vue").ShallowRef<HTMLElement | undefined>;
+    /**
+     * @description thumb element ref
+     * @type {HTMLElement}
+     */
+    thumb: import("vue").ShallowRef<HTMLElement | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: __PropType<Color>;
+        required: true;
+    };
+    vertical: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}>>, {}>;
+export default _sfc_main;

package/es/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/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/components/color-picker/components/hue-slider.vue.d.ts

@@ -0,0 +1,44 @@
+import type { PropType } from 'vue';
+import type Color from '../utils/color';
+declare const _sfc_main: import("vue").DefineComponent<{
+    color: {
+        type: PropType<Color>;
+        required: true;
+    };
+    vertical: BooleanConstructor;
+}, {
+    bar: import("vue").Ref<HTMLElement | undefined>;
+    thumb: import("vue").Ref<HTMLElement | undefined>;
+    thumbLeft: import("vue").Ref<number>;
+    thumbTop: import("vue").Ref<number>;
+    hueValue: import("vue").ComputedRef<any>;
+    handleClick: (event: MouseEvent | TouchEvent) => void;
+    update: () => void;
+    ns: {
+        namespace: import("vue").Ref<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string | undefined>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string | undefined>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<Color>;
+        required: true;
+    };
+    vertical: BooleanConstructor;
+}>>, {
+    vertical: boolean;
+}>;
+export default _sfc_main;

package/es/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/components/color-picker/components/hue-slider.vue2.js

@@ -0,0 +1,102 @@
+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 "@vue/reactivity";
+import "@vue/shared";
+import { draggable as v } from "../utils/draggable.js";
+const S = 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 {
+  S as default
+};