vft 0.0.375 → 0.0.376

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

@@ -1,34 +1,32 @@
-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 { 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 "../form/index.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 { 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 "@vueuse/core";
 import "@vft/utils";
-import { debugWarn } from "../../utils/error.js";
+import { debugWarn as R } from "../../utils/error.js";
 import "../config-provider/hooks/use-global-config.js";
-import { debounce } from "lodash-es";
-import { useNamespace } from "../../hooks/use-namespace/index.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 _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({
+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({
   name: "VftColorPicker"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
+}), eo = /* @__PURE__ */ U({
+  ..._e,
   props: {
     modelValue: {},
     id: {},
@@ -40,314 +38,238 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     label: {},
     tabindex: { default: 0 },
     predefine: {},
-    validateEvent: { type: Boolean, default: true }
+    validateEvent: { type: Boolean, default: !0 }
   },
   emits: [
-    UPDATE_MODEL_EVENT,
-    CHANGE_EVENT,
+    _,
+    ve,
     "activeChange",
     "click-outside"
   ],
-  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
+  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
       })
-    );
-    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)) {
+    ), 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))
         throw new TypeError("color should be instance of _color Class");
-      }
-      const { r, g, b } = color2.toRgb();
-      return showAlpha ? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})` : `rgb(${r}, ${g}, ${b})`;
+      const { r: k, g: T, b: D } = e.toRgb();
+      return t ? `rgba(${k}, ${T}, ${D}, ${e.get("alpha") / 100})` : `rgb(${k}, ${T}, ${D})`;
     }
-    function setShowPicker(value) {
-      showPicker.value = value;
+    function ae(e) {
+      m.value = e;
     }
-    const debounceSetShowPicker = debounce(setShowPicker, 100);
-    function hide(e) {
-      debounceSetShowPicker(false);
-      resetColor();
-      emit("click-outside", e);
+    const h = be(ae, 100);
+    function re(e) {
+      h(!1), S(), c("click-outside", e);
     }
-    function resetColor() {
-      nextTick(() => {
-        if (props.modelValue) {
-          color.fromString(props.modelValue);
-        } else {
-          color.value = "";
-          nextTick(() => {
-            showPanelColor.value = false;
-          });
-        }
+    function S() {
+      g(() => {
+        a.modelValue ? r.fromString(a.modelValue) : (r.value = "", g(() => {
+          i.value = !1;
+        }));
       });
     }
-    function handleTrigger() {
-      if (colorDisabled.value) return;
-      debounceSetShowPicker(!showPicker.value);
+    function F() {
+      E.value || h(!m.value);
     }
-    function handleConfirm() {
-      color.fromString(customInput.value);
+    function N() {
+      r.fromString(f.value);
     }
-    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
+    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
         });
-        if (!color.compare(newColor)) {
-          resetColor();
-        }
+        r.compare(t) || 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();
+    function ne() {
+      h(!1), c(_, null), c("change", null), a.modelValue !== null && a.validateEvent && b?.validate("change").catch((e) => R(e)), S();
     }
-    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);
-        }
+    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;
       }
-    );
-    watch(
-      () => currentColor.value,
-      (val) => {
-        customInput.value = val;
-        shouldActiveChange && emit("activeChange", val);
-        shouldActiveChange = true;
+    ), w(
+      () => I.value,
+      (e) => {
+        f.value = e, A && c("activeChange", e), A = !0;
       }
-    );
-    watch(
-      () => color.value,
+    ), w(
+      () => r.value,
       () => {
-        if (!props.modelValue && !showPanelColor.value) {
-          showPanelColor.value = true;
-        }
+        !a.modelValue && !i.value && (i.value = !0);
       }
-    );
-    watch(
-      () => showPicker.value,
+    ), w(
+      () => m.value,
       () => {
-        nextTick(() => {
-          hue.value?.update();
-          sv.value?.update();
-          alpha.value?.update();
+        g(() => {
+          z.value?.update(), Q.value?.update(), B.value?.update();
         });
       }
-    );
-    provide(colorPickerContextKey, {
-      currentColor
-    });
-    __expose({
+    ), ue(Ve, {
+      currentColor: I
+    }), W({
       /**
        * @description current color object
        */
-      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"))
-            }, [
-              createVNode(HueSlider, {
-                ref_key: "hue",
-                ref: hue,
-                class: "hue-slider",
-                color,
-                vertical: ""
-              }, null, 8, ["color"]),
-              createVNode(SvPanel, {
-                ref: "svPanel",
-                color
-              }, null, 8, ["color"])
-            ], 2),
-            _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"))
+      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"))
             }, [
-              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: "",
+              d(o(me), {
+                modelValue: f.value,
+                "onUpdate:modelValue": t[0] || (t[0] = (k) => f.value = k),
+                "validate-event": !1,
                 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"])
+                onKeyup: K(N, ["enter"]),
+                onBlur: N
+              }, null, 8, ["modelValue"])
+            ], 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
           }, [
-            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"), o(l).is("alpha", e.showAlpha)])
             }, [
-              createElementVNode("span", {
-                class: normalizeClass([unref(ns).be("picker", "color"), unref(ns).is("alpha", _ctx.showAlpha)])
+              u("span", {
+                class: n(o(l).be("picker", "color-inner")),
+                style: ce({
+                  backgroundColor: Y.value
+                })
               }, [
-                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)
+                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)
             ], 2)
-          ], 42, _hoisted_1)
-        ]),
-        _: 1
-      }, 8, ["visible", "popper-class", "transition"]);
-    };
+          ], 2)
+        ], 42, Se)
+      ]),
+      _: 1
+    }, 8, ["visible", "popper-class", "transition"]));
   }
 });
 export {
-  _sfc_main as default
+  eo as default
 };

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

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