vue3-color-picker-gradient/build/js/app.face5d0f.js

vue3,颜色选择器,线性（纯色）、渐变选择器,支持角度、多点渐变

(function(e){function o(o){for(var r,a,c=o[0],i=o[1],d=o[2],p=0,u=[];p<c.length;p++)a=c[p],Object.prototype.hasOwnProperty.call(l,a)&&l[a]&&u.push(l[a][0]),l[a]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);s&&s(o);while(u.length)u.shift()();return n.push.apply(n,d||[]),t()}function t(){for(var e,o=0;o<n.length;o++){for(var t=n[o],r=!0,c=1;c<t.length;c++){var i=t[c];0!==l[i]&&(r=!1)}r&&(n.splice(o--,1),e=a(a.s=t[0]))}return e}var r={},l={app:0},n=[];function a(o){if(r[o])return r[o].exports;var t=r[o]={i:o,l:!1,exports:{}};return e[o].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=r,a.d=function(e,o,t){a.o(e,o)||Object.defineProperty(e,o,{enumerable:!0,get:t})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,o){if(1&o&&(e=a(e)),8&o)return e;if(4&o&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&o&&"string"!=typeof e)for(var r in e)a.d(t,r,function(o){return e[o]}.bind(null,r));return t},a.n=function(e){var o=e&&e.__esModule?function(){return e["default"]}:function(){return e};return a.d(o,"a",o),o},a.o=function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},a.p="";var c=window["webpackJsonp"]=window["webpackJsonp"]||[],i=c.push.bind(c);c.push=o,c=c.slice();for(var d=0;d<c.length;d++)o(c[d]);var s=i;n.push([0,"chunk-vendors"]),t()})({0:function(e,o,t){e.exports=t("56d7")},"0b04":function(e,o,t){"use strict";t("33d0")},"32f3":function(e,o,t){var r=t("77cf");r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);var l=t("499e").default;l("97b517b8",r,!0,{sourceMap:!1,shadowMode:!1})},"33d0":function(e,o,t){var r=t("f322");r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);var l=t("499e").default;l("4d068836",r,!0,{sourceMap:!1,shadowMode:!1})},"56d7":function(e,o,t){"use strict";t.r(o);var r=t("7a23");const l={id:"app"},n={class:"demo-section"},a={class:"demo-row"},c={class:"demo-section"},i={class:"demo-row"},d={class:"color-value"},s={class:"demo-section"},p={class:"demo-row"},u={class:"color-value gradient-value"},g={class:"demo-section"},b={class:"demo-row"},f={class:"color-value gradient-value"};function m(e,o,t,m,h,v){const x=Object(r["resolveComponent"])("ColorPickerGradient");return Object(r["openBlock"])(),Object(r["createElementBlock"])("div",l,[o[8]||(o[8]=Object(r["createElementVNode"])("h1",null,"Vue3 Color Picker Gradient - 颜色选择器",-1)),Object(r["createElementVNode"])("div",n,[o[4]||(o[4]=Object(r["createElementVNode"])("h2",null,"统一颜色选择器（支持纯色/渐变切换）",-1)),Object(r["createElementVNode"])("div",a,[Object(r["createVNode"])(x,{modelValue:e.currentColor,"onUpdate:modelValue":o[0]||(o[0]=o=>e.currentColor=o),onChange:m.handleColorChange},null,8,["modelValue","onChange"]),Object(r["createElementVNode"])("div",{class:"color-preview",style:Object(r["normalizeStyle"])({background:e.currentColor})},[Object(r["createElementVNode"])("div",{class:Object(r["normalizeClass"])(["color-value",{"gradient-value":m.isGradient}])},Object(r["toDisplayString"])(e.currentColor||"未选择颜色"),3)],4)])]),Object(r["createElementVNode"])("div",c,[o[5]||(o[5]=Object(r["createElementVNode"])("h2",null,"带初始纯色值",-1)),Object(r["createElementVNode"])("div",i,[Object(r["createVNode"])(x,{modelValue:e.currentColor2,"onUpdate:modelValue":o[1]||(o[1]=o=>e.currentColor2=o),type:"linear",onChange:m.handleColorChange2},null,8,["modelValue","onChange"]),Object(r["createElementVNode"])("div",{class:"color-preview",style:Object(r["normalizeStyle"])({background:e.currentColor2})},[Object(r["createElementVNode"])("div",d,Object(r["toDisplayString"])(e.currentColor2),1)],4)])]),Object(r["createElementVNode"])("div",s,[o[6]||(o[6]=Object(r["createElementVNode"])("h2",null,"带初始渐变值",-1)),Object(r["createElementVNode"])("div",p,[Object(r["createVNode"])(x,{modelValue:e.currentColor3,"onUpdate:modelValue":o[2]||(o[2]=o=>e.currentColor3=o),type:"gradient"},null,8,["modelValue"]),Object(r["createElementVNode"])("div",{class:"color-preview",style:Object(r["normalizeStyle"])({background:e.currentColor3})},[Object(r["createElementVNode"])("div",u,Object(r["toDisplayString"])(e.currentColor3),1)],4)])]),Object(r["createElementVNode"])("div",g,[o[7]||(o[7]=Object(r["createElementVNode"])("h2",null,"禁用角度控制",-1)),Object(r["createElementVNode"])("div",b,[Object(r["createVNode"])(x,{modelValue:e.currentColor4,"onUpdate:modelValue":o[3]||(o[3]=o=>e.currentColor4=o),type:"gradient",disabledColorDeg:!0},null,8,["modelValue"]),Object(r["createElementVNode"])("div",{class:"color-preview",style:Object(r["normalizeStyle"])({background:e.currentColor4})},[Object(r["createElementVNode"])("div",f,Object(r["toDisplayString"])(e.currentColor4),1)],4)])])])}const h={class:"color-picker-gradient",ref:"triggerRef"},v={key:0,class:"color-trigger-empty"};function x(e,o,t,l,n,a){const c=Object(r["resolveComponent"])("ColorPickerPanel");return Object(r["openBlock"])(),Object(r["createElementBlock"])("div",h,[Object(r["createElementVNode"])("div",{class:Object(r["normalizeClass"])(["color-trigger",{"is-disabled":t.disabled}]),onClick:o[0]||(o[0]=(...e)=>l.togglePicker&&l.togglePicker(...e))},[Object(r["createElementVNode"])("span",{class:"color-trigger-inner",style:Object(r["normalizeStyle"])(l.triggerStyle)},[t.modelValue?Object(r["createCommentVNode"])("",!0):(Object(r["openBlock"])(),Object(r["createElementBlock"])("span",v,[...o[1]||(o[1]=[Object(r["createElementVNode"])("span",{class:"color-trigger-empty-icon"},"×",-1)])]))],4)],2),(Object(r["openBlock"])(),Object(r["createBlock"])(r["Teleport"],{to:"body"},[l.showPicker?(Object(r["openBlock"])(),Object(r["createElementBlock"])("div",{key:0,class:"color-picker-dropdown",style:Object(r["normalizeStyle"])(l.dropdownStyle),ref:"dropdownRef"},[Object(r["createVNode"])(c,{type:l.currentMode,pColor:l.currentColorObj,pColors:l.currentColorsArray,pDeg:l.currentDeg,disabledColorDeg:t.disabledColorDeg,showClose:!0,titleConfig:t.titleConfig,onChange:l.handleColorChange,onClose:l.closePicker},null,8,["type","pColor","pColors","pDeg","disabledColorDeg","titleConfig","onChange","onClose"])],4)):Object(r["createCommentVNode"])("",!0)]))],512)}t("14d9");const O={key:0,class:"title"},C={class:"mode_switch"},y={key:1,class:"gcolor"},_={key:0,class:"gcolor_deg"},j={class:"gcolor_bar",ref:"refColorBar"},k={class:"gcolor_bar_pot_box"},w=["onMousedown","onClick"],E={key:0,class:"gradient_box"},A={key:1,class:"linear"};function V(e,o,t,l,n,a){const c=Object(r["resolveComponent"])("Slider"),i=Object(r["resolveComponent"])("ColorPicker");return Object(r["openBlock"])(),Object(r["createElementBlock"])("div",{class:"color_picker_panel",onClick:o[6]||(o[6]=Object(r["withModifiers"])(()=>{},["stop"]))},[Object(r["createElementVNode"])("div",{class:Object(r["normalizeClass"])(["color_hd",t.showClose||t.titleConfig.show||t.titleConfig.text?"":"color_hd_0"])},[!1!==t.titleConfig.show?(Object(r["openBlock"])(),Object(r["createElementBlock"])("div",O,[Object(r["createElementVNode"])("span",{style:Object(r["normalizeStyle"])(t.titleConfig.style||{})},Object(r["toDisplayString"])(t.titleConfig.text),5),t.showClose?(Object(r["openBlock"])(),Object(r["createElementBlock"])("span",{key:0,class:"close_box",onClick:o[0]||(o[0]=(...e)=>l.handleClose&&l.handleClose(...e))},"×")):Object(r["createCommentVNode"])("",!0)])):Object(r["createCommentVNode"])("",!0),Object(r["createElementVNode"])("div",C,[Object(r["createElementVNode"])("button",{class:Object(r["normalizeClass"])(["mode_btn",{active:"linear"===e.currentMode}]),onClick:o[1]||(o[1]=e=>l.switchMode("linear"))}," 纯色 ",2),Object(r["createElementVNode"])("button",{class:Object(r["normalizeClass"])(["mode_btn",{active:"gradient"===e.currentMode}]),onClick:o[2]||(o[2]=e=>l.switchMode("gradient"))}," 渐变 ",2)]),"gradient"===e.currentMode?(Object(r["openBlock"])(),Object(r["createElementBlock"])("div",y,[t.disabledColorDeg?Object(r["createCommentVNode"])("",!0):(Object(r["openBlock"])(),Object(r["createElementBlock"])("div",_,[o[7]||(o[7]=Object(r["createElementVNode"])("div",{class:"gcolor_deg_span"},"角度",-1)),Object(r["createVNode"])(c,{modelValue:e.deg,"onUpdate:modelValue":o[3]||(o[3]=o=>e.deg=o),min:0,max:360,"show-tooltip":!1},null,8,["modelValue"]),Object(r["withDirectives"])(Object(r["createElementVNode"])("input",{class:"number_input","onUpdate:modelValue":o[4]||(o[4]=o=>e.deg=o)},null,512),[[r["vModelText"],e.deg]])])),Object(r["createElementVNode"])("div",j,[Object(r["createElementVNode"])("div",{class:"gcolor_bar_bg",style:Object(r["normalizeStyle"])("background: "+l.barStyle),onClick:o[5]||(o[5]=(...e)=>l.handlePotBar&&l.handlePotBar(...e))},null,4),Object(r["createElementVNode"])("div",k,[(Object(r["openBlock"])(!0),Object(r["createElementBlock"])(r["Fragment"],null,Object(r["renderList"])(e.colors,(o,t)=>(Object(r["openBlock"])(),Object(r["createElementBlock"])("div",{class:Object(r["normalizeClass"])(["gcolor_bar_pot",{on:e.selectIndex===t}]),key:`${o.pst}_${t}`,style:Object(r["normalizeStyle"])({left:l.getBarPst(o.pst)}),onMousedown:e=>l.sliderPotDown(t),onClick:e=>l.clickGColorPot(t)},null,46,w))),128))])],512)])):Object(r["createCommentVNode"])("",!0)],2),"gradient"===e.currentMode?(Object(r["openBlock"])(),Object(r["createElementBlock"])("div",E,[(Object(r["openBlock"])(!0),Object(r["createElementBlock"])(r["Fragment"],null,Object(r["renderList"])(e.colors,(o,t)=>(Object(r["openBlock"])(),Object(r["createElementBlock"])(r["Fragment"],{key:`${o.pst}_${t}`},[t===e.selectIndex?(Object(r["openBlock"])(),Object(r["createBlock"])(i,{key:0,theme:"light",color:o.color,"sucker-hide":!0,onChangeColor:l.changeColor},null,8,["color","onChangeColor"])):Object(r["createCommentVNode"])("",!0)],64))),128))])):(Object(r["openBlock"])(),Object(r["createElementBlock"])("div",A,[e.color?(Object(r["openBlock"])(),Object(r["createBlock"])(i,{key:0,theme:"light",color:e.color.color,"sucker-hide":!0,onChangeColor:l.changeColor},null,8,["color","onChangeColor"])):Object(r["createCommentVNode"])("",!0)]))])}t("e9f5"),t("ab43"),t("e9c4");var B=t("b4f0"),S=t("5bda"),N=t.n(S);t("7d54");function P(e){let o;if(Array.isArray(e))o=[],e.forEach(e=>{o.push(P(e))});else if("object"===typeof e&&null!==e){o={};for(const t in e)Object.hasOwnProperty.call(e,t)&&(o[t]=P(e[t]))}else o=e;return o}function M(e,o=2){const t=new RegExp(`^\\d+(?:\\.\\d{0,${o}})?`,"g");return e.match(t)?e.match(t):""}function D(e,o,t,l=!1){const n=Object(r["reactive"])({mouseStartPst:{},movePst:{x:0,y:0},pageX:0,pageY:0}),a=document.body;let c=!1;function i(){c=!1,n.mouseStartPst={},n.movePst.x=0,n.movePst.y=0}function d(){a.addEventListener("mousedown",p,l),a.addEventListener("mousemove",u,l),a.addEventListener("mouseup",g,l)}function s(){a.removeEventListener("mousedown",p,l),a.removeEventListener("mousemove",u,l),a.removeEventListener("mouseup",g,l)}function p(o){c=!0,n.mouseStartPst.x=o.pageX,n.mouseStartPst.y=o.pageY,n.dragEleDistPst={},"function"===typeof e&&e(o)}function u(e){c&&(n.movePst.x=e.pageX-n.mouseStartPst.x,n.movePst.y=e.pageY-n.mouseStartPst.y,n.pageX=e.pageX,n.pageY=e.pageY,"function"===typeof o&&o(e))}function g(e){c=!1,b(),"function"===typeof t&&t(e)}function b(){s()}function f(){d()}return{...Object(r["toRefs"])(n),clearDraggble:b,enableDraggle:f,resetDraggle:i}}var z=t("ea3b"),I=t.n(z),$=(t("9a84"),{name:"ColorPickerPanel",components:{ColorPicker:B["a"],Slider:I.a},props:{type:{type:String,default:"linear"},disabledColorDeg:{type:Boolean,default:!1},pDeg:{type:Number,default:90},pColor:{type:Object,default:null},pColors:{type:Array,default:null},showClose:{type:Boolean,default:!0},titleConfig:{type:Object,default(){return{text:"颜色选择器",style:{}}}}},emits:["change","close"],setup(e,{emit:o}){const{type:t,pColors:l,pDeg:n,pColor:a}=Object(r["toRefs"])(e),c=Object(r["reactive"])({refColorBar:null,color:a.value||null,deg:n.value,colors:l.value||null,selectIndex:0,startMovePst:0,currentMode:t.value,shouldEmitOnBarStyleChange:!1,lastEmittedStyle:"",isEmitting:!1}),i=Object(r["computed"])(()=>{if(!c.colors)return"";const e=P(c.colors).sort((e,o)=>e.pst-o.pst).map(e=>`${e.color} ${M(String(e.pst)||0,5)}%`);return`linear-gradient(${c.deg}deg, ${e.join(",")});`}),{movePst:d,enableDraggle:s,resetDraggle:p}=D(x,C,O);function u(){if(g(),"gradient"===c.currentMode){c.colors&&0!==c.colors.length||(c.colors=[{color:"rgba(255, 255, 255, 1)",hex:"#ffffff",rgba:{r:255,g:255,b:255,a:1},pst:0},{color:"rgba(0, 0, 0, 1)",hex:"#000000",rgba:{r:0,g:0,b:0,a:1},pst:100}]);const e=P(c.colors).sort((e,o)=>e.pst-o.pst);c.selectIndex=c.colors.findIndex(o=>o.pst===e[0].pst)}else{const e=null!==a.value&&void 0!==a.value;c.color||(c.color={hex:"#000000",rgba:{r:0,g:0,b:0,a:1},color:"rgba(0,0,0,1)"}),e&&j({color:P(c.color)})}}function g(){"gradient"===c.currentMode&&window.addEventListener("keyup",f)}function b(){"gradient"===c.currentMode&&window.removeEventListener("keyup",f)}function f(e){[8,46].includes(e.keyCode)&&m()}function m(){2!==c.colors.length&&(c.colors.splice(c.selectIndex,1),u())}function h(e){const o=c.refColorBar.getBoundingClientRect(),t=o.left,r=e.pageX-t,l=P(c.colors).sort((e,o)=>e.pst-o.pst).map(e=>e.hex),n=new N.a(0,o.width,l),a=n.getColor(r).toHexString(),i=n.getColor(r).toRGBAString(),d=100*r/o.width;c.colors.push({color:i,hex:a,pst:d}),c.selectIndex=c.colors.length-1,c.shouldEmitOnBarStyleChange=!0}function v(e){w(e),s()}function x(){c.startMovePst=c.colors[c.selectIndex].pst}function O(){p()}function C(){var e;const o=null===(e=c.refColorBar)||void 0===e?void 0:e.getBoundingClientRect().width;let t=(c.startMovePst*o/100+d.value.x)/o;t>1?t=1:t<0&&(t=0),c.colors[c.selectIndex].pst=Math.round(100*t),c.shouldEmitOnBarStyleChange=!0}function y(e){return`calc(${e}% - 8px)`}function _(e){const o=e.rgba,t=e.hex;if("linear"===c.currentMode){const e=`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`;c.color={rgba:o,hex:t,color:e},j({color:P(c.color)})}else c.shouldEmitOnBarStyleChange=!0,k(e)}function j({style:e,colors:t=P(c.colors),color:r=P(c.color),deg:l=c.deg}){c.isEmitting=!0,o("change",{style:e,colors:t,color:r,deg:l,mode:c.currentMode}),setTimeout(()=>{c.isEmitting=!1},0)}function k(e){const o=e.rgba,t={...c.colors[c.selectIndex],color:`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`,hex:e.hex,rgba:e.rgba};c.colors.splice(c.selectIndex,1,t)}function w(e){c.selectIndex!==e&&(c.selectIndex=e)}function E(){o("close")}function A(e){c.currentMode!==e&&(b(),c.currentMode=e,"gradient"===e?(c.colors&&0!==c.colors.length||(c.colors=[{color:"rgba(255, 255, 255, 1)",hex:"#ffffff",rgba:{r:255,g:255,b:255,a:1},pst:0},{color:"rgba(0, 0, 0, 1)",hex:"#000000",rgba:{r:0,g:0,b:0,a:1},pst:100}]),c.selectIndex=0):c.color||(c.color={hex:"#000000",rgba:{r:0,g:0,b:0,a:1},color:"rgba(0,0,0,1)"}),g())}return Object(r["onUnmounted"])(()=>{b()}),Object(r["onMounted"])(()=>{u()}),Object(r["watch"])(i,e=>{"linear"!==c.currentMode&&c.shouldEmitOnBarStyleChange&&e!==c.lastEmittedStyle&&(c.lastEmittedStyle=e,j({style:e}))}),Object(r["watch"])(a,e=>{c.color=P(e)},{deep:!0}),Object(r["watch"])(l,(e,o)=>{e&&(c.isEmitting||o&&JSON.stringify(e)===JSON.stringify(o)||(c.selectIndex>=e.length&&(c.selectIndex=e.length-1),c.colors=P(e)))},{deep:!0}),Object(r["watch"])(()=>c.deg,(e,o)=>{void 0!==o&&e!==o&&"gradient"===c.currentMode&&(c.shouldEmitOnBarStyleChange=!0)}),{...Object(r["toRefs"])(c),changeColor:_,getBarPst:y,barStyle:i,clickGColorPot:w,sliderPotDown:v,handlePotBar:h,handleClose:E,switchMode:A}}}),L=(t("8654"),t("6b0d")),Y=t.n(L);const U=Y()($,[["render",V],["__scopeId","data-v-69559542"]]);var R=U,G={name:"ColorPickerGradient",components:{ColorPickerPanel:R},props:{modelValue:{type:String,default:""},type:{type:String,default:"linear",validator:e=>["linear","gradient"].includes(e)},disabled:{type:Boolean,default:!1},showAlpha:{type:Boolean,default:!0},disabledColorDeg:{type:Boolean,default:!1},colorFormat:{type:String,default:"rgba"},size:{type:String,default:"default"},titleConfig:{type:Object,default(){return{text:"颜色选择器",style:{},show:!0}}}},emits:["update:modelValue","change","active-change"],setup(e,{emit:o}){const t=Object(r["ref"])(null),l=Object(r["ref"])(null),n=Object(r["ref"])(!1),a=Object(r["ref"])(!1),c=Object(r["ref"])(e.modelValue&&"linear"===e.type?g(e.modelValue):void 0),i=Object(r["ref"])("gradient"===e.type?b(e.modelValue):void 0),d=Object(r["ref"])("gradient"===e.type?f(e.modelValue):90),s=Object(r["ref"])(e.type),p=Object(r["ref"])({}),u=Object(r["computed"])(()=>e.modelValue?(e.type,{background:e.modelValue}):{});function g(e){if(!e)return{hex:"#000000",rgba:{r:0,g:0,b:0,a:1},color:"rgba(0,0,0,1)"};const o=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(o){const e=parseInt(o[1]),t=parseInt(o[2]),r=parseInt(o[3]),l=o[4]?parseFloat(o[4]):1,n=m(e,t,r);return{hex:n,rgba:{r:e,g:t,b:r,a:l},color:`rgba(${e}, ${t}, ${r}, ${l})`}}if(e.startsWith("#")){const o=h(e);return{hex:e,rgba:o,color:`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`}}return{hex:"#000000",rgba:{r:0,g:0,b:0,a:1},color:"rgba(0,0,0,1)"}}function b(e){if(!e||!e.includes("linear-gradient"))return[{color:"rgba(255, 255, 255, 1)",hex:"#ffffff",rgba:{r:255,g:255,b:255,a:1},pst:0},{color:"rgba(0, 0, 0, 1)",hex:"#000000",rgba:{r:0,g:0,b:0,a:1},pst:100}];const o=[],t=e.replace(/linear-gradient\([^,]+,\s*/,"").replace(/\)$/,""),r=/(rgba?\([^)]+\)|#[0-9a-fA-F]+)\s+([\d.]+)%/g;let l;while(null!==(l=r.exec(t))){const e=l[1].trim(),t=parseFloat(l[2]),r=g(e);o.push({...r,pst:t})}return o.length>=2?o:[{color:"rgba(255, 255, 255, 1)",hex:"#ffffff",rgba:{r:255,g:255,b:255,a:1},pst:0},{color:"rgba(0, 0, 0, 1)",hex:"#000000",rgba:{r:0,g:0,b:0,a:1},pst:100}]}function f(e){if(!e||!e.includes("linear-gradient"))return 90;const o=e.match(/linear-gradient\((\d+)deg/);return o?parseInt(o[1]):90}function m(e,o,t){return"#"+[e,o,t].map(e=>{const o=e.toString(16);return 1===o.length?"0"+o:o}).join("")}function h(e){const o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return o?{r:parseInt(o[1],16),g:parseInt(o[2],16),b:parseInt(o[3],16),a:1}:{r:0,g:0,b:0,a:1}}function v(){e.disabled||(n.value=!n.value,n.value&&Object(r["nextTick"])(()=>{x()}))}function x(){if(!t.value||!l.value)return;const e=t.value.getBoundingClientRect(),o=l.value,r=o.offsetHeight,n=window.innerHeight;let a=e.bottom+8;a+r>n&&(a=e.top-r-8),p.value={position:"fixed",left:e.left+"px",top:a+"px",zIndex:2e3}}function O(){n.value=!1}function C({style:e,colors:t,color:r,deg:l,mode:n}){let p="";n&&(s.value=n),e?(p=e.replace(/;$/,""),i.value=t,d.value=l):r&&(p=r.color,c.value=r),a.value=!0,o("update:modelValue",p),o("change",p),o("active-change",p),setTimeout(()=>{a.value=!1},0)}function y(e){if(!n.value)return;const o=t.value,r=l.value;o&&!o.contains(e.target)&&r&&!r.contains(e.target)&&O()}function _(){n.value&&x()}return Object(r["watch"])(()=>e.modelValue,o=>{a.value||("linear"===e.type?c.value=g(o):(i.value=b(o),d.value=f(o)))}),Object(r["onMounted"])(()=>{document.addEventListener("click",y),window.addEventListener("scroll",_,!0),window.addEventListener("resize",_)}),Object(r["onUnmounted"])(()=>{document.removeEventListener("click",y),window.removeEventListener("scroll",_,!0),window.removeEventListener("resize",_)}),{triggerRef:t,dropdownRef:l,showPicker:n,currentColorObj:c,currentColorsArray:i,currentDeg:d,currentMode:s,triggerStyle:u,dropdownStyle:p,togglePicker:v,closePicker:O,handleColorChange:C}}};t("bec9");const K=Y()(G,[["render",x],["__scopeId","data-v-0d66245f"]]);var X=K,F={name:"App",components:{ColorPickerGradient:X},setup(){const e=Object(r["reactive"])({currentColor:"",currentColor2:"rgba(25, 77, 51, 1)",currentColor3:"linear-gradient(90deg, rgba(64, 158, 255, 1) 0%, rgba(103, 194, 58, 1) 100%)",currentColor4:""}),o=Object(r["computed"])(()=>e.currentColor&&e.currentColor.startsWith("linear-gradient"));function t(o){console.log("颜色变化:",o),e.currentColor=o}function l(o){console.log("颜色变化2:",o),e.currentColor2=o}function n(o){console.log("颜色变化3:",o),e.currentColor3=o}function a(o){console.log("颜色变化4:",o),e.currentColor4=o}return{...Object(r["toRefs"])(e),isGradient:o,handleColorChange:t,handleColorChange2:l,handleColorChange3:n,handleColorChange4:a}}};t("0b04");const J=Y()(F,[["render",m]]);var T=J;Object(r["createApp"])(T).mount("#app")},"77cf":function(e,o,t){var r=t("24fb"),l=t("b7d1");o=r(!1),o.i(l),o.push([e.i,'.color_picker_panel[data-v-69559542]{box-shadow:0 0 16px 0 rgba(0,0,0,.16);border-radius:4px;background:#f7f8f9;padding:15px 10px}.color_picker_panel[data-v-69559542]  .hu-color-picker{box-shadow:none;border-radius:0;background:#f7f8f9;padding:0}.color_picker_panel .gcolor_deg[data-v-69559542]{display:block;display:flex;align-items:center}.color_picker_panel .gcolor_deg .gcolor_deg_span[data-v-69559542]{font-size:12px;margin-right:10px}.color_picker_panel .gcolor_deg .number_input[data-v-69559542]{min-width:20px;max-width:20px;float:none;order:1;margin-left:10px;margin-top:0;display:flex;align-items:center;text-align:center;color:#606266;font-size:12px;padding:3px;background-color:#fff;border:1px solid #dcdfe6;border-radius:4px}.color_picker_panel .gcolor_deg .number_input[data-v-69559542]:focus{border-color:#409eff;outline:0}.color_picker_panel .gcolor_deg[data-v-69559542]  .el-input-number__decrease,.color_picker_panel .gcolor_deg[data-v-69559542]  .el-input-number__increase{display:none}.color_picker_panel .gcolor_deg[data-v-69559542]  .el-input--mini .el-input__inner{padding:0;width:100%!important;height:22px;line-height:22px}.color_picker_panel .gcolor_deg[data-v-69559542]  .el-slider{display:flex;flex:1}.color_picker_panel .gcolor_deg[data-v-69559542]  .el-slider__input{min-width:2em;max-width:2em;float:none;order:1;margin-left:10px;margin-top:0;display:flex;align-items:center}.color_picker_panel .gcolor_deg[data-v-69559542]  .el-slider__runway.show-input{margin-right:0;flex:1;order:0;height:3px}.color_picker_panel .gcolor_deg[data-v-69559542]  .el-slider__button{width:13px;height:13px;border-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.4)}.color_picker_panel .gcolor_deg[data-v-69559542]  .el-slider__bar{height:3px}.color_picker_panel .gcolor_deg[data-v-69559542]  .el-slider__button-wrapper{top:-17px}.color_picker_panel .color_hd[data-v-69559542]{margin-bottom:15px}.color_picker_panel .color_hd_0[data-v-69559542]{margin-bottom:0}.color_picker_panel .mode_switch[data-v-69559542]{display:flex;gap:8px;margin:10px 0;padding:4px;background:#fff;border-radius:4px}.color_picker_panel .mode_switch .mode_btn[data-v-69559542]{flex:1;padding:6px 12px;border:none;background:transparent;color:#606266;font-size:13px;cursor:pointer;border-radius:3px;transition:all .2s}.color_picker_panel .mode_switch .mode_btn[data-v-69559542]:hover{background:#f5f7fa}.color_picker_panel .mode_switch .mode_btn.active[data-v-69559542]{background:#409eff;color:#fff}.color_picker_panel .title[data-v-69559542]{font-size:16px;display:flex;justify-content:space-between}.color_picker_panel .title .close_box[data-v-69559542]{speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;color:#909399;width:26px;height:100%;font-size:21px;cursor:pointer}.color_picker_panel .gcolor[data-v-69559542]{position:relative;margin:10px 0 20px}.color_picker_panel .gcolor_bar[data-v-69559542]{position:relative;margin-top:3px;height:16px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQoU2M8c/X2fwYkYKylgsxlYKSDgv///6O44ey1O6huoL0CAJgaKeXe+C99AAAAAElFTkSuQmCC") repeat;border-radius:2px}.color_picker_panel .gcolor_bar_bg[data-v-69559542]{position:absolute;left:0;right:0;top:0;bottom:0}.color_picker_panel .gcolor_bar_pot_box[data-v-69559542]{position:absolute;left:8px;top:0;bottom:0;z-index:1;width:calc(100% - 16px);pointer-events:none}.color_picker_panel .gcolor_bar_pot[data-v-69559542]{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);height:16px;width:12px;cursor:pointer;border:2px solid #fff}.color_picker_panel .gcolor_bar_pot.on[data-v-69559542]{z-index:2}.color_picker_panel .gcolor_bar_pot.on[data-v-69559542]:before{visibility:visible}.color_picker_panel .gcolor_bar_pot[data-v-69559542]:after{content:"";position:absolute;left:-3px;right:-3px;top:-3px;bottom:-3px;border:1px solid #999;border-radius:3px}.color_picker_panel .gcolor_bar_pot[data-v-69559542]:before{content:"";position:absolute;left:-4px;right:-4px;top:-4px;bottom:-4px;border:2px solid var(--hoverColor);visibility:hidden;z-index:1;border-radius:3px}',""]),e.exports=o},8157:function(e,o,t){var r=t("24fb");o=r(!1),o.push([e.i,'.color-picker-gradient[data-v-0d66245f],.color-trigger[data-v-0d66245f]{display:inline-block;position:relative}.color-trigger[data-v-0d66245f]{box-sizing:border-box;width:40px;height:40px;padding:4px;border:1px solid #dcdfe6;border-radius:4px;font-size:0;cursor:pointer}.color-trigger[data-v-0d66245f]:hover{border-color:#409eff}.color-trigger.is-disabled[data-v-0d66245f]{cursor:not-allowed;opacity:.6}.color-trigger.is-disabled[data-v-0d66245f]:hover{border-color:#dcdfe6}.color-trigger-inner[data-v-0d66245f]{display:inline-block;width:100%;height:100%;border-radius:2px;position:relative;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQoU2M8c/X2fwYkYKylgsxlYKSDgv///6O44ey1O6huoL0CAJgaKeXe+C99AAAAAElFTkSuQmCC") repeat}.color-trigger-empty[data-v-0d66245f]{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#fff}.color-trigger-empty-icon[data-v-0d66245f]{font-size:20px;color:#909399;font-weight:700;transform:rotate(45deg)}.color-picker-dropdown[data-v-0d66245f]{position:fixed;width:218px;animation:fadeIn-0d66245f .2s ease}@keyframes fadeIn-0d66245f{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}',""]),e.exports=o},8654:function(e,o,t){"use strict";t("32f3")},b2e8:function(e,o,t){var r=t("8157");r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);var l=t("499e").default;l("e63801b6",r,!0,{sourceMap:!1,shadowMode:!1})},bec9:function(e,o,t){"use strict";t("b2e8")},f322:function(e,o,t){var r=t("24fb");o=r(!1),o.push([e.i,'#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;padding:40px;max-width:1200px;margin:0 auto}#app h1{font-size:32px;margin-bottom:40px;color:#303133}#app h2{font-size:18px;margin-bottom:16px;color:#606266;font-weight:500}.demo-section{margin-bottom:40px;padding:24px;background:#fff;border-radius:8px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.demo-row{gap:20px;flex-wrap:wrap}.color-preview,.demo-row{display:flex;align-items:center}.color-preview{flex:1;min-width:300px;height:120px;border-radius:4px;border:1px solid #dcdfe6;justify-content:center;position:relative;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQoU2M8c/X2fwYkYKylgsxlYKSDgv///6O44ey1O6huoL0CAJgaKeXe+C99AAAAAElFTkSuQmCC") repeat}.color-value{background:hsla(0,0%,100%,.95);padding:8px 16px;border-radius:4px;font-family:Courier New,monospace;font-size:13px;color:#303133;box-shadow:0 2px 8px rgba(0,0,0,.15);max-width:90%;word-break:break-all;text-align:center}.color-value.gradient-value{font-size:11px}',""]),e.exports=o}});
//# sourceMappingURL=app.face5d0f.js.map