color-gradient-picker-vue3
Advanced tools
color-gradient-picker-vue3 - npm Package Compare versions
Comparing version 2.0.2 to 2.0.3
@@ -1,1 +0,1 @@ | ||
| var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,r)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,__spreadValues=(e,t)=>{for(var r in t||(t={}))__hasOwnProp.call(t,r)&&__defNormalProp(e,r,t[r]);if(__getOwnPropSymbols)for(var r of __getOwnPropSymbols(t))__propIsEnum.call(t,r)&&__defNormalProp(e,r,t[r]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t));!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["color-gradient-picker-vue3"]=t(e.Vue)}(this,(function(e){"use strict";function t(e){return"number"==typeof e&&!1===Number.isNaN(e)&&e>=0&&e<=255}function r(e,r,n,o){if(t(e)&&t(r)&&t(n)){const a={red:0|e,green:0|r,blue:0|n,alpha:0|o};return!0===t(o)&&(a.alpha=0|o),a}}function n(e,t,n,o){let a=t/100*(n/=100);const i=e/60;let l=a*(1-Math.abs(i%2-1)),c=n-a;return a=255*(a+c)|0,l=255*(l+c)|0,c=255*c|0,i>=1&&i<2?r(l,a,c,o):i>=2&&i<3?r(c,a,l,o):i>=3&&i<4?r(c,l,a,o):i>=4&&i<5?r(l,c,a,o):i>=5&&i<=6?r(a,c,l,o):r(a,l,c,o)}function o(e,t,r,o,a,i){e>o&&(e=o),t>r&&(t=r),e<0&&(e=0),t<0&&(t=0);const l=100-100*t/r|0,c=100*e/o|0;return __spreadProps(__spreadValues({},n(a,c,l,i)),{saturation:c,value:l})}function a(e,t,r,o,a){let i=360*e/t|0;return i=i<0?0:i>360?360:i,__spreadProps(__spreadValues({},n(i,r,o,a)),{saturation:r,hue:i})}function i(e,t){return(e=Number((e/t).toFixed(2)))>1?1:e<0?0:e}function l(e,t,r){let n=e.toString(16),o=t.toString(16),a=r.toString(16);return e<16&&(n=`0${n}`),t<16&&(o=`0${o}`),r<16&&(a=`0${a}`),n+o+a}const c=/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;function s(e){if(c.test(e)){if("#"===e[0]&&(e=e.slice(1,e.length)),e.length<6)return!1;const t=r(parseInt(e.substring(0,2),16)||0,parseInt(e.substring(2,4),16)||0,parseInt(e.substring(4,6),16)||0,parseInt(e.substring(6,8),16)/255||0),n=t&&function({red:e,green:t,blue:r}){let n,o,a,i,l=0;const c=e/255,s=t/255,u=r/255,p=Math.max(c,s,u),d=p-Math.min(c,s,u),f=e=>(p-e)/6/d+.5;return 0===d?(l=0,i=0):(i=d/p,n=f(c),o=f(s),a=f(u),c===p?l=a-o:s===p?l=1/3+n-a:u===p&&(l=2/3+o-n),l<0?l+=1:l>1&&(l-=1)),{hue:Math.round(360*l),saturation:Math.round(100*i),value:Math.round(100*p)}}(__spreadValues({},t));return __spreadValues(__spreadValues({},t),n)}return!1}function u(e,t){const r=100*e/t;return r<0?0:r>100?100:r}function p(e,t,r,n){return`rgba(${e}, ${t}, ${r}, ${n})`}function d(e,t,r){let n="";const o=e.slice();return o.sort(((e,t)=>e.left-t.left)),n="linear"===t?`linear-gradient(${r}deg,`:"radial-gradient(",o.forEach(((e,t)=>{n+=`rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha}) ${e.left}%`,t!==o.length-1&&(n+=",")})),n+=")",n}function f(e,t,r){return function(n){let o=e(n);function a(e){o=t(e,o)||o}window.addEventListener("mousemove",a),window.addEventListener("mouseup",(e=>{window.removeEventListener("mousemove",a),r&&r(e,o)}),{once:!0})}}const v={class:"picker-area-overlay1 wh-full"},b={class:"picker-area-overlay2 wh-full rounded-8px"},y=e.defineComponent({name:"AreaPicker"}),m=(e,t)=>{const r=e.__vccOpts||e;for(const[n,o]of t)r[n]=o;return r},h=m(e.defineComponent(__spreadProps(__spreadValues({},y),{setup(t){const r=e.ref(null),n=e.ref(null),a=e.inject("colorPickerState"),i=e.inject("updateColor"),l=e.computed((()=>{const{width:e=0,height:t=0}=n.value||{},r=((a.saturation||0)*e/100|0)-6,o=(t-(a.value||0)*t/100|0)-6;return{backgroundColor:`rgb(${a.red}, ${a.green}, ${a.blue})`,left:`${r}px`,top:`${o}px`}})),c=e.computed((()=>{const{red:e=255,green:t=0,blue:r=0}=function(e){let t=1;const r=e/60;let n=t*(1-Math.abs(r%2-1)),o=0,a=0,i=0;return t=255*(t+0)|0,n=255*(n+0)|0,r>=0&&r<1&&(o=0|t,a=0|n,i=0),r>=1&&r<2&&(o=0|n,a=0|t,i=0),r>=2&&r<3&&(o=0,a=0|t,i=0|n),r>=3&&r<4&&(o=0,a=0|n,i=0|t),r>=4&&r<5&&(o=0|n,a=0,i=0|t),r>=5&&r<=6&&(o=0|t,a=0,i=0|n),{red:o,green:a,blue:i}}(a.hue)||{};return{backgroundColor:`rgb(${e}, ${t}, ${r})`}})),s=(e,{startX:t,startY:r,positionX:i,positionY:l})=>{const c=e.pageX-t,s=e.pageY-r,{width:u=0,height:p=0}=n.value||{},d=o(i+=c,l+=s,p,u,a.hue,a.alpha);return{positions:{positionX:i,positionY:l,startX:e.pageX,startY:e.pageY},color:d}},u=f((e=>{if(!n.value)return;const{x:t,y:r}=n.value,{width:l=0,height:c=0}=n.value||{},s=e.pageX,u=e.pageY,p=s-t,d=u-r,f=o(p,d,c,l,a.hue,a.alpha);return i(f),{startX:s,startY:u,positionX:p,positionY:d}}),((e,{startX:t,startY:r,positionX:n,positionY:o})=>{const{positions:a,color:l}=s(e,{startX:t,startY:r,positionX:n,positionY:o});return i(l),a}),((e,{startX:t,startY:r,positionX:n,positionY:o})=>{const{positions:a,color:l}=s(e,{startX:t,startY:r,positionX:n,positionY:o});return i(l),a}));return e.watchEffect((()=>{var e;const t=r.value;t&&!(null==(e=n.value)?void 0:e.width)&&(n.value=t.getBoundingClientRect()||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"pickerAreaRef",ref:r,class:"picker-area w-full mb-16px relative rounded-8px",style:e.normalizeStyle(e.unref(c)),onMousedown:n[0]||(n[0]=(...t)=>e.unref(u)&&e.unref(u)(...t))},[e.createElementVNode("div",v,[e.createElementVNode("div",b,[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(l))},null,4)])])],36))}})),[["__scopeId","data-v-0eb61073"]]),g={class:"preview-area mr-8px"},_=e.defineComponent({name:"AreaPreview"}),j=e.defineComponent(__spreadProps(__spreadValues({},_),{setup(t){const r=e.inject("colorPickerState"),n=e.computed((()=>{let e="";return e=r.isGradient?d(r.points,r.type,r.degree):p(r.red,r.green,r.blue,r.alpha),{background:e}}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("div",{class:"border-box w-36px h-36px rounded-8px border-width-1px border-solid border-[#ebedf5]",style:e.normalizeStyle(e.unref(n))},null,4)]))}})),x=e.defineComponent({name:"AreaHue"}),w=m(e.defineComponent(__spreadProps(__spreadValues({},x),{setup(t){const r=e.ref(null),n=e.ref(null),o=e.inject("colorPickerState"),i=e.inject("updateColor"),l=e.computed((()=>{var e;const t=(null==(e=n.value)?void 0:e.width)||0;return(o.hue||0)*(t-14)/360|0})),c=e.computed((()=>({left:`${l.value}px`}))),s=(e,{startX:t,positionX:r})=>{var i;const l=e.pageX-t,c=(null==(i=n.value)?void 0:i.width)||0,s=a((r+=l)>c?c:r<=0?0:r,c,o.saturation,o.value,o.alpha);return{positions:{positionX:r,startX:e.pageX},color:s}},u=f((e=>{var t,r;const l=(null==(t=n.value)?void 0:t.x)||0,c=e.pageX,s=c-l,u=a(s,(null==(r=n.value)?void 0:r.width)||0,o.saturation,o.value,o.alpha);return i(u),{startX:c,positionX:s}}),((e,{startX:t,positionX:r})=>{const{positions:n,color:o}=s(e,{startX:t,positionX:r});return i(o),n}),((e,{startX:t,positionX:r})=>{const{positions:n,color:o}=s(e,{startX:t,positionX:r});return i(o),n}));return e.watchEffect((()=>{var e,t;r.value&&!(null==(e=n.value)?void 0:e.width)&&(n.value=(null==(t=r.value)?void 0:t.getBoundingClientRect())||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"relative w-full overflow-hidden rounded-10px mb-8px bg-[red] cursor-pointer",onMousedown:n[0]||(n[0]=(...t)=>e.unref(u)&&e.unref(u)(...t))},[e.createElementVNode("div",{ref_key:"hueRef",ref:r,class:"hue-area relative"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(c))},null,4)],512)],32))}})),[["__scopeId","data-v-61cbbc2c"]]),k={class:"alpha-area wh-full rounded-10px"},P=e.defineComponent({name:"AreaAlpha"}),C=m(e.defineComponent(__spreadProps(__spreadValues({},P),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.ref(null),a=e.ref(null),l=e.computed((()=>{var e;const t=(null==(e=a.value)?void 0:e.width)||0;return r.alpha*(t-14)|0})),c=e.computed((()=>({background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${r.red}, ${r.green}, ${r.blue}))`}))),s=e.computed((()=>({left:`${l.value}px`}))),u=(e,{startX:t,positionX:r})=>{var n;const o=i(r+=e.pageX-t,(null==(n=a.value)?void 0:n.width)||0);return{positions:{positionX:r,startX:e.pageX},alpha:o}},p=f((e=>{var t,r;const o=(null==(t=a.value)?void 0:t.x)||0,l=e.pageX,c=(null==(r=a.value)?void 0:r.width)||0;let s=l-o;return n({alpha:i(s,c)},"alpha"),{startX:l,positionX:s}}),((e,{startX:t,positionX:r})=>{const{positions:o,alpha:a}=u(e,{startX:t,positionX:r});return n({alpha:a},"alpha"),o}),((e,{startX:t,positionX:r})=>{const{positions:o,alpha:a}=u(e,{startX:t,positionX:r});return n({alpha:a},"alpha"),o}));return e.watchEffect((()=>{var e,t;o.value&&!(null==(e=a.value)?void 0:e.width)&&(a.value=(null==(t=o.value)?void 0:t.getBoundingClientRect())||null)})),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"relative w-full overflow-hidden rounded-10px h-14px cursor-pointer",onMousedown:r[0]||(r[0]=(...t)=>e.unref(p)&&e.unref(p)(...t))},[e.createElementVNode("div",{class:"absolute left-0 right-0 top-0 bottom-0",style:e.normalizeStyle(e.unref(c))},null,4),e.createElementVNode("div",k,[e.createElementVNode("div",{ref_key:"alphaMaskRef",ref:o,class:"wh-full relative"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(s))},null,4)],512)])],32))}})),[["__scopeId","data-v-60f3c3c1"]]);const V="object"==typeof global&&global&&global.Object===Object&&global;var O="object"==typeof self&&self&&self.Object===Object&&self;const X=V||O||Function("return this")();const B=X.Symbol;var E=Object.prototype,S=E.hasOwnProperty,A=E.toString,N=B?B.toStringTag:void 0;var I=Object.prototype.toString;var $="[object Null]",z="[object Undefined]",M=B?B.toStringTag:void 0;function U(e){return null==e?void 0===e?z:$:M&&M in Object(e)?function(e){var t=S.call(e,N),r=e[N];try{e[N]=void 0;var n=!0}catch(a){}var o=A.call(e);return n&&(t?e[N]=r:delete e[N]),o}(e):function(e){return I.call(e)}(e)}function D(e){return null!=e&&"object"==typeof e}const F=Array.isArray;function G(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R="[object AsyncFunction]",Y="[object Function]",T="[object GeneratorFunction]",L="[object Proxy]";function q(e){if(!G(e))return!1;var t=U(e);return t==Y||t==T||t==R||t==L}const W=X["__core-js_shared__"];var H,J=(H=/[^.]+$/.exec(W&&W.keys&&W.keys.IE_PROTO||""))?"Symbol(src)_1."+H:"";var K=Function.prototype.toString;function Q(e){if(null!=e){try{return K.call(e)}catch(t){}try{return e+""}catch(t){}}return""}var Z=/^\[object .+?Constructor\]$/,ee=Function.prototype,te=Object.prototype,re=ee.toString,ne=te.hasOwnProperty,oe=RegExp("^"+re.call(ne).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function ae(e){return!(!G(e)||(t=e,J&&J in t))&&(q(e)?oe:Z).test(Q(e));var t}function ie(e,t){var r=function(e,t){return null==e?void 0:e[t]}(e,t);return ae(r)?r:void 0}const le=ie(X,"WeakMap");var ce=Object.create;const se=function(){function e(){}return function(t){if(!G(t))return{};if(ce)return ce(t);e.prototype=t;var r=new e;return e.prototype=void 0,r}}();const ue=function(){try{var e=ie(Object,"defineProperty");return e({},"",{}),e}catch(t){}}();var pe=9007199254740991,de=/^(?:0|[1-9]\d*)$/;function fe(e,t){var r=typeof e;return!!(t=null==t?pe:t)&&("number"==r||"symbol"!=r&&de.test(e))&&e>-1&&e%1==0&&e<t}function ve(e,t,r){"__proto__"==t&&ue?ue(e,t,{configurable:!0,enumerable:!0,value:r,writable:!0}):e[t]=r}function be(e,t){return e===t||e!=e&&t!=t}var ye=Object.prototype.hasOwnProperty;function me(e,t,r){var n=e[t];ye.call(e,t)&&be(n,r)&&(void 0!==r||t in e)||ve(e,t,r)}function he(e,t,r,n){var o=!r;r||(r={});for(var a=-1,i=t.length;++a<i;){var l=t[a],c=n?n(r[l],e[l],l,r,e):void 0;void 0===c&&(c=e[l]),o?ve(r,l,c):me(r,l,c)}return r}var ge=9007199254740991;function _e(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=ge}function je(e){return null!=e&&_e(e.length)&&!q(e)}var xe=Object.prototype;function we(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||xe)}function ke(e){return D(e)&&"[object Arguments]"==U(e)}var Pe=Object.prototype,Ce=Pe.hasOwnProperty,Ve=Pe.propertyIsEnumerable,Oe=ke(function(){return arguments}())?ke:function(e){return D(e)&&Ce.call(e,"callee")&&!Ve.call(e,"callee")};const Xe=Oe;var Be="object"==typeof exports&&exports&&!exports.nodeType&&exports,Ee=Be&&"object"==typeof module&&module&&!module.nodeType&&module,Se=Ee&&Ee.exports===Be?X.Buffer:void 0;const Ae=(Se?Se.isBuffer:void 0)||function(){return!1};var Ne={};function Ie(e){return function(t){return e(t)}}Ne["[object Float32Array]"]=Ne["[object Float64Array]"]=Ne["[object Int8Array]"]=Ne["[object Int16Array]"]=Ne["[object Int32Array]"]=Ne["[object Uint8Array]"]=Ne["[object Uint8ClampedArray]"]=Ne["[object Uint16Array]"]=Ne["[object Uint32Array]"]=!0,Ne["[object Arguments]"]=Ne["[object Array]"]=Ne["[object ArrayBuffer]"]=Ne["[object Boolean]"]=Ne["[object DataView]"]=Ne["[object Date]"]=Ne["[object Error]"]=Ne["[object Function]"]=Ne["[object Map]"]=Ne["[object Number]"]=Ne["[object Object]"]=Ne["[object RegExp]"]=Ne["[object Set]"]=Ne["[object String]"]=Ne["[object WeakMap]"]=!1;var $e="object"==typeof exports&&exports&&!exports.nodeType&&exports,ze=$e&&"object"==typeof module&&module&&!module.nodeType&&module,Me=ze&&ze.exports===$e&&V.process;const Ue=function(){try{var e=ze&&ze.require&&ze.require("util").types;return e||Me&&Me.binding&&Me.binding("util")}catch(t){}}();var De=Ue&&Ue.isTypedArray;const Fe=De?Ie(De):function(e){return D(e)&&_e(e.length)&&!!Ne[U(e)]};var Ge=Object.prototype.hasOwnProperty;function Re(e,t){var r=F(e),n=!r&&Xe(e),o=!r&&!n&&Ae(e),a=!r&&!n&&!o&&Fe(e),i=r||n||o||a,l=i?function(e,t){for(var r=-1,n=Array(e);++r<e;)n[r]=t(r);return n}(e.length,String):[],c=l.length;for(var s in e)!t&&!Ge.call(e,s)||i&&("length"==s||o&&("offset"==s||"parent"==s)||a&&("buffer"==s||"byteLength"==s||"byteOffset"==s)||fe(s,c))||l.push(s);return l}function Ye(e,t){return function(r){return e(t(r))}}const Te=Ye(Object.keys,Object);var Le=Object.prototype.hasOwnProperty;function qe(e){return je(e)?Re(e):function(e){if(!we(e))return Te(e);var t=[];for(var r in Object(e))Le.call(e,r)&&"constructor"!=r&&t.push(r);return t}(e)}var We=Object.prototype.hasOwnProperty;function He(e){if(!G(e))return function(e){var t=[];if(null!=e)for(var r in Object(e))t.push(r);return t}(e);var t=we(e),r=[];for(var n in e)("constructor"!=n||!t&&We.call(e,n))&&r.push(n);return r}function Je(e){return je(e)?Re(e,!0):He(e)}const Ke=ie(Object,"create");var Qe=Object.prototype.hasOwnProperty;var Ze=Object.prototype.hasOwnProperty;function et(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function tt(e,t){for(var r=e.length;r--;)if(be(e[r][0],t))return r;return-1}et.prototype.clear=function(){this.__data__=Ke?Ke(null):{},this.size=0},et.prototype.delete=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},et.prototype.get=function(e){var t=this.__data__;if(Ke){var r=t[e];return"__lodash_hash_undefined__"===r?void 0:r}return Qe.call(t,e)?t[e]:void 0},et.prototype.has=function(e){var t=this.__data__;return Ke?void 0!==t[e]:Ze.call(t,e)},et.prototype.set=function(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=Ke&&void 0===t?"__lodash_hash_undefined__":t,this};var rt=Array.prototype.splice;function nt(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}nt.prototype.clear=function(){this.__data__=[],this.size=0},nt.prototype.delete=function(e){var t=this.__data__,r=tt(t,e);return!(r<0)&&(r==t.length-1?t.pop():rt.call(t,r,1),--this.size,!0)},nt.prototype.get=function(e){var t=this.__data__,r=tt(t,e);return r<0?void 0:t[r][1]},nt.prototype.has=function(e){return tt(this.__data__,e)>-1},nt.prototype.set=function(e,t){var r=this.__data__,n=tt(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this};const ot=ie(X,"Map");function at(e,t){var r,n,o=e.__data__;return("string"==(n=typeof(r=t))||"number"==n||"symbol"==n||"boolean"==n?"__proto__"!==r:null===r)?o["string"==typeof t?"string":"hash"]:o.map}function it(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function lt(e,t){for(var r=-1,n=t.length,o=e.length;++r<n;)e[o+r]=t[r];return e}it.prototype.clear=function(){this.size=0,this.__data__={hash:new et,map:new(ot||nt),string:new et}},it.prototype.delete=function(e){var t=at(this,e).delete(e);return this.size-=t?1:0,t},it.prototype.get=function(e){return at(this,e).get(e)},it.prototype.has=function(e){return at(this,e).has(e)},it.prototype.set=function(e,t){var r=at(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this};const ct=Ye(Object.getPrototypeOf,Object);function st(e){var t=this.__data__=new nt(e);this.size=t.size}st.prototype.clear=function(){this.__data__=new nt,this.size=0},st.prototype.delete=function(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r},st.prototype.get=function(e){return this.__data__.get(e)},st.prototype.has=function(e){return this.__data__.has(e)},st.prototype.set=function(e,t){var r=this.__data__;if(r instanceof nt){var n=r.__data__;if(!ot||n.length<199)return n.push([e,t]),this.size=++r.size,this;r=this.__data__=new it(n)}return r.set(e,t),this.size=r.size,this};var ut="object"==typeof exports&&exports&&!exports.nodeType&&exports,pt=ut&&"object"==typeof module&&module&&!module.nodeType&&module,dt=pt&&pt.exports===ut?X.Buffer:void 0,ft=dt?dt.allocUnsafe:void 0;function vt(){return[]}var bt=Object.prototype.propertyIsEnumerable,yt=Object.getOwnPropertySymbols;const mt=yt?function(e){return null==e?[]:(e=Object(e),function(e,t){for(var r=-1,n=null==e?0:e.length,o=0,a=[];++r<n;){var i=e[r];t(i,r,e)&&(a[o++]=i)}return a}(yt(e),(function(t){return bt.call(e,t)})))}:vt;const ht=Object.getOwnPropertySymbols?function(e){for(var t=[];e;)lt(t,mt(e)),e=ct(e);return t}:vt;function gt(e,t,r){var n=t(e);return F(e)?n:lt(n,r(e))}function _t(e){return gt(e,qe,mt)}function jt(e){return gt(e,Je,ht)}const xt=ie(X,"DataView");const wt=ie(X,"Promise");const kt=ie(X,"Set");var Pt="[object Map]",Ct="[object Promise]",Vt="[object Set]",Ot="[object WeakMap]",Xt="[object DataView]",Bt=Q(xt),Et=Q(ot),St=Q(wt),At=Q(kt),Nt=Q(le),It=U;(xt&&It(new xt(new ArrayBuffer(1)))!=Xt||ot&&It(new ot)!=Pt||wt&&It(wt.resolve())!=Ct||kt&&It(new kt)!=Vt||le&&It(new le)!=Ot)&&(It=function(e){var t=U(e),r="[object Object]"==t?e.constructor:void 0,n=r?Q(r):"";if(n)switch(n){case Bt:return Xt;case Et:return Pt;case St:return Ct;case At:return Vt;case Nt:return Ot}return t});const $t=It;var zt=Object.prototype.hasOwnProperty;const Mt=X.Uint8Array;function Ut(e){var t=new e.constructor(e.byteLength);return new Mt(t).set(new Mt(e)),t}var Dt=/\w*$/;var Ft=B?B.prototype:void 0,Gt=Ft?Ft.valueOf:void 0;var Rt="[object Boolean]",Yt="[object Date]",Tt="[object Map]",Lt="[object Number]",qt="[object RegExp]",Wt="[object Set]",Ht="[object String]",Jt="[object Symbol]",Kt="[object ArrayBuffer]",Qt="[object DataView]",Zt="[object Float32Array]",er="[object Float64Array]",tr="[object Int8Array]",rr="[object Int16Array]",nr="[object Int32Array]",or="[object Uint8Array]",ar="[object Uint8ClampedArray]",ir="[object Uint16Array]",lr="[object Uint32Array]";function cr(e,t,r){var n,o,a,i=e.constructor;switch(t){case Kt:return Ut(e);case Rt:case Yt:return new i(+e);case Qt:return function(e,t){var r=t?Ut(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.byteLength)}(e,r);case Zt:case er:case tr:case rr:case nr:case or:case ar:case ir:case lr:return function(e,t){var r=t?Ut(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.length)}(e,r);case Tt:return new i;case Lt:case Ht:return new i(e);case qt:return(a=new(o=e).constructor(o.source,Dt.exec(o))).lastIndex=o.lastIndex,a;case Wt:return new i;case Jt:return n=e,Gt?Object(Gt.call(n)):{}}}var sr=Ue&&Ue.isMap;const ur=sr?Ie(sr):function(e){return D(e)&&"[object Map]"==$t(e)};var pr=Ue&&Ue.isSet;const dr=pr?Ie(pr):function(e){return D(e)&&"[object Set]"==$t(e)};var fr=1,vr=2,br=4,yr="[object Arguments]",mr="[object Function]",hr="[object GeneratorFunction]",gr="[object Object]",_r={};function jr(e,t,r,n,o,a){var i,l=t&fr,c=t&vr,s=t&br;if(r&&(i=o?r(e,n,o,a):r(e)),void 0!==i)return i;if(!G(e))return e;var u=F(e);if(u){if(i=function(e){var t=e.length,r=new e.constructor(t);return t&&"string"==typeof e[0]&&zt.call(e,"index")&&(r.index=e.index,r.input=e.input),r}(e),!l)return function(e,t){var r=-1,n=e.length;for(t||(t=Array(n));++r<n;)t[r]=e[r];return t}(e,i)}else{var p=$t(e),d=p==mr||p==hr;if(Ae(e))return function(e,t){if(t)return e.slice();var r=e.length,n=ft?ft(r):new e.constructor(r);return e.copy(n),n}(e,l);if(p==gr||p==yr||d&&!o){if(i=c||d?{}:function(e){return"function"!=typeof e.constructor||we(e)?{}:se(ct(e))}(e),!l)return c?function(e,t){return he(e,ht(e),t)}(e,function(e,t){return e&&he(t,Je(t),e)}(i,e)):function(e,t){return he(e,mt(e),t)}(e,function(e,t){return e&&he(t,qe(t),e)}(i,e))}else{if(!_r[p])return o?e:{};i=cr(e,p,l)}}a||(a=new st);var f=a.get(e);if(f)return f;a.set(e,i),dr(e)?e.forEach((function(n){i.add(jr(n,t,r,n,e,a))})):ur(e)&&e.forEach((function(n,o){i.set(o,jr(n,t,r,o,e,a))}));var v=u?void 0:(s?c?jt:_t:c?Je:qe)(e);return function(e,t){for(var r=-1,n=null==e?0:e.length;++r<n&&!1!==t(e[r],r,e););}(v||e,(function(n,o){v&&(n=e[o=n]),me(i,o,jr(n,t,r,o,e,a))})),i}_r[yr]=_r["[object Array]"]=_r["[object ArrayBuffer]"]=_r["[object DataView]"]=_r["[object Boolean]"]=_r["[object Date]"]=_r["[object Float32Array]"]=_r["[object Float64Array]"]=_r["[object Int8Array]"]=_r["[object Int16Array]"]=_r["[object Int32Array]"]=_r["[object Map]"]=_r["[object Number]"]=_r[gr]=_r["[object RegExp]"]=_r["[object Set]"]=_r["[object String]"]=_r["[object Symbol]"]=_r["[object Uint8Array]"]=_r["[object Uint8ClampedArray]"]=_r["[object Uint16Array]"]=_r["[object Uint32Array]"]=!0,_r["[object Error]"]=_r[mr]=_r["[object WeakMap]"]=!1;function xr(e){return jr(e,5)}const wr=["onDblclick"],kr=e.defineComponent({name:"AreaGradientPoint"}),Pr=e.defineComponent(__spreadProps(__spreadValues({},kr),{props:{index:{type:Number,required:!0},point:{type:Object,required:!0},width:{type:Number,default:0},positions:{type:Object}},setup(t){const r=t,n=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.computed((()=>n.activePointIndex===r.index?" active":"")),i=e.computed((()=>({left:r.point.left*((r.width-14)/100)+"px"}))),l=e=>{n.points[r.index].left=e,o({type:n.type},"type")},c=(e,{startX:t,offsetX:n})=>{const o=u(n+=e.pageX-t,r.width);return{positions:{offsetX:n,startX:e.pageX},left:o}},s=f((e=>{const t=e.pageX,o=e.pageY,a=t-(r.positions.x||0);return n.activePointIndex=r.index,{startX:t,startY:o,offsetX:a}}),((e,{startX:t,offsetX:r})=>{const{positions:n,left:o}=c(e,{startX:t,offsetX:r});return l(o),n}),((e,{startX:t,offsetX:r})=>{const{positions:n,left:o}=c(e,{startX:t,offsetX:r});return l(o),n})),p=()=>{let e=xr(n.points);if(e.length<=2)return;const t=r.index;e=null==e?void 0:e.filter((e=>e.id!==r.point.id)),n.activePointIndex=0===t?1:t-1,o({points:e},"points")};return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`picker-pointer${e.unref(a)}`),style:e.normalizeStyle(e.unref(i)),onMousedown:o[0]||(o[0]=e.withModifiers(((...t)=>e.unref(s)&&e.unref(s)(...t)),["stop"])),onDblclick:e.withModifiers(p,["stop"]),onClick:o[1]||(o[1]=e.withModifiers((()=>e.unref(n).activePointIndex=r.index),["stop"]))},[e.createElementVNode("span",{class:e.normalizeClass(`child-point${e.unref(a)}`)},null,2)],46,wr))}}));let Cr;const Vr=new Uint8Array(16);function Or(){if(!Cr&&(Cr="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!Cr))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return Cr(Vr)}const Xr=[];for(let bn=0;bn<256;++bn)Xr.push((bn+256).toString(16).slice(1));const Br={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function Er(e,t,r){if(Br.randomUUID&&!t&&!e)return Br.randomUUID();const n=(e=e||{}).random||(e.rng||Or)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){r=r||0;for(let e=0;e<16;++e)t[r+e]=n[e];return t}return function(e,t=0){return Xr[e[t+0]]+Xr[e[t+1]]+Xr[e[t+2]]+Xr[e[t+3]]+"-"+Xr[e[t+4]]+Xr[e[t+5]]+"-"+Xr[e[t+6]]+Xr[e[t+7]]+"-"+Xr[e[t+8]]+Xr[e[t+9]]+"-"+Xr[e[t+10]]+Xr[e[t+11]]+Xr[e[t+12]]+Xr[e[t+13]]+Xr[e[t+14]]+Xr[e[t+15]]}(n)}const Sr=e.defineComponent({name:"AreaGradientPoints"}),Ar=e.defineComponent(__spreadProps(__spreadValues({},Sr),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.ref(null),a=e.ref(null),i=e.computed((()=>({background:d(r.points,"linear",90)}))),l=e=>{const{x:t=0,width:o=0}=a.value||{},i=u(e.pageX-t,o),{red:l,green:c,blue:s,alpha:p}=r,d=xr(r.points),f={id:Er(),red:l,green:c,blue:s,alpha:p,left:i};null==d||d.push(f),r.activePointIndex=d.findIndex((e=>e.id===f.id)),n({points:d},"points")};return e.watchEffect((()=>{var e,t;o.value&&!(null==(e=a.value)?void 0:e.width)&&(a.value=(null==(t=o.value)?void 0:t.getBoundingClientRect())||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"gradient border-box w-full h-14px relative cursor-pointer rounded-10px mb-8px",style:e.normalizeStyle(e.unref(i)),onClick:l},[e.createElementVNode("div",{ref_key:"pointsContainerRef",ref:o,class:"wh-full relative"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r).points,((t,r)=>{var n;return e.openBlock(),e.createBlock(Pr,{key:t.id,index:r,point:t,positions:e.unref(a),width:null==(n=e.unref(a))?void 0:n.width},null,8,["index","point","positions","width"])})),128))],512)],4))}})),Nr={class:"flex flex-col px-16px"},Ir={class:"flex pb-16px"},$r={class:"flex flex-col flex-1"},zr=e.defineComponent({name:"Area"}),Mr=e.defineComponent(__spreadProps(__spreadValues({},zr),{setup(t){const r=e.inject("colorPickerState");return(t,n)=>(e.openBlock(),e.createElementBlock("div",Nr,[e.createVNode(h),e.unref(r).isGradient?(e.openBlock(),e.createBlock(Ar,{key:0})):e.createCommentVNode("",!0),e.createElementVNode("div",Ir,[e.createVNode(j),e.createElementVNode("div",$r,[e.createVNode(w),e.createVNode(C)])])]))}})),Ur={class:"flex items-center relative w-full rounded-6px text-[#28314d]"},Dr=["maxlength","type"],Fr={class:"text-12px lining-15px font-bold mt-6px mb-0 text-[#1f2667]"},Gr=e.defineComponent({name:"Input"}),Rr=m(e.defineComponent(__spreadProps(__spreadValues({},Gr),{props:{value:{default:""},label:{default:""},classes:{default:""},maxLen:{default:"3"},type:{default:"text"}},emits:["input","blur","focus","update:value"],setup(t,{emit:r}){const n=t,o=e.computed({get:()=>n.value,set:e=>{r("update:value",e)}}),a=e=>{r("input",e)},i=()=>{r("blur")},l=()=>{r("focus")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-shrink-0 items-center flex-col",n.classes])},[e.createElementVNode("div",Ur,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=t=>e.isRef(o)?o.value=t:null),class:"w-full outline-0 text-[#1f2667] text-center font-bold text-12px",maxlength:t.maxLen,type:n.type,onFocus:l,onBlur:i,onInput:a},null,40,Dr),[[e.vModelDynamic,e.unref(o),void 0,{trim:!0}]])]),e.createElementVNode("div",Fr,e.toDisplayString(t.label),1)],2))}})),[["__scopeId","data-v-6124313e"]]),Yr=e.defineComponent({name:"PreviewHex"}),Tr=e.defineComponent(__spreadProps(__spreadValues({},Yr),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.computed((()=>l(r.red,r.green,r.blue))),a=e=>{let t=e.target.value;if(!t&&0!==t)return;const r=s(t);r&&n(r)};return(t,r)=>(e.openBlock(),e.createBlock(Rr,{value:e.unref(o),label:"Hex","max-len":"7",classes:"hex mr-8px",onInput:a},null,8,["value"]))}})),Lr=e.defineComponent({name:"PreviewRGBItem"}),qr=e.defineComponent(__spreadProps(__spreadValues({},Lr),{props:{type:{default:"text"},label:{default:""}},setup(t){const r=t,n=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.computed((()=>{let e=0;switch(r.label){case"R":e=n.red;break;case"G":e=n.green;break;case"B":e=n.blue;break;case"A":e=~~(100*n.alpha)}return e})),i=t=>{let a=+t.target.value;switch(a<=0?a=0:a>255?a=255:"A"===r.label&&a>100&&(a=100),r.label){case"R":n.red=a;break;case"G":n.green=a;break;case"B":n.blue=a;case"A":n.alpha=a/100}e.nextTick((()=>{const e=s(l(n.red,n.green,n.blue));"A"===r.label?e.alpha=o(e):o(e)}))};return(t,n)=>(e.openBlock(),e.createElementBlock("div",null,[e.createVNode(Rr,{value:e.unref(a),label:r.label,type:r.type,classes:"A"!==r.label?"mr-8px":"",onInput:i},null,8,["value","label","type","classes"])]))}})),Wr=e.defineComponent({name:"PreviewRGB"}),Hr=e.defineComponent(__spreadProps(__spreadValues({},Wr),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(qr,{type:"number",label:"R"}),e.createVNode(qr,{type:"number",label:"G"}),e.createVNode(qr,{type:"number",label:"B"}),e.createVNode(qr,{type:"number",label:"A"})],64))})),Jr={class:"color-preview-area mb-8px px-16px"},Kr={class:"w-full flex justify-between"},Qr=e.defineComponent({name:"Preview"}),Zr=e.defineComponent(__spreadProps(__spreadValues({},Qr),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock("div",Jr,[e.createElementVNode("div",Kr,[e.createVNode(Tr),e.createVNode(Hr)])]))})),en=e.defineComponent({name:"Solid"}),tn=e.defineComponent(__spreadProps(__spreadValues({},en),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(Mr),e.createVNode(Zr)],64))})),rn={class:"gradient-controls border-box flex justify-between items-center w-full mb-8px px-16px"},nn={class:"flex flex-1"},on={key:0,class:"relative mr-24px"},an=[(t=>(e.pushScopeId("data-v-14668158"),t=t(),e.popScopeId(),t))((()=>e.createElementVNode("div",{class:"gradient-degree-pointer"},null,-1)))],ln={class:"gradient-degree-value flex justify-center items-center"},cn=e.defineComponent({name:"GradientControls"}),sn=m(e.defineComponent(__spreadProps(__spreadValues({},cn),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.computed((()=>r.type)),a=e.computed((()=>r.degree)),i=e=>{n({type:e},"type")},l=e.ref(!0),c=()=>{if(l.value)return void(l.value=!1);let e=(r.degree||0)+45;e>=360&&(e=0),n({degree:~~e},"degree")},s=e.computed((()=>({transform:`rotate(${r.degree}deg)`}))),u=f((e=>{const t=e.target.getBoundingClientRect();return{centerY:~~(8-window.pageYOffset)+t.top,centerX:~~(8-window.pageXOffset)+t.left}}),((e,{centerX:t,centerY:r})=>{l.value=!0;const o=function(e,t,r,n){return Math.atan2(e-r,t-n)*(180/Math.PI)*-1+180}(e.clientX,e.clientY,t,r);n({degree:~~o},"degree")}),(e=>{const t=e.target.classList;l.value=!1,!t.contains("gradient-degrees")&&t.contains("icon-rotate")}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",rn,[e.createElementVNode("div",nn,[e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item liner-gradient "+("linear"===e.unref(o)?"active":"")),onClick:r[0]||(r[0]=e=>i("linear"))},null,2),e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item radial-gradient "+("radial"===e.unref(o)?"active":"")),onClick:r[1]||(r[1]=e=>i("radial"))},null,2)]),"linear"===e.unref(o)?(e.openBlock(),e.createElementBlock("div",on,[e.createElementVNode("div",{class:"gradient-degrees cursor-pointer flex justify-center items-center",onMousedown:r[2]||(r[2]=(...t)=>e.unref(u)&&e.unref(u)(...t)),onClick:c},[e.createElementVNode("div",{class:"gradient-degree-center",style:e.normalizeStyle(e.unref(s))},an,4)],32),e.createElementVNode("div",ln,[e.createElementVNode("p",null,e.toDisplayString(e.unref(a))+"°",1)])])):e.createCommentVNode("",!0)]))}})),[["__scopeId","data-v-14668158"]]),un=e.defineComponent({name:"Gradient"}),pn=e.defineComponent(__spreadProps(__spreadValues({},un),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(sn),e.createVNode(Mr),e.createVNode(Zr)],64))})),dn={class:"picker-color-ui border-box m-8px bg-[#fff] flex flex-col slelect-none"},fn={class:"btns flex justify-end items-center select-none"},vn=e.defineComponent({name:"ColorPicker"});return e.defineComponent(__spreadProps(__spreadValues({},vn),{props:{isGradient:{type:Boolean,default:!1},color:{type:Object,default:()=>({red:255,green:0,blue:0,alpha:1})},gradient:{type:Object,default:()=>({type:"linear",degree:0,points:[{id:Er(),left:0,red:0,green:0,blue:0,alpha:1},{id:Er(),left:100,red:255,green:0,blue:0,alpha:1}]})},cancelText:{type:String,default:"Cancel"},cancelColor:{type:String,default:"#333"},cancelBg:{type:String,default:"#fff"},confirmText:{type:String,default:"Confirm"},confirmColor:{type:String,defualt:"#333"},confirmBg:{type:String,defualt:"#fff"}},emits:["change"],setup(t,{expose:r,emit:n}){var o,a,i,l,c,s,u,f,v,b;const y=t,m=e.reactive({isGradient:y.isGradient,red:y.isGradient?null==(o=y.gradient)?void 0:o.points[1].red:null==(a=y.color)?void 0:a.red,green:y.isGradient?null==(i=y.gradient)?void 0:i.points[1].green:null==(l=y.color)?void 0:l.green,blue:y.isGradient?null==(c=y.gradient)?void 0:c.points[1].blue:null==(s=y.color)?void 0:s.blue,alpha:y.isGradient?null==(u=y.gradient)?void 0:u.points[0].alpha:null==(f=y.color)?void 0:f.alpha,hue:0,saturation:100,value:100,style:"",type:"linear",degree:0,activePointIndex:1,activePoint:xr(null==(v=y.gradient)?void 0:v.points[0]),points:xr(null==(b=y.gradient)?void 0:b.points)});const h=e=>{e&&"function"==typeof e&&e()},g=e=>{const{isGradient:t,style:r,type:o,degree:a,points:i,red:l,green:c,blue:s,alpha:u,hue:p}=m;n("change",t?{style:r,gradient:{type:o,degree:a,points:i}}:{style:r,color:{red:l,green:c,blue:s,hue:p,alpha:u}}),e&&"function"==typeof e&&e()};return e.provide("colorPickerState",m),e.provide("updateColor",(({red:e,green:t,blue:r,alpha:n,hue:o,saturation:a,value:i,points:l,type:c,degree:s},u)=>{const f={red:e,green:t,blue:r,alpha:n,hue:o,saturation:a,value:i,points:l,type:c,degree:s};y.isGradient?function(e,t){const{red:r=0,green:n=0,blue:o=0,alpha:a,hue:i,saturation:l,value:c,points:s,type:u,degree:p}=e;t?m[t]=e[t]:(m.red=r,m.green=n,m.blue=o,s&&(m.points=s),u&&(m.type=u),p&&(m.degree=p),a&&(m.alpha=a),l&&(m.saturation=l),c&&(m.value=c),i&&(m.hue=i));m.style=d(m.points,m.type,m.degree)}(f,u):function(e,t){const{red:r=0,green:n=0,blue:o=0,alpha:a,hue:i,saturation:l,value:c}=e;t?m[t]=e[t]:(m.red=r,m.green=n,m.blue=o,a&&(m.alpha=a),l&&(m.saturation=l),c&&(m.value=c),i&&(m.hue=i));m.style=p(m.red,m.green,m.blue,m.alpha)}(f,u)})),r({onClose:h,onConfirm:g}),(t,r)=>(e.openBlock(),e.createElementBlock("div",dn,[y.isGradient?(e.openBlock(),e.createBlock(pn,{key:0})):(e.openBlock(),e.createBlock(tn,{key:1})),e.createElementVNode("div",fn,[e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:y.cancelColor,backgroundColor:y.cancelBg}),onClick:h},e.toDisplayString(y.cancelText),5),e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:y.confirmColor,backgroundColor:y.confirmBg}),onClick:g},e.toDisplayString(y.confirmText),5)])]))}}))})); | ||
| var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,r)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,__spreadValues=(e,t)=>{for(var r in t||(t={}))__hasOwnProp.call(t,r)&&__defNormalProp(e,r,t[r]);if(__getOwnPropSymbols)for(var r of __getOwnPropSymbols(t))__propIsEnum.call(t,r)&&__defNormalProp(e,r,t[r]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t));!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["color-gradient-picker-vue3"]=t(e.Vue)}(this,(function(e){"use strict";function t(e){return"number"==typeof e&&!1===Number.isNaN(e)&&e>=0&&e<=255}function r(e,r,n,o){if(t(e)&&t(r)&&t(n)){const a={red:0|e,green:0|r,blue:0|n,alpha:0|o};return!0===t(o)&&(a.alpha=0|o),a}}function n(e,t,n,o){let a=t/100*(n/=100);const i=e/60;let l=a*(1-Math.abs(i%2-1)),c=n-a;return a=255*(a+c)|0,l=255*(l+c)|0,c=255*c|0,i>=1&&i<2?r(l,a,c,o):i>=2&&i<3?r(c,a,l,o):i>=3&&i<4?r(c,l,a,o):i>=4&&i<5?r(l,c,a,o):i>=5&&i<=6?r(a,c,l,o):r(a,l,c,o)}function o(e,t,r,o,a,i){e>o&&(e=o),t>r&&(t=r),e<0&&(e=0),t<0&&(t=0);const l=100-100*t/r|0,c=100*e/o|0;return __spreadProps(__spreadValues({},n(a,c,l,i)),{saturation:c,value:l})}function a(e,t,r,o,a){let i=360*e/t|0;return i=i<0?0:i>360?360:i,__spreadProps(__spreadValues({},n(i,r,o,a)),{saturation:r,hue:i})}function i(e,t){return(e=Number((e/t).toFixed(2)))>1?1:e<0?0:e}function l(e,t,r){let n=e.toString(16),o=t.toString(16),a=r.toString(16);return e<16&&(n=`0${n}`),t<16&&(o=`0${o}`),r<16&&(a=`0${a}`),n+o+a}const c=/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;function u(e){if(c.test(e)){if("#"===e[0]&&(e=e.slice(1,e.length)),e.length<6)return!1;const t=r(parseInt(e.substring(0,2),16)||0,parseInt(e.substring(2,4),16)||0,parseInt(e.substring(4,6),16)||0,parseInt(e.substring(6,8),16)/255||0),n=t&&function({red:e,green:t,blue:r}){let n,o,a,i,l=0;const c=e/255,u=t/255,s=r/255,p=Math.max(c,u,s),d=p-Math.min(c,u,s),f=e=>(p-e)/6/d+.5;return 0===d?(l=0,i=0):(i=d/p,n=f(c),o=f(u),a=f(s),c===p?l=a-o:u===p?l=1/3+n-a:s===p&&(l=2/3+o-n),l<0?l+=1:l>1&&(l-=1)),{hue:Math.round(360*l),saturation:Math.round(100*i),value:Math.round(100*p)}}(__spreadValues({},t));return __spreadValues(__spreadValues({},t),n)}return!1}function s(e,t){const r=100*e/t;return r<0?0:r>100?100:r}function p(e,t,r,n){return`rgba(${e}, ${t}, ${r}, ${n})`}function d(e,t,r){let n="";const o=e.slice();return o.sort(((e,t)=>e.left-t.left)),n="linear"===t?`linear-gradient(${r}deg,`:"radial-gradient(",o.forEach(((e,t)=>{n+=`rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha}) ${e.left}%`,t!==o.length-1&&(n+=",")})),n+=")",n}function f(e,t,r){return function(n){let o=e(n);function a(e){o=t(e,o)||o}window.addEventListener("mousemove",a),window.addEventListener("mouseup",(e=>{window.removeEventListener("mousemove",a),r&&r(e,o)}),{once:!0})}}const v={class:"picker-area-overlay1 wh-full"},b={class:"picker-area-overlay2 wh-full rounded-8px"},y=e.defineComponent({name:"AreaPicker"}),h=(e,t)=>{const r=e.__vccOpts||e;for(const[n,o]of t)r[n]=o;return r},m=h(e.defineComponent(__spreadProps(__spreadValues({},y),{setup(t){const r=e.ref(null),n=e.ref(null),a=e.inject("colorPickerState"),i=e.inject("updateColor"),l=e.computed((()=>{const{width:e=0,height:t=0}=n.value||{},r=((a.saturation||0)*e/100|0)-6,o=(t-(a.value||0)*t/100|0)-6;return{backgroundColor:`rgb(${a.red}, ${a.green}, ${a.blue})`,left:`${r}px`,top:`${o}px`}})),c=e.computed((()=>{const{red:e=255,green:t=0,blue:r=0}=function(e){let t=1;const r=e/60;let n=t*(1-Math.abs(r%2-1)),o=0,a=0,i=0;return t=255*(t+0)|0,n=255*(n+0)|0,r>=0&&r<1&&(o=0|t,a=0|n,i=0),r>=1&&r<2&&(o=0|n,a=0|t,i=0),r>=2&&r<3&&(o=0,a=0|t,i=0|n),r>=3&&r<4&&(o=0,a=0|n,i=0|t),r>=4&&r<5&&(o=0|n,a=0,i=0|t),r>=5&&r<=6&&(o=0|t,a=0,i=0|n),{red:o,green:a,blue:i}}(a.hue)||{};return{backgroundColor:`rgb(${e}, ${t}, ${r})`}})),u=(e,{startX:t,startY:r,positionX:i,positionY:l})=>{const c=e.pageX-t,u=e.pageY-r,{width:s=0,height:p=0}=n.value||{},d=o(i+=c,l+=u,p,s,a.hue,a.alpha);return{positions:{positionX:i,positionY:l,startX:e.pageX,startY:e.pageY},color:d}},s=f((e=>{if(!n.value)return;const{x:t,y:r}=n.value,{width:l=0,height:c=0}=n.value||{},u=e.pageX,s=e.pageY,p=u-t,d=s-r,f=o(p,d,c,l,a.hue,a.alpha);return i(f),{startX:u,startY:s,positionX:p,positionY:d}}),((e,{startX:t,startY:r,positionX:n,positionY:o})=>{const{positions:a,color:l}=u(e,{startX:t,startY:r,positionX:n,positionY:o});return i(l),a}),((e,{startX:t,startY:r,positionX:n,positionY:o})=>{const{positions:a,color:l}=u(e,{startX:t,startY:r,positionX:n,positionY:o});return i(l),a}));return e.watchEffect((()=>{var e;const t=r.value;t&&!(null==(e=n.value)?void 0:e.width)&&(n.value=t.getBoundingClientRect()||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"pickerAreaRef",ref:r,class:"picker-area w-full mb-16px relative rounded-8px",style:e.normalizeStyle(e.unref(c)),onMousedown:n[0]||(n[0]=(...t)=>e.unref(s)&&e.unref(s)(...t))},[e.createElementVNode("div",v,[e.createElementVNode("div",b,[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(l))},null,4)])])],36))}})),[["__scopeId","data-v-e6e79a9f"]]),g={class:"preview-area mr-8px"},_=e.defineComponent({name:"AreaPreview"}),j=e.defineComponent(__spreadProps(__spreadValues({},_),{setup(t){const r=e.inject("colorPickerState"),n=e.computed((()=>{let e="";return e=r.isGradient?d(r.points,r.type,r.degree):p(r.red,r.green,r.blue,r.alpha),{background:e}}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("div",{class:"border-box w-36px h-36px rounded-8px border-width-1px border-solid border-[#ebedf5]",style:e.normalizeStyle(e.unref(n))},null,4)]))}})),w=e.defineComponent({name:"AreaHue"}),x=h(e.defineComponent(__spreadProps(__spreadValues({},w),{setup(t){const r=e.ref(null),n=e.ref(null),o=e.inject("colorPickerState"),i=e.inject("updateColor"),l=e.computed((()=>{var e;const t=(null==(e=n.value)?void 0:e.width)||0;return(o.hue||0)*(t-14)/360|0})),c=e.computed((()=>({left:`${l.value}px`}))),u=(e,{startX:t,positionX:r})=>{var i;const l=e.pageX-t,c=(null==(i=n.value)?void 0:i.width)||0,u=a((r+=l)>c?c:r<=0?0:r,c,o.saturation,o.value,o.alpha);return{positions:{positionX:r,startX:e.pageX},color:u}},s=f((e=>{var t,r;const l=(null==(t=n.value)?void 0:t.x)||0,c=e.pageX,u=c-l,s=a(u,(null==(r=n.value)?void 0:r.width)||0,o.saturation,o.value,o.alpha);return i(s),{startX:c,positionX:u}}),((e,{startX:t,positionX:r})=>{const{positions:n,color:o}=u(e,{startX:t,positionX:r});return i(o),n}),((e,{startX:t,positionX:r})=>{const{positions:n,color:o}=u(e,{startX:t,positionX:r});return i(o),n}));return e.watchEffect((()=>{var e,t;r.value&&!(null==(e=n.value)?void 0:e.width)&&(n.value=(null==(t=r.value)?void 0:t.getBoundingClientRect())||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"relative w-full overflow-hidden rounded-10px mb-8px bg-[red] cursor-pointer",onMousedown:n[0]||(n[0]=(...t)=>e.unref(s)&&e.unref(s)(...t))},[e.createElementVNode("div",{ref_key:"hueRef",ref:r,class:"hue-area relative"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(c))},null,4)],512)],32))}})),[["__scopeId","data-v-366635af"]]),k={class:"alpha-area wh-full rounded-10px"},P=e.defineComponent({name:"AreaAlpha"}),C=h(e.defineComponent(__spreadProps(__spreadValues({},P),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.ref(null),a=e.ref(null),l=e.computed((()=>{var e;const t=(null==(e=a.value)?void 0:e.width)||0;return r.alpha*(t-14)|0})),c=e.computed((()=>({background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${r.red}, ${r.green}, ${r.blue}))`}))),u=e.computed((()=>({left:`${l.value}px`}))),s=(e,{startX:t,positionX:r})=>{var n;const o=i(r+=e.pageX-t,(null==(n=a.value)?void 0:n.width)||0);return{positions:{positionX:r,startX:e.pageX},alpha:o}},p=f((e=>{var t,r;const o=(null==(t=a.value)?void 0:t.x)||0,l=e.pageX,c=(null==(r=a.value)?void 0:r.width)||0;let u=l-o;return n({alpha:i(u,c)},"alpha"),{startX:l,positionX:u}}),((e,{startX:t,positionX:r})=>{const{positions:o,alpha:a}=s(e,{startX:t,positionX:r});return n({alpha:a},"alpha"),o}),((e,{startX:t,positionX:r})=>{const{positions:o,alpha:a}=s(e,{startX:t,positionX:r});return n({alpha:a},"alpha"),o}));return e.watchEffect((()=>{var e,t;o.value&&!(null==(e=a.value)?void 0:e.width)&&(a.value=(null==(t=o.value)?void 0:t.getBoundingClientRect())||null)})),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"relative w-full overflow-hidden rounded-10px h-14px cursor-pointer",onMousedown:r[0]||(r[0]=(...t)=>e.unref(p)&&e.unref(p)(...t))},[e.createElementVNode("div",{class:"absolute left-0 right-0 top-0 bottom-0",style:e.normalizeStyle(e.unref(c))},null,4),e.createElementVNode("div",k,[e.createElementVNode("div",{ref_key:"alphaMaskRef",ref:o,class:"wh-full relative"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(u))},null,4)],512)])],32))}})),[["__scopeId","data-v-5168a43e"]]);const O="object"==typeof global&&global&&global.Object===Object&&global;var V="object"==typeof self&&self&&self.Object===Object&&self;const B=O||V||Function("return this")();const E=B.Symbol;var X=Object.prototype,S=X.hasOwnProperty,A=X.toString,N=E?E.toStringTag:void 0;var I=Object.prototype.toString;var $="[object Null]",z="[object Undefined]",M=E?E.toStringTag:void 0;function U(e){return null==e?void 0===e?z:$:M&&M in Object(e)?function(e){var t=S.call(e,N),r=e[N];try{e[N]=void 0;var n=!0}catch(a){}var o=A.call(e);return n&&(t?e[N]=r:delete e[N]),o}(e):function(e){return I.call(e)}(e)}function D(e){return null!=e&&"object"==typeof e}var T="[object Symbol]";const F=Array.isArray;var G=/\s/;var R=/^\s+/;function Y(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&G.test(e.charAt(t)););return t}(e)+1).replace(R,""):e}function L(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var W=NaN,q=/^[-+]0x[0-9a-f]+$/i,H=/^0b[01]+$/i,J=/^0o[0-7]+$/i,K=parseInt;function Q(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||D(e)&&U(e)==T}(e))return W;if(L(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=L(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=Y(e);var r=H.test(e);return r||J.test(e)?K(e.slice(2),r?2:8):q.test(e)?W:+e}var Z="[object AsyncFunction]",ee="[object Function]",te="[object GeneratorFunction]",re="[object Proxy]";function ne(e){if(!L(e))return!1;var t=U(e);return t==ee||t==te||t==Z||t==re}const oe=B["__core-js_shared__"];var ae,ie=(ae=/[^.]+$/.exec(oe&&oe.keys&&oe.keys.IE_PROTO||""))?"Symbol(src)_1."+ae:"";var le=Function.prototype.toString;function ce(e){if(null!=e){try{return le.call(e)}catch(t){}try{return e+""}catch(t){}}return""}var ue=/^\[object .+?Constructor\]$/,se=Function.prototype,pe=Object.prototype,de=se.toString,fe=pe.hasOwnProperty,ve=RegExp("^"+de.call(fe).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function be(e){return!(!L(e)||(t=e,ie&&ie in t))&&(ne(e)?ve:ue).test(ce(e));var t}function ye(e,t){var r=function(e,t){return null==e?void 0:e[t]}(e,t);return be(r)?r:void 0}const he=ye(B,"WeakMap");var me=Object.create;const ge=function(){function e(){}return function(t){if(!L(t))return{};if(me)return me(t);e.prototype=t;var r=new e;return e.prototype=void 0,r}}();const _e=function(){try{var e=ye(Object,"defineProperty");return e({},"",{}),e}catch(t){}}();var je=9007199254740991,we=/^(?:0|[1-9]\d*)$/;function xe(e,t){var r=typeof e;return!!(t=null==t?je:t)&&("number"==r||"symbol"!=r&&we.test(e))&&e>-1&&e%1==0&&e<t}function ke(e,t,r){"__proto__"==t&&_e?_e(e,t,{configurable:!0,enumerable:!0,value:r,writable:!0}):e[t]=r}function Pe(e,t){return e===t||e!=e&&t!=t}var Ce=Object.prototype.hasOwnProperty;function Oe(e,t,r){var n=e[t];Ce.call(e,t)&&Pe(n,r)&&(void 0!==r||t in e)||ke(e,t,r)}function Ve(e,t,r,n){var o=!r;r||(r={});for(var a=-1,i=t.length;++a<i;){var l=t[a],c=n?n(r[l],e[l],l,r,e):void 0;void 0===c&&(c=e[l]),o?ke(r,l,c):Oe(r,l,c)}return r}var Be=9007199254740991;function Ee(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=Be}function Xe(e){return null!=e&&Ee(e.length)&&!ne(e)}var Se=Object.prototype;function Ae(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||Se)}function Ne(e){return D(e)&&"[object Arguments]"==U(e)}var Ie=Object.prototype,$e=Ie.hasOwnProperty,ze=Ie.propertyIsEnumerable,Me=Ne(function(){return arguments}())?Ne:function(e){return D(e)&&$e.call(e,"callee")&&!ze.call(e,"callee")};const Ue=Me;var De="object"==typeof exports&&exports&&!exports.nodeType&&exports,Te=De&&"object"==typeof module&&module&&!module.nodeType&&module,Fe=Te&&Te.exports===De?B.Buffer:void 0;const Ge=(Fe?Fe.isBuffer:void 0)||function(){return!1};var Re={};function Ye(e){return function(t){return e(t)}}Re["[object Float32Array]"]=Re["[object Float64Array]"]=Re["[object Int8Array]"]=Re["[object Int16Array]"]=Re["[object Int32Array]"]=Re["[object Uint8Array]"]=Re["[object Uint8ClampedArray]"]=Re["[object Uint16Array]"]=Re["[object Uint32Array]"]=!0,Re["[object Arguments]"]=Re["[object Array]"]=Re["[object ArrayBuffer]"]=Re["[object Boolean]"]=Re["[object DataView]"]=Re["[object Date]"]=Re["[object Error]"]=Re["[object Function]"]=Re["[object Map]"]=Re["[object Number]"]=Re["[object Object]"]=Re["[object RegExp]"]=Re["[object Set]"]=Re["[object String]"]=Re["[object WeakMap]"]=!1;var Le="object"==typeof exports&&exports&&!exports.nodeType&&exports,We=Le&&"object"==typeof module&&module&&!module.nodeType&&module,qe=We&&We.exports===Le&&O.process;const He=function(){try{var e=We&&We.require&&We.require("util").types;return e||qe&&qe.binding&&qe.binding("util")}catch(t){}}();var Je=He&&He.isTypedArray;const Ke=Je?Ye(Je):function(e){return D(e)&&Ee(e.length)&&!!Re[U(e)]};var Qe=Object.prototype.hasOwnProperty;function Ze(e,t){var r=F(e),n=!r&&Ue(e),o=!r&&!n&&Ge(e),a=!r&&!n&&!o&&Ke(e),i=r||n||o||a,l=i?function(e,t){for(var r=-1,n=Array(e);++r<e;)n[r]=t(r);return n}(e.length,String):[],c=l.length;for(var u in e)!t&&!Qe.call(e,u)||i&&("length"==u||o&&("offset"==u||"parent"==u)||a&&("buffer"==u||"byteLength"==u||"byteOffset"==u)||xe(u,c))||l.push(u);return l}function et(e,t){return function(r){return e(t(r))}}const tt=et(Object.keys,Object);var rt=Object.prototype.hasOwnProperty;function nt(e){return Xe(e)?Ze(e):function(e){if(!Ae(e))return tt(e);var t=[];for(var r in Object(e))rt.call(e,r)&&"constructor"!=r&&t.push(r);return t}(e)}var ot=Object.prototype.hasOwnProperty;function at(e){if(!L(e))return function(e){var t=[];if(null!=e)for(var r in Object(e))t.push(r);return t}(e);var t=Ae(e),r=[];for(var n in e)("constructor"!=n||!t&&ot.call(e,n))&&r.push(n);return r}function it(e){return Xe(e)?Ze(e,!0):at(e)}const lt=ye(Object,"create");var ct=Object.prototype.hasOwnProperty;var ut=Object.prototype.hasOwnProperty;function st(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function pt(e,t){for(var r=e.length;r--;)if(Pe(e[r][0],t))return r;return-1}st.prototype.clear=function(){this.__data__=lt?lt(null):{},this.size=0},st.prototype.delete=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},st.prototype.get=function(e){var t=this.__data__;if(lt){var r=t[e];return"__lodash_hash_undefined__"===r?void 0:r}return ct.call(t,e)?t[e]:void 0},st.prototype.has=function(e){var t=this.__data__;return lt?void 0!==t[e]:ut.call(t,e)},st.prototype.set=function(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=lt&&void 0===t?"__lodash_hash_undefined__":t,this};var dt=Array.prototype.splice;function ft(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}ft.prototype.clear=function(){this.__data__=[],this.size=0},ft.prototype.delete=function(e){var t=this.__data__,r=pt(t,e);return!(r<0)&&(r==t.length-1?t.pop():dt.call(t,r,1),--this.size,!0)},ft.prototype.get=function(e){var t=this.__data__,r=pt(t,e);return r<0?void 0:t[r][1]},ft.prototype.has=function(e){return pt(this.__data__,e)>-1},ft.prototype.set=function(e,t){var r=this.__data__,n=pt(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this};const vt=ye(B,"Map");function bt(e,t){var r,n,o=e.__data__;return("string"==(n=typeof(r=t))||"number"==n||"symbol"==n||"boolean"==n?"__proto__"!==r:null===r)?o["string"==typeof t?"string":"hash"]:o.map}function yt(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function ht(e,t){for(var r=-1,n=t.length,o=e.length;++r<n;)e[o+r]=t[r];return e}yt.prototype.clear=function(){this.size=0,this.__data__={hash:new st,map:new(vt||ft),string:new st}},yt.prototype.delete=function(e){var t=bt(this,e).delete(e);return this.size-=t?1:0,t},yt.prototype.get=function(e){return bt(this,e).get(e)},yt.prototype.has=function(e){return bt(this,e).has(e)},yt.prototype.set=function(e,t){var r=bt(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this};const mt=et(Object.getPrototypeOf,Object);function gt(e){var t=this.__data__=new ft(e);this.size=t.size}gt.prototype.clear=function(){this.__data__=new ft,this.size=0},gt.prototype.delete=function(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r},gt.prototype.get=function(e){return this.__data__.get(e)},gt.prototype.has=function(e){return this.__data__.has(e)},gt.prototype.set=function(e,t){var r=this.__data__;if(r instanceof ft){var n=r.__data__;if(!vt||n.length<199)return n.push([e,t]),this.size=++r.size,this;r=this.__data__=new yt(n)}return r.set(e,t),this.size=r.size,this};var _t="object"==typeof exports&&exports&&!exports.nodeType&&exports,jt=_t&&"object"==typeof module&&module&&!module.nodeType&&module,wt=jt&&jt.exports===_t?B.Buffer:void 0,xt=wt?wt.allocUnsafe:void 0;function kt(){return[]}var Pt=Object.prototype.propertyIsEnumerable,Ct=Object.getOwnPropertySymbols;const Ot=Ct?function(e){return null==e?[]:(e=Object(e),function(e,t){for(var r=-1,n=null==e?0:e.length,o=0,a=[];++r<n;){var i=e[r];t(i,r,e)&&(a[o++]=i)}return a}(Ct(e),(function(t){return Pt.call(e,t)})))}:kt;const Vt=Object.getOwnPropertySymbols?function(e){for(var t=[];e;)ht(t,Ot(e)),e=mt(e);return t}:kt;function Bt(e,t,r){var n=t(e);return F(e)?n:ht(n,r(e))}function Et(e){return Bt(e,nt,Ot)}function Xt(e){return Bt(e,it,Vt)}const St=ye(B,"DataView");const At=ye(B,"Promise");const Nt=ye(B,"Set");var It="[object Map]",$t="[object Promise]",zt="[object Set]",Mt="[object WeakMap]",Ut="[object DataView]",Dt=ce(St),Tt=ce(vt),Ft=ce(At),Gt=ce(Nt),Rt=ce(he),Yt=U;(St&&Yt(new St(new ArrayBuffer(1)))!=Ut||vt&&Yt(new vt)!=It||At&&Yt(At.resolve())!=$t||Nt&&Yt(new Nt)!=zt||he&&Yt(new he)!=Mt)&&(Yt=function(e){var t=U(e),r="[object Object]"==t?e.constructor:void 0,n=r?ce(r):"";if(n)switch(n){case Dt:return Ut;case Tt:return It;case Ft:return $t;case Gt:return zt;case Rt:return Mt}return t});const Lt=Yt;var Wt=Object.prototype.hasOwnProperty;const qt=B.Uint8Array;function Ht(e){var t=new e.constructor(e.byteLength);return new qt(t).set(new qt(e)),t}var Jt=/\w*$/;var Kt=E?E.prototype:void 0,Qt=Kt?Kt.valueOf:void 0;var Zt="[object Boolean]",er="[object Date]",tr="[object Map]",rr="[object Number]",nr="[object RegExp]",or="[object Set]",ar="[object String]",ir="[object Symbol]",lr="[object ArrayBuffer]",cr="[object DataView]",ur="[object Float32Array]",sr="[object Float64Array]",pr="[object Int8Array]",dr="[object Int16Array]",fr="[object Int32Array]",vr="[object Uint8Array]",br="[object Uint8ClampedArray]",yr="[object Uint16Array]",hr="[object Uint32Array]";function mr(e,t,r){var n,o,a,i=e.constructor;switch(t){case lr:return Ht(e);case Zt:case er:return new i(+e);case cr:return function(e,t){var r=t?Ht(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.byteLength)}(e,r);case ur:case sr:case pr:case dr:case fr:case vr:case br:case yr:case hr:return function(e,t){var r=t?Ht(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.length)}(e,r);case tr:return new i;case rr:case ar:return new i(e);case nr:return(a=new(o=e).constructor(o.source,Jt.exec(o))).lastIndex=o.lastIndex,a;case or:return new i;case ir:return n=e,Qt?Object(Qt.call(n)):{}}}var gr=He&&He.isMap;const _r=gr?Ye(gr):function(e){return D(e)&&"[object Map]"==Lt(e)};var jr=He&&He.isSet;const wr=jr?Ye(jr):function(e){return D(e)&&"[object Set]"==Lt(e)};var xr=1,kr=2,Pr=4,Cr="[object Arguments]",Or="[object Function]",Vr="[object GeneratorFunction]",Br="[object Object]",Er={};function Xr(e,t,r,n,o,a){var i,l=t&xr,c=t&kr,u=t⪻if(r&&(i=o?r(e,n,o,a):r(e)),void 0!==i)return i;if(!L(e))return e;var s=F(e);if(s){if(i=function(e){var t=e.length,r=new e.constructor(t);return t&&"string"==typeof e[0]&&Wt.call(e,"index")&&(r.index=e.index,r.input=e.input),r}(e),!l)return function(e,t){var r=-1,n=e.length;for(t||(t=Array(n));++r<n;)t[r]=e[r];return t}(e,i)}else{var p=Lt(e),d=p==Or||p==Vr;if(Ge(e))return function(e,t){if(t)return e.slice();var r=e.length,n=xt?xt(r):new e.constructor(r);return e.copy(n),n}(e,l);if(p==Br||p==Cr||d&&!o){if(i=c||d?{}:function(e){return"function"!=typeof e.constructor||Ae(e)?{}:ge(mt(e))}(e),!l)return c?function(e,t){return Ve(e,Vt(e),t)}(e,function(e,t){return e&&Ve(t,it(t),e)}(i,e)):function(e,t){return Ve(e,Ot(e),t)}(e,function(e,t){return e&&Ve(t,nt(t),e)}(i,e))}else{if(!Er[p])return o?e:{};i=mr(e,p,l)}}a||(a=new gt);var f=a.get(e);if(f)return f;a.set(e,i),wr(e)?e.forEach((function(n){i.add(Xr(n,t,r,n,e,a))})):_r(e)&&e.forEach((function(n,o){i.set(o,Xr(n,t,r,o,e,a))}));var v=s?void 0:(u?c?Xt:Et:c?it:nt)(e);return function(e,t){for(var r=-1,n=null==e?0:e.length;++r<n&&!1!==t(e[r],r,e););}(v||e,(function(n,o){v&&(n=e[o=n]),Oe(i,o,Xr(n,t,r,o,e,a))})),i}Er[Cr]=Er["[object Array]"]=Er["[object ArrayBuffer]"]=Er["[object DataView]"]=Er["[object Boolean]"]=Er["[object Date]"]=Er["[object Float32Array]"]=Er["[object Float64Array]"]=Er["[object Int8Array]"]=Er["[object Int16Array]"]=Er["[object Int32Array]"]=Er["[object Map]"]=Er["[object Number]"]=Er[Br]=Er["[object RegExp]"]=Er["[object Set]"]=Er["[object String]"]=Er["[object Symbol]"]=Er["[object Uint8Array]"]=Er["[object Uint8ClampedArray]"]=Er["[object Uint16Array]"]=Er["[object Uint32Array]"]=!0,Er["[object Error]"]=Er[Or]=Er["[object WeakMap]"]=!1;function Sr(e){return Xr(e,5)}const Ar=function(){return B.Date.now()};var Nr="Expected a function",Ir=Math.max,$r=Math.min;function zr(e,t,r){var n,o,a,i,l,c,u=0,s=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(Nr);function f(t){var r=n,a=o;return n=o=void 0,u=t,i=e.apply(a,r)}function v(e){var r=e-c;return void 0===c||r>=t||r<0||p&&e-u>=a}function b(){var e=Ar();if(v(e))return y(e);l=setTimeout(b,function(e){var r=t-(e-c);return p?$r(r,a-(e-u)):r}(e))}function y(e){return l=void 0,d&&n?f(e):(n=o=void 0,i)}function h(){var e=Ar(),r=v(e);if(n=arguments,o=this,c=e,r){if(void 0===l)return function(e){return u=e,l=setTimeout(b,t),s?f(e):i}(c);if(p)return clearTimeout(l),l=setTimeout(b,t),f(c)}return void 0===l&&(l=setTimeout(b,t)),i}return t=Q(t)||0,L(r)&&(s=!!r.leading,a=(p="maxWait"in r)?Ir(Q(r.maxWait)||0,t):a,d="trailing"in r?!!r.trailing:d),h.cancel=function(){void 0!==l&&clearTimeout(l),u=0,n=c=o=l=void 0},h.flush=function(){return void 0===l?i:y(Ar())},h}const Mr=["onDblclick"],Ur=e.defineComponent({name:"AreaGradientPoint"}),Dr=e.defineComponent(__spreadProps(__spreadValues({},Ur),{props:{index:{type:Number,required:!0},point:{type:Object,required:!0},width:{type:Number,default:0},positions:{type:Object}},setup(t){const r=t,n=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.computed((()=>n.activePointIndex===r.index?" active":"")),i=e.computed((()=>({left:r.point.left*((r.width-14)/100)+"px"}))),l=e=>{n.points[r.index].left=e,o({type:n.type},"type")},c=(e,{startX:t,offsetX:n})=>{const o=s(n+=e.pageX-t,r.width);return{positions:{offsetX:n,startX:e.pageX},left:o}},u=f((e=>{const t=e.pageX,o=e.pageY,a=t-(r.positions.x||0);return n.activePointIndex=r.index,{startX:t,startY:o,offsetX:a}}),((e,{startX:t,offsetX:r})=>{const{positions:n,left:o}=c(e,{startX:t,offsetX:r});return l(o),n}),((e,{startX:t,offsetX:r})=>{const{positions:n,left:o}=c(e,{startX:t,offsetX:r});return l(o),n})),p=()=>{let e=Sr(n.points);if(e.length<=2)return;const t=r.index;e=null==e?void 0:e.filter((e=>e.id!==r.point.id)),n.activePointIndex=0===t?1:t-1,o({points:e},"points")};return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`picker-pointer${e.unref(a)}`),style:e.normalizeStyle(e.unref(i)),onMousedown:o[0]||(o[0]=e.withModifiers(((...t)=>e.unref(u)&&e.unref(u)(...t)),["stop"])),onDblclick:e.withModifiers(p,["stop"]),onClick:o[1]||(o[1]=e.withModifiers((()=>e.unref(n).activePointIndex=r.index),["stop"]))},[e.createElementVNode("span",{class:e.normalizeClass(`child-point${e.unref(a)}`)},null,2)],46,Mr))}}));let Tr;const Fr=new Uint8Array(16);function Gr(){if(!Tr&&(Tr="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!Tr))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return Tr(Fr)}const Rr=[];for(let En=0;En<256;++En)Rr.push((En+256).toString(16).slice(1));const Yr={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function Lr(e,t,r){if(Yr.randomUUID&&!t&&!e)return Yr.randomUUID();const n=(e=e||{}).random||(e.rng||Gr)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){r=r||0;for(let e=0;e<16;++e)t[r+e]=n[e];return t}return function(e,t=0){return Rr[e[t+0]]+Rr[e[t+1]]+Rr[e[t+2]]+Rr[e[t+3]]+"-"+Rr[e[t+4]]+Rr[e[t+5]]+"-"+Rr[e[t+6]]+Rr[e[t+7]]+"-"+Rr[e[t+8]]+Rr[e[t+9]]+"-"+Rr[e[t+10]]+Rr[e[t+11]]+Rr[e[t+12]]+Rr[e[t+13]]+Rr[e[t+14]]+Rr[e[t+15]]}(n)}const Wr=e.defineComponent({name:"AreaGradientPoints"}),qr=e.defineComponent(__spreadProps(__spreadValues({},Wr),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.ref(null),a=e.ref(null),i=e.computed((()=>({background:d(r.points,"linear",90)}))),l=e=>{const{x:t=0,width:o=0}=a.value||{},i=s(e.pageX-t,o),{red:l,green:c,blue:u,alpha:p}=r,d=Sr(r.points),f={id:Lr(),red:l,green:c,blue:u,alpha:p,left:i};null==d||d.push(f),r.activePointIndex=d.findIndex((e=>e.id===f.id)),n({points:d},"points")};return e.watchEffect((()=>{var e,t;o.value&&!(null==(e=a.value)?void 0:e.width)&&(a.value=(null==(t=o.value)?void 0:t.getBoundingClientRect())||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"gradient border-box w-full h-14px relative cursor-pointer rounded-10px mb-8px",style:e.normalizeStyle(e.unref(i)),onClick:l},[e.createElementVNode("div",{ref_key:"pointsContainerRef",ref:o,class:"wh-full relative"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r).points,((t,r)=>{var n;return e.openBlock(),e.createBlock(Dr,{key:t.id,index:r,point:t,positions:e.unref(a),width:null==(n=e.unref(a))?void 0:n.width},null,8,["index","point","positions","width"])})),128))],512)],4))}})),Hr={class:"flex flex-col px-16px"},Jr={class:"flex pb-16px"},Kr={class:"flex flex-col flex-1"},Qr=e.defineComponent({name:"Area"}),Zr=e.defineComponent(__spreadProps(__spreadValues({},Qr),{setup(t){const r=e.inject("colorPickerState");return(t,n)=>(e.openBlock(),e.createElementBlock("div",Hr,[e.createVNode(m),e.unref(r).isGradient?(e.openBlock(),e.createBlock(qr,{key:0})):e.createCommentVNode("",!0),e.createElementVNode("div",Jr,[e.createVNode(j),e.createElementVNode("div",Kr,[e.createVNode(x),e.createVNode(C)])])]))}})),en={class:"flex items-center relative w-full rounded-6px text-[#28314d]"},tn=["maxlength","type"],rn={class:"text-12px lining-15px font-bold mt-6px mb-0 text-[#1f2667]"},nn=e.defineComponent({name:"Input"}),on=h(e.defineComponent(__spreadProps(__spreadValues({},nn),{props:{value:{default:""},label:{default:""},classes:{default:""},maxLen:{default:"3"},type:{default:"text"}},emits:["input","blur","focus","update:value"],setup(t,{emit:r}){const n=t,o=e.computed({get:()=>n.value,set:e=>{r("update:value",e)}}),a=e=>{r("input",e)},i=()=>{r("blur")},l=()=>{r("focus")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-shrink-0 items-center flex-col",n.classes])},[e.createElementVNode("div",en,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=t=>e.isRef(o)?o.value=t:null),class:"w-full outline-0 text-[#1f2667] text-center font-bold text-12px",maxlength:t.maxLen,type:n.type,onFocus:l,onBlur:i,onInput:a},null,40,tn),[[e.vModelDynamic,e.unref(o),void 0,{trim:!0}]])]),e.createElementVNode("div",rn,e.toDisplayString(t.label),1)],2))}})),[["__scopeId","data-v-b4af7105"]]),an=e.defineComponent({name:"PreviewHex"}),ln=e.defineComponent(__spreadProps(__spreadValues({},an),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.computed((()=>l(r.red,r.green,r.blue))),a=e=>{let t=e.target.value;if(!t&&0!==t)return;const r=u(t);r&&n(r)};return(t,r)=>(e.openBlock(),e.createBlock(on,{value:e.unref(o),label:"Hex","max-len":"7",classes:"hex mr-8px",onInput:a},null,8,["value"]))}})),cn=e.defineComponent({name:"PreviewRGBItem"}),un=e.defineComponent(__spreadProps(__spreadValues({},cn),{props:{type:{default:"text"},label:{default:""}},setup(t){const r=t,n=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.computed((()=>{let e=0;switch(r.label){case"R":e=n.red;break;case"G":e=n.green;break;case"B":e=n.blue;break;case"A":e=~~(100*n.alpha)}return e})),i=t=>{let a=+t.target.value;switch(a<=0?a=0:a>255?a=255:"A"===r.label&&a>100&&(a=100),r.label){case"R":n.red=a;break;case"G":n.green=a;break;case"B":n.blue=a;case"A":n.alpha=a/100}e.nextTick((()=>{const e=u(l(n.red,n.green,n.blue));"A"===r.label?e.alpha=o(e):o(e)}))};return(t,n)=>(e.openBlock(),e.createElementBlock("div",null,[e.createVNode(on,{value:e.unref(a),label:r.label,type:r.type,classes:"A"!==r.label?"mr-8px":"",onInput:i},null,8,["value","label","type","classes"])]))}})),sn=e.defineComponent({name:"PreviewRGB"}),pn=e.defineComponent(__spreadProps(__spreadValues({},sn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(un,{type:"number",label:"R"}),e.createVNode(un,{type:"number",label:"G"}),e.createVNode(un,{type:"number",label:"B"}),e.createVNode(un,{type:"number",label:"A"})],64))})),dn={class:"color-preview-area mb-8px px-16px"},fn={class:"w-full flex justify-between"},vn=e.defineComponent({name:"Preview"}),bn=e.defineComponent(__spreadProps(__spreadValues({},vn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock("div",dn,[e.createElementVNode("div",fn,[e.createVNode(ln),e.createVNode(pn)])]))})),yn=e.defineComponent({name:"Solid"}),hn=e.defineComponent(__spreadProps(__spreadValues({},yn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(Zr),e.createVNode(bn)],64))})),mn={class:"gradient-controls border-box flex justify-between items-center w-full mb-8px px-16px"},gn={class:"flex flex-1"},_n={key:0,class:"relative mr-24px"},jn=[(t=>(e.pushScopeId("data-v-4e21238c"),t=t(),e.popScopeId(),t))((()=>e.createElementVNode("div",{class:"gradient-degree-pointer"},null,-1)))],wn={class:"gradient-degree-value flex justify-center items-center"},xn=e.defineComponent({name:"GradientControls"}),kn=h(e.defineComponent(__spreadProps(__spreadValues({},xn),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.computed((()=>r.type)),a=e.computed((()=>r.degree)),i=e=>{n({type:e},"type")},l=e.ref(!0),c=()=>{if(l.value)return void(l.value=!1);let e=(r.degree||0)+45;e>=360&&(e=0),n({degree:~~e},"degree")},u=e.computed((()=>({transform:`rotate(${r.degree}deg)`}))),s=f((e=>{const t=e.target.getBoundingClientRect();return{centerY:~~(8-window.pageYOffset)+t.top,centerX:~~(8-window.pageXOffset)+t.left}}),((e,{centerX:t,centerY:r})=>{l.value=!0;const o=function(e,t,r,n){return Math.atan2(e-r,t-n)*(180/Math.PI)*-1+180}(e.clientX,e.clientY,t,r);n({degree:~~o},"degree")}),(e=>{const t=e.target.classList;l.value=!1,!t.contains("gradient-degrees")&&t.contains("icon-rotate")}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",mn,[e.createElementVNode("div",gn,[e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item liner-gradient "+("linear"===e.unref(o)?"active":"")),onClick:r[0]||(r[0]=e=>i("linear"))},null,2),e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item radial-gradient "+("radial"===e.unref(o)?"active":"")),onClick:r[1]||(r[1]=e=>i("radial"))},null,2)]),"linear"===e.unref(o)?(e.openBlock(),e.createElementBlock("div",_n,[e.createElementVNode("div",{class:"gradient-degrees cursor-pointer flex justify-center items-center",onMousedown:r[2]||(r[2]=(...t)=>e.unref(s)&&e.unref(s)(...t)),onClick:c},[e.createElementVNode("div",{class:"gradient-degree-center",style:e.normalizeStyle(e.unref(u))},jn,4)],32),e.createElementVNode("div",wn,[e.createElementVNode("p",null,e.toDisplayString(e.unref(a))+"°",1)])])):e.createCommentVNode("",!0)]))}})),[["__scopeId","data-v-4e21238c"]]),Pn=e.defineComponent({name:"Gradient"}),Cn=e.defineComponent(__spreadProps(__spreadValues({},Pn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(kn),e.createVNode(Zr),e.createVNode(bn)],64))})),On={class:"picker-color-ui border-box m-8px bg-[#fff] flex flex-col slelect-none"},Vn={key:2,class:"btns flex justify-end items-center select-none"},Bn=e.defineComponent({name:"ColorPicker"});return e.defineComponent(__spreadProps(__spreadValues({},Bn),{props:{isGradient:{type:Boolean,default:!1},showBtn:{type:Boolean,default:!1},color:{type:Object,default:()=>({red:255,green:0,blue:0,alpha:1})},gradient:{type:Object,default:()=>({type:"linear",degree:0,points:[{id:Lr(),left:0,red:0,green:0,blue:0,alpha:1},{id:Lr(),left:100,red:255,green:0,blue:0,alpha:1}]})},cancelText:{type:String,default:"Cancel"},cancelColor:{type:String,default:"#333"},cancelBg:{type:String,default:"#fff"},confirmText:{type:String,default:"Confirm"},confirmColor:{type:String,defualt:"#333"},confirmBg:{type:String,defualt:"#fff"}},emits:["change"],setup(t,{expose:r,emit:n}){var o,a,i,l,c,u,s,f,v,b;const y=t,h=e.reactive({isGradient:y.isGradient,red:y.isGradient?null==(o=y.gradient)?void 0:o.points[1].red:null==(a=y.color)?void 0:a.red,green:y.isGradient?null==(i=y.gradient)?void 0:i.points[1].green:null==(l=y.color)?void 0:l.green,blue:y.isGradient?null==(c=y.gradient)?void 0:c.points[1].blue:null==(u=y.color)?void 0:u.blue,alpha:y.isGradient?null==(s=y.gradient)?void 0:s.points[0].alpha:null==(f=y.color)?void 0:f.alpha,hue:0,saturation:100,value:100,style:"",type:"linear",degree:0,activePointIndex:1,activePoint:Sr(null==(v=y.gradient)?void 0:v.points[0]),points:Sr(null==(b=y.gradient)?void 0:b.points)}),m=function(e,t,r){var n=!0,o=!0;if("function"!=typeof e)throw new TypeError("Expected a function");return L(r)&&(n="leading"in r?!!r.leading:n,o="trailing"in r?!!r.trailing:o),zr(e,t,{leading:n,maxWait:t,trailing:o})}((function({red:e,green:t,blue:r,alpha:o,hue:a,saturation:i,value:l,points:c,type:u,degree:s},f){const v={red:e,green:t,blue:r,alpha:o,hue:a,saturation:i,value:l,points:c,type:u,degree:s};y.isGradient?function(e,t){const{red:r=0,green:o=0,blue:a=0,alpha:i,hue:l,saturation:c,value:u,points:s,type:p,degree:f}=e;t?h[t]=e[t]:(h.red=r,h.green=o,h.blue=a,s&&(h.points=s),p&&(h.type=p),f&&(h.degree=f),i&&(h.alpha=i),c&&(h.saturation=c),u&&(h.value=u),l&&(h.hue=l));const v=d(h.points,h.type,h.degree);h.style=v,!y.showBtn&&n("change",{style:h.style,gradient:{type:h.type,degree:h.degree,points:h.points}})}(v,f):function(e,t){const{red:r=0,green:o=0,blue:a=0,alpha:i,hue:l,saturation:c,value:u}=e;t?h[t]=e[t]:(h.red=r,h.green=o,h.blue=a,i&&(h.alpha=i),c&&(h.saturation=c),u&&(h.value=u),l&&(h.hue=l));const s=p(h.red,h.green,h.blue,h.alpha);h.style=s,!y.showBtn&&n("change",{style:s,color:{red:h.red,green:h.green,blue:h.blue,hue:h.hue,alpha:h.alpha}})}(v,f)}),y.showBtn?100:150);const g=e=>{e&&"function"==typeof e&&e()},_=e=>{const{isGradient:t,style:r,type:o,degree:a,points:i,red:l,green:c,blue:u,alpha:s,hue:p}=h;n("change",t?{style:r,gradient:{type:o,degree:a,points:i}}:{style:r,color:{red:l,green:c,blue:u,hue:p,alpha:s}}),e&&"function"==typeof e&&e()};return e.provide("colorPickerState",h),e.provide("updateColor",m),r({onClose:g,onConfirm:_}),(r,n)=>(e.openBlock(),e.createElementBlock("div",On,[y.isGradient?(e.openBlock(),e.createBlock(Cn,{key:0})):(e.openBlock(),e.createBlock(hn,{key:1})),t.showBtn?(e.openBlock(),e.createElementBlock("div",Vn,[e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:y.cancelColor,backgroundColor:y.cancelBg}),onClick:g},e.toDisplayString(y.cancelText),5),e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:y.confirmColor,backgroundColor:y.confirmBg}),onClick:_},e.toDisplayString(y.confirmText),5)])):e.createCommentVNode("",!0)]))}}))})); |
@@ -8,6 +8,6 @@ /* | ||
| */ | ||
| export * from './types/index'; | ||
| export * from './types/index' | ||
| declare module 'color-gradient-picker-vue3' { | ||
| const content: any; | ||
| export default content; | ||
| const content: any | ||
| export default content | ||
| } |
| { | ||
| "name": "color-gradient-picker-vue3", | ||
| "version": "2.0.2", | ||
| "version": "2.0.3", | ||
| "type": "module", | ||
@@ -5,0 +5,0 @@ "author": "June", |
@@ -7,3 +7,3 @@ <!-- | ||
| * @LastEditors: June | ||
| * @LastEditTime: 2023-10-04 04:32:27 | ||
| * @LastEditTime: 2023-10-04 11:30:40 | ||
| --> | ||
@@ -27,2 +27,3 @@ | ||
| | isGradient | isGradient(是否渐变) | false | | ||
| | showBtn | show footer buttons(是否显示地步的确认按钮) | false | | ||
| | color | solid color(纯色 color) | `{ red: 255, green: 0, blue: 0, alpha: 1 }` | | ||
@@ -38,2 +39,6 @@ | gradient | gradient color(渐变颜色) | `'{"type":"linear","degree":0,"points":[{"id":0,"left":0,"red":0,"green":0,"blue":0,"alpha":1},{"id":1,"left":100,"red":255,"green":0,"blue":0,"alpha":1}]}'` ｜ | | ||
| #### waring | ||
| + If don't show footer confirm button, it will emits frequently.You'd better use `debounce or throttle` to optimize `@change Event` | ||
| #### Example | ||
@@ -59,5 +64,5 @@ | ||
| <script lang="ts" setup> | ||
| import { ref } from 'vue'; | ||
| import ColorPicker from 'color-gradient-picker-vue3'; | ||
| import 'color-gradient-picker-vue3/dist/style.css'; | ||
| import { ref } from 'vue' | ||
| import ColorPicker from 'color-gradient-picker-vue3' | ||
| import 'color-gradient-picker-vue3/dist/style.css' | ||
@@ -69,3 +74,3 @@ const color = ref({ | ||
| alpha: 1, | ||
| }); | ||
| }) | ||
@@ -120,4 +125,4 @@ const onChange = (color) => { | ||
| // } | ||
| console.log(color); | ||
| }; | ||
| console.log(color) | ||
| } | ||
| </script> | ||
@@ -124,0 +129,0 @@ ``` |
@@ -11,45 +11,45 @@ /* | ||
| export interface IPoitItem { | ||
| id: string; | ||
| red: number; | ||
| green: number; | ||
| blue: number; | ||
| alpha: number; | ||
| left: number; | ||
| id: string | ||
| red: number | ||
| green: number | ||
| blue: number | ||
| alpha: number | ||
| left: number | ||
| } | ||
| export interface IColor { | ||
| red: number; | ||
| green: number; | ||
| blue: number; | ||
| alpha: number; | ||
| hue?: number; | ||
| saturation?: number; | ||
| value?: number; | ||
| points?: IPoitItem[]; | ||
| type?: string; | ||
| degree?: number; | ||
| red: number | ||
| green: number | ||
| blue: number | ||
| alpha: number | ||
| hue?: number | ||
| saturation?: number | ||
| value?: number | ||
| points?: IPoitItem[] | ||
| type?: string | ||
| degree?: number | ||
| } | ||
| export interface IGradient { | ||
| type: string; | ||
| degree: number; | ||
| points: IPoitItem[]; | ||
| type: string | ||
| degree: number | ||
| points: IPoitItem[] | ||
| } | ||
| export interface IColorState extends IColor { | ||
| isGradient: boolean; | ||
| type?: string; | ||
| degree?: number; | ||
| points?: IPoitItem[]; | ||
| activePointIndex?: number; | ||
| activePoint?: IPoitItem; | ||
| style?: string; | ||
| color?: IColor; | ||
| gradient?: IGradient; | ||
| isGradient: boolean | ||
| type?: string | ||
| degree?: number | ||
| points?: IPoitItem[] | ||
| activePointIndex?: number | ||
| activePoint?: IPoitItem | ||
| style?: string | ||
| color?: IColor | ||
| gradient?: IGradient | ||
| } | ||
| export interface IColorRes { | ||
| style: string; | ||
| color?: IColor; | ||
| gradient?: IGradient; | ||
| style: string | ||
| color?: IColor | ||
| gradient?: IGradient | ||
| } |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.96%
138686
- Lines of code
- increased by7.05%
2702
- Number of lines in readme file
- increased by3.7%
140
No dependency changes