vue-devui 1.0.0-rc.0 → 1.0.0-rc.3
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 +55 -113
- package/alert/index.es.js +28 -30
- package/alert/index.umd.js +1 -1
- package/auto-complete/index.es.js +143 -103
- package/auto-complete/index.umd.js +5 -1
- package/auto-complete/style.css +1 -1
- package/avatar/index.es.js +77 -81
- package/avatar/index.umd.js +1 -1
- package/badge/index.es.js +1 -1
- package/badge/index.umd.js +1 -1
- package/badge/style.css +1 -1
- package/button/index.es.js +43 -43
- package/button/index.umd.js +1 -1
- package/card/index.es.js +3 -6
- package/card/index.umd.js +1 -1
- package/checkbox/index.es.js +5 -11
- package/checkbox/index.umd.js +1 -1
- package/comment/index.es.js +2 -5
- package/comment/index.umd.js +1 -1
- package/countdown/index.es.js +5 -7
- package/countdown/index.umd.js +1 -1
- package/editable-select/index.es.js +124 -168
- package/editable-select/index.umd.js +1 -1
- package/fullscreen/index.es.js +13 -16
- package/fullscreen/index.umd.js +1 -1
- package/grid/index.es.js +30 -36
- package/grid/index.umd.js +1 -1
- package/icon/index.es.js +39 -57
- package/icon/index.umd.js +1 -1
- package/image-preview/index.es.js +21 -20
- package/image-preview/index.umd.js +1 -1
- package/input/index.es.js +2 -5
- package/input/index.umd.js +1 -1
- package/layout/index.es.js +6 -21
- package/layout/index.umd.js +1 -1
- package/loading/index.es.js +20 -12
- package/loading/index.umd.js +1 -1
- package/modal/index.es.js +135 -122
- package/modal/index.umd.js +1 -1
- package/modal/style.css +1 -1
- package/notification/index.es.js +38 -40
- package/notification/index.umd.js +1 -1
- package/nuxt/components/DropdownPropsKey.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/alertProps.js +3 -0
- package/nuxt/components/autoCompleteProps.js +3 -0
- package/nuxt/components/avatarProps.js +3 -0
- package/nuxt/components/cardProps.js +3 -0
- package/nuxt/components/checkboxGroupInjectionKey.js +3 -0
- package/nuxt/components/checkboxGroupProps.js +3 -0
- package/nuxt/components/checkboxProps.js +3 -0
- package/nuxt/components/colProps.js +3 -0
- package/nuxt/components/colPropsBaseClass.js +3 -0
- package/nuxt/components/colPropsBaseStyle.js +3 -0
- package/nuxt/components/commentProps.js +3 -0
- package/nuxt/components/countdownProps.js +3 -0
- package/nuxt/components/editableSelectProps.js +3 -0
- package/nuxt/components/fullscreenProps.js +3 -0
- package/nuxt/components/iconProps.js +2 -0
- package/nuxt/components/imagePreviewProps.js +3 -0
- package/nuxt/components/inputProps.js +3 -0
- package/nuxt/components/paginationProps.js +3 -0
- package/nuxt/components/panelProps.js +3 -0
- package/nuxt/components/progressProps.js +3 -0
- package/nuxt/components/rateProps.js +3 -0
- package/nuxt/components/readTipProps.js +3 -0
- package/nuxt/components/resultProps.js +3 -0
- package/nuxt/components/rowProps.js +3 -0
- package/nuxt/components/screenSizes.js +3 -0
- package/nuxt/components/searchProps.js +3 -0
- package/nuxt/components/skeletonProps.js +3 -0
- package/nuxt/components/splitterProps.js +3 -0
- package/nuxt/components/statisticProps.js +3 -0
- package/nuxt/components/switchProps.js +3 -0
- package/nuxt/components/tagInputProps.js +3 -0
- package/nuxt/components/tagProps.js +3 -0
- package/nuxt/components/textareaProps.js +3 -0
- package/nuxt/components/timeAxisProps.js +3 -0
- package/overlay/index.es.js +49 -42
- package/overlay/index.umd.js +1 -1
- package/overlay/style.css +1 -1
- package/package.json +8 -43
- package/pagination/index.es.js +24 -25
- 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 +51 -44
- package/popover/index.umd.js +12 -12
- package/popover/style.css +1 -1
- package/progress/index.es.js +34 -36
- package/progress/index.umd.js +3 -3
- package/progress/style.css +1 -1
- package/radio/index.es.js +11 -11
- package/radio/index.umd.js +1 -1
- package/radio/style.css +1 -1
- package/rate/index.es.js +4 -7
- package/rate/index.umd.js +1 -1
- package/read-tip/index.es.js +8 -8
- package/read-tip/index.umd.js +1 -1
- package/result/index.es.js +40 -58
- package/result/index.umd.js +1 -1
- package/ripple/index.es.js +47 -42
- package/ripple/index.umd.js +1 -1
- package/search/index.es.js +13 -16
- package/search/index.umd.js +8 -8
- package/skeleton/index.es.js +20 -23
- package/skeleton/index.umd.js +1 -1
- package/slider/index.es.js +60 -59
- package/slider/index.umd.js +1 -1
- package/splitter/index.es.js +223 -171
- package/splitter/index.umd.js +13 -13
- package/splitter/style.css +1 -1
- package/statistic/index.es.js +7 -18
- package/statistic/index.umd.js +1 -1
- package/status/index.es.js +1 -4
- package/status/index.umd.js +1 -1
- package/status/style.css +1 -1
- package/style.css +1 -1
- package/switch/index.es.js +3 -6
- package/switch/index.umd.js +1 -1
- package/tag/index.es.js +15 -18
- package/tag/index.umd.js +1 -1
- package/tag/style.css +1 -1
- package/tag-input/index.es.js +7 -8
- package/tag-input/index.umd.js +1 -1
- package/textarea/index.es.js +2 -5
- package/textarea/index.umd.js +1 -1
- package/{accordion → timeline}/index.d.ts +0 -0
- package/{time-axis → timeline}/index.es.js +64 -83
- package/timeline/index.umd.js +1 -0
- package/{anchor → timeline}/package.json +1 -1
- package/timeline/style.css +1 -0
- package/upload/index.es.js +98 -97
- package/upload/index.umd.js +1 -1
- package/vue-devui.es.js +12477 -24991
- package/vue-devui.umd.js +24 -20
- package/accordion/index.es.js +0 -720
- package/accordion/index.umd.js +0 -1
- package/accordion/package.json +0 -7
- package/accordion/style.css +0 -1
- package/anchor/index.d.ts +0 -7
- package/anchor/index.es.js +0 -263
- package/anchor/index.umd.js +0 -1
- package/anchor/style.css +0 -1
- package/back-top/index.d.ts +0 -7
- package/back-top/index.es.js +0 -128
- package/back-top/index.umd.js +0 -1
- package/back-top/package.json +0 -7
- package/back-top/style.css +0 -1
- package/breadcrumb/index.d.ts +0 -7
- package/breadcrumb/index.es.js +0 -127
- package/breadcrumb/index.umd.js +0 -1
- package/breadcrumb/package.json +0 -7
- package/breadcrumb/style.css +0 -1
- package/carousel/index.d.ts +0 -7
- package/carousel/index.es.js +0 -329
- package/carousel/index.umd.js +0 -1
- package/carousel/package.json +0 -7
- package/carousel/style.css +0 -1
- package/cascader/index.d.ts +0 -7
- package/cascader/index.es.js +0 -5963
- package/cascader/index.umd.js +0 -27
- package/cascader/package.json +0 -7
- package/cascader/style.css +0 -1
- package/color-picker/index.d.ts +0 -7
- package/color-picker/index.es.js +0 -8187
- package/color-picker/index.umd.js +0 -27
- package/color-picker/package.json +0 -7
- package/color-picker/style.css +0 -1
- package/date-picker/index.d.ts +0 -7
- package/date-picker/index.es.js +0 -1171
- package/date-picker/index.umd.js +0 -1
- package/date-picker/package.json +0 -7
- package/date-picker/style.css +0 -1
- package/dragdrop/index.d.ts +0 -7
- package/dragdrop/index.es.js +0 -157
- package/dragdrop/index.umd.js +0 -1
- package/dragdrop/package.json +0 -7
- package/drawer/index.d.ts +0 -7
- package/drawer/index.es.js +0 -234
- package/drawer/index.umd.js +0 -1
- package/drawer/package.json +0 -7
- package/drawer/style.css +0 -1
- package/dropdown/index.d.ts +0 -7
- package/dropdown/index.es.js +0 -638
- package/dropdown/index.umd.js +0 -1
- package/dropdown/package.json +0 -7
- package/dropdown/style.css +0 -1
- package/form/index.d.ts +0 -7
- package/form/index.es.js +0 -7865
- package/form/index.umd.js +0 -27
- package/form/package.json +0 -7
- package/form/style.css +0 -1
- package/gantt/index.d.ts +0 -7
- package/gantt/index.es.js +0 -523
- package/gantt/index.umd.js +0 -1
- package/gantt/package.json +0 -7
- package/gantt/style.css +0 -1
- package/input-icon/index.d.ts +0 -7
- package/input-icon/index.es.js +0 -331
- package/input-icon/index.umd.js +0 -1
- package/input-icon/package.json +0 -7
- package/input-icon/style.css +0 -1
- package/input-number/index.d.ts +0 -7
- package/input-number/index.es.js +0 -240
- package/input-number/index.umd.js +0 -1
- package/input-number/package.json +0 -7
- package/input-number/style.css +0 -1
- package/list/index.d.ts +0 -7
- package/list/index.es.js +0 -39
- package/list/index.umd.js +0 -1
- package/list/package.json +0 -7
- package/list/style.css +0 -1
- package/nav-sprite/index.d.ts +0 -7
- package/nav-sprite/index.es.js +0 -68
- package/nav-sprite/index.umd.js +0 -1
- package/nav-sprite/package.json +0 -7
- package/nuxt/components/Accordion.js +0 -3
- package/nuxt/components/Anchor.js +0 -3
- package/nuxt/components/BackTop.js +0 -3
- package/nuxt/components/Breadcrumb.js +0 -3
- package/nuxt/components/Carousel.js +0 -3
- package/nuxt/components/CarouselItem.js +0 -3
- package/nuxt/components/Cascader.js +0 -3
- package/nuxt/components/ColorPicker.js +0 -3
- package/nuxt/components/Column.js +0 -3
- package/nuxt/components/DatePicker.js +0 -3
- package/nuxt/components/Drawer.js +0 -3
- package/nuxt/components/DrawerService.js +0 -3
- package/nuxt/components/Dropdown.js +0 -3
- package/nuxt/components/DropdownMenu.js +0 -3
- package/nuxt/components/Form.js +0 -3
- package/nuxt/components/FormControl.js +0 -3
- package/nuxt/components/FormItem.js +0 -3
- package/nuxt/components/FormLabel.js +0 -3
- package/nuxt/components/FormOperation.js +0 -3
- package/nuxt/components/Gantt.js +0 -3
- package/nuxt/components/InputIcon.js +0 -3
- package/nuxt/components/InputNumber.js +0 -3
- package/nuxt/components/List.js +0 -3
- package/nuxt/components/ListItem.js +0 -3
- package/nuxt/components/NavSprite.js +0 -2
- package/nuxt/components/QuadrantDiagram.js +0 -3
- package/nuxt/components/Select.js +0 -3
- package/nuxt/components/StepsGuide.js +0 -3
- package/nuxt/components/StickSlider.js +0 -3
- package/nuxt/components/Sticky.js +0 -2
- package/nuxt/components/Table.js +0 -3
- package/nuxt/components/Tabs.js +0 -3
- package/nuxt/components/TimeAxis.js +0 -3
- package/nuxt/components/TimeAxisItem.js +0 -3
- package/nuxt/components/TimePicker.js +0 -3
- package/nuxt/components/Tooltip.js +0 -3
- package/nuxt/components/Transfer.js +0 -3
- package/nuxt/components/Tree.js +0 -3
- package/nuxt/components/TreeSelect.js +0 -3
- package/nuxt/components/dropdownMenuProps.js +0 -3
- package/nuxt/components/tooltipProps.js +0 -3
- package/quadrant-diagram/index.d.ts +0 -7
- package/quadrant-diagram/index.es.js +0 -5728
- package/quadrant-diagram/index.umd.js +0 -27
- package/quadrant-diagram/package.json +0 -7
- package/quadrant-diagram/style.css +0 -1
- package/select/index.d.ts +0 -7
- package/select/index.es.js +0 -706
- package/select/index.umd.js +0 -1
- package/select/package.json +0 -7
- package/select/style.css +0 -1
- package/steps-guide/index.d.ts +0 -7
- package/steps-guide/index.es.js +0 -239
- package/steps-guide/index.umd.js +0 -1
- package/steps-guide/package.json +0 -7
- package/steps-guide/style.css +0 -1
- package/sticky/index.d.ts +0 -7
- package/sticky/index.es.js +0 -197
- package/sticky/index.umd.js +0 -1
- package/sticky/package.json +0 -7
- package/table/index.d.ts +0 -7
- package/table/index.es.js +0 -1969
- package/table/index.umd.js +0 -1
- package/table/package.json +0 -7
- package/table/style.css +0 -1
- package/tabs/index.d.ts +0 -7
- package/tabs/index.es.js +0 -194
- package/tabs/index.umd.js +0 -1
- package/tabs/package.json +0 -7
- package/tabs/style.css +0 -1
- package/time-axis/index.d.ts +0 -7
- package/time-axis/index.umd.js +0 -1
- package/time-axis/package.json +0 -7
- package/time-axis/style.css +0 -1
- package/time-picker/index.d.ts +0 -7
- package/time-picker/index.es.js +0 -1237
- package/time-picker/index.umd.js +0 -1
- package/time-picker/package.json +0 -7
- package/time-picker/style.css +0 -1
- package/tooltip/index.d.ts +0 -7
- package/tooltip/index.es.js +0 -5828
- package/tooltip/index.umd.js +0 -27
- package/tooltip/package.json +0 -7
- package/tooltip/style.css +0 -1
- package/transfer/index.d.ts +0 -7
- package/transfer/index.es.js +0 -7608
- package/transfer/index.umd.js +0 -27
- package/transfer/package.json +0 -7
- package/transfer/style.css +0 -1
- package/tree/index.d.ts +0 -7
- package/tree/index.es.js +0 -6490
- package/tree/index.umd.js +0 -27
- package/tree/package.json +0 -7
- package/tree/style.css +0 -1
- package/tree-select/index.d.ts +0 -7
- package/tree-select/index.es.js +0 -623
- package/tree-select/index.umd.js +0 -1
- package/tree-select/package.json +0 -7
- package/tree-select/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,
|
|
@@ -279,25 +279,25 @@ var JumpPage = defineComponent({
|
|
|
279
279
|
totalPages,
|
|
280
280
|
cursor
|
|
281
281
|
} = toRefs(props);
|
|
282
|
-
const inputNum = ref(pageIndex.value);
|
|
283
|
-
watch(() => pageIndex.value, (val) => {
|
|
282
|
+
const inputNum = ref(pageIndex == null ? void 0 : pageIndex.value);
|
|
283
|
+
watch(() => pageIndex == null ? void 0 : pageIndex.value, (val) => {
|
|
284
284
|
inputNum.value = val;
|
|
285
285
|
});
|
|
286
|
-
let curPage = pageIndex.value;
|
|
286
|
+
let curPage = pageIndex == null ? void 0 : pageIndex.value;
|
|
287
287
|
const jumpPageChange = (currentPage) => {
|
|
288
288
|
curPage = +currentPage;
|
|
289
289
|
inputNum.value = currentPage;
|
|
290
290
|
if (isNaN(currentPage)) {
|
|
291
291
|
setTimeout(() => {
|
|
292
|
-
inputNum.value = pageIndex.value;
|
|
292
|
+
inputNum.value = pageIndex == null ? void 0 : pageIndex.value;
|
|
293
293
|
}, 300);
|
|
294
294
|
}
|
|
295
295
|
};
|
|
296
296
|
const jump = (e) => {
|
|
297
|
-
if (curPage > totalPages.value) {
|
|
297
|
+
if (curPage > (totalPages == null ? void 0 : totalPages.value)) {
|
|
298
298
|
return;
|
|
299
299
|
}
|
|
300
|
-
if ((e === "btn" || e.key === "Enter") && cursor.value !== curPage) {
|
|
300
|
+
if ((e === "btn" || e.key === "Enter") && (cursor == null ? void 0 : cursor.value) !== curPage) {
|
|
301
301
|
emit("changeCursorEmit", curPage);
|
|
302
302
|
}
|
|
303
303
|
};
|
|
@@ -316,17 +316,18 @@ var JumpPage = defineComponent({
|
|
|
316
316
|
jump,
|
|
317
317
|
showJumpButton
|
|
318
318
|
} = this;
|
|
319
|
+
const inputProps = {
|
|
320
|
+
class: ["devui-pagination-input", size ? "devui-pagination-input-" + size : ""],
|
|
321
|
+
size,
|
|
322
|
+
modelValue: String(inputNum),
|
|
323
|
+
"onUpdate:modelValue": jumpPageChange,
|
|
324
|
+
onKeydown: jump
|
|
325
|
+
};
|
|
319
326
|
return createVNode("div", {
|
|
320
327
|
"class": "devui-jump-container"
|
|
321
328
|
}, [
|
|
322
329
|
goToText,
|
|
323
|
-
createVNode(resolveComponent("d-input"),
|
|
324
|
-
"class": ["devui-pagination-input", size ? "devui-pagination-input-" + size : ""],
|
|
325
|
-
"size": size,
|
|
326
|
-
"modelValue": String(inputNum),
|
|
327
|
-
"onUpdate:modelValue": jumpPageChange,
|
|
328
|
-
"onKeydown": jump
|
|
329
|
-
}, null),
|
|
330
|
+
createVNode(resolveComponent("d-input"), inputProps, null),
|
|
330
331
|
goToText === "\u8DF3\u81F3" && "\u9875",
|
|
331
332
|
showJumpButton && createVNode("div", {
|
|
332
333
|
"class": ["devui-jump-button", size ? "devui-jump-size-" + size : "devui-jump-size-default"],
|
|
@@ -360,8 +361,9 @@ var PageNumBtn = defineComponent({
|
|
|
360
361
|
}) {
|
|
361
362
|
const showPageNum = computed(() => handlePages(props.cursor, props.maxItems, props.totalPages));
|
|
362
363
|
const changeCursor = (pageSize) => {
|
|
363
|
-
if (isNaN(pageSize))
|
|
364
|
+
if (isNaN(pageSize)) {
|
|
364
365
|
return;
|
|
366
|
+
}
|
|
365
367
|
const page = pageSize < 1 ? 1 : pageSize > props.totalPages ? props.totalPages : pageSize | 0;
|
|
366
368
|
emit("changeCursorEmit", page);
|
|
367
369
|
};
|
|
@@ -485,11 +487,12 @@ var Pagination = defineComponent({
|
|
|
485
487
|
JumpPage,
|
|
486
488
|
PageNumBtn
|
|
487
489
|
},
|
|
488
|
-
props:
|
|
490
|
+
props: paginationProps,
|
|
489
491
|
emits: ["pageIndexChange", "pageSizeChange", "update:pageSize", "update:pageIndex"],
|
|
490
492
|
setup(props, {
|
|
491
493
|
emit
|
|
492
494
|
}) {
|
|
495
|
+
const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
|
|
493
496
|
const litePageOptions = computed(() => liteSelectOptions(totalPages.value));
|
|
494
497
|
const cursor = computed({
|
|
495
498
|
get() {
|
|
@@ -511,7 +514,6 @@ var Pagination = defineComponent({
|
|
|
511
514
|
emit("update:pageSize", val);
|
|
512
515
|
}
|
|
513
516
|
});
|
|
514
|
-
const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
|
|
515
517
|
const changeCursorEmit = (val) => {
|
|
516
518
|
cursor.value = val;
|
|
517
519
|
emit("pageIndexChange", val);
|
|
@@ -628,15 +630,12 @@ var Pagination = defineComponent({
|
|
|
628
630
|
]);
|
|
629
631
|
}
|
|
630
632
|
});
|
|
631
|
-
Pagination.install = (app) => {
|
|
632
|
-
app.component(Pagination.name, Pagination);
|
|
633
|
-
};
|
|
634
633
|
var index = {
|
|
635
634
|
title: "Pagination \u5206\u9875",
|
|
636
635
|
category: "\u5BFC\u822A",
|
|
637
636
|
status: "100%",
|
|
638
637
|
install(app) {
|
|
639
|
-
app.
|
|
638
|
+
app.component(Pagination.name, Pagination);
|
|
640
639
|
}
|
|
641
640
|
};
|
|
642
|
-
export { Pagination, index as default };
|
|
641
|
+
export { Pagination, index as default, paginationProps };
|
package/pagination/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(d,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d.index={},d.Vue))})(this,function(d,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==null?void 0:n.value);e.watch(()=>n==null?void 0:n.value,l=>{o.value=l});let i=n==null?void 0:n.value;return{inputNum:o,jumpPageChange:l=>{i=+l,o.value=l,isNaN(l)&&setTimeout(()=>{o.value=n==null?void 0:n.value},300)},jump:l=>{i>(r==null?void 0:r.value)||(l==="btn"||l.key==="Enter")&&(s==null?void 0:s.value)!==i&&a("changeCursorEmit",i)}}},render(){const{goToText:t,size:a,inputNum:n,jumpPageChange:r,jump:s,showJumpButton:o}=this,i={class:["devui-pagination-input",a?"devui-pagination-input-"+a:""],size:a,modelValue:String(n),"onUpdate:modelValue":r,onKeydown:s};return e.createVNode("div",{class:"devui-jump-container"},[t,e.createVNode(e.resolveComponent("d-input"),i,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:u,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]<u-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]<u&&e.createVNode("li",{onClick:s.bind(null,u),class:{"devui-pagination-item":!0,active:o===u}},[e.createVNode("a",{class:"devui-pagination-link"},[u])]),P&&o>u&&u>0&&e.createVNode(e.Fragment,null,[o>u+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>=u}},[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:u,canViewTotal:l,totalItemText:P,goToText:m,maxItems:p,showJumpButton:q,showTruePageIndex:K,lite:f,showPageSelector:v,haveConfigMenu:R,autoHide:G,$slots:S,cursor:x,totalPages:T,currentPageSize:w,pageSizeChange:B,changeCursorEmit:E,litePageOptions:Q,litePageIndexChange:W}=this;return G&&Math.min(...n)>t?null:e.createVNode("div",{class:"devui-pagination"},[u&&!f&&e.createVNode("div",{class:["devui-page-size",i?"devui-page-size-"+i:""]},[e.createVNode(e.resolveComponent("d-select"),{options:n,modelValue:w,onValueChange:B,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:x,onValueChange:W,pageSizeDirection:r},null)]),e.createVNode(e.resolveComponent("page-num-btn"),e.mergeProps({cursor:x,totalPages:T,size:i,lite:f,maxItems:p,preLink:s,nextLink:o,showTruePageIndex:K},{onChangeCursorEmit:E}),null),c&&!f&&e.createVNode(e.resolveComponent("jump-page"),e.mergeProps({goToText:m,size:i,pageIndex:a,totalPages:T,cursor:x,showJumpButton:q},{onChangeCursorEmit:E}),null),f&&R&&e.createVNode(e.resolveComponent("config-menu"),{currentPageSize:w,pageSizeChange:B,pageSizeOptions:n},{default:()=>{var I;return[(I=S.default)==null?void 0:I.call(S)]}})])}}),_={title:"Pagination \u5206\u9875",category:"\u5BFC\u822A",status:"100%",install(t){t.component(V.name,V)}};d.Pagination=V,d.default=_,d.paginationProps=y,Object.defineProperty(d,"__esModule",{value:!0}),d[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"});
|
package/popover/index.es.js
CHANGED
|
@@ -17,9 +17,9 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref,
|
|
21
|
-
import { offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
|
|
22
|
-
var
|
|
20
|
+
import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, toRefs, Fragment } from "vue";
|
|
21
|
+
import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
|
|
22
|
+
var baseOverlay = "";
|
|
23
23
|
function _isSlot(s) {
|
|
24
24
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
25
25
|
}
|
|
@@ -66,43 +66,13 @@ const overlayProps = {
|
|
|
66
66
|
default: true
|
|
67
67
|
}
|
|
68
68
|
};
|
|
69
|
-
const overlayEmits = ["update:visible", "backdropClick"];
|
|
70
69
|
const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
|
|
71
70
|
overlayStyle: {
|
|
72
71
|
type: [String, Object],
|
|
73
72
|
default: void 0
|
|
74
73
|
}
|
|
75
74
|
});
|
|
76
|
-
const
|
|
77
|
-
modelValue: {
|
|
78
|
-
type: Boolean,
|
|
79
|
-
default: false
|
|
80
|
-
},
|
|
81
|
-
origin: {
|
|
82
|
-
type: Object,
|
|
83
|
-
require: true
|
|
84
|
-
},
|
|
85
|
-
position: {
|
|
86
|
-
type: Array,
|
|
87
|
-
default: ["bottom"]
|
|
88
|
-
},
|
|
89
|
-
offset: {
|
|
90
|
-
type: [Number, Object],
|
|
91
|
-
default: 8
|
|
92
|
-
},
|
|
93
|
-
align: {
|
|
94
|
-
type: String,
|
|
95
|
-
default: null
|
|
96
|
-
},
|
|
97
|
-
showArrow: {
|
|
98
|
-
type: Boolean,
|
|
99
|
-
default: false
|
|
100
|
-
},
|
|
101
|
-
isArrowCenter: {
|
|
102
|
-
type: Boolean,
|
|
103
|
-
default: true
|
|
104
|
-
}
|
|
105
|
-
};
|
|
75
|
+
const overlayEmits = ["update:visible", "backdropClick"];
|
|
106
76
|
function useOverlayLogic(props, ctx) {
|
|
107
77
|
const backgroundClass = computed(() => {
|
|
108
78
|
return [
|
|
@@ -153,6 +123,7 @@ function useOverlayLogic(props, ctx) {
|
|
|
153
123
|
handleOverlayBubbleCancel
|
|
154
124
|
};
|
|
155
125
|
}
|
|
126
|
+
var fixedOverlay = "";
|
|
156
127
|
defineComponent({
|
|
157
128
|
name: "DFixedOverlay",
|
|
158
129
|
props: fixedOverlayProps,
|
|
@@ -177,6 +148,36 @@ defineComponent({
|
|
|
177
148
|
});
|
|
178
149
|
}
|
|
179
150
|
});
|
|
151
|
+
const flexibleOverlayProps = {
|
|
152
|
+
modelValue: {
|
|
153
|
+
type: Boolean,
|
|
154
|
+
default: false
|
|
155
|
+
},
|
|
156
|
+
origin: {
|
|
157
|
+
type: Object,
|
|
158
|
+
require: true
|
|
159
|
+
},
|
|
160
|
+
position: {
|
|
161
|
+
type: Array,
|
|
162
|
+
default: ["bottom"]
|
|
163
|
+
},
|
|
164
|
+
offset: {
|
|
165
|
+
type: [Number, Object],
|
|
166
|
+
default: 8
|
|
167
|
+
},
|
|
168
|
+
align: {
|
|
169
|
+
type: String,
|
|
170
|
+
default: null
|
|
171
|
+
},
|
|
172
|
+
showArrow: {
|
|
173
|
+
type: Boolean,
|
|
174
|
+
default: false
|
|
175
|
+
},
|
|
176
|
+
isArrowCenter: {
|
|
177
|
+
type: Boolean,
|
|
178
|
+
default: true
|
|
179
|
+
}
|
|
180
|
+
};
|
|
180
181
|
function getScrollParent(element) {
|
|
181
182
|
const overflowRegex = /(auto|scroll|hidden)/;
|
|
182
183
|
for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
|
|
@@ -209,6 +210,7 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
|
|
|
209
210
|
function useOverlay(props, emit) {
|
|
210
211
|
const overlayRef = ref();
|
|
211
212
|
const arrowRef = ref();
|
|
213
|
+
let originParent = null;
|
|
212
214
|
const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
|
|
213
215
|
const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
|
|
214
216
|
const staticSide = {
|
|
@@ -230,6 +232,7 @@ function useOverlay(props, emit) {
|
|
|
230
232
|
const overlayEl = unref(overlayRef.value);
|
|
231
233
|
const arrowEl = unref(arrowRef.value);
|
|
232
234
|
const middleware = [
|
|
235
|
+
shift(),
|
|
233
236
|
offset(props.offset),
|
|
234
237
|
autoPlacement({
|
|
235
238
|
alignment: props.align,
|
|
@@ -246,25 +249,24 @@ function useOverlay(props, emit) {
|
|
|
246
249
|
props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
|
|
247
250
|
};
|
|
248
251
|
watch(() => props.modelValue, () => {
|
|
249
|
-
const originParent = getScrollParent(props.origin);
|
|
250
252
|
if (props.modelValue && props.origin) {
|
|
253
|
+
originParent = getScrollParent(props.origin);
|
|
251
254
|
nextTick(updatePosition);
|
|
252
|
-
originParent.addEventListener("scroll", updatePosition);
|
|
255
|
+
originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
|
|
253
256
|
originParent !== window && window.addEventListener("scroll", updatePosition);
|
|
254
257
|
window.addEventListener("resize", updatePosition);
|
|
255
258
|
} else {
|
|
256
|
-
originParent.removeEventListener("scroll", updatePosition);
|
|
259
|
+
originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
|
|
257
260
|
originParent !== window && window.removeEventListener("scroll", updatePosition);
|
|
258
261
|
window.removeEventListener("resize", updatePosition);
|
|
259
262
|
}
|
|
260
263
|
});
|
|
261
264
|
onUnmounted(() => {
|
|
262
|
-
|
|
263
|
-
originParent.removeEventListener("scroll", updatePosition);
|
|
265
|
+
originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
|
|
264
266
|
originParent !== window && window.removeEventListener("scroll", updatePosition);
|
|
265
267
|
window.removeEventListener("resize", updatePosition);
|
|
266
268
|
});
|
|
267
|
-
return { arrowRef, overlayRef };
|
|
269
|
+
return { arrowRef, overlayRef, updatePosition };
|
|
268
270
|
}
|
|
269
271
|
var flexibleOverlay = "";
|
|
270
272
|
const FlexibleOverlay = defineComponent({
|
|
@@ -275,12 +277,17 @@ const FlexibleOverlay = defineComponent({
|
|
|
275
277
|
setup(props, {
|
|
276
278
|
slots,
|
|
277
279
|
attrs,
|
|
278
|
-
emit
|
|
280
|
+
emit,
|
|
281
|
+
expose
|
|
279
282
|
}) {
|
|
280
283
|
const {
|
|
281
284
|
arrowRef,
|
|
282
|
-
overlayRef
|
|
285
|
+
overlayRef,
|
|
286
|
+
updatePosition
|
|
283
287
|
} = useOverlay(props, emit);
|
|
288
|
+
expose({
|
|
289
|
+
updatePosition
|
|
290
|
+
});
|
|
284
291
|
return () => {
|
|
285
292
|
var _a;
|
|
286
293
|
return props.modelValue && createVNode("div", mergeProps({
|
|
@@ -5760,8 +5767,8 @@ function usePopover(props, visible, placement, origin, popoverRef) {
|
|
|
5760
5767
|
transformOrigin: TransformOriginMap[placement.value]
|
|
5761
5768
|
}));
|
|
5762
5769
|
const onDocumentClick = (e) => {
|
|
5763
|
-
var _a;
|
|
5764
|
-
if (!origin.value.contains(e.target) && !((
|
|
5770
|
+
var _a, _b;
|
|
5771
|
+
if (!((_a = origin.value) == null ? void 0 : _a.contains(e.target)) && !((_b = popoverRef.value.$el) == null ? void 0 : _b.contains(e.target))) {
|
|
5765
5772
|
visible.value = false;
|
|
5766
5773
|
}
|
|
5767
5774
|
};
|