vue-devui 1.0.0-alpha.5 → 1.0.0-beta.11

package/splitter/index.umd.js

@@ -1 +1 @@
-var __defProp=Object.defineProperty,__defNormalProp=(e,n,t)=>n in e?__defProp(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,__require="undefined"!=typeof require?require:e=>{throw new Error('Dynamic require of "'+e+'" is not supported')},__publicField=(e,n,t)=>(__defNormalProp(e,"symbol"!=typeof n?n+"":n,t),t);!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).index={},e.Vue)}(this,(function(e,n){"use strict";const t={orientation:{type:String,default:"horizontal"},splitBarSize:{type:String,default:"2px"},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean,default:!0}};function i(e,n){const t={},i=Object.keys(n);return i.forEach((n=>{t[n]=e.style[n]})),i.forEach((t=>{e.style[t]=n[t]})),t}function o(e,n){if(e.classList)return e.classList.contains(n);return` ${e.className} `.indexOf(` ${n} `)>-1}function l(e,n){e.classList?e.classList.add(n):o(e,n)||(e.className=`${e.className} ${n}`)}function s(e,n){if(e.classList)e.classList.remove(n);else if(o(e,n)){const t=e.className;e.className=` ${t} `.replace(` ${n} `," ")}}const a={mounted(e,{value:n}){e.$value=n,n.enableResize&&function(e){r(e,"mousedown",d)}(e)},unmounted(e,{value:n}){n.enableResize&&p(e,"mousedown",d)}};function r(e,n,t){e.addEventListener&&e.addEventListener(n,t)}function p(e,n,t){e.removeEventListener&&e.removeEventListener(n,t)}function d(e){var n;const t=null==(n=null==e?void 0:e.target)?void 0:n.$value;function i(e){t.onDragEvent(u(e))}t&&(r(document,"mousemove",i),r(document,"mouseup",(function e(n){p(document,"mousemove",i),p(document,"mouseup",e),t.onReleaseEvent(u(n))})),t.onPressEvent(u(e)))}function u(e){return{pageX:e.pageX,pageY:e.pageY,clientX:e.clientX,clientY:e.clientY,offsetX:e.offsetX,offsetY:e.offsetY,type:e.type,originalEvent:e}}const c={index:{type:Number},orientation:{type:String,required:!0},splitBarSize:{type:String,required:!0},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean}};var v=n.defineComponent({name:"DSplitterBar",props:c,setup(e){const t=n.inject("splitterStore"),o=n.reactive({wrapperClass:`devui-splitter-bar devui-splitter-bar-${e.orientation}`}),r=n.ref();n.onMounted((()=>{n.watch([()=>e.splitBarSize,r],(([e,n])=>{n instanceof HTMLElement&&i(n,{flexBasis:e})}),{immediate:!0}),n.watch([()=>t.state.panes,r],(([n,l])=>{t.isStaticBar(e.index)?i(l,{flexBasis:e.disabledBarSize}):o.wrapperClass+=" resizable"}),{deep:!0})}));const p={pageX:0,pageY:0,originalX:0,originalY:0};let d;const u={enableResize:!0,onPressEvent:function({originalEvent:n}){n.stopPropagation(),t.isResizable(e.index)&&(d=t.dragState(e.index),p.originalX=n.pageX,p.originalY=n.pageY)},onDragEvent:function({originalEvent:n}){if(n.stopPropagation(),!t.isResizable(e.index))return;let i;p.pageX=n.pageX,p.pageY=n.pageY,i="vertical"===e.orientation?p.pageY-p.originalY:p.pageX-p.originalX,t.setSize(d,i)},onReleaseEvent:function({originalEvent:n}){if(n.stopPropagation(),!t.isResizable(e.index))return;let i;p.pageX=n.pageX,p.pageY=n.pageY,i="vertical"===e.orientation?p.pageY-p.originalY:p.pageX-p.originalX,t.setSize(d,i)}},c=(e,n)=>({pane:t.getPane(e),nearPane:t.getPane(n)}),v=(e,n,t)=>{var i,o,l,s;return{"devui-collapse":(null==(o=null==(i=null==e?void 0:e.component)?void 0:i.props)?void 0:o.collapsible)&&t,collapsed:null==(s=null==(l=null==e?void 0:e.component)?void 0:l.props)?void 0:s.collapsed,hidden:n.collapsed}},m=n.computed((()=>{var n,t;const{pane:i,nearPane:o}=c(e.index,e.index+1),l="after"!==(null==(t=null==(n=null==i?void 0:i.component)?void 0:n.props)?void 0:t.collapseDirection)||0===e.index;return v(i,o,l)})),f=n.computed((()=>{var n,i;const{pane:o,nearPane:l}=c(e.index+1,e.index),s="before"!==(null==(i=null==(n=null==o?void 0:o.component)?void 0:n.props)?void 0:i.collapseDirection)||e.index+1===t.state.paneCount-1;return v(o,l,s)})),g=()=>{var n,t,i,o;const{pane:a,nearPane:p}=c(e.index,e.index+1);(null==(t=null==(n=null==a?void 0:a.component)?void 0:n.props)?void 0:t.collapsed)||(null==(o=null==(i=null==p?void 0:p.component)?void 0:i.props)?void 0:o.collapsed)?l(r.value,"none-resizable"):s(r.value,"none-resizable")},h=n=>{t.tooglePane(e.index,e.index+1,n),g()},z=n=>{t.tooglePane(e.index+1,e.index,n),g()};return n.onMounted((()=>{h(!0),z(!0)})),()=>n.withDirectives(n.createVNode("div",{class:o.wrapperClass,ref:r},[e.showCollapseButton?n.createVNode("div",{class:["prev",m.value],onClick:()=>{h()}},null):null,n.createVNode("div",{class:"devui-resize-handle"},null),e.showCollapseButton?n.createVNode("div",{class:["next",f.value],onClick:()=>z()},null):null]),[[a,u]])}});class m{constructor(){__publicField(this,"state"),this.state=n.reactive({panes:[],splitterContainerSize:0,paneCount:0})}setPanes({panes:e}){this.state.panes=e.map(((e,n)=>{var t;return e.component&&(e.component.exposed.order.value=2*n),e.getPaneSize=null==(t=null==e?void 0:e.component)?void 0:t.exposed.getPaneSize,e})),this.state.paneCount=e.length}setSplitter({containerSize:e}){this.state.splitterContainerSize=e}getPane(e){if(!this.state.panes||e<0||e>=this.state.panes.length)throw new Error("no pane can return.");return this.state.panes[e]}dragState(e){const n=this.getPane(e),t=this.getPane(e+1),i=n.getPaneSize()+t.getPaneSize();return{prev:{index:e,initialSize:n.getPaneSize(),minSize:this.toPixels(n.component.props.minSize)||i-this.toPixels(t.component.props.maxSize)||0,maxSize:this.toPixels(n.component.props.maxSize)||i-this.toPixels(t.component.props.minSize)||i},next:{index:e+1,initialSize:t.getPaneSize(),minSize:this.toPixels(t.component.props.minSize)||i-this.toPixels(n.component.props.maxSize)||0,maxSize:this.toPixels(t.component.props.maxSize)||i-this.toPixels(n.component.props.minSize)||i}}}clamp(e,n,t){return Math.min(n,Math.max(e,t))}resize(e,n){const t=this.getPane(e.index),i=this.state.splitterContainerSize,o=this.clamp(e.minSize,e.maxSize,e.initialSize+n);let l="";l=this.isPercent(t.component.props.size)?o/i*100+"%":o+"px",t.component.props.size=l,t.component.emit("sizeChange",l)}isResizable(e){var n,t,i,o,l,s,a,r;const p=this.getPane(e),d=this.getPane(e+1),u=(null==(t=null==(n=null==p?void 0:p.component)?void 0:n.props)?void 0:t.collapsed)||(null==(o=null==(i=null==d?void 0:d.component)?void 0:i.props)?void 0:o.collapsed);return(null==(s=null==(l=null==p?void 0:p.component)?void 0:l.props)?void 0:s.resizable)&&(null==(r=null==(a=null==d?void 0:d.component)?void 0:a.props)?void 0:r.resizable)&&!u}isStaticBar(e){var n,t,i,o;const l=this.getPane(e),s=this.getPane(e+1);return!((null==(t=null==(n=null==l?void 0:l.component)?void 0:n.props)?void 0:t.resizable)&&(null==(o=null==(i=null==s?void 0:s.component)?void 0:i.props)?void 0:o.resizable))}isPercent(e){return/%$/.test(e)}toPixels(e){let n=parseFloat(e);return this.isPercent(e)&&(n=this.state.splitterContainerSize*n/100),n}tooglePane(e,n,t){var i,o,l,s,a,r,p,d,u,c,v,m,f;const g=this.getPane(e),h=this.getPane(n);(null==(o=null==(i=null==g?void 0:g.component)?void 0:i.props)?void 0:o.collapsible)&&(g.component.props.collapsed=t?null==(s=null==(l=null==g?void 0:g.component)?void 0:l.props)?void 0:s.collapsed:!(null==(r=null==(a=null==g?void 0:g.component)?void 0:a.props)?void 0:r.collapsed),null==(c=null==(p=null==h?void 0:h.component)?void 0:p.exposed)||c.toggleNearPaneFlexGrow(null==(u=null==(d=null==g?void 0:g.component)?void 0:d.props)?void 0:u.collapsed),null==(f=null==g?void 0:g.component)||f.emit("collapsedChange",null==(m=null==(v=null==g?void 0:g.component)?void 0:v.props)?void 0:m.collapsed))}setSize(e,n){const t=this.getPane(e.prev.index),i=this.getPane(e.next.index);t.component.props.size&&i.component.props.size?(this.resize(e.prev,n),this.resize(e.next,-n)):i.component.props.size?this.resize(e.next,-n):this.resize(e.prev,n)}}var f=n.defineComponent({name:"DSplitter",components:{DSplitterBar:v},props:t,emits:[],setup(e,t){var i,o;const l=new m,s=n.reactive({panes:[]});s.panes=(null==(o=(i=t.slots).DSplitterPane)?void 0:o.call(i))||[],l.setPanes({panes:s.panes});const a=n.ref();return n.provide("orientation",e.orientation),n.provide("splitterStore",l),n.onMounted((()=>{n.nextTick((()=>{let n=0;n="vertical"===e.orientation?a.value.clientHeight:a.value.clientWidth,l.setSplitter({containerSize:n})}))})),()=>{const{splitBarSize:t,orientation:i,showCollapseButton:o}=e,l=["devui-splitter",`devui-splitter-${i}`];return n.createVNode("div",{class:l,ref:a},[s.panes,s.panes.filter(((e,n,t)=>n!==t.length-1)).map(((e,l)=>n.createVNode(n.resolveComponent("d-splitter-bar"),{key:l,style:"order: "+(2*l+1),splitBarSize:t,orientation:i,index:l,showCollapseButton:o},null)))])}}});const g={size:{type:String},minSize:{type:String},maxSize:{type:String},resizable:{type:Boolean,default:!0},collapsible:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},collapseDirection:{type:String,default:"both"},shrink:{type:Boolean,default:!1},shrinkWidth:{type:Number,default:36}};var h=n.defineComponent({name:"DSplitterPane",props:g,emits:["sizeChange","collapsedChange"],setup(e,{slots:t,expose:a}){const r=n.inject("splitterStore"),p=n.ref(),d=n.ref(),u=n.inject("orientation");let c="";n.onMounted((()=>{c=e.size,r.setPanes({panes:r.state.panes})})),n.onUpdated((()=>{r.setPanes({panes:r.state.panes})}));n.onMounted((()=>{n.watch([d,p],(([e,n])=>{n instanceof HTMLElement&&i(n,{order:e})})),n.watch((()=>e.size),(e=>{const n=p.value;n.style.flexBasis=e;const t="devui-splitter-pane-fixed";e?l(n,t):s(n,t)}),{immediate:!0}),n.watch((()=>e.collapsed),(t=>{const o="devui-splitter-pane-hidden";n.nextTick((()=>{const n=p.value;t?l(n,o):s(n,o),t&&e.shrink?(s(n,o),i(n,{flexBasis:`${e.shrinkWidth}px`})):i(n,{flexBasis:c})}))}),{immediate:!0})}));return a({order:d,getPaneSize:()=>{const e=null==p?void 0:p.value;return"vertical"===u?e.offsetHeight:e.offsetWidth},toggleNearPaneFlexGrow:e=>{n.nextTick((()=>{const n="devui-splitter-pane-grow";o(p.value,n)?s(p.value,n):e&&l(p.value,n)}))}}),()=>{var e;return n.createVNode("div",{class:"devui-splitter-pane",ref:p},[null==(e=t.default)?void 0:e.call(t)])}}});f.install=function(e){e.component(f.name,f),e.component(h.name,h)};var z={title:"Splitter 分割器",category:"布局",install(e){e.use(f)}};e.Splitter=f,e.default=z,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+var U=Object.defineProperty;var _=(g,o,v)=>o in g?U(g,o,{enumerable:!0,configurable:!0,writable:!0,value:v}):g[o]=v;var k=(g,o,v)=>(_(g,typeof o!="symbol"?o+"":o,v),v);(function(g,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(g=typeof globalThis!="undefined"?globalThis:g||self,o(g.index={},g.Vue))})(this,function(g,o){"use strict";const v={orientation:{type:String,default:"horizontal"},splitBarSize:{type:String,default:"2px"},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean,default:!0}};function b(t,e){const i={},s=Object.keys(e);return s.forEach(n=>{i[n]=t.style[n]}),s.forEach(n=>{t.style[n]=e[n]}),i}function R(t,e){return t.classList?t.classList.contains(e):` ${t.className} `.indexOf(` ${e} `)>-1}function X(t,e){t.classList?t.classList.add(e):R(t,e)||(t.className=`${t.className} ${e}`)}function y(t,e){if(t.classList)t.classList.remove(e);else if(R(t,e)){const i=t.className;t.className=` ${i} `.replace(` ${e} `," ")}}const F={mounted(t,{value:e}){t.$value=e,e.enableResize&&H(t)},unmounted(t,{value:e}){e.enableResize&&$(t,"mousedown",L)}};function H(t){N(t,"mousedown",L)}function N(t,e,i){t.addEventListener&&t.addEventListener(e,i)}function $(t,e,i){t.removeEventListener&&t.removeEventListener(e,i)}function L(t){var n;const e=(n=t==null?void 0:t.target)==null?void 0:n.$value;if(!e)return;N(document,"mousemove",i),N(document,"mouseup",s),e.onPressEvent(E(t));function i(p){e.onDragEvent(E(p))}function s(p){$(document,"mousemove",i),$(document,"mouseup",s),e.onReleaseEvent(E(p))}}function E(t){return{pageX:t.pageX,pageY:t.pageY,clientX:t.clientX,clientY:t.clientY,offsetX:t.offsetX,offsetY:t.offsetY,type:t.type,originalEvent:t}}var K="";const T={index:{type:Number},orientation:{type:String,required:!0},splitBarSize:{type:String,required:!0},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean}};var q=o.defineComponent({name:"DSplitterBar",props:T,setup(t){const e=o.inject("splitterStore"),i=o.reactive({wrapperClass:`devui-splitter-bar devui-splitter-bar-${t.orientation}`}),s=o.ref();o.watch([()=>t.splitBarSize,s],([a,c])=>{c instanceof HTMLElement&&b(c,{flexBasis:a})},{immediate:!0}),o.watch([()=>e.state.panes,s],([a,c])=>{e.isStaticBar(t.index)?b(c,{flexBasis:t.disabledBarSize}):i.wrapperClass+=" resizable"},{deep:!0});const n={pageX:0,pageY:0,originalX:0,originalY:0};let p;const d={enableResize:!0,onPressEvent:function({originalEvent:a}){a.stopPropagation(),!!e.isResizable(t.index)&&(p=e.dragState(t.index),n.originalX=a.pageX,n.originalY=a.pageY)},onDragEvent:function({originalEvent:a}){if(a.stopPropagation(),!e.isResizable(t.index))return;n.pageX=a.pageX,n.pageY=a.pageY;let c;t.orientation==="vertical"?c=n.pageY-n.originalY:c=n.pageX-n.originalX,e.setSize(p,c)},onReleaseEvent:function({originalEvent:a}){if(a.stopPropagation(),!e.isResizable(t.index))return;n.pageX=a.pageX,n.pageY=a.pageY;let c;t.orientation==="vertical"?c=n.pageY-n.originalY:c=n.pageX-n.originalX,e.setSize(p,c)}},f=(a,c)=>{const x=e.getPane(a),h=e.getPane(c);return{pane:x,nearPane:h}},z=(a,c,x)=>{var B,M,V,j;const h=((M=(B=a==null?void 0:a.component)==null?void 0:B.props)==null?void 0:M.collapsible)&&x,C=(j=(V=a==null?void 0:a.component)==null?void 0:V.props)==null?void 0:j.collapsed,Y=c.collapsed;return{"devui-collapse":h,collapsed:C,hidden:Y}},m=o.computed(()=>{var h,C;const{pane:a,nearPane:c}=f(t.index,t.index+1),x=((C=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:C.collapseDirection)!=="after"||t.index===0;return z(a,c,x)}),S=o.computed(()=>{var h,C;const{pane:a,nearPane:c}=f(t.index+1,t.index),x=((C=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:C.collapseDirection)!=="before"||t.index+1===e.state.paneCount-1;return z(a,c,x)}),l=()=>{var h,C,Y,B;const{pane:a,nearPane:c}=f(t.index,t.index+1);((C=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:C.collapsed)||((B=(Y=c==null?void 0:c.component)==null?void 0:Y.props)==null?void 0:B.collapsed)?X(s.value,"none-resizable"):y(s.value,"none-resizable")},r=a=>{e.tooglePane(t.index,t.index+1,a),l()},u=a=>{e.tooglePane(t.index+1,t.index,a),l()},P=()=>{r(!0),u(!0)};return o.onMounted(()=>{P()}),()=>o.withDirectives(o.createVNode("div",{class:i.wrapperClass,ref:s},[t.showCollapseButton?o.createVNode("div",{class:["prev",m.value],onClick:()=>{r()}},null):null,o.createVNode("div",{class:"devui-resize-handle"},null),t.showCollapseButton?o.createVNode("div",{class:["next",S.value],onClick:()=>u()},null):null]),[[F,d]])}});class G{constructor(){k(this,"state");this.state=o.reactive({panes:[],splitterContainerSize:0,paneCount:0})}setPanes({panes:e}){this.state.panes=e.map((i,s)=>{var n;return i.component&&(i.component.exposed.order.value=s*2),i.getPaneSize=(n=i==null?void 0:i.component)==null?void 0:n.exposed.getPaneSize,i}),this.state.paneCount=e.length}setSplitter({containerSize:e}){this.state.splitterContainerSize=e}getPane(e){if(!this.state.panes||e<0||e>=this.state.panes.length)throw new Error("no pane can return.");return this.state.panes[e]}dragState(e){const i=this.getPane(e),s=this.getPane(e+1),n=i.getPaneSize()+s.getPaneSize();return{prev:{index:e,initialSize:i.getPaneSize(),minSize:this.toPixels(i.component.props.minSize)||n-this.toPixels(s.component.props.maxSize)||0,maxSize:this.toPixels(i.component.props.maxSize)||n-this.toPixels(s.component.props.minSize)||n},next:{index:e+1,initialSize:s.getPaneSize(),minSize:this.toPixels(s.component.props.minSize)||n-this.toPixels(i.component.props.maxSize)||0,maxSize:this.toPixels(s.component.props.maxSize)||n-this.toPixels(i.component.props.minSize)||n}}}clamp(e,i,s){return Math.min(i,Math.max(e,s))}resize(e,i){const s=this.getPane(e.index),n=this.state.splitterContainerSize,p=this.clamp(e.minSize,e.maxSize,e.initialSize+i);let d="";this.isPercent(s.component.props.size)?d=p/n*100+"%":d=p+"px",s.component.props.size=d,s.component.emit("sizeChange",d)}isResizable(e){var p,d,f,z,m,S,l,r;const i=this.getPane(e),s=this.getPane(e+1),n=((d=(p=i==null?void 0:i.component)==null?void 0:p.props)==null?void 0:d.collapsed)||((z=(f=s==null?void 0:s.component)==null?void 0:f.props)==null?void 0:z.collapsed);return((S=(m=i==null?void 0:i.component)==null?void 0:m.props)==null?void 0:S.resizable)&&((r=(l=s==null?void 0:s.component)==null?void 0:l.props)==null?void 0:r.resizable)&&!n}isStaticBar(e){var n,p,d,f;const i=this.getPane(e),s=this.getPane(e+1);return!(((p=(n=i==null?void 0:i.component)==null?void 0:n.props)==null?void 0:p.resizable)&&((f=(d=s==null?void 0:s.component)==null?void 0:d.props)==null?void 0:f.resizable))}isPercent(e){return/%$/.test(e)}toPixels(e){let i=parseFloat(e);return this.isPercent(e)&&(i=this.state.splitterContainerSize*i/100),i}tooglePane(e,i,s){var d,f,z,m,S,l,r,u,P,a,c,x,h;const n=this.getPane(e),p=this.getPane(i);((f=(d=n==null?void 0:n.component)==null?void 0:d.props)==null?void 0:f.collapsible)&&(n.component.props.collapsed=s?(m=(z=n==null?void 0:n.component)==null?void 0:z.props)==null?void 0:m.collapsed:!((l=(S=n==null?void 0:n.component)==null?void 0:S.props)==null?void 0:l.collapsed),(a=(r=p==null?void 0:p.component)==null?void 0:r.exposed)==null||a.toggleNearPaneFlexGrow((P=(u=n==null?void 0:n.component)==null?void 0:u.props)==null?void 0:P.collapsed),(h=n==null?void 0:n.component)==null||h.emit("collapsedChange",(x=(c=n==null?void 0:n.component)==null?void 0:c.props)==null?void 0:x.collapsed))}setSize(e,i){const s=this.getPane(e.prev.index),n=this.getPane(e.next.index);s.component.props.size&&n.component.props.size?(this.resize(e.prev,i),this.resize(e.next,-i)):n.component.props.size?this.resize(e.next,-i):this.resize(e.prev,i)}}var A="",w=o.defineComponent({name:"DSplitter",components:{DSplitterBar:q},props:v,emits:[],setup(t,e){var f,z;const i=new G,s=o.reactive({panes:[]});s.panes=((z=(f=e.slots).DSplitterPane)==null?void 0:z.call(f))||[],i.setPanes({panes:s.panes}),o.provide("orientation",t.orientation),o.provide("splitterStore",i);const n=o.ref(),p=()=>{if(!n)return;let m=0;t.orientation==="vertical"?m=n.value.clientHeight:m=n.value.clientWidth,i.setSplitter({containerSize:m})},d=new ResizeObserver(p);return o.watch(n,m=>{!m||(p(),d.observe(n.value))}),o.onUnmounted(()=>{d.disconnect()}),()=>{const{splitBarSize:m,orientation:S,showCollapseButton:l}=t,r=["devui-splitter",`devui-splitter-${S}`];return o.createVNode("div",{class:r,ref:n},[s.panes,s.panes.filter((u,P,a)=>P!==a.length-1).map((u,P)=>o.createVNode(o.resolveComponent("d-splitter-bar"),{key:P,style:`order: ${P*2+1}`,splitBarSize:m,orientation:S,index:P,showCollapseButton:l},null))])}}});const O={size:{type:String},minSize:{type:String},maxSize:{type:String},resizable:{type:Boolean,default:!0},collapsible:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},collapseDirection:{type:String,default:"both"},shrink:{type:Boolean,default:!1},shrinkWidth:{type:Number,default:36}};var J="",D=o.defineComponent({name:"DSplitterPane",props:O,emits:["sizeChange","collapsedChange"],setup(t,{slots:e,expose:i}){const s=o.inject("splitterStore"),n=o.ref(),p=o.ref();o.watch([p,n],([l,r])=>{!r||b(r,{order:l})});const d=(l,r)=>{if(!r)return;r.style.flexBasis=l;const u="devui-splitter-pane-fixed";l?X(r,u):y(r,u)};o.watch([()=>t.size,n],([l,r])=>{d(l,r)},{immediate:!0});const f=o.inject("orientation");let z="";o.onMounted(()=>{z=t.size,s.setPanes({panes:s.state.panes})}),o.onUpdated(()=>{s.setPanes({panes:s.state.panes})});const m=()=>{const l=n.value;if(!!l)return f==="vertical"?l.offsetHeight:l.offsetWidth};return o.watch(()=>t.collapsed,l=>{const r=n.value;if(!r)return;const u="devui-splitter-pane-hidden";l?X(r,u):y(r,u),l&&t.shrink?(y(r,u),b(r,{flexBasis:`${t.shrinkWidth}px`})):b(r,{flexBasis:z})},{immediate:!0}),i({order:p,getPaneSize:m,toggleNearPaneFlexGrow:l=>{const r=n.value;if(!(r instanceof HTMLElement))return;const u="devui-splitter-pane-grow";R(r,u)?y(r,u):l&&X(r,u)}}),()=>{var l;return o.createVNode("div",{class:"devui-splitter-pane",ref:n},[(l=e.default)==null?void 0:l.call(e)])}}});w.install=function(t){t.component(w.name,w),t.component(D.name,D)};var W={title:"Splitter \u5206\u5272\u5668",category:"\u5E03\u5C40",status:"100%",install(t){t.use(w)}};g.Splitter=w,g.default=W,Object.defineProperty(g,"__esModule",{value:!0}),g[Symbol.toStringTag]="Module"});

