vft 0.0.374 → 0.0.375

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

@@ -1 +1,62 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");require("@vft/utils");require("../../config-provider/hooks/use-global-config.cjs");const t=require("vue");require("lodash-es");const d=require("../../../hooks/use-namespace/index.cjs");require("../../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../../hooks/use-z-index/index.cjs");const q=require("../contants.cjs"),a=require("../utils/color.cjs"),m=t.defineComponent({props:{colors:{type:Array,required:!0},color:{type:Object,required:!0}},setup(e){const i=d.useNamespace("color-predefine"),{currentColor:s}=t.inject(q.colorPickerContextKey),n=t.ref(l(e.colors,e.color));t.watch(()=>s.value,o=>{const c=new a.default;c.fromString(o),n.value.forEach(u=>{u.selected=c.compare(u)})}),t.watchEffect(()=>{n.value=l(e.colors,e.color)});function f(o){e.color.fromString(e.colors[o])}function l(o,c){return o.map(u=>{const r=new a.default;return r.enableAlpha=!0,r.format="rgba",r.fromString(u),r.selected=r.value===c.value,r})}return{rgbaColors:n,handleSelect:f,ns:i}}});exports.default=m;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+require("@vft/utils");
+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 contants = require("../contants.cjs");
+const color = require("../utils/color.cjs");
+const _sfc_main = vue.defineComponent({
+  props: {
+    colors: {
+      type: Array,
+      required: true
+    },
+    color: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = index.useNamespace("color-predefine");
+    const { currentColor } = vue.inject(contants.colorPickerContextKey);
+    const rgbaColors = vue.ref(parseColors(props.colors, props.color));
+    vue.watch(
+      () => currentColor.value,
+      (val) => {
+        const color$1 = new color.default();
+        color$1.fromString(val);
+        rgbaColors.value.forEach((item) => {
+          item.selected = color$1.compare(item);
+        });
+      }
+    );
+    vue.watchEffect(() => {
+      rgbaColors.value = parseColors(props.colors, props.color);
+    });
+    function handleSelect(index2) {
+      props.color.fromString(props.colors[index2]);
+    }
+    function parseColors(colors, color$1) {
+      return colors.map((value) => {
+        const c = new color.default();
+        c.enableAlpha = true;
+        c.format = "rgba";
+        c.fromString(value);
+        c.selected = c.value === color$1.value;
+        return c;
+      });
+    }
+    return {
+      rgbaColors,
+      handleSelect,
+      ns
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/color-picker/components/sv-panel.vue.cjs

@@ -1 +1,31 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./sv-panel.vue2.cjs"),e=require("vue"),n=require("../../../_virtual/_plugin-vue_export-helper.cjs");function o(l,r,a,u,i,d){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(l.ns.b()),style:e.normalizeStyle({backgroundColor:l.background})},[e.createElementVNode("div",{class:e.normalizeClass(l.ns.e("white"))},null,2),e.createElementVNode("div",{class:e.normalizeClass(l.ns.e("black"))},null,2),e.createElementVNode("div",{class:e.normalizeClass(l.ns.e("cursor")),style:e.normalizeStyle({top:l.cursorTop+"px",left:l.cursorLeft+"px"})},r[0]||(r[0]=[e.createElementVNode("div",null,null,-1)]),6)],6)}const t=n.default(s.default,[["render",o]]);exports.default=t;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const svPanel_vue_vue_type_script_lang = require("./sv-panel.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()),
+    style: vue.normalizeStyle({
+      backgroundColor: _ctx.background
+    })
+  }, [
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass(_ctx.ns.e("white"))
+    }, null, 2),
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass(_ctx.ns.e("black"))
+    }, null, 2),
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass(_ctx.ns.e("cursor")),
+      style: vue.normalizeStyle({
+        top: _ctx.cursorTop + "px",
+        left: _ctx.cursorLeft + "px"
+      })
+    }, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("div", null, null, -1)
+    ]), 6)
+  ], 6);
+}
+const SvPanel = /* @__PURE__ */ _pluginVue_exportHelper.default(svPanel_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
+exports.default = SvPanel;

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

@@ -1 +1,87 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=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 M=require("../../../hooks/use-namespace/index.cjs");require("../../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../../hooks/use-z-index/index.cjs");const b=require("../utils/draggable.cjs"),p=n.defineComponent({name:"VftSlPanel",props:{color:{type:Object,required:!0}},setup(o){const q=M.useNamespace("color-svpanel"),c=n.getCurrentInstance(),a=n.ref(0),i=n.ref(0),v=n.ref("hsl(0, 100%, 50%)"),f=n.computed(()=>{const e=o.color.get("hue"),l=o.color.get("value");return{hue:e,value:l}});function s(){const e=o.color.get("saturation"),l=o.color.get("value"),t=c.vnode.el,{clientWidth:g,clientHeight:h}=t;i.value=e*g/100,a.value=(100-l)*h/100,v.value=`hsl(${o.color.get("hue")}, 100%, 50%)`}function d(e){const t=c.vnode.el.getBoundingClientRect(),{clientX:g,clientY:h}=m.getClientXY(e);let r=g-t.left,u=h-t.top;r=Math.max(0,r),r=Math.min(r,t.width),u=Math.max(0,u),u=Math.min(u,t.height),i.value=r,a.value=u,o.color.set({saturation:r/t.width*100,value:100-u/t.height*100})}return n.watch(()=>f.value,()=>{s()}),n.onMounted(()=>{b.draggable(c.vnode.el,{drag:e=>{d(e)},end:e=>{d(e)}}),s()}),{cursorTop:a,cursorLeft:i,background:v,colorValue:f,handleDrag:d,update:s,ns:q}}});exports.default=p;
+"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: "VftSlPanel",
+  props: {
+    color: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = index.useNamespace("color-svpanel");
+    const instance = vue.getCurrentInstance();
+    const cursorTop = vue.ref(0);
+    const cursorLeft = vue.ref(0);
+    const background = vue.ref("hsl(0, 100%, 50%)");
+    const colorValue = vue.computed(() => {
+      const hue = props.color.get("hue");
+      const value = props.color.get("value");
+      return { hue, value };
+    });
+    function update() {
+      const saturation = props.color.get("saturation");
+      const value = props.color.get("value");
+      const el = instance.vnode.el;
+      const { clientWidth: width, clientHeight: height } = el;
+      cursorLeft.value = saturation * width / 100;
+      cursorTop.value = (100 - value) * height / 100;
+      background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`;
+    }
+    function handleDrag(event) {
+      const el = instance.vnode.el;
+      const rect = el.getBoundingClientRect();
+      const { clientX, clientY } = position.getClientXY(event);
+      let left = clientX - rect.left;
+      let top = clientY - rect.top;
+      left = Math.max(0, left);
+      left = Math.min(left, rect.width);
+      top = Math.max(0, top);
+      top = Math.min(top, rect.height);
+      cursorLeft.value = left;
+      cursorTop.value = top;
+      props.color.set({
+        saturation: left / rect.width * 100,
+        value: 100 - top / rect.height * 100
+      });
+    }
+    vue.watch(
+      () => colorValue.value,
+      () => {
+        update();
+      }
+    );
+    vue.onMounted(() => {
+      draggable.draggable(instance.vnode.el, {
+        drag: (event) => {
+          handleDrag(event);
+        },
+        end: (event) => {
+          handleDrag(event);
+        }
+      });
+      update();
+    });
+    return {
+      cursorTop,
+      cursorLeft,
+      background,
+      colorValue,
+      handleDrag,
+      update,
+      ns
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/color-picker/composables/use-alpha-slider.cjs

@@ -1 +1,133 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("../../../utils/dom/position.cjs");require("@vft/utils");require("@vueuse/core");const m=require("../../../utils/helper.cjs"),t=require("vue");require("lodash-es");const $=require("../../../hooks/use-namespace/index.cjs");require("../../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../../hooks/use-z-index/index.cjs");const M=require("../utils/draggable.cjs"),p=a=>{const s=t.getCurrentInstance(),e=t.shallowRef(),c=t.shallowRef();function f(i){i.target!==e.value&&u(i)}function u(i){if(!c.value||!e.value)return;const o=s.vnode.el.getBoundingClientRect(),{clientX:g,clientY:v}=W.getClientXY(i);if(a.vertical){let n=v-o.top;n=Math.max(e.value.offsetHeight/2,n),n=Math.min(n,o.height-e.value.offsetHeight/2),a.color.set("alpha",Math.round((n-e.value.offsetHeight/2)/(o.height-e.value.offsetHeight)*100))}else{let n=g-o.left;n=Math.max(e.value.offsetWidth/2,n),n=Math.min(n,o.width-e.value.offsetWidth/2),a.color.set("alpha",Math.round((n-e.value.offsetWidth/2)/(o.width-e.value.offsetWidth)*100))}}return{thumb:e,bar:c,handleDrag:u,handleClick:f}},T=(a,{bar:s,thumb:e,handleDrag:c})=>{const f=t.getCurrentInstance(),u=$.useNamespace("color-alpha-slider"),i=t.ref(0),h=t.ref(0),o=t.ref();function g(){if(!e.value||a.vertical)return 0;const r=f.vnode.el,l=a.color.get("alpha");return r?Math.round(l*(r.offsetWidth-e.value.offsetWidth/2)/100):0}function v(){if(!e.value)return 0;const r=f.vnode.el;if(!a.vertical)return 0;const l=a.color.get("alpha");return r?Math.round(l*(r.offsetHeight-e.value.offsetHeight/2)/100):0}function n(){if(a.color&&a.color.value){const{r,g:l,b}=a.color.toRgb();return`linear-gradient(to right, rgba(${r}, ${l}, ${b}, 0) 0%, rgba(${r}, ${l}, ${b}, 1) 100%)`}return""}function d(){i.value=g(),h.value=v(),o.value=n()}t.onMounted(()=>{if(!s.value||!e.value)return;const r={drag:l=>{c(l)},end:l=>{c(l)}};M.draggable(s.value,r),M.draggable(e.value,r),d()}),t.watch(()=>a.color.get("alpha"),()=>d()),t.watch(()=>a.color.value,()=>d());const q=t.computed(()=>[u.b(),u.is("vertical",a.vertical)]),S=t.computed(()=>u.e("bar")),w=t.computed(()=>u.e("thumb")),C=t.computed(()=>({background:o.value})),H=t.computed(()=>({left:m.addUnit(i.value),top:m.addUnit(h.value)}));return{rootKls:q,barKls:S,barStyle:C,thumbKls:w,thumbStyle:H,update:d}};exports.useAlphaSlider=p;exports.useAlphaSliderDOM=T;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const position = require("../../../utils/dom/position.cjs");
+require("@vft/utils");
+require("@vueuse/core");
+const helper = require("../../../utils/helper.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 useAlphaSlider = (props) => {
+  const instance = vue.getCurrentInstance();
+  const thumb = vue.shallowRef();
+  const bar = vue.shallowRef();
+  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);
+    if (!props.vertical) {
+      let left = clientX - rect.left;
+      left = Math.max(thumb.value.offsetWidth / 2, left);
+      left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
+      props.color.set(
+        "alpha",
+        Math.round(
+          (left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100
+        )
+      );
+    } else {
+      let top = clientY - rect.top;
+      top = Math.max(thumb.value.offsetHeight / 2, top);
+      top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
+      props.color.set(
+        "alpha",
+        Math.round(
+          (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100
+        )
+      );
+    }
+  }
+  return {
+    thumb,
+    bar,
+    handleDrag,
+    handleClick
+  };
+};
+const useAlphaSliderDOM = (props, {
+  bar,
+  thumb,
+  handleDrag
+}) => {
+  const instance = vue.getCurrentInstance();
+  const ns = index.useNamespace("color-alpha-slider");
+  const thumbLeft = vue.ref(0);
+  const thumbTop = vue.ref(0);
+  const background = vue.ref();
+  function getThumbLeft() {
+    if (!thumb.value) return 0;
+    if (props.vertical) return 0;
+    const el = instance.vnode.el;
+    const alpha = props.color.get("alpha");
+    if (!el) return 0;
+    return Math.round(
+      alpha * (el.offsetWidth - thumb.value.offsetWidth / 2) / 100
+    );
+  }
+  function getThumbTop() {
+    if (!thumb.value) return 0;
+    const el = instance.vnode.el;
+    if (!props.vertical) return 0;
+    const alpha = props.color.get("alpha");
+    if (!el) return 0;
+    return Math.round(
+      alpha * (el.offsetHeight - thumb.value.offsetHeight / 2) / 100
+    );
+  }
+  function getBackground() {
+    if (props.color && props.color.value) {
+      const { r, g, b } = props.color.toRgb();
+      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
+    }
+    return "";
+  }
+  function update() {
+    thumbLeft.value = getThumbLeft();
+    thumbTop.value = getThumbTop();
+    background.value = getBackground();
+  }
+  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();
+  });
+  vue.watch(
+    () => props.color.get("alpha"),
+    () => update()
+  );
+  vue.watch(
+    () => props.color.value,
+    () => update()
+  );
+  const rootKls = vue.computed(() => [ns.b(), ns.is("vertical", props.vertical)]);
+  const barKls = vue.computed(() => ns.e("bar"));
+  const thumbKls = vue.computed(() => ns.e("thumb"));
+  const barStyle = vue.computed(() => ({ background: background.value }));
+  const thumbStyle = vue.computed(() => ({
+    left: helper.addUnit(thumbLeft.value),
+    top: helper.addUnit(thumbTop.value)
+  }));
+  return { rootKls, barKls, barStyle, thumbKls, thumbStyle, update };
+};
+exports.useAlphaSlider = useAlphaSlider;
+exports.useAlphaSliderDOM = useAlphaSliderDOM;

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

@@ -1 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Symbol("colorPickerContextKey");exports.colorPickerContextKey=e;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const colorPickerContextKey = Symbol(
+  "colorPickerContextKey"
+);
+exports.colorPickerContextKey = colorPickerContextKey;

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

@@ -1 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("vue");const r=require("../../utils/vue/install.cjs");require("lodash-es");const t=require("./color-picker.vue2.cjs"),e=r.withInstall(t.default);exports.VftColorPicker=e;exports.default=e;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+require("@vft/utils");
+require("../config-provider/hooks/use-global-config.cjs");
+require("vue");
+const install = require("../../utils/vue/install.cjs");
+require("lodash-es");
+const colorPicker_vue_vue_type_script_setup_true_lang = require("./color-picker.vue2.cjs");
+const VftColorPicker = install.withInstall(colorPicker_vue_vue_type_script_setup_true_lang.default);
+exports.VftColorPicker = VftColorPicker;
+exports.default = VftColorPicker;

package/lib/components/color-picker/style/css.cjs

@@ -1 +1,6 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-color-picker.css");require("vft/theme-style/vft-input.css");require("vft/theme-style/vft-icon.css");require("vft/theme-style/vft-button.css");
+"use strict";
+require("vft/theme-style/base.css");
+require("vft/theme-style/vft-color-picker.css");
+require("vft/theme-style/vft-input.css");
+require("vft/theme-style/vft-icon.css");
+require("vft/theme-style/vft-button.css");

package/lib/components/color-picker/style/index.cjs

@@ -1 +1,6 @@
-"use strict";require("vft/theme-style/src/base.scss");require("vft/theme-style/src/color-picker.scss");require("vft/theme-style/src/input.scss");require("vft/theme-style/src/icon.scss");require("vft/theme-style/src/button.scss");
+"use strict";
+require("vft/theme-style/src/base.scss");
+require("vft/theme-style/src/color-picker.scss");
+require("vft/theme-style/src/input.scss");
+require("vft/theme-style/src/icon.scss");
+require("vft/theme-style/src/button.scss");

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

@@ -1 +1,301 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("@vft/utils"),m=function(a,t,e){return[a,t*e/((a=(2-t)*e)<1?a:2-a)||0,a/2]},F=function(a){return typeof a=="string"&&a.includes(".")&&Number.parseFloat(a)===1},C=function(a){return typeof a=="string"&&a.includes("%")},c=function(a,t){F(a)&&(a="100%");const e=C(a);return a=Math.min(t,Math.max(0,Number.parseFloat(`${a}`))),e&&(a=Number.parseInt(`${a*t}`,10)/100),Math.abs(a-t)<1e-6?1:a%t/Number.parseFloat(t)},g={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},f=a=>{a=Math.min(Math.round(a),255);const t=Math.floor(a/16),e=a%16;return`${g[t]||t}${g[e]||e}`},d=function({r:a,g:t,b:e}){return Number.isNaN(+a)||Number.isNaN(+t)||Number.isNaN(+e)?"":`#${f(a)}${f(t)}${f(e)}`},b={A:10,B:11,C:12,D:13,E:14,F:15},l=function(a){return a.length===2?(b[a[0].toUpperCase()]||+a[0])*16+(b[a[1].toUpperCase()]||+a[1]):b[a[1].toUpperCase()]||+a[1]},O=function(a,t,e){t=t/100,e=e/100;let s=t;const n=Math.max(e,.01);e*=2,t*=e<=1?e:2-e,s*=n<=1?n:2-n;const h=(e+t)/2,r=e===0?2*s/(n+s):2*t/(e+t);return{h:a,s:r*100,v:h*100}},M=(a,t,e)=>{a=c(a,255),t=c(t,255),e=c(e,255);const s=Math.max(a,t,e),n=Math.min(a,t,e);let h;const r=s,i=s-n,o=s===0?0:i/s;if(s===n)h=0;else{switch(s){case a:{h=(t-e)/i+(t<e?6:0);break}case t:{h=(e-a)/i+2;break}case e:{h=(a-t)/i+4;break}}h/=6}return{h:h*360,s:o*100,v:r*100}},u=function(a,t,e){a=c(a,360)*6,t=c(t,100),e=c(e,100);const s=Math.floor(a),n=a-s,h=e*(1-t),r=e*(1-n*t),i=e*(1-(1-n)*t),o=s%6,p=[e,r,h,h,i,e][o],$=[i,e,e,r,h,h][o],N=[h,h,i,e,e,r][o];return{r:Math.round(p*255),g:Math.round($*255),b:Math.round(N*255)}};class k{_hue=0;_saturation=100;_value=100;_alpha=100;enableAlpha=!1;format="hex";value="";selected;constructor(t={}){for(const e in t)_.hasOwn(t,e)&&(this[e]=t[e]);t.value?this.fromString(t.value):this.doOnChange()}set(t,e){if(arguments.length===1&&typeof t=="object"){for(const s in t)_.hasOwn(t,s)&&this.set(s,t[s]);return}this[`_${t}`]=e,this.doOnChange()}get(t){return t==="alpha"?Math.floor(this[`_${t}`]):this[`_${t}`]}toRgb(){return u(this._hue,this._saturation,this._value)}fromString(t){if(!t){this._hue=0,this._saturation=100,this._value=100,this.doOnChange();return}const e=(s,n,h)=>{this._hue=Math.max(0,Math.min(360,s)),this._saturation=Math.max(0,Math.min(100,n)),this._value=Math.max(0,Math.min(100,h)),this.doOnChange()};if(t.includes("hsl")){const s=t.replace(/hsla|hsl|\(|\)/g,"").split(/\s|,/g).filter(n=>n!=="").map((n,h)=>h>2?Number.parseFloat(n):Number.parseInt(n,10));if(s.length===4?this._alpha=Number.parseFloat(s[3])*100:s.length===3&&(this._alpha=100),s.length>=3){const{h:n,s:h,v:r}=O(s[0],s[1],s[2]);e(n,h,r)}}else if(t.includes("hsv")){const s=t.replace(/hsva|hsv|\(|\)/g,"").split(/\s|,/g).filter(n=>n!=="").map((n,h)=>h>2?Number.parseFloat(n):Number.parseInt(n,10));s.length===4?this._alpha=Number.parseFloat(s[3])*100:s.length===3&&(this._alpha=100),s.length>=3&&e(s[0],s[1],s[2])}else if(t.includes("rgb")){const s=t.replace(/rgba|rgb|\(|\)/g,"").split(/\s|,/g).filter(n=>n!=="").map((n,h)=>h>2?Number.parseFloat(n):Number.parseInt(n,10));if(s.length===4?this._alpha=Number.parseFloat(s[3])*100:s.length===3&&(this._alpha=100),s.length>=3){const{h:n,s:h,v:r}=M(s[0],s[1],s[2]);e(n,h,r)}}else if(t.includes("#")){const s=t.replace("#","").trim();if(!/^[\da-fA-F]{3}$|^[\da-fA-F]{6}$|^[\da-fA-F]{8}$/.test(s))return;let n,h,r;s.length===3?(n=l(s[0]+s[0]),h=l(s[1]+s[1]),r=l(s[2]+s[2])):(s.length===6||s.length===8)&&(n=l(s.slice(0,2)),h=l(s.slice(2,4)),r=l(s.slice(4,6))),s.length===8?this._alpha=l(s.slice(6))/255*100:(s.length===3||s.length===6)&&(this._alpha=100);const{h:i,s:o,v:p}=M(n,h,r);e(i,o,p)}}compare(t){return Math.abs(t._hue-this._hue)<2&&Math.abs(t._saturation-this._saturation)<1&&Math.abs(t._value-this._value)<1&&Math.abs(t._alpha-this._alpha)<1}doOnChange(){const{_hue:t,_saturation:e,_value:s,_alpha:n,format:h}=this;if(this.enableAlpha)switch(h){case"hsl":{const r=m(t,e/100,s/100);this.value=`hsla(${t}, ${Math.round(r[1]*100)}%, ${Math.round(r[2]*100)}%, ${this.get("alpha")/100})`;break}case"hsv":{this.value=`hsva(${t}, ${Math.round(e)}%, ${Math.round(s)}%, ${this.get("alpha")/100})`;break}case"hex":{this.value=`${d(u(t,e,s))}${f(n*255/100)}`;break}default:{const{r,g:i,b:o}=u(t,e,s);this.value=`rgba(${r}, ${i}, ${o}, ${this.get("alpha")/100})`}}else switch(h){case"hsl":{const r=m(t,e/100,s/100);this.value=`hsl(${t}, ${Math.round(r[1]*100)}%, ${Math.round(r[2]*100)}%)`;break}case"hsv":{this.value=`hsv(${t}, ${Math.round(e)}%, ${Math.round(s)}%)`;break}case"rgb":{const{r,g:i,b:o}=u(t,e,s);this.value=`rgb(${r}, ${i}, ${o})`;break}default:this.value=d(u(t,e,s))}}}exports.default=k;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const utils = require("@vft/utils");
+const hsv2hsl = function(hue, sat, val) {
+  return [
+    hue,
+    sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue) || 0,
+    hue / 2
+  ];
+};
+const isOnePointZero = function(n) {
+  return typeof n === "string" && n.includes(".") && Number.parseFloat(n) === 1;
+};
+const isPercentage = function(n) {
+  return typeof n === "string" && n.includes("%");
+};
+const bound01 = function(value, max) {
+  if (isOnePointZero(value)) value = "100%";
+  const processPercent = isPercentage(value);
+  value = Math.min(max, Math.max(0, Number.parseFloat(`${value}`)));
+  if (processPercent) {
+    value = Number.parseInt(`${value * max}`, 10) / 100;
+  }
+  if (Math.abs(value - max) < 1e-6) {
+    return 1;
+  }
+  return value % max / Number.parseFloat(max);
+};
+const INT_HEX_MAP = {
+  10: "A",
+  11: "B",
+  12: "C",
+  13: "D",
+  14: "E",
+  15: "F"
+};
+const hexOne = (value) => {
+  value = Math.min(Math.round(value), 255);
+  const high = Math.floor(value / 16);
+  const low = value % 16;
+  return `${INT_HEX_MAP[high] || high}${INT_HEX_MAP[low] || low}`;
+};
+const toHex = function({ r, g, b }) {
+  if (Number.isNaN(+r) || Number.isNaN(+g) || Number.isNaN(+b)) return "";
+  return `#${hexOne(r)}${hexOne(g)}${hexOne(b)}`;
+};
+const HEX_INT_MAP = {
+  A: 10,
+  B: 11,
+  C: 12,
+  D: 13,
+  E: 14,
+  F: 15
+};
+const parseHexChannel = function(hex) {
+  if (hex.length === 2) {
+    return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
+  }
+  return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
+};
+const hsl2hsv = function(hue, sat, light) {
+  sat = sat / 100;
+  light = light / 100;
+  let smin = sat;
+  const lmin = Math.max(light, 0.01);
+  light *= 2;
+  sat *= light <= 1 ? light : 2 - light;
+  smin *= lmin <= 1 ? lmin : 2 - lmin;
+  const v = (light + sat) / 2;
+  const sv = light === 0 ? 2 * smin / (lmin + smin) : 2 * sat / (light + sat);
+  return {
+    h: hue,
+    s: sv * 100,
+    v: v * 100
+  };
+};
+const rgb2hsv = (r, g, b) => {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h;
+  const v = max;
+  const d = max - min;
+  const s = max === 0 ? 0 : d / max;
+  if (max === min) {
+    h = 0;
+  } else {
+    switch (max) {
+      case r: {
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      }
+      case g: {
+        h = (b - r) / d + 2;
+        break;
+      }
+      case b: {
+        h = (r - g) / d + 4;
+        break;
+      }
+    }
+    h /= 6;
+  }
+  return { h: h * 360, s: s * 100, v: v * 100 };
+};
+const hsv2rgb = function(h, s, v) {
+  h = bound01(h, 360) * 6;
+  s = bound01(s, 100);
+  v = bound01(v, 100);
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  const mod = i % 6;
+  const r = [v, q, p, p, t, v][mod];
+  const g = [t, v, v, q, p, p][mod];
+  const b = [p, p, t, v, v, q][mod];
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
+};
+class Color {
+  _hue = 0;
+  _saturation = 100;
+  _value = 100;
+  _alpha = 100;
+  enableAlpha = false;
+  format = "hex";
+  value = "";
+  selected;
+  constructor(options = {}) {
+    for (const option in options) {
+      if (utils.hasOwn(options, option)) {
+        this[option] = options[option];
+      }
+    }
+    if (options.value) {
+      this.fromString(options.value);
+    } else {
+      this.doOnChange();
+    }
+  }
+  set(prop, value) {
+    if (arguments.length === 1 && typeof prop === "object") {
+      for (const p in prop) {
+        if (utils.hasOwn(prop, p)) {
+          this.set(p, prop[p]);
+        }
+      }
+      return;
+    }
+    this[`_${prop}`] = value;
+    this.doOnChange();
+  }
+  get(prop) {
+    if (prop === "alpha") {
+      return Math.floor(this[`_${prop}`]);
+    }
+    return this[`_${prop}`];
+  }
+  toRgb() {
+    return hsv2rgb(this._hue, this._saturation, this._value);
+  }
+  fromString(value) {
+    if (!value) {
+      this._hue = 0;
+      this._saturation = 100;
+      this._value = 100;
+      this.doOnChange();
+      return;
+    }
+    const fromHSV = (h, s, v) => {
+      this._hue = Math.max(0, Math.min(360, h));
+      this._saturation = Math.max(0, Math.min(100, s));
+      this._value = Math.max(0, Math.min(100, v));
+      this.doOnChange();
+    };
+    if (value.includes("hsl")) {
+      const parts = value.replace(/hsla|hsl|\(|\)/g, "").split(/\s|,/g).filter((val) => val !== "").map(
+        (val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10)
+      );
+      if (parts.length === 4) {
+        this._alpha = Number.parseFloat(parts[3]) * 100;
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);
+        fromHSV(h, s, v);
+      }
+    } else if (value.includes("hsv")) {
+      const parts = value.replace(/hsva|hsv|\(|\)/g, "").split(/\s|,/g).filter((val) => val !== "").map(
+        (val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10)
+      );
+      if (parts.length === 4) {
+        this._alpha = Number.parseFloat(parts[3]) * 100;
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        fromHSV(parts[0], parts[1], parts[2]);
+      }
+    } else if (value.includes("rgb")) {
+      const parts = value.replace(/rgba|rgb|\(|\)/g, "").split(/\s|,/g).filter((val) => val !== "").map(
+        (val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10)
+      );
+      if (parts.length === 4) {
+        this._alpha = Number.parseFloat(parts[3]) * 100;
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);
+        fromHSV(h, s, v);
+      }
+    } else if (value.includes("#")) {
+      const hex = value.replace("#", "").trim();
+      if (!/^[\da-fA-F]{3}$|^[\da-fA-F]{6}$|^[\da-fA-F]{8}$/.test(hex)) return;
+      let r, g, b;
+      if (hex.length === 3) {
+        r = parseHexChannel(hex[0] + hex[0]);
+        g = parseHexChannel(hex[1] + hex[1]);
+        b = parseHexChannel(hex[2] + hex[2]);
+      } else if (hex.length === 6 || hex.length === 8) {
+        r = parseHexChannel(hex.slice(0, 2));
+        g = parseHexChannel(hex.slice(2, 4));
+        b = parseHexChannel(hex.slice(4, 6));
+      }
+      if (hex.length === 8) {
+        this._alpha = parseHexChannel(hex.slice(6)) / 255 * 100;
+      } else if (hex.length === 3 || hex.length === 6) {
+        this._alpha = 100;
+      }
+      const { h, s, v } = rgb2hsv(r, g, b);
+      fromHSV(h, s, v);
+    }
+  }
+  compare(color) {
+    return Math.abs(color._hue - this._hue) < 2 && Math.abs(color._saturation - this._saturation) < 1 && Math.abs(color._value - this._value) < 1 && Math.abs(color._alpha - this._alpha) < 1;
+  }
+  doOnChange() {
+    const { _hue, _saturation, _value, _alpha, format } = this;
+    if (this.enableAlpha) {
+      switch (format) {
+        case "hsl": {
+          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
+          this.value = `hsla(${_hue}, ${Math.round(
+            hsl[1] * 100
+          )}%, ${Math.round(hsl[2] * 100)}%, ${this.get("alpha") / 100})`;
+          break;
+        }
+        case "hsv": {
+          this.value = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(
+            _value
+          )}%, ${this.get("alpha") / 100})`;
+          break;
+        }
+        case "hex": {
+          this.value = `${toHex(hsv2rgb(_hue, _saturation, _value))}${hexOne(
+            _alpha * 255 / 100
+          )}`;
+          break;
+        }
+        default: {
+          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
+          this.value = `rgba(${r}, ${g}, ${b}, ${this.get("alpha") / 100})`;
+        }
+      }
+    } else {
+      switch (format) {
+        case "hsl": {
+          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
+          this.value = `hsl(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(
+            hsl[2] * 100
+          )}%)`;
+          break;
+        }
+        case "hsv": {
+          this.value = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(
+            _value
+          )}%)`;
+          break;
+        }
+        case "rgb": {
+          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
+          this.value = `rgb(${r}, ${g}, ${b})`;
+          break;
+        }
+        default: {
+          this.value = toHex(hsv2rgb(_hue, _saturation, _value));
+        }
+      }
+    }
+  }
+}
+exports.default = Color;