vue-devui 1.0.0-beta.10 → 1.0.0-beta.14

package/color-picker/index.umd.js

@@ -0,0 +1 @@
+var qn=Object.defineProperty,Fn=Object.defineProperties;var Pn=Object.getOwnPropertyDescriptors;var le=Object.getOwnPropertySymbols;var Ge=Object.prototype.hasOwnProperty,Xe=Object.prototype.propertyIsEnumerable;var Ue=(T,o,F)=>o in T?qn(T,o,{enumerable:!0,configurable:!0,writable:!0,value:F}):T[o]=F,P=(T,o)=>{for(var F in o||(o={}))Ge.call(o,F)&&Ue(T,F,o[F]);if(le)for(var F of le(o))Xe.call(o,F)&&Ue(T,F,o[F]);return T},I=(T,o)=>Fn(T,Pn(o));var ze=(T,o)=>{var F={};for(var R in T)Ge.call(T,R)&&o.indexOf(R)<0&&(F[R]=T[R]);if(T!=null&&le)for(var R of le(T))o.indexOf(R)<0&&Xe.call(T,R)&&(F[R]=T[R]);return F};(function(T,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(T=typeof globalThis!="undefined"?globalThis:T||self,o(T.index={},T.Vue))})(this,function(T,o){"use strict";function F(t,e,n){var a;const r=(a=t.value)==null?void 0:a.getBoundingClientRect();n.value=r==null?void 0:r.left,e.value=(r==null?void 0:r.top)+window.scrollY+r.height}function R(t,e,n,r){var a,i;((a=e.value)==null?void 0:a.contains(t.target))&&(r.value=!0),!!n.value&&!((i=n.value)==null?void 0:i.contains(t.target))&&(r.value=!r.value)}function te(t){const e=o.ref();return e.value=t(),o.watch(t,n=>{e.value=n}),e}function Ke(t,e){return t.alpha>e?t.hsva.v>e&&t.hsva.s<e?{color:"#000"}:{color:"#fff"}:{color:"#000"}}const Je={modelValue:{type:[Object,String]},mode:{type:String},showAlpha:{type:Boolean,default:!0},dotSize:{type:Number,default:15},swatches:{type:Array},showHistory:{type:Boolean,default:!0}},Ze={colorMap:{type:Object},modelValue:{type:Object},showAlpha:{type:Boolean,default:!0},mode:{type:String}};var jn="",ne=o.defineComponent({name:"DTabs",props:{modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},vertical:{type:Boolean,default:!1},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null}},emits:["update:modelValue","activeTabChange"],setup(t,{emit:e,slots:n}){const r=o.ref(null),a=o.reactive({offsetLeft:0,offsetWidth:0,id:null}),i=o.reactive({data:[],active:t.modelValue,showContent:t.showContent,slots:[]});o.provide("tabs",{state:i});const s=function(u){let g=Promise.resolve(!0);if(typeof t.beforeChange=="function"){const d=t.beforeChange(u);typeof d!="undefined"&&(d.then?g=d:(console.log(d),g=Promise.resolve(d)))}return g},l=function(u,g){!t.reactivable&&t.modelValue===u.id||s(u.id).then(d=>{if(!d)return;const p=i.data.find(m=>m.id===u.id);p&&!p.disabled&&(i.active=u.id,e("update:modelValue",p.id),t.type==="slider"&&g&&r&&(this.offsetLeft=g.getBoundingClientRect().left-this.tabsEle.nativeElement.getBoundingClientRect().left,this.offsetWidth=g.getBoundingClientRect().width),e("activeTabChange",p.id))})},c=[t.type];return t.cssClass&&c.push(t.cssClass),t.vertical&&c.push("devui-nav-stacked"),o.onUpdated(()=>{t.type==="slider"&&setTimeout(()=>{const u=r.value.querySelector("#"+t.modelValue+".active");u&&(a.offsetLeft=u.getBoundingClientRect().left-r.value.getBoundingClientRect().left,a.offsetWidth=u.getBoundingClientRect().width)})}),o.onBeforeMount(()=>{t.type!=="slider"&&t.modelValue===void 0&&i.data.length>0&&l(i.data[0])}),o.onMounted(()=>{t.type==="slider"&&t.modelValue===void 0&&i.data.length>0&&i.data[0]&&l(i.data[0].tabsEle.value.getElementById(i.data[0].tabId))}),()=>o.createVNode("div",null,[o.createVNode("ul",{ref:r,role:"tablist",class:`devui-nav devui-nav-${c.join(" ")}`,id:"devuiTabs11"},[i.data.map((u,g)=>o.createVNode("li",{role:"presentation",onClick:()=>{l(u)},class:(t.modelValue===(u.id||u.tabId)?"active":"")+" "+(u.disabled?"disabled":""),id:u.id||u.tabId},[o.createVNode("a",{role:"tab","data-toggle":u.id,"aria-expanded":t.modelValue===(u.id||u.tabId)},[i.slots[g]?i.slots[g]():o.createVNode("span",null,[u.title])])])),o.createVNode("div",{class:`devui-nav-${t.type}-animation`,style:{left:a.offsetLeft+"px",width:a.offsetWidth+"px"}},null)]),n.default()])}}),xe=o.defineComponent({name:"DTab",props:{title:{default:null,type:[String,Number]},id:{default:null,type:String},disabled:{type:Boolean,default:!1}},setup(t,{slots:e}){const n=o.inject("tabs");return n.state.slots.push(e.dTabTitle),n.state.data.push(t),()=>{const{id:r}=t;return n.state.showContent&&n.state.active===r?o.createVNode("div",{class:"devui-tab-content"},[o.createVNode("div",{role:"tabpanel",class:"devui-tab-pane in active"},[e.default()])]):null}}});ne.install=function(t){t.component(ne.name,ne),t.component(xe.name,xe)};const B=t=>t!==null&&typeof t=="object",D=t=>typeof t=="string";var Ve;(function(t){t[t.ELEMENT_NODE=1]="ELEMENT_NODE",t[t.ATTRIBUTE_NODE=2]="ATTRIBUTE_NODE",t[t.TEXT_NODE=3]="TEXT_NODE",t[t.CDATA_SECTION_NODE=4]="CDATA_SECTION_NODE",t[t.ENTITY_REFERENCE_NODE=5]="ENTITY_REFERENCE_NODE",t[t.COMMENT_NODE=6]="COMMENT_NODE",t[t.PROCESSING_INSTRUCTION_NODE=7]="PROCESSING_INSTRUCTION_NODE",t[t.DOCUMENT_NODE=9]="DOCUMENT_NODE"})(Ve||(Ve={}));class N{static isWindow(e){return e===window}static addEventListener(e,n,r,a=!1){e&&n&&r&&e.addEventListener(n,r,a)}static removeEventListener(e,n,r,a=!1){e&&n&&r&&e.removeEventListener(n,r,a)}static triggerDragEvent(e,n){let r=!1;const a=function(l){var c;(c=n.drag)==null||c.call(n,l)},i=l=>{var c;N.removeEventListener(document,"mousemove",a),N.removeEventListener(document,"mouseup",i),N.removeEventListener(document,"touchmove",a),N.removeEventListener(document,"touchend",i),document.onselectstart=null,document.ondragstart=null,r=!1,(c=n.end)==null||c.call(n,l)},s=l=>{var c;r||(document.onselectstart=()=>!1,document.ondragstart=()=>!1,N.addEventListener(document,"mousemove",a),N.addEventListener(document,"mouseup",i),N.addEventListener(document,"touchmove",a),N.addEventListener(document,"touchend",i),r=!0,(c=n.start)==null||c.call(n,l))};N.addEventListener(e,"mousedown",s),N.addEventListener(e,"touchstart",s)}static getBoundingClientRect(e){return e&&B(e)&&e.nodeType===1?e.getBoundingClientRect():null}static hasClass(e,n){return e&&B(e)&&D(n)&&e.nodeType===1?e.classList.contains(n.trim()):!1}static addClass(e,n){if(e&&B(e)&&D(n)&&e.nodeType===1&&(n=n.trim(),!N.hasClass(e,n))){const r=e.className;e.className=r?r+" "+n:n}}static removeClass(e,n){if(e&&B(e)&&D(n)&&e.nodeType===1&&typeof e.className=="string"){n=n.trim();const r=e.className.trim().split(" ");for(let a=r.length-1;a>=0;a--)r[a]=r[a].trim(),(!r[a]||r[a]===n)&&r.splice(a,1);e.className=r.join(" ")}}static toggleClass(e,n,r){e&&B(e)&&D(n)&&e.nodeType===1&&e.classList.toggle(n,r)}static replaceClass(e,n,r){e&&B(e)&&D(n)&&D(r)&&e.nodeType===1&&(n=n.trim(),r=r.trim(),N.removeClass(e,n),N.addClass(e,r))}static getScrollTop(e){const n="scrollTop"in e?e.scrollTop:e.pageYOffset;return Math.max(n,0)}static setScrollTop(e,n){"scrollTop"in e?e.scrollTop=n:e.scrollTo(e.scrollX,n)}static getRootScrollTop(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0}static setRootScrollTop(e){N.setScrollTop(window,e),N.setScrollTop(document.body,e)}static getElementTop(e,n){if(N.isWindow(e))return 0;const r=n?N.getScrollTop(n):N.getRootScrollTop();return e.getBoundingClientRect().top+r}static getVisibleHeight(e){return N.isWindow(e)?e.innerHeight:e.getBoundingClientRect().height}static isHidden(e){if(!e)return!1;const n=window.getComputedStyle(e),r=n.display==="none",a=e.offsetParent===null&&n.position!=="fixed";return r||a}static triggerEvent(e,n){if("createEvent"in document){const r=document.createEvent("HTMLEvents");r.initEvent(n,!1,!0),e.dispatchEvent(r)}}static calcAngle(e,n){const r=e.getBoundingClientRect(),a=r.left+r.width/2,i=r.top+r.height/2,s=Math.abs(a-n.clientX),l=Math.abs(i-n.clientY),c=Math.sqrt(Math.pow(s,2)+Math.pow(l,2)),u=l/c,g=Math.acos(u);let d=Math.floor(180/(Math.PI/g));return n.clientX>a&&n.clientY>i&&(d=180-d),n.clientX==a&&n.clientY>i&&(d=180),n.clientX>a&&n.clientY==i&&(d=90),n.clientX<a&&n.clientY>i&&(d=180+d),n.clientX<a&&n.clientY==i&&(d=270),n.clientX<a&&n.clientY<i&&(d=360-d),d}static querySelector(e,n){return n?n.querySelector(e):document.querySelector(e)}}function ce(t,e,n="0"){return t+n.repeat(Math.max(0,e-t.length))}function Qe(t,e=1){const n=[];let r=0;for(;r<t.length;)n.push(t.substr(r,e)),r+=e;return n}const re=(t,e,n)=>e<n?t<e?e:t>n?n:t:t<n?n:t>e?e:t;function _(t,e=0){const n=10**e;return Math.round(t*n)/n}function H(t,e){return e.every(n=>t.hasOwnProperty(n))}function ae(t){const{h:e,s:n,v:r,a}=t,i=l=>{const c=(l+e/60)%6;return r-r*n*Math.max(Math.min(c,4-c,1),0)},s=[i(5),i(3),i(1)].map(l=>Math.round(l*255));return{r:s[0],g:s[1],b:s[2],a}}function Te(t){if(!t)return{h:0,s:1,v:1,a:1};const e=t.r/255,n=t.g/255,r=t.b/255,a=Math.max(e,n,r),i=Math.min(e,n,r);let s=0;a!==i&&(a===e?s=60*(0+(n-r)/(a-i)):a===n?s=60*(2+(r-e)/(a-i)):a===r&&(s=60*(4+(e-n)/(a-i)))),s<0&&(s=s+360);const l=a===0?0:(a-i)/a,c=[s,l,a];return{h:Math.round(c[0]),s:c[1],v:c[2],a:t.a}}function fe(t){const{h:e,s:n,v:r,a}=t,i=r-r*n/2,s=i===1||i===0?0:(r-i)/Math.min(i,1-i);return{h:Math.round(e),s,l:i,a}}function et(t){const{h:e,s:n,l:r,a}=t,i=r+n*Math.min(r,1-r),s=i===0?0:2-2*r/i;return{h:Math.round(e),s,v:i,a}}function Se(t){return`rgba(${t.r}, ${t.g}, ${t.b}, ${t.a})`}function tt(t){return Se(I(P({},t),{a:1}))}function Oe(t){const e=n=>{const r=Math.round(n).toString(16);return("00".substring(0,2-r.length)+r).toUpperCase()};return`#${[e(t.r),e(t.g),e(t.b),e(Math.round(t.a*255))].join("")}`}function nt(t){const e=Qe(t.slice(1),2).map(n=>parseInt(n,16));return{r:e[0],g:e[1],b:e[2],a:Math.round(e[3]/255*100)/100}}function rt(t){const e=nt(t);return Te(e)}function Ne(t){return Oe(ae(t))}function Ae(t){return t.startsWith("#")&&(t=t.slice(1)),t=t.replace(/([^0-9a-f])/gi,"F"),(t.length===3||t.length===4)&&(t=t.split("").map(e=>e+e).join("")),t.length===6?t=ce(t,8,"F"):t=ce(ce(t,6),8,"F"),`#${t}`.toUpperCase().substring(0,9)}function W(t){t=P({},t);const e=Ne(t),n=fe(t),r=ae(t);return{alpha:t.a,hex:e.substring(0,7),hexa:e,hsla:n,hsva:t,hue:t.h,rgba:r}}function Y(t){const e=Te(t),n=Oe(t),r=fe(e),a={h:e.h,s:e.s,v:e.v},i={h:r.h,s:r.s,l:r.l};return{alpha:e.a,hex:n.substring(0,7),hexa:n,hsla:r,hsva:e,hsv:a,hsl:i,hue:e.h,rgba:t}}function X(t){const e=rt(t),n=fe(e),r=ae(e);return{alpha:e.a,hex:t.substring(0,7),hexa:t,hsla:n,hsva:e,hue:e.h,rgba:r}}function de(t){const e=et(t),n=Ne(e),r=ae(e);return{alpha:e.a,hex:n.substring(0,7),hexa:n,hsla:t,hsva:e,hue:e.h,rgba:r}}function qe(t){return X(Ae(t))}function at(t,e){if(!t)return Y({r:0,g:0,b:0,a:1});if(typeof t=="string"){if(t.indexOf("#")===-1){if(t.indexOf("hsl")!==-1){let r=null;const a=t.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(i=>i!=="").map(i=>parseFloat(i));return a.length===4?r=a[3]:a.length===3&&(r=1),de({h:a[0],s:a[1],l:a[2],a:r})}else if(t.indexOf("rgb")!==-1){let r=null;const a=t.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(i=>i!=="").map(i=>parseFloat(i));return a.length===4?r=a[3]:a.length===3&&(r=1),Y({r:a[0],g:a[1],b:a[2],a:r})}else if(t.indexOf("hsv")!==-1){let r=null;const a=t.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(i=>i!=="").map(i=>parseFloat(i));return a.length===4?r=a[3]:a.length===3&&(r=1),W({h:a[0],s:a[1],v:a[2],a:r})}}if(t==="transparent")return X("#00000000");const n=Ae(t);return e&&n===e.hexa?e:X(n)}if(typeof t=="object"){if(t.hasOwnProperty("alpha"))return t;const n=t.hasOwnProperty("a")?parseFloat(t.a):1;if(H(t,["r","g","b"]))return e&&t===e.rgba?e:Y(I(P({},t),{a:n}));if(H(t,["h","s","l"]))return e&&t===e.hsla?e:de(I(P({},t),{a:n}));if(H(t,["h","s","v"]))return e&&t===e.hsva?e:W(I(P({},t),{a:n}))}return Y({r:255,g:0,b:0,a:1})}function ue(t,e){if(e){const n=t,{a:r}=n;return ze(n,["a"])}return t}function Fe(t,e,n,r){const a=_(t.hsla.h,2),i=_(t.hsla.s,2),s=_(t.hsla.l,2),l=_(t.rgba.r),c=_(t.rgba.g),u=_(t.rgba.b),g=_(t.hsva.s,2),d=_(t.hsva.v,2);if(e==null)return t;function p(m){return r?m+"a":m}if(typeof e=="string")return n==="hex"?r?t.hexa:t.hex:n==="hsl"?`${p(n)}(${a}, ${i}, ${s}${r?", "+t.alpha:""})`:n==="rgb"?`${p(n)}(${l}, ${c}, ${u}${r?", "+t.alpha:""})`:n==="hsv"?`${p(n)}(${a}, ${g}, ${d}${r?", "+t.alpha:""})`:e.length===7?t.hex:t.hexa;if(typeof e=="object"){const m=typeof e.a=="number"&&e.a===0?!!e.a:!e.a;if(H(e,["r","g","b"]))return ue(t.rgba,m);if(H(e,["h","s","l"]))return ue(t.hsla,m);if(H(e,["h","s","v"]))return ue(t.hsva,m)}}const it={modelValue:{type:Object,default:()=>Y({r:255,g:0,b:0,a:1})},height:{type:Number,default:200}};var Rn="",ot=o.defineComponent({name:"ColorPallete",props:it,emits:["update:modelValue","changeTextColor"],setup(t,e){const n={transition:"all 0.3s ease"},r=o.inject("provideData"),a=o.ref(n),i=o.ref(),s=o.ref(),l=o.ref(),c=o.getCurrentInstance(),u=o.ref(0),g=o.ref(0),d=o.computed(()=>({width:`${r.dotSize}px`,height:`${r.dotSize}px`,transform:`translate(-${r.dotSize/2}px,  -${r.dotSize/2}px)`})),p=o.computed(()=>P({top:u.value+"px",left:g.value+"px"},a.value));function m(){const f=s.value.getContext("2d"),O=i.value.offsetWidth;s.value.width=O,s.value.height=t.height;const w=f.createLinearGradient(0,0,O,0);w.addColorStop(0,"hsla(0, 0%, 100%, 1)"),w.addColorStop(1,`hsla(${t.modelValue.hue}, 100%, 50%, 1)`),f.fillStyle=w,f.fillRect(0,0,O,t.height);const y=f.createLinearGradient(0,0,0,t.height);y.addColorStop(0,"hsla(0, 0%, 100%, 0)"),y.addColorStop(1,"hsla(0, 0%, 0%, 1)"),f.fillStyle=y,f.fillRect(0,0,O,t.height)}function x(f){f.target!==i.value&&E(f)}function h(){var f,O;if(c){const w=i.value.offsetWidth;g.value=Number((f=t.modelValue)==null?void 0:f.hsva.s)*w,u.value=(1-Number((O=t.modelValue)==null?void 0:O.hsva.v))*t.height}}function E(f){const O=i.value.offsetWidth;if(c){const w=s.value,y=w==null?void 0:w.getBoundingClientRect();let b=f.clientX-y.left,v=f.clientY-y.top;b=re(b,0,O),v=re(v,0,t.height),g.value=b,u.value=v;const S=o.computed(()=>b>y.width/2||v>y.height/2);e.emit("update:modelValue",W({h:t.modelValue.hue,s:re(f.clientX-y.left,0,y.width)/y.width,v:1-re(f.clientY-y.top,0,y.height)/y.height,a:t.modelValue.alpha})),e.emit("changeTextColor",S.value)}}return o.onMounted(()=>{m(),c&&c.vnode.el&&l.value&&(N.triggerDragEvent(c.vnode.el,{drag:f=>{a.value=null,E(f)},end:f=>{a.value=n,E(f)}}),h())}),o.watch(()=>t.modelValue,()=>{h()}),e.expose({renderCanvas:m}),()=>o.createVNode("div",{class:"devui-color-picker-palette",ref:i,onClick:x},[o.createVNode("canvas",{ref:s},null),o.createVNode("div",{class:"devui-color-picker-palette-handler",style:p.value},[o.createVNode("div",{ref:l,style:d.value},null)])])}});const st={color:{type:Object},modelValue:{type:Object},width:{type:Number,default:300},height:{type:Number,default:15}};var $n="",lt=o.defineComponent({name:"ColorHueSlider",props:st,emits:["update:modelValue"],setup(t,e){const n={transition:"all 0.3s ease"},r=o.ref(null),a=o.ref(null),i=o.ref(n),s=()=>{if(r.value&&a.value){const g=r.value.getBoundingClientRect(),d=a.value.offsetWidth;return t.modelValue.hue===360?g.width-d/2:t.modelValue.hue%360*(g.width-d)/360+d/2}return 0},l=o.computed(()=>{const g=s();return P({left:g+"px",top:0},i.value)}),c=g=>{g.target!==r.value&&u(g)},u=g=>{if(g.stopPropagation(),r.value&&a.value){const d=r.value.getBoundingClientRect(),p=a.value.offsetWidth;let m=g.clientX-d.left;m=Math.min(m,d.width-p/2),m=Math.max(p/2,m);const x=Math.round((m-p/2)/(d.width-p)*360);e.emit("update:modelValue",W({h:x,s:t.modelValue.hsva.s,v:t.modelValue.hsva.v,a:t.modelValue.hsva.a}))}};return o.onMounted(()=>{const g={drag:d=>{i.value=null,u(d)},end:d=>{i.value=n,u(d)}};r.value&&a.value&&N.triggerDragEvent(r.value,g)}),()=>o.createVNode("div",{class:"devui-color-picker-hue-slider"},[o.createVNode("div",{ref:r,class:"devui-color-picker-hue-slider__bar",onClick:c},[o.createVNode("div",{class:"devui-color-picker-hue-slider__bar-pointer",ref:a,style:l.value},[o.createVNode("div",{class:"devui-color-picker-hue-slider__bar-handle"},null)])])])}});const ct={color:{type:Object},modelValue:{type:Object},rgba:{type:Object,default:null},height:{type:Number,default:15},width:{type:Number,default:300}};var kn="",ft=o.defineComponent({name:"ColorAlphaSlider",props:ct,emits:["update:modelValue"],setup(t,e){const n={transition:"all 0.3s ease"},r=o.ref(n),a=o.ref(null),i=o.ref(null),s=p=>{p.target!==a.value&&l(p)},l=p=>{if(p.stopPropagation(),a.value&&i.value){const m=a.value.getBoundingClientRect(),x=i.value.offsetWidth;let h=p.clientX-m.left;h=Math.max(x/2,h),h=Math.min(h,m.width-x/2);const E=Math.round((h-x/2)/(m.width-x)*100);e.emit("update:modelValue",W(I(P({},t.modelValue.hsva),{a:E/100})))}},c=o.computed(()=>({background:`linear-gradient(to right, transparent , ${tt(t.modelValue.rgba)})`})),u=o.computed(()=>{if(a.value&&i.value){const p=t.modelValue.rgba.a,m=a.value.getBoundingClientRect(),x=i.value.offsetWidth;return Math.round(p*(m.width-x)+x/2)}return 0}),g=o.computed(()=>{const p=u.value;return P({left:p+"px",top:0},r.value)});o.onMounted(()=>{const p={drag:m=>{r.value=null,l(m)},end:m=>{r.value=n,l(m)}};a.value&&i.value&&N.triggerDragEvent(a.value,p)});const d=o.computed(()=>["devui-color-picker-alpha-slider","transparent"]);return()=>o.createVNode("div",{class:d.value},[o.createVNode("div",{ref:a,class:"devui-color-picker-alpha-slider__bar",style:c.value,onClick:s},[o.createVNode("div",{class:["devui-color-picker-alpha-slider__bar-pointer"],ref:i,style:g.value},[o.createVNode("div",{class:"devui-color-picker-alpha-slider__bar-handle"},null)])])])}});const dt={showAlpha:{type:Boolean,default:!1},mode:{type:String},color:{type:Object}};var Mn="";function L(){return L=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},L.apply(this,arguments)}function ut(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,U(t,e)}function pe(t){return pe=Object.setPrototypeOf?Object.getPrototypeOf:function(n){return n.__proto__||Object.getPrototypeOf(n)},pe(t)}function U(t,e){return U=Object.setPrototypeOf||function(r,a){return r.__proto__=a,r},U(t,e)}function pt(){if(typeof Reflect=="undefined"||!Reflect.construct||Reflect.construct.sham)return!1;if(typeof Proxy=="function")return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch{return!1}}function ie(t,e,n){return pt()?ie=Reflect.construct:ie=function(a,i,s){var l=[null];l.push.apply(l,i);var c=Function.bind.apply(a,l),u=new c;return s&&U(u,s.prototype),u},ie.apply(null,arguments)}function ht(t){return Function.toString.call(t).indexOf("[native code]")!==-1}function he(t){var e=typeof Map=="function"?new Map:void 0;return he=function(r){if(r===null||!ht(r))return r;if(typeof r!="function")throw new TypeError("Super expression must either be null or a function");if(typeof e!="undefined"){if(e.has(r))return e.get(r);e.set(r,a)}function a(){return ie(r,arguments,pe(this).constructor)}return a.prototype=Object.create(r.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),U(a,r)},he(t)}var gt=/%[sdj%]/g,mt=function(){};typeof process!="undefined"&&process.env;function ge(t){if(!t||!t.length)return null;var e={};return t.forEach(function(n){var r=n.field;e[r]=e[r]||[],e[r].push(n)}),e}function j(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),r=1;r<e;r++)n[r-1]=arguments[r];var a=0,i=n.length;if(typeof t=="function")return t.apply(null,n);if(typeof t=="string"){var s=t.replace(gt,function(l){if(l==="%%")return"%";if(a>=i)return l;switch(l){case"%s":return String(n[a++]);case"%d":return Number(n[a++]);case"%j":try{return JSON.stringify(n[a++])}catch{return"[Circular]"}break;default:return l}});return s}return t}function yt(t){return t==="string"||t==="url"||t==="hex"||t==="email"||t==="date"||t==="pattern"}function q(t,e){return!!(t==null||e==="array"&&Array.isArray(t)&&!t.length||yt(e)&&typeof t=="string"&&!t)}function vt(t,e,n){var r=[],a=0,i=t.length;function s(l){r.push.apply(r,l||[]),a++,a===i&&n(r)}t.forEach(function(l){e(l,s)})}function Pe(t,e,n){var r=0,a=t.length;function i(s){if(s&&s.length){n(s);return}var l=r;r=r+1,l<a?e(t[l],i):n([])}i([])}function bt(t){var e=[];return Object.keys(t).forEach(function(n){e.push.apply(e,t[n]||[])}),e}var je=function(t){ut(e,t);function e(n,r){var a;return a=t.call(this,"Async Validation Error")||this,a.errors=n,a.fields=r,a}return e}(he(Error));function wt(t,e,n,r,a){if(e.first){var i=new Promise(function(p,m){var x=function(f){return r(f),f.length?m(new je(f,ge(f))):p(a)},h=bt(t);Pe(h,n,x)});return i.catch(function(p){return p}),i}var s=e.firstFields===!0?Object.keys(t):e.firstFields||[],l=Object.keys(t),c=l.length,u=0,g=[],d=new Promise(function(p,m){var x=function(E){if(g.push.apply(g,E),u++,u===c)return r(g),g.length?m(new je(g,ge(g))):p(a)};l.length||(r(g),p(a)),l.forEach(function(h){var E=t[h];s.indexOf(h)!==-1?Pe(E,n,x):vt(E,n,x)})});return d.catch(function(p){return p}),d}function Ct(t){return!!(t&&t.message!==void 0)}function Et(t,e){for(var n=t,r=0;r<e.length;r++){if(n==null)return n;n=n[e[r]]}return n}function Re(t,e){return function(n){var r;return t.fullFields?r=Et(e,t.fullFields):r=e[n.field||t.fullField],Ct(n)?(n.field=n.field||t.fullField,n.fieldValue=r,n):{message:typeof n=="function"?n():n,fieldValue:r,field:n.field||t.fullField}}}function $e(t,e){if(e){for(var n in e)if(e.hasOwnProperty(n)){var r=e[n];typeof r=="object"&&typeof t[n]=="object"?t[n]=L({},t[n],r):t[n]=r}}return t}var ke=function(e,n,r,a,i,s){e.required&&(!r.hasOwnProperty(e.field)||q(n,s||e.type))&&a.push(j(i.messages.required,e.fullField))},xt=function(e,n,r,a,i){(/^\s+$/.test(n)||n==="")&&a.push(j(i.messages.whitespace,e.fullField))},me={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+\.)+[a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},z={integer:function(e){return z.number(e)&&parseInt(e,10)===e},float:function(e){return z.number(e)&&!z.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch{return!1}},date:function(e){return typeof e.getTime=="function"&&typeof e.getMonth=="function"&&typeof e.getYear=="function"&&!isNaN(e.getTime())},number:function(e){return isNaN(e)?!1:typeof e=="number"},object:function(e){return typeof e=="object"&&!z.array(e)},method:function(e){return typeof e=="function"},email:function(e){return typeof e=="string"&&e.length<=320&&!!e.match(me.email)},url:function(e){return typeof e=="string"&&e.length<=2048&&!!e.match(me.url)},hex:function(e){return typeof e=="string"&&!!e.match(me.hex)}},Vt=function(e,n,r,a,i){if(e.required&&n===void 0){ke(e,n,r,a,i);return}var s=["integer","float","array","regexp","object","method","email","number","date","url","hex"],l=e.type;s.indexOf(l)>-1?z[l](n)||a.push(j(i.messages.types[l],e.fullField,e.type)):l&&typeof n!==e.type&&a.push(j(i.messages.types[l],e.fullField,e.type))},Tt=function(e,n,r,a,i){var s=typeof e.len=="number",l=typeof e.min=="number",c=typeof e.max=="number",u=/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,g=n,d=null,p=typeof n=="number",m=typeof n=="string",x=Array.isArray(n);if(p?d="number":m?d="string":x&&(d="array"),!d)return!1;x&&(g=n.length),m&&(g=n.replace(u,"_").length),s?g!==e.len&&a.push(j(i.messages[d].len,e.fullField,e.len)):l&&!c&&g<e.min?a.push(j(i.messages[d].min,e.fullField,e.min)):c&&!l&&g>e.max?a.push(j(i.messages[d].max,e.fullField,e.max)):l&&c&&(g<e.min||g>e.max)&&a.push(j(i.messages[d].range,e.fullField,e.min,e.max))},G="enum",St=function(e,n,r,a,i){e[G]=Array.isArray(e[G])?e[G]:[],e[G].indexOf(n)===-1&&a.push(j(i.messages[G],e.fullField,e[G].join(", ")))},Ot=function(e,n,r,a,i){if(e.pattern){if(e.pattern instanceof RegExp)e.pattern.lastIndex=0,e.pattern.test(n)||a.push(j(i.messages.pattern.mismatch,e.fullField,n,e.pattern));else if(typeof e.pattern=="string"){var s=new RegExp(e.pattern);s.test(n)||a.push(j(i.messages.pattern.mismatch,e.fullField,n,e.pattern))}}},C={required:ke,whitespace:xt,type:Vt,range:Tt,enum:St,pattern:Ot},Nt=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n,"string")&&!e.required)return r();C.required(e,n,a,s,i,"string"),q(n,"string")||(C.type(e,n,a,s,i),C.range(e,n,a,s,i),C.pattern(e,n,a,s,i),e.whitespace===!0&&C.whitespace(e,n,a,s,i))}r(s)},At=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n)&&!e.required)return r();C.required(e,n,a,s,i),n!==void 0&&C.type(e,n,a,s,i)}r(s)},qt=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(n===""&&(n=void 0),q(n)&&!e.required)return r();C.required(e,n,a,s,i),n!==void 0&&(C.type(e,n,a,s,i),C.range(e,n,a,s,i))}r(s)},Ft=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n)&&!e.required)return r();C.required(e,n,a,s,i),n!==void 0&&C.type(e,n,a,s,i)}r(s)},Pt=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n)&&!e.required)return r();C.required(e,n,a,s,i),q(n)||C.type(e,n,a,s,i)}r(s)},jt=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n)&&!e.required)return r();C.required(e,n,a,s,i),n!==void 0&&(C.type(e,n,a,s,i),C.range(e,n,a,s,i))}r(s)},Rt=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n)&&!e.required)return r();C.required(e,n,a,s,i),n!==void 0&&(C.type(e,n,a,s,i),C.range(e,n,a,s,i))}r(s)},$t=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(n==null&&!e.required)return r();C.required(e,n,a,s,i,"array"),n!=null&&(C.type(e,n,a,s,i),C.range(e,n,a,s,i))}r(s)},kt=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n)&&!e.required)return r();C.required(e,n,a,s,i),n!==void 0&&C.type(e,n,a,s,i)}r(s)},Mt="enum",It=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n)&&!e.required)return r();C.required(e,n,a,s,i),n!==void 0&&C[Mt](e,n,a,s,i)}r(s)},_t=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n,"string")&&!e.required)return r();C.required(e,n,a,s,i),q(n,"string")||C.pattern(e,n,a,s,i)}r(s)},Lt=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n,"date")&&!e.required)return r();if(C.required(e,n,a,s,i),!q(n,"date")){var c;n instanceof Date?c=n:c=new Date(n),C.type(e,c,a,s,i),c&&C.range(e,c.getTime(),a,s,i)}}r(s)},Bt=function(e,n,r,a,i){var s=[],l=Array.isArray(n)?"array":typeof n;C.required(e,n,a,s,i,l),r(s)},ye=function(e,n,r,a,i){var s=e.type,l=[],c=e.required||!e.required&&a.hasOwnProperty(e.field);if(c){if(q(n,s)&&!e.required)return r();C.required(e,n,a,l,i,s),q(n,s)||C.type(e,n,a,l,i)}r(l)},Dt=function(e,n,r,a,i){var s=[],l=e.required||!e.required&&a.hasOwnProperty(e.field);if(l){if(q(n)&&!e.required)return r();C.required(e,n,a,s,i)}r(s)},K={string:Nt,method:At,number:qt,boolean:Ft,regexp:Pt,integer:jt,float:Rt,array:$t,object:kt,enum:It,pattern:_t,date:Lt,url:ye,hex:ye,email:ye,required:Bt,any:Dt};function ve(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}var be=ve(),J=function(){function t(n){this.rules=null,this._messages=be,this.define(n)}var e=t.prototype;return e.define=function(r){var a=this;if(!r)throw new Error("Cannot configure a schema with no rules");if(typeof r!="object"||Array.isArray(r))throw new Error("Rules must be an object");this.rules={},Object.keys(r).forEach(function(i){var s=r[i];a.rules[i]=Array.isArray(s)?s:[s]})},e.messages=function(r){return r&&(this._messages=$e(ve(),r)),this._messages},e.validate=function(r,a,i){var s=this;a===void 0&&(a={}),i===void 0&&(i=function(){});var l=r,c=a,u=i;if(typeof c=="function"&&(u=c,c={}),!this.rules||Object.keys(this.rules).length===0)return u&&u(null,l),Promise.resolve(l);function g(h){var E=[],f={};function O(y){if(Array.isArray(y)){var b;E=(b=E).concat.apply(b,y)}else E.push(y)}for(var w=0;w<h.length;w++)O(h[w]);E.length?(f=ge(E),u(E,f)):u(null,l)}if(c.messages){var d=this.messages();d===be&&(d=ve()),$e(d,c.messages),c.messages=d}else c.messages=this.messages();var p={},m=c.keys||Object.keys(this.rules);m.forEach(function(h){var E=s.rules[h],f=l[h];E.forEach(function(O){var w=O;typeof w.transform=="function"&&(l===r&&(l=L({},l)),f=l[h]=w.transform(f)),typeof w=="function"?w={validator:w}:w=L({},w),w.validator=s.getValidationMethod(w),!!w.validator&&(w.field=h,w.fullField=w.fullField||h,w.type=s.getType(w),p[h]=p[h]||[],p[h].push({rule:w,value:f,source:l,field:h}))})});var x={};return wt(p,c,function(h,E){var f=h.rule,O=(f.type==="object"||f.type==="array")&&(typeof f.fields=="object"||typeof f.defaultField=="object");O=O&&(f.required||!f.required&&h.value),f.field=h.field;function w(v,S){return L({},S,{fullField:f.fullField+"."+v,fullFields:f.fullFields?[].concat(f.fullFields,[v]):[v]})}function y(v){v===void 0&&(v=[]);var S=Array.isArray(v)?v:[v];!c.suppressWarning&&S.length&&t.warning("async-validator:",S),S.length&&f.message!==void 0&&(S=[].concat(f.message));var A=S.map(Re(f,l));if(c.first&&A.length)return x[f.field]=1,E(A);if(!O)E(A);else{if(f.required&&!h.value)return f.message!==void 0?A=[].concat(f.message).map(Re(f,l)):c.error&&(A=[c.error(f,j(c.messages.required,f.field))]),E(A);var V={};f.defaultField&&Object.keys(h.value).map(function(M){V[M]=f.defaultField}),V=L({},V,h.rule.fields);var $={};Object.keys(V).forEach(function(M){var k=V[M],An=Array.isArray(k)?k:[k];$[M]=An.map(w.bind(null,M))});var ee=new t($);ee.messages(c.messages),h.rule.options&&(h.rule.options.messages=c.messages,h.rule.options.error=c.error),ee.validate(h.value,h.rule.options||c,function(M){var k=[];A&&A.length&&k.push.apply(k,A),M&&M.length&&k.push.apply(k,M),E(k.length?k:null)})}}var b;f.asyncValidator?b=f.asyncValidator(f,h.value,y,h.source,c):f.validator&&(b=f.validator(f,h.value,y,h.source,c),b===!0?y():b===!1?y(typeof f.message=="function"?f.message(f.fullField||f.field):f.message||(f.fullField||f.field)+" fails"):b instanceof Array?y(b):b instanceof Error&&y(b.message)),b&&b.then&&b.then(function(){return y()},function(v){return y(v)})},function(h){g(h)},l)},e.getType=function(r){if(r.type===void 0&&r.pattern instanceof RegExp&&(r.type="pattern"),typeof r.validator!="function"&&r.type&&!K.hasOwnProperty(r.type))throw new Error(j("Unknown rule type %s",r.type));return r.type||"string"},e.getValidationMethod=function(r){if(typeof r.validator=="function")return r.validator;var a=Object.keys(r),i=a.indexOf("message");return i!==-1&&a.splice(i,1),a.length===1&&a[0]==="required"?K.required:K[this.getType(r)]||void 0},t}();J.register=function(e,n){if(typeof n!="function")throw new Error("Cannot register a validator by type, validator is not a function");K[e]=n},J.warning=mt,J.messages=be,J.validators=K;const Me="rgb",we=["rgb","hex","hsl","hsv"],Ht={alpha:[{type:"number",required:!0,min:0,max:1}],hex:[{type:"string",pattern:/^#[0-9a-fA-F]{6}/}],hexa:[{type:"string",pattern:/^#[0-9a-fA-F]{6,8}/}],rgba:{type:"object",required:!0,fields:{r:{type:"number",required:!0,min:0,max:255},g:{type:"number",required:!0,min:0,max:255},b:{type:"number",required:!0,min:0,max:255},a:{type:"number",required:!0,min:0,max:1}}},hsla:{type:"object",required:!0,fields:{h:{type:"number",required:!0,min:0,max:360},s:{type:"number",required:!0,min:0,max:1},l:{type:"number",required:!0,min:0,max:1},a:{type:"number",required:!0,min:0,max:1}}},hsva:{type:"object",required:!0,fields:{h:{type:"number",required:!0,min:0,max:360},s:{type:"number",required:!0,min:0,max:1},v:{type:"number",required:!0,min:0,max:1},a:{type:"number",required:!0,min:0,max:1}}}};var Ie=o.defineComponent({name:"ColorEdit",props:dt,emits:["changeTextModeColor","update:modelValue"],setup(t,{emit:e}){const n=o.inject("provideData"),r=o.computed(()=>{var d;return`${(d=t.mode)!=null?d:Me}${n.showAlpha?"a":""}`}),a=o.ref(t.color),i=o.computed(()=>{var d;return((d=t.mode)!=null?d:Me)==="hex"?"string":"number"});function s(d){const p=new J(Ht);return new Promise((m,x)=>{p.validate(d,h=>{h&&console.warn("\u8272\u503C\u6821\u9A8C\u5F02\u5E38:",h),h?x():m(d)})})}function l(){const d=we.findIndex(m=>m===t.mode),p=we[(d+1)%we.length];e("changeTextModeColor",p)}function c(){const d=r.value,p=a.value[d],m=h=>{const f=(n.showAlpha?X:qe)(h);return s(f)},x=async h=>{const E=h.target;m(E.value).then(f=>a.value=f).catch(()=>E.value=p)};return o.createVNode("div",{class:"devui-color-picker-edit-input string-input flex"},[o.createVNode("div",{class:"devui-color-picker-edit-input-wrapper"},[o.createVNode("input",{value:p,onChange:x,class:"devui-color-picker-edit-input-value"},null)])])}function u(){const d=["s","v","l"],p=["a"],m=r.value,x=a.value[m.replace(/a?$/,"a")],h=y=>{const{from:b}=[{mode:["rgb","rgba"],from:Y},{mode:["hsv","hsva"],from:W},{mode:["hsl","hsla"],from:de}].find(S=>S.mode.includes(m)),v=b(n.showAlpha?y:I(P({},y),{a:1}));return s(v)},E=y=>async b=>{const v=b.target;h(I(P({},x),{[y]:O(y,v.value)})).then(S=>a.value=S).catch(()=>v.value=f(y,x[y]))};function f(y,b){switch(!0){case d.includes(y):return(b*100).toFixed();case p.includes(y):return`${Math.round(b*100)}%`;default:return b.toString()}}function O(y,b){switch(!0){case d.includes(y):return parseFloat((parseInt(b)/100).toFixed(2));case p.includes(y):return parseFloat((parseInt(b.replace(/%$/,""))/100).toFixed(2));default:return Number(b)}}function w(){return y=>{const b=y.target,v={ArrowUp:1,ArrowDown:-1}[y.code];if(v!==void 0){y.preventDefault();const[S]=b.value.match(/\d+/g),A=(parseInt(S)+v).toString();b.value=b.value.replace(/\d+/g,A),b.dispatchEvent(new CustomEvent("change"))}}}return o.createVNode("div",{class:"devui-color-picker-edit-input number-input flex"},[m.split("").map(y=>o.createVNode("div",{class:"devui-color-picker-edit-input-wrapper"},[o.createVNode("input",{onKeydown:w(),class:"devui-color-picker-edit-input-value",value:f(y,x[y]),onChange:E(y)},null)]))])}function g(){switch(i.value){case"string":return c();case"number":return u()}}return()=>o.createVNode("div",{class:"devui-color-picker-edit flex"},[o.createVNode("div",{class:"devui-color-picker-edit-name",onClick:l},[r.value.toUpperCase()]),g()])}});const Wt={color:{type:Object}};var In="";const Yt=["#ffffff","#ffd7d5","#ffdaa9","#fffed5","#d4fa00","#73fcd6","#a5c8ff","#ffacd5","#ff7faa","#d6d6d6","#ffacaa","#ffb995","#fffb00","#73fa79","#00fcff","#78acfe","#d84fa9","#ff4f79","#b2b2b2","#d7aba9","#ff6827","#ffda51","#00d100","#00d5ff","#0080ff","#ac39ff","#ff2941","#888888","#7a4442","#ff4c00","#ffa900","#3da742","#3daad6","#0052ff","#7a4fd6","#d92142","#000000","#7b0c00","#ff4c41","#d6a841","#407600","#007aaa","#021eaa","#797baa","#ab1942"];var Gt=o.defineComponent({name:"ColorBasic",props:Wt,setup(t){var i;const e=o.inject("provideData"),n=o.ref(t.color);function r(s){n.value=qe(s)}const a=o.ref(Object.values((i=e.swatches)!=null?i:[]));return()=>o.createVNode("div",{class:"devui-color-picker-basic flex"},[(a.value.length!==0?a.value:Yt).map(s=>o.createVNode("div",{onClick:()=>r(s),class:["devui-color-picker-basic-div"],style:{backgroundColor:s}},null))])}}),_n="";const Xt={color:{type:Object}};var oe=o.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(t){return P({},t)},render(){const{name:t,size:e,color:n,classPrefix:r}=this;return/^((https?):)?\/\//.test(t)?o.createVNode("img",{src:t,alt:t.split("/")[t.split("/").length-1],style:{width:e,verticalAlign:"text-bottom"}},null):o.createVNode("i",{class:`${r} ${r}-${t}`,style:{fontSize:e,color:n}},null)}});oe.install=function(t){t.component(oe.name,oe)};var Ln="",Ut=typeof global=="object"&&global&&global.Object===Object&&global,zt=Ut,Kt=typeof self=="object"&&self&&self.Object===Object&&self,Jt=zt||Kt||Function("return this")(),_e=Jt,Zt=_e.Symbol,se=Zt,Le=Object.prototype,Qt=Le.hasOwnProperty,en=Le.toString,Z=se?se.toStringTag:void 0;function tn(t){var e=Qt.call(t,Z),n=t[Z];try{t[Z]=void 0;var r=!0}catch{}var a=en.call(t);return r&&(e?t[Z]=n:delete t[Z]),a}var nn=Object.prototype,rn=nn.toString;function an(t){return rn.call(t)}var on="[object Null]",sn="[object Undefined]",Be=se?se.toStringTag:void 0;function ln(t){return t==null?t===void 0?sn:on:Be&&Be in Object(t)?tn(t):an(t)}function cn(t){return t!=null&&typeof t=="object"}var fn="[object Symbol]";function dn(t){return typeof t=="symbol"||cn(t)&&ln(t)==fn}var un=/\s/;function pn(t){for(var e=t.length;e--&&un.test(t.charAt(e)););return e}var hn=/^\s+/;function gn(t){return t&&t.slice(0,pn(t)+1).replace(hn,"")}function Ce(t){var e=typeof t;return t!=null&&(e=="object"||e=="function")}var De=0/0,mn=/^[-+]0x[0-9a-f]+$/i,yn=/^0b[01]+$/i,vn=/^0o[0-7]+$/i,bn=parseInt;function He(t){if(typeof t=="number")return t;if(dn(t))return De;if(Ce(t)){var e=typeof t.valueOf=="function"?t.valueOf():t;t=Ce(e)?e+"":e}if(typeof t!="string")return t===0?t:+t;t=gn(t);var n=yn.test(t);return n||vn.test(t)?bn(t.slice(2),n?2:8):mn.test(t)?De:+t}var wn=function(){return _e.Date.now()},Ee=wn,Cn="Expected a function",En=Math.max,xn=Math.min;function Vn(t,e,n){var r,a,i,s,l,c,u=0,g=!1,d=!1,p=!0;if(typeof t!="function")throw new TypeError(Cn);e=He(e)||0,Ce(n)&&(g=!!n.leading,d="maxWait"in n,i=d?En(He(n.maxWait)||0,e):i,p="trailing"in n?!!n.trailing:p);function m(v){var S=r,A=a;return r=a=void 0,u=v,s=t.apply(A,S),s}function x(v){return u=v,l=setTimeout(f,e),g?m(v):s}function h(v){var S=v-c,A=v-u,V=e-S;return d?xn(V,i-A):V}function E(v){var S=v-c,A=v-u;return c===void 0||S>=e||S<0||d&&A>=i}function f(){var v=Ee();if(E(v))return O(v);l=setTimeout(f,h(v))}function O(v){return l=void 0,p&&r?m(v):(r=a=void 0,s)}function w(){l!==void 0&&clearTimeout(l),u=0,r=c=a=l=void 0}function y(){return l===void 0?s:O(Ee())}function b(){var v=Ee(),S=E(v);if(r=arguments,a=this,c=v,S){if(l===void 0)return x(c);if(d)return clearTimeout(l),l=setTimeout(f,e),m(c)}return l===void 0&&(l=setTimeout(f,e)),s}return b.cancel=w,b.flush=y,b}const We="STORAGE_COLOR_PICKER_HISTORY_KEY",Tn=8;function Sn(t,{storage:e}={}){const n=()=>e&&JSON.parse(localStorage.getItem(We))||t,r=o.ref(n());return o.watch(r,a=>{e&&localStorage.setItem(We,JSON.stringify(a))}),r}var Ye=o.defineComponent({name:"ColorEdit",components:{Icon:oe},props:Xt,emits:["update:color"],setup(t){const e=o.inject("provideData"),n=Sn([],{storage:!0}),r=o.ref(t.color),a=Vn(s=>{const l=n.value.findIndex(c=>c===s.hexa||c.endsWith("00")&&s.alpha===0);l>=0&&n.value.splice(l,1),n.value=[e.showAlpha?s.hexa:s.hex,...n.value].slice(0,Tn)},100);o.watch(t.color,s=>{a(s)});function i(s){r.value=X(s)}return()=>o.createVNode("div",{class:"devui-color-picker-history flex flex-wrap"},[n.value.map(s=>o.createVNode("div",{onClick:()=>i(s),class:["devui-color-picker-history_color-box",s.endsWith("00")?"transparent":""],style:{backgroundColor:s}},null))])}}),On=o.defineComponent({name:"ColorPanel",components:{colorPalette:ot,colorHueSlider:lt,colorAlphaSlider:ft,colorEdit:Ie,colorBasic:Gt,Tabs:ne,colorHistory:Ye},props:Ze,emits:["update:modelValue","changeTextColor","changeTiggerColor","changePaletteColor","changeTextModeType"],setup(t,{emit:e}){const n=o.inject("provideData"),r=o.ref(null),a=n.showAlpha,i=o.ref("basic");function s(u){e("changeTextColor",u)}function l(u){e("changeTextModeType",u)}const c=o.ref(t.modelValue);return o.watch(()=>c.value,u=>{e("update:modelValue",u),e("changePaletteColor",u),o.nextTick(()=>{r.value&&r.value.renderCanvas()})}),()=>o.createVNode("div",{class:"devui-color-picker-panel"},[o.createVNode(o.resolveComponent("d-tabs"),{type:"tabs",modelValue:i.value,"onUpdate:modelValue":u=>i.value=u},{default:()=>[o.createVNode(o.resolveComponent("d-tab"),{id:"basic",title:"\u57FA\u7840\u9762\u677F",tabId:"basic"},{default:()=>[o.createVNode(o.resolveComponent("color-basic"),{color:c},null)]}),o.createVNode(o.resolveComponent("d-tab"),{id:"palette",title:"\u9AD8\u7EA7\u9762\u677F",tabId:"palette"},{default:()=>[o.createVNode(o.resolveComponent("color-palette"),{ref:r,modelValue:c.value,"onUpdate:modelValue":u=>c.value=u,onChangeTextColor:s},null)]})]}),o.createVNode(o.resolveComponent("color-hue-slider"),{modelValue:c.value,"onUpdate:modelValue":u=>c.value=u},null),a?o.createVNode(o.resolveComponent("color-alpha-slider"),{modelValue:c.value,"onUpdate:modelValue":u=>c.value=u},null):null,o.createVNode(Ie,{"show-alpha":t.showAlpha,mode:t.mode,color:c,onChangeTextModeColor:l},null),n.showHistory?o.createVNode(Ye,{color:c},null):null])}}),Bn="",Q=o.defineComponent({name:"DColorPicker",components:{colorPanel:On},props:Je,emits:["update:modelValue"],setup(t,{emit:e}){var A;const n="rgb",r={showAlpha:te(()=>t.showAlpha),swatches:te(()=>t.swatches),dotSize:te(()=>t.dotSize),showHistory:te(()=>t.showHistory)};o.provide("provideData",o.readonly(r));const a=o.ref(null),i=o.ref(),s=o.ref(),l=o.ref(),c=o.ref(0),u=o.ref(0),g=o.ref(!0),d=o.ref(!1),p=o.ref(`${(A=t.mode)!=null?A:n}`),m=o.ref(o.unref(t.mode));o.onMounted(()=>{window.addEventListener("resize",v),window.addEventListener("click",S)});const x=o.computed(()=>i.value?{transform:`translate(${c.value}px, ${u.value}px)`}:null),h=o.computed(()=>{const V=a.value.rgba,$=I(P({},V),{a:t.showAlpha?V.a:1});return{backgroundColor:`${Se($)}`}}),E=o.computed(()=>Fe(a.value,"",p.value,t.showAlpha)),f=o.computed(()=>Ke(a.value,.5));function O(V){g.value=V}function w(V){b(V)}function y(V){m.value=V,p.value=V}o.watch(()=>d.value,V=>{var ee;const $=(ee=i.value)==null?void 0:ee.getBoundingClientRect();V&&o.nextTick(()=>{s.value.style.transform=`translate(${$.left+"px"}, ${$.top+window.scrollY+$.height+"px"})`})}),o.watch(()=>t.modelValue,V=>{b(at(V,a.value))},{immediate:!0});function b(V){a.value=V;const $=Fe(a.value,t.modelValue,m.value,t.showAlpha);e("update:modelValue",$)}function v(){return F(i,u,c)}function S(V){return R(V,i,s,d)}return()=>o.createVNode("div",{class:"devui-color-picker",ref:i},[o.createVNode("div",{class:"devui-color-picker-container"},[o.createVNode("div",{class:"devui-color-picker-container-wrap"},[o.createVNode("div",{class:"devui-color-picker-container-wrap-current-color",style:h.value},null),o.createVNode("div",{class:["devui-color-picker-container-wrap-transparent","devui-color-picker-container-wrap-current-color-transparent"]},null),o.createVNode("div",{class:"devui-color-picker-color-value"},[o.createVNode("p",{style:f.value},[E.value])])])]),o.createVNode(o.Teleport,{to:"body"},{default:()=>[o.createVNode(o.Transition,{name:"color-picker-transition"},{default:()=>[d.value?o.createVNode("div",{ref:s,style:x.value,class:["devui-color-picker-position"]},[o.createVNode(o.resolveComponent("color-panel"),{modelValue:a.value,"onUpdate:modelValue":V=>a.value=V,ref:l,mode:m.value,onChangeTextColor:O,onChangePaletteColor:w,onChangeTextModeType:y},null)]):null]})]})])}});Q.install=function(t){t.component(Q.name,Q)};var Nn={title:"ColorPicker \u989C\u8272\u9009\u62E9\u5668",category:"\u6570\u636E\u5F55\u5165",status:"80%",install(t){t.use(Q)}};T.ColorPicker=Q,T.default=Nn,Object.defineProperty(T,"__esModule",{value:!0}),T[Symbol.toStringTag]="Module"});

package/color-picker/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "color-picker",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css"
+}

package/color-picker/style.css

@@ -0,0 +1 @@
+:host{display:block}.devui-nav-tabs,.devui-nav-pills{font-size:var(--devui-font-size, 12px);background:transparent;font-weight:bold;list-style:none}.devui-nav-tabs li,.devui-nav-pills li{cursor:pointer;border:2px solid transparent}.devui-nav-tabs li a,.devui-nav-pills li a{cursor:pointer;border:none;line-height:30px;background-color:transparent;padding:0;text-decoration:none;color:var(--devui-text, #252b3a)}.devui-nav-tabs li a:hover,.devui-nav-tabs li a:focus,.devui-nav-tabs li a:active,.devui-nav-pills li a:hover,.devui-nav-pills li a:focus,.devui-nav-pills li a:active{outline:none}.devui-nav-tabs li.disabled a,.devui-nav-pills li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-tabs li.active a,.devui-nav-tabs li:hover:not(.disabled) a,.devui-nav-pills li.active a,.devui-nav-pills li:hover:not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-nav-tabs li:after,.devui-nav-pills li:after{content:"";display:block;margin:auto;height:2px;width:0;background:transparent;transition:width .3s ease-out,background-color .3s ease-out}.devui-nav-tabs li.active:after,.devui-nav-pills li.active:after{width:100%;background:var(--devui-brand, #5e7ce0)}.devui-nav-options{font-size:var(--devui-font-size, 12px);background:transparent;border:none;border-radius:var(--devui-border-radius, 2px)}.devui-nav-options>li{cursor:pointer;border:1px solid var(--devui-line, #adb0b8);border-left-width:0;background-color:var(--devui-base-bg, #ffffff);float:left}.devui-nav-options>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-nav-options>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-nav-options>li>a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:26px;padding:0 15px}.devui-nav-options>li>a:hover,.devui-nav-options>li>a:focus,.devui-nav-options>li>a:active{outline:none}.devui-nav-options>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-nav-options>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-options>li.active>a,.devui-nav-options>li:hover:not(.disabled)>a{color:var(--devui-light-text, #ffffff)}.devui-nav-options>li.active>a:hover,.devui-nav-options>li:hover:not(.disabled)>a:hover{color:var(--devui-light-text, #ffffff);background:transparent}.devui-nav-options>li.active{background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-nav-options>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-options>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-options>li:hover:not(.active):not(.disabled){background-color:var(--devui-brand-active, #526ecc);border-color:var(--devui-brand-active, #526ecc)}.devui-nav-options>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-nav-slider{font-size:var(--devui-font-size, 12px);border:none;border-radius:var(--devui-border-radius, 2px);background:var(--devui-list-item-hover-bg, #f2f5fc);width:fit-content;display:flex!important;align-items:center;position:relative}.devui-nav-slider>li{cursor:pointer;margin:2px;float:left;position:relative;z-index:1}.devui-nav-slider>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-nav-slider>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-nav-slider>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:28px;padding:0 15px}.devui-nav-slider>li a:hover,.devui-nav-slider>li a:focus,.devui-nav-slider>li a:active{outline:none}.devui-nav-slider>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-nav-slider>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-slider>li.active a,.devui-nav-slider>li:hover:not(.disabled) a{color:var(--devui-brand-active, #526ecc)}.devui-nav-slider>li.active a:hover,.devui-nav-slider>li:hover:not(.disabled) a:hover{color:var(--devui-brand-active, #526ecc);background:transparent}.devui-nav-slider>li.active:not(:first-child):before,.devui-nav-slider>li:hover:not(.disabled):not(:first-child):before{content:"";display:block;top:-1px;left:-1px;width:1px;height:"calc(100% + 2px)";position:absolute}.devui-nav-slider>li.active{text-shadow:0 0 .7px var(--devui-brand, #5e7ce0)}.devui-nav-slider>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-slider>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-slider>li:hover:not(.active):not(.disabled){color:var(--devui-brand-active, #526ecc)}.devui-nav-slider>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-nav-wrapped{font-size:var(--devui-font-size, 12px);background:transparent;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6);background-color:var(--devui-base-bg, #ffffff)}.devui-nav-wrapped>li{cursor:pointer;float:left;position:relative;padding:8px 16px}.devui-nav-wrapped>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0}.devui-nav-wrapped>li a:hover,.devui-nav-wrapped>li a:focus,.devui-nav-wrapped>li a:active{outline:none}.devui-nav-wrapped>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-nav-wrapped>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-wrapped>li.active{border:1px solid var(--devui-dividing-line, #dfe1e6);background:var(--devui-global-bg, #f3f6f8);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;font-weight:700;margin:-1px;border-bottom-color:transparent}.devui-nav-wrapped>li.active a{color:var(--devui-brand-active, #526ecc)}.devui-nav-wrapped>li:hover:not(.active):not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-nav{list-style:none;padding-left:0}.devui-nav li a{text-decoration:none}.devui-nav li a.custom-width{display:inline-block;padding:0;text-align:center}.devui-nav-tabs:not(.devui-nav-stacked){border-bottom:1px var(--devui-line, #adb0b8) solid}.devui-nav-tabs:not(.devui-nav-stacked) li{float:left;margin-left:32px;margin-bottom:-3px}.devui-nav-tabs:not(.devui-nav-stacked) li:first-child{margin-left:0}.devui-nav-pills:not(.devui-nav-stacked)>li{float:left;margin-left:32px}.devui-nav-pills:not(.devui-nav-stacked)>li:first-child{margin-left:0}.devui-nav:before,.devui-nav:after{content:" ";display:table}.devui-nav:after{clear:both}.devui-tab-content{margin-top:20px}.devui-nav-slider-animation{position:absolute;z-index:0;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);box-shadow:0 2px 4px 0 var(--devui-light-shadow, rgba(0, 0, 0, .1));top:1px;height:30px;transition:left .3s cubic-bezier(.645,.045,.355,1),width .3s cubic-bezier(.645,.045,.355,1)}.devui-color-picker-palette{position:relative;width:100%}.devui-color-picker-palette__white,.devui-color-picker-palette__black{position:absolute;top:0;left:0;right:0;bottom:0}.devui-color-picker-palette__black{background:linear-gradient(0deg,#000,transparent)}.devui-color-picker-palette__white{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}.devui-color-picker-palette-handler{position:absolute}.devui-color-picker-palette-handler div{width:10px;height:10px;border-radius:50%;border:2px solid #ffffff;box-shadow:0 1px 4px #0000005e;cursor:pointer}.devui-color-picker-hue-slider{position:relative;margin:13px 0;width:100%;height:14px;box-shadow:2px 0 8px #00000014;border-radius:15px}.devui-color-picker-hue-slider.transparent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);background-repeat:repeat}.devui-color-picker-hue-slider__bar{position:relative;width:100%;height:100%;border-radius:15px;background:-webkit-linear-gradient(left,red 0%,yellow 16.66%,lime 33.33%,aqua 50%,blue 66.66%,fuchsia 83.33%,red 100%);background:-moz-linear-gradient(left,red 0%,yellow 16.66%,lime 33.33%,aqua 50%,blue 66.66%,fuchsia 83.33%,red 100%);background:-ms-linear-gradient(left,red 0%,yellow 16.66%,lime 33.33%,aqua 50%,blue 66.66%,fuchsia 83.33%,red 100%)}.devui-color-picker-hue-slider__bar-pointer{position:absolute;width:14px;height:14px}.devui-color-picker-hue-slider__bar-handle{width:14px;height:14px;border-radius:6px;transform:translate(-7px,-2px);background-color:#f8f8f8;margin-top:2px;box-shadow:0 1px 4px #0000005e;cursor:pointer}.devui-color-picker-hue-slider__bar-handle.vertical{transform:translateY(-7px);margin-top:0}.devui-color-picker-alpha-slider{position:relative;margin-bottom:15px;width:100%;height:14px;box-shadow:2px 0 8px #00000014;border-radius:15px}.devui-color-picker-alpha-slider.transparent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);background-repeat:repeat}.devui-color-picker-alpha-slider__bar{position:relative;width:100%;height:100%;border-radius:15px}.devui-color-picker-alpha-slider__bar-pointer{position:absolute;width:14px;height:14px}.devui-color-picker-alpha-slider__bar-handle{width:14px;height:14px;border-radius:6px;transform:translate(-7px,-2px);background-color:#f8f8f8;margin-top:2px;box-shadow:0 1px 4px #0000005e;cursor:pointer}.devui-color-picker-alpha-slider__bar-handle.vertical{transform:translateY(-7px);margin-top:0}.devui-color-picker-edit{justify-content:space-between;align-items:center}.devui-color-picker-edit-text{display:inline-block;width:50px;padding:0 10px;user-select:none}.devui-color-picker-edit-name{user-select:none;cursor:pointer;display:flex;align-items:center;justify-content:space-around;width:50px}.devui-color-picker-edit-flex{display:flex;align-items:center}.devui-color-picker-edit-input{flex:1;padding:0 5px}.devui-color-picker-edit-input input{border:none;outline:none;width:100%;text-align:center}.devui-color-picker-edit-input-wrapper{width:100%;border:1px solid rgba(0,0,0,.2);padding:2px}.devui-color-picker-edit-input-wrapper:focus-within{border:1px solid var(--devui-primary)}.devui-color-picker-edit-input.string-input .devui-color-picker-edit-input-wrapper{border-radius:5px}.devui-color-picker-edit-input.number-input .devui-color-picker-edit-input-wrapper{border-radius:0}.devui-color-picker-edit-input.number-input .devui-color-picker-edit-input-wrapper:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.devui-color-picker-edit-input.number-input .devui-color-picker-edit-input-wrapper:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.devui-color-picker-basic{flex-wrap:wrap;align-items:center}.devui-color-picker-basic-div{box-sizing:content-box;margin:4px;width:20px;height:20px;border:solid 1px #e7e7e7;cursor:pointer;border-radius:1px}.devui-color-picker-panel{width:270px;padding:12px;border-radius:4px;box-shadow:0 3px 5px -1px #0000001a,0 5px 8px #0000001a,0 1px 14px #0000001a}.devui-color-picker-history{margin-top:10px}.devui-color-picker-history_color-box{cursor:pointer;margin:5px;height:20px;width:20px;border:solid 1px #e7e7e7}.devui-color-picker-history_color-box.transparent{background:linear-gradient(to bottom right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) calc(50% - 1.5px),#f18887 50%,rgba(0,0,0,0) calc(50% + 1.5px),rgba(0,0,0,0) 100%)}.devui-color-picker{position:relative}.devui-color-picker-position{position:absolute;z-index:9999;background-color:var(--devui-connected-overlay-bg, #ffffff);top:0}.devui-color-picker-color-value{display:flex;position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:bold;color:#cc0f0f}.devui-color-picker-container{padding:3px;border:1px solid #e0e0e6;border-radius:3px}.devui-color-picker-container-wrap{width:100%;height:26px;box-sizing:content-box;box-shadow:3px 0 5px #00000014;position:relative;cursor:pointer;overflow:hidden;display:inline-block;vertical-align:middle}.devui-color-picker-container-wrap-current-color{top:0;right:0;left:0;position:absolute;z-index:3;width:100%;height:100%}.devui-color-picker-container-wrap-current-color-transparent{top:0;right:0;left:0;overflow:hidden;padding:3px;width:100%;height:100%;position:absolute;z-index:2}.devui-color-picker-container-wrap-transparent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);background-repeat:repeat}.color-picker-transition-enter-from,.color-picker-transition-leave-to{opacity:0}.color-picker-transition-enter-to,.color-picker-transition-leave-from{opacity:1}.color-picker-transition-enter-active,.color-picker-transition-leave-active{transition:opacity .2s ease-in-out}

package/dragdrop/index.es.js

@@ -1,22 +1,146 @@
+const shadowId = "shadow0611";
+function getElementStyle(id, styleName) {
+  return document.getElementById(id).currentStyle ? document.getElementById(id).currentStyle[styleName] : window.getComputedStyle(document.getElementById(id), styleName);
+}
+function createShadow(originId) {
+  const shadow = document.createElement("div");
+  shadow.id = shadowId;
+  shadow.style.background = "rgb(206, 215, 255)";
+  shadow.style.width = getElementStyle(originId, "width");
+  shadow.style.height = "20px";
+  return shadow;
+}
+function changeDragState(el, originId, dragStart, drag, dragover, drop, shouldCreateShadow, dragFlag) {
+  el.dataset.originId = originId;
+  el.dataset.dragStart = dragStart;
+  el.dataset.dragover = dragover;
+  el.dataset.drop = drop;
+  el.dataset.shouldCreateShadow = shouldCreateShadow;
+  el.dataset.dragFlag = dragFlag;
+}
+function computeCompareElementHeight(compareElement) {
+  return compareElement.getBoundingClientRect().top + Math.floor(compareElement.offsetHeight / 2);
+}
+function createInsertSortableShadow(sortDropArea, mouseObject, originId) {
+  const sortDropAreaArr = [...sortDropArea.children];
+  if (sortDropAreaArr.length == 0) {
+    if (!document.getElementById(shadowId)) {
+      const shadowElement = createShadow(originId);
+      sortDropArea.appendChild(shadowElement);
+    }
+  } else {
+    for (let index2 = 0; index2 < sortDropAreaArr.length; index2++) {
+      const compareHeight = computeCompareElementHeight(sortDropAreaArr[index2]);
+      document.getElementById(shadowId) ? sortDropArea.removeChild(document.getElementById(shadowId)) : null;
+      if (index2 == sortDropAreaArr.length - 1) {
+        sortDropArea.appendChild(createShadow(originId));
+        break;
+      }
+      if (Math.floor(mouseObject.clientY) <= compareHeight) {
+        sortDropArea.insertBefore(createShadow(originId), sortDropAreaArr[index2]);
+        break;
+      }
+    }
+  }
+}
+function insertDragElement(dropAreaContainer, dragId, mouseObject) {
+  for (let index2 = 0; index2 < [...dropAreaContainer.children].length; index2++) {
+    if (index2 == [...dropAreaContainer.children].length - 1) {
+      dropAreaContainer.appendChild(document.getElementById(dragId));
+      break;
+    }
+    if (Math.floor(mouseObject.clientY) <= computeCompareElementHeight([...dropAreaContainer.children][index2])) {
+      dropAreaContainer.insertBefore(document.getElementById(dragId), [...dropAreaContainer.children][index2]);
+      break;
+    }
+  }
+}
+function deleteInsertedSortableShadow(dropSortArea) {
+  if (dropSortArea) {
+    if (document.getElementById(shadowId)) {
+      if (dropSortArea.contains(document.getElementById(shadowId))) {
+        dropSortArea.removeChild(document.getElementById(shadowId));
+      }
+    }
+  }
+}
 var DraggableDirective = {
-  mounted(el) {
+  mounted(el, binding) {
     el.setAttribute("draggable", "true");
     el.style.cursor = "grab";
-    el.addEventListener("dragstart", (event) => {
-      event.dataTransfer.setData("originId", el.id);
-    });
+    el.addEventListener("drag", () => {
+      changeDragState(el, el.id, "true", "true", "false", "false", "false", "true");
+      if (binding.instance.$root.dropElement && document.getElementById(shadowId)) {
+        deleteInsertedSortableShadow(binding.instance.$root.dropElement);
+        binding.instance.$root.dropElement = null;
+      }
+    }, false);
+    el.addEventListener("dragstart", () => {
+      changeDragState(el, el.id, "true", "true", "false", "false", "false", "false");
+      binding.instance.$root.identity = el.id;
+      el.dataset.dragArea = el.parentNode.className;
+    }, false);
   }
 };
 var DroppableDirective = {
-  mounted(el) {
+  mounted(el, binding) {
     el.addEventListener("dragover", (event) => {
       event.preventDefault();
-    });
+      const dragId = binding.instance.$root.identity;
+      changeDragState(document.getElementById(dragId), dragId, "true", "false", "true", "false", "false", "false");
+      document.getElementById(dragId).dataset.dropArea = [...el.childNodes][1].className;
+    }, false);
     el.addEventListener("drop", (event) => {
-      const originId = event.dataTransfer.getData("originId");
-      const originNodeCopy = document.getElementById(originId).cloneNode(true);
+      event.preventDefault();
+      const dragId = binding.instance.$root.identity;
+      if (document.getElementById(dragId).dataset.dropArea == document.getElementById(dragId).dataset.dragArea) {
+        return;
+      }
+      const childrenArr = [...Array.from(el.children)[1].children];
+      if (childrenArr.length > 0) {
+        for (let index2 = 0; index2 < childrenArr.length; index2++) {
+          const childrenYRange = childrenArr[index2].getBoundingClientRect().top + childrenArr[index2].offsetHeight / 2;
+          if (parseFloat(event.clientY) < parseFloat(childrenYRange)) {
+            el.children[1].insertBefore(document.getElementById(dragId), childrenArr[index2]);
+            break;
+          }
+          if (index2 === childrenArr.length - 1) {
+            el.children[1].appendChild(document.getElementById(dragId));
+          }
+        }
+      } else {
+        el.childNodes[1].appendChild(document.getElementById(dragId));
+      }
+    });
+  }
+};
+var SortableDirective = {
+  mounted(el, binding) {
+    el.addEventListener("dragover", function(event) {
+      event.preventDefault();
       const targetNode = event.target;
-      targetNode.append(originNodeCopy);
+      const dragId = binding.instance.$root.identity;
+      if (!binding.instance.$root.dropElement) {
+        binding.instance.$root.dropElement = [...el.childNodes][1];
+      }
+      changeDragState(document.getElementById(binding.instance.$root.identity), binding.instance.$root.identity, "true", "false", "true", "false", "true", "false");
+      const { dragover, shouldCreateShadow } = document.getElementById(dragId).dataset;
+      if (dragover == "true") {
+        if (shouldCreateShadow == "true") {
+          createInsertSortableShadow([...targetNode.children][1], event, dragId);
+        }
+      }
+    });
+    el.addEventListener("drop", function(event) {
+      const dropArea = [...el.childNodes][1];
+      const dragId = binding.instance.$root.identity;
+      dropArea.removeChild(document.getElementById(shadowId));
+      if ([...dropArea.childNodes].length == 0) {
+        dropArea.appendChild(document.getElementById(dragId));
+      } else {
+        insertDragElement(dropArea, dragId, event);
+      }
+      changeDragState(document.getElementById(dragId), dragId, "false", "false", "false", "true", "false", "false");
     });
   }
 };
@@ -27,6 +151,7 @@ var index = {
   install(app) {
     app.directive("DDraggable", DraggableDirective);
     app.directive("DDroppable", DroppableDirective);
+    app.directive("DSortable", SortableDirective);
   }
 };
-export { DraggableDirective, DroppableDirective, index as default };
+export { DraggableDirective, DroppableDirective, SortableDirective, index as default };

package/dragdrop/index.umd.js

@@ -1 +1 @@
-(function(t,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(t=typeof globalThis!="undefined"?globalThis:t||self,r(t.index={}))})(this,function(t){"use strict";var r={mounted(e){e.setAttribute("draggable","true"),e.style.cursor="grab",e.addEventListener("dragstart",d=>{d.dataTransfer.setData("originId",e.id)})}},i={mounted(e){e.addEventListener("dragover",d=>{d.preventDefault()}),e.addEventListener("drop",d=>{const n=d.dataTransfer.getData("originId"),o=document.getElementById(n).cloneNode(!0);d.target.append(o)})}},a={title:"Dragdrop \u62D6\u62FD",category:"\u901A\u7528",status:"10%",install(e){e.directive("DDraggable",r),e.directive("DDroppable",i)}};t.DraggableDirective=r,t.DroppableDirective=i,t.default=a,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(l,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(l=typeof globalThis!="undefined"?globalThis:l||self,r(l.index={}))})(this,function(l){"use strict";const r="shadow0611";function h(e,t){return document.getElementById(e).currentStyle?document.getElementById(e).currentStyle[t]:window.getComputedStyle(document.getElementById(e),t)}function s(e){const t=document.createElement("div");return t.id=r,t.style.background="rgb(206, 215, 255)",t.style.width=h(e,"width"),t.style.height="20px",t}function i(e,t,a,n,d,o,c,I){e.dataset.originId=t,e.dataset.dragStart=a,e.dataset.dragover=d,e.dataset.drop=o,e.dataset.shouldCreateShadow=c,e.dataset.dragFlag=I}function u(e){return e.getBoundingClientRect().top+Math.floor(e.offsetHeight/2)}function y(e,t,a){const n=[...e.children];if(n.length==0){if(!document.getElementById(r)){const d=s(a);e.appendChild(d)}}else for(let d=0;d<n.length;d++){const o=u(n[d]);if(document.getElementById(r)&&e.removeChild(document.getElementById(r)),d==n.length-1){e.appendChild(s(a));break}if(Math.floor(t.clientY)<=o){e.insertBefore(s(a),n[d]);break}}}function E(e,t,a){for(let n=0;n<[...e.children].length;n++){if(n==[...e.children].length-1){e.appendChild(document.getElementById(t));break}if(Math.floor(a.clientY)<=u([...e.children][n])){e.insertBefore(document.getElementById(t),[...e.children][n]);break}}}function p(e){e&&document.getElementById(r)&&e.contains(document.getElementById(r))&&e.removeChild(document.getElementById(r))}var f={mounted(e,t){e.setAttribute("draggable","true"),e.style.cursor="grab",e.addEventListener("drag",()=>{i(e,e.id,"true","true","false","false","false","true"),t.instance.$root.dropElement&&document.getElementById(r)&&(p(t.instance.$root.dropElement),t.instance.$root.dropElement=null)},!1),e.addEventListener("dragstart",()=>{i(e,e.id,"true","true","false","false","false","false"),t.instance.$root.identity=e.id,e.dataset.dragArea=e.parentNode.className},!1)}},m={mounted(e,t){e.addEventListener("dragover",a=>{a.preventDefault();const n=t.instance.$root.identity;i(document.getElementById(n),n,"true","false","true","false","false","false"),document.getElementById(n).dataset.dropArea=[...e.childNodes][1].className},!1),e.addEventListener("drop",a=>{a.preventDefault();const n=t.instance.$root.identity;if(document.getElementById(n).dataset.dropArea==document.getElementById(n).dataset.dragArea)return;const d=[...Array.from(e.children)[1].children];if(d.length>0)for(let o=0;o<d.length;o++){const c=d[o].getBoundingClientRect().top+d[o].offsetHeight/2;if(parseFloat(a.clientY)<parseFloat(c)){e.children[1].insertBefore(document.getElementById(n),d[o]);break}o===d.length-1&&e.children[1].appendChild(document.getElementById(n))}else e.childNodes[1].appendChild(document.getElementById(n))})}},g={mounted(e,t){e.addEventListener("dragover",function(a){a.preventDefault();const n=a.target,d=t.instance.$root.identity;t.instance.$root.dropElement||(t.instance.$root.dropElement=[...e.childNodes][1]),i(document.getElementById(t.instance.$root.identity),t.instance.$root.identity,"true","false","true","false","true","false");const{dragover:o,shouldCreateShadow:c}=document.getElementById(d).dataset;o=="true"&&c=="true"&&y([...n.children][1],a,d)}),e.addEventListener("drop",function(a){const n=[...e.childNodes][1],d=t.instance.$root.identity;n.removeChild(document.getElementById(r)),[...n.childNodes].length==0?n.appendChild(document.getElementById(d)):E(n,d,a),i(document.getElementById(d),d,"false","false","false","true","false","false")})}},B={title:"Dragdrop \u62D6\u62FD",category:"\u901A\u7528",status:"10%",install(e){e.directive("DDraggable",f),e.directive("DDroppable",m),e.directive("DSortable",g)}};l.DraggableDirective=f,l.DroppableDirective=m,l.SortableDirective=g,l.default=B,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});

package/drawer/index.es.js

@@ -14,7 +14,11 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, ref, inject, computed, createVNode, createTextVNode, toRefs, watch, provide, onUnmounted, Teleport } from "vue";
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineComponent, ref, inject, computed, createVNode, createTextVNode, createApp, toRefs, watch, provide, onUnmounted, Teleport } from "vue";
 const drawerProps = {
   width: {
     type: String,
@@ -188,6 +192,33 @@ var DrawerBody = defineComponent({
     }, [slots.default ? slots.default() : null])])])]);
   }
 });
