vue-devui 1.0.0-alpha.4 → 1.0.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/alert/index.es.js +1 -1
- package/alert/index.umd.js +1 -1
- package/alert/style.css +1 -1
- package/anchor/index.es.js +1 -1
- package/anchor/index.umd.js +1 -1
- package/breadcrumb/index.es.js +1 -1
- package/breadcrumb/index.umd.js +1 -1
- package/breadcrumb/style.css +1 -1
- package/fullscreen/index.es.js +1 -1
- package/fullscreen/index.umd.js +1 -1
- package/input-number/index.es.js +1 -1
- package/input-number/index.umd.js +1 -1
- package/input-number/style.css +1 -1
- package/modal/index.es.js +1 -1
- package/modal/index.umd.js +1 -1
- package/overlay/index.es.js +1 -1
- package/overlay/index.umd.js +1 -1
- package/package.json +4 -3
- package/pagination/index.es.js +1 -1
- package/pagination/index.umd.js +1 -1
- package/popover/index.es.js +1 -1
- package/popover/index.umd.js +1 -1
- package/popover/style.css +1 -1
- package/skeleton/index.es.js +1 -1
- package/skeleton/index.umd.js +1 -1
- package/skeleton/style.css +1 -1
- package/splitter/index.es.js +1 -1
- package/splitter/index.umd.js +1 -1
- package/steps-guide/index.es.js +1 -1
- package/steps-guide/index.umd.js +1 -1
- package/sticky/index.es.js +1 -1
- package/sticky/index.umd.js +1 -1
- package/style.css +1 -1
- package/vue-devui.es.js +1 -1
- package/vue-devui.umd.js +1 -1
package/pagination/index.es.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineComponent as e,ref as n,onMounted as a,onUnmounted as t,withDirectives as i,createVNode as o,createTextVNode as u,resolveDirective as l,toRefs as s,watch as g,resolveComponent as r,computed as d,Fragment as p,mergeProps as c,nextTick as v}from"vue";const m={pageSize:{type:Number,default:10},total:{type:Number,default:0},pageSizeOptions:{type:Array,default:()=>[5,10,20,50]},pageSizeDirection:{type:Array,default:()=>["centerDown","centerUp"]},pageIndex:{type:Number,default:1},maxItems:{type:Number,default:10},preLink:{type:String,default:"<"},nextLink:{type:String,default:">"},size:{type:String,default:""},canJumpPage:{type:Boolean,default:!1},canChangePageSize:{type:Boolean,default:!1},canViewTotal:{type:Boolean,default:!1},totalItemText:{type:String,default:"所有条目"},goToText:{type:String,default:"跳至"},showJumpButton:{type:Boolean,default:!1},showTruePageIndex:{type:Boolean,default:!1},lite:{type:Boolean,default:!1},showPageSelector:{type:Boolean,default:!0},haveConfigMenu:{type:Boolean,default:!1},autoFixPageIndex:{type:Boolean,default:!0},autoHide:{type:Boolean,default:!1},"onUpdate:pageIndex":{type:Function},"onUpdate:pageSize":{type:Function},onPageIndexChange:{type:Function},onPageSizeChange:{type:Function}};function h(e,n,a){document.addEventListener?e&&n&&a&&e.addEventListener(n,a,!1):e&&n&&a&&e.attachEvent("on"+n,a)}const f=Symbol("@@clickoutside"),
|
|
1
|
+
import{defineComponent as e,ref as n,onMounted as a,onUnmounted as t,withDirectives as i,createVNode as o,createTextVNode as u,resolveDirective as l,toRefs as s,watch as g,resolveComponent as r,computed as d,Fragment as p,mergeProps as c,nextTick as v}from"vue";const m={pageSize:{type:Number,default:10},total:{type:Number,default:0},pageSizeOptions:{type:Array,default:()=>[5,10,20,50]},pageSizeDirection:{type:Array,default:()=>["centerDown","centerUp"]},pageIndex:{type:Number,default:1},maxItems:{type:Number,default:10},preLink:{type:String,default:"<"},nextLink:{type:String,default:">"},size:{type:String,default:""},canJumpPage:{type:Boolean,default:!1},canChangePageSize:{type:Boolean,default:!1},canViewTotal:{type:Boolean,default:!1},totalItemText:{type:String,default:"所有条目"},goToText:{type:String,default:"跳至"},showJumpButton:{type:Boolean,default:!1},showTruePageIndex:{type:Boolean,default:!1},lite:{type:Boolean,default:!1},showPageSelector:{type:Boolean,default:!0},haveConfigMenu:{type:Boolean,default:!1},autoFixPageIndex:{type:Boolean,default:!0},autoHide:{type:Boolean,default:!1},"onUpdate:pageIndex":{type:Function},"onUpdate:pageSize":{type:Function},onPageIndexChange:{type:Function},onPageSizeChange:{type:Function}};function h(e,n,a){document.addEventListener?e&&n&&a&&e.addEventListener(n,a,!1):e&&n&&a&&e.attachEvent("on"+n,a)}const f="undefined"!=typeof window,C=Symbol("@@clickoutside"),x=new Map;let S,z=0,P=!0;function y(e,n,a){return f&&P&&(P=!1,h(document,"mousedown",(e=>{S=e})),h(document,"mouseup",(e=>{for(const[n,a]of x)a[C].documentHandler(e,S)}))),function(t,i){a&&n.instance&&t.target&&i.target&&!e.contains(t.target)&&!e.contains(i.target)&&e!==t.target&&e[C].bindingFn&&e[C].bindingFn()}}var b=e({directives:{clickoutside:{beforeMount:function(e,n,a){z++,x.set(z,e),e[C]={nid:z,documentHandler:y(e,n,a),bindingFn:n.value}},updated:function(e,n,a){e[C].documentHandler=y(e,n,a),e[C].bindingFn=n.value},unmounted:function(e){x.delete(e[C].nid),delete e[C]}}},props:{currentPageSize:Number,pageSizeChange:Function,pageSizeOptions:Array},setup(){const e=n(null),i=n(!1);a((()=>{h(e.value,"click",o)})),t((()=>{var n,a,t;n=e.value,a="click",t=o,document.removeEventListener?n&&a&&t&&n.removeEventListener(a,t,!1):n&&a&&t&&n.detachEvent("on"+a,t)}));const o=e=>{i.value=!i.value&&!!e};return{paginationConfig:e,isShowConfig:i,closeConfigMenu:o}},render(){var e;const{closeConfigMenu:n,currentPageSize:a,pageSizeChange:t,pageSizeOptions:s,isShowConfig:g,$slots:r}=this;return i(o("div",{class:"devui-pagination-config",ref:"paginationConfig"},[o("div",{class:"devui-setup-icon"},[o("i",{class:"icon-setting",style:"font-weight: bold;"},null)]),g&&o("div",{class:"devui-config-container"},[null==(e=r.default)?void 0:e.call(r),o("div",{class:"pagination-config-item"},[o("div",{class:"config-item-title"},[u("每页条数")]),o("div",{class:"devui-page-number"},[s.map((e=>o("div",{class:{choosed:e===a},key:e,onClick:t.bind(null,{value:e})},[e])))])])])]),[[l("clickoutside"),n]])}});var k=e({props:{goToText:String,size:{type:String,default:""},pageIndex:Number,showJumpButton:Boolean,totalPages:Number,cursor:Number,onChangeCursorEmit:Function},emits:["changeCursorEmit"],setup(e,{emit:a}){const{pageIndex:t,totalPages:i,cursor:o}=s(e),u=n(t.value);g((()=>t.value),(e=>{u.value=e}));let l=t.value;return{inputNum:u,jumpPageChange:e=>{l=+e,u.value=e,isNaN(e)&&setTimeout((()=>{u.value=t.value}),300)},jump:e=>{l>i.value||"btn"!==e&&"Enter"!==e.key||o.value===l||a("changeCursorEmit",l)}}},render(){const{goToText:e,size:n,inputNum:a,jumpPageChange:t,jump:i,showJumpButton:u}=this;return o("div",{class:"devui-jump-container"},[e,o(r("d-input"),{class:["devui-pagination-input",n?"devui-pagination-input-"+n:""],size:n,value:String(a),"onUpdate:value":t,onKeydown:i},null),"跳至"===e&&"页",u&&o("div",{class:["devui-jump-button",n?"devui-jump-size-"+n:"devui-jump-size-default"],onClick:i.bind(null,"btn"),title:e},[o("div",{class:"devui-pagination-go"},null)])])}});var I=e({props:{size:{type:String,default:""},preLink:String,nextLink:String,lite:Boolean,cursor:Number,maxItems:Number,totalPages:Number,onChangeCursorEmit:Function,showTruePageIndex:Boolean},emits:["changeCursorEmit"],setup:(e,{emit:n})=>({showPageNum:d((()=>((e,n,a)=>{if(n>=a)return[2,a];const t=n-2;let i=e-(t>>1),o=e+(t-1>>1);return i<2&&(i=2,o=n-2),o>a&&(i=a-n+3,o=a),[i,o]})(e.cursor,e.maxItems,e.totalPages))),changeCursor:a=>{if(isNaN(a))return;const t=a<1?1:a>e.totalPages?e.totalPages:0|a;n("changeCursorEmit",t)},prevChange:a=>{if(e.cursor>1){const t=-1===a?e.cursor-1:a;n("changeCursorEmit",t)}},nextChange:a=>{if(e.cursor<e.totalPages){const t=-1===a?e.cursor+1:a;n("changeCursorEmit",t)}}}),render(){const{size:e,preLink:n,nextLink:a,lite:t,changeCursor:i,cursor:l,showPageNum:s,prevChange:g,totalPages:r,nextChange:d,showTruePageIndex:c}=this;return o("ul",{class:["devui-pagination-list",e?"devui-pagination-"+e:""]},[o("li",{onClick:g.bind(null,-1),class:{"devui-pagination-item":!0,disabled:l<=1}},[o("a",{innerHTML:n,class:"devui-pagination-link"},null)]),!t&&o(p,null,[o("li",{onClick:i.bind(null,1),class:{"devui-pagination-item":!0,active:1===l}},[o("a",{class:"devui-pagination-link"},[u("1")])]),s[0]>2&&o("li",{onClick:g.bind(null,s[0]-1),class:"devui-pagination-item"},[o("a",{class:"devui-pagination-link"},[u("...")])]),(()=>{const e=[];for(let n=s[0];n<=s[1];n++)e.push(o("li",{onClick:i.bind(null,n),key:n,class:{"devui-pagination-item":!0,active:l===n}},[o("a",{class:"devui-pagination-link"},[n])]));return e})(),s[1]<r-1&&o("li",{onClick:d.bind(null,s[1]+1),class:"devui-pagination-item"},[o("a",{class:"devui-pagination-link"},[u("...")])]),s[1]<r&&o("li",{onClick:i.bind(null,r),class:{"devui-pagination-item":!0,active:l===r}},[o("a",{class:"devui-pagination-link"},[r])]),c&&l>r&&r>0&&o(p,null,[l>r+1&&o("li",{class:"devui-pagination-item disabled"},[o("a",{class:"devui-pagination-link"},[u("...")])]),o("li",{class:"devui-pagination-item disabled active"},[o("a",{class:"devui-pagination-link"},[l])])])]),o("li",{onClick:d.bind(null,-1),class:{"devui-pagination-item":!0,disabled:l>=r}},[o("a",{innerHTML:a,class:"devui-pagination-link"},null)])])}}),w=e({name:"DPagination",components:{ConfigMenu:b,JumpPage:k,PageNumBtn:I},props:m,emits:["pageIndexChange","pageSizeChange","update:pageSize","update:pageIndex"],setup(e,{emit:n}){const a=d((()=>{return e=o.value,new Array(e||1).fill(0).map(((n,a)=>({name:`${a+1}/${e}`,value:a+1})));var e})),t=d({get:()=>!e.showTruePageIndex&&e.pageIndex>o.value?(n("update:pageIndex",o.value||1),o.value||1):e.pageIndex||1,set(e){n("update:pageIndex",e)}}),i=d({get:()=>e.pageSize,set(e){n("update:pageSize",e)}}),o=d((()=>Math.ceil(e.total/e.pageSize))),u=e=>{t.value=e,n("pageIndexChange",e)};return{cursor:t,totalPages:o,changeCursorEmit:u,currentPageSize:i,pageSizeChange:a=>{i.value=a.value,e.autoFixPageIndex&&v((()=>{t.value>o.value&&u(o.value)})),n("pageSizeChange",a.value)},litePageOptions:a,litePageIndexChange:e=>{u(e.value)}}},render(){const{total:e,pageIndex:n,pageSizeOptions:a,pageSizeDirection:t,preLink:i,nextLink:l,size:s,canJumpPage:g,canChangePageSize:d,canViewTotal:p,totalItemText:v,goToText:m,maxItems:h,showJumpButton:f,showTruePageIndex:C,lite:x,showPageSelector:S,haveConfigMenu:z,autoHide:P,$slots:y,cursor:b,totalPages:k,currentPageSize:I,pageSizeChange:w,changeCursorEmit:T,litePageOptions:N,litePageIndexChange:B}=this;return P&&Math.min(...a)>e?null:o("div",{class:"devui-pagination"},[d&&!x&&o("div",{class:["devui-page-size",s?"devui-page-size-"+s:""]},[o(r("d-select"),{options:a,modelValue:I,onValueChange:w,pageSizeDirection:t},null)]),(!x||x&&S)&&p&&o("div",{class:"devui-total-size"},[v,u(": "),e]),x&&S&&o("div",{class:"devui-page-size"},[o(r("d-select"),{options:N,disabled:0===e,modelValue:b,onValueChange:B,pageSizeDirection:t},null)]),o(r("page-num-btn"),c({cursor:b,totalPages:k,size:s,lite:x,maxItems:h,preLink:i,nextLink:l,showTruePageIndex:C},{onChangeCursorEmit:T}),null),g&&!x&&o(r("jump-page"),c({goToText:m,size:s,pageIndex:n,totalPages:k,cursor:b,showJumpButton:f},{onChangeCursorEmit:T}),null),x&&z&&o(r("config-menu"),{currentPageSize:I,pageSizeChange:w,pageSizeOptions:a},{default:()=>{var e;return[null==(e=y.default)?void 0:e.call(y)]}})])}});w.install=e=>{e.component(w.name,w)};var T={title:"Pagination 分页",category:"导航",status:"已完成",install(e){e.use(w)}};export{w as Pagination,T as default};
|
package/pagination/index.umd.js
CHANGED
|
@@ -1 +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";const n={pageSize:{type:Number,default:10},total:{type:Number,default:0},pageSizeOptions:{type:Array,default:()=>[5,10,20,50]},pageSizeDirection:{type:Array,default:()=>["centerDown","centerUp"]},pageIndex:{type:Number,default:1},maxItems:{type:Number,default:10},preLink:{type:String,default:"<"},nextLink:{type:String,default:">"},size:{type:String,default:""},canJumpPage:{type:Boolean,default:!1},canChangePageSize:{type:Boolean,default:!1},canViewTotal:{type:Boolean,default:!1},totalItemText:{type:String,default:"所有条目"},goToText:{type:String,default:"跳至"},showJumpButton:{type:Boolean,default:!1},showTruePageIndex:{type:Boolean,default:!1},lite:{type:Boolean,default:!1},showPageSelector:{type:Boolean,default:!0},haveConfigMenu:{type:Boolean,default:!1},autoFixPageIndex:{type:Boolean,default:!0},autoHide:{type:Boolean,default:!1},"onUpdate:pageIndex":{type:Function},"onUpdate:pageSize":{type:Function},onPageIndexChange:{type:Function},onPageSizeChange:{type:Function}};function a(e,t,n){document.addEventListener?e&&t&&n&&e.addEventListener(t,n,!1):e&&t&&n&&e.attachEvent("on"+t,n)}const i=Symbol("@@clickoutside"),
|
|
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 n={pageSize:{type:Number,default:10},total:{type:Number,default:0},pageSizeOptions:{type:Array,default:()=>[5,10,20,50]},pageSizeDirection:{type:Array,default:()=>["centerDown","centerUp"]},pageIndex:{type:Number,default:1},maxItems:{type:Number,default:10},preLink:{type:String,default:"<"},nextLink:{type:String,default:">"},size:{type:String,default:""},canJumpPage:{type:Boolean,default:!1},canChangePageSize:{type:Boolean,default:!1},canViewTotal:{type:Boolean,default:!1},totalItemText:{type:String,default:"所有条目"},goToText:{type:String,default:"跳至"},showJumpButton:{type:Boolean,default:!1},showTruePageIndex:{type:Boolean,default:!1},lite:{type:Boolean,default:!1},showPageSelector:{type:Boolean,default:!0},haveConfigMenu:{type:Boolean,default:!1},autoFixPageIndex:{type:Boolean,default:!0},autoHide:{type:Boolean,default:!1},"onUpdate:pageIndex":{type:Function},"onUpdate:pageSize":{type:Function},onPageIndexChange:{type:Function},onPageSizeChange:{type:Function}};function a(e,t,n){document.addEventListener?e&&t&&n&&e.addEventListener(t,n,!1):e&&t&&n&&e.attachEvent("on"+t,n)}const i="undefined"!=typeof window,o=Symbol("@@clickoutside"),u=new Map;let l,r=0,s=!0;function d(e,t,n){return i&&s&&(s=!1,a(document,"mousedown",(e=>{l=e})),a(document,"mouseup",(e=>{for(const[t,n]of u)n[o].documentHandler(e,l)}))),function(a,i){n&&t.instance&&a.target&&i.target&&!e.contains(a.target)&&!e.contains(i.target)&&e!==a.target&&e[o].bindingFn&&e[o].bindingFn()}}const c={beforeMount:function(e,t,n){r++,u.set(r,e),e[o]={nid:r,documentHandler:d(e,t,n),bindingFn:t.value}},updated:function(e,t,n){e[o].documentHandler=d(e,t,n),e[o].bindingFn=t.value},unmounted:function(e){u.delete(e[o].nid),delete e[o]}};var g=t.defineComponent({directives:{clickoutside:c},props:{currentPageSize:Number,pageSizeChange:Function,pageSizeOptions:Array},setup(){const e=t.ref(null),n=t.ref(!1);t.onMounted((()=>{a(e.value,"click",i)})),t.onUnmounted((()=>{var t,n,a;t=e.value,n="click",a=i,document.removeEventListener?t&&n&&a&&t.removeEventListener(n,a,!1):t&&n&&a&&t.detachEvent("on"+n,a)}));const i=e=>{n.value=!n.value&&!!e};return{paginationConfig:e,isShowConfig:n,closeConfigMenu:i}},render(){var e;const{closeConfigMenu:n,currentPageSize:a,pageSizeChange:i,pageSizeOptions:o,isShowConfig:u,$slots:l}=this;return t.withDirectives(t.createVNode("div",{class:"devui-pagination-config",ref:"paginationConfig"},[t.createVNode("div",{class:"devui-setup-icon"},[t.createVNode("i",{class:"icon-setting",style:"font-weight: bold;"},null)]),u&&t.createVNode("div",{class:"devui-config-container"},[null==(e=l.default)?void 0:e.call(l),t.createVNode("div",{class:"pagination-config-item"},[t.createVNode("div",{class:"config-item-title"},[t.createTextVNode("每页条数")]),t.createVNode("div",{class:"devui-page-number"},[o.map((e=>t.createVNode("div",{class:{choosed:e===a},key:e,onClick:i.bind(null,{value:e})},[e])))])])])]),[[t.resolveDirective("clickoutside"),n]])}});const p={goToText:String,size:{type:String,default:""},pageIndex:Number,showJumpButton:Boolean,totalPages:Number,cursor:Number,onChangeCursorEmit:Function};var m=t.defineComponent({props:p,emits:["changeCursorEmit"],setup(e,{emit:n}){const{pageIndex:a,totalPages:i,cursor:o}=t.toRefs(e),u=t.ref(a.value);t.watch((()=>a.value),(e=>{u.value=e}));let l=a.value;return{inputNum:u,jumpPageChange:e=>{l=+e,u.value=e,isNaN(e)&&setTimeout((()=>{u.value=a.value}),300)},jump:e=>{l>i.value||"btn"!==e&&"Enter"!==e.key||o.value===l||n("changeCursorEmit",l)}}},render(){const{goToText:e,size:n,inputNum:a,jumpPageChange:i,jump:o,showJumpButton:u}=this;return t.createVNode("div",{class:"devui-jump-container"},[e,t.createVNode(t.resolveComponent("d-input"),{class:["devui-pagination-input",n?"devui-pagination-input-"+n:""],size:n,value:String(a),"onUpdate:value":i,onKeydown:o},null),"跳至"===e&&"页",u&&t.createVNode("div",{class:["devui-jump-button",n?"devui-jump-size-"+n:"devui-jump-size-default"],onClick:o.bind(null,"btn"),title:e},[t.createVNode("div",{class:"devui-pagination-go"},null)])])}});const v={size:{type:String,default:""},preLink:String,nextLink:String,lite:Boolean,cursor:Number,maxItems:Number,totalPages:Number,onChangeCursorEmit:Function,showTruePageIndex:Boolean};var f=t.defineComponent({props:v,emits:["changeCursorEmit"],setup:(e,{emit:n})=>({showPageNum:t.computed((()=>((e,t,n)=>{if(t>=n)return[2,n];const a=t-2;let i=e-(a>>1),o=e+(a-1>>1);return i<2&&(i=2,o=t-2),o>n&&(i=n-t+3,o=n),[i,o]})(e.cursor,e.maxItems,e.totalPages))),changeCursor:t=>{if(isNaN(t))return;const a=t<1?1:t>e.totalPages?e.totalPages:0|t;n("changeCursorEmit",a)},prevChange:t=>{if(e.cursor>1){const a=-1===t?e.cursor-1:t;n("changeCursorEmit",a)}},nextChange:t=>{if(e.cursor<e.totalPages){const a=-1===t?e.cursor+1:t;n("changeCursorEmit",a)}}}),render(){const{size:e,preLink:n,nextLink:a,lite:i,changeCursor:o,cursor:u,showPageNum:l,prevChange:r,totalPages:s,nextChange:d,showTruePageIndex:c}=this;return t.createVNode("ul",{class:["devui-pagination-list",e?"devui-pagination-"+e:""]},[t.createVNode("li",{onClick:r.bind(null,-1),class:{"devui-pagination-item":!0,disabled:u<=1}},[t.createVNode("a",{innerHTML:n,class:"devui-pagination-link"},null)]),!i&&t.createVNode(t.Fragment,null,[t.createVNode("li",{onClick:o.bind(null,1),class:{"devui-pagination-item":!0,active:1===u}},[t.createVNode("a",{class:"devui-pagination-link"},[t.createTextVNode("1")])]),l[0]>2&&t.createVNode("li",{onClick:r.bind(null,l[0]-1),class:"devui-pagination-item"},[t.createVNode("a",{class:"devui-pagination-link"},[t.createTextVNode("...")])]),(()=>{const e=[];for(let n=l[0];n<=l[1];n++)e.push(t.createVNode("li",{onClick:o.bind(null,n),key:n,class:{"devui-pagination-item":!0,active:u===n}},[t.createVNode("a",{class:"devui-pagination-link"},[n])]));return e})(),l[1]<s-1&&t.createVNode("li",{onClick:d.bind(null,l[1]+1),class:"devui-pagination-item"},[t.createVNode("a",{class:"devui-pagination-link"},[t.createTextVNode("...")])]),l[1]<s&&t.createVNode("li",{onClick:o.bind(null,s),class:{"devui-pagination-item":!0,active:u===s}},[t.createVNode("a",{class:"devui-pagination-link"},[s])]),c&&u>s&&s>0&&t.createVNode(t.Fragment,null,[u>s+1&&t.createVNode("li",{class:"devui-pagination-item disabled"},[t.createVNode("a",{class:"devui-pagination-link"},[t.createTextVNode("...")])]),t.createVNode("li",{class:"devui-pagination-item disabled active"},[t.createVNode("a",{class:"devui-pagination-link"},[u])])])]),t.createVNode("li",{onClick:d.bind(null,-1),class:{"devui-pagination-item":!0,disabled:u>=s}},[t.createVNode("a",{innerHTML:a,class:"devui-pagination-link"},null)])])}}),h=t.defineComponent({name:"DPagination",components:{ConfigMenu:g,JumpPage:m,PageNumBtn:f},props:n,emits:["pageIndexChange","pageSizeChange","update:pageSize","update:pageIndex"],setup(e,{emit:n}){const a=t.computed((()=>{return e=u.value,new Array(e||1).fill(0).map(((t,n)=>({name:`${n+1}/${e}`,value:n+1})));var e})),i=t.computed({get:()=>!e.showTruePageIndex&&e.pageIndex>u.value?(n("update:pageIndex",u.value||1),u.value||1):e.pageIndex||1,set(e){n("update:pageIndex",e)}}),o=t.computed({get:()=>e.pageSize,set(e){n("update:pageSize",e)}}),u=t.computed((()=>Math.ceil(e.total/e.pageSize))),l=e=>{i.value=e,n("pageIndexChange",e)};return{cursor:i,totalPages:u,changeCursorEmit:l,currentPageSize:o,pageSizeChange:a=>{o.value=a.value,e.autoFixPageIndex&&t.nextTick((()=>{i.value>u.value&&l(u.value)})),n("pageSizeChange",a.value)},litePageOptions:a,litePageIndexChange:e=>{l(e.value)}}},render(){const{total:e,pageIndex:n,pageSizeOptions:a,pageSizeDirection:i,preLink:o,nextLink:u,size:l,canJumpPage:r,canChangePageSize:s,canViewTotal:d,totalItemText:c,goToText:g,maxItems:p,showJumpButton:m,showTruePageIndex:v,lite:f,showPageSelector:h,haveConfigMenu:C,autoHide:N,$slots:x,cursor:V,totalPages:P,currentPageSize:S,pageSizeChange:y,changeCursorEmit:z,litePageOptions:b,litePageIndexChange:k}=this;return N&&Math.min(...a)>e?null:t.createVNode("div",{class:"devui-pagination"},[s&&!f&&t.createVNode("div",{class:["devui-page-size",l?"devui-page-size-"+l:""]},[t.createVNode(t.resolveComponent("d-select"),{options:a,modelValue:S,onValueChange:y,pageSizeDirection:i},null)]),(!f||f&&h)&&d&&t.createVNode("div",{class:"devui-total-size"},[c,t.createTextVNode(": "),e]),f&&h&&t.createVNode("div",{class:"devui-page-size"},[t.createVNode(t.resolveComponent("d-select"),{options:b,disabled:0===e,modelValue:V,onValueChange:k,pageSizeDirection:i},null)]),t.createVNode(t.resolveComponent("page-num-btn"),t.mergeProps({cursor:V,totalPages:P,size:l,lite:f,maxItems:p,preLink:o,nextLink:u,showTruePageIndex:v},{onChangeCursorEmit:z}),null),r&&!f&&t.createVNode(t.resolveComponent("jump-page"),t.mergeProps({goToText:g,size:l,pageIndex:n,totalPages:P,cursor:V,showJumpButton:m},{onChangeCursorEmit:z}),null),f&&C&&t.createVNode(t.resolveComponent("config-menu"),{currentPageSize:S,pageSizeChange:y,pageSizeOptions:a},{default:()=>{var e;return[null==(e=x.default)?void 0:e.call(x)]}})])}});h.install=e=>{e.component(h.name,h)};var C={title:"Pagination 分页",category:"导航",status:"已完成",install(e){e.use(h)}};e.Pagination=h,e.default=C,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
|
package/popover/index.es.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=Object.defineProperty,
|
|
1
|
+
var e=Object.defineProperty,n=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,l=(n,t,o)=>t in n?e(n,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[t]=o;"undefined"!=typeof require&&require;import{defineComponent as a,ref as r,toRefs as u,reactive as i,createVNode as c,withDirectives as d,resolveDirective as p,resolveComponent as s}from"vue";var v=(e,n)=>{let t=null;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{null==e||e()}),n)}};const f="undefined"!=typeof window;function m(e,n,t){document.addEventListener?e&&n&&t&&e.addEventListener(n,t,!1):e&&n&&t&&e.attachEvent("on"+n,t)}const y=Symbol("@@clickoutside"),b=new Map;let g,w=0,x=!0;function h(e,n,t){return f&&x&&(x=!1,m(document,"mousedown",(e=>{g=e})),m(document,"mouseup",(e=>{for(const[n,t]of b)t[y].documentHandler(e,g)}))),function(o,l){t&&n.instance&&o.target&&l.target&&!e.contains(o.target)&&!e.contains(l.target)&&e!==o.target&&e[y].bindingFn&&e[y].bindingFn()}}const S={success:{name:"right-o",color:"rgb(61, 204, 166)"},error:{name:"error-o",color:"rgb(249, 95, 91)"},info:{name:"info-o",color:"rgb(81, 112, 255)"},warning:{name:"warning-o",color:"rgb(254, 204, 85)"},default:{}};var O=a({name:"DPopover",directives:{clickoutside:{beforeMount:function(e,n,t){w++,b.set(w,e),e[y]={nid:w,documentHandler:h(e,n,t),bindingFn:n.value}},updated:function(e,n,t){e[y].documentHandler=h(e,n,t),e[y].bindingFn=n.value},unmounted:function(e){b.delete(e[y].nid),delete e[y]}}},props:{visible:{type:Boolean,default:!1},position:{type:String,default:"bottom"},content:{type:String,default:"default"},trigger:{type:String,default:"click"},zIndex:{type:Number,default:1060},popType:{type:String,default:"default"},showAnimation:{type:Boolean,default:!0},mouseEnterDelay:{type:Number,default:150},mouseLeaveDelay:{type:Number,default:100},popMaxWidth:{type:Number,default:void 0},popoverStyle:{type:Object,default:()=>({})}},setup(e,a){const{slots:f}=a,m=r(e.visible),{position:y,content:b,zIndex:g,trigger:w,popType:x,popoverStyle:h,mouseEnterDelay:O,mouseLeaveDelay:k,showAnimation:E,popMaxWidth:M}=u(e),j=((e,a)=>{for(var r in a||(a={}))t.call(a,r)&&l(e,r,a[r]);if(n)for(var r of n(a))o.call(a,r)&&l(e,r,a[r]);return e})({zIndex:g.value},h.value),D="click"===w.value,P=i(S[x.value]),z=D?function(){m.value?m.value=!1:m.value=!0}:null,F=v((()=>{m.value=!0}),O.value),I=v((()=>{m.value=!1}),k.value),L=D?null:F,N=D?null:I,T=()=>{m.value=!1};return M.value&&(j.maxWidth=`${M.value}px`),()=>{var e,n;return c("div",{class:["devui-popover",y.value,{"devui-popover-animation":E.value,"devui-popover-isVisible":m.value}]},[d(c("div",{class:"devui-popover-reference",onMouseenter:L,onMouseleave:N,onClick:z},[null==(e=f.reference)?void 0:e.call(f)]),[[p("clickoutside"),T]]),c("div",{class:["devui-popover-content",P.name?"is-icon":""],style:j},[P.name&&c(s("d-icon"),{name:P.name,color:P.color,class:"devui-popover-icon",size:"16px"},null),(null==(n=f.content)?void 0:n.call(f))||c("span",null,[b.value]),c("span",{class:"after",style:j},null)])])}}});O.install=function(e){e.component(O.name,O)};var k={title:"Popover 悬浮提示",category:"反馈",status:"已完成",install(e){e.use(O)}};export{O as Popover,k as default};
|
package/popover/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,o,t)=>o in e?__defProp(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,__spreadValues=(e,o)=>{for(var t in o||(o={}))__hasOwnProp.call(o,t)&&__defNormalProp(e,t,o[t]);if(__getOwnPropSymbols)for(var t of __getOwnPropSymbols(o))__propIsEnum.call(o,t)&&__defNormalProp(e,t,o[t]);return e},__require="undefined"!=typeof require?require:e=>{throw new Error('Dynamic require of "'+e+'" is not supported')};!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).index={},e.Vue)}(this,(function(e,o){"use strict";var t=(e,o)=>{let t=null;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{null==e||e()}),o)}};function
|
|
1
|
+
var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,o,t)=>o in e?__defProp(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,__spreadValues=(e,o)=>{for(var t in o||(o={}))__hasOwnProp.call(o,t)&&__defNormalProp(e,t,o[t]);if(__getOwnPropSymbols)for(var t of __getOwnPropSymbols(o))__propIsEnum.call(o,t)&&__defNormalProp(e,t,o[t]);return e},__require="undefined"!=typeof require?require:e=>{throw new Error('Dynamic require of "'+e+'" is not supported')};!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).index={},e.Vue)}(this,(function(e,o){"use strict";var t=(e,o)=>{let t=null;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{null==e||e()}),o)}};const n="undefined"!=typeof window;function r(e,o,t){document.addEventListener?e&&o&&t&&e.addEventListener(o,t,!1):e&&o&&t&&e.attachEvent("on"+o,t)}const l=Symbol("@@clickoutside"),a=new Map;let i,u=0,d=!0;function p(e,o,t){return n&&d&&(d=!1,r(document,"mousedown",(e=>{i=e})),r(document,"mouseup",(e=>{for(const[o,t]of a)t[l].documentHandler(e,i)}))),function(n,r){t&&o.instance&&n.target&&r.target&&!e.contains(n.target)&&!e.contains(r.target)&&e!==n.target&&e[l].bindingFn&&e[l].bindingFn()}}const s={beforeMount:function(e,o,t){u++,a.set(u,e),e[l]={nid:u,documentHandler:p(e,o,t),bindingFn:o.value}},updated:function(e,o,t){e[l].documentHandler=p(e,o,t),e[l].bindingFn=o.value},unmounted:function(e){a.delete(e[l].nid),delete e[l]}};const c={success:{name:"right-o",color:"rgb(61, 204, 166)"},error:{name:"error-o",color:"rgb(249, 95, 91)"},info:{name:"info-o",color:"rgb(81, 112, 255)"},warning:{name:"warning-o",color:"rgb(254, 204, 85)"},default:{}};var v=o.defineComponent({name:"DPopover",directives:{clickoutside:s},props:{visible:{type:Boolean,default:!1},position:{type:String,default:"bottom"},content:{type:String,default:"default"},trigger:{type:String,default:"click"},zIndex:{type:Number,default:1060},popType:{type:String,default:"default"},showAnimation:{type:Boolean,default:!0},mouseEnterDelay:{type:Number,default:150},mouseLeaveDelay:{type:Number,default:100},popMaxWidth:{type:Number,default:void 0},popoverStyle:{type:Object,default:()=>({})}},setup(e,n){const{slots:r}=n,l=o.ref(e.visible),{position:a,content:i,zIndex:u,trigger:d,popType:p,popoverStyle:s,mouseEnterDelay:v,mouseLeaveDelay:f,showAnimation:m,popMaxWidth:y}=o.toRefs(e),b=__spreadValues({zIndex:u.value},s.value),g="click"===d.value,_=o.reactive(c[p.value]),w=g?function(){l.value?l.value=!1:l.value=!0}:null,P=t((()=>{l.value=!0}),v.value),h=t((()=>{l.value=!1}),f.value),N=g?null:P,O=g?null:h,S=()=>{l.value=!1};return y.value&&(b.maxWidth=`${y.value}px`),()=>{var e,t;return o.createVNode("div",{class:["devui-popover",a.value,{"devui-popover-animation":m.value,"devui-popover-isVisible":l.value}]},[o.withDirectives(o.createVNode("div",{class:"devui-popover-reference",onMouseenter:N,onMouseleave:O,onClick:w},[null==(e=r.reference)?void 0:e.call(r)]),[[o.resolveDirective("clickoutside"),S]]),o.createVNode("div",{class:["devui-popover-content",_.name?"is-icon":""],style:b},[_.name&&o.createVNode(o.resolveComponent("d-icon"),{name:_.name,color:_.color,class:"devui-popover-icon",size:"16px"},null),(null==(t=r.content)?void 0:t.call(r))||o.createVNode("span",null,[i.value]),o.createVNode("span",{class:"after",style:b},null)])])}}});v.install=function(e){e.component(v.name,v)};var f={title:"Popover 悬浮提示",category:"反馈",status:"已完成",install(e){e.use(v)}};e.Popover=v,e.default=f,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
|
package/popover/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.devui-popover{
|
|
1
|
+
.devui-popover{position:relative;display:inline-flex}.devui-popover.devui-popover-isVisible .devui-popover-content{display:inline-flex}.devui-popover .devui-popover-content{position:absolute;display:none;padding:5px 14px;align-items:center;flex-wrap:wrap;white-space:nowrap;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover .devui-popover-content .after{content:"";width:12px;height:12px;transform:rotate(45deg);position:absolute;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-popover .devui-popover-content.is-icon{flex-wrap:nowrap}.devui-popover .devui-popover-content .devui-popover-icon{margin-right:5px}@keyframes some-animation{0%{opacity:0;display:inline-flex}to{opacity:1}}.devui-popover.devui-popover-animation .devui-popover-content{animation:some-animation .5s var(--devui-animation-linear, cubic-bezier(0, 0, 1, 1)) 1 forwards}.devui-popover.left .devui-popover-content{left:-8px;top:0;transform:translate(-100%);top:50%;transform:translate(-100%,-50%)}.devui-popover.left .after{right:-6px;top:50%;margin-top:-6px;margin-left:-8px}.devui-popover.left-top .devui-popover-content{left:-8px;top:0;transform:translate(-100%)}.devui-popover.left-top .after{right:-6px;top:50%;margin-left:-8px;top:8px;margin-top:auto}.devui-popover.left-bottom .devui-popover-content{left:-8px;top:0;transform:translate(-100%);top:auto;bottom:0}.devui-popover.left-bottom .after{right:-6px;top:50%;margin-left:-8px;bottom:8px;margin-top:auto}.devui-popover.top .devui-popover-content{top:-8px;left:0;transform:translateY(-100%);left:50%;transform:translate(-50%,-100%)}.devui-popover.top .after{left:50%;bottom:-6px;margin-left:-6px}.devui-popover.top-left .devui-popover-content{top:-8px;left:0;transform:translateY(-100%)}.devui-popover.top-left .after{bottom:-6px;left:8px;margin-left:auto;margin-right:-6px}.devui-popover.top-right .devui-popover-content{top:-8px;left:0;transform:translateY(-100%);left:auto;right:0}.devui-popover.top-right .after{bottom:-6px;margin-left:-6px;right:8px}.devui-popover.right .devui-popover-content{right:-8px;top:50%;transform:translate(100%);transform:translate(100%,-50%)}.devui-popover.right .after{left:-6px;margin-right:-6px;top:8px;top:50%;margin-top:-6px}.devui-popover.right-top .devui-popover-content{right:-8px;top:50%;transform:translate(100%);top:0}.devui-popover.right-top .after{left:-6px;margin-right:-6px;top:8px}.devui-popover.right-bottom .devui-popover-content{right:-8px;top:50%;transform:translate(100%);bottom:0;top:auto}.devui-popover.right-bottom .after{left:-6px;margin-right:-6px;top:8px;top:auto;bottom:8px}.devui-popover.bottom .devui-popover-content{left:0;margin-bottom:-6px;transform:translateY(100%);left:50%;bottom:0;transform:translate(-50%,100%)}.devui-popover.bottom .after{left:8px;top:-6px;margin-bottom:-6px;left:50%;margin-right:auto;margin-left:-6px}.devui-popover.bottom-left .devui-popover-content{left:0;bottom:0;margin-bottom:-6px;transform:translateY(100%)}.devui-popover.bottom-left .after{left:8px;top:-6px;margin-bottom:-6px;margin-right:-6px}.devui-popover.bottom-right .devui-popover-content{left:0;bottom:0;margin-bottom:-6px;transform:translateY(100%);left:auto;right:0}.devui-popover.bottom-right .after{left:8px;top:-6px;margin-bottom:-6px;left:auto;margin-right:auto;right:8px;margin-left:-6px}
|
package/skeleton/index.es.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineComponent as e,createVNode as a}from"vue";var t=e({name:"DSkeleton",props:{row:{type:Number||String,default:0},animate:{type:Boolean,default:!0},loading:{type:Boolean,default:!0},avatar:{type:Boolean,default:!1}},setup(e,t){const{slots:l}=t,n=[];for(let a=0;a<e.row;a++)n.push(1);return()=>{var t;return e.loading?a("div",{class:"devui-skeleton "+(e.animate?"devui-skeleton-animated":"")},[a("div",{class:"devui-skeleton__avatar
|
|
1
|
+
import{defineComponent as e,createVNode as a}from"vue";var t=e({name:"DSkeleton",props:{row:{type:Number||String,default:0},animate:{type:Boolean,default:!0},loading:{type:Boolean,default:!0},avatar:{type:Boolean,default:!1}},setup(e,t){const{slots:l}=t,n=[];for(let a=0;a<e.row;a++)n.push(1);return()=>{var t;return e.loading?a("div",{class:"devui-skeleton "+(e.animate?"devui-skeleton-animated":"devui-skeleton-no-animated")},[e.avatar?a("div",{class:"devui-skeleton__avatar"},[a("div",{class:"avatar"},null)]):null,a("div",{class:"devui-skeleton__item__group"},[n.map((()=>a("div",{class:"devui-skeleton__item"},null)))])]):a("div",{class:"devui-skeleton "+(e.animate?"devui-skeleton-animated":"")},[null==(t=l.default)?void 0:t.call(l)])}}});t.install=function(e){e.component(t.name,t)};var l={title:"Skeleton 骨架屏",category:"数据展示",status:"已完成",install(e){e.use(t)}};export{t as Skeleton,l as default};
|
package/skeleton/index.umd.js
CHANGED
|
@@ -1 +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";const a={row:{type:Number||String,default:0},animate:{type:Boolean,default:!0},loading:{type:Boolean,default:!0},avatar:{type:Boolean,default:!1}};var o=t.defineComponent({name:"DSkeleton",props:a,setup(e,a){const{slots:o}=a,n=[];for(let t=0;t<e.row;t++)n.push(1);return()=>{var a;return e.loading?t.createVNode("div",{class:"devui-skeleton "+(e.animate?"devui-skeleton-animated":"")},[t.createVNode("div",{class:"devui-skeleton__avatar
|
|
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 a={row:{type:Number||String,default:0},animate:{type:Boolean,default:!0},loading:{type:Boolean,default:!0},avatar:{type:Boolean,default:!1}};var o=t.defineComponent({name:"DSkeleton",props:a,setup(e,a){const{slots:o}=a,n=[];for(let t=0;t<e.row;t++)n.push(1);return()=>{var a;return e.loading?t.createVNode("div",{class:"devui-skeleton "+(e.animate?"devui-skeleton-animated":"devui-skeleton-no-animated")},[e.avatar?t.createVNode("div",{class:"devui-skeleton__avatar"},[t.createVNode("div",{class:"avatar"},null)]):null,t.createVNode("div",{class:"devui-skeleton__item__group"},[n.map((()=>t.createVNode("div",{class:"devui-skeleton__item"},null)))])]):t.createVNode("div",{class:"devui-skeleton "+(e.animate?"devui-skeleton-animated":"")},[null==(a=o.default)?void 0:a.call(o)])}}});o.install=function(e){e.component(o.name,o)};var n={title:"Skeleton 骨架屏",category:"数据展示",status:"已完成",install(e){e.use(o)}};e.Skeleton=o,e.default=n,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
|
package/skeleton/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.devui-skeleton{display:flex;justify-content:space-between}.devui-skeleton .devui-skeleton__avatar{display:
|
|
1
|
+
.devui-skeleton{display:flex;justify-content:space-between}.devui-skeleton .devui-skeleton__avatar{display:flex;flex:1;justify-content:center}.devui-skeleton .devui-skeleton__avatar .avatar{width:40px;height:40px;background-color:#ccc;border-radius:50%}.devui-skeleton .devui-skeleton__item__group{flex:7}.devui-skeleton .devui-skeleton__item__group .devui-skeleton__item{width:100%;height:16px;background-color:#ccc;display:inline-block;border-radius:4px}.devui-skeleton .devui-skeleton__item__group .devui-skeleton__item:first-child{width:33%}.devui-skeleton .devui-skeleton__item__group .devui-skeleton__item:last-child{width:61%}.devui-skeleton-animated>.devui-skeleton__avatar>.avatar,.devui-skeleton-animated>.devui-skeleton__item__group>.devui-skeleton__item{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #cccccc;background-size:200% 100%;background-position-x:180%;animation:2s loading ease-in-out infinite}.devui-skeleton-animated>.devui-skeleton__avatar>.avatar{animation-delay:.1s}@keyframes loading{to{background-position-x:-20%}}
|
package/splitter/index.es.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=Object.defineProperty,n=("undefined"!=typeof require&&require,(n,t,i)=>(((n,t,i)=>{t in n?e(n,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[t]=i})(n,"symbol"!=typeof t?t+"":t,i),i));import{defineComponent as t,inject as i,reactive as o,ref as l,
|
|
1
|
+
var e=Object.defineProperty,n=("undefined"!=typeof require&&require,(n,t,i)=>(((n,t,i)=>{t in n?e(n,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[t]=i})(n,"symbol"!=typeof t?t+"":t,i),i));import{defineComponent as t,inject as i,reactive as o,ref as l,onMounted as s,watch as a,computed as r,withDirectives as p,createVNode as u,provide as d,nextTick as c,resolveComponent as v,onUpdated as m}from"vue";const g={orientation:{type:String,default:"horizontal"},splitBarSize:{type:String,default:"2px"},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean,default:!0}};function z(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 f(e,n){if(e.classList)return e.classList.contains(n);return` ${e.className} `.indexOf(` ${n} `)>-1}function h(e,n){e.classList?e.classList.add(n):f(e,n)||(e.className=`${e.className} ${n}`)}function S(e,n){if(e.classList)e.classList.remove(n);else if(f(e,n)){const t=e.className;e.className=` ${t} `.replace(` ${n} `," ")}}const x={mounted(e,{value:n}){e.$value=n,n.enableResize&&function(e){P(e,"mousedown",y)}(e)},unmounted(e,{value:n}){n.enableResize&&b(e,"mousedown",y)}};function P(e,n,t){e.addEventListener&&e.addEventListener(n,t)}function b(e,n,t){e.removeEventListener&&e.removeEventListener(n,t)}function y(e){var n;const t=null==(n=null==e?void 0:e.target)?void 0:n.$value;function i(e){t.onDragEvent(B(e))}t&&(P(document,"mousemove",i),P(document,"mouseup",(function e(n){b(document,"mousemove",i),b(document,"mouseup",e),t.onReleaseEvent(B(n))})),t.onPressEvent(B(e)))}function B(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}}var C=t({name:"DSplitterBar",props:{index:{type:Number},orientation:{type:String,required:!0},splitBarSize:{type:String,required:!0},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean}},setup(e){const n=i("splitterStore"),t=o({wrapperClass:`devui-splitter-bar devui-splitter-bar-${e.orientation}`}),d=l();s((()=>{a([()=>e.splitBarSize,d],(([e,n])=>{n instanceof HTMLElement&&z(n,{flexBasis:e})}),{immediate:!0}),a([()=>n.state.panes,d],(([i,o])=>{n.isStaticBar(e.index)?z(o,{flexBasis:e.disabledBarSize}):t.wrapperClass+=" resizable"}),{deep:!0})}));const c={pageX:0,pageY:0,originalX:0,originalY:0};let v;const m={enableResize:!0,onPressEvent:function({originalEvent:t}){t.stopPropagation(),n.isResizable(e.index)&&(v=n.dragState(e.index),c.originalX=t.pageX,c.originalY=t.pageY)},onDragEvent:function({originalEvent:t}){if(t.stopPropagation(),!n.isResizable(e.index))return;let i;c.pageX=t.pageX,c.pageY=t.pageY,i="vertical"===e.orientation?c.pageY-c.originalY:c.pageX-c.originalX,n.setSize(v,i)},onReleaseEvent:function({originalEvent:t}){if(t.stopPropagation(),!n.isResizable(e.index))return;let i;c.pageX=t.pageX,c.pageY=t.pageY,i="vertical"===e.orientation?c.pageY-c.originalY:c.pageX-c.originalX,n.setSize(v,i)}},g=(e,t)=>({pane:n.getPane(e),nearPane:n.getPane(t)}),f=(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}},P=r((()=>{var n,t;const{pane:i,nearPane:o}=g(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 f(i,o,l)})),b=r((()=>{var t,i;const{pane:o,nearPane:l}=g(e.index+1,e.index),s="before"!==(null==(i=null==(t=null==o?void 0:o.component)?void 0:t.props)?void 0:i.collapseDirection)||e.index+1===n.state.paneCount-1;return f(o,l,s)})),y=()=>{var n,t,i,o;const{pane:l,nearPane:s}=g(e.index,e.index+1);(null==(t=null==(n=null==l?void 0:l.component)?void 0:n.props)?void 0:t.collapsed)||(null==(o=null==(i=null==s?void 0:s.component)?void 0:i.props)?void 0:o.collapsed)?h(d.value,"none-resizable"):S(d.value,"none-resizable")},B=t=>{n.tooglePane(e.index,e.index+1,t),y()},C=t=>{n.tooglePane(e.index+1,e.index,t),y()};return s((()=>{B(!0),C(!0)})),()=>p(u("div",{class:t.wrapperClass,ref:d},[e.showCollapseButton?u("div",{class:["prev",P.value],onClick:()=>{B()}},null):null,u("div",{class:"devui-resize-handle"},null),e.showCollapseButton?u("div",{class:["next",b.value],onClick:()=>C()},null):null]),[[x,m]])}});class E{constructor(){n(this,"state"),this.state=o({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),u=this.getPane(e+1),d=(null==(t=null==(n=null==p?void 0:p.component)?void 0:n.props)?void 0:t.collapsed)||(null==(o=null==(i=null==u?void 0:u.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==u?void 0:u.component)?void 0:a.props)?void 0:r.resizable)&&!d}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,u,d,c,v,m,g;const z=this.getPane(e),f=this.getPane(n);(null==(o=null==(i=null==z?void 0:z.component)?void 0:i.props)?void 0:o.collapsible)&&(z.component.props.collapsed=t?null==(s=null==(l=null==z?void 0:z.component)?void 0:l.props)?void 0:s.collapsed:!(null==(r=null==(a=null==z?void 0:z.component)?void 0:a.props)?void 0:r.collapsed),null==(c=null==(p=null==f?void 0:f.component)?void 0:p.exposed)||c.toggleNearPaneFlexGrow(null==(d=null==(u=null==z?void 0:z.component)?void 0:u.props)?void 0:d.collapsed),null==(g=null==z?void 0:z.component)||g.emit("collapsedChange",null==(m=null==(v=null==z?void 0:z.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 w=t({name:"DSplitter",components:{DSplitterBar:C},props:g,emits:[],setup(e,n){var t,i;const a=new E,r=o({panes:[]});r.panes=(null==(i=(t=n.slots).DSplitterPane)?void 0:i.call(t))||[],a.setPanes({panes:r.panes});const p=l();return d("orientation",e.orientation),d("splitterStore",a),s((()=>{c((()=>{let n=0;n="vertical"===e.orientation?p.value.clientHeight:p.value.clientWidth,a.setSplitter({containerSize:n})}))})),()=>{const{splitBarSize:n,orientation:t,showCollapseButton:i}=e;return u("div",{class:["devui-splitter",`devui-splitter-${t}`],ref:p},[r.panes,r.panes.filter(((e,n,t)=>n!==t.length-1)).map(((e,o)=>u(v("d-splitter-bar"),{key:o,style:"order: "+(2*o+1),splitBarSize:n,orientation:t,index:o,showCollapseButton:i},null)))])}}});var X=t({name:"DSplitterPane",props:{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}},emits:["sizeChange","collapsedChange"],setup(e,{slots:n,expose:t}){const o=i("splitterStore"),r=l(),p=l(),d=i("orientation");let v="";s((()=>{v=e.size,o.setPanes({panes:o.state.panes})})),m((()=>{o.setPanes({panes:o.state.panes})}));s((()=>{a([p,r],(([e,n])=>{n instanceof HTMLElement&&z(n,{order:e})})),a((()=>e.size),(e=>{const n=r.value;n.style.flexBasis=e;const t="devui-splitter-pane-fixed";e?h(n,t):S(n,t)}),{immediate:!0}),a((()=>e.collapsed),(n=>{const t="devui-splitter-pane-hidden";c((()=>{const i=r.value;n?h(i,t):S(i,t),n&&e.shrink?(S(i,t),z(i,{flexBasis:`${e.shrinkWidth}px`})):z(i,{flexBasis:v})}))}),{immediate:!0})}));return t({order:p,getPaneSize:()=>{const e=null==r?void 0:r.value;return"vertical"===d?e.offsetHeight:e.offsetWidth},toggleNearPaneFlexGrow:e=>{c((()=>{const n="devui-splitter-pane-grow";f(r.value,n)?S(r.value,n):e&&h(r.value,n)}))}}),()=>{var e;return u("div",{class:"devui-splitter-pane",ref:r},[null==(e=n.default)?void 0:e.call(n)])}}});w.install=function(e){e.component(w.name,w),e.component(X.name,X)};var Y={title:"Splitter 分割器",category:"布局",install(e){e.use(w)}};export{w as Splitter,Y as default};
|
package/splitter/index.umd.js
CHANGED
|
@@ -1 +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 a(e,n){if(e.classList)e.classList.remove(n);else if(o(e,n)){const t=e.className;e.className=` ${t} `.replace(` ${n} `," ")}}const s={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.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)?n.nextTick((()=>{i(r.value,{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,a;return{"devui-collapse":(null==(o=null==(i=null==e?void 0:e.component)?void 0:i.props)?void 0:o.collapsible)&&t,collapsed:null==(a=null==(l=null==e?void 0:e.component)?void 0:l.props)?void 0:a.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),a="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,a)})),f=()=>{var n,t,i,o;const{pane:s,nearPane:p}=c(e.index,e.index+1);(null==(t=null==(n=null==s?void 0:s.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"):a(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]),[[s,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,a,s,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==(a=null==(l=null==p?void 0:p.component)?void 0:l.props)?void 0:a.resizable)&&(null==(r=null==(s=null==d?void 0:d.component)?void 0:s.props)?void 0:r.resizable)&&!u}isStaticBar(e){var n,t,i,o;const l=this.getPane(e),a=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==a?void 0:a.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,a,s,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==(a=null==(l=null==f?void 0:f.component)?void 0:l.props)?void 0:a.collapsed:!(null==(r=null==(s=null==f?void 0:f.component)?void 0:s.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,a=n.reactive({panes:[]});a.panes=(null==(o=(i=t.slots).DSplitterPane)?void 0:o.call(i))||[],l.setPanes({panes:a.panes});const s=n.ref();return n.provide("orientation",e.orientation),n.provide("splitterStore",l),n.nextTick((()=>{let n=0;n="vertical"===e.orientation?s.value.clientHeight:s.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:s},[a.panes,a.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:s}){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):a(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):a(n,t),e.collapsed&&e.shrink?(a(n,t),i(n,{flexBasis:`${e.shrinkWidth}px`})):i(n,{flexBasis:c})}))})()}))}),{immediate:!0});return s({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)?a(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"}));
|
|
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"}));
|
package/steps-guide/index.es.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
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
CHANGED
|
@@ -1 +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";const i={steps:Array};var
|
|
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/sticky/index.es.js
CHANGED
|
@@ -1 +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:
|
|
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: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
CHANGED
|
@@ -1 +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:
|
|
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: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"}));
|