vft 0.0.375 → 0.0.376

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

@@ -1,353 +1 @@
-"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;
+"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;

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

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

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

@@ -1,62 +1 @@
-"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;
+"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;

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

@@ -1,26 +1 @@
-"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;
+"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;

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

@@ -1,118 +1 @@
-"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;
+"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=_;

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

@@ -1,33 +1 @@
-"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;
+"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;