ai-form-designer/dist/index-Dc1r4kvn.cjs

vue3+adv的设计器,可视化开发页面表单

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