vft 0.0.376 → 0.0.378

package/lib/components/color-picker/color-picker.vue2.cjs

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

package/lib/components/color-picker/components/alpha-slider.vue.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alpha-slider.vue2.cjs");exports.default=e.default;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const alphaSlider_vue_vue_type_script_setup_true_lang = require("./alpha-slider.vue2.cjs");
+exports.default = alphaSlider_vue_vue_type_script_setup_true_lang.default;

package/lib/components/color-picker/components/alpha-slider.vue2.cjs

@@ -1 +1,62 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("../composables/use-alpha-slider.cjs"),y="VftColorAlphaSlider",S=e.defineComponent({name:y}),h=e.defineComponent({...S,props:{color:{},vertical:{type:Boolean}},setup(a,{expose:u}){const t=a,{bar:l,thumb:r,handleDrag:i,handleClick:n}=s.useAlphaSlider(t),{rootKls:c,barKls:d,barStyle:f,thumbKls:m,thumbStyle:p,update:_}=s.useAlphaSliderDOM(t,{bar:l,thumb:r,handleDrag:i});return u({update:_,bar:l,thumb:r}),(C,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(c))},[e.createElementVNode("div",{ref_key:"bar",ref:l,class:e.normalizeClass(e.unref(d)),style:e.normalizeStyle(e.unref(f)),onClick:o[0]||(o[0]=(...b)=>e.unref(n)&&e.unref(n)(...b))},null,6),e.createElementVNode("div",{ref_key:"thumb",ref:r,class:e.normalizeClass(e.unref(m)),style:e.normalizeStyle(e.unref(p))},null,6)],2))}});exports.default=h;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const useAlphaSlider = require("../composables/use-alpha-slider.cjs");
+const COMPONENT_NAME = "VftColorAlphaSlider";
+const __default__ = vue.defineComponent({
+  name: COMPONENT_NAME
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    color: {},
+    vertical: { type: Boolean }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const { bar, thumb, handleDrag, handleClick } = useAlphaSlider.useAlphaSlider(props);
+    const { rootKls, barKls, barStyle, thumbKls, thumbStyle, update } = useAlphaSlider.useAlphaSliderDOM(props, {
+      bar,
+      thumb,
+      handleDrag
+    });
+    __expose({
+      /**
+       * @description update alpha slider manually
+       * @type {Function}
+       */
+      update,
+      /**
+       * @description bar element ref
+       * @type {HTMLElement}
+       */
+      bar,
+      /**
+       * @description thumb element ref
+       * @type {HTMLElement}
+       */
+      thumb
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(rootKls))
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "bar",
+          ref: bar,
+          class: vue.normalizeClass(vue.unref(barKls)),
+          style: vue.normalizeStyle(vue.unref(barStyle)),
+          onClick: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => vue.unref(handleClick) && vue.unref(handleClick)(...args))
+        }, null, 6),
+        vue.createElementVNode("div", {
+          ref_key: "thumb",
+          ref: thumb,
+          class: vue.normalizeClass(vue.unref(thumbKls)),
+          style: vue.normalizeStyle(vue.unref(thumbStyle))
+        }, null, 6)
+      ], 2);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/color-picker/components/hue-slider.vue.cjs

