vue-devui 1.0.0-alpha.1 → 1.0.0-alpha.5

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"},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},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.watch((()=>e.splitBarSize),(e=>{n.nextTick((()=>{i(null==r?void 0:r.value,{flexBasis:e})}))}),{immediate:!0}),n.watch((()=>t.state.panes),(()=>{t.isStaticBar(e.index)||(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)})),g=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)})),f=()=>{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),f()},x=n=>{t.tooglePane(e.index+1,e.index,n),f()};return n.onMounted((()=>{h(!0),x(!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",g.value],onClick:()=>x()},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,g;const f=this.getPane(e),h=this.getPane(n);(null==(o=null==(i=null==f?void 0:f.component)?void 0:i.props)?void 0:o.collapsible)&&(f.component.props.collapsed=t?null==(s=null==(l=null==f?void 0:f.component)?void 0:l.props)?void 0:s.collapsed:!(null==(r=null==(a=null==f?void 0:f.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==f?void 0:f.component)?void 0:d.props)?void 0:u.collapsed),null==(g=null==f?void 0:f.component)||g.emit("collapsedChange",null==(m=null==(v=null==f?void 0:f.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 g=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.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 f={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:f,emits:["sizeChange","collapsedChange"],setup(e,{slots:t,expose:a}){const r=n.inject("splitterStore"),p=n.ref(),d=n.ref();n.watch((()=>d.value),(e=>{n.nextTick((()=>{i(p.value,{order:e})}))}));n.watch((()=>e.size),(e=>{n.nextTick((()=>{(e=>{const n=p.value;n.style.flexBasis=e;const t="devui-splitter-pane-fixed";e?l(n,t):s(n,t)})(e)}))}),{immediate:!0});const 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.watch((()=>e.collapsed),(()=>{n.nextTick((()=>{(()=>{const t="devui-splitter-pane-hidden";n.nextTick((()=>{const n=p.value;e.collapsed?l(n,t):s(n,t),e.collapsed&&e.shrink?(s(n,t),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)])}}});g.install=function(e){e.component(g.name,g),e.component(h.name,h)};var x={title:"Splitter 分割器",category:"布局",install(e){e.use(g)}};e.Splitter=g,e.default=x,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+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"}));

package/steps-guide/index.es.js

@@ -0,0 +1 @@
+import{computed as e,ref as t,reactive as s,nextTick as i,defineComponent as n,onMounted as l,createVNode as o,Teleport as c}from"vue";var u=n({name:"DStepsGuide",props:{steps:Array,showClose:{type:Boolean,default:!0},showDots:{type:Boolean,default:!0}},emits:[],setup(n,o){const c=e((()=>n.steps.length-1)),u=t(0),{currentStep:d,stepsRef:p,guidePosition:a,guideClassList:r,updateGuidePosition:v}=function(i,n){const l=e((()=>{const e=i[n.value];return e.position=e.position||"top",e})),o=["d-steps-guide"],c=t(null),u=s({left:"",top:"",zIndex:1100});return{currentStep:l,stepsRef:c,guidePosition:u,guideClassList:o,updateGuidePosition:()=>{const e=window.pageYOffset-document.documentElement.clientTop,t=window.pageXOffset-document.documentElement.clientLeft,s=l.value.position;let i,n;if("string"!=typeof s){const{top:e=0,left:t=0,type:l="top"}=s;o.splice(1,1,l),i=t,n=e}else{o.splice(1,1,s);const u=c.value,d=l.value.target||l.value.trigger,p=document.querySelector(d),a=p.getBoundingClientRect();i=a.left+p.clientWidth/2-u.clientWidth/2+t,n=a.top+p.clientHeight/2-u.clientHeight/2+e;const r=s.split("-");switch(r[0]){case"top":n+=-u.clientHeight/2-p.clientHeight;break;case"bottom":n+=u.clientHeight/2+p.clientHeight;break;case"left":n+=u.clientHeight/2-p.clientHeight,i+=-u.clientWidth/2-p.clientWidth/2;break;case"right":n+=u.clientHeight/2-p.clientHeight,i+=u.clientWidth/2+p.clientWidth/2}switch(r[1]){case"left":i+=u.clientWidth/2-p.clientWidth/2;break;case"right":i+=-u.clientWidth/2+p.clientWidth/2}}u.left=i+"px",u.top=n+"px"}}}(n.steps,u),{showSteps:g,closeSteps:h,setCurrentIndex:f}=function(e,s,n){const l=t(!0);return{showSteps:l,closeSteps:()=>{l.value=!1},setCurrentIndex:t=>{(t>e.value||t<0)&&(t=0),s.value=t,l.value?n():(l.value=!0,i((()=>{n()})))}}}(c,u,v);return l((()=>{v()})),{stepsCount:c,stepIndex:u,showSteps:g,guidePosition:a,guideClassList:r,stepsRef:p,currentStep:d,setCurrentIndex:f,closeSteps:h}},render(e){const{showSteps:t,guidePosition:s,guideClassList:i,currentStep:n,stepIndex:l,stepsCount:u,setCurrentIndex:d,closeSteps:p,showClose:a,showDots:r}=e;return t?o(c,{to:"body"},{default:()=>[o("div",{style:s,class:i,ref:"stepsRef"},[o("div",{class:"devui-shining-dot"},null),o("div",{class:"devui-shining-plus"},null),o("div",{class:"devui-arrow"},null),o("div",{class:"devui-guide-container"},[o("p",{class:"devui-title"},[n.title]),a?o("div",{class:"icon icon-close",onClick:p},null):null,o("div",{class:"devui-content"},[n.content]),o("div",{class:"devui-ctrl"},[r?o("div",{class:"devui-dots"},[e.steps.map(((e,t)=>o("em",{class:["icon icon-dot-status",n===e?"devui-active":""],key:t},null)))]):null,o("div",{class:"devui-guide-btn"},[l>0?o("div",{class:"devui-prev-step",onClick:()=>d(--e.stepIndex)},["上一步"]):null,l===u?o("div",{onClick:p},["我知道啦"]):o("div",{class:"devui-next-step",onClick:()=>{d(++e.stepIndex)}},["我知道啦,继续"])])])])])]}):null}});u.install=function(e){e.component(u.name,u)};var d={title:"StepsGuide 操作指引",category:"导航",status:"开发中",install(e){e.use(u)}};export{u as StepsGuide,d as default};

package/steps-guide/index.umd.js

@@ -0,0 +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";const i={steps:Array,showClose:{type:Boolean,default:!0},showDots:{type:Boolean,default:!0}};var s=t.defineComponent({name:"DStepsGuide",props:i,emits:[],setup(e,i){const s=t.computed((()=>e.steps.length-1)),n=t.ref(0),{currentStep:o,stepsRef:l,guidePosition:c,guideClassList:d,updateGuidePosition:u}=function(e,i){const s=t.computed((()=>{const t=e[i.value];return t.position=t.position||"top",t})),n=["d-steps-guide"],o=t.ref(null),l=t.reactive({left:"",top:"",zIndex:1100});return{currentStep:s,stepsRef:o,guidePosition:l,guideClassList:n,updateGuidePosition:()=>{const e=window.pageYOffset-document.documentElement.clientTop,t=window.pageXOffset-document.documentElement.clientLeft,i=s.value.position;let c,d;if("string"!=typeof i){const{top:e=0,left:t=0,type:s="top"}=i;n.splice(1,1,s),c=t,d=e}else{n.splice(1,1,i);const l=o.value,u=s.value.target||s.value.trigger,a=document.querySelector(u),r=a.getBoundingClientRect();c=r.left+a.clientWidth/2-l.clientWidth/2+t,d=r.top+a.clientHeight/2-l.clientHeight/2+e;const p=i.split("-");switch(p[0]){case"top":d+=-l.clientHeight/2-a.clientHeight;break;case"bottom":d+=l.clientHeight/2+a.clientHeight;break;case"left":d+=l.clientHeight/2-a.clientHeight,c+=-l.clientWidth/2-a.clientWidth/2;break;case"right":d+=l.clientHeight/2-a.clientHeight,c+=l.clientWidth/2+a.clientWidth/2}switch(p[1]){case"left":c+=l.clientWidth/2-a.clientWidth/2;break;case"right":c+=-l.clientWidth/2+a.clientWidth/2}}l.left=c+"px",l.top=d+"px"}}}(e.steps,n),{showSteps:a,closeSteps:r,setCurrentIndex:p}=function(e,i,s){const n=t.ref(!0);return{showSteps:n,closeSteps:()=>{n.value=!1},setCurrentIndex:o=>{(o>e.value||o<0)&&(o=0),i.value=o,n.value?s():(n.value=!0,t.nextTick((()=>{s()})))}}}(s,n,u);return t.onMounted((()=>{u()})),{stepsCount:s,stepIndex:n,showSteps:a,guidePosition:c,guideClassList:d,stepsRef:l,currentStep:o,setCurrentIndex:p,closeSteps:r}},render(e){const{showSteps:i,guidePosition:s,guideClassList:n,currentStep:o,stepIndex:l,stepsCount:c,setCurrentIndex:d,closeSteps:u,showClose:a,showDots:r}=e;return i?t.createVNode(t.Teleport,{to:"body"},{default:()=>[t.createVNode("div",{style:s,class:n,ref:"stepsRef"},[t.createVNode("div",{class:"devui-shining-dot"},null),t.createVNode("div",{class:"devui-shining-plus"},null),t.createVNode("div",{class:"devui-arrow"},null),t.createVNode("div",{class:"devui-guide-container"},[t.createVNode("p",{class:"devui-title"},[o.title]),a?t.createVNode("div",{class:"icon icon-close",onClick:u},null):null,t.createVNode("div",{class:"devui-content"},[o.content]),t.createVNode("div",{class:"devui-ctrl"},[r?t.createVNode("div",{class:"devui-dots"},[e.steps.map(((e,i)=>t.createVNode("em",{class:["icon icon-dot-status",o===e?"devui-active":""],key:i},null)))]):null,t.createVNode("div",{class:"devui-guide-btn"},[l>0?t.createVNode("div",{class:"devui-prev-step",onClick:()=>d(--e.stepIndex)},["上一步"]):null,l===c?t.createVNode("div",{onClick:u},["我知道啦"]):t.createVNode("div",{class:"devui-next-step",onClick:()=>{d(++e.stepIndex)}},["我知道啦,继续"])])])])])]}):null}});s.install=function(e){e.component(s.name,s)};var n={title:"StepsGuide 操作指引",category:"导航",status:"开发中",install(e){e.use(s)}};e.StepsGuide=s,e.default=n,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));

package/steps-guide/package.json

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

package/steps-guide/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.d-steps-guide{width:400px;min-height:160px;background:#5e7ce0;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) #5170ff4d;border-radius:var(--devui-border-radius-feedback, 4px);font-size:12px;color:#fff;padding:20px;position:absolute}.d-steps-guide .devui-title{font-size:12px;opacity:1;margin:0 0 20px;padding:0}.d-steps-guide>.devui-arrow,.d-steps-guide>.devui-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.d-steps-guide>.devui-arrow{border-width:8px}.d-steps-guide.left>.devui-arrow{top:23px;right:-6px;margin-top:-3px;border-right-width:0;transform:rotate(-135deg);border-left-color:#5e7ce0}.d-steps-guide.top>.devui-arrow,.d-steps-guide.top-left>.devui-arrow,.d-steps-guide.top-right>.devui-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#5e7ce0;transform:rotate(135deg)}.d-steps-guide.top>.devui-arrow{left:calc(50% - 4px)}.d-steps-guide.top-left>.devui-arrow{left:23px}.d-steps-guide.top-right>.devui-arrow{right:23px;transform:rotate(-135deg)}.d-steps-guide.right>.devui-arrow{top:23px;left:-6px;margin-top:-3px;border-left-width:0;transform:rotate(135deg);border-right-color:#5e7ce0}.d-steps-guide.bottom>.devui-arrow,.d-steps-guide.bottom-left>.devui-arrow,.d-steps-guide.bottom-right>.devui-arrow{top:-6px;margin-left:3px;border-top-width:0;border-bottom-color:#5e7ce0}.d-steps-guide.bottom>.devui-arrow{left:calc(50% - 4px);transform:rotate(-135deg)}.d-steps-guide.bottom-right>.devui-arrow{right:23px;transform:rotate(135deg)}.d-steps-guide.bottom-left>.devui-arrow{left:23px;transform:rotate(-135deg)}.d-steps-guide>.devui-shining-dot,.d-steps-guide .devui-shining-plus{position:absolute;background:#5e7ce0;width:6px;height:6px;border-radius:var(--devui-border-radius-feedback, 4px)}.d-steps-guide.left>.devui-shining-dot,.d-steps-guide.left>.devui-shining-plus{top:21px;right:-30px}.d-steps-guide.right>.devui-shining-dot,.d-steps-guide.right>.devui-shining-plus{top:21px;left:-30px}.d-steps-guide.top>.devui-shining-dot,.d-steps-guide.top>.devui-shining-plus{left:calc(50% - 3px);bottom:-30px}.d-steps-guide.top-left>.devui-shining-dot,.d-steps-guide.top-left>.devui-shining-plus{left:21px;bottom:-30px}.d-steps-guide.top-right>.devui-shining-dot,.d-steps-guide.top-right>.devui-shining-plus{right:21px;bottom:-30px}.d-steps-guide.bottom>.devui-shining-dot,.d-steps-guide.bottom>.devui-shining-plus{left:calc(50% - 3px);top:-30px}.d-steps-guide.bottom-right>.devui-shining-dot,.d-steps-guide.bottom-right>.devui-shining-plus{top:-30px;right:21px}.d-steps-guide.bottom-left>.devui-shining-dot,.d-steps-guide.bottom-left>.devui-shining-plus{top:-30px;left:21px}.d-steps-guide .devui-shining-plus{animation:devui-glow 2s 0s infinite}.d-steps-guide .devui-guide-container{position:relative}.d-steps-guide .devui-guide-container>.icon-close{position:absolute;top:0;right:0;cursor:pointer}.d-steps-guide .devui-guide-container .devui-ctrl{display:flex;flex-wrap:wrap}.d-steps-guide .devui-guide-container .devui-ctrl .devui-dots{color:#fff;position:relative;top:25px;font-size:12px;height:30px}.d-steps-guide .devui-guide-container .devui-ctrl .devui-dots>em{opacity:.2;margin:0 5px 0 2px}.d-steps-guide .devui-guide-container .devui-ctrl .devui-dots>em.devui-active{opacity:1}.d-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn{display:flex;flex-flow:row nowrap;flex-grow:1;justify-content:flex-end;padding:20px 0 0;white-space:nowrap}.d-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn>div{color:#fff;background:rgba(255,255,255,.1);border-radius:4px;padding:5px 15px;cursor:pointer;margin-left:10px}.d-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn>div.devui-prev-step{background:none;border:solid 1px rgba(255,255,255,.1)}@keyframes devui-glow{0%{transform:scale(1);opacity:.5}25%{transform:scale(2);opacity:.3}50%{transform:scale(3);opacity:.1}75%{transform:scale(2);opacity:.3}to{transform:scale(1);opacity:.5}}

package/sticky/index.es.js

@@ -1 +1 @@
-import{defineComponent as t,reactive as e,watch as o,onMounted as n,ref as i,createVNode as l}from"vue";var s=t({name:"DSticky",props:{zIndex:{type:Number},container:{type:Element,default:""},view:{type:Object,default:()=>({top:0,bottom:0})},scrollTarget:{type:Element,default:""}},emits:["statusChange"],setup(t,s){const{slots:a}=s;let d,p,u,r;let c,g=0;const m=e({status:"normal"});o((()=>t.zIndex),(()=>{w()})),o((()=>t.container),(()=>{w()})),o((()=>t.scrollTarget),(()=>{w()})),o((()=>m.status),(()=>{s.emit("statusChange",m.status)}),{immediate:!0});const w=()=>{c=R.value.parentElement,d=t.container?t.container:c,R.value.style.zIndex=t.zIndex,p=t.scrollTarget||window,p.addEventListener("scroll",v),y(p)},y=t=>{const e=t===window?[document.documentElement,document.body]:[t];let o=!1;e.forEach((t=>{t.scrollTop&&t.scrollTop>0&&(o=!0)})),o&&setTimeout(B)},f=e=>{const o=R.value||document.createElement("div");switch(e){case"normal":o.style.top="auto",o.style.left="auto",o.style.position="static";break;case"follow":const e=p,n=p&&p!==window?e.getBoundingClientRect().top:0;o.style.top=+n+(t.view&&t.view.top||0)+"px",o.style.left=o.getBoundingClientRect().left+"px",o.style.position="fixed";break;case"stay":o.style.top=b(o,c,"top")+"px",o.style.left="auto",o.style.position="relative";break;case"remain":"fixed"!==o.style.position&&"absolute"!==o.style.position&&(o.style.top=b(o,c,"top")+"px",o.style.left="auto",o.style.position="absolute"),o.style.top=h(o,c,d)+"px",o.style.left=b(o,c,"left")+"px",o.style.position="relative"}},v=()=>{const t=C,e=Date.now();u&&clearTimeout(u),r||(r=e),e-r>100?(t(),r=null,u=null):u=setTimeout((()=>{t(),r=null,u=null}),16)},C=()=>{d.getBoundingClientRect().left-(g||0)!=0?(m.status="stay",g=d.getBoundingClientRect().left):B()},B=()=>{const e=p,o=R.value||document.createElement("div"),n=p&&p!==window?e.getBoundingClientRect().top:0,i=window.getComputedStyle(d);c.getBoundingClientRect().top-n>(t.view&&t.view.top||0)||d.getBoundingClientRect().top+parseInt(i.paddingTop,10)+parseInt(i.borderTopWidth,10)-n>=(t.view&&t.view.top||0)?(m.status="normal",f(m.status)):d.getBoundingClientRect().bottom-parseInt(i.paddingBottom,10)-parseInt(i.borderBottomWidth,10)<n+(t.view&&t.view.top||0)+o.getBoundingClientRect().height+(t.view&&t.view.bottom||0)?(m.status="remain",f(m.status)):d.getBoundingClientRect().top+parseInt(i.paddingTop,10)-n<(t.view&&t.view.top||0)&&(m.status="follow",f(m.status))},b=(t,e,o)=>{const n={left:["left","Left"],top:["top","Top"]};if(window&&window.getComputedStyle){const i=window.getComputedStyle(e);return t.getBoundingClientRect()[n[o][0]]-e.getBoundingClientRect()[n[o][0]]-parseInt(i["left"===o?"paddingLeft":"paddingTop"],10)-parseInt(i["left"===o?"borderLeftWidth":"borderTopWidth"],10)}},h=(t,e,o)=>{if(window&&window.getComputedStyle){const n=window.getComputedStyle(o),i=o.getBoundingClientRect().height-t.getBoundingClientRect().height+o.getBoundingClientRect().top-e.getBoundingClientRect().top-parseInt(n.paddingTop,10)-parseInt(n.borderTopWidth,10)-parseInt(n.paddingBottom,10)-parseInt(n.borderBottomWidth,10);return i<0?0:i}};n((()=>{w()}));const R=i();return()=>l("div",{ref:R},[a.default?a.default():""])}});s.install=function(t){t.component(s.name,s)};var a={title:"Sticky 便贴",category:"通用",status:void 0,install(t){t.use(s)}};export{s as Sticky,a as default};
+import{defineComponent as t,reactive as e,watch as o,onMounted as n,ref as i,createVNode as l}from"vue";var s=t({name:"DSticky",props:{zIndex:{type:Number},container:{type:Object},view:{type:Object,default:()=>({top:0,bottom:0})},scrollTarget:{type:Object}},emits:["statusChange"],setup(t,s){const{slots:a}=s;let d,p,u,r;let c,g=0;const m=e({status:"normal"});o((()=>t.zIndex),(()=>{w()})),o((()=>t.container),(()=>{w()})),o((()=>t.scrollTarget),(()=>{w()})),o((()=>m.status),(()=>{s.emit("statusChange",m.status)}),{immediate:!0});const w=()=>{c=R.value.parentElement,d=t.container?t.container:c,R.value.style.zIndex=t.zIndex,p=t.scrollTarget||window,p.addEventListener("scroll",v),y(p)},y=t=>{const e=t===window?[document.documentElement,document.body]:[t];let o=!1;e.forEach((t=>{t.scrollTop&&t.scrollTop>0&&(o=!0)})),o&&setTimeout(B)},f=e=>{const o=R.value||document.createElement("div");switch(e){case"normal":o.style.top="auto",o.style.left="auto",o.style.position="static";break;case"follow":const e=p,n=p&&p!==window?e.getBoundingClientRect().top:0;o.style.top=+n+(t.view&&t.view.top||0)+"px",o.style.left=o.getBoundingClientRect().left+"px",o.style.position="fixed";break;case"stay":o.style.top=b(o,c,"top")+"px",o.style.left="auto",o.style.position="relative";break;case"remain":"fixed"!==o.style.position&&"absolute"!==o.style.position&&(o.style.top=b(o,c,"top")+"px",o.style.left="auto",o.style.position="absolute"),o.style.top=h(o,c,d)+"px",o.style.left=b(o,c,"left")+"px",o.style.position="relative"}},v=()=>{const t=C,e=Date.now();u&&clearTimeout(u),r||(r=e),e-r>100?(t(),r=null,u=null):u=setTimeout((()=>{t(),r=null,u=null}),16)},C=()=>{d.getBoundingClientRect().left-(g||0)!=0?(m.status="stay",g=d.getBoundingClientRect().left):B()},B=()=>{const e=p,o=R.value||document.createElement("div"),n=p&&p!==window?e.getBoundingClientRect().top:0,i=window.getComputedStyle(d);c.getBoundingClientRect().top-n>(t.view&&t.view.top||0)||d.getBoundingClientRect().top+parseInt(i.paddingTop,10)+parseInt(i.borderTopWidth,10)-n>=(t.view&&t.view.top||0)?(m.status="normal",f(m.status)):d.getBoundingClientRect().bottom-parseInt(i.paddingBottom,10)-parseInt(i.borderBottomWidth,10)<n+(t.view&&t.view.top||0)+o.getBoundingClientRect().height+(t.view&&t.view.bottom||0)?(m.status="remain",f(m.status)):d.getBoundingClientRect().top+parseInt(i.paddingTop,10)-n<(t.view&&t.view.top||0)&&(m.status="follow",f(m.status))},b=(t,e,o)=>{const n={left:["left","Left"],top:["top","Top"]};if(window&&window.getComputedStyle){const i=window.getComputedStyle(e);return t.getBoundingClientRect()[n[o][0]]-e.getBoundingClientRect()[n[o][0]]-parseInt(i["left"===o?"paddingLeft":"paddingTop"],10)-parseInt(i["left"===o?"borderLeftWidth":"borderTopWidth"],10)}},h=(t,e,o)=>{if(window&&window.getComputedStyle){const n=window.getComputedStyle(o),i=o.getBoundingClientRect().height-t.getBoundingClientRect().height+o.getBoundingClientRect().top-e.getBoundingClientRect().top-parseInt(n.paddingTop,10)-parseInt(n.borderTopWidth,10)-parseInt(n.paddingBottom,10)-parseInt(n.borderBottomWidth,10);return i<0?0:i}};n((()=>{w()}));const R=i();return()=>l("div",{ref:R},[a.default?a.default():""])}});s.install=function(t){t.component(s.name,s)};var a={title:"Sticky 便贴",category:"通用",status:void 0,install(t){t.use(s)}};export{s as Sticky,a as default};

package/sticky/index.umd.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).index={},t.Vue)}(this,(function(t,e){"use strict";var o=e.defineComponent({name:"DSticky",props:{zIndex:{type:Number},container:{type:Element,default:""},view:{type:Object,default:()=>({top:0,bottom:0})},scrollTarget:{type:Element,default:""}},emits:["statusChange"],setup(t,o){const{slots:n}=o;let i,l,s,a;let d,p=0;const u=e.reactive({status:"normal"});e.watch((()=>t.zIndex),(()=>{r()})),e.watch((()=>t.container),(()=>{r()})),e.watch((()=>t.scrollTarget),(()=>{r()})),e.watch((()=>u.status),(()=>{o.emit("statusChange",u.status)}),{immediate:!0});const r=()=>{d=C.value.parentElement,i=t.container?t.container:d,C.value.style.zIndex=t.zIndex,l=t.scrollTarget||window,l.addEventListener("scroll",f),c(l)},c=t=>{const e=t===window?[document.documentElement,document.body]:[t];let o=!1;e.forEach((t=>{t.scrollTop&&t.scrollTop>0&&(o=!0)})),o&&setTimeout(w)},g=e=>{const o=C.value||document.createElement("div");switch(e){case"normal":o.style.top="auto",o.style.left="auto",o.style.position="static";break;case"follow":const e=l,n=l&&l!==window?e.getBoundingClientRect().top:0;o.style.top=+n+(t.view&&t.view.top||0)+"px",o.style.left=o.getBoundingClientRect().left+"px",o.style.position="fixed";break;case"stay":o.style.top=y(o,d,"top")+"px",o.style.left="auto",o.style.position="relative";break;case"remain":"fixed"!==o.style.position&&"absolute"!==o.style.position&&(o.style.top=y(o,d,"top")+"px",o.style.left="auto",o.style.position="absolute"),o.style.top=v(o,d,i)+"px",o.style.left=y(o,d,"left")+"px",o.style.position="relative"}},f=()=>{const t=m,e=Date.now();s&&clearTimeout(s),a||(a=e),e-a>100?(t(),a=null,s=null):s=setTimeout((()=>{t(),a=null,s=null}),16)},m=()=>{i.getBoundingClientRect().left-(p||0)!=0?(u.status="stay",p=i.getBoundingClientRect().left):w()},w=()=>{const e=l,o=C.value||document.createElement("div"),n=l&&l!==window?e.getBoundingClientRect().top:0,s=window.getComputedStyle(i);d.getBoundingClientRect().top-n>(t.view&&t.view.top||0)||i.getBoundingClientRect().top+parseInt(s.paddingTop,10)+parseInt(s.borderTopWidth,10)-n>=(t.view&&t.view.top||0)?(u.status="normal",g(u.status)):i.getBoundingClientRect().bottom-parseInt(s.paddingBottom,10)-parseInt(s.borderBottomWidth,10)<n+(t.view&&t.view.top||0)+o.getBoundingClientRect().height+(t.view&&t.view.bottom||0)?(u.status="remain",g(u.status)):i.getBoundingClientRect().top+parseInt(s.paddingTop,10)-n<(t.view&&t.view.top||0)&&(u.status="follow",g(u.status))},y=(t,e,o)=>{const n={left:["left","Left"],top:["top","Top"]};if(window&&window.getComputedStyle){const i=window.getComputedStyle(e);return t.getBoundingClientRect()[n[o][0]]-e.getBoundingClientRect()[n[o][0]]-parseInt(i["left"===o?"paddingLeft":"paddingTop"],10)-parseInt(i["left"===o?"borderLeftWidth":"borderTopWidth"],10)}},v=(t,e,o)=>{if(window&&window.getComputedStyle){const n=window.getComputedStyle(o),i=o.getBoundingClientRect().height-t.getBoundingClientRect().height+o.getBoundingClientRect().top-e.getBoundingClientRect().top-parseInt(n.paddingTop,10)-parseInt(n.borderTopWidth,10)-parseInt(n.paddingBottom,10)-parseInt(n.borderBottomWidth,10);return i<0?0:i}};e.onMounted((()=>{r()}));const C=e.ref();return()=>e.createVNode("div",{ref:C},[n.default?n.default():""])}});o.install=function(t){t.component(o.name,o)};var n={title:"Sticky 便贴",category:"通用",status:void 0,install(t){t.use(o)}};t.Sticky=o,t.default=n,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).index={},t.Vue)}(this,(function(t,e){"use strict";var o=e.defineComponent({name:"DSticky",props:{zIndex:{type:Number},container:{type:Object},view:{type:Object,default:()=>({top:0,bottom:0})},scrollTarget:{type:Object}},emits:["statusChange"],setup(t,o){const{slots:n}=o;let i,l,s,a;let d,p=0;const u=e.reactive({status:"normal"});e.watch((()=>t.zIndex),(()=>{r()})),e.watch((()=>t.container),(()=>{r()})),e.watch((()=>t.scrollTarget),(()=>{r()})),e.watch((()=>u.status),(()=>{o.emit("statusChange",u.status)}),{immediate:!0});const r=()=>{d=b.value.parentElement,i=t.container?t.container:d,b.value.style.zIndex=t.zIndex,l=t.scrollTarget||window,l.addEventListener("scroll",f),c(l)},c=t=>{const e=t===window?[document.documentElement,document.body]:[t];let o=!1;e.forEach((t=>{t.scrollTop&&t.scrollTop>0&&(o=!0)})),o&&setTimeout(m)},g=e=>{const o=b.value||document.createElement("div");switch(e){case"normal":o.style.top="auto",o.style.left="auto",o.style.position="static";break;case"follow":const e=l,n=l&&l!==window?e.getBoundingClientRect().top:0;o.style.top=+n+(t.view&&t.view.top||0)+"px",o.style.left=o.getBoundingClientRect().left+"px",o.style.position="fixed";break;case"stay":o.style.top=y(o,d,"top")+"px",o.style.left="auto",o.style.position="relative";break;case"remain":"fixed"!==o.style.position&&"absolute"!==o.style.position&&(o.style.top=y(o,d,"top")+"px",o.style.left="auto",o.style.position="absolute"),o.style.top=v(o,d,i)+"px",o.style.left=y(o,d,"left")+"px",o.style.position="relative"}},f=()=>{const t=w,e=Date.now();s&&clearTimeout(s),a||(a=e),e-a>100?(t(),a=null,s=null):s=setTimeout((()=>{t(),a=null,s=null}),16)},w=()=>{i.getBoundingClientRect().left-(p||0)!=0?(u.status="stay",p=i.getBoundingClientRect().left):m()},m=()=>{const e=l,o=b.value||document.createElement("div"),n=l&&l!==window?e.getBoundingClientRect().top:0,s=window.getComputedStyle(i);d.getBoundingClientRect().top-n>(t.view&&t.view.top||0)||i.getBoundingClientRect().top+parseInt(s.paddingTop,10)+parseInt(s.borderTopWidth,10)-n>=(t.view&&t.view.top||0)?(u.status="normal",g(u.status)):i.getBoundingClientRect().bottom-parseInt(s.paddingBottom,10)-parseInt(s.borderBottomWidth,10)<n+(t.view&&t.view.top||0)+o.getBoundingClientRect().height+(t.view&&t.view.bottom||0)?(u.status="remain",g(u.status)):i.getBoundingClientRect().top+parseInt(s.paddingTop,10)-n<(t.view&&t.view.top||0)&&(u.status="follow",g(u.status))},y=(t,e,o)=>{const n={left:["left","Left"],top:["top","Top"]};if(window&&window.getComputedStyle){const i=window.getComputedStyle(e);return t.getBoundingClientRect()[n[o][0]]-e.getBoundingClientRect()[n[o][0]]-parseInt(i["left"===o?"paddingLeft":"paddingTop"],10)-parseInt(i["left"===o?"borderLeftWidth":"borderTopWidth"],10)}},v=(t,e,o)=>{if(window&&window.getComputedStyle){const n=window.getComputedStyle(o),i=o.getBoundingClientRect().height-t.getBoundingClientRect().height+o.getBoundingClientRect().top-e.getBoundingClientRect().top-parseInt(n.paddingTop,10)-parseInt(n.borderTopWidth,10)-parseInt(n.paddingBottom,10)-parseInt(n.borderBottomWidth,10);return i<0?0:i}};e.onMounted((()=>{r()}));const b=e.ref();return()=>e.createVNode("div",{ref:b},[n.default?n.default():""])}});o.install=function(t){t.component(o.name,o)};var n={title:"Sticky 便贴",category:"通用",status:void 0,install(t){t.use(o)}};t.Sticky=o,t.default=n,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"}));