vft 0.0.376 → 0.0.378

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

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

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

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