sard-uniapp 1.20.1 → 1.20.2
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/CHANGELOG.md +9 -0
- package/components/crop-image-agent/common.js +1 -1
- package/components/crop-image-agent/crop-image-agent.vue +1 -1
- package/components/dialog/README.md +19 -3
- package/components/dialog/common.d.ts +0 -1
- package/components/dialog/dialog.vue +1 -2
- package/components/dialog-agent/common.d.ts +5 -2
- package/components/dialog-agent/common.js +2 -2
- package/components/dialog-agent/dialog-agent.d.ts +7 -1
- package/components/dialog-agent/dialog-agent.vue +123 -9
- package/components/dialog-agent/index.d.ts +1 -1
- package/components/dialog-agent/index.js +1 -1
- package/components/notify/README.md +38 -3
- package/components/notify/common.d.ts +5 -1
- package/components/notify/index.d.ts +1 -1
- package/components/notify/notify.d.ts +14 -7
- package/components/notify/notify.vue +25 -4
- package/components/notify-agent/common.d.ts +5 -2
- package/components/notify-agent/common.js +2 -2
- package/components/notify-agent/index.d.ts +1 -1
- package/components/notify-agent/index.js +1 -1
- package/components/notify-agent/notify-agent.d.ts +7 -1
- package/components/notify-agent/notify-agent.vue +90 -5
- package/components/popup/common.d.ts +11 -0
- package/components/toast/README.md +28 -6
- package/components/toast/common.d.ts +2 -1
- package/components/toast/toast.d.ts +5 -3
- package/components/toast/toast.vue +17 -3
- package/components/toast-agent/common.d.ts +5 -2
- package/components/toast-agent/common.js +2 -2
- package/components/toast-agent/index.d.ts +1 -1
- package/components/toast-agent/index.js +1 -1
- package/components/toast-agent/toast-agent.d.ts +7 -1
- package/components/toast-agent/toast-agent.vue +85 -5
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
## [1.20.2](https://github.com/sutras/sard-uniapp/compare/v1.20.1...v1.20.2) (2025-07-02)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* dialog, notify, toast 新增事件 ([54e5c4b](https://github.com/sutras/sard-uniapp/commit/54e5c4b8c8240df6dd77edb01bfee9e8ecabae96))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
1
10
|
## [1.20.1](https://github.com/sutras/sard-uniapp/compare/v1.20.0...v1.20.1) (2025-07-02)
|
|
2
11
|
|
|
3
12
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getAvailableImperative } from '../../use
|
|
1
|
+
import { getAvailableImperative } from '../../use';
|
|
2
2
|
import { defaultConfig } from '../config';
|
|
3
3
|
import { defaultCropImageProps } from '../crop-image/common';
|
|
4
4
|
export const defaultCropImageAgentProps = () => ({
|
|
@@ -139,9 +139,25 @@ type DialogBeforeClose = (
|
|
|
139
139
|
|
|
140
140
|
继承 [`DialogProps`](#DialogProps) 并有以下额外属性。
|
|
141
141
|
|
|
142
|
-
| 属性
|
|
143
|
-
|
|
|
144
|
-
| id
|
|
142
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
143
|
+
| ----------------------------------- | --------------------------- | ---------------------------------- | -------- |
|
|
144
|
+
| id | 对话框组件的 id | string | 'dialog' |
|
|
145
|
+
| onClose <sup>1.20.2+</sup> | 点击关闭按钮或遮罩时调用 | () => void |
|
|
146
|
+
| onCancel <sup>1.20.2+</sup> | 点击取消按钮时调用 | () => void |
|
|
147
|
+
| onConfirm <sup>1.20.2+</sup> | 点击确定按钮时调用 | () => void |
|
|
148
|
+
| onVisibleHook <sup>1.20.2+</sup> | 入场/退场动画状态改变时调用 | (name: TransitionHookName) => void |
|
|
149
|
+
| onBeforeEnter <sup>1.20.2+</sup> | 入场动画开始前调用 | () => void |
|
|
150
|
+
| onEnter <sup>1.20.2+</sup> | 入场动画开始时调用 | () => void |
|
|
151
|
+
| onAfterEnter <sup>1.20.2+</sup> | 入场动画结束时调用 | () => void |
|
|
152
|
+
| onEnterCancelled <sup>1.20.2+</sup> | 入场动画取消时调用 | () => void |
|
|
153
|
+
| onBeforeLeave <sup>1.20.2+</sup> | 退场动画开始前调用 | () => void |
|
|
154
|
+
| onLeave <sup>1.20.2+</sup> | 退场动画开始时调用 | () => void |
|
|
155
|
+
| onAfterLeave <sup>1.20.2+</sup> | 退场动画结束时调用 | () => void |
|
|
156
|
+
| onLeaveCancelled <sup>1.20.2+</sup> | 退场动画取消时调用 | () => void |
|
|
157
|
+
|
|
158
|
+
### DialogAgentEmits <sup>1.20.2+</sup>
|
|
159
|
+
|
|
160
|
+
继承 [`DialogEmits`](#DialogEmits)。
|
|
145
161
|
|
|
146
162
|
### 命令式方法
|
|
147
163
|
|
|
@@ -156,8 +156,7 @@ export default _defineComponent({
|
|
|
156
156
|
beforeClose: { type: Function, required: false },
|
|
157
157
|
duration: { type: Number, required: false },
|
|
158
158
|
cancelProps: { type: Object, required: false },
|
|
159
|
-
confirmProps: { type: Object, required: false }
|
|
160
|
-
id: { type: String, required: false }
|
|
159
|
+
confirmProps: { type: Object, required: false }
|
|
161
160
|
}, defaultDialogProps),
|
|
162
161
|
emits: ["update:visible", "close", "cancel", "confirm", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
|
|
163
162
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { type DialogProps } from '../dialog/common';
|
|
2
|
-
|
|
1
|
+
import { type DialogEmits, type DialogProps } from '../dialog/common';
|
|
2
|
+
import { type TransitionHookCallbacks } from '../popup/common';
|
|
3
|
+
export interface DialogAgentProps extends DialogProps, TransitionHookCallbacks {
|
|
3
4
|
id?: string;
|
|
4
5
|
onClose?: () => void;
|
|
5
6
|
onCancel?: () => void;
|
|
@@ -14,6 +15,8 @@ export declare const defaultDialogAgentProps: () => {
|
|
|
14
15
|
overlayClosable: boolean;
|
|
15
16
|
duration: number;
|
|
16
17
|
};
|
|
18
|
+
export interface DialogAgentEmits extends DialogEmits {
|
|
19
|
+
}
|
|
17
20
|
export declare const imperativeName = "dialog";
|
|
18
21
|
export interface DialogImperative {
|
|
19
22
|
show(newProps: Record<string, any>): void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defaultDialogProps } from '../dialog/common';
|
|
1
|
+
import { defaultDialogProps, } from '../dialog/common';
|
|
2
2
|
import { defaultConfig } from '../config';
|
|
3
|
-
import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use
|
|
3
|
+
import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use';
|
|
4
4
|
export const defaultDialogAgentProps = () => ({
|
|
5
5
|
...defaultDialogProps,
|
|
6
6
|
...defaultConfig.dialogAgent,
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { type DialogAgentProps } from './common';
|
|
2
|
-
declare const _default: import("vue").DefineComponent<DialogAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
2
|
+
declare const _default: import("vue").DefineComponent<DialogAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
3
|
+
[x: string]: any;
|
|
4
|
+
} & {
|
|
5
|
+
[x: string]: any;
|
|
6
|
+
}, string, import("vue").PublicProps, Readonly<DialogAgentProps> & Readonly<{
|
|
7
|
+
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
8
|
+
}>, {
|
|
3
9
|
id: string;
|
|
4
10
|
buttonType: "round" | "text";
|
|
5
11
|
showConfirm: boolean;
|
|
@@ -1,10 +1,36 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<sar-dialog
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
:root-style="innerProps.rootStyle"
|
|
4
|
+
:root-class="innerProps.rootClass"
|
|
5
|
+
:popup-style="innerProps.popupStyle"
|
|
6
|
+
:popup-class="innerProps.popupClass"
|
|
7
|
+
:visible="innerProps.visible"
|
|
8
|
+
:title="innerProps.title"
|
|
9
|
+
:message="innerProps.message"
|
|
10
|
+
:headed="innerProps.headed"
|
|
11
|
+
:button-type="innerProps.buttonType"
|
|
12
|
+
:show-cancel="innerProps.showCancel"
|
|
13
|
+
:cancel-text="innerProps.cancelText"
|
|
14
|
+
:show-confirm="innerProps.showConfirm"
|
|
15
|
+
:confirm-text="innerProps.confirmText"
|
|
16
|
+
:overlay-closable="innerProps.overlayClosable"
|
|
17
|
+
:before-close="innerProps.beforeClose"
|
|
18
|
+
:duration="innerProps.duration"
|
|
19
|
+
:cancel-props="innerProps.cancelProps"
|
|
20
|
+
:confirm-props="innerProps.confirmProps"
|
|
21
|
+
@update:visible="onUpdateVisible"
|
|
22
|
+
@confirm="onConfirm"
|
|
23
|
+
@close="onClose"
|
|
24
|
+
@cancel="onCancel"
|
|
25
|
+
@visible-hook="onVisibleHook"
|
|
26
|
+
@before-enter="onBeforeEnter"
|
|
27
|
+
@enter="onEnter"
|
|
28
|
+
@after-enter="onAfterEnter"
|
|
29
|
+
@enter-cancelled="onEnterCancelled"
|
|
30
|
+
@before-leave="onBeforeLeave"
|
|
31
|
+
@leave="onLeave"
|
|
32
|
+
@after-leave="onAfterLeave"
|
|
33
|
+
@leave-cancelled="onLeaveCancelled"
|
|
8
34
|
/>
|
|
9
35
|
</template>
|
|
10
36
|
|
|
@@ -16,7 +42,7 @@ import {
|
|
|
16
42
|
defaultDialogAgentProps,
|
|
17
43
|
imperativeName
|
|
18
44
|
} from "./common";
|
|
19
|
-
import { useImperative } from "../../use
|
|
45
|
+
import { useImperative } from "../../use";
|
|
20
46
|
/**
|
|
21
47
|
* @property {string} rootClass 对话框根元素类名,默认值:-。
|
|
22
48
|
* @property {StyleValue} rootStyle 对话框根元素样式,默认值:-。
|
|
@@ -37,6 +63,31 @@ import { useImperative } from "../../use/useImperative";
|
|
|
37
63
|
* @property {ButtonProps} confirmProps 设置确定按钮 props,默认值:-。
|
|
38
64
|
* @property {ButtonProps} cancelProps 设置取消按钮 props,默认值:-。
|
|
39
65
|
* @property {string} id 对话框组件的 id,默认值:'dialog'。
|
|
66
|
+
* @property {() => void} onClose 点击关闭按钮或遮罩时调用,默认值:undefined。
|
|
67
|
+
* @property {() => void} onCancel 点击取消按钮时调用,默认值:undefined。
|
|
68
|
+
* @property {() => void} onConfirm 点击确定按钮时调用,默认值:undefined。
|
|
69
|
+
* @property {(name: TransitionHookName) => void} onVisibleHook 入场/退场动画状态改变时调用,默认值:undefined。
|
|
70
|
+
* @property {() => void} onBeforeEnter 入场动画开始前调用,默认值:undefined。
|
|
71
|
+
* @property {() => void} onEnter 入场动画开始时调用,默认值:undefined。
|
|
72
|
+
* @property {() => void} onAfterEnter 入场动画结束时调用,默认值:undefined。
|
|
73
|
+
* @property {() => void} onEnterCancelled 入场动画取消时调用,默认值:undefined。
|
|
74
|
+
* @property {() => void} onBeforeLeave 退场动画开始前调用,默认值:undefined。
|
|
75
|
+
* @property {() => void} onLeave 退场动画开始时调用,默认值:undefined。
|
|
76
|
+
* @property {() => void} onAfterLeave 退场动画结束时调用,默认值:undefined。
|
|
77
|
+
* @property {() => void} onLeaveCancelled 退场动画取消时调用,默认值:undefined。
|
|
78
|
+
* @event {(visible: boolean) => void} update 对话框显隐时触发
|
|
79
|
+
* @event {() => void} close 点击关闭按钮或遮罩时触发
|
|
80
|
+
* @event {() => void} cancel 点击取消按钮时触发
|
|
81
|
+
* @event {() => void} confirm 点击确定按钮时触发
|
|
82
|
+
* @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
|
|
83
|
+
* @event {() => void} before-enter 入场动画开始前触发
|
|
84
|
+
* @event {() => void} enter 入场动画开始时触发
|
|
85
|
+
* @event {() => void} after-enter 入场动画结束时触发
|
|
86
|
+
* @event {() => void} enter-cancelled 入场动画取消时触发
|
|
87
|
+
* @event {() => void} before-leave 退场动画开始前触发
|
|
88
|
+
* @event {() => void} leave 退场动画开始时触发
|
|
89
|
+
* @event {() => void} after-leave 退场动画结束时触发
|
|
90
|
+
* @event {() => void} leave-cancelled 退场动画取消时触发
|
|
40
91
|
*/
|
|
41
92
|
export default _defineComponent({
|
|
42
93
|
components: {
|
|
@@ -71,11 +122,22 @@ export default _defineComponent({
|
|
|
71
122
|
beforeClose: { type: Function, required: false },
|
|
72
123
|
duration: { type: Number, required: false },
|
|
73
124
|
cancelProps: { type: Object, required: false },
|
|
74
|
-
confirmProps: { type: Object, required: false }
|
|
125
|
+
confirmProps: { type: Object, required: false },
|
|
126
|
+
onVisibleHook: { type: Function, required: false },
|
|
127
|
+
onBeforeEnter: { type: Function, required: false },
|
|
128
|
+
onEnter: { type: Function, required: false },
|
|
129
|
+
onAfterEnter: { type: Function, required: false },
|
|
130
|
+
onEnterCancelled: { type: Function, required: false },
|
|
131
|
+
onBeforeLeave: { type: Function, required: false },
|
|
132
|
+
onLeave: { type: Function, required: false },
|
|
133
|
+
onAfterLeave: { type: Function, required: false },
|
|
134
|
+
onLeaveCancelled: { type: Function, required: false }
|
|
75
135
|
}, defaultDialogAgentProps()),
|
|
76
|
-
|
|
136
|
+
emits: ["update:visible", "close", "cancel", "confirm", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
|
|
137
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
77
138
|
__expose();
|
|
78
139
|
const props = __props;
|
|
140
|
+
const emit = __emit;
|
|
79
141
|
const innerProps = ref({ ...props });
|
|
80
142
|
const imperative = {
|
|
81
143
|
show(newProps) {
|
|
@@ -92,12 +154,64 @@ export default _defineComponent({
|
|
|
92
154
|
};
|
|
93
155
|
}
|
|
94
156
|
};
|
|
157
|
+
const onConfirm = () => {
|
|
158
|
+
emit("confirm");
|
|
159
|
+
innerProps.value.onConfirm?.();
|
|
160
|
+
};
|
|
161
|
+
const onClose = () => {
|
|
162
|
+
emit("close");
|
|
163
|
+
innerProps.value.onClose?.();
|
|
164
|
+
};
|
|
165
|
+
const onCancel = () => {
|
|
166
|
+
emit("cancel");
|
|
167
|
+
innerProps.value.onCancel?.();
|
|
168
|
+
};
|
|
169
|
+
const onUpdateVisible = (visible) => {
|
|
170
|
+
innerProps.value.visible = visible;
|
|
171
|
+
emit("update:visible", visible);
|
|
172
|
+
};
|
|
173
|
+
const onVisibleHook = (name) => {
|
|
174
|
+
emit("visible-hook", name);
|
|
175
|
+
innerProps.value.onVisibleHook?.(name);
|
|
176
|
+
};
|
|
177
|
+
const onBeforeEnter = () => {
|
|
178
|
+
emit("before-enter");
|
|
179
|
+
innerProps.value.onBeforeEnter?.();
|
|
180
|
+
};
|
|
181
|
+
const onEnter = () => {
|
|
182
|
+
emit("enter");
|
|
183
|
+
innerProps.value.onEnter?.();
|
|
184
|
+
};
|
|
185
|
+
const onAfterEnter = () => {
|
|
186
|
+
emit("after-enter");
|
|
187
|
+
innerProps.value.onAfterEnter?.();
|
|
188
|
+
};
|
|
189
|
+
const onEnterCancelled = () => {
|
|
190
|
+
emit("enter-cancelled");
|
|
191
|
+
innerProps.value.onEnterCancelled?.();
|
|
192
|
+
};
|
|
193
|
+
const onBeforeLeave = () => {
|
|
194
|
+
emit("before-leave");
|
|
195
|
+
innerProps.value.onBeforeLeave?.();
|
|
196
|
+
};
|
|
197
|
+
const onLeave = () => {
|
|
198
|
+
emit("leave");
|
|
199
|
+
innerProps.value.onLeave?.();
|
|
200
|
+
};
|
|
201
|
+
const onAfterLeave = () => {
|
|
202
|
+
emit("after-leave");
|
|
203
|
+
innerProps.value.onAfterLeave?.();
|
|
204
|
+
};
|
|
205
|
+
const onLeaveCancelled = () => {
|
|
206
|
+
emit("leave-cancelled");
|
|
207
|
+
innerProps.value.onLeaveCancelled?.();
|
|
208
|
+
};
|
|
95
209
|
useImperative(
|
|
96
210
|
imperativeName,
|
|
97
211
|
imperative,
|
|
98
212
|
computed(() => innerProps.value.id)
|
|
99
213
|
);
|
|
100
|
-
const __returned__ = { props, innerProps, imperative, SarDialog };
|
|
214
|
+
const __returned__ = { props, emit, innerProps, imperative, onConfirm, onClose, onCancel, onUpdateVisible, onVisibleHook, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, SarDialog };
|
|
101
215
|
return __returned__;
|
|
102
216
|
}
|
|
103
217
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { type DialogAgentProps, type DialogOptions, dialog } from './common';
|
|
1
|
+
export { type DialogAgentProps, type DialogOptions, type DialogAgentEmits, dialog, } from './common';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { dialog } from './common';
|
|
1
|
+
export { dialog, } from './common';
|
|
@@ -71,13 +71,48 @@ import { notify } from 'sard-uniapp'
|
|
|
71
71
|
| duration | 显隐动画时长,单位 ms | number | 300 |
|
|
72
72
|
| status-bar <sup>1.12+</sup> | 是否包含状态栏,自定义导航栏时应设为 `true` | boolean | false |
|
|
73
73
|
|
|
74
|
+
### NotifySlots <sup>1.20.2+</sup>
|
|
75
|
+
|
|
76
|
+
| 插槽 | 描述 | 属性 |
|
|
77
|
+
| ------- | -------------- | ---- |
|
|
78
|
+
| default | 自定义默认内容 | - |
|
|
79
|
+
|
|
80
|
+
### NotifyEmits
|
|
81
|
+
|
|
82
|
+
| 事件 | 描述 | 类型 |
|
|
83
|
+
| ---------------------------------- | --------------------------- | ---------------------------------- |
|
|
84
|
+
| update:visible | 通知框显隐时触发 | (visible: boolean) => void |
|
|
85
|
+
| click <sup>1.20.2+</sup> | 点击通知框时触发 | (event: any) => void |
|
|
86
|
+
| visible-hook <sup>1.20.2+</sup> | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void |
|
|
87
|
+
| before-enter <sup>1.20.2+</sup> | 入场动画开始前触发 | () => void |
|
|
88
|
+
| enter <sup>1.20.2+</sup> | 入场动画开始时触发 | () => void |
|
|
89
|
+
| after-enter <sup>1.20.2+</sup> | 入场动画结束时触发 | () => void |
|
|
90
|
+
| enter-cancelled <sup>1.20.2+</sup> | 入场动画取消时触发 | () => void |
|
|
91
|
+
| before-leave <sup>1.20.2+</sup> | 退场动画开始前触发 | () => void |
|
|
92
|
+
| leave <sup>1.20.2+</sup> | 退场动画开始时触发 | () => void |
|
|
93
|
+
| after-leave <sup>1.20.2+</sup> | 退场动画结束时触发 | () => void |
|
|
94
|
+
| leave-cancelled <sup>1.20.2+</sup> | 退场动画取消时触发 | () => void |
|
|
95
|
+
|
|
74
96
|
### NotifyAgentProps / NotifyOptions
|
|
75
97
|
|
|
76
98
|
继承 [`NotifyProps`](#NotifyProps) 并有以下额外属性。
|
|
77
99
|
|
|
78
|
-
| 属性
|
|
79
|
-
|
|
|
80
|
-
| id
|
|
100
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
101
|
+
| ----------------------------------- | --------------------------- | ---------------------------------- | -------- |
|
|
102
|
+
| id | 通知组件的 id | string | 'notify' |
|
|
103
|
+
| onVisibleHook <sup>1.20.2+</sup> | 入场/退场动画状态改变时调用 | (name: TransitionHookName) => void |
|
|
104
|
+
| onBeforeEnter <sup>1.20.2+</sup> | 入场动画开始前调用 | () => void |
|
|
105
|
+
| onEnter <sup>1.20.2+</sup> | 入场动画开始时调用 | () => void |
|
|
106
|
+
| onAfterEnter <sup>1.20.2+</sup> | 入场动画结束时调用 | () => void |
|
|
107
|
+
| onEnterCancelled <sup>1.20.2+</sup> | 入场动画取消时调用 | () => void |
|
|
108
|
+
| onBeforeLeave <sup>1.20.2+</sup> | 退场动画开始前调用 | () => void |
|
|
109
|
+
| onLeave <sup>1.20.2+</sup> | 退场动画开始时调用 | () => void |
|
|
110
|
+
| onAfterLeave <sup>1.20.2+</sup> | 退场动画结束时调用 | () => void |
|
|
111
|
+
| onLeaveCancelled <sup>1.20.2+</sup> | 退场动画取消时调用 | () => void |
|
|
112
|
+
|
|
113
|
+
### NotifyAgentEmits <sup>1.20.2+</sup>
|
|
114
|
+
|
|
115
|
+
继承 [`NotifyEmits`](#NotifyEmits)。
|
|
81
116
|
|
|
82
117
|
### 命令式方法
|
|
83
118
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type StyleValue } from 'vue';
|
|
2
|
+
import { type TransitionHookEmits } from '../popup/common';
|
|
2
3
|
export interface NotifyProps {
|
|
3
4
|
rootStyle?: StyleValue;
|
|
4
5
|
rootClass?: string;
|
|
@@ -18,7 +19,10 @@ export declare const defaultNotifyProps: {
|
|
|
18
19
|
duration: number;
|
|
19
20
|
timeout: number;
|
|
20
21
|
};
|
|
21
|
-
export interface
|
|
22
|
+
export interface NotifySlots {
|
|
23
|
+
default?(props: Record<string, never>): any;
|
|
24
|
+
}
|
|
25
|
+
export interface NotifyEmits extends TransitionHookEmits {
|
|
22
26
|
(e: 'click', event: any): void;
|
|
23
27
|
(e: 'update:visible', event: any): void;
|
|
24
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type { NotifyProps, NotifyEmits, NotifyExpose } from './common';
|
|
1
|
+
export type { NotifyProps, NotifySlots, NotifyEmits, NotifyExpose, } from './common';
|
|
@@ -1,17 +1,24 @@
|
|
|
1
|
-
import { type NotifyProps } from './common';
|
|
2
|
-
declare
|
|
1
|
+
import { type NotifyProps, type NotifySlots } from './common';
|
|
2
|
+
declare function __VLS_template(): Readonly<NotifySlots> & NotifySlots;
|
|
3
|
+
declare const __VLS_component: import("vue").DefineComponent<NotifyProps, {
|
|
3
4
|
reHideLater: () => void;
|
|
4
5
|
cancelHide: () => void;
|
|
5
|
-
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
7
|
+
[x: string]: any;
|
|
8
|
+
} & {
|
|
9
|
+
[x: string]: any;
|
|
8
10
|
}, string, import("vue").PublicProps, Readonly<NotifyProps> & Readonly<{
|
|
9
|
-
|
|
10
|
-
"onUpdate:visible"?: ((event: any) => any) | undefined;
|
|
11
|
+
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
11
12
|
}>, {
|
|
12
13
|
timeout: number;
|
|
13
14
|
type: "primary" | "success" | "warning" | "error";
|
|
14
15
|
position: "top" | "bottom";
|
|
15
16
|
duration: number;
|
|
16
17
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
18
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
17
19
|
export default _default;
|
|
20
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
21
|
+
new (): {
|
|
22
|
+
$slots: S;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
@@ -4,10 +4,13 @@
|
|
|
4
4
|
:overlay="false"
|
|
5
5
|
:effect="effect"
|
|
6
6
|
:duration="duration"
|
|
7
|
+
@visible-hook="onVisibleHook"
|
|
7
8
|
>
|
|
8
|
-
<view :class="notifyClass" :style="notifyStyle">
|
|
9
|
+
<view :class="notifyClass" :style="notifyStyle" @click="onClick">
|
|
9
10
|
<sar-status-bar v-if="position === 'top' && statusBar" />
|
|
10
|
-
<view :class="bem.e('content')">
|
|
11
|
+
<view :class="bem.e('content')">
|
|
12
|
+
<slot>{{ message }}</slot>
|
|
13
|
+
</view>
|
|
11
14
|
</view>
|
|
12
15
|
</sar-popup>
|
|
13
16
|
</template>
|
|
@@ -32,6 +35,17 @@ import SarStatusBar from "../status-bar/status-bar.vue";
|
|
|
32
35
|
* @property {number} timeout 展示时长(ms),值为 0 时,通知不会消失,默认值:3000。
|
|
33
36
|
* @property {number} duration 显隐动画时长,单位 ms,默认值:300。
|
|
34
37
|
* @property {boolean} statusBar 是否包含状态栏,自定义导航栏时应设为 `true`,默认值:false。
|
|
38
|
+
* @event {(visible: boolean) => void} update 通知框显隐时触发
|
|
39
|
+
* @event {(event: any) => void} click 点击通知框时触发
|
|
40
|
+
* @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
|
|
41
|
+
* @event {() => void} before-enter 入场动画开始前触发
|
|
42
|
+
* @event {() => void} enter 入场动画开始时触发
|
|
43
|
+
* @event {() => void} after-enter 入场动画结束时触发
|
|
44
|
+
* @event {() => void} enter-cancelled 入场动画取消时触发
|
|
45
|
+
* @event {() => void} before-leave 退场动画开始前触发
|
|
46
|
+
* @event {() => void} leave 退场动画开始时触发
|
|
47
|
+
* @event {() => void} after-leave 退场动画结束时触发
|
|
48
|
+
* @event {() => void} leave-cancelled 退场动画取消时触发
|
|
35
49
|
*/
|
|
36
50
|
export default _defineComponent({
|
|
37
51
|
components: {
|
|
@@ -58,7 +72,7 @@ export default _defineComponent({
|
|
|
58
72
|
duration: { type: Number, required: false },
|
|
59
73
|
statusBar: { type: Boolean, required: false }
|
|
60
74
|
}, defaultNotifyProps),
|
|
61
|
-
emits: ["click", "update:visible"],
|
|
75
|
+
emits: ["click", "update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
|
|
62
76
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
63
77
|
const props = __props;
|
|
64
78
|
const emit = __emit;
|
|
@@ -96,6 +110,13 @@ export default _defineComponent({
|
|
|
96
110
|
}
|
|
97
111
|
}
|
|
98
112
|
);
|
|
113
|
+
const onVisibleHook = (name) => {
|
|
114
|
+
emit("visible-hook", name);
|
|
115
|
+
emit(name);
|
|
116
|
+
};
|
|
117
|
+
const onClick = (event) => {
|
|
118
|
+
emit("click", event);
|
|
119
|
+
};
|
|
99
120
|
__expose({
|
|
100
121
|
reHideLater,
|
|
101
122
|
cancelHide
|
|
@@ -117,7 +138,7 @@ export default _defineComponent({
|
|
|
117
138
|
props.rootStyle
|
|
118
139
|
);
|
|
119
140
|
});
|
|
120
|
-
const __returned__ = { props, emit, bem, effect, innerVisible, hideLater, cancelHide, reHideLater, notifyClass, notifyStyle, SarPopup, SarStatusBar };
|
|
141
|
+
const __returned__ = { props, emit, bem, effect, innerVisible, hideLater, cancelHide, reHideLater, onVisibleHook, onClick, notifyClass, notifyStyle, SarPopup, SarStatusBar };
|
|
121
142
|
return __returned__;
|
|
122
143
|
}
|
|
123
144
|
});
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { type NotifyProps } from '../notify/common';
|
|
2
|
-
|
|
1
|
+
import { type NotifyEmits, type NotifyProps } from '../notify/common';
|
|
2
|
+
import { type TransitionHookCallbacks } from '../popup/common';
|
|
3
|
+
export interface NotifyAgentProps extends NotifyProps, TransitionHookCallbacks {
|
|
3
4
|
id?: string;
|
|
4
5
|
}
|
|
5
6
|
export declare const defaultNotifyAgentProps: () => {
|
|
@@ -9,6 +10,8 @@ export declare const defaultNotifyAgentProps: () => {
|
|
|
9
10
|
duration: number;
|
|
10
11
|
timeout: number;
|
|
11
12
|
};
|
|
13
|
+
export interface NotifyAgentEmits extends NotifyEmits {
|
|
14
|
+
}
|
|
12
15
|
export declare const imperativeName = "notify";
|
|
13
16
|
export interface NotifyImperative {
|
|
14
17
|
show(newProps: Record<string, any>): void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defaultNotifyProps } from '../notify/common';
|
|
1
|
+
import { defaultNotifyProps, } from '../notify/common';
|
|
2
2
|
import { defaultConfig } from '../config';
|
|
3
|
-
import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use
|
|
3
|
+
import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use';
|
|
4
4
|
export const defaultNotifyAgentProps = () => ({
|
|
5
5
|
...defaultNotifyProps,
|
|
6
6
|
...defaultConfig.notifyAgent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { type NotifyAgentProps, type NotifyOptions, notify } from './common';
|
|
1
|
+
export { type NotifyAgentProps, type NotifyOptions, type NotifyAgentEmits, notify, } from './common';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { notify } from './common';
|
|
1
|
+
export { notify, } from './common';
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { type NotifyAgentProps } from './common';
|
|
2
|
-
declare const _default: import("vue").DefineComponent<NotifyAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
2
|
+
declare const _default: import("vue").DefineComponent<NotifyAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
3
|
+
[x: string]: any;
|
|
4
|
+
} & {
|
|
5
|
+
[x: string]: any;
|
|
6
|
+
}, string, import("vue").PublicProps, Readonly<NotifyAgentProps> & Readonly<{
|
|
7
|
+
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
8
|
+
}>, {
|
|
3
9
|
timeout: number;
|
|
4
10
|
type: "primary" | "success" | "warning" | "error";
|
|
5
11
|
id: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<sar-notify
|
|
3
3
|
ref="elRef"
|
|
4
|
-
|
|
4
|
+
:visible="innerProps.visible"
|
|
5
5
|
:root-style="innerProps.rootStyle"
|
|
6
6
|
:root-class="innerProps.rootClass"
|
|
7
7
|
:type="innerProps.type"
|
|
@@ -12,6 +12,17 @@
|
|
|
12
12
|
:timeout="innerProps.timeout"
|
|
13
13
|
:duration="innerProps.duration"
|
|
14
14
|
:status-bar="innerProps.statusBar"
|
|
15
|
+
@click="onClick"
|
|
16
|
+
@update:visible="onUpdateVisible"
|
|
17
|
+
@visible-hook="onVisibleHook"
|
|
18
|
+
@before-enter="onBeforeEnter"
|
|
19
|
+
@enter="onEnter"
|
|
20
|
+
@after-enter="onAfterEnter"
|
|
21
|
+
@enter-cancelled="onEnterCancelled"
|
|
22
|
+
@before-leave="onBeforeLeave"
|
|
23
|
+
@leave="onLeave"
|
|
24
|
+
@after-leave="onAfterLeave"
|
|
25
|
+
@leave-cancelled="onLeaveCancelled"
|
|
15
26
|
/>
|
|
16
27
|
</template>
|
|
17
28
|
|
|
@@ -23,7 +34,7 @@ import {
|
|
|
23
34
|
imperativeName,
|
|
24
35
|
defaultNotifyAgentProps
|
|
25
36
|
} from "./common";
|
|
26
|
-
import { useImperative } from "../../use
|
|
37
|
+
import { useImperative } from "../../use";
|
|
27
38
|
/**
|
|
28
39
|
* @property {'primary' | 'success' | 'warning' | 'error'} type 加载类型,默认值:'primary'。
|
|
29
40
|
* @property {string} message 通知内容,默认值:-。
|
|
@@ -35,6 +46,26 @@ import { useImperative } from "../../use/useImperative";
|
|
|
35
46
|
* @property {number} duration 显隐动画时长,单位 ms,默认值:300。
|
|
36
47
|
* @property {boolean} statusBar 是否包含状态栏,自定义导航栏时应设为 `true`,默认值:false。
|
|
37
48
|
* @property {string} id 通知组件的 id,默认值:'notify'。
|
|
49
|
+
* @property {(name: TransitionHookName) => void} onVisibleHook 入场/退场动画状态改变时调用,默认值:undefined。
|
|
50
|
+
* @property {() => void} onBeforeEnter 入场动画开始前调用,默认值:undefined。
|
|
51
|
+
* @property {() => void} onEnter 入场动画开始时调用,默认值:undefined。
|
|
52
|
+
* @property {() => void} onAfterEnter 入场动画结束时调用,默认值:undefined。
|
|
53
|
+
* @property {() => void} onEnterCancelled 入场动画取消时调用,默认值:undefined。
|
|
54
|
+
* @property {() => void} onBeforeLeave 退场动画开始前调用,默认值:undefined。
|
|
55
|
+
* @property {() => void} onLeave 退场动画开始时调用,默认值:undefined。
|
|
56
|
+
* @property {() => void} onAfterLeave 退场动画结束时调用,默认值:undefined。
|
|
57
|
+
* @property {() => void} onLeaveCancelled 退场动画取消时调用,默认值:undefined。
|
|
58
|
+
* @event {(visible: boolean) => void} update 通知框显隐时触发
|
|
59
|
+
* @event {(event: any) => void} click 点击通知框时触发
|
|
60
|
+
* @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
|
|
61
|
+
* @event {() => void} before-enter 入场动画开始前触发
|
|
62
|
+
* @event {() => void} enter 入场动画开始时触发
|
|
63
|
+
* @event {() => void} after-enter 入场动画结束时触发
|
|
64
|
+
* @event {() => void} enter-cancelled 入场动画取消时触发
|
|
65
|
+
* @event {() => void} before-leave 退场动画开始前触发
|
|
66
|
+
* @event {() => void} leave 退场动画开始时触发
|
|
67
|
+
* @event {() => void} after-leave 退场动画结束时触发
|
|
68
|
+
* @event {() => void} leave-cancelled 退场动画取消时触发
|
|
38
69
|
*/
|
|
39
70
|
export default _defineComponent({
|
|
40
71
|
components: {
|
|
@@ -59,11 +90,22 @@ export default _defineComponent({
|
|
|
59
90
|
position: { type: String, required: false },
|
|
60
91
|
timeout: { type: Number, required: false },
|
|
61
92
|
duration: { type: Number, required: false },
|
|
62
|
-
statusBar: { type: Boolean, required: false }
|
|
93
|
+
statusBar: { type: Boolean, required: false },
|
|
94
|
+
onVisibleHook: { type: Function, required: false },
|
|
95
|
+
onBeforeEnter: { type: Function, required: false },
|
|
96
|
+
onEnter: { type: Function, required: false },
|
|
97
|
+
onAfterEnter: { type: Function, required: false },
|
|
98
|
+
onEnterCancelled: { type: Function, required: false },
|
|
99
|
+
onBeforeLeave: { type: Function, required: false },
|
|
100
|
+
onLeave: { type: Function, required: false },
|
|
101
|
+
onAfterLeave: { type: Function, required: false },
|
|
102
|
+
onLeaveCancelled: { type: Function, required: false }
|
|
63
103
|
}, defaultNotifyAgentProps()),
|
|
64
|
-
|
|
104
|
+
emits: ["click", "update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
|
|
105
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
65
106
|
__expose();
|
|
66
107
|
const props = __props;
|
|
108
|
+
const emit = __emit;
|
|
67
109
|
const innerProps = ref({ ...props });
|
|
68
110
|
const elRef = ref();
|
|
69
111
|
const imperative = {
|
|
@@ -83,12 +125,55 @@ export default _defineComponent({
|
|
|
83
125
|
elRef.value?.cancelHide();
|
|
84
126
|
}
|
|
85
127
|
};
|
|
128
|
+
const onClick = (event) => {
|
|
129
|
+
emit("click", event);
|
|
130
|
+
};
|
|
131
|
+
const onUpdateVisible = (visible) => {
|
|
132
|
+
innerProps.value.visible = visible;
|
|
133
|
+
emit("update:visible", visible);
|
|
134
|
+
};
|
|
135
|
+
const onVisibleHook = (name) => {
|
|
136
|
+
emit("visible-hook", name);
|
|
137
|
+
innerProps.value.onVisibleHook?.(name);
|
|
138
|
+
};
|
|
139
|
+
const onBeforeEnter = () => {
|
|
140
|
+
emit("before-enter");
|
|
141
|
+
innerProps.value.onBeforeEnter?.();
|
|
142
|
+
};
|
|
143
|
+
const onEnter = () => {
|
|
144
|
+
emit("enter");
|
|
145
|
+
innerProps.value.onEnter?.();
|
|
146
|
+
};
|
|
147
|
+
const onAfterEnter = () => {
|
|
148
|
+
emit("after-enter");
|
|
149
|
+
innerProps.value.onAfterEnter?.();
|
|
150
|
+
};
|
|
151
|
+
const onEnterCancelled = () => {
|
|
152
|
+
emit("enter-cancelled");
|
|
153
|
+
innerProps.value.onEnterCancelled?.();
|
|
154
|
+
};
|
|
155
|
+
const onBeforeLeave = () => {
|
|
156
|
+
emit("before-leave");
|
|
157
|
+
innerProps.value.onBeforeLeave?.();
|
|
158
|
+
};
|
|
159
|
+
const onLeave = () => {
|
|
160
|
+
emit("leave");
|
|
161
|
+
innerProps.value.onLeave?.();
|
|
162
|
+
};
|
|
163
|
+
const onAfterLeave = () => {
|
|
164
|
+
emit("after-leave");
|
|
165
|
+
innerProps.value.onAfterLeave?.();
|
|
166
|
+
};
|
|
167
|
+
const onLeaveCancelled = () => {
|
|
168
|
+
emit("leave-cancelled");
|
|
169
|
+
innerProps.value.onLeaveCancelled?.();
|
|
170
|
+
};
|
|
86
171
|
useImperative(
|
|
87
172
|
imperativeName,
|
|
88
173
|
imperative,
|
|
89
174
|
computed(() => innerProps.value.id)
|
|
90
175
|
);
|
|
91
|
-
const __returned__ = { props, innerProps, elRef, imperative, SarNotify };
|
|
176
|
+
const __returned__ = { props, emit, innerProps, elRef, imperative, onClick, onUpdateVisible, onVisibleHook, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, SarNotify };
|
|
92
177
|
return __returned__;
|
|
93
178
|
}
|
|
94
179
|
});
|
|
@@ -32,6 +32,17 @@ export interface TransitionHookEmits {
|
|
|
32
32
|
(e: 'leave-cancelled'): void;
|
|
33
33
|
(e: 'visible-hook', name: TransitionHookName): void;
|
|
34
34
|
}
|
|
35
|
+
export interface TransitionHookCallbacks {
|
|
36
|
+
onVisibleHook?: (name: TransitionHookName) => void;
|
|
37
|
+
onBeforeEnter?: () => void;
|
|
38
|
+
onEnter?: () => void;
|
|
39
|
+
onAfterEnter?: () => void;
|
|
40
|
+
onEnterCancelled?: () => void;
|
|
41
|
+
onBeforeLeave?: () => void;
|
|
42
|
+
onLeave?: () => void;
|
|
43
|
+
onAfterLeave?: () => void;
|
|
44
|
+
onLeaveCancelled?: () => void;
|
|
45
|
+
}
|
|
35
46
|
export interface PopupEmits extends TransitionHookEmits {
|
|
36
47
|
(e: 'overlay-click', event: any): void;
|
|
37
48
|
}
|
|
@@ -60,17 +60,39 @@ import { toast } from 'sard-uniapp'
|
|
|
60
60
|
|
|
61
61
|
### ToastEmits
|
|
62
62
|
|
|
63
|
-
| 事件
|
|
64
|
-
|
|
|
65
|
-
| update:visible
|
|
63
|
+
| 事件 | 描述 | 类型 |
|
|
64
|
+
| ---------------------------------- | --------------------------- | ---------------------------------- |
|
|
65
|
+
| update:visible | 提示框显隐时触发 | (visible: boolean) => void |
|
|
66
|
+
| visible-hook <sup>1.20.2+</sup> | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void |
|
|
67
|
+
| before-enter <sup>1.20.2+</sup> | 入场动画开始前触发 | () => void |
|
|
68
|
+
| enter <sup>1.20.2+</sup> | 入场动画开始时触发 | () => void |
|
|
69
|
+
| after-enter <sup>1.20.2+</sup> | 入场动画结束时触发 | () => void |
|
|
70
|
+
| enter-cancelled <sup>1.20.2+</sup> | 入场动画取消时触发 | () => void |
|
|
71
|
+
| before-leave <sup>1.20.2+</sup> | 退场动画开始前触发 | () => void |
|
|
72
|
+
| leave <sup>1.20.2+</sup> | 退场动画开始时触发 | () => void |
|
|
73
|
+
| after-leave <sup>1.20.2+</sup> | 退场动画结束时触发 | () => void |
|
|
74
|
+
| leave-cancelled <sup>1.20.2+</sup> | 退场动画取消时触发 | () => void |
|
|
66
75
|
|
|
67
76
|
### ToastAgentProps / ToastOptions
|
|
68
77
|
|
|
69
78
|
继承 [`ToastProps`](#ToastProps) 并有以下额外属性。
|
|
70
79
|
|
|
71
|
-
| 属性
|
|
72
|
-
|
|
|
73
|
-
| id
|
|
80
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
81
|
+
| ----------------------------------- | --------------------------- | ---------------------------------- | ------- |
|
|
82
|
+
| id | 提示组件的 id | string | 'toast' |
|
|
83
|
+
| onVisibleHook <sup>1.20.2+</sup> | 入场/退场动画状态改变时调用 | (name: TransitionHookName) => void |
|
|
84
|
+
| onBeforeEnter <sup>1.20.2+</sup> | 入场动画开始前调用 | () => void |
|
|
85
|
+
| onEnter <sup>1.20.2+</sup> | 入场动画开始时调用 | () => void |
|
|
86
|
+
| onAfterEnter <sup>1.20.2+</sup> | 入场动画结束时调用 | () => void |
|
|
87
|
+
| onEnterCancelled <sup>1.20.2+</sup> | 入场动画取消时调用 | () => void |
|
|
88
|
+
| onBeforeLeave <sup>1.20.2+</sup> | 退场动画开始前调用 | () => void |
|
|
89
|
+
| onLeave <sup>1.20.2+</sup> | 退场动画开始时调用 | () => void |
|
|
90
|
+
| onAfterLeave <sup>1.20.2+</sup> | 退场动画结束时调用 | () => void |
|
|
91
|
+
| onLeaveCancelled <sup>1.20.2+</sup> | 退场动画取消时调用 | () => void |
|
|
92
|
+
|
|
93
|
+
### ToastAgentEmits <sup>1.20.2+</sup>
|
|
94
|
+
|
|
95
|
+
继承 [`ToastEmits`](#ToastEmits)。
|
|
74
96
|
|
|
75
97
|
### 命令式方法
|
|
76
98
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type StyleValue } from 'vue';
|
|
2
|
+
import { type TransitionHookEmits } from '../popup/common';
|
|
2
3
|
export interface ToastProps {
|
|
3
4
|
rootStyle?: StyleValue;
|
|
4
5
|
rootClass?: string;
|
|
@@ -18,7 +19,7 @@ export declare const defaultToastProps: {
|
|
|
18
19
|
timeout: number;
|
|
19
20
|
duration: number;
|
|
20
21
|
};
|
|
21
|
-
export interface ToastEmits {
|
|
22
|
+
export interface ToastEmits extends TransitionHookEmits {
|
|
22
23
|
(e: 'update:visible', visible: boolean): void;
|
|
23
24
|
}
|
|
24
25
|
export interface ToastExpose {
|
|
@@ -2,10 +2,12 @@ import { type ToastProps } from './common';
|
|
|
2
2
|
declare const _default: import("vue").DefineComponent<ToastProps, {
|
|
3
3
|
reHideLater: () => void;
|
|
4
4
|
cancelHide: () => void;
|
|
5
|
-
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
6
|
-
|
|
5
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
6
|
+
[x: string]: any;
|
|
7
|
+
} & {
|
|
8
|
+
[x: string]: any;
|
|
7
9
|
}, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{
|
|
8
|
-
|
|
10
|
+
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
9
11
|
}>, {
|
|
10
12
|
timeout: number;
|
|
11
13
|
type: "text" | "loading" | "success" | "fail";
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
:transparent="transparent"
|
|
7
7
|
:root-style="popupStyle"
|
|
8
8
|
effect="fade"
|
|
9
|
+
@visible-hook="onVisibleHook"
|
|
9
10
|
>
|
|
10
11
|
<view :class="toastClass" :style="toastStyle">
|
|
11
12
|
<view v-if="type !== 'text'" :class="iconClass">
|
|
@@ -44,7 +45,16 @@ export const mapIdToast = {};
|
|
|
44
45
|
* @property {boolean} transparent 使背景透明,默认值:false。
|
|
45
46
|
* @property {number} timeout 提示的延迟时间,单位 ms,默认值:1500。
|
|
46
47
|
* @property {number} duration 显隐动画时长,单位 ms,默认值:300。
|
|
47
|
-
* @event {(visible: boolean) => void} update
|
|
48
|
+
* @event {(visible: boolean) => void} update 提示框显隐时触发
|
|
49
|
+
* @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
|
|
50
|
+
* @event {() => void} before-enter 入场动画开始前触发
|
|
51
|
+
* @event {() => void} enter 入场动画开始时触发
|
|
52
|
+
* @event {() => void} after-enter 入场动画结束时触发
|
|
53
|
+
* @event {() => void} enter-cancelled 入场动画取消时触发
|
|
54
|
+
* @event {() => void} before-leave 退场动画开始前触发
|
|
55
|
+
* @event {() => void} leave 退场动画开始时触发
|
|
56
|
+
* @event {() => void} after-leave 退场动画结束时触发
|
|
57
|
+
* @event {() => void} leave-cancelled 退场动画取消时触发
|
|
48
58
|
*/
|
|
49
59
|
export default _defineComponent({
|
|
50
60
|
components: {
|
|
@@ -66,7 +76,7 @@ export default _defineComponent({
|
|
|
66
76
|
timeout: { type: Number, required: false },
|
|
67
77
|
duration: { type: Number, required: false }
|
|
68
78
|
}, defaultToastProps),
|
|
69
|
-
emits: ["update:visible"],
|
|
79
|
+
emits: ["update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
|
|
70
80
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
71
81
|
const props = __props;
|
|
72
82
|
const emit = __emit;
|
|
@@ -98,6 +108,10 @@ export default _defineComponent({
|
|
|
98
108
|
}
|
|
99
109
|
}
|
|
100
110
|
);
|
|
111
|
+
const onVisibleHook = (name) => {
|
|
112
|
+
emit("visible-hook", name);
|
|
113
|
+
emit(name);
|
|
114
|
+
};
|
|
101
115
|
__expose({
|
|
102
116
|
reHideLater,
|
|
103
117
|
cancelHide
|
|
@@ -138,7 +152,7 @@ export default _defineComponent({
|
|
|
138
152
|
bem.em("icon", "loading", props.type === "loading")
|
|
139
153
|
);
|
|
140
154
|
});
|
|
141
|
-
const __returned__ = { mapIdToast, props, emit, bem, innerVisible, hideLater, cancelHide, reHideLater, toastClass, toastStyle, popupStyle, iconClass, SarPopup, SarLoading, SarIcon };
|
|
155
|
+
const __returned__ = { mapIdToast, props, emit, bem, innerVisible, hideLater, cancelHide, reHideLater, onVisibleHook, toastClass, toastStyle, popupStyle, iconClass, SarPopup, SarLoading, SarIcon };
|
|
142
156
|
return __returned__;
|
|
143
157
|
}
|
|
144
158
|
});
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
|
|
1
|
+
import { type TransitionHookCallbacks } from '../popup/common';
|
|
2
|
+
import { type ToastEmits, type ToastProps } from '../toast/common';
|
|
3
|
+
export interface ToastAgentProps extends ToastProps, TransitionHookCallbacks {
|
|
3
4
|
id?: string;
|
|
4
5
|
}
|
|
5
6
|
export declare const defaultToastAgentProps: () => {
|
|
@@ -10,6 +11,8 @@ export declare const defaultToastAgentProps: () => {
|
|
|
10
11
|
timeout: number;
|
|
11
12
|
duration: number;
|
|
12
13
|
};
|
|
14
|
+
export interface ToastAgentEmits extends ToastEmits {
|
|
15
|
+
}
|
|
13
16
|
export declare const imperativeName = "toast";
|
|
14
17
|
export interface ToastImperative {
|
|
15
18
|
show(newProps: Record<string, any>): void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use
|
|
1
|
+
import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use';
|
|
2
2
|
import { defaultConfig } from '../config';
|
|
3
|
-
import { defaultToastProps } from '../toast/common';
|
|
3
|
+
import { defaultToastProps, } from '../toast/common';
|
|
4
4
|
export const defaultToastAgentProps = () => ({
|
|
5
5
|
...defaultToastProps,
|
|
6
6
|
...defaultConfig.toastAgent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { type ToastAgentProps, type ToastOptions, toast } from './common';
|
|
1
|
+
export { type ToastAgentProps, type ToastOptions, type ToastAgentEmits, toast, } from './common';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { toast } from './common';
|
|
1
|
+
export { toast, } from './common';
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { type ToastAgentProps } from './common';
|
|
2
|
-
declare const _default: import("vue").DefineComponent<ToastAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
2
|
+
declare const _default: import("vue").DefineComponent<ToastAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
3
|
+
[x: string]: any;
|
|
4
|
+
} & {
|
|
5
|
+
[x: string]: any;
|
|
6
|
+
}, string, import("vue").PublicProps, Readonly<ToastAgentProps> & Readonly<{
|
|
7
|
+
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
8
|
+
}>, {
|
|
3
9
|
timeout: number;
|
|
4
10
|
type: "text" | "loading" | "success" | "fail";
|
|
5
11
|
id: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<sar-toast
|
|
3
3
|
ref="elRef"
|
|
4
|
-
|
|
4
|
+
:visible="innerProps.visible"
|
|
5
5
|
:root-style="innerProps.rootStyle"
|
|
6
6
|
:root-class="innerProps.rootClass"
|
|
7
7
|
:type="innerProps.type"
|
|
@@ -11,6 +11,16 @@
|
|
|
11
11
|
:transparent="innerProps.transparent"
|
|
12
12
|
:timeout="innerProps.timeout"
|
|
13
13
|
:duration="innerProps.duration"
|
|
14
|
+
@update:visible="onUpdateVisible"
|
|
15
|
+
@visible-hook="onVisibleHook"
|
|
16
|
+
@before-enter="onBeforeEnter"
|
|
17
|
+
@enter="onEnter"
|
|
18
|
+
@after-enter="onAfterEnter"
|
|
19
|
+
@enter-cancelled="onEnterCancelled"
|
|
20
|
+
@before-leave="onBeforeLeave"
|
|
21
|
+
@leave="onLeave"
|
|
22
|
+
@after-leave="onAfterLeave"
|
|
23
|
+
@leave-cancelled="onLeaveCancelled"
|
|
14
24
|
/>
|
|
15
25
|
</template>
|
|
16
26
|
|
|
@@ -22,7 +32,7 @@ import {
|
|
|
22
32
|
imperativeName,
|
|
23
33
|
defaultToastAgentProps
|
|
24
34
|
} from "./common";
|
|
25
|
-
import { useImperative } from "../../use
|
|
35
|
+
import { useImperative } from "../../use";
|
|
26
36
|
/**
|
|
27
37
|
* @property {'text' | 'loading' | 'success' | 'fail'} type 提示框类型,默认值:'text'。
|
|
28
38
|
* @property {string | number} title 标题,默认值:-。
|
|
@@ -33,6 +43,25 @@ import { useImperative } from "../../use/useImperative";
|
|
|
33
43
|
* @property {number} timeout 提示的延迟时间,单位 ms,默认值:1500。
|
|
34
44
|
* @property {number} duration 显隐动画时长,单位 ms,默认值:300。
|
|
35
45
|
* @property {string} id 提示组件的 id,默认值:'toast'。
|
|
46
|
+
* @property {(name: TransitionHookName) => void} onVisibleHook 入场/退场动画状态改变时调用,默认值:undefined。
|
|
47
|
+
* @property {() => void} onBeforeEnter 入场动画开始前调用,默认值:undefined。
|
|
48
|
+
* @property {() => void} onEnter 入场动画开始时调用,默认值:undefined。
|
|
49
|
+
* @property {() => void} onAfterEnter 入场动画结束时调用,默认值:undefined。
|
|
50
|
+
* @property {() => void} onEnterCancelled 入场动画取消时调用,默认值:undefined。
|
|
51
|
+
* @property {() => void} onBeforeLeave 退场动画开始前调用,默认值:undefined。
|
|
52
|
+
* @property {() => void} onLeave 退场动画开始时调用,默认值:undefined。
|
|
53
|
+
* @property {() => void} onAfterLeave 退场动画结束时调用,默认值:undefined。
|
|
54
|
+
* @property {() => void} onLeaveCancelled 退场动画取消时调用,默认值:undefined。
|
|
55
|
+
* @event {(visible: boolean) => void} update 提示框显隐时触发
|
|
56
|
+
* @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
|
|
57
|
+
* @event {() => void} before-enter 入场动画开始前触发
|
|
58
|
+
* @event {() => void} enter 入场动画开始时触发
|
|
59
|
+
* @event {() => void} after-enter 入场动画结束时触发
|
|
60
|
+
* @event {() => void} enter-cancelled 入场动画取消时触发
|
|
61
|
+
* @event {() => void} before-leave 退场动画开始前触发
|
|
62
|
+
* @event {() => void} leave 退场动画开始时触发
|
|
63
|
+
* @event {() => void} after-leave 退场动画结束时触发
|
|
64
|
+
* @event {() => void} leave-cancelled 退场动画取消时触发
|
|
36
65
|
*/
|
|
37
66
|
export default _defineComponent({
|
|
38
67
|
components: {
|
|
@@ -56,11 +85,22 @@ export default _defineComponent({
|
|
|
56
85
|
overlay: { type: Boolean, required: false },
|
|
57
86
|
transparent: { type: Boolean, required: false },
|
|
58
87
|
timeout: { type: Number, required: false },
|
|
59
|
-
duration: { type: Number, required: false }
|
|
88
|
+
duration: { type: Number, required: false },
|
|
89
|
+
onVisibleHook: { type: Function, required: false },
|
|
90
|
+
onBeforeEnter: { type: Function, required: false },
|
|
91
|
+
onEnter: { type: Function, required: false },
|
|
92
|
+
onAfterEnter: { type: Function, required: false },
|
|
93
|
+
onEnterCancelled: { type: Function, required: false },
|
|
94
|
+
onBeforeLeave: { type: Function, required: false },
|
|
95
|
+
onLeave: { type: Function, required: false },
|
|
96
|
+
onAfterLeave: { type: Function, required: false },
|
|
97
|
+
onLeaveCancelled: { type: Function, required: false }
|
|
60
98
|
}, defaultToastAgentProps()),
|
|
61
|
-
|
|
99
|
+
emits: ["update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
|
|
100
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
62
101
|
__expose();
|
|
63
102
|
const props = __props;
|
|
103
|
+
const emit = __emit;
|
|
64
104
|
const innerProps = ref({ ...props });
|
|
65
105
|
const elRef = ref();
|
|
66
106
|
const imperative = {
|
|
@@ -80,12 +120,52 @@ export default _defineComponent({
|
|
|
80
120
|
elRef.value?.cancelHide();
|
|
81
121
|
}
|
|
82
122
|
};
|
|
123
|
+
const onUpdateVisible = (visible) => {
|
|
124
|
+
innerProps.value.visible = visible;
|
|
125
|
+
emit("update:visible", visible);
|
|
126
|
+
};
|
|
127
|
+
const onVisibleHook = (name) => {
|
|
128
|
+
emit("visible-hook", name);
|
|
129
|
+
innerProps.value.onVisibleHook?.(name);
|
|
130
|
+
};
|
|
131
|
+
const onBeforeEnter = () => {
|
|
132
|
+
emit("before-enter");
|
|
133
|
+
innerProps.value.onBeforeEnter?.();
|
|
134
|
+
};
|
|
135
|
+
const onEnter = () => {
|
|
136
|
+
emit("enter");
|
|
137
|
+
innerProps.value.onEnter?.();
|
|
138
|
+
};
|
|
139
|
+
const onAfterEnter = () => {
|
|
140
|
+
emit("after-enter");
|
|
141
|
+
innerProps.value.onAfterEnter?.();
|
|
142
|
+
};
|
|
143
|
+
const onEnterCancelled = () => {
|
|
144
|
+
emit("enter-cancelled");
|
|
145
|
+
innerProps.value.onEnterCancelled?.();
|
|
146
|
+
};
|
|
147
|
+
const onBeforeLeave = () => {
|
|
148
|
+
emit("before-leave");
|
|
149
|
+
innerProps.value.onBeforeLeave?.();
|
|
150
|
+
};
|
|
151
|
+
const onLeave = () => {
|
|
152
|
+
emit("leave");
|
|
153
|
+
innerProps.value.onLeave?.();
|
|
154
|
+
};
|
|
155
|
+
const onAfterLeave = () => {
|
|
156
|
+
emit("after-leave");
|
|
157
|
+
innerProps.value.onAfterLeave?.();
|
|
158
|
+
};
|
|
159
|
+
const onLeaveCancelled = () => {
|
|
160
|
+
emit("leave-cancelled");
|
|
161
|
+
innerProps.value.onLeaveCancelled?.();
|
|
162
|
+
};
|
|
83
163
|
useImperative(
|
|
84
164
|
imperativeName,
|
|
85
165
|
imperative,
|
|
86
166
|
computed(() => innerProps.value.id)
|
|
87
167
|
);
|
|
88
|
-
const __returned__ = { props, innerProps, elRef, imperative, SarToast };
|
|
168
|
+
const __returned__ = { props, emit, innerProps, elRef, imperative, onUpdateVisible, onVisibleHook, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, SarToast };
|
|
89
169
|
return __returned__;
|
|
90
170
|
}
|
|
91
171
|
});
|