vue-devui 1.0.0-beta.18 → 1.0.0-beta.19
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/README.md +200 -187
- package/accordion/index.es.js +221 -6
- package/accordion/index.umd.js +1 -1
- package/alert/index.es.js +28 -30
- package/alert/index.umd.js +1 -1
- package/auto-complete/index.es.js +131 -269
- package/auto-complete/index.umd.js +1 -1
- package/auto-complete/style.css +1 -1
- package/back-top/index.es.js +4 -2
- package/badge/index.es.js +13 -19
- package/badge/index.umd.js +1 -1
- package/badge/style.css +1 -1
- package/breadcrumb/index.es.js +2 -1
- package/button/index.es.js +39 -40
- package/button/index.umd.js +1 -1
- package/carousel/index.es.js +38 -53
- package/carousel/index.umd.js +1 -1
- package/cascader/index.es.js +16 -8
- package/cascader/style.css +1 -1
- package/color-picker/index.es.js +97 -89
- package/color-picker/index.umd.js +7 -7
- package/countdown/index.es.js +2 -1
- package/date-picker/index.es.js +40 -57
- package/date-picker/index.umd.js +1 -1
- package/date-picker/style.css +1 -1
- package/drawer/index.es.js +162 -5741
- package/drawer/index.umd.js +1 -27
- package/drawer/style.css +1 -1
- package/dropdown/index.es.js +459 -301
- package/dropdown/index.umd.js +1 -1
- package/dropdown/style.css +1 -1
- package/editable-select/index.es.js +6 -3
- package/form/index.es.js +1953 -1550
- package/form/index.umd.js +18 -18
- package/form/style.css +1 -1
- package/fullscreen/index.es.js +112 -133
- package/fullscreen/index.umd.js +1 -1
- package/fullscreen/style.css +1 -1
- package/icon/index.es.js +39 -57
- package/icon/index.umd.js +1 -1
- package/image-preview/index.es.js +2 -1
- package/input/style.css +1 -1
- package/input-icon/index.es.js +38 -37
- package/input-icon/index.umd.js +1 -1
- package/input-icon/style.css +1 -1
- package/input-number/index.es.js +46 -57
- package/input-number/index.umd.js +1 -1
- package/input-number/style.css +1 -1
- package/{time-axis → list}/index.d.ts +0 -0
- package/list/index.es.js +39 -0
- package/list/index.umd.js +1 -0
- package/{toast → list}/package.json +1 -1
- package/list/style.css +1 -0
- package/modal/index.es.js +300 -934
- package/modal/index.umd.js +1 -1
- package/modal/style.css +1 -1
- package/{toast → notification}/index.d.ts +0 -0
- package/notification/index.es.js +284 -0
- package/notification/index.umd.js +1 -0
- package/notification/package.json +7 -0
- package/notification/style.css +1 -0
- package/nuxt/components/DropdownMenu.js +3 -0
- package/nuxt/components/IFileOptions.js +3 -0
- package/nuxt/components/IUploadOptions.js +3 -0
- package/nuxt/components/List.js +3 -0
- package/nuxt/components/ListItem.js +3 -0
- package/nuxt/components/Notification.js +3 -0
- package/nuxt/components/NotificationService.js +3 -0
- package/nuxt/components/PanelBody.js +3 -0
- package/nuxt/components/PanelFooter.js +3 -0
- package/nuxt/components/PanelHeader.js +3 -0
- package/nuxt/components/Timeline.js +3 -0
- package/nuxt/components/TimelineItem.js +3 -0
- package/nuxt/components/UploadStatus.js +3 -0
- package/nuxt/components/alertProps.js +3 -0
- package/nuxt/components/badgeProps.js +3 -0
- package/nuxt/components/dropdownMenuProps.js +3 -0
- package/nuxt/components/fixedOverlayProps.js +3 -0
- package/nuxt/components/flexibleOverlayProps.js +3 -0
- package/nuxt/components/fullscreenProps.js +3 -0
- package/nuxt/components/iconProps.js +2 -0
- package/nuxt/components/notificationProps.js +3 -0
- package/nuxt/components/overlayEmits.js +3 -0
- package/nuxt/components/overlayProps.js +3 -0
- package/nuxt/components/paginationProps.js +3 -0
- package/nuxt/components/panelProps.js +3 -0
- package/nuxt/components/popoverProps.js +3 -0
- package/nuxt/components/searchProps.js +3 -0
- package/nuxt/components/tooltipProps.js +3 -0
- package/nuxt/components/uploadProps.js +3 -0
- package/overlay/index.es.js +152 -198
- package/overlay/index.umd.js +1 -1
- package/overlay/style.css +1 -1
- package/package.json +40 -87
- package/pagination/index.es.js +10 -12
- package/pagination/index.umd.js +1 -1
- package/panel/index.es.js +45 -32
- package/panel/index.umd.js +1 -1
- package/popover/index.es.js +5954 -201
- package/popover/index.umd.js +27 -1
- package/popover/style.css +1 -1
- package/read-tip/index.es.js +6 -3
- package/result/index.es.js +38 -53
- package/result/index.umd.js +1 -1
- package/ripple/index.es.js +9 -5
- package/search/index.es.js +19 -29
- package/search/index.umd.js +6 -6
- package/search/style.css +1 -1
- package/select/index.es.js +42 -42
- package/select/index.umd.js +1 -1
- package/select/style.css +1 -1
- package/skeleton/index.es.js +17 -17
- package/skeleton/index.umd.js +1 -1
- package/slider/index.es.js +2 -1
- package/splitter/index.es.js +5814 -98
- package/splitter/index.umd.js +27 -1
- package/splitter/style.css +1 -1
- package/status/index.es.js +1 -4
- package/status/index.umd.js +1 -1
- package/status/style.css +1 -1
- package/steps-guide/index.es.js +6 -3
- package/style.css +1 -1
- package/table/index.es.js +456 -299
- package/table/index.umd.js +1 -1
- package/table/style.css +1 -1
- package/tabs/index.es.js +3 -4
- package/tabs/index.umd.js +1 -1
- package/tag/index.es.js +2 -1
- package/tag-input/index.es.js +4 -2
- package/textarea/style.css +1 -1
- package/time-picker/index.es.js +43 -42
- package/time-picker/index.umd.js +1 -1
- package/timeline/index.d.ts +7 -0
- package/{time-axis → timeline}/index.es.js +65 -78
- package/timeline/index.umd.js +1 -0
- package/{time-axis → timeline}/package.json +1 -1
- package/timeline/style.css +1 -0
- package/tooltip/index.es.js +5804 -94
- package/tooltip/index.umd.js +27 -1
- package/tooltip/style.css +1 -1
- package/transfer/index.es.js +440 -165
- package/transfer/index.umd.js +17 -17
- package/transfer/style.css +1 -1
- package/tree/index.es.js +12 -7
- package/tree/index.umd.js +10 -10
- package/tree-select/index.es.js +10 -6
- package/tree-select/index.umd.js +1 -1
- package/upload/index.es.js +335 -6068
- package/upload/index.umd.js +1 -27
- package/upload/style.css +1 -1
- package/vue-devui.es.js +2555 -2799
- package/vue-devui.umd.js +16 -16
- package/nuxt/components/TimeAxis.js +0 -3
- package/nuxt/components/TimeAxisItem.js +0 -3
- package/nuxt/components/Toast.js +0 -3
- package/nuxt/components/ToastService.js +0 -3
- package/time-axis/index.umd.js +0 -1
- package/time-axis/style.css +0 -1
- package/toast/index.es.js +0 -5918
- package/toast/index.umd.js +0 -27
- package/toast/style.css +0 -1
package/pagination/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent, ref, onMounted, onUnmounted, withDirectives, createVNode, createTextVNode, resolveDirective, toRefs, watch, resolveComponent, computed, Fragment, mergeProps, nextTick } from "vue";
|
|
2
|
-
const
|
|
2
|
+
const paginationProps = {
|
|
3
3
|
pageSize: {
|
|
4
4
|
type: Number,
|
|
5
5
|
default: 10
|
|
@@ -202,15 +202,15 @@ var ConfigMenu = defineComponent({
|
|
|
202
202
|
setup() {
|
|
203
203
|
const paginationConfig = ref(null);
|
|
204
204
|
const isShowConfig = ref(false);
|
|
205
|
+
const closeConfigMenu = (e) => {
|
|
206
|
+
isShowConfig.value = isShowConfig.value ? false : !!e;
|
|
207
|
+
};
|
|
205
208
|
onMounted(() => {
|
|
206
209
|
on(paginationConfig.value, "click", closeConfigMenu);
|
|
207
210
|
});
|
|
208
211
|
onUnmounted(() => {
|
|
209
212
|
off(paginationConfig.value, "click", closeConfigMenu);
|
|
210
213
|
});
|
|
211
|
-
const closeConfigMenu = (e) => {
|
|
212
|
-
isShowConfig.value = isShowConfig.value ? false : !!e;
|
|
213
|
-
};
|
|
214
214
|
return {
|
|
215
215
|
paginationConfig,
|
|
216
216
|
isShowConfig,
|
|
@@ -360,8 +360,9 @@ var PageNumBtn = defineComponent({
|
|
|
360
360
|
}) {
|
|
361
361
|
const showPageNum = computed(() => handlePages(props.cursor, props.maxItems, props.totalPages));
|
|
362
362
|
const changeCursor = (pageSize) => {
|
|
363
|
-
if (isNaN(pageSize))
|
|
363
|
+
if (isNaN(pageSize)) {
|
|
364
364
|
return;
|
|
365
|
+
}
|
|
365
366
|
const page = pageSize < 1 ? 1 : pageSize > props.totalPages ? props.totalPages : pageSize | 0;
|
|
366
367
|
emit("changeCursorEmit", page);
|
|
367
368
|
};
|
|
@@ -485,11 +486,12 @@ var Pagination = defineComponent({
|
|
|
485
486
|
JumpPage,
|
|
486
487
|
PageNumBtn
|
|
487
488
|
},
|
|
488
|
-
props:
|
|
489
|
+
props: paginationProps,
|
|
489
490
|
emits: ["pageIndexChange", "pageSizeChange", "update:pageSize", "update:pageIndex"],
|
|
490
491
|
setup(props, {
|
|
491
492
|
emit
|
|
492
493
|
}) {
|
|
494
|
+
const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
|
|
493
495
|
const litePageOptions = computed(() => liteSelectOptions(totalPages.value));
|
|
494
496
|
const cursor = computed({
|
|
495
497
|
get() {
|
|
@@ -511,7 +513,6 @@ var Pagination = defineComponent({
|
|
|
511
513
|
emit("update:pageSize", val);
|
|
512
514
|
}
|
|
513
515
|
});
|
|
514
|
-
const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
|
|
515
516
|
const changeCursorEmit = (val) => {
|
|
516
517
|
cursor.value = val;
|
|
517
518
|
emit("pageIndexChange", val);
|
|
@@ -628,15 +629,12 @@ var Pagination = defineComponent({
|
|
|
628
629
|
]);
|
|
629
630
|
}
|
|
630
631
|
});
|
|
631
|
-
Pagination.install = (app) => {
|
|
632
|
-
app.component(Pagination.name, Pagination);
|
|
633
|
-
};
|
|
634
632
|
var index = {
|
|
635
633
|
title: "Pagination \u5206\u9875",
|
|
636
634
|
category: "\u5BFC\u822A",
|
|
637
635
|
status: "100%",
|
|
638
636
|
install(app) {
|
|
639
|
-
app.
|
|
637
|
+
app.component(Pagination.name, Pagination);
|
|
640
638
|
}
|
|
641
639
|
};
|
|
642
|
-
export { Pagination, index as default };
|
|
640
|
+
export { Pagination, index as default, paginationProps };
|
package/pagination/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u.index={},u.Vue))})(this,function(u,e){"use strict";const
|
|
1
|
+
(function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u.index={},u.Vue))})(this,function(u,e){"use strict";const y={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:"\u6240\u6709\u6761\u76EE"},goToText:{type:String,default:"\u8DF3\u81F3"},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}},F=(t,a,n)=>{const r=t,s=a;if(s>=n)return[2,n];const o=s-2;let i=r-(o>>1),c=r+(o-1>>1);return i<2&&(i=2,c=s-2),c>n&&(i=n-s+3,c=n),[i,c]};function L(t){return new Array(t||1).fill(0).map((a,n)=>({name:`${n+1}/${t}`,value:n+1}))}function C(t,a,n){document.addEventListener?t&&a&&n&&t.addEventListener(a,n,!1):t&&a&&n&&t.attachEvent("on"+a,n)}function j(t,a,n){document.removeEventListener?t&&a&&n&&t.removeEventListener(a,n,!1):t&&a&&n&&t.detachEvent("on"+a,n)}const M=typeof window!="undefined",g=Symbol("@@clickoutside"),h=new Map;let z,N=0,b=!0;function k(t,a,n){return M&&b&&(b=!1,C(document,"mousedown",r=>{z=r}),C(document,"mouseup",r=>{for(const[s,o]of h)o[g].documentHandler(r,z)})),function(r,s){!n||!a.instance||!r.target||!s.target||t.contains(r.target)||t.contains(s.target)||t===r.target||t[g].bindingFn&&t[g].bindingFn()}}const D={beforeMount:function(t,a,n){N++,h.set(N,t),t[g]={nid:N,documentHandler:k(t,a,n),bindingFn:a.value}},updated:function(t,a,n){t[g].documentHandler=k(t,a,n),t[g].bindingFn=a.value},unmounted:function(t){h.delete(t[g].nid),delete t[g]}};var H=e.defineComponent({directives:{clickoutside:D},props:{currentPageSize:Number,pageSizeChange:Function,pageSizeOptions:Array},setup(){const t=e.ref(null),a=e.ref(!1),n=r=>{a.value=a.value?!1:!!r};return e.onMounted(()=>{C(t.value,"click",n)}),e.onUnmounted(()=>{j(t.value,"click",n)}),{paginationConfig:t,isShowConfig:a,closeConfigMenu:n}},render(){var i;const{closeConfigMenu:t,currentPageSize:a,pageSizeChange:n,pageSizeOptions:r,isShowConfig:s,$slots:o}=this;return e.withDirectives(e.createVNode("div",{class:"devui-pagination-config",ref:"paginationConfig"},[e.createVNode("div",{class:"devui-setup-icon"},[e.createVNode("i",{class:"icon-setting",style:"font-weight: bold;"},null)]),s&&e.createVNode("div",{class:"devui-config-container"},[(i=o.default)==null?void 0:i.call(o),e.createVNode("div",{class:"pagination-config-item"},[e.createVNode("div",{class:"config-item-title"},[e.createTextVNode("\u6BCF\u9875\u6761\u6570")]),e.createVNode("div",{class:"devui-page-number"},[r.map(c=>e.createVNode("div",{class:{choosed:c===a},key:c,onClick:n.bind(null,{value:c})},[c]))])])])]),[[e.resolveDirective("clickoutside"),t]])}});const O={goToText:String,size:{type:String,default:""},pageIndex:Number,showJumpButton:Boolean,totalPages:Number,cursor:Number,onChangeCursorEmit:Function};var J=e.defineComponent({props:O,emits:["changeCursorEmit"],setup(t,{emit:a}){const{pageIndex:n,totalPages:r,cursor:s}=e.toRefs(t),o=e.ref(n.value);e.watch(()=>n.value,l=>{o.value=l});let i=n.value;return{inputNum:o,jumpPageChange:l=>{i=+l,o.value=l,isNaN(l)&&setTimeout(()=>{o.value=n.value},300)},jump:l=>{i>r.value||(l==="btn"||l.key==="Enter")&&s.value!==i&&a("changeCursorEmit",i)}}},render(){const{goToText:t,size:a,inputNum:n,jumpPageChange:r,jump:s,showJumpButton:o}=this;return e.createVNode("div",{class:"devui-jump-container"},[t,e.createVNode(e.resolveComponent("d-input"),{class:["devui-pagination-input",a?"devui-pagination-input-"+a:""],size:a,modelValue:String(n),"onUpdate:modelValue":r,onKeydown:s},null),t==="\u8DF3\u81F3"&&"\u9875",o&&e.createVNode("div",{class:["devui-jump-button",a?"devui-jump-size-"+a:"devui-jump-size-default"],onClick:s.bind(null,"btn"),title:t},[e.createVNode("div",{class:"devui-pagination-go"},null)])])}});const A={size:{type:String,default:""},preLink:String,nextLink:String,lite:Boolean,cursor:Number,maxItems:Number,totalPages:Number,onChangeCursorEmit:Function,showTruePageIndex:Boolean};var U=e.defineComponent({props:A,emits:["changeCursorEmit"],setup(t,{emit:a}){return{showPageNum:e.computed(()=>F(t.cursor,t.maxItems,t.totalPages)),changeCursor:i=>{if(isNaN(i))return;const c=i<1?1:i>t.totalPages?t.totalPages:i|0;a("changeCursorEmit",c)},prevChange:i=>{if(t.cursor>1){const c=i===-1?t.cursor-1:i;a("changeCursorEmit",c)}},nextChange:i=>{if(t.cursor<t.totalPages){const c=i===-1?t.cursor+1:i;a("changeCursorEmit",c)}}}},render(){const{size:t,preLink:a,nextLink:n,lite:r,changeCursor:s,cursor:o,showPageNum:i,prevChange:c,totalPages:d,nextChange:l,showTruePageIndex:P}=this;return e.createVNode("ul",{class:["devui-pagination-list",t?"devui-pagination-"+t:""]},[e.createVNode("li",{onClick:c.bind(null,-1),class:{"devui-pagination-item":!0,disabled:o<=1}},[e.createVNode("a",{innerHTML:a,class:"devui-pagination-link"},null)]),!r&&e.createVNode(e.Fragment,null,[e.createVNode("li",{onClick:s.bind(null,1),class:{"devui-pagination-item":!0,active:o===1}},[e.createVNode("a",{class:"devui-pagination-link"},[e.createTextVNode("1")])]),i[0]>2&&e.createVNode("li",{onClick:c.bind(null,i[0]-1),class:"devui-pagination-item"},[e.createVNode("a",{class:"devui-pagination-link"},[e.createTextVNode("...")])]),(()=>{const m=[];for(let p=i[0];p<=i[1];p++)m.push(e.createVNode("li",{onClick:s.bind(null,p),key:p,class:{"devui-pagination-item":!0,active:o===p}},[e.createVNode("a",{class:"devui-pagination-link"},[p])]));return m})(),i[1]<d-1&&e.createVNode("li",{onClick:l.bind(null,i[1]+1),class:"devui-pagination-item"},[e.createVNode("a",{class:"devui-pagination-link"},[e.createTextVNode("...")])]),i[1]<d&&e.createVNode("li",{onClick:s.bind(null,d),class:{"devui-pagination-item":!0,active:o===d}},[e.createVNode("a",{class:"devui-pagination-link"},[d])]),P&&o>d&&d>0&&e.createVNode(e.Fragment,null,[o>d+1&&e.createVNode("li",{class:"devui-pagination-item disabled"},[e.createVNode("a",{class:"devui-pagination-link"},[e.createTextVNode("...")])]),e.createVNode("li",{class:"devui-pagination-item disabled active"},[e.createVNode("a",{class:"devui-pagination-link"},[o])])])]),e.createVNode("li",{onClick:l.bind(null,-1),class:{"devui-pagination-item":!0,disabled:o>=d}},[e.createVNode("a",{innerHTML:n,class:"devui-pagination-link"},null)])])}}),X="",V=e.defineComponent({name:"DPagination",components:{ConfigMenu:H,JumpPage:J,PageNumBtn:U},props:y,emits:["pageIndexChange","pageSizeChange","update:pageSize","update:pageIndex"],setup(t,{emit:a}){const n=e.computed(()=>Math.ceil(t.total/t.pageSize)),r=e.computed(()=>L(n.value)),s=e.computed({get(){return!t.showTruePageIndex&&t.pageIndex>n.value?(a("update:pageIndex",n.value||1),n.value||1):t.pageIndex||1},set(l){a("update:pageIndex",l)}}),o=e.computed({get(){return t.pageSize},set(l){a("update:pageSize",l)}}),i=l=>{s.value=l,a("pageIndexChange",l)};return{cursor:s,totalPages:n,changeCursorEmit:i,currentPageSize:o,pageSizeChange:l=>{o.value=l.value,t.autoFixPageIndex&&e.nextTick(()=>{s.value>n.value&&i(n.value)}),a("pageSizeChange",l.value)},litePageOptions:r,litePageIndexChange:l=>{i(l.value)}}},render(){const{total:t,pageIndex:a,pageSizeOptions:n,pageSizeDirection:r,preLink:s,nextLink:o,size:i,canJumpPage:c,canChangePageSize:d,canViewTotal:l,totalItemText:P,goToText:m,maxItems:p,showJumpButton:q,showTruePageIndex:K,lite:f,showPageSelector:v,haveConfigMenu:R,autoHide:G,$slots:x,cursor:S,totalPages:T,currentPageSize:I,pageSizeChange:w,changeCursorEmit:B,litePageOptions:Q,litePageIndexChange:W}=this;return G&&Math.min(...n)>t?null:e.createVNode("div",{class:"devui-pagination"},[d&&!f&&e.createVNode("div",{class:["devui-page-size",i?"devui-page-size-"+i:""]},[e.createVNode(e.resolveComponent("d-select"),{options:n,modelValue:I,onValueChange:w,pageSizeDirection:r},null)]),(!f||f&&v)&&l&&e.createVNode("div",{class:"devui-total-size"},[P,e.createTextVNode(": "),t]),f&&v&&e.createVNode("div",{class:"devui-page-size"},[e.createVNode(e.resolveComponent("d-select"),{options:Q,disabled:t===0,modelValue:S,onValueChange:W,pageSizeDirection:r},null)]),e.createVNode(e.resolveComponent("page-num-btn"),e.mergeProps({cursor:S,totalPages:T,size:i,lite:f,maxItems:p,preLink:s,nextLink:o,showTruePageIndex:K},{onChangeCursorEmit:B}),null),c&&!f&&e.createVNode(e.resolveComponent("jump-page"),e.mergeProps({goToText:m,size:i,pageIndex:a,totalPages:T,cursor:S,showJumpButton:q},{onChangeCursorEmit:B}),null),f&&R&&e.createVNode(e.resolveComponent("config-menu"),{currentPageSize:I,pageSizeChange:w,pageSizeOptions:n},{default:()=>{var E;return[(E=x.default)==null?void 0:E.call(x)]}})])}}),_={title:"Pagination \u5206\u9875",category:"\u5BFC\u822A",status:"100%",install(t){t.component(V.name,V)}};u.Pagination=V,u.default=_,u.paginationProps=y,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
|
package/panel/index.es.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { reactive, ref, defineComponent, provide, computed, createVNode, inject, onMounted, Transition } from "vue";
|
|
2
|
-
|
|
3
|
-
const PanelProps = {
|
|
2
|
+
const panelProps = {
|
|
4
3
|
type: {
|
|
5
4
|
type: String,
|
|
6
5
|
default: "default"
|
|
@@ -17,10 +16,6 @@ const PanelProps = {
|
|
|
17
16
|
type: Function,
|
|
18
17
|
default: null
|
|
19
18
|
},
|
|
20
|
-
toggle: {
|
|
21
|
-
type: Function,
|
|
22
|
-
default: null
|
|
23
|
-
},
|
|
24
19
|
showAnimation: {
|
|
25
20
|
type: Boolean,
|
|
26
21
|
default: true
|
|
@@ -42,9 +37,11 @@ class Store {
|
|
|
42
37
|
option[key] = ref(value);
|
|
43
38
|
}
|
|
44
39
|
}
|
|
40
|
+
var panel = "";
|
|
45
41
|
var Panel = defineComponent({
|
|
46
42
|
name: "DPanel",
|
|
47
|
-
props:
|
|
43
|
+
props: panelProps,
|
|
44
|
+
emits: ["toggle"],
|
|
48
45
|
setup(props, ctx) {
|
|
49
46
|
provide("beforeToggle", props.beforeToggle);
|
|
50
47
|
provide("showAnimation", computed(() => props.showAnimation));
|
|
@@ -52,11 +49,10 @@ var Panel = defineComponent({
|
|
|
52
49
|
const isCollapsed = ref(props.isCollapsed);
|
|
53
50
|
const type = computed(() => props.type);
|
|
54
51
|
const cssClass = computed(() => props.cssClass);
|
|
52
|
+
const timeStamp = new Date().getTime().toString() + Math.random();
|
|
55
53
|
const onToggle = () => {
|
|
56
|
-
|
|
57
|
-
(_a = props.toggle) == null ? void 0 : _a.call(props, Store.getByKey(`isCollapsed[${timeStamp}]`));
|
|
54
|
+
ctx.emit("toggle", Store.getByKey(`isCollapsed[${timeStamp}]`));
|
|
58
55
|
};
|
|
59
|
-
const timeStamp = new Date().getTime().toString();
|
|
60
56
|
Store.setData(`isCollapsed[${timeStamp}]`, isCollapsed.value);
|
|
61
57
|
return () => {
|
|
62
58
|
var _a, _b;
|
|
@@ -69,7 +65,8 @@ var Panel = defineComponent({
|
|
|
69
65
|
});
|
|
70
66
|
var PanelHeader = defineComponent({
|
|
71
67
|
name: "DPanelHeader",
|
|
72
|
-
props:
|
|
68
|
+
props: panelProps,
|
|
69
|
+
emits: ["toggle"],
|
|
73
70
|
setup(props, ctx) {
|
|
74
71
|
const beforeToggle = inject("beforeToggle");
|
|
75
72
|
const keys = Object.keys(Store.state());
|
|
@@ -77,16 +74,35 @@ var PanelHeader = defineComponent({
|
|
|
77
74
|
const isCollapsed = ref(Store.state()[key]);
|
|
78
75
|
const changeFlag = ref();
|
|
79
76
|
let header = null;
|
|
80
|
-
const
|
|
81
|
-
|
|
77
|
+
const res = ref(isCollapsed.value);
|
|
78
|
+
let changeResult = true;
|
|
79
|
+
const done = () => {
|
|
80
|
+
res.value = !res.value;
|
|
81
|
+
if (!changeFlag.value) {
|
|
82
|
+
if (res.value) {
|
|
83
|
+
Store.setData(`${key}`, res.value);
|
|
84
|
+
isCollapsed.value = res.value;
|
|
85
|
+
ctx.emit("toggle", res.value);
|
|
86
|
+
}
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
if (res.value !== void 0) {
|
|
90
|
+
Store.setData(`${key}`, res.value);
|
|
91
|
+
isCollapsed.value = res.value;
|
|
92
|
+
ctx.emit("toggle", res.value);
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
const canToggle = async () => {
|
|
82
96
|
if (beforeToggle) {
|
|
83
|
-
const
|
|
84
|
-
if (typeof
|
|
85
|
-
if (
|
|
86
|
-
changeResult =
|
|
97
|
+
const tmpRes = beforeToggle(isCollapsed, done);
|
|
98
|
+
if (typeof tmpRes !== "undefined") {
|
|
99
|
+
if (tmpRes instanceof Promise) {
|
|
100
|
+
changeResult = await tmpRes;
|
|
87
101
|
} else {
|
|
88
|
-
changeResult =
|
|
102
|
+
changeResult = tmpRes;
|
|
89
103
|
}
|
|
104
|
+
} else {
|
|
105
|
+
changeResult = true;
|
|
90
106
|
}
|
|
91
107
|
}
|
|
92
108
|
return changeResult;
|
|
@@ -94,20 +110,19 @@ var PanelHeader = defineComponent({
|
|
|
94
110
|
canToggle().then((val) => changeFlag.value = val);
|
|
95
111
|
const toggleBody = () => {
|
|
96
112
|
canToggle().then((val) => {
|
|
97
|
-
var _a, _b;
|
|
98
113
|
changeFlag.value = val;
|
|
99
114
|
if (!val) {
|
|
100
115
|
if (!isCollapsed.value) {
|
|
101
116
|
Store.setData(`${key}`, !isCollapsed.value);
|
|
102
117
|
isCollapsed.value = !isCollapsed.value;
|
|
103
|
-
(
|
|
118
|
+
ctx.emit("toggle", isCollapsed.value);
|
|
104
119
|
}
|
|
105
120
|
return;
|
|
106
121
|
}
|
|
107
122
|
if (isCollapsed.value !== void 0) {
|
|
108
123
|
Store.setData(`${key}`, !isCollapsed.value);
|
|
109
124
|
isCollapsed.value = !isCollapsed.value;
|
|
110
|
-
(
|
|
125
|
+
ctx.emit("toggle", isCollapsed.value);
|
|
111
126
|
}
|
|
112
127
|
});
|
|
113
128
|
};
|
|
@@ -118,7 +133,7 @@ var PanelHeader = defineComponent({
|
|
|
118
133
|
"class": "devui-panel-heading",
|
|
119
134
|
"onClick": toggleBody,
|
|
120
135
|
"style": {
|
|
121
|
-
|
|
136
|
+
cursor: changeFlag.value ? "pointer" : "auto"
|
|
122
137
|
}
|
|
123
138
|
}, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
|
|
124
139
|
}
|
|
@@ -128,7 +143,7 @@ var PanelHeader = defineComponent({
|
|
|
128
143
|
});
|
|
129
144
|
var PanelBody = defineComponent({
|
|
130
145
|
name: "DPanelBody",
|
|
131
|
-
props:
|
|
146
|
+
props: panelProps,
|
|
132
147
|
setup(props, ctx) {
|
|
133
148
|
const animationName = inject("showAnimation");
|
|
134
149
|
const hasLeftPadding = inject("hasLeftPadding");
|
|
@@ -139,8 +154,9 @@ var PanelBody = defineComponent({
|
|
|
139
154
|
onMounted(() => {
|
|
140
155
|
if (bodyEl.value) {
|
|
141
156
|
const dom = bodyEl.value;
|
|
142
|
-
if (isCollapsed[key])
|
|
157
|
+
if (isCollapsed[key]) {
|
|
143
158
|
dom.style.height = `${dom.offsetHeight}px`;
|
|
159
|
+
}
|
|
144
160
|
}
|
|
145
161
|
});
|
|
146
162
|
const enter = (element) => {
|
|
@@ -188,18 +204,15 @@ var PanelFooter = defineComponent({
|
|
|
188
204
|
};
|
|
189
205
|
}
|
|
190
206
|
});
|
|
191
|
-
Panel.install = function(app) {
|
|
192
|
-
app.component(Panel.name, Panel);
|
|
193
|
-
app.component(PanelHeader.name, PanelHeader);
|
|
194
|
-
app.component(PanelBody.name, PanelBody);
|
|
195
|
-
app.component(PanelFooter.name, PanelFooter);
|
|
196
|
-
};
|
|
197
207
|
var index = {
|
|
198
208
|
title: "Panel \u9762\u677F",
|
|
199
209
|
category: "\u901A\u7528",
|
|
200
210
|
status: "100%",
|
|
201
211
|
install(app) {
|
|
202
|
-
app.
|
|
212
|
+
app.component(Panel.name, Panel);
|
|
213
|
+
app.component(PanelHeader.name, PanelHeader);
|
|
214
|
+
app.component(PanelBody.name, PanelBody);
|
|
215
|
+
app.component(PanelFooter.name, PanelFooter);
|
|
203
216
|
}
|
|
204
217
|
};
|
|
205
|
-
export { Panel, index as default };
|
|
218
|
+
export { Panel, PanelBody, PanelFooter, PanelHeader, index as default, panelProps };
|
package/panel/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.index={},l.Vue))})(this,function(l,e){"use strict";const y={type:{type:String,default:"default"},cssClass:{type:String,default:""},isCollapsed:{type:Boolean,default:!1},beforeToggle:{type:Function,default:null},showAnimation:{type:Boolean,default:!0},hasLeftPadding:{type:Boolean,default:!0}},v=e.reactive({});class f{static getByKey(n){return v[n]}static state(){return v}static setData(n,c){v[n]=e.ref(c)}}var k="",h=e.defineComponent({name:"DPanel",props:y,emits:["toggle"],setup(a,n){e.provide("beforeToggle",a.beforeToggle),e.provide("showAnimation",e.computed(()=>a.showAnimation)),e.provide("hasLeftPadding",e.computed(()=>a.hasLeftPadding));const c=e.ref(a.isCollapsed),g=e.computed(()=>a.type),d=e.computed(()=>a.cssClass),t=new Date().getTime().toString()+Math.random(),u=()=>{n.emit("toggle",f.getByKey(`isCollapsed[${t}]`))};return f.setData(`isCollapsed[${t}]`,c.value),()=>{var p,o;return e.createVNode("div",{onClick:u,class:`devui-panel devui-panel-${g.value} ${d.value}`},[(o=(p=n.slots).default)==null?void 0:o.call(p)])}}}),P=e.defineComponent({name:"DPanelHeader",props:y,emits:["toggle"],setup(a,n){const c=e.inject("beforeToggle"),d=Object.keys(f.state()).pop(),t=e.ref(f.state()[d]),u=e.ref();let p=null;const o=e.ref(t.value);let m=!0;const r=()=>{if(o.value=!o.value,!u.value){o.value&&(f.setData(`${d}`,o.value),t.value=o.value,n.emit("toggle",o.value));return}o.value!==void 0&&(f.setData(`${d}`,o.value),t.value=o.value,n.emit("toggle",o.value))},s=async()=>{if(c){const i=c(t,r);typeof i!="undefined"?i instanceof Promise?m=await i:m=i:m=!0}return m};s().then(i=>u.value=i);const b=()=>{s().then(i=>{if(u.value=i,!i){t.value||(f.setData(`${d}`,!t.value),t.value=!t.value,n.emit("toggle",t.value));return}t.value!==void 0&&(f.setData(`${d}`,!t.value),t.value=!t.value,n.emit("toggle",t.value))})};return()=>{var i,T;return n.slots.default&&(p=e.createVNode("div",{class:"devui-panel-heading",onClick:b,style:{cursor:u.value?"pointer":"auto"}},[(T=(i=n.slots).default)==null?void 0:T.call(i)])),p}}}),C=e.defineComponent({name:"DPanelBody",props:y,setup(a,n){const c=e.inject("showAnimation"),g=e.inject("hasLeftPadding"),t=Object.keys(f.state()).pop(),u=f.state(),p=e.ref();e.onMounted(()=>{if(p.value){const r=p.value;u[t]&&(r.style.height=`${r.offsetHeight}px`)}});const o=r=>{const s=r;s.style.height="";const b=s.offsetHeight;s.style.height="0px",s.offsetHeight,s.style.height=`${b}px`},m=r=>{const s=r;s.style.height="0px"};return()=>e.createVNode("div",{class:`devui-panel devui-panel-${a.type} ${a.cssClass}`},[e.createVNode(e.Transition,{name:c.value?"devui-panel":"",onEnter:o,onLeave:m},{default:()=>{var r,s;return[u[t]===void 0||u[t]?e.createVNode("div",{ref:p,class:`devui-panel-body ${u[t]!==void 0?"devui-panel-body-collapse":""} ${g.value?"":"no-left-padding"}`},[e.createVNode("div",{class:"devui-panel-content"},[(s=(r=n.slots).default)==null?void 0:s.call(r)])]):null]}})])}}),$=e.defineComponent({name:"DPanelFooter",setup(a,n){return()=>{var g,d;return n.slots.default?e.createVNode("div",{class:"devui-panel-footer"},[(d=(g=n.slots).default)==null?void 0:d.call(g)]):null}}}),D={title:"Panel \u9762\u677F",category:"\u901A\u7528",status:"100%",install(a){a.component(h.name,h),a.component(P.name,P),a.component(C.name,C),a.component($.name,$)}};l.Panel=h,l.PanelBody=C,l.PanelFooter=$,l.PanelHeader=P,l.default=D,l.panelProps=y,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});
|