@sdata/web-vue 3.13.0 → 3.14.0
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/dist/sd.css +141 -111
- package/dist/sd.min.css +2 -2
- package/es/_components/input-label/input-label.d.ts +2 -0
- package/es/_components/input-label/input-label.js +4 -2
- package/es/_components/input-label/style/index.css +2 -2
- package/es/_components/picker/style/index.scss +8 -2
- package/es/_components/resize-observer.js +1 -1
- package/es/_components/resize-trigger.vue_vue_type_script_setup_true_lang.js +9 -2
- package/es/_components/select-view/select-view.d.ts +2 -0
- package/es/_components/select-view/select-view.js +5 -1
- package/es/_components/select-view/style/index.css +5 -5
- package/es/_hooks/use-focus-trap.d.ts +10 -0
- package/es/_hooks/use-focus-trap.js +115 -0
- package/es/_utils/dom.js +1 -10
- package/es/_utils/keyboard.d.ts +4 -0
- package/es/_utils/keyboard.js +21 -2
- package/es/alert/alert.vue.d.ts +2 -2
- package/es/alert/alert.vue_vue_type_script_setup_true_lang.js +12 -3
- package/es/alert/index.d.ts +5 -5
- package/es/alert/style/index.css +1 -1
- package/es/alert/style/index.scss +1 -1
- package/es/anchor/anchor-link.vue_vue_type_script_setup_true_lang.js +3 -1
- package/es/anchor/anchor.vue_vue_type_script_setup_true_lang.js +2 -0
- package/es/anchor/style/index.css +1 -1
- package/es/anchor/style/index.scss +3 -1
- package/es/auto-complete/auto-complete.js +8 -0
- package/es/avatar/avatar.vue_vue_type_script_setup_true_lang.js +8 -2
- package/es/avatar/style/index.css +2 -2
- package/es/avatar/style/index.scss +2 -2
- package/es/back-top/back-top.vue_vue_type_script_setup_true_lang.js +5 -1
- package/es/back-top/style/index.css +1 -1
- package/es/back-top/style/index.scss +2 -1
- package/es/badge/badge.js +4 -1
- package/es/badge/style/index.css +3 -3
- package/es/badge/style/index.scss +3 -3
- package/es/breadcrumb/breadcrumb.js +1 -0
- package/es/button/button.vue_vue_type_script_setup_true_lang.js +10 -5
- package/es/button/style/index.css +15 -6
- package/es/button/style/index.scss +25 -7
- package/es/calendar/style/event.scss +2 -2
- package/es/calendar/style/index.css +2 -2
- package/es/card/style/index.css +3 -3
- package/es/card/style/index.scss +3 -3
- package/es/carousel/carousel-arrow.vue.d.ts +4 -4
- package/es/carousel/carousel-arrow.vue_vue_type_script_setup_true_lang.js +20 -4
- package/es/carousel/carousel-indicator.vue_vue_type_script_setup_true_lang.js +23 -4
- package/es/carousel/carousel-item.vue_vue_type_script_setup_true_lang.js +8 -1
- package/es/carousel/carousel.js +18 -1
- package/es/carousel/style/index.css +1 -1
- package/es/carousel/style/index.scss +1 -1
- package/es/cascader/cascader.vue_vue_type_script_setup_true_lang.js +11 -2
- package/es/cascader/style/index.css +2 -2
- package/es/cascader/style/index.scss +3 -1
- package/es/checkbox/checkbox-group.js +4 -1
- package/es/checkbox/checkbox.d.ts +9 -0
- package/es/checkbox/checkbox.js +14 -0
- package/es/checkbox/index.d.ts +15 -0
- package/es/checkbox/style/index.css +1 -1
- package/es/checkbox/style/index.scss +1 -1
- package/es/collapse/collapse-item.js +21 -3
- package/es/collapse/context.d.ts +1 -1
- package/es/color-picker/color-picker.js +6 -0
- package/es/copy/copy.vue_vue_type_script_setup_true_lang.js +10 -2
- package/es/date-picker/panels/body.vue_vue_type_script_setup_true_lang.js +14 -1
- package/es/date-picker/picker.vue_vue_type_script_setup_true_lang.js +1 -0
- package/es/date-picker/style/index.css +5 -5
- package/es/date-picker/style/index.scss +4 -3
- package/es/drawer/drawer.vue.d.ts +1 -1
- package/es/drawer/drawer.vue_vue_type_script_setup_true_lang.js +28 -7
- package/es/drawer/index.d.ts +3 -3
- package/es/dropdown/dropdown-option.vue_vue_type_script_setup_true_lang.js +5 -1
- package/es/dropdown/dropdown-panel.vue.d.ts +9 -0
- package/es/dropdown/dropdown-panel.vue_vue_type_script_setup_true_lang.js +75 -2
- package/es/dropdown/dropdown-submenu.vue_vue_type_script_setup_true_lang.js +5 -2
- package/es/dropdown/dropdown.vue_vue_type_script_setup_true_lang.js +4 -2
- package/es/dropdown/style/index.css +1 -1
- package/es/dropdown/style/index.scss +3 -1
- package/es/file-previewer/file-previewer.vue.d.ts +1 -1
- package/es/file-previewer/file-previewer.vue_vue_type_script_setup_true_lang.js +7 -3
- package/es/file-previewer/index.d.ts +3 -3
- package/es/form/context.d.ts +1 -0
- package/es/form/form-item.vue_vue_type_script_setup_true_lang.js +6 -2
- package/es/form/style/index.css +2 -2
- package/es/form/style/index.scss +2 -2
- package/es/image/preview.vue.d.ts +1 -1
- package/es/image/preview.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/index.css +141 -111
- package/es/input/input.js +16 -2
- package/es/input/style/index.css +2 -2
- package/es/input/style/input.scss +4 -4
- package/es/input-number/input-number.js +5 -1
- package/es/input-number/style/index.css +3 -3
- package/es/input-number/style/index.scss +5 -1
- package/es/input-tag/index.d.ts +3 -0
- package/es/input-tag/input-tag.d.ts +2 -0
- package/es/input-tag/input-tag.js +34 -30
- package/es/input-tag/style/index.css +8 -8
- package/es/input-tag/style/index.scss +11 -5
- package/es/layout/sider.vue_vue_type_script_setup_true_lang.js +31 -6
- package/es/layout/style/index.css +2 -2
- package/es/layout/style/index.scss +4 -2
- package/es/link/style/index.css +1 -1
- package/es/link/style/index.scss +3 -1
- package/es/mention/mention.js +8 -0
- package/es/menu/base-menu.vue_vue_type_script_setup_true_lang.js +29 -3
- package/es/menu/item.js +14 -1
- package/es/menu/style/index.css +6 -6
- package/es/menu/style/index.scss +5 -3
- package/es/message/style/index.css +3 -3
- package/es/message/style/index.scss +5 -3
- package/es/modal/index.d.ts +3 -3
- package/es/modal/modal.vue.d.ts +1 -1
- package/es/modal/modal.vue_vue_type_script_setup_true_lang.js +28 -13
- package/es/modal/style/index.css +2 -2
- package/es/modal/style/index.scss +3 -2
- package/es/notification/style/index.css +3 -3
- package/es/notification/style/index.scss +11 -3
- package/es/page-header/page-header.vue.d.ts +6 -6
- package/es/page-header/page-header.vue_vue_type_script_setup_true_lang.js +12 -1
- package/es/pagination/page-item-ellipsis.vue_vue_type_script_setup_true_lang.js +12 -2
- package/es/pagination/page-item-step.vue.d.ts +2 -2
- package/es/pagination/page-item-step.vue_vue_type_script_setup_true_lang.js +19 -2
- package/es/pagination/page-item.vue.d.ts +2 -2
- package/es/pagination/page-item.vue_vue_type_script_setup_true_lang.js +21 -3
- package/es/pagination/pagination.js +5 -1
- package/es/pagination/style/index.css +6 -1
- package/es/pagination/style/index.scss +9 -3
- package/es/popconfirm/popconfirm.vue_vue_type_script_setup_true_lang.js +2 -0
- package/es/popover/popover.vue_vue_type_script_setup_true_lang.js +2 -0
- package/es/progress/style/index.css +2 -2
- package/es/progress/style/index.scss +5 -3
- package/es/qr-code/qr-code-status.vue_vue_type_script_setup_true_lang.js +5 -1
- package/es/qr-code/qr-code.vue_vue_type_script_setup_true_lang.js +11 -6
- package/es/radio/context.d.ts +1 -0
- package/es/radio/radio-group.js +6 -2
- package/es/radio/radio.js +1 -0
- package/es/radio/style/index.css +2 -2
- package/es/radio/style/index.scss +4 -2
- package/es/rate/rate.js +25 -1
- package/es/resize-box/resize-box.vue.d.ts +4 -4
- package/es/resize-box/resize-box.vue_vue_type_script_setup_true_lang.js +30 -1
- package/es/result/result.vue_vue_type_script_setup_true_lang.js +7 -4
- package/es/select/index.d.ts +124 -0
- package/es/select/select-dropdown.vue_vue_type_script_setup_true_lang.js +4 -1
- package/es/select/select.d.ts +62 -0
- package/es/select/select.js +18 -2
- package/es/select/style/index.css +1 -1
- package/es/select/style/index.scss +3 -1
- package/es/selectable-card/style/index.css +2 -2
- package/es/selectable-card/style/index.scss +5 -5
- package/es/skeleton/skeleton.vue_vue_type_script_setup_true_lang.js +5 -1
- package/es/slider/slider-button.vue.d.ts +2 -0
- package/es/slider/slider-button.vue_vue_type_script_setup_true_lang.js +7 -2
- package/es/slider/slider.vue_vue_type_script_setup_true_lang.js +23 -2
- package/es/slider/style/index.css +1 -1
- package/es/slider/style/index.scss +3 -1
- package/es/spin/spin.js +7 -2
- package/es/spin/style/index.css +1 -1
- package/es/spin/style/index.scss +1 -1
- package/es/split/split.vue.d.ts +4 -4
- package/es/split/split.vue_vue_type_script_setup_true_lang.js +27 -3
- package/es/steps/context.d.ts +1 -0
- package/es/steps/step.vue_vue_type_script_setup_true_lang.js +15 -2
- package/es/steps/steps.vue_vue_type_script_setup_true_lang.js +6 -1
- package/es/steps/style/index.css +1 -1
- package/es/steps/style/index.scss +1 -1
- package/es/style/animation/index.scss +1 -0
- package/es/style/animation/reduced-motion.scss +22 -0
- package/es/style/animation/zoom.scss +7 -6
- package/es/style/icon.scss +9 -1
- package/es/switch/style/index.css +1 -1
- package/es/switch/style/index.scss +4 -1
- package/es/switch/switch.vue_vue_type_script_setup_true_lang.js +6 -1
- package/es/table/style/index.css +8 -8
- package/es/table/style/index.scss +11 -8
- package/es/table/table-operation-td.d.ts +15 -0
- package/es/table/table-tbody.js +4 -1
- package/es/table/table-td.js +2 -1
- package/es/table/table-th.js +4 -2
- package/es/table/table-thead.js +4 -1
- package/es/table/table-tr.js +4 -1
- package/es/table/table.js +6 -2
- package/es/tabs/context.d.ts +1 -0
- package/es/tabs/style/index.css +5 -5
- package/es/tabs/style/index.scss +7 -7
- package/es/tabs/tab-pane.vue_vue_type_script_setup_true_lang.js +21 -2
- package/es/tabs/tabs-nav.js +34 -1
- package/es/tabs/tabs-tab.vue_vue_type_script_setup_true_lang.js +27 -4
- package/es/tabs/tabs.js +4 -2
- package/es/tag/index.d.ts +5 -5
- package/es/tag/style/index.css +1 -1
- package/es/tag/style/index.scss +3 -1
- package/es/tag/tag.vue.d.ts +2 -2
- package/es/tag/tag.vue_vue_type_script_setup_true_lang.js +19 -2
- package/es/textarea/style/index.css +2 -2
- package/es/textarea/textarea.vue_vue_type_script_setup_true_lang.js +15 -3
- package/es/time-picker/time-column.vue_vue_type_script_setup_true_lang.js +11 -3
- package/es/time-picker/time-picker.vue_vue_type_script_setup_true_lang.js +4 -1
- package/es/tooltip/tooltip.vue_vue_type_script_setup_true_lang.js +1 -0
- package/es/transfer/style/index.css +1 -1
- package/es/transfer/style/index.scss +1 -1
- package/es/transfer/transfer-list-item.js +16 -2
- package/es/tree/base-node.vue_vue_type_script_setup_true_lang.js +27 -7
- package/es/tree/context.d.ts +2 -0
- package/es/tree/style/index.css +1 -1
- package/es/tree/style/index.scss +1 -1
- package/es/tree/tree.vue_vue_type_script_setup_true_lang.js +81 -2
- package/es/tree-select/tree-select.vue_vue_type_script_setup_true_lang.js +10 -1
- package/es/trigger/index.d.ts +45 -0
- package/es/trigger/trigger.d.ts +27 -0
- package/es/trigger/trigger.js +47 -5
- package/es/typography/edit-content.vue_vue_type_script_setup_true_lang.js +11 -8
- package/es/typography/operations.vue_vue_type_script_setup_true_lang.js +38 -6
- package/es/typography/style/index.css +2 -2
- package/es/typography/style/index.scss +2 -2
- package/es/upload/style/index.css +9 -9
- package/es/upload/style/index.scss +15 -9
- package/es/upload/upload-list-item.js +18 -5
- package/es/upload/upload-picture-item.js +25 -3
- package/es/verification-code/verification-code.js +6 -1
- package/json/vetur-attributes.json +15 -0
- package/json/vetur-tags.json +6 -2
- package/json/web-types.json +33 -1
- package/package.json +1 -1
package/es/menu/item.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
|
|
2
|
+
import { isActivationKey } from "../_utils/keyboard.js";
|
|
2
3
|
import { omit } from "../_utils/omit.js";
|
|
3
4
|
import Tooltip from "../tooltip/index.js";
|
|
4
5
|
import Ellipsis from "../ellipsis/index.js";
|
|
@@ -95,13 +96,25 @@ disabled: {
|
|
|
95
96
|
].filter(Boolean);
|
|
96
97
|
const itemElement = createVNode("div", mergeProps({
|
|
97
98
|
"ref": "refItemElement",
|
|
99
|
+
"role": "menuitem",
|
|
100
|
+
"tabindex": disabled ? void 0 : 0,
|
|
101
|
+
"aria-disabled": disabled || void 0,
|
|
102
|
+
"aria-current": isSelected ? "page" : void 0,
|
|
98
103
|
"class": [`${prefixCls}-item`, {
|
|
99
104
|
[`${prefixCls}-disabled`]: disabled,
|
|
100
105
|
[`${prefixCls}-selected`]: isSelected,
|
|
101
106
|
[`${prefixCls}-has-icon`]: iconElement,
|
|
102
107
|
[`${prefixCls}-item-indented`]: showIndent
|
|
103
108
|
}]
|
|
104
|
-
}, this.$attrs, {
|
|
109
|
+
}, this.$attrs, {
|
|
110
|
+
"onClick": onClick,
|
|
111
|
+
"onKeydown": (e) => {
|
|
112
|
+
if (isActivationKey(e)) {
|
|
113
|
+
e.preventDefault();
|
|
114
|
+
onClick(e);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}), [content, isSelected && mode === "horizontal" && createVNode("div", { "class": `${prefixCls}-selected-label` }, null)]);
|
|
105
118
|
if (needTooltip) return createVNode(Tooltip, mergeProps({
|
|
106
119
|
"position": "right",
|
|
107
120
|
"class": [`${prefixCls}-item-tooltip`, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.class].filter(Boolean)
|
package/es/menu/style/index.css
CHANGED
|
@@ -90,13 +90,13 @@
|
|
|
90
90
|
.sd-menu .sd-menu-pop-header.sd-menu-selected,
|
|
91
91
|
.sd-menu .sd-menu-inline-header.sd-menu-selected {
|
|
92
92
|
font-weight: 500;
|
|
93
|
-
transition: color 0.2s cubic-bezier(0, 0, 1, 1);
|
|
93
|
+
transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
94
94
|
}
|
|
95
95
|
.sd-menu .sd-menu-item.sd-menu-selected svg,
|
|
96
96
|
.sd-menu .sd-menu-group-title.sd-menu-selected svg,
|
|
97
97
|
.sd-menu .sd-menu-pop-header.sd-menu-selected svg,
|
|
98
98
|
.sd-menu .sd-menu-inline-header.sd-menu-selected svg {
|
|
99
|
-
transition: color 0.2s cubic-bezier(0, 0, 1, 1);
|
|
99
|
+
transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
100
100
|
}
|
|
101
101
|
.sd-menu .sd-menu-item .sd-icon,
|
|
102
102
|
.sd-menu .sd-menu-item .sd-menu-icon,
|
|
@@ -202,7 +202,7 @@
|
|
|
202
202
|
.sd-menu-light.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected,
|
|
203
203
|
.sd-menu-light.sd-menu-horizontal .sd-menu-inline-header.sd-menu-selected {
|
|
204
204
|
background: none;
|
|
205
|
-
transition: color 0.2s cubic-bezier(0, 0, 1, 1);
|
|
205
|
+
transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
206
206
|
}
|
|
207
207
|
.sd-menu-light.sd-menu-horizontal .sd-menu-item.sd-menu-selected:hover,
|
|
208
208
|
.sd-menu-light.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected:hover,
|
|
@@ -309,7 +309,7 @@
|
|
|
309
309
|
.sd-menu-dark.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected,
|
|
310
310
|
.sd-menu-dark.sd-menu-horizontal .sd-menu-inline-header.sd-menu-selected {
|
|
311
311
|
background: none;
|
|
312
|
-
transition: color 0.2s cubic-bezier(0, 0, 1, 1);
|
|
312
|
+
transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
313
313
|
}
|
|
314
314
|
.sd-menu-dark.sd-menu-horizontal .sd-menu-item.sd-menu-selected:hover,
|
|
315
315
|
.sd-menu-dark.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected:hover,
|
|
@@ -514,7 +514,7 @@
|
|
|
514
514
|
left: 12px;
|
|
515
515
|
height: 3px;
|
|
516
516
|
background-color: rgb(var(--sd-primary-6));
|
|
517
|
-
animation: sd-menu-selected-item-label-enter 0.2s cubic-bezier(0, 0, 1, 1);
|
|
517
|
+
animation: sd-menu-selected-item-label-enter 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
518
518
|
}
|
|
519
519
|
.sd-menu-pop-button {
|
|
520
520
|
width: auto;
|
|
@@ -647,7 +647,7 @@
|
|
|
647
647
|
color: var(--sd-color-text-1);
|
|
648
648
|
font-weight: 500;
|
|
649
649
|
background-color: transparent;
|
|
650
|
-
transition:
|
|
650
|
+
transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
651
651
|
}
|
|
652
652
|
.sd-trigger-menu-item:hover, .sd-trigger-menu-pop-header:hover {
|
|
653
653
|
color: var(--sd-color-text-1);
|
package/es/menu/style/index.scss
CHANGED
|
@@ -62,7 +62,7 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
@mixin menu-text-color-transition() {
|
|
65
|
-
transition: color theme.$transition-duration-2 theme.$transition-timing-function-
|
|
65
|
+
transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
@mixin menu-item-base() {
|
|
@@ -400,7 +400,7 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
|
|
|
400
400
|
height: $menu-height-label-item-selected;
|
|
401
401
|
background-color: $menu-color-label-item-selected;
|
|
402
402
|
animation: #{theme.$prefix}-menu-selected-item-label-enter theme.$transition-duration-2
|
|
403
|
-
theme.$transition-timing-function-
|
|
403
|
+
theme.$transition-timing-function-standard;
|
|
404
404
|
}
|
|
405
405
|
|
|
406
406
|
&-pop-button {
|
|
@@ -578,7 +578,9 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
|
|
|
578
578
|
color: $dropdown-option-color-text_selected;
|
|
579
579
|
font-weight: $dropdown-option-font-weight_selected;
|
|
580
580
|
background-color: $dropdown-option-color-bg_selected;
|
|
581
|
-
transition:
|
|
581
|
+
transition:
|
|
582
|
+
color theme.$transition-duration-1 theme.$transition-timing-function-standard,
|
|
583
|
+
background-color theme.$transition-duration-1 theme.$transition-timing-function-standard;
|
|
582
584
|
}
|
|
583
585
|
|
|
584
586
|
// hover
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
border: 1px solid var(--sd-color-neutral-3);
|
|
51
51
|
border-radius: var(--sd-border-radius-small);
|
|
52
52
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
53
|
-
transition:
|
|
53
|
+
transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
54
54
|
pointer-events: auto;
|
|
55
55
|
}
|
|
56
56
|
.sd-message-icon {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
color: var(--sd-color-text-1);
|
|
60
60
|
font-size: 20px;
|
|
61
61
|
vertical-align: middle;
|
|
62
|
-
animation: sd-msg-fade 0.1s cubic-bezier(0, 0, 1, 1), sd-msg-fade 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
|
|
62
|
+
animation: sd-msg-fade 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), sd-msg-fade 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
|
|
63
63
|
}
|
|
64
64
|
.sd-message-content {
|
|
65
65
|
color: var(--sd-color-text-1);
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
|
|
139
139
|
.fade-message-enter-active,
|
|
140
140
|
.fade-message-appear-active {
|
|
141
|
-
transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
|
|
141
|
+
transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
.fade-message-leave-from {
|
|
@@ -44,7 +44,9 @@ $message-prefix-cls: string.unquote('#{theme.$prefix}-message');
|
|
|
44
44
|
border: $message-border-width $message-border-style $message-normal-color-border;
|
|
45
45
|
border-radius: $message-border-radius;
|
|
46
46
|
box-shadow: global.$shadow2-down;
|
|
47
|
-
transition:
|
|
47
|
+
transition:
|
|
48
|
+
background-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
|
|
49
|
+
border-color theme.$transition-duration-1 theme.$transition-timing-function-standard;
|
|
48
50
|
pointer-events: auto;
|
|
49
51
|
|
|
50
52
|
&-icon {
|
|
@@ -55,7 +57,7 @@ $message-prefix-cls: string.unquote('#{theme.$prefix}-message');
|
|
|
55
57
|
vertical-align: middle;
|
|
56
58
|
animation:
|
|
57
59
|
#{theme.$prefix}-msg-fade theme.$transition-duration-1
|
|
58
|
-
theme.$transition-timing-function-
|
|
60
|
+
theme.$transition-timing-function-standard,
|
|
59
61
|
#{theme.$prefix}-msg-fade theme.$transition-duration-4
|
|
60
62
|
theme.$transition-timing-function-overshoot;
|
|
61
63
|
}
|
|
@@ -156,7 +158,7 @@ $message-prefix-cls: string.unquote('#{theme.$prefix}-message');
|
|
|
156
158
|
|
|
157
159
|
.fade-message-enter-active,
|
|
158
160
|
.fade-message-appear-active {
|
|
159
|
-
transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-
|
|
161
|
+
transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-standard;
|
|
160
162
|
}
|
|
161
163
|
|
|
162
164
|
.fade-message-leave-from {
|
package/es/modal/index.d.ts
CHANGED
|
@@ -148,6 +148,7 @@ declare const Modal: {
|
|
|
148
148
|
visible: boolean;
|
|
149
149
|
unmountOnClose: boolean;
|
|
150
150
|
renderToBody: boolean;
|
|
151
|
+
escToClose: boolean;
|
|
151
152
|
defaultVisible: boolean;
|
|
152
153
|
closable: boolean;
|
|
153
154
|
simple: boolean;
|
|
@@ -155,7 +156,6 @@ declare const Modal: {
|
|
|
155
156
|
titleEllipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
|
|
156
157
|
maskClosable: boolean;
|
|
157
158
|
okLoading: boolean;
|
|
158
|
-
escToClose: boolean;
|
|
159
159
|
hideCancel: boolean;
|
|
160
160
|
alignCenter: boolean;
|
|
161
161
|
titleAlign: "center" | "start";
|
|
@@ -308,6 +308,7 @@ declare const Modal: {
|
|
|
308
308
|
visible: boolean;
|
|
309
309
|
unmountOnClose: boolean;
|
|
310
310
|
renderToBody: boolean;
|
|
311
|
+
escToClose: boolean;
|
|
311
312
|
defaultVisible: boolean;
|
|
312
313
|
closable: boolean;
|
|
313
314
|
simple: boolean;
|
|
@@ -315,7 +316,6 @@ declare const Modal: {
|
|
|
315
316
|
titleEllipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
|
|
316
317
|
maskClosable: boolean;
|
|
317
318
|
okLoading: boolean;
|
|
318
|
-
escToClose: boolean;
|
|
319
319
|
hideCancel: boolean;
|
|
320
320
|
alignCenter: boolean;
|
|
321
321
|
titleAlign: "center" | "start";
|
|
@@ -473,6 +473,7 @@ declare const Modal: {
|
|
|
473
473
|
visible: boolean;
|
|
474
474
|
unmountOnClose: boolean;
|
|
475
475
|
renderToBody: boolean;
|
|
476
|
+
escToClose: boolean;
|
|
476
477
|
defaultVisible: boolean;
|
|
477
478
|
closable: boolean;
|
|
478
479
|
simple: boolean;
|
|
@@ -480,7 +481,6 @@ declare const Modal: {
|
|
|
480
481
|
titleEllipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
|
|
481
482
|
maskClosable: boolean;
|
|
482
483
|
okLoading: boolean;
|
|
483
|
-
escToClose: boolean;
|
|
484
484
|
hideCancel: boolean;
|
|
485
485
|
alignCenter: boolean;
|
|
486
486
|
titleAlign: "center" | "start";
|
package/es/modal/modal.vue.d.ts
CHANGED
|
@@ -279,6 +279,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
279
279
|
visible: boolean;
|
|
280
280
|
unmountOnClose: boolean;
|
|
281
281
|
renderToBody: boolean;
|
|
282
|
+
escToClose: boolean;
|
|
282
283
|
defaultVisible: boolean;
|
|
283
284
|
closable: boolean;
|
|
284
285
|
simple: boolean;
|
|
@@ -286,7 +287,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
286
287
|
titleEllipsisTooltip: boolean | EllipsisTooltipProps;
|
|
287
288
|
maskClosable: boolean;
|
|
288
289
|
okLoading: boolean;
|
|
289
|
-
escToClose: boolean;
|
|
290
290
|
hideCancel: boolean;
|
|
291
291
|
alignCenter: boolean;
|
|
292
292
|
titleAlign: "center" | "start";
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
|
|
2
2
|
import { getPrefixCls } from "../_utils/global-config.js";
|
|
3
3
|
import { isBoolean, isFunction, isNumber, isPromise } from "../_utils/is.js";
|
|
4
|
-
import {
|
|
4
|
+
import { getElement, off, on } from "../_utils/dom.js";
|
|
5
5
|
import icon_hover_default from "../_components/icon-hover.js";
|
|
6
|
+
import { KEYBOARD_KEY, onActivate } from "../_utils/keyboard.js";
|
|
6
7
|
import IconCheckCircleFill from "../icon/icon-check-circle-fill/index.js";
|
|
7
8
|
import IconClose from "../icon/icon-close/index.js";
|
|
8
9
|
import IconCloseCircleFill from "../icon/icon-close-circle-fill/index.js";
|
|
@@ -14,13 +15,14 @@ import client_only_default from "../_components/client-only.js";
|
|
|
14
15
|
import usePopupManager from "../_hooks/use-popup-manager.js";
|
|
15
16
|
import { useTeleportContainer } from "../_hooks/use-teleport-container.js";
|
|
16
17
|
import Button from "../button/index.js";
|
|
17
|
-
import { KEYBOARD_KEY } from "../_utils/keyboard.js";
|
|
18
18
|
import Ellipsis from "../ellipsis/index.js";
|
|
19
19
|
import { useConfigProviderProp } from "../_hooks/use-config-provider-prop.js";
|
|
20
|
+
import { getFocusableElements, useFocusTrap } from "../_hooks/use-focus-trap.js";
|
|
20
21
|
import { useOverflow } from "../_hooks/use-overflow.js";
|
|
21
22
|
import { useDraggable } from "./hooks/use-draggable.js";
|
|
22
|
-
import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, toDisplayString, toRefs, unref, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
|
|
23
|
+
import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, toDisplayString, toRefs, unref, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
|
|
23
24
|
//#region components/modal/modal.vue?vue&type=script&setup=true&lang.tsx
|
|
25
|
+
var _hoisted_1 = ["aria-labelledby"];
|
|
24
26
|
var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
|
|
25
27
|
name: "Modal",
|
|
26
28
|
inheritAttrs: false
|
|
@@ -319,8 +321,13 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
|
|
|
319
321
|
const { fullscreen, popupContainer, alignCenter, mask, maskClosable, maskStyle, closable, titleAlign, top, footer, hideCancel, escToClose, draggable, okText, cancelText, okButtonProps, cancelButtonProps, titleEllipsisTooltip, width } = toRefs(props);
|
|
320
322
|
const prefixCls = getPrefixCls("modal");
|
|
321
323
|
const { t } = useI18n();
|
|
324
|
+
const slots = useSlots();
|
|
322
325
|
const wrapperRef = ref();
|
|
323
326
|
const modalRef = ref();
|
|
327
|
+
const titleId = `sd-modal-title-${getCurrentInstance().uid}`;
|
|
328
|
+
const bodyId = `sd-modal-body-${getCurrentInstance().uid}`;
|
|
329
|
+
const hasTitle = computed(() => !props.hideTitle && (Boolean(props.title) || Boolean(slots.title)));
|
|
330
|
+
const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap(modalRef, { initialFocus: (c) => getFocusableElements(c).find((el) => !el.closest(".sd-modal-close-btn")) });
|
|
324
331
|
const { mergedValue: mergedMask } = useConfigProviderProp(mask, {
|
|
325
332
|
propNames: ["mask"],
|
|
326
333
|
getGlobalValue: (configProviderCtx) => {
|
|
@@ -537,10 +544,7 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
|
|
|
537
544
|
if (mergedMask.value && mergedMaskClosable.value && currentIsMask.value) handleCancel(e);
|
|
538
545
|
};
|
|
539
546
|
const handleOpen = () => {
|
|
540
|
-
if (computedVisible.value)
|
|
541
|
-
if (!contains(wrapperRef.value, document.activeElement) && document.activeElement instanceof HTMLElement) document.activeElement.blur();
|
|
542
|
-
emit("open");
|
|
543
|
-
}
|
|
547
|
+
if (computedVisible.value) emit("open");
|
|
544
548
|
};
|
|
545
549
|
const handleClose = () => {
|
|
546
550
|
if (!computedVisible.value) {
|
|
@@ -556,6 +560,7 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
|
|
|
556
560
|
if (computedVisible.value) {
|
|
557
561
|
setOverflowHidden();
|
|
558
562
|
if (mergedEscToClose.value) addGlobalKeyDownListener();
|
|
563
|
+
nextTick(() => activateFocusTrap());
|
|
559
564
|
}
|
|
560
565
|
});
|
|
561
566
|
onBeforeUnmount(() => {
|
|
@@ -570,9 +575,11 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
|
|
|
570
575
|
currentIsMask.value = false;
|
|
571
576
|
setOverflowHidden();
|
|
572
577
|
addGlobalKeyDownListener();
|
|
578
|
+
nextTick(() => activateFocusTrap());
|
|
573
579
|
} else {
|
|
574
580
|
emit("beforeClose");
|
|
575
581
|
removeGlobalKeyDownListener();
|
|
582
|
+
deactivateFocusTrap();
|
|
576
583
|
}
|
|
577
584
|
});
|
|
578
585
|
watch(fullscreen, () => {
|
|
@@ -635,14 +642,20 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
|
|
|
635
642
|
ref_key: "modalRef",
|
|
636
643
|
ref: modalRef,
|
|
637
644
|
class: normalizeClass(modalCls.value),
|
|
638
|
-
style: normalizeStyle(mergedModalStyle.value)
|
|
645
|
+
style: normalizeStyle(mergedModalStyle.value),
|
|
646
|
+
role: "dialog",
|
|
647
|
+
"aria-modal": "true",
|
|
648
|
+
"aria-labelledby": hasTitle.value ? titleId : void 0,
|
|
649
|
+
"aria-describedby": bodyId,
|
|
650
|
+
tabindex: "-1"
|
|
639
651
|
}, [
|
|
640
652
|
!__props.hideTitle && (_ctx.$slots.title || __props.title || unref(mergedClosable)) ? (openBlock(), createElementBlock("div", {
|
|
641
653
|
key: 0,
|
|
642
654
|
class: normalizeClass(headerCls.value),
|
|
643
|
-
onMousedown: _cache[
|
|
655
|
+
onMousedown: _cache[1] || (_cache[1] = (...args) => unref(handleMoveDown) && unref(handleMoveDown)(...args))
|
|
644
656
|
}, [_ctx.$slots.title || __props.title ? (openBlock(), createElementBlock("div", {
|
|
645
657
|
key: 0,
|
|
658
|
+
id: titleId,
|
|
646
659
|
class: normalizeClass([
|
|
647
660
|
`${unref(prefixCls)}-title`,
|
|
648
661
|
`${unref(prefixCls)}-title-align-${unref(mergedTitleAlign)}`,
|
|
@@ -664,16 +677,18 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
|
|
|
664
677
|
_: 3
|
|
665
678
|
}, 8, ["class", "tooltip"])], 2)) : createCommentVNode("", true), !__props.simple && unref(mergedClosable) ? (openBlock(), createElementBlock("div", {
|
|
666
679
|
key: 1,
|
|
667
|
-
tabindex: "
|
|
680
|
+
tabindex: "0",
|
|
668
681
|
role: "button",
|
|
669
682
|
"aria-label": "Close",
|
|
670
683
|
class: normalizeClass(`${unref(prefixCls)}-close-btn`),
|
|
671
|
-
onClick: handleCancel
|
|
684
|
+
onClick: handleCancel,
|
|
685
|
+
onKeydown: _cache[0] || (_cache[0] = ($event) => unref(onActivate)(handleCancel))
|
|
672
686
|
}, [createVNode(icon_hover_default, null, {
|
|
673
687
|
default: withCtx(() => [createVNode(unref(IconClose))]),
|
|
674
688
|
_: 1
|
|
675
|
-
})],
|
|
689
|
+
})], 34)) : createCommentVNode("", true)], 34)) : createCommentVNode("", true),
|
|
676
690
|
createElementVNode("div", {
|
|
691
|
+
id: bodyId,
|
|
677
692
|
class: normalizeClass([`${unref(prefixCls)}-body`, __props.bodyClass]),
|
|
678
693
|
style: normalizeStyle(__props.bodyStyle)
|
|
679
694
|
}, [renderSlot(_ctx.$slots, "default")], 6),
|
|
@@ -690,7 +705,7 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
|
|
|
690
705
|
default: withCtx(() => [createTextVNode(toDisplayString(okDisplayText.value), 1)]),
|
|
691
706
|
_: 1
|
|
692
707
|
}, 16, ["loading"])])], 2)) : createCommentVNode("", true)
|
|
693
|
-
],
|
|
708
|
+
], 14, _hoisted_1), [[vShow, computedVisible.value]])]),
|
|
694
709
|
_: 3
|
|
695
710
|
}, 8, ["name"])], 34)], 16)), [[vShow, computedVisible.value || mounted.value]]) : createCommentVNode("", true)], 8, ["to", "disabled"]))]),
|
|
696
711
|
_: 3
|
package/es/modal/style/index.css
CHANGED
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
|
|
199
199
|
.zoom-modal-enter-from,
|
|
200
200
|
.zoom-modal-appear-from {
|
|
201
|
-
transform: scale(0.
|
|
201
|
+
transform: scale(0.94, 0.94);
|
|
202
202
|
opacity: 0;
|
|
203
203
|
}
|
|
204
204
|
|
|
@@ -219,7 +219,7 @@
|
|
|
219
219
|
}
|
|
220
220
|
|
|
221
221
|
.zoom-modal-leave-to {
|
|
222
|
-
transform: scale(0.
|
|
222
|
+
transform: scale(0.94, 0.94);
|
|
223
223
|
opacity: 0;
|
|
224
224
|
}
|
|
225
225
|
|
|
@@ -238,7 +238,8 @@ $modal-prefix-cls: string.unquote('#{theme.$prefix}-modal');
|
|
|
238
238
|
|
|
239
239
|
.zoom-modal-enter-from,
|
|
240
240
|
.zoom-modal-appear-from {
|
|
241
|
-
|
|
241
|
+
// 从 scale(0.94) 起步而非 scale(0.5):弹窗只需轻微放大,过大的缩放显得突兀
|
|
242
|
+
transform: scale(0.94, 0.94);
|
|
242
243
|
opacity: 0;
|
|
243
244
|
}
|
|
244
245
|
|
|
@@ -261,7 +262,7 @@ $modal-prefix-cls: string.unquote('#{theme.$prefix}-modal');
|
|
|
261
262
|
}
|
|
262
263
|
|
|
263
264
|
.zoom-modal-leave-to {
|
|
264
|
-
transform: scale(0.
|
|
265
|
+
transform: scale(0.94, 0.94);
|
|
265
266
|
opacity: 0;
|
|
266
267
|
}
|
|
267
268
|
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
border-radius: var(--sd-border-radius-medium);
|
|
57
57
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
58
58
|
opacity: 1;
|
|
59
|
-
transition: opacity 0.2s cubic-bezier(0, 0, 1, 1);
|
|
59
|
+
transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
60
60
|
}
|
|
61
61
|
.sd-notification:not(:last-child) {
|
|
62
62
|
margin-bottom: 20px;
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
.slide-left-notification-leave-active {
|
|
189
|
-
transition:
|
|
189
|
+
transition: height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), padding 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
192
|
.slide-right-notification-enter-from,
|
|
@@ -218,5 +218,5 @@
|
|
|
218
218
|
}
|
|
219
219
|
|
|
220
220
|
.slide-right-notification-leave-active {
|
|
221
|
-
transition:
|
|
221
|
+
transition: height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), padding 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
222
222
|
}
|
|
@@ -55,7 +55,7 @@ $notification-prefix-cls: string.unquote('#{theme.$prefix}-notification');
|
|
|
55
55
|
border-radius: $notification-border-radius;
|
|
56
56
|
box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
|
|
57
57
|
opacity: 1;
|
|
58
|
-
transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-
|
|
58
|
+
transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
|
|
59
59
|
|
|
60
60
|
&:not(:last-child) {
|
|
61
61
|
margin-bottom: $notification-margin-bottom;
|
|
@@ -213,7 +213,11 @@ $notification-prefix-cls: string.unquote('#{theme.$prefix}-notification');
|
|
|
213
213
|
}
|
|
214
214
|
|
|
215
215
|
.slide-left-notification-leave-active {
|
|
216
|
-
transition:
|
|
216
|
+
transition:
|
|
217
|
+
height theme.$transition-duration-3 theme.$transition-timing-function-standard,
|
|
218
|
+
margin theme.$transition-duration-3 theme.$transition-timing-function-standard,
|
|
219
|
+
padding theme.$transition-duration-3 theme.$transition-timing-function-standard,
|
|
220
|
+
opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
|
|
217
221
|
}
|
|
218
222
|
|
|
219
223
|
.slide-right-notification-enter-from,
|
|
@@ -245,5 +249,9 @@ $notification-prefix-cls: string.unquote('#{theme.$prefix}-notification');
|
|
|
245
249
|
}
|
|
246
250
|
|
|
247
251
|
.slide-right-notification-leave-active {
|
|
248
|
-
transition:
|
|
252
|
+
transition:
|
|
253
|
+
height theme.$transition-duration-3 theme.$transition-timing-function-standard,
|
|
254
|
+
margin theme.$transition-duration-3 theme.$transition-timing-function-standard,
|
|
255
|
+
padding theme.$transition-duration-3 theme.$transition-timing-function-standard,
|
|
256
|
+
opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
|
|
249
257
|
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
declare var __VLS_1: {},
|
|
1
|
+
declare var __VLS_1: {}, __VLS_12: {}, __VLS_19: {}, __VLS_21: {}, __VLS_23: {}, __VLS_25: {};
|
|
2
2
|
type __VLS_Slots = {} & {
|
|
3
3
|
breadcrumb?: (props: typeof __VLS_1) => any;
|
|
4
4
|
} & {
|
|
5
|
-
'back-icon'?: (props: typeof
|
|
5
|
+
'back-icon'?: (props: typeof __VLS_12) => any;
|
|
6
6
|
} & {
|
|
7
|
-
title?: (props: typeof
|
|
7
|
+
title?: (props: typeof __VLS_19) => any;
|
|
8
8
|
} & {
|
|
9
|
-
subtitle?: (props: typeof
|
|
9
|
+
subtitle?: (props: typeof __VLS_21) => any;
|
|
10
10
|
} & {
|
|
11
|
-
extra?: (props: typeof
|
|
11
|
+
extra?: (props: typeof __VLS_23) => any;
|
|
12
12
|
} & {
|
|
13
|
-
default?: (props: typeof
|
|
13
|
+
default?: (props: typeof __VLS_25) => any;
|
|
14
14
|
};
|
|
15
15
|
declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
16
16
|
title: StringConstructor;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
|
|
2
2
|
import { getPrefixCls } from "../_utils/global-config.js";
|
|
3
3
|
import icon_hover_default from "../_components/icon-hover.js";
|
|
4
|
+
import { isActivationKey } from "../_utils/keyboard.js";
|
|
4
5
|
import IconLeft from "../icon/icon-left/index.js";
|
|
5
6
|
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
|
|
6
7
|
//#region components/page-header/page-header.vue?vue&type=script&setup=true&lang.ts
|
|
@@ -65,6 +66,12 @@ var page_header_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
|
|
|
65
66
|
const handleBack = (e) => {
|
|
66
67
|
emit("back", e);
|
|
67
68
|
};
|
|
69
|
+
const handleBackKeydown = (ev) => {
|
|
70
|
+
if (isActivationKey(ev)) {
|
|
71
|
+
ev.preventDefault();
|
|
72
|
+
handleBack(ev);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
68
75
|
const cls = computed(() => [prefixCls, {
|
|
69
76
|
[`${prefixCls}-with-breadcrumb`]: Boolean(slots.breadcrumb),
|
|
70
77
|
[`${prefixCls}-with-content`]: Boolean(slots.default)
|
|
@@ -78,7 +85,11 @@ var page_header_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
|
|
|
78
85
|
key: 0,
|
|
79
86
|
class: normalizeClass(`${unref(prefixCls)}-back-btn`),
|
|
80
87
|
prefix: unref(prefixCls),
|
|
81
|
-
|
|
88
|
+
role: "button",
|
|
89
|
+
tabindex: "0",
|
|
90
|
+
"aria-label": "Back",
|
|
91
|
+
onClick: handleBack,
|
|
92
|
+
onKeydown: handleBackKeydown
|
|
82
93
|
}, {
|
|
83
94
|
default: withCtx(() => [renderSlot(_ctx.$slots, "back-icon", {}, () => [createVNode(unref(IconLeft))])]),
|
|
84
95
|
_: 3
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
|
|
2
2
|
import { getPrefixCls } from "../_utils/global-config.js";
|
|
3
|
+
import { isActivationKey } from "../_utils/keyboard.js";
|
|
3
4
|
import IconMore from "../icon/icon-more/index.js";
|
|
4
5
|
import { getLegalPage } from "./utils.js";
|
|
5
6
|
import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
|
|
@@ -32,12 +33,21 @@ var page_item_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
|
|
|
32
33
|
const handleClick = (e) => {
|
|
33
34
|
emit("click", nextPage.value);
|
|
34
35
|
};
|
|
36
|
+
const handleKeydown = (e) => {
|
|
37
|
+
if (isActivationKey(e)) {
|
|
38
|
+
e.preventDefault();
|
|
39
|
+
emit("click", nextPage.value);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
35
42
|
const cls = computed(() => [prefixCls, `${prefixCls}-ellipsis`]);
|
|
36
43
|
return (_ctx, _cache) => {
|
|
37
44
|
return openBlock(), createElementBlock("li", {
|
|
38
45
|
class: normalizeClass(cls.value),
|
|
39
|
-
|
|
40
|
-
|
|
46
|
+
tabindex: "0",
|
|
47
|
+
"aria-label": "More pages",
|
|
48
|
+
onClick: handleClick,
|
|
49
|
+
onKeydown: handleKeydown
|
|
50
|
+
}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(IconMore))])], 34);
|
|
41
51
|
};
|
|
42
52
|
}
|
|
43
53
|
}));
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
declare var
|
|
1
|
+
declare var __VLS_11: {
|
|
2
2
|
type: string;
|
|
3
3
|
};
|
|
4
4
|
type __VLS_Slots = {} & {
|
|
5
|
-
default?: (props: typeof
|
|
5
|
+
default?: (props: typeof __VLS_11) => any;
|
|
6
6
|
};
|
|
7
7
|
declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
8
8
|
pages: {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
|
|
2
2
|
import { getPrefixCls } from "../_utils/global-config.js";
|
|
3
|
+
import { isActivationKey } from "../_utils/keyboard.js";
|
|
3
4
|
import IconRight from "../icon/icon-right/index.js";
|
|
4
5
|
import IconLeft from "../icon/icon-left/index.js";
|
|
5
6
|
import { getLegalPage } from "./utils.js";
|
|
@@ -48,6 +49,13 @@ var page_item_step_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
|
|
|
48
49
|
const handleClick = (e) => {
|
|
49
50
|
if (!mergedDisabled.value) emit("click", nextPage.value);
|
|
50
51
|
};
|
|
52
|
+
const handleKeydown = (e) => {
|
|
53
|
+
if (mergedDisabled.value) return;
|
|
54
|
+
if (isActivationKey(e)) {
|
|
55
|
+
e.preventDefault();
|
|
56
|
+
emit("click", nextPage.value);
|
|
57
|
+
}
|
|
58
|
+
};
|
|
51
59
|
const cls = computed(() => [
|
|
52
60
|
prefixCls,
|
|
53
61
|
`${prefixCls}-${props.type}`,
|
|
@@ -56,11 +64,20 @@ var page_item_step_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
|
|
|
56
64
|
return (_ctx, _cache) => {
|
|
57
65
|
return openBlock(), createBlock(resolveDynamicComponent(__props.simple ? "span" : "li"), {
|
|
58
66
|
class: normalizeClass(cls.value),
|
|
59
|
-
|
|
67
|
+
"aria-label": isNext ? "Next page" : "Previous page",
|
|
68
|
+
"aria-disabled": mergedDisabled.value || void 0,
|
|
69
|
+
tabindex: mergedDisabled.value ? -1 : 0,
|
|
70
|
+
onClick: handleClick,
|
|
71
|
+
onKeydown: handleKeydown
|
|
60
72
|
}, {
|
|
61
73
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default", { type: isNext ? "next" : "previous" }, () => [isNext ? (openBlock(), createBlock(unref(IconRight), { key: 0 })) : (openBlock(), createBlock(unref(IconLeft), { key: 1 }))])]),
|
|
62
74
|
_: 3
|
|
63
|
-
},
|
|
75
|
+
}, 40, [
|
|
76
|
+
"class",
|
|
77
|
+
"aria-label",
|
|
78
|
+
"aria-disabled",
|
|
79
|
+
"tabindex"
|
|
80
|
+
]);
|
|
64
81
|
};
|
|
65
82
|
}
|
|
66
83
|
}));
|
|
@@ -23,7 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
23
23
|
type: PropType<CSSProperties>;
|
|
24
24
|
};
|
|
25
25
|
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
26
|
-
click: (_pageNumber: number, _e:
|
|
26
|
+
click: (_pageNumber: number, _e: Event) => any;
|
|
27
27
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
28
28
|
pageNumber: {
|
|
29
29
|
type: NumberConstructor;
|
|
@@ -42,7 +42,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
42
42
|
type: PropType<CSSProperties>;
|
|
43
43
|
};
|
|
44
44
|
}>> & Readonly<{
|
|
45
|
-
onClick?: ((_pageNumber: number, _e:
|
|
45
|
+
onClick?: ((_pageNumber: number, _e: Event) => any) | undefined;
|
|
46
46
|
}>, {
|
|
47
47
|
disabled: boolean;
|
|
48
48
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|