@@ -1 +1,26 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./hue-slider.vue2.cjs"),l=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs");function u(e,r,i,o,d,p){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass([e.ns.b(),e.ns.is("vertical",e.vertical)])},[l.createElementVNode("div",{ref:"bar",class:l.normalizeClass(e.ns.e("bar")),onClick:r[0]||(r[0]=(...n)=>e.handleClick&&e.handleClick(...n))},null,2),l.createElementVNode("div",{ref:"thumb",class:l.normalizeClass(e.ns.e("thumb")),style:l.normalizeStyle({left:e.thumbLeft+"px",top:e.thumbTop+"px"})},null,6)],2)}const a=t.default(s.default,[["render",u]]);exports.default=a;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const hueSlider_vue_vue_type_script_lang = require("./hue-slider.vue2.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.is("vertical", _ctx.vertical)])
+  }, [
+    vue.createElementVNode("div", {
+      ref: "bar",
+      class: vue.normalizeClass(_ctx.ns.e("bar")),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    }, null, 2),
+    vue.createElementVNode("div", {
+      ref: "thumb",
+      class: vue.normalizeClass(_ctx.ns.e("thumb")),
+      style: vue.normalizeStyle({
+        left: _ctx.thumbLeft + "px",
+        top: _ctx.thumbTop + "px"
+      })
+    }, null, 6)
+  ], 2);
+}
+const HueSlider = /* @__PURE__ */ _pluginVue_exportHelper.default(hueSlider_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
+exports.default = HueSlider;

package/lib/components/color-picker/components/hue-slider.vue2.cjs

@@ -1 +1,118 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const W=require("../../../utils/dom/position.cjs");require("@vft/utils");require("@vueuse/core");require("../../config-provider/hooks/use-global-config.cjs");const n=require("vue");require("lodash-es");const T=require("../../../hooks/use-namespace/index.cjs");require("../../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../../hooks/use-z-index/index.cjs");const v=require("../utils/draggable.cjs"),_=n.defineComponent({name:"VftColorHueSlider",props:{color:{type:Object,required:!0},vertical:Boolean},setup(o){const m=T.useNamespace("color-hue-slider"),a=n.getCurrentInstance(),e=n.ref(),l=n.ref(),s=n.ref(0),d=n.ref(0),g=n.computed(()=>o.color.get("hue"));n.watch(()=>g.value,()=>{c()});function b(t){t.target!==e.value&&f(t)}function f(t){if(!l.value||!e.value)return;const i=a.vnode.el.getBoundingClientRect(),{clientX:C,clientY:H}=W.getClientXY(t);let h;if(o.vertical){let u=H-i.top;u=Math.min(u,i.height-e.value.offsetHeight/2),u=Math.max(e.value.offsetHeight/2,u),h=Math.round((u-e.value.offsetHeight/2)/(i.height-e.value.offsetHeight)*360)}else{let u=C-i.left;u=Math.min(u,i.width-e.value.offsetWidth/2),u=Math.max(e.value.offsetWidth/2,u),h=Math.round((u-e.value.offsetWidth/2)/(i.width-e.value.offsetWidth)*360)}o.color.set("hue",h)}function q(){if(!e.value)return 0;const t=a.vnode.el;if(o.vertical)return 0;const r=o.color.get("hue");return t?Math.round(r*(t.offsetWidth-e.value.offsetWidth/2)/360):0}function M(){if(!e.value)return 0;const t=a.vnode.el;if(!o.vertical)return 0;const r=o.color.get("hue");return t?Math.round(r*(t.offsetHeight-e.value.offsetHeight/2)/360):0}function c(){s.value=q(),d.value=M()}return n.onMounted(()=>{if(!l.value||!e.value)return;const t={drag:r=>{f(r)},end:r=>{f(r)}};v.draggable(l.value,t),v.draggable(e.value,t),c()}),{bar:l,thumb:e,thumbLeft:s,thumbTop:d,hueValue:g,handleClick:b,update:c,ns:m}}});exports.default=_;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const position = require("../../../utils/dom/position.cjs");
+require("@vft/utils");
+require("@vueuse/core");
+require("../../config-provider/hooks/use-global-config.cjs");
+const vue = require("vue");
+require("lodash-es");
+const index = require("../../../hooks/use-namespace/index.cjs");
+require("../../../hooks/use-model-toggle/index.cjs");
+require("@popperjs/core");
+require("../../../hooks/use-z-index/index.cjs");
+const draggable = require("../utils/draggable.cjs");
+const _sfc_main = vue.defineComponent({
+  name: "VftColorHueSlider",
+  props: {
+    color: {
+      type: Object,
+      required: true
+    },
+    vertical: Boolean
+  },
+  setup(props) {
+    const ns = index.useNamespace("color-hue-slider");
+    const instance = vue.getCurrentInstance();
+    const thumb = vue.ref();
+    const bar = vue.ref();
+    const thumbLeft = vue.ref(0);
+    const thumbTop = vue.ref(0);
+    const hueValue = vue.computed(() => {
+      return props.color.get("hue");
+    });
+    vue.watch(
+      () => hueValue.value,
+      () => {
+        update();
+      }
+    );
+    function handleClick(event) {
+      const target = event.target;
+      if (target !== thumb.value) {
+        handleDrag(event);
+      }
+    }
+    function handleDrag(event) {
+      if (!bar.value || !thumb.value) return;
+      const el = instance.vnode.el;
+      const rect = el.getBoundingClientRect();
+      const { clientX, clientY } = position.getClientXY(event);
+      let hue;
+      if (!props.vertical) {
+        let left = clientX - rect.left;
+        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
+        left = Math.max(thumb.value.offsetWidth / 2, left);
+        hue = Math.round(
+          (left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360
+        );
+      } else {
+        let top = clientY - rect.top;
+        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
+        top = Math.max(thumb.value.offsetHeight / 2, top);
+        hue = Math.round(
+          (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360
+        );
+      }
+      props.color.set("hue", hue);
+    }
+    function getThumbLeft() {
+      if (!thumb.value) return 0;
+      const el = instance.vnode.el;
+      if (props.vertical) return 0;
+      const hue = props.color.get("hue");
+      if (!el) return 0;
+      return Math.round(
+        hue * (el.offsetWidth - thumb.value.offsetWidth / 2) / 360
+      );
+    }
+    function getThumbTop() {
+      if (!thumb.value) return 0;
+      const el = instance.vnode.el;
+      if (!props.vertical) return 0;
+      const hue = props.color.get("hue");
+      if (!el) return 0;
+      return Math.round(
+        hue * (el.offsetHeight - thumb.value.offsetHeight / 2) / 360
+      );
+    }
+    function update() {
+      thumbLeft.value = getThumbLeft();
+      thumbTop.value = getThumbTop();
+    }
+    vue.onMounted(() => {
+      if (!bar.value || !thumb.value) return;
+      const dragConfig = {
+        drag: (event) => {
+          handleDrag(event);
+        },
+        end: (event) => {
+          handleDrag(event);
+        }
+      };
+      draggable.draggable(bar.value, dragConfig);
+      draggable.draggable(thumb.value, dragConfig);
+      update();
+    });
+    return {
+      bar,
+      thumb,
+      thumbLeft,
+      thumbTop,
+      hueValue,
+      handleClick,
+      update,
+      ns
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/color-picker/components/predefine.vue.cjs

@@ -1 +1,33 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./predefine.vue2.cjs"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs"),t=["onClick"];function a(l,u,i,d,p,v){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(l.ns.b())},[e.createElementVNode("div",{class:e.normalizeClass(l.ns.e("colors"))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.rgbaColors,(r,o)=>(e.openBlock(),e.createElementBlock("div",{key:l.colors[o],class:e.normalizeClass([l.ns.e("color-selector"),l.ns.is("alpha",r._alpha<100),{selected:r.selected}]),onClick:k=>l.handleSelect(o)},[e.createElementVNode("div",{style:e.normalizeStyle({backgroundColor:r.value})},null,4)],10,t))),128))],2)],2)}const c=s.default(n.default,[["render",a]]);exports.default=c;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const predefine_vue_vue_type_script_lang = require("./predefine.vue2.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(_ctx.ns.b())
+  }, [
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass(_ctx.ns.e("colors"))
+    }, [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rgbaColors, (item, index) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          key: _ctx.colors[index],
+          class: vue.normalizeClass([
+            _ctx.ns.e("color-selector"),
+            _ctx.ns.is("alpha", item._alpha < 100),
+            { selected: item.selected }
+          ]),
+          onClick: ($event) => _ctx.handleSelect(index)
+        }, [
+          vue.createElementVNode("div", {
+            style: vue.normalizeStyle({ backgroundColor: item.value })
+          }, null, 4)
+        ], 10, _hoisted_1);
+      }), 128))
+    ], 2)
+  ], 2);
+}
+const Predefine = /* @__PURE__ */ _pluginVue_exportHelper.default(predefine_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
+exports.default = Predefine;