epic-designer-gold 1.0.30 → 1.0.32

package/dist/index-BB9rZNCd.cjs

@@ -1,181 +0,0 @@
-"use strict";const B=require("./_commonjsHelpers-DwTZ_eVU.cjs"),V=require("./_vue_commonjs-external-BbihI59z.cjs"),b=require("./index-4PPmJYKt.cjs"),$t=require("./index-jx5A2kt8.cjs"),De=require("./index-DWCSzZfR.cjs"),_e=require("./index-BVUz9lFN.cjs"),Ct=require("./fade-in-scale-up.cssr-C_UMnGtI.cjs");function Pt(e,o){for(var r=0;r<o.length;r++){const t=o[r];if(typeof t!="string"&&!Array.isArray(t)){for(const a in t)if(a!=="default"&&!(a in e)){const l=Object.getOwnPropertyDescriptor(t,a);l&&Object.defineProperty(e,a,l.get?l:{enumerable:!0,get:()=>t[a]})}}}return Object.freeze(Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}))}var Je={},Qe={},We={},Ve={},ue={};Object.defineProperty(ue,"__esModule",{value:!0});ue.self=et;const Ut=b.common,Rt=b.useTheme,Mt=_e.styles,At=De.styles;function et(e){const{fontSize:o,boxShadow2:r,popoverColor:t,textColor2:a,borderRadius:l,borderColor:i,heightSmall:s,heightMedium:f,heightLarge:x,fontSizeSmall:H,fontSizeMedium:O,fontSizeLarge:E,dividerColor:oe}=e;return{panelFontSize:o,boxShadow:r,color:t,textColor:a,borderRadius:l,border:`1px solid ${i}`,heightSmall:s,heightMedium:f,heightLarge:x,fontSizeSmall:H,fontSizeMedium:O,fontSizeLarge:E,dividerColor:oe}}const Dt=(0,Rt.createTheme)({name:"ColorPicker",common:Ut.commonLight,peers:{Input:Mt.inputLight,Button:At.buttonLight},self:et});ue.default=Dt;Object.defineProperty(Ve,"__esModule",{value:!0});const Vt=De.styles,Ht=_e.styles,zt=b.common,It=ue,qt={name:"ColorPicker",common:zt.commonDark,peers:{Input:Ht.inputDark,Button:Vt.buttonDark},self:It.self};Ve.default=qt;(function(e){var o=B.commonjsGlobal&&B.commonjsGlobal.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(e,"__esModule",{value:!0}),e.colorPickerLight=e.colorPickerDark=void 0;var r=Ve;Object.defineProperty(e,"colorPickerDark",{enumerable:!0,get:function(){return o(r).default}});var t=ue;Object.defineProperty(e,"colorPickerLight",{enumerable:!0,get:function(){return o(t).default}})})(We);var He={},P={};Object.defineProperty(P,"__esModule",{value:!0});P.deriveDefaultValue=Bt;P.getModeFromValue=tt;P.floor=Ot;P.normalizeHue=Et;P.normalizeAlpha=Ft;P.convertColor=Nt;const d=b.require$$1,jt=b._utils;function Bt(e,o){switch(e[0]){case"hex":return o?"#000000FF":"#000000";case"rgb":return o?"rgba(0, 0, 0, 1)":"rgb(0, 0, 0)";case"hsl":return o?"hsla(0, 0%, 0%, 1)":"hsl(0, 0%, 0%)";case"hsv":return o?"hsva(0, 0%, 0%, 1)":"hsv(0, 0%, 0%)"}return process.env.NODE_ENV!=="production"&&(0,jt.warn)("color-picker","props.modes is invalid."),"#000000"}function tt(e){return e===null?null:/^ *#/.test(e)?"hex":e.includes("rgb")?"rgb":e.includes("hsl")?"hsl":e.includes("hsv")?"hsv":null}function Ot(e){return e.map(o=>Math.floor(o))}function Et(e){return e=Math.round(e),e>=360?359:e<0?0:e}function Ft(e){return e=Math.round(e*100)/100,e>1?1:e<0?0:e}const Tt={rgb:{hex(e){return(0,d.toHexaString)((0,d.rgba)(e))},hsl(e){const[o,r,t,a]=(0,d.rgba)(e);return(0,d.toHslaString)([...(0,d.rgb2hsl)(o,r,t),a])},hsv(e){const[o,r,t,a]=(0,d.rgba)(e);return(0,d.toHsvaString)([...(0,d.rgb2hsv)(o,r,t),a])}},hex:{rgb(e){return(0,d.toRgbaString)((0,d.rgba)(e))},hsl(e){const[o,r,t,a]=(0,d.rgba)(e);return(0,d.toHslaString)([...(0,d.rgb2hsl)(o,r,t),a])},hsv(e){const[o,r,t,a]=(0,d.rgba)(e);return(0,d.toHsvaString)([...(0,d.rgb2hsv)(o,r,t),a])}},hsl:{hex(e){const[o,r,t,a]=(0,d.hsla)(e);return(0,d.toHexaString)([...(0,d.hsl2rgb)(o,r,t),a])},rgb(e){const[o,r,t,a]=(0,d.hsla)(e);return(0,d.toRgbaString)([...(0,d.hsl2rgb)(o,r,t),a])},hsv(e){const[o,r,t,a]=(0,d.hsla)(e);return(0,d.toHsvaString)([...(0,d.hsl2hsv)(o,r,t),a])}},hsv:{hex(e){const[o,r,t,a]=(0,d.hsva)(e);return(0,d.toHexaString)([...(0,d.hsv2rgb)(o,r,t),a])},rgb(e){const[o,r,t,a]=(0,d.hsva)(e);return(0,d.toRgbaString)([...(0,d.hsv2rgb)(o,r,t),a])},hsl(e){const[o,r,t,a]=(0,d.hsva)(e);return(0,d.toHslaString)([...(0,d.hsv2hsl)(o,r,t),a])}}};function Nt(e,o,r){return r=r||tt(e),r?r===o?e:Tt[r][o](e):null}Object.defineProperty(He,"__esModule",{value:!0});const N=V.require$$0,fe=b.require$$3,Lt=P,ee="12px",Gt=12,L="6px",Kt=6,Xt="linear-gradient(90deg,red,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red)";He.default=(0,N.defineComponent)({name:"HueSlider",props:{clsPrefix:{type:String,required:!0},hue:{type:Number,required:!0},onUpdateHue:{type:Function,required:!0},onComplete:Function},setup(e){const o=(0,N.ref)(null);function r(l){o.value&&((0,fe.on)("mousemove",document,t),(0,fe.on)("mouseup",document,a),t(l))}function t(l){const{value:i}=o;if(!i)return;const{width:s,left:f}=i.getBoundingClientRect(),x=(0,Lt.normalizeHue)((l.clientX-f-Kt)/(s-Gt)*360);e.onUpdateHue(x)}function a(){var l;(0,fe.off)("mousemove",document,t),(0,fe.off)("mouseup",document,a),(l=e.onComplete)===null||l===void 0||l.call(e)}return{railRef:o,handleMouseDown:r}},render(){const{clsPrefix:e}=this;return(0,N.h)("div",{class:`${e}-color-picker-slider`,style:{height:ee,borderRadius:L}},(0,N.h)("div",{ref:"railRef",style:{boxShadow:"inset 0 0 2px 0 rgba(0, 0, 0, .24)",boxSizing:"border-box",backgroundImage:Xt,height:ee,borderRadius:L,position:"relative"},onMousedown:this.handleMouseDown},(0,N.h)("div",{style:{position:"absolute",left:L,right:L,top:0,bottom:0}},(0,N.h)("div",{class:`${e}-color-picker-handle`,style:{left:`calc((${this.hue}%) / 359 * 100 - ${L})`,borderRadius:L,width:ee,height:ee}},(0,N.h)("div",{class:`${e}-color-picker-handle__fill`,style:{backgroundColor:`hsl(${this.hue}, 100%, 50%)`,borderRadius:L,width:ee,height:ee}})))))}});var ze={};Object.defineProperty(ze,"__esModule",{value:!0});const R=V.require$$0,pe=b.require$$3,Zt=b.require$$1,Yt=P,ae="12px",Jt=12,G="6px";ze.default=(0,R.defineComponent)({name:"AlphaSlider",props:{clsPrefix:{type:String,required:!0},rgba:{type:Array,default:null},alpha:{type:Number,default:0},onUpdateAlpha:{type:Function,required:!0},onComplete:Function},setup(e){const o=(0,R.ref)(null);function r(l){!o.value||!e.rgba||((0,pe.on)("mousemove",document,t),(0,pe.on)("mouseup",document,a),t(l))}function t(l){const{value:i}=o;if(!i)return;const{width:s,left:f}=i.getBoundingClientRect(),x=(l.clientX-f)/(s-Jt);e.onUpdateAlpha((0,Yt.normalizeAlpha)(x))}function a(){var l;(0,pe.off)("mousemove",document,t),(0,pe.off)("mouseup",document,a),(l=e.onComplete)===null||l===void 0||l.call(e)}return{railRef:o,railBackgroundImage:(0,R.computed)(()=>{const{rgba:l}=e;return l?`linear-gradient(to right, rgba(${l[0]}, ${l[1]}, ${l[2]}, 0) 0%, rgba(${l[0]}, ${l[1]}, ${l[2]}, 1) 100%)`:""}),handleMouseDown:r}},render(){const{clsPrefix:e}=this;return(0,R.h)("div",{class:`${e}-color-picker-slider`,ref:"railRef",style:{height:ae,borderRadius:G},onMousedown:this.handleMouseDown},(0,R.h)("div",{style:{borderRadius:G,position:"absolute",left:0,right:0,top:0,bottom:0,overflow:"hidden"}},(0,R.h)("div",{class:`${e}-color-picker-checkboard`}),(0,R.h)("div",{class:`${e}-color-picker-slider__image`,style:{backgroundImage:this.railBackgroundImage}})),this.rgba&&(0,R.h)("div",{style:{position:"absolute",left:G,right:G,top:0,bottom:0}},(0,R.h)("div",{class:`${e}-color-picker-handle`,style:{left:`calc(${this.alpha*100}% - ${G})`,borderRadius:G,width:ae,height:ae}},(0,R.h)("div",{class:`${e}-color-picker-handle__fill`,style:{backgroundColor:(0,Zt.toRgbaString)(this.rgba),borderRadius:G,width:ae,height:ae}}))))}});var Ie={};Object.defineProperty(Ie,"__esModule",{value:!0});const ge=b.require$$3,j=V.require$$0,ve="12px",be="6px";Ie.default=(0,j.defineComponent)({name:"Pallete",props:{clsPrefix:{type:String,required:!0},rgba:{type:Array,default:null},displayedHue:{type:Number,required:!0},displayedSv:{type:Array,required:!0},onUpdateSV:{type:Function,required:!0},onComplete:Function},setup(e){const o=(0,j.ref)(null);function r(l){o.value&&((0,ge.on)("mousemove",document,t),(0,ge.on)("mouseup",document,a),t(l))}function t(l){const{value:i}=o;if(!i)return;const{width:s,height:f,left:x,bottom:H}=i.getBoundingClientRect(),O=(H-l.clientY)/f,E=(l.clientX-x)/s,oe=100*(E>1?1:E<0?0:E),xe=100*(O>1?1:O<0?0:O);e.onUpdateSV(oe,xe)}function a(){var l;(0,ge.off)("mousemove",document,t),(0,ge.off)("mouseup",document,a),(l=e.onComplete)===null||l===void 0||l.call(e)}return{palleteRef:o,handleColor:(0,j.computed)(()=>{const{rgba:l}=e;return l?`rgb(${l[0]}, ${l[1]}, ${l[2]})`:""}),handleMouseDown:r}},render(){const{clsPrefix:e}=this;return(0,j.h)("div",{class:`${e}-color-picker-pallete`,onMousedown:this.handleMouseDown,ref:"palleteRef"},(0,j.h)("div",{class:`${e}-color-picker-pallete__layer`,style:{backgroundImage:`linear-gradient(90deg, white, hsl(${this.displayedHue}, 100%, 50%))`}}),(0,j.h)("div",{class:`${e}-color-picker-pallete__layer ${e}-color-picker-pallete__layer--shadowed`,style:{backgroundImage:"linear-gradient(180deg, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 100%))"}}),this.rgba&&(0,j.h)("div",{class:`${e}-color-picker-handle`,style:{width:ve,height:ve,borderRadius:be,left:`calc(${this.displayedSv[0]}% - ${be})`,bottom:`calc(${this.displayedSv[1]}% - ${be})`}},(0,j.h)("div",{class:`${e}-color-picker-handle__fill`,style:{backgroundColor:this.handleColor,borderRadius:be,width:ve,height:ve}})))}});var qe={},je={},re={};Object.defineProperty(re,"__esModule",{value:!0});re.colorPickerInjectionKey=void 0;const Qt=b._utils;re.colorPickerInjectionKey=(0,Qt.createInjectionKey)("n-color-picker");Object.defineProperty(je,"__esModule",{value:!0});const ie=V.require$$0,Wt=_e.input,er=re;function tr(e){return/^\d{1,3}\.?\d*$/.test(e.trim())?Math.max(0,Math.min(Number.parseInt(e),255)):!1}function rr(e){return/^\d{1,3}\.?\d*$/.test(e.trim())?Math.max(0,Math.min(Number.parseInt(e),360)):!1}function or(e){return/^\d{1,3}\.?\d*$/.test(e.trim())?Math.max(0,Math.min(Number.parseInt(e),100)):!1}function nr(e){const o=e.trim();return/^#[0-9a-fA-F]+$/.test(o)?[4,5,7,9].includes(o.length):!1}function lr(e){return/^\d{1,3}\.?\d*%$/.test(e.trim())?Math.max(0,Math.min(Number.parseInt(e)/100,100)):!1}const ar={paddingSmall:"0 4px"};je.default=(0,ie.defineComponent)({name:"ColorInputUnit",props:{label:{type:String,required:!0},value:{type:[Number,String],default:null},showAlpha:Boolean,onUpdateValue:{type:Function,required:!0}},setup(e){const o=(0,ie.ref)(""),{themeRef:r}=(0,ie.inject)(er.colorPickerInjectionKey,null);(0,ie.watchEffect)(()=>{o.value=t()});function t(){const{value:i}=e;if(i===null)return"";const{label:s}=e;return s==="HEX"?i:s==="A"?`${Math.floor(i*100)}%`:String(Math.floor(i))}function a(i){o.value=i}function l(i){let s,f;switch(e.label){case"HEX":f=nr(i),f&&e.onUpdateValue(i),o.value=t();break;case"H":s=rr(i),s===!1?o.value=t():e.onUpdateValue(s);break;case"S":case"L":case"V":s=or(i),s===!1?o.value=t():e.onUpdateValue(s);break;case"A":s=lr(i),s===!1?o.value=t():e.onUpdateValue(s);break;case"R":case"G":case"B":s=tr(i),s===!1?o.value=t():e.onUpdateValue(s);break}}return{mergedTheme:r,inputValue:o,handleInputChange:l,handleInputUpdateValue:a}},render(){const{mergedTheme:e}=this;return(0,ie.h)(Wt.NInput,{size:"small",placeholder:this.label,theme:e.peers.Input,themeOverrides:e.peerOverrides.Input,builtinThemeOverrides:ar,value:this.inputValue,onUpdateValue:this.handleInputUpdateValue,onChange:this.handleInputChange,style:this.label==="A"?"flex-grow: 1.25;":""})}});var ir=B.commonjsGlobal&&B.commonjsGlobal.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(qe,"__esModule",{value:!0});const M=b.require$$1,te=V.require$$0,sr=_e.input,Xe=ir(je);qe.default=(0,te.defineComponent)({name:"ColorInput",props:{clsPrefix:{type:String,required:!0},mode:{type:String,required:!0},modes:{type:Array,required:!0},showAlpha:{type:Boolean,required:!0},value:{type:String,default:null},valueArr:{type:Array,default:null},onUpdateValue:{type:Function,required:!0},onUpdateMode:{type:Function,required:!0}},setup(e){return{handleUnitUpdateValue(o,r){const{showAlpha:t}=e;if(e.mode==="hex"){e.onUpdateValue((t?M.toHexaString:M.toHexString)(r));return}let a;switch(e.valueArr===null?a=[0,0,0,0]:a=Array.from(e.valueArr),e.mode){case"hsv":a[o]=r,e.onUpdateValue((t?M.toHsvaString:M.toHsvString)(a));break;case"rgb":a[o]=r,e.onUpdateValue((t?M.toRgbaString:M.toRgbString)(a));break;case"hsl":a[o]=r,e.onUpdateValue((t?M.toHslaString:M.toHslString)(a));break}}}},render(){const{clsPrefix:e,modes:o}=this;return(0,te.h)("div",{class:`${e}-color-picker-input`},(0,te.h)("div",{class:`${e}-color-picker-input__mode`,onClick:this.onUpdateMode,style:{cursor:o.length===1?"":"pointer"}},this.mode.toUpperCase()+(this.showAlpha?"A":"")),(0,te.h)(sr.NInputGroup,null,{default:()=>{const{mode:r,valueArr:t,showAlpha:a}=this;if(r==="hex"){let l=null;try{l=t===null?null:(a?M.toHexaString:M.toHexString)(t)}catch{}return(0,te.h)(Xe.default,{label:"HEX",showAlpha:a,value:l,onUpdateValue:i=>{this.handleUnitUpdateValue(0,i)}})}return(r+(a?"a":"")).split("").map((l,i)=>(0,te.h)(Xe.default,{label:l.toUpperCase(),value:t===null?null:t[i],onUpdateValue:s=>{this.handleUnitUpdateValue(i,s)}}))}}))}});var Be={};Object.defineProperty(Be,"__esModule",{value:!0});const ur=b.require$$1,K=V.require$$0,cr=re;Be.default=(0,K.defineComponent)({name:"ColorPickerTrigger",props:{clsPrefix:{type:String,required:!0},value:{type:String,default:null},hsla:{type:Array,default:null},disabled:Boolean,onClick:Function},setup(e){const{colorPickerSlots:o,renderLabelRef:r}=(0,K.inject)(cr.colorPickerInjectionKey,null);return()=>{const{hsla:t,value:a,clsPrefix:l,onClick:i,disabled:s}=e,f=o.label||r.value;return(0,K.h)("div",{class:[`${l}-color-picker-trigger`,s&&`${l}-color-picker-trigger--disabled`],onClick:s?void 0:i},(0,K.h)("div",{class:`${l}-color-picker-trigger__fill`},(0,K.h)("div",{class:`${l}-color-picker-checkboard`}),(0,K.h)("div",{style:{position:"absolute",left:0,right:0,top:0,bottom:0,backgroundColor:t?(0,ur.toHslaString)(t):""}}),a&&t?(0,K.h)("div",{class:`${l}-color-picker-trigger__value`,style:{color:t[2]>50||t[3]<.5?"black":"white"}},f?f(a):a):null))}}});var Oe={};Object.defineProperty(Oe,"__esModule",{value:!0});const se=V.require$$0,Ae=b.require$$1,dr=b._utils,Ze=P;function hr(e,o){if(o==="hsv"){const[r,t,a,l]=(0,Ae.hsva)(e);return(0,Ae.toRgbaString)([...(0,Ae.hsv2rgb)(r,t,a),l])}return e}function fr(e){const o=document.createElement("canvas").getContext("2d");return o?(o.fillStyle=e,o.fillStyle):"#000000"}Oe.default=(0,se.defineComponent)({name:"ColorPickerSwatches",props:{clsPrefix:{type:String,required:!0},mode:{type:String,required:!0},swatches:{type:Array,required:!0},onUpdateColor:{type:Function,required:!0}},setup(e){const o=(0,se.computed)(()=>e.swatches.map(l=>{const i=(0,Ze.getModeFromValue)(l);return{value:l,mode:i,legalValue:hr(l,i)}}));function r(l){const{mode:i}=e;let{value:s,mode:f}=l;return f||(f="hex",/^[a-zA-Z]+$/.test(s)?s=fr(s):((0,dr.warn)("color-picker",`color ${s} in swatches is invalid.`),s="#000000")),f===i?s:(0,Ze.convertColor)(s,i,f)}function t(l){e.onUpdateColor(r(l))}function a(l,i){l.key==="Enter"&&t(i)}return{parsedSwatchesRef:o,handleSwatchSelect:t,handleSwatchKeyDown:a}},render(){const{clsPrefix:e}=this;return(0,se.h)("div",{class:`${e}-color-picker-swatches`},this.parsedSwatchesRef.map(o=>(0,se.h)("div",{class:`${e}-color-picker-swatch`,tabindex:0,onClick:()=>{this.handleSwatchSelect(o)},onKeydown:r=>{this.handleSwatchKeyDown(r,o)}},(0,se.h)("div",{class:`${e}-color-picker-swatch__fill`,style:{background:o.legalValue}}))))}});var Ee={};Object.defineProperty(Ee,"__esModule",{value:!0});const me=V.require$$0,Ye=P;Ee.default=(0,me.defineComponent)({name:"ColorPreview",props:{clsPrefix:{type:String,required:!0},mode:{type:String,required:!0},color:{type:String,default:null,validator:e=>{const o=(0,Ye.getModeFromValue)(e);return!!(!e||o&&o!=="hsv")}},onUpdateColor:{type:Function,required:!0}},setup(e){function o(r){var t;const a=r.target.value;(t=e.onUpdateColor)===null||t===void 0||t.call(e,(0,Ye.convertColor)(a.toUpperCase(),e.mode,"hex")),r.stopPropagation()}return{handleChange:o}},render(){const{clsPrefix:e}=this;return(0,me.h)("div",{class:`${e}-color-picker-preview__preview`},(0,me.h)("span",{class:`${e}-color-picker-preview__fill`,style:{background:this.color||"#000000"}}),(0,me.h)("input",{class:`${e}-color-picker-preview__input`,type:"color",value:this.color,onChange:this.handleChange}))}});var Fe={};Object.defineProperty(Fe,"__esModule",{value:!0});const u=b.cssr,pr=Ct.fadeInScaleUp_cssr;Fe.default=(0,u.c)([(0,u.cB)("color-picker",`
- display: inline-block;
- box-sizing: border-box;
- height: var(--n-height);
- font-size: var(--n-font-size);
- width: 100%;
- position: relative;
- `),(0,u.cB)("color-picker-panel",`
- margin: 4px 0;
- width: 240px;
- font-size: var(--n-panel-font-size);
- color: var(--n-text-color);
- background-color: var(--n-color);
- transition:
- box-shadow .3s var(--n-bezier),
- color .3s var(--n-bezier),
- background-color .3s var(--n-bezier);
- border-radius: var(--n-border-radius);
- box-shadow: var(--n-box-shadow);
- `,[(0,pr.fadeInScaleUpTransition)(),(0,u.cB)("input",`
- text-align: center;
- `)]),(0,u.cB)("color-picker-checkboard",`
- background: white; 
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- `,[(0,u.c)("&::after",`
- background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
- background-size: 12px 12px;
- background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
- background-repeat: repeat;
- content: "";
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- `)]),(0,u.cB)("color-picker-slider",`
- margin-bottom: 8px;
- position: relative;
- box-sizing: border-box;
- `,[(0,u.cE)("image",`
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- `),(0,u.c)("&::after",`
- content: "";
- position: absolute;
- border-radius: inherit;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
- pointer-events: none;
- `)]),(0,u.cB)("color-picker-handle",`
- z-index: 1;
- box-shadow: 0 0 2px 0 rgba(0, 0, 0, .45);
- position: absolute;
- background-color: white;
- overflow: hidden;
- `,[(0,u.cE)("fill",`
- box-sizing: border-box;
- border: 2px solid white;
- `)]),(0,u.cB)("color-picker-pallete",`
- height: 180px;
- position: relative;
- margin-bottom: 8px;
- cursor: crosshair;
- `,[(0,u.cE)("layer",`
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- `,[(0,u.cM)("shadowed",`
- box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
- `)])]),(0,u.cB)("color-picker-preview",`
- display: flex;
- `,[(0,u.cE)("sliders",`
- flex: 1 0 auto;
- `),(0,u.cE)("preview",`
- position: relative;
- height: 30px;
- width: 30px;
- margin: 0 0 8px 6px;
- border-radius: 50%;
- box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
- overflow: hidden;
- `),(0,u.cE)("fill",`
- display: block;
- width: 30px;
- height: 30px;
- `),(0,u.cE)("input",`
- position: absolute;
- top: 0;
- left: 0;
- width: 30px;
- height: 30px;
- opacity: 0;
- z-index: 1;
- `)]),(0,u.cB)("color-picker-input",`
- display: flex;
- align-items: center;
- `,[(0,u.cB)("input",`
- flex-grow: 1;
- flex-basis: 0;
- `),(0,u.cE)("mode",`
- width: 72px;
- text-align: center;
- `)]),(0,u.cB)("color-picker-control",`
- padding: 12px;
- `),(0,u.cB)("color-picker-action",`
- display: flex;
- margin-top: -4px;
- border-top: 1px solid var(--n-divider-color);
- padding: 8px 12px;
- justify-content: flex-end;
- `,[(0,u.cB)("button","margin-left: 8px;")]),(0,u.cB)("color-picker-trigger",`
- border: var(--n-border);
- height: 100%;
- box-sizing: border-box;
- border-radius: var(--n-border-radius);
- transition: border-color .3s var(--n-bezier);
- cursor: pointer;
- `,[(0,u.cE)("value",`
- white-space: nowrap;
- position: relative;
- `),(0,u.cE)("fill",`
- border-radius: var(--n-border-radius);
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
- left: 4px;
- right: 4px;
- top: 4px;
- bottom: 4px;
- `),(0,u.cM)("disabled","cursor: not-allowed"),(0,u.cB)("color-picker-checkboard",`
- border-radius: var(--n-border-radius);
- `,[(0,u.c)("&::after",`
- --n-block-size: calc((var(--n-height) - 8px) / 3);
- background-size: calc(var(--n-block-size) * 2) calc(var(--n-block-size) * 2);
- background-position: 0 0, 0 var(--n-block-size), var(--n-block-size) calc(-1 * var(--n-block-size)), calc(-1 * var(--n-block-size)) 0px; 
- `)])]),(0,u.cB)("color-picker-swatches",`
- display: grid;
- grid-gap: 8px;
- flex-wrap: wrap;
- position: relative;
- grid-template-columns: repeat(auto-fill, 18px);
- margin-top: 10px;
- `,[(0,u.cB)("color-picker-swatch",`
- width: 18px;
- height: 18px;
- background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
- background-size: 8px 8px;
- background-position: 0px 0, 0px 4px, 4px -4px, -4px 0px;
- background-repeat: repeat;
- `,[(0,u.cE)("fill",`
- position: relative;
- width: 100%;
- height: 100%;
- border-radius: 3px;
- box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
- cursor: pointer;
- `),(0,u.c)("&:focus",`
- outline: none;
- `,[(0,u.cE)("fill",[(0,u.c)("&::after",`
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background: inherit;
- filter: blur(2px);
- content: "";
- `)])])])])]);(function(e){var o=B.commonjsGlobal&&B.commonjsGlobal.__importDefault||function(c){return c&&c.__esModule?c:{default:c}};Object.defineProperty(e,"__esModule",{value:!0}),e.colorPickerProps=void 0;const r=V.require$$0,t=b.require$$1,a=b.require$$2,l=b.require$$1$1,i=$t.require$$2,s=We,f=b._mixins,x=b._utils,H=De.button,O=o(He),E=o(ze),oe=o(Ie),xe=o(qe),rt=o(Be),ke=P,ot=o(Oe),nt=o(Ee),lt=re,at=o(Fe);e.colorPickerProps=Object.assign(Object.assign({},f.useTheme.props),{value:String,show:{type:Boolean,default:void 0},defaultShow:Boolean,defaultValue:String,modes:{type:Array,default:()=>["rgb","hex","hsl"]},placement:{type:String,default:"bottom-start"},to:x.useAdjustedTo.propTo,showAlpha:{type:Boolean,default:!0},showPreview:Boolean,swatches:Array,disabled:{type:Boolean,default:void 0},actions:{type:Array,default:null},internalActions:Array,size:String,renderLabel:Function,onComplete:Function,onConfirm:Function,onClear:Function,"onUpdate:show":[Function,Array],onUpdateShow:[Function,Array],"onUpdate:value":[Function,Array],onUpdateValue:[Function,Array]}),e.default=(0,r.defineComponent)({name:"ColorPicker",props:e.colorPickerProps,setup(c,{slots:X}){const Z=(0,r.ref)(null);let ne=null;const ye=(0,f.useFormItem)(c),{mergedSizeRef:Te,mergedDisabledRef:it}=ye,{localeRef:ce}=(0,f.useLocale)("global"),{mergedClsPrefixRef:Se,namespaceRef:st,inlineThemeDisabled:we}=(0,f.useConfig)(c),$e=(0,f.useTheme)("ColorPicker","-color-picker",at.default,s.colorPickerLight,c,Se);(0,r.provide)(lt.colorPickerInjectionKey,{themeRef:$e,renderLabelRef:(0,r.toRef)(c,"renderLabel"),colorPickerSlots:X});const Ne=(0,r.ref)(c.defaultShow),Le=(0,a.useMergedState)((0,r.toRef)(c,"show"),Ne);function de(n){const{onUpdateShow:h,"onUpdate:show":g}=c;h&&(0,x.call)(h,n),g&&(0,x.call)(g,n),Ne.value=n}const{defaultValue:Ge}=c,Ke=(0,r.ref)(Ge===void 0?(0,ke.deriveDefaultValue)(c.modes,c.showAlpha):Ge),y=(0,a.useMergedState)((0,r.toRef)(c,"value"),Ke),Y=(0,r.ref)([y.value]),A=(0,r.ref)(0),Ce=(0,r.computed)(()=>(0,ke.getModeFromValue)(y.value)),{modes:ut}=c,U=(0,r.ref)((0,ke.getModeFromValue)(y.value)||ut[0]||"rgb");function ct(){const{modes:n}=c,{value:h}=U,g=n.findIndex(v=>v===h);~g?U.value=n[(g+1)%n.length]:U.value="rgb"}let w,$,J,Q,z,I,q,C;const le=(0,r.computed)(()=>{const{value:n}=y;if(!n)return null;switch(Ce.value){case"hsv":return(0,t.hsva)(n);case"hsl":return[w,$,J,C]=(0,t.hsla)(n),[...(0,t.hsl2hsv)(w,$,J),C];case"rgb":case"hex":return[z,I,q,C]=(0,t.rgba)(n),[...(0,t.rgb2hsv)(z,I,q),C]}}),F=(0,r.computed)(()=>{const{value:n}=y;if(!n)return null;switch(Ce.value){case"rgb":case"hex":return(0,t.rgba)(n);case"hsv":return[w,$,Q,C]=(0,t.hsva)(n),[...(0,t.hsv2rgb)(w,$,Q),C];case"hsl":return[w,$,J,C]=(0,t.hsla)(n),[...(0,t.hsl2rgb)(w,$,J),C]}}),Pe=(0,r.computed)(()=>{const{value:n}=y;if(!n)return null;switch(Ce.value){case"hsl":return(0,t.hsla)(n);case"hsv":return[w,$,Q,C]=(0,t.hsva)(n),[...(0,t.hsv2hsl)(w,$,Q),C];case"rgb":case"hex":return[z,I,q,C]=(0,t.rgba)(n),[...(0,t.rgb2hsl)(z,I,q),C]}}),dt=(0,r.computed)(()=>{switch(U.value){case"rgb":case"hex":return F.value;case"hsv":return le.value;case"hsl":return Pe.value}}),he=(0,r.ref)(0),Ue=(0,r.ref)(1),Re=(0,r.ref)([0,0]);function ht(n,h){const{value:g}=le,v=he.value,m=g?g[3]:1;Re.value=[n,h];const{showAlpha:p}=c;switch(U.value){case"hsv":_((p?t.toHsvaString:t.toHsvString)([v,n,h,m]),"cursor");break;case"hsl":_((p?t.toHslaString:t.toHslString)([...(0,t.hsv2hsl)(v,n,h),m]),"cursor");break;case"rgb":_((p?t.toRgbaString:t.toRgbString)([...(0,t.hsv2rgb)(v,n,h),m]),"cursor");break;case"hex":_((p?t.toHexaString:t.toHexString)([...(0,t.hsv2rgb)(v,n,h),m]),"cursor");break}}function ft(n){he.value=n;const{value:h}=le;if(!h)return;const[,g,v,m]=h,{showAlpha:p}=c;switch(U.value){case"hsv":_((p?t.toHsvaString:t.toHsvString)([n,g,v,m]),"cursor");break;case"rgb":_((p?t.toRgbaString:t.toRgbString)([...(0,t.hsv2rgb)(n,g,v),m]),"cursor");break;case"hex":_((p?t.toHexaString:t.toHexString)([...(0,t.hsv2rgb)(n,g,v),m]),"cursor");break;case"hsl":_((p?t.toHslaString:t.toHslString)([...(0,t.hsv2hsl)(n,g,v),m]),"cursor");break}}function pt(n){switch(U.value){case"hsv":[w,$,Q]=le.value,_((0,t.toHsvaString)([w,$,Q,n]),"cursor");break;case"rgb":[z,I,q]=F.value,_((0,t.toRgbaString)([z,I,q,n]),"cursor");break;case"hex":[z,I,q]=F.value,_((0,t.toHexaString)([z,I,q,n]),"cursor");break;case"hsl":[w,$,J]=Pe.value,_((0,t.toHslaString)([w,$,J,n]),"cursor");break}Ue.value=n}function _(n,h){h==="cursor"?ne=n:ne=null;const{nTriggerFormChange:g,nTriggerFormInput:v}=ye,{onUpdateValue:m,"onUpdate:value":p}=c;m&&(0,x.call)(m,n),p&&(0,x.call)(p,n),g(),v(),Ke.value=n}function gt(n){_(n,"input"),(0,r.nextTick)(W)}function W(n=!0){const{value:h}=y;if(h){const{nTriggerFormChange:g,nTriggerFormInput:v}=ye,{onComplete:m}=c;m&&m(h);const{value:p}=Y,{value:S}=A;n&&(p.splice(S+1,p.length,h),A.value=S+1),g(),v()}}function vt(){const{value:n}=A;n-1<0||(_(Y.value[n-1],"input"),W(!1),A.value=n-1)}function bt(){const{value:n}=A;n<0||n+1>=Y.value.length||(_(Y.value[n+1],"input"),W(!1),A.value=n+1)}function mt(){_(null,"input");const{onClear:n}=c;n&&n(),de(!1)}function _t(){const{value:n}=y,{onConfirm:h}=c;h&&h(n),de(!1)}const xt=(0,r.computed)(()=>A.value>=1),kt=(0,r.computed)(()=>{const{value:n}=Y;return n.length>1&&A.value<n.length-1});(0,r.watch)(Le,n=>{n||(Y.value=[y.value],A.value=0)}),(0,r.watchEffect)(()=>{if(!(ne&&ne===y.value)){const{value:n}=le;n&&(he.value=n[0],Ue.value=n[3],Re.value=[n[1],n[2]])}ne=null});const Me=(0,r.computed)(()=>{const{value:n}=Te,{common:{cubicBezierEaseInOut:h},self:{textColor:g,color:v,panelFontSize:m,boxShadow:p,border:S,borderRadius:k,dividerColor:T,[(0,x.createKey)("height",n)]:St,[(0,x.createKey)("fontSize",n)]:wt}}=$e.value;return{"--n-bezier":h,"--n-text-color":g,"--n-color":v,"--n-panel-font-size":m,"--n-font-size":wt,"--n-box-shadow":p,"--n-border":S,"--n-border-radius":k,"--n-height":St,"--n-divider-color":T}}),D=we?(0,f.useThemeClass)("color-picker",(0,r.computed)(()=>Te.value[0]),Me,c):void 0;function yt(){var n;const{value:h}=F,{value:g}=he,{internalActions:v,modes:m,actions:p}=c,{value:S}=$e,{value:k}=Se;return(0,r.h)("div",{class:[`${k}-color-picker-panel`,D==null?void 0:D.themeClass.value],onDragstart:T=>{T.preventDefault()},style:we?void 0:Me.value},(0,r.h)("div",{class:`${k}-color-picker-control`},(0,r.h)(oe.default,{clsPrefix:k,rgba:h,displayedHue:g,displayedSv:Re.value,onUpdateSV:ht,onComplete:W}),(0,r.h)("div",{class:`${k}-color-picker-preview`},(0,r.h)("div",{class:`${k}-color-picker-preview__sliders`},(0,r.h)(O.default,{clsPrefix:k,hue:g,onUpdateHue:ft,onComplete:W}),c.showAlpha?(0,r.h)(E.default,{clsPrefix:k,rgba:h,alpha:Ue.value,onUpdateAlpha:pt,onComplete:W}):null),c.showPreview?(0,r.h)(nt.default,{clsPrefix:k,mode:U.value,color:F.value&&(0,t.toHexString)(F.value),onUpdateColor:T=>{_(T,"input")}}):null),(0,r.h)(xe.default,{clsPrefix:k,showAlpha:c.showAlpha,mode:U.value,modes:m,onUpdateMode:ct,value:y.value,valueArr:dt.value,onUpdateValue:gt}),((n=c.swatches)===null||n===void 0?void 0:n.length)&&(0,r.h)(ot.default,{clsPrefix:k,mode:U.value,swatches:c.swatches,onUpdateColor:T=>{_(T,"input")}})),p!=null&&p.length?(0,r.h)("div",{class:`${k}-color-picker-action`},p.includes("confirm")&&(0,r.h)(H.NButton,{size:"small",onClick:_t,theme:S.peers.Button,themeOverrides:S.peerOverrides.Button},{default:()=>ce.value.confirm}),p.includes("clear")&&(0,r.h)(H.NButton,{size:"small",onClick:mt,disabled:!y.value,theme:S.peers.Button,themeOverrides:S.peerOverrides.Button},{default:()=>ce.value.clear})):null,X.action?(0,r.h)("div",{class:`${k}-color-picker-action`},{default:X.action}):v?(0,r.h)("div",{class:`${k}-color-picker-action`},v.includes("undo")&&(0,r.h)(H.NButton,{size:"small",onClick:vt,disabled:!xt.value,theme:S.peers.Button,themeOverrides:S.peerOverrides.Button},{default:()=>ce.value.undo}),v.includes("redo")&&(0,r.h)(H.NButton,{size:"small",onClick:bt,disabled:!kt.value,theme:S.peers.Button,themeOverrides:S.peerOverrides.Button},{default:()=>ce.value.redo})):null)}return{mergedClsPrefix:Se,namespace:st,selfRef:Z,hsla:Pe,rgba:F,mergedShow:Le,mergedDisabled:it,isMounted:(0,a.useIsMounted)(),adjustedTo:(0,x.useAdjustedTo)(c),mergedValue:y,handleTriggerClick(){de(!0)},handleClickOutside(n){var h;!((h=Z.value)===null||h===void 0)&&h.contains((0,t.getPreciseEventTarget)(n))||de(!1)},renderPanel:yt,cssVars:we?void 0:Me,themeClass:D==null?void 0:D.themeClass,onRender:D==null?void 0:D.onRender}},render(){const{$slots:c,mergedClsPrefix:X,onRender:Z}=this;return Z==null||Z(),(0,r.h)("div",{class:[this.themeClass,`${X}-color-picker`],ref:"selfRef",style:this.cssVars},(0,r.h)(l.VBinder,null,{default:()=>[(0,r.h)(l.VTarget,null,{default:()=>(0,r.h)(rt.default,{clsPrefix:X,value:this.mergedValue,hsla:this.hsla,disabled:this.mergedDisabled,onClick:this.handleTriggerClick},{label:c.label})}),(0,r.h)(l.VFollower,{placement:this.placement,show:this.mergedShow,containerClass:this.namespace,teleportDisabled:this.adjustedTo===x.useAdjustedTo.tdkey,to:this.adjustedTo},{default:()=>(0,r.h)(r.Transition,{name:"fade-in-scale-up-transition",appear:this.isMounted},{default:()=>this.mergedShow?(0,r.withDirectives)(this.renderPanel(),[[i.clickoutside,this.handleClickOutside,void 0,{capture:!0}]]):null})})]}))}})})(Qe);(function(e){var o=B.commonjsGlobal&&B.commonjsGlobal.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.colorPickerProps=e.NColorPicker=void 0;var r=Qe;Object.defineProperty(e,"NColorPicker",{enumerable:!0,get:function(){return o(r).default}}),Object.defineProperty(e,"colorPickerProps",{enumerable:!0,get:function(){return r.colorPickerProps}})})(Je);const gr=Pt({__proto__:null},[Je]);exports.index=gr;