+const inBrowser = typeof window !== "undefined";
+function createDrawerApp(props) {
+  return createApp(Drawer, __spreadValues({}, props));
+}
+class DrawerService {
+  static show(props) {
+    this.$div = document.createElement("div");
+    this.$body.appendChild(this.$div);
+    this.drawer = createDrawerApp(props);
+    this.drawer.mount(this.$div);
+  }
+  static hide() {
+    var _a;
+    (_a = this.drawer) == null ? void 0 : _a.unmount();
+    this.drawer = null;
+    if (this.$div) {
+      this.$body.removeChild(this.$div);
+    }
+    this.$div = null;
+  }
+}
+__publicField(DrawerService, "$body");
+__publicField(DrawerService, "$div", null);
+__publicField(DrawerService, "drawer", null);
+if (inBrowser) {
+  DrawerService.$body = document.body;
+}
 var Drawer = defineComponent({
   name: "DDrawer",
   props: drawerProps,
@@ -211,10 +242,10 @@ var Drawer = defineComponent({
     };
     const closeDrawer = async () => {
       var _a;
+      DrawerService.hide();
       const beforeHidden = props.beforeHidden;
-      let result = (_a = typeof beforeHidden === "function" ? beforeHidden() : beforeHidden) != null ? _a : true;
+      let result = (_a = typeof beforeHidden === "function" ? beforeHidden() : beforeHidden) != null ? _a : false;
       if (result instanceof Promise) {
-        console.log(result);
         result = await result;
       }
       if (result)
@@ -266,7 +297,7 @@ var Drawer = defineComponent({
       "to": "body"
     }, {
       default: () => [createVNode(DrawerBody, null, {
-        default: () => [createVNode(DrawerHeader, {
+        default: () => [this.slots.header ? this.slots.header() : createVNode(DrawerHeader, {
           "onToggleFullScreen": fullScreenEvent,
           "onClose": closeDrawer
         }, null), this.slots.default ? this.slots.default() : createVNode(DrawerContainer, null, null)]
@@ -280,9 +311,10 @@ Drawer.install = function(app) {
 var index = {
   title: "Drawer \u62BD\u5C49\u677F",
   category: "\u53CD\u9988",
-  status: "30%",
+  status: "60%",
   install(app) {
     app.use(Drawer);
+    app.config.globalProperties.$drawerService = DrawerService;
   }
 };
-export { Drawer, index as default };
+export { Drawer, DrawerService, index as default };

package/drawer/index.umd.js

@@ -1 +1 @@
-var j=Object.defineProperty;var D=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var N=(n,e,o)=>e in n?j(n,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[e]=o,S=(n,e)=>{for(var o in e||(e={}))x.call(e,o)&&N(n,o,e[o]);if(D)for(var o of D(e))B.call(e,o)&&N(n,o,e[o]);return n};(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.index={},n.Vue))})(this,function(n,e){"use strict";const o={width:{type:String,default:"300px"},visible:{type:Boolean,default:!1},zIndex:{type:Number,default:1e3},isCover:{type:Boolean,default:!0},escKeyCloseable:{type:Boolean,default:!0},position:{type:String,default:"left"},backdropCloseable:{type:Boolean,default:!0},beforeHidden:{type:[Promise,Function]}};var z="",V=e.defineComponent({name:"DrawerHeader",emits:["toggleFullScreen","close"],setup(r,t){const l=e.ref(!1),s=e.inject("visible");return{fullScreenClassName:e.computed(()=>l.value?"icon icon-minimize":"icon icon-maxmize"),visible:s,handleFullScreen:f=>{f.stopPropagation(),l.value=!l.value,t.emit("toggleFullScreen")},handleDrawerClose:()=>{t.emit("close")}}},render(){const{handleFullScreen:r,handleDrawerClose:t,visible:l,fullScreenClassName:s}=this;return l?e.createVNode("div",{class:"devui-drawer-header"},[e.createVNode("div",{class:"devui-drawer-header-item"},[e.createVNode("span",{class:"devui-drawer-header-item icon icon-more-operate"},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:r},[e.createVNode("span",{class:s},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:t},[e.createVNode("span",{class:"icon icon-close"},null)])]):null}}),g=e.defineComponent({name:"DrawerContainer",setup(){return{visible:e.inject("visible")}},render(){const{visible:r}=this;return r?e.createVNode("div",null,[e.createTextVNode("\u5185\u5BB9\u533A\u57DF")]):null}}),E="",k=e.defineComponent({name:"DrawerBody",setup(r,{slots:t}){const l=e.inject("isFullScreen"),s=e.inject("closeDrawer"),a=e.inject("zindex"),c=e.inject("isCover"),u=e.inject("position"),f=e.inject("width"),C=e.inject("visible"),v=e.inject("backdropCloseable"),d=e.computed(()=>u.value==="right"?{right:0}:{left:0}),b=e.computed(()=>l.value?"100vw":f.value);return{zindex:a,slots:t,isCover:c,navRight:d,navWidth:b,visible:C,clickContent:i=>{i.stopPropagation()},handleDrawerClose:()=>{!v.value||s()}}},render(){const{zindex:r,slots:t,isCover:l,navRight:s,navWidth:a,visible:c,handleDrawerClose:u}=this;return c?e.createVNode("div",{class:"devui-drawer",style:{zIndex:r},onClick:u},[l?e.createVNode("div",{class:"devui-overlay-backdrop"},null):null,e.createVNode("div",{class:"devui-overlay-wrapper"},[e.createVNode("div",{class:"devui-drawer-nav",style:S({width:a},s)},[e.createVNode("div",{class:"devui-drawer-content",onClick:this.clickContent},[t.default?t.default():null])])])]):null}}),p=e.defineComponent({name:"DDrawer",props:o,emits:["close","update:visible","afterOpened"],setup(r,{emit:t,slots:l}){const{width:s,visible:a,zIndex:c,isCover:u,escKeyCloseable:f,position:C,backdropCloseable:v}=e.toRefs(r),d=e.ref(!1),b=()=>{d.value=!d.value},h=async()=>{var y;const i=r.beforeHidden;let w=(y=typeof i=="function"?i():i)!=null?y:!0;w instanceof Promise&&(console.log(w),w=await w),!w&&(t("update:visible",!1),t("close"))},m=i=>{i.code==="Escape"&&h()};return e.watch(a,i=>{i&&(t("afterOpened"),d.value=!1),f&&i?document.addEventListener("keyup",m):document.removeEventListener("keyup",m)}),e.provide("closeDrawer",h),e.provide("zindex",c),e.provide("isCover",u),e.provide("position",C),e.provide("width",s),e.provide("visible",a),e.provide("isFullScreen",d),e.provide("backdropCloseable",v),e.onUnmounted(()=>{document.removeEventListener("keyup",m)}),{isFullScreen:d,visible:a,slots:l,fullScreenEvent:b,closeDrawer:h}},render(){const r=this.fullScreenEvent,t=this.closeDrawer;return this.visible?e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode(k,null,{default:()=>[e.createVNode(V,{onToggleFullScreen:r,onClose:t},null),this.slots.default?this.slots.default():e.createVNode(g,null,null)]})]}):null}});p.install=function(r){r.component(p.name,p)};var F={title:"Drawer \u62BD\u5C49\u677F",category:"\u53CD\u9988",status:"30%",install(r){r.use(p)}};n.Drawer=p,n.default=F,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+var z=Object.defineProperty;var g=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var N=(n,e,i)=>e in n?z(n,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[e]=i,S=(n,e)=>{for(var i in e||(e={}))E.call(e,i)&&N(n,i,e[i]);if(g)for(var i of g(e))P.call(e,i)&&N(n,i,e[i]);return n};var b=(n,e,i)=>(N(n,typeof e!="symbol"?e+"":e,i),i);(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.index={},n.Vue))})(this,function(n,e){"use strict";const i={width:{type:String,default:"300px"},visible:{type:Boolean,default:!1},zIndex:{type:Number,default:1e3},isCover:{type:Boolean,default:!0},escKeyCloseable:{type:Boolean,default:!0},position:{type:String,default:"left"},backdropCloseable:{type:Boolean,default:!0},beforeHidden:{type:[Promise,Function]}};var H="",k=e.defineComponent({name:"DrawerHeader",emits:["toggleFullScreen","close"],setup(t,r){const o=e.ref(!1),s=e.inject("visible");return{fullScreenClassName:e.computed(()=>o.value?"icon icon-minimize":"icon icon-maxmize"),visible:s,handleFullScreen:h=>{h.stopPropagation(),o.value=!o.value,r.emit("toggleFullScreen")},handleDrawerClose:()=>{r.emit("close")}}},render(){const{handleFullScreen:t,handleDrawerClose:r,visible:o,fullScreenClassName:s}=this;return o?e.createVNode("div",{class:"devui-drawer-header"},[e.createVNode("div",{class:"devui-drawer-header-item"},[e.createVNode("span",{class:"devui-drawer-header-item icon icon-more-operate"},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:t},[e.createVNode("span",{class:s},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:r},[e.createVNode("span",{class:"icon icon-close"},null)])]):null}}),F=e.defineComponent({name:"DrawerContainer",setup(){return{visible:e.inject("visible")}},render(){const{visible:t}=this;return t?e.createVNode("div",null,[e.createTextVNode("\u5185\u5BB9\u533A\u57DF")]):null}}),T="",j=e.defineComponent({name:"DrawerBody",setup(t,{slots:r}){const o=e.inject("isFullScreen"),s=e.inject("closeDrawer"),a=e.inject("zindex"),p=e.inject("isCover"),f=e.inject("position"),h=e.inject("width"),C=e.inject("visible"),y=e.inject("backdropCloseable"),c=e.computed(()=>f.value==="right"?{right:0}:{left:0}),D=e.computed(()=>o.value?"100vw":h.value);return{zindex:a,slots:r,isCover:p,navRight:c,navWidth:D,visible:C,clickContent:l=>{l.stopPropagation()},handleDrawerClose:()=>{!y.value||s()}}},render(){const{zindex:t,slots:r,isCover:o,navRight:s,navWidth:a,visible:p,handleDrawerClose:f}=this;return p?e.createVNode("div",{class:"devui-drawer",style:{zIndex:t},onClick:f},[o?e.createVNode("div",{class:"devui-overlay-backdrop"},null):null,e.createVNode("div",{class:"devui-overlay-wrapper"},[e.createVNode("div",{class:"devui-drawer-nav",style:S({width:a},s)},[e.createVNode("div",{class:"devui-drawer-content",onClick:this.clickContent},[r.default?r.default():null])])])]):null}});const $=typeof window!="undefined";function B(t){return e.createApp(u,S({},t))}class d{static show(r){this.$div=document.createElement("div"),this.$body.appendChild(this.$div),this.drawer=B(r),this.drawer.mount(this.$div)}static hide(){var r;(r=this.drawer)==null||r.unmount(),this.drawer=null,this.$div&&this.$body.removeChild(this.$div),this.$div=null}}b(d,"$body"),b(d,"$div",null),b(d,"drawer",null),$&&(d.$body=document.body);var u=e.defineComponent({name:"DDrawer",props:i,emits:["close","update:visible","afterOpened"],setup(t,{emit:r,slots:o}){const{width:s,visible:a,zIndex:p,isCover:f,escKeyCloseable:h,position:C,backdropCloseable:y}=e.toRefs(t),c=e.ref(!1),D=()=>{c.value=!c.value},w=async()=>{var V;d.hide();const l=t.beforeHidden;let v=(V=typeof l=="function"?l():l)!=null?V:!1;v instanceof Promise&&(v=await v),!v&&(r("update:visible",!1),r("close"))},m=l=>{l.code==="Escape"&&w()};return e.watch(a,l=>{l&&(r("afterOpened"),c.value=!1),h&&l?document.addEventListener("keyup",m):document.removeEventListener("keyup",m)}),e.provide("closeDrawer",w),e.provide("zindex",p),e.provide("isCover",f),e.provide("position",C),e.provide("width",s),e.provide("visible",a),e.provide("isFullScreen",c),e.provide("backdropCloseable",y),e.onUnmounted(()=>{document.removeEventListener("keyup",m)}),{isFullScreen:c,visible:a,slots:o,fullScreenEvent:D,closeDrawer:w}},render(){const t=this.fullScreenEvent,r=this.closeDrawer;return this.visible?e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode(j,null,{default:()=>[this.slots.header?this.slots.header():e.createVNode(k,{onToggleFullScreen:t,onClose:r},null),this.slots.default?this.slots.default():e.createVNode(F,null,null)]})]}):null}});u.install=function(t){t.component(u.name,u)};var x={title:"Drawer \u62BD\u5C49\u677F",category:"\u53CD\u9988",status:"60%",install(t){t.use(u),t.config.globalProperties.$drawerService=d}};n.Drawer=u,n.DrawerService=d,n.default=x,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});

package/dropdown/index.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { ref, watch, defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, onUnmounted, withDirectives, vShow, reactive, toRef, isRef, toRefs, Fragment } from "vue";
+import { ref, watch, defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, onUnmounted, withDirectives, vShow, reactive, toRef, isRef, toRefs } from "vue";
 const dropdownProps = {
   origin: {
     type: Object
@@ -45,6 +45,10 @@ const dropdownProps = {
   showAnimation: {
     type: Boolean,
     default: true
+  },
+  width: {
+    type: [Number, String],
+    default: "102px"
   }
 };
 function isComponent(target) {
@@ -328,7 +332,7 @@ const FlexibleOverlay = defineComponent({
       overlayClass,
       handleBackdropClick,
       handleOverlayBubbleCancel
-    } = useOverlayLogic(props);
+    } = useOverlayLogic(props, ctx);
     return () => createVNode(CommonOverlay, null, {
       default: () => [withDirectives(createVNode("div", {
         "style": props.backgroundStyle,
@@ -490,27 +494,31 @@ var Dropdown = defineComponent({
     const animatedVisible = computed(() => {
       return props.showAnimation ? visible.value : true;
     });
-    return () => {
-      return createVNode(Fragment, null, [createVNode(FlexibleOverlay, {
-        "origin": props.origin,
-        "visible": visible.value,
-        "onUpdate:visible": ($event) => visible.value = $event,
-        "position": position,
-        "hasBackdrop": false
+    const wrapStyle = computed(() => typeof props.width === "string" ? {
+      width: props.width
+    } : {
+      width: `${props.width}px`
+    });
+    return () => createVNode(FlexibleOverlay, {
+      "origin": props.origin,
+      "visible": visible.value,
+      "onUpdate:visible": ($event) => visible.value = $event,
+      "position": position,
+      "hasBackdrop": false
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": "devui-dropdown-fade"
       }, {
-        default: () => [createVNode(Transition, {
-          "name": "devui-dropdown-fade"
-        }, {
-          default: () => {
-            var _a, _b;
-            return [withDirectives(createVNode("div", {
-              "ref": dropdownEl,
-              "style": "min-width:102px"
-            }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, animatedVisible.value]])];
-          }
-        })]
-      })]);
-    };
+        default: () => {
+          var _a, _b;
+          return [withDirectives(createVNode("div", {
+            "ref": dropdownEl,
+            "class": "devui-dropdown-menu-wrap",
+            "style": wrapStyle.value
+          }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, animatedVisible.value]])];
+        }
+      })]
+    });
   }
 });
 Dropdown.install = function(app) {

package/dropdown/index.umd.js

@@ -1 +1 @@
-var Q=Object.defineProperty,W=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var ee=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable;var X=(a,t,v)=>t in a?Q(a,t,{enumerable:!0,configurable:!0,writable:!0,value:v}):a[t]=v,V=(a,t)=>{for(var v in t||(t={}))ee.call(t,v)&&X(a,v,t[v]);if(j)for(var v of j(t))te.call(t,v)&&X(a,v,t[v]);return a},Y=(a,t)=>W(a,Z(t));(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.index={},a.Vue))})(this,function(a,t){"use strict";const v={origin:{type:Object},isOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0}};function F(e){return!!(e==null?void 0:e.$el)}function S(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}function g(e,o,n){return e==null||e.addEventListener(o,n),()=>{e==null||e.removeEventListener(o,n)}}const _=({visible:e,trigger:o,origin:n,closeScope:r,closeOnMouseLeaveMenu:i})=>{const u=t.ref(),l=()=>{r.value!=="none"&&(e.value=!1)};return t.watch([o,n,u],([s,b,f],m,y)=>{const c=S(b);if(!c||!f)return;const p=[g(f,"click",()=>{r.value==="all"&&(e.value=!1)})];if(s==="click")p.push(g(c,"click",()=>e.value=!e.value),g(document,"click",d=>{if(!e.value)return;const h=d.target;c.contains(h)||f.contains(h)||l()}),g(f,"mouseleave",()=>{i.value&&(e.value=!1)}));else if(s==="hover"){let d=!1,h=!1;const O=async w=>{await new Promise(k=>setTimeout(k,50)),!(w==="origin"&&d||w==="dropdown"&&h)&&l()};p.push(g(c,"mouseenter",()=>{h=!0,e.value=!0}),g(c,"mouseleave",()=>{h=!1,i.value||O("origin")}),g(f,"mouseenter",()=>{d=!0,e.value=!0}),g(f,"mouseleave",()=>{d=!1,O("dropdown")}))}y(()=>p.forEach(d=>d()))}),{dropdownEl:u}};var ne="";function M(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const R=t.defineComponent({setup(e,o){return()=>{let n;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},M(n=t.renderSlot(o.slots,"default"))?n:{default:()=>[n]})]})}}}),D={visible:{type:Boolean},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},N=["update:visible","backdropClick"],T=Y(V({},D),{overlayStyle:{type:[String,Object],default:void 0}}),z=V({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},D);function L(e,o){const n=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),r=t.computed(()=>"devui-overlay"),i=l=>{var s;l.preventDefault(),(s=e.onBackdropClick)==null||s.call(e),e.backdropClose&&o.emit("update:visible",!1)},u=l=>l.cancelBubble=!0;return t.onMounted(()=>{const l=document.body,s=l.style.overflow,b=l.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([f,m])=>{if(m){const y=l.getBoundingClientRect().y;f?(l.style.overflowY="scroll",l.style.position=f?"fixed":"",l.style.top=`${y}px`):(l.style.overflowY=s,l.style.position=b,l.style.top="",window.scrollTo(0,-y))}}),t.onUnmounted(()=>{document.body.style.overflow=s})}),{backgroundClass:n,overlayClass:r,handleBackdropClick:i,handleOverlayBubbleCancel:u}}const E=t.defineComponent({name:"DFixedOverlay",props:T,emits:N,setup(e,o){const{backgroundClass:n,overlayClass:r,handleBackdropClick:i,handleOverlayBubbleCancel:u}=L(e,o);return()=>t.createVNode(R,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:n.value,style:e.backgroundStyle,onClick:i},[t.createVNode("div",{class:r.value,style:e.overlayStyle,onClick:u},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}}),B=t.defineComponent({name:"DFlexibleOverlay",props:z,emits:N,setup(e,o){const n=t.ref(null),r=t.reactive({position:"absolute"});t.onMounted(async()=>{const b=(c,p,d)=>{const h=$(c,p,d);r.left=`${h.x}px`,r.top=`${h.y}px`},f=t.computed(()=>{const c=n.value,p=P(e.origin);if(!(!c||!p))return{origin:p,overlay:c}}),m=t.toRef(e,"visible"),y=t.toRef(e,"position");t.watch([f,m,y],async([c,p,d],h,O)=>{if(!p||!c)return;const{origin:w,overlay:k}=c;b(d,k.getBoundingClientRect(),w);const K=[G(()=>b(d,k.getBoundingClientRect(),w)),H(k,x=>b(d,x[0].contentRect,w)),I(w,()=>b(d,k.getBoundingClientRect(),w))];O(()=>{K.forEach(x=>x())})})});const{backgroundClass:i,overlayClass:u,handleBackdropClick:l,handleOverlayBubbleCancel:s}=L(e);return()=>t.createVNode(R,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:i.value,onClick:l},[t.createVNode("div",{ref:n,class:u.value,style:r,onClick:s},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}});function P(e){return e instanceof Element?e:t.isRef(e)?S(e.value):F(e)?S(e):e}function $(e,o,n){const r=A(n),i=U(r,e);return q(i,o,e)}function A(e){if(e instanceof Element)return e.getBoundingClientRect();const o=e.width||0,n=e.height||0;return{top:e.y,bottom:e.y+n,left:e.x,right:e.x+o,height:n,width:o}}function q(e,o,n){let r;const{width:i,height:u}=o;n.overlayX=="center"?r=e.x-i/2:r=n.overlayX=="left"?e.x:e.x-i;let l;return n.overlayY=="center"?l=e.y-u/2:l=n.overlayY=="top"?e.y:e.y-u,{x:r,y:l}}function U(e,o){let n;if(o.originX=="center")n=e.left+e.width/2;else{const i=e.left,u=e.right;n=o.originX=="left"?i:u}let r;return o.originY=="center"?r=e.top+e.height/2:r=o.originY=="top"?e.top:e.bottom,{x:n,y:r}}function G(e){return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}function H(e,o){if(e instanceof Element){const n=new ResizeObserver(o);return n.observe(e),()=>n.disconnect()}return()=>{}}function I(e,o){if(e instanceof Element){const n=new MutationObserver(o);return n.observe(e,{attributeFilter:["style"]}),()=>n.disconnect()}return()=>{}}B.install=function(e){e.component(B.name,B)},E.install=function(e){e.component(E.name,E)};var oe="",C=t.defineComponent({name:"DDropdown",props:v,emits:[],setup(e,o){const{isOpen:n,origin:r,trigger:i,closeScope:u,closeOnMouseLeaveMenu:l}=t.toRefs(e),s=t.ref(!1);t.watch(n,y=>{s.value=y},{immediate:!0});const b={originX:"center",originY:"bottom",overlayX:"center",overlayY:"top"},{dropdownEl:f}=_({visible:s,origin:r,trigger:i,closeScope:u,closeOnMouseLeaveMenu:l}),m=t.computed(()=>e.showAnimation?s.value:!0);return()=>t.createVNode(t.Fragment,null,[t.createVNode(B,{origin:e.origin,visible:s.value,"onUpdate:visible":y=>s.value=y,position:b,hasBackdrop:!1},{default:()=>[t.createVNode(t.Transition,{name:"devui-dropdown-fade"},{default:()=>{var y,c;return[t.withDirectives(t.createVNode("div",{ref:f,style:"min-width:102px"},[(c=(y=o.slots).default)==null?void 0:c.call(y)]),[[t.vShow,m.value]])]}})]})])}});C.install=function(e){e.component(C.name,C)};var J={title:"Dropdown \u4E0B\u62C9\u83DC\u5355",category:"\u5BFC\u822A",status:"10%",install(e){e.use(C)}};a.Dropdown=C,a.default=J,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
+var Q=Object.defineProperty,W=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var ee=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable;var X=(i,t,v)=>t in i?Q(i,t,{enumerable:!0,configurable:!0,writable:!0,value:v}):i[t]=v,R=(i,t)=>{for(var v in t||(t={}))ee.call(t,v)&&X(i,v,t[v]);if(j)for(var v of j(t))te.call(t,v)&&X(i,v,t[v]);return i},Y=(i,t)=>W(i,Z(t));(function(i,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis!="undefined"?globalThis:i||self,t(i.index={},i.Vue))})(this,function(i,t){"use strict";const v={origin:{type:Object},isOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0},width:{type:[Number,String],default:"102px"}};function _(e){return!!(e==null?void 0:e.$el)}function S(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}function w(e,o,n){return e==null||e.addEventListener(o,n),()=>{e==null||e.removeEventListener(o,n)}}const F=({visible:e,trigger:o,origin:n,closeScope:r,closeOnMouseLeaveMenu:s})=>{const u=t.ref(),l=()=>{r.value!=="none"&&(e.value=!1)};return t.watch([o,n,u],([c,b,f],m,h)=>{const a=S(b);if(!a||!f)return;const y=[w(f,"click",()=>{r.value==="all"&&(e.value=!1)})];if(c==="click")y.push(w(a,"click",()=>e.value=!e.value),w(document,"click",d=>{if(!e.value)return;const p=d.target;a.contains(p)||f.contains(p)||l()}),w(f,"mouseleave",()=>{s.value&&(e.value=!1)}));else if(c==="hover"){let d=!1,p=!1;const O=async g=>{await new Promise(k=>setTimeout(k,50)),!(g==="origin"&&d||g==="dropdown"&&p)&&l()};y.push(w(a,"mouseenter",()=>{p=!0,e.value=!0}),w(a,"mouseleave",()=>{p=!1,s.value||O("origin")}),w(f,"mouseenter",()=>{d=!0,e.value=!0}),w(f,"mouseleave",()=>{d=!1,O("dropdown")}))}h(()=>y.forEach(d=>d()))}),{dropdownEl:u}};var ne="";function M(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const V=t.defineComponent({setup(e,o){return()=>{let n;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},M(n=t.renderSlot(o.slots,"default"))?n:{default:()=>[n]})]})}}}),D={visible:{type:Boolean},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},N=["update:visible","backdropClick"],T=Y(R({},D),{overlayStyle:{type:[String,Object],default:void 0}}),$=R({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},D);function L(e,o){const n=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),r=t.computed(()=>"devui-overlay"),s=l=>{var c;l.preventDefault(),(c=e.onBackdropClick)==null||c.call(e),e.backdropClose&&o.emit("update:visible",!1)},u=l=>l.cancelBubble=!0;return t.onMounted(()=>{const l=document.body,c=l.style.overflow,b=l.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([f,m])=>{if(m){const h=l.getBoundingClientRect().y;f?(l.style.overflowY="scroll",l.style.position=f?"fixed":"",l.style.top=`${h}px`):(l.style.overflowY=c,l.style.position=b,l.style.top="",window.scrollTo(0,-h))}}),t.onUnmounted(()=>{document.body.style.overflow=c})}),{backgroundClass:n,overlayClass:r,handleBackdropClick:s,handleOverlayBubbleCancel:u}}const E=t.defineComponent({name:"DFixedOverlay",props:T,emits:N,setup(e,o){const{backgroundClass:n,overlayClass:r,handleBackdropClick:s,handleOverlayBubbleCancel:u}=L(e,o);return()=>t.createVNode(V,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:n.value,style:e.backgroundStyle,onClick:s},[t.createVNode("div",{class:r.value,style:e.overlayStyle,onClick:u},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}}),B=t.defineComponent({name:"DFlexibleOverlay",props:$,emits:N,setup(e,o){const n=t.ref(null),r=t.reactive({position:"absolute"});t.onMounted(async()=>{const b=(a,y,d)=>{const p=P(a,y,d);r.left=`${p.x}px`,r.top=`${p.y}px`},f=t.computed(()=>{const a=n.value,y=z(e.origin);if(!(!a||!y))return{origin:y,overlay:a}}),m=t.toRef(e,"visible"),h=t.toRef(e,"position");t.watch([f,m,h],async([a,y,d],p,O)=>{if(!y||!a)return;const{origin:g,overlay:k}=a;b(d,k.getBoundingClientRect(),g);const K=[G(()=>b(d,k.getBoundingClientRect(),g)),H(k,x=>b(d,x[0].contentRect,g)),I(g,()=>b(d,k.getBoundingClientRect(),g))];O(()=>{K.forEach(x=>x())})})});const{backgroundClass:s,overlayClass:u,handleBackdropClick:l,handleOverlayBubbleCancel:c}=L(e,o);return()=>t.createVNode(V,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:s.value,onClick:l},[t.createVNode("div",{ref:n,class:u.value,style:r,onClick:c},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}});function z(e){return e instanceof Element?e:t.isRef(e)?S(e.value):_(e)?S(e):e}function P(e,o,n){const r=A(n),s=U(r,e);return q(s,o,e)}function A(e){if(e instanceof Element)return e.getBoundingClientRect();const o=e.width||0,n=e.height||0;return{top:e.y,bottom:e.y+n,left:e.x,right:e.x+o,height:n,width:o}}function q(e,o,n){let r;const{width:s,height:u}=o;n.overlayX=="center"?r=e.x-s/2:r=n.overlayX=="left"?e.x:e.x-s;let l;return n.overlayY=="center"?l=e.y-u/2:l=n.overlayY=="top"?e.y:e.y-u,{x:r,y:l}}function U(e,o){let n;if(o.originX=="center")n=e.left+e.width/2;else{const s=e.left,u=e.right;n=o.originX=="left"?s:u}let r;return o.originY=="center"?r=e.top+e.height/2:r=o.originY=="top"?e.top:e.bottom,{x:n,y:r}}function G(e){return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}function H(e,o){if(e instanceof Element){const n=new ResizeObserver(o);return n.observe(e),()=>n.disconnect()}return()=>{}}function I(e,o){if(e instanceof Element){const n=new MutationObserver(o);return n.observe(e,{attributeFilter:["style"]}),()=>n.disconnect()}return()=>{}}B.install=function(e){e.component(B.name,B)},E.install=function(e){e.component(E.name,E)};var oe="",C=t.defineComponent({name:"DDropdown",props:v,emits:[],setup(e,o){const{isOpen:n,origin:r,trigger:s,closeScope:u,closeOnMouseLeaveMenu:l}=t.toRefs(e),c=t.ref(!1);t.watch(n,a=>{c.value=a},{immediate:!0});const b={originX:"center",originY:"bottom",overlayX:"center",overlayY:"top"},{dropdownEl:f}=F({visible:c,origin:r,trigger:s,closeScope:u,closeOnMouseLeaveMenu:l}),m=t.computed(()=>e.showAnimation?c.value:!0),h=t.computed(()=>typeof e.width=="string"?{width:e.width}:{width:`${e.width}px`});return()=>t.createVNode(B,{origin:e.origin,visible:c.value,"onUpdate:visible":a=>c.value=a,position:b,hasBackdrop:!1},{default:()=>[t.createVNode(t.Transition,{name:"devui-dropdown-fade"},{default:()=>{var a,y;return[t.withDirectives(t.createVNode("div",{ref:f,class:"devui-dropdown-menu-wrap",style:h.value},[(y=(a=o.slots).default)==null?void 0:y.call(a)]),[[t.vShow,m.value]])]}})]})}});C.install=function(e){e.component(C.name,C)};var J={title:"Dropdown \u4E0B\u62C9\u83DC\u5355",category:"\u5BFC\u822A",status:"10%",install(e){e.use(C)}};i.Dropdown=C,i.default=J,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});

package/dropdown/style.css

@@ -1 +1 @@
-.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}@keyframes d-dropdown-fade{0%{opacity:0;transform:scaleY(.9999) scaleY(0)}to{opacity:1;transform:scaleY(.8) scaleY(4px)}}.devui-dropdown-fade-enter{opacity:0}.devui-dropdown-fade-enter-active{animation-name:d-dropdown-fade;animation-duration:.3s}.devui-dropdown-fade-leave{opacity:1}.devui-dropdown-fade-leave-active{animation-name:d-dropdown-fade;animation-duration:.3s;animation-direction:reverse}
+.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown-menu-wrap .devui-dropdown-menu{width:100%}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}@keyframes d-dropdown-fade{0%{opacity:0;transform:scaleY(.9999) scaleY(0)}to{opacity:1;transform:scaleY(.8) scaleY(4px)}}.devui-dropdown-fade-enter{opacity:0}.devui-dropdown-fade-enter-active{animation-name:d-dropdown-fade;animation-duration:.3s}.devui-dropdown-fade-leave{opacity:1}.devui-dropdown-fade-leave-active{animation-name:d-dropdown-fade;animation-duration:.3s;animation-direction:reverse}