package/statistic/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/statistic/index.es.js

@@ -0,0 +1,280 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineComponent, ref, computed, onMounted, watch, createVNode, mergeProps } from "vue";
+const statisticProps = {
+  title: {
+    type: String,
+    default: ""
+  },
+  value: {
+    type: [Number, String]
+  },
+  prefix: {
+    type: String
+  },
+  suffix: {
+    type: String
+  },
+  precision: {
+    type: Number
+  },
+  groupSeparator: {
+    type: String,
+    default: ","
+  },
+  showGroupSeparator: {
+    type: Boolean,
+    default: false
+  },
+  titleStyle: {
+    type: Object
+  },
+  contentStyle: {
+    type: Object
+  },
+  animationDuration: {
+    type: Number,
+    default: 2e3
+  },
+  valueFrom: {
+    type: Number
+  },
+  animation: {
+    type: Boolean,
+    default: false
+  },
+  start: {
+    type: Boolean,
+    default: false
+  },
+  extra: {
+    type: String,
+    default: ""
+  },
+  easing: {
+    type: String,
+    default: "easeOutCubic"
+  },
+  delay: {
+    type: Number,
+    default: 0
+  }
+};
+const separator = (SeparatorString, groupSeparator, showGroupSeparator) => {
+  const res = SeparatorString.replace(/\d+/, function(n) {
+    return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
+      return $1 + `${showGroupSeparator ? groupSeparator : ""}`;
+    });
+  });
+  return res;
+};
+const isHasDot = (value) => {
+  if (!isNaN(value)) {
+    return (value + "").indexOf(".") !== -1;
+  }
+};
+const analysisValueType = (value, propsValue, groupSeparator, splitPrecisionNumber, showGroupSeparator) => {
+  const fixedNumber = propsValue.toString().indexOf(".") !== -1 ? propsValue.toString().length - propsValue.toString().indexOf(".") - 1 : 0;
+  if (typeof value === "number") {
+    if (isHasDot(value)) {
+      return splitPrecisionNumber ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator, showGroupSeparator) : separator(value.toFixed(fixedNumber).toString(), groupSeparator, showGroupSeparator);
+    } else {
+      return splitPrecisionNumber ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator, showGroupSeparator) : separator(value.toString(), groupSeparator, showGroupSeparator);
+    }
+  } else {
+    return value;
+  }
+};
+const pow = Math.pow;
+const sqrt = Math.sqrt;
+const easeOutCubic = function(x) {
+  return 1 - pow(1 - x, 3);
+};
+const linear = (x) => x;
+const easeOutExpo = function(x) {
+  return x === 1 ? 1 : 1 - pow(2, -10 * x);
+};
+const easeInOutExpo = function(x) {
+  return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? pow(2, 20 * x - 10) / 2 : (2 - pow(2, -20 * x + 10)) / 2;
+};
+const easeInExpo = function(x) {
+  return x === 0 ? 0 : pow(2, 10 * x - 10);
+};
+const easeInOutCirc = function(x) {
+  return x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2;
+};
+var easing = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  easeOutCubic,
+  linear,
+  easeOutExpo,
+  easeInOutExpo,
+  easeInExpo,
+  easeInOutCirc
+});
+class Tween {
+  constructor(options) {
+    __publicField(this, "from");
+    __publicField(this, "to");
+    __publicField(this, "duration");
+    __publicField(this, "delay");
+    __publicField(this, "easing");
+    __publicField(this, "onStart");
+    __publicField(this, "onUpdate");
+    __publicField(this, "onFinish");
+    __publicField(this, "startTime");
+    __publicField(this, "started");
+    __publicField(this, "finished");
+    __publicField(this, "timer");
+    __publicField(this, "time");
+    __publicField(this, "elapsed");
+    __publicField(this, "keys");
+    const { from, to, duration, delay, easing: easing2, onStart, onUpdate, onFinish } = options;
+    for (const key in from) {
+      if (to[key] === void 0) {
+        to[key] = from[key];
+      }
+    }
+    for (const key in to) {
+      if (from[key] === void 0) {
+        from[key] = to[key];
+      }
+    }
+    this.from = from;
+    this.to = to;
+    this.duration = duration;
+    this.delay = delay;
+    this.easing = easing2;
+    this.onStart = onStart;
+    this.onUpdate = onUpdate;
+    this.onFinish = onFinish;
+    this.startTime = Date.now() + this.delay;
+    this.started = false;
+    this.finished = false;
+    this.timer = null;
+    this.keys = {};
+  }
+  update() {
+    this.time = Date.now();
+    if (this.time < this.startTime) {
+      return;
+    }
+    if (this.finished) {
+      return;
+    }
+    if (this.elapsed === this.duration) {
+      if (!this.finished) {
+        this.finished = true;
+        this.onFinish && this.onFinish(this.keys);
+      }
+      return;
+    }
+    this.elapsed = this.time - this.startTime;
+    this.elapsed = this.elapsed > this.duration ? this.duration : this.elapsed;
+    for (const key in this.to) {
+      this.keys[key] = this.from[key] + (this.to[key] - this.from[key]) * easing[this.easing](this.elapsed / this.duration);
+    }
+    if (!this.started) {
+      this.onStart && this.onStart(this.keys);
+      this.started = true;
+    }
+    this.onUpdate(this.keys);
+  }
+  start() {
+    this.startTime = Date.now() + this.delay;
+    const tick = () => {
+      this.update();
+      this.timer = requestAnimationFrame(tick);
+      if (this.finished) {
+        cancelAnimationFrame(this.timer);
+        this.timer = null;
+      }
+    };
+    tick();
+  }
+  stop() {
+    cancelAnimationFrame(this.timer);
+    this.timer = null;
+  }
+}
+var statistic = "";
+var Statistic = defineComponent({
+  name: "DStatistic",
+  inheritAttrs: false,
+  props: statisticProps,
+  setup(props, ctx) {
+    var _a;
+    const innerValue = ref((_a = props.valueFrom) != null ? _a : props.value);
+    const tween = ref(null);
+    const animation = (from = ((_b) => (_b = props.valueFrom) != null ? _b : 0)(), to = typeof props.value === "number" ? props.value : Number(props.value)) => {
+      if (from !== to) {
+        tween.value = new Tween({
+          from: {
+            value: from
+          },
+          to: {
+            value: to
+          },
+          delay: props.delay,
+          duration: props.animationDuration,
+          easing: props.easing,
+          onUpdate: (keys) => {
+            innerValue.value = keys.value;
+          },
+          onFinish: () => {
+            innerValue.value = to;
+          }
+        });
+        tween.value.start();
+      }
+    };
+    const statisticValue = computed(() => {
+      return analysisValueType(innerValue.value, props.value, props.groupSeparator, props.precision, props.showGroupSeparator);
+    });
+    onMounted(() => {
+      if (props.animation && props.start) {
+        animation();
+      }
+    });
+    watch(() => props.start, (value) => {
+      if (value && !tween.value) {
+        animation();
+      }
+    });
+    return () => {
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      return createVNode("div", mergeProps({
+        "class": "devui-statistic"
+      }, ctx.attrs), [createVNode("div", {
+        "class": "devui-statistic-title",
+        "style": props.titleStyle
+      }, [((_b = (_a2 = ctx.slots).title) == null ? void 0 : _b.call(_a2)) || props.title]), createVNode("div", {
+        "class": "devui-statistic-content",
+        "style": props.contentStyle
+      }, [props.prefix || ((_d = (_c = ctx.slots).prefix) == null ? void 0 : _d.call(_c)) ? createVNode("span", {
+        "class": "devui-statistic-prefix"
+      }, [((_f = (_e = ctx.slots).prefix) == null ? void 0 : _f.call(_e)) || props.prefix]) : null, createVNode("span", {
+        "class": "devui-statistic--value"
+      }, [statisticValue.value]), props.suffix || ((_h = (_g = ctx.slots).suffix) == null ? void 0 : _h.call(_g)) ? createVNode("span", {
+        "class": "devui-statistic-suffix"
+      }, [((_j = (_i = ctx.slots).suffix) == null ? void 0 : _j.call(_i)) || props.suffix]) : null]), ((_l = (_k = ctx.slots).extra) == null ? void 0 : _l.call(_k)) || props.extra]);
+    };
+  }
+});
+Statistic.install = function(app) {
+  app.component(Statistic.name, Statistic);
+};
+var index = {
+  title: "Statistic \u7EDF\u8BA1\u6570\u503C",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.use(Statistic);
+  }
+};
+export { Statistic, index as default };

package/statistic/index.umd.js

@@ -0,0 +1 @@
+var q=Object.defineProperty;var B=(a,e,f)=>e in a?q(a,e,{enumerable:!0,configurable:!0,writable:!0,value:f}):a[e]=f;var s=(a,e,f)=>(B(a,typeof e!="symbol"?e+"":e,f),f);(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.index={},a.Vue))})(this,function(a,e){"use strict";const f={title:{type:String,default:""},value:{type:[Number,String]},prefix:{type:String},suffix:{type:String},precision:{type:Number},groupSeparator:{type:String,default:","},showGroupSeparator:{type:Boolean,default:!1},titleStyle:{type:Object},contentStyle:{type:Object},animationDuration:{type:Number,default:2e3},valueFrom:{type:Number},animation:{type:Boolean,default:!1},start:{type:Boolean,default:!1},extra:{type:String,default:""},easing:{type:String,default:"easeOutCubic"},delay:{type:Number,default:0}},g=(t,i,n)=>t.replace(/\d+/,function(u){return u.replace(/(\d)(?=(\d{3})+$)/g,function(h){return h+`${n?i:""}`})}),w=t=>{if(!isNaN(t))return(t+"").indexOf(".")!==-1},C=(t,i,n,r,u)=>{const h=i.toString().indexOf(".")!==-1?i.toString().length-i.toString().indexOf(".")-1:0;return typeof t=="number"?w(t)?g(r?t.toFixed(r).toString():t.toFixed(h).toString(),n,u):g(r?t.toFixed(r).toString():t.toString(),n,u):t},c=Math.pow,v=Math.sqrt,D=function(t){return 1-c(1-t,3)},E=t=>t,V=function(t){return t===1?1:1-c(2,-10*t)},A=function(t){return t===0?0:t===1?1:t<.5?c(2,20*t-10)/2:(2-c(2,-20*t+10))/2},I=function(t){return t===0?0:c(2,10*t-10)},M=function(t){return t<.5?(1-v(1-c(2*t,2)))/2:(v(1-c(-2*t+2,2))+1)/2};var _=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",easeOutCubic:D,linear:E,easeOutExpo:V,easeInOutExpo:A,easeInExpo:I,easeInOutCirc:M});class j{constructor(i){s(this,"from");s(this,"to");s(this,"duration");s(this,"delay");s(this,"easing");s(this,"onStart");s(this,"onUpdate");s(this,"onFinish");s(this,"startTime");s(this,"started");s(this,"finished");s(this,"timer");s(this,"time");s(this,"elapsed");s(this,"keys");const{from:n,to:r,duration:u,delay:h,easing:S,onStart:l,onUpdate:d,onFinish:m}=i;for(const o in n)r[o]===void 0&&(r[o]=n[o]);for(const o in r)n[o]===void 0&&(n[o]=r[o]);this.from=n,this.to=r,this.duration=u,this.delay=h,this.easing=S,this.onStart=l,this.onUpdate=d,this.onFinish=m,this.startTime=Date.now()+this.delay,this.started=!1,this.finished=!1,this.timer=null,this.keys={}}update(){if(this.time=Date.now(),!(this.time<this.startTime)&&!this.finished){if(this.elapsed===this.duration){this.finished||(this.finished=!0,this.onFinish&&this.onFinish(this.keys));return}this.elapsed=this.time-this.startTime,this.elapsed=this.elapsed>this.duration?this.duration:this.elapsed;for(const i in this.to)this.keys[i]=this.from[i]+(this.to[i]-this.from[i])*_[this.easing](this.elapsed/this.duration);this.started||(this.onStart&&this.onStart(this.keys),this.started=!0),this.onUpdate(this.keys)}}start(){this.startTime=Date.now()+this.delay;const i=()=>{this.update(),this.timer=requestAnimationFrame(i),this.finished&&(cancelAnimationFrame(this.timer),this.timer=null)};i()}stop(){cancelAnimationFrame(this.timer),this.timer=null}}var $="",y=e.defineComponent({name:"DStatistic",inheritAttrs:!1,props:f,setup(t,i){var S;const n=e.ref((S=t.valueFrom)!=null?S:t.value),r=e.ref(null),u=(l=(m=>(m=t.valueFrom)!=null?m:0)(),d=typeof t.value=="number"?t.value:Number(t.value))=>{l!==d&&(r.value=new j({from:{value:l},to:{value:d},delay:t.delay,duration:t.animationDuration,easing:t.easing,onUpdate:o=>{n.value=o.value},onFinish:()=>{n.value=d}}),r.value.start())},h=e.computed(()=>C(n.value,t.value,t.groupSeparator,t.precision,t.showGroupSeparator));return e.onMounted(()=>{t.animation&&t.start&&u()}),e.watch(()=>t.start,l=>{l&&!r.value&&u()}),()=>{var l,d,m,o,x,F,O,b,p,N,T,k;return e.createVNode("div",e.mergeProps({class:"devui-statistic"},i.attrs),[e.createVNode("div",{class:"devui-statistic-title",style:t.titleStyle},[((d=(l=i.slots).title)==null?void 0:d.call(l))||t.title]),e.createVNode("div",{class:"devui-statistic-content",style:t.contentStyle},[t.prefix||((o=(m=i.slots).prefix)==null?void 0:o.call(m))?e.createVNode("span",{class:"devui-statistic-prefix"},[((F=(x=i.slots).prefix)==null?void 0:F.call(x))||t.prefix]):null,e.createVNode("span",{class:"devui-statistic--value"},[h.value]),t.suffix||((b=(O=i.slots).suffix)==null?void 0:b.call(O))?e.createVNode("span",{class:"devui-statistic-suffix"},[((N=(p=i.slots).suffix)==null?void 0:N.call(p))||t.suffix]):null]),((k=(T=i.slots).extra)==null?void 0:k.call(T))||t.extra])}}});y.install=function(t){t.component(y.name,y)};var U={title:"Statistic \u7EDF\u8BA1\u6570\u503C",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.use(y)}};a.Statistic=y,a.default=U,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/statistic/package.json

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

package/statistic/style.css

@@ -0,0 +1 @@
+.devui-statistic{box-sizing:border-box;margin:0;padding:0;font-size:14px;line-height:1.5715;list-style:none}.devui-statistic-title{margin-bottom:4px;opacity:.7;font-size:14px}.devui-statistic-content{font-size:24px;display:flex;align-items:center}.devui-statistic-prefix{margin-right:6px;display:flex}.devui-statistic-suffix{margin-left:6px;display:flex}.devui-statistic--value{display:inline-block}

package/status/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/status/index.es.js

@@ -1 +1,42 @@
-import{defineComponent as t,computed as a,createVNode as e}from"vue";var n=t({name:"DStatus",props:{type:{default:"invalid",type:String}},setup(t,n){const s=a((()=>{const{type:a}=t;let e="devui-status devui-status-bg-invalid";return["success","error","initial","warning","waiting","running","invalid"].includes(a)&&(e=`devui-status devui-status-bg-${a}`),e}));return()=>{var t,a;return e("span",{class:s.value},[null==(a=(t=n.slots).default)?void 0:a.call(t)])}}});n.install=function(t){t.component(n.name,n)};var s={title:"Status 状态",category:"通用",install(t){t.use(n)}};export{n as Status,s as default};
+import { defineComponent, computed, createVNode } from "vue";
+var status = "";
+var Status = defineComponent({
+  name: "DStatus",
+  props: {
+    type: {
+      default: "invalid",
+      type: String
+    }
+  },
+  setup(props, ctx) {
+    const typeClass = computed(() => {
+      const {
+        type
+      } = props;
+      const typeStatus = ["success", "error", "initial", "warning", "waiting", "running", "invalid"];
+      let typeClassStr = `devui-status devui-status-bg-invalid`;
+      if (typeStatus.includes(type)) {
+        typeClassStr = `devui-status devui-status-bg-${type}`;
+      }
+      return typeClassStr;
+    });
+    return () => {
+      var _a, _b;
+      return createVNode("span", {
+        "class": typeClass.value
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
+  }
+});
+Status.install = function(app) {
+  app.component(Status.name, Status);
+};
+var index = {
+  title: "Status \u72B6\u6001",
+  category: "\u901A\u7528",
+  status: "100%",
+  install(app) {
+    app.use(Status);
+  }
+};
+export { Status, index as default };

package/status/index.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).index={},e.Vue)}(this,(function(e,t){"use strict";var n=t.defineComponent({name:"DStatus",props:{type:{default:"invalid",type:String}},setup(e,n){const i=t.computed((()=>{const{type:t}=e;let n="devui-status devui-status-bg-invalid";return["success","error","initial","warning","waiting","running","invalid"].includes(t)&&(n=`devui-status devui-status-bg-${t}`),n}));return()=>{var e,u;return t.createVNode("span",{class:i.value},[null==(u=(e=n.slots).default)?void 0:u.call(e)])}}});n.install=function(e){e.component(n.name,n)};var i={title:"Status 状态",category:"通用",install(e){e.use(n)}};e.Status=n,e.default=i,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.index={},t.Vue))})(this,function(t,e){"use strict";var l="",n=e.defineComponent({name:"DStatus",props:{type:{default:"invalid",type:String}},setup(u,o){const r=e.computed(()=>{const{type:s}=u,i=["success","error","initial","warning","waiting","running","invalid"];let a="devui-status devui-status-bg-invalid";return i.includes(s)&&(a=`devui-status devui-status-bg-${s}`),a});return()=>{var s,i;return e.createVNode("span",{class:r.value},[(i=(s=o.slots).default)==null?void 0:i.call(s)])}}});n.install=function(u){u.component(n.name,n)};var d={title:"Status \u72B6\u6001",category:"\u901A\u7528",status:"100%",install(u){u.use(n)}};t.Status=n,t.default=d,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});

package/steps-guide/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;