Skip to content

Commit d885db5

Browse files
wxsmswxsms
committed
feat!: drop support for browsers that do not support Promise. because Vue 3 does not support IE anymore.
1 parent b452445 commit d885db5

File tree

10 files changed

+65
-221
lines changed

10 files changed

+65
-221
lines changed

‎docs/components/modal.md‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -91,37 +91,37 @@ Otherwise, you can simply nest them logically, without any extra settings:
9191

9292
#### Props
9393

94-
Name | Type | Default | Required | Description
95-
---------------- | ---------- | -------- | -------- | -----------------------
96-
`v-model` | Boolean | false | ✔ | Show / hide the modal.
97-
`title` | String | | | The modal title (will be override if title slot exist).
98-
`size` | String | | | The alternative modal size. Support `lg` / `sm`.
99-
`backdrop` | Boolean | true | | Dismiss the modal by backdrop click.
100-
`footer` | Boolean | true | | Show modal footer.
101-
`header` | Boolean | true | | Show modal header.
102-
`dismiss-btn` | Boolean | true | | Display the dismiss button in header.
103-
`cancel-text` | String | | | Override the text of cancel button.
104-
`cancel-type` | String | default | | Button type of cancel button.
105-
`ok-text` | String | | | Override the text of ok button.
106-
`ok-type` | String | primary | | Button type of ok button.
107-
`transition` | Number | 150 | | Transition time of the modal, set to 0 to disable animation.
108-
`auto-focus` | Boolean | false | | Focus on the action button that has `data-action="auto-focus"` attribute after modal open, by default it is the OK button.
109-
`keyboard` | Boolean | true | | Close the modal after `esc` key pressed.
110-
`append-to-body` | Boolean | false | | Append the modal element to `<body>`.
111-
`before-close` | Function | | | Call with the `msg` param, return `false` to interrupt the modal hiding process. Promise supported since 0.34.1.
94+
| Name | Type | Default | Required | Description |
95+
|------------------|----------|---------|----------|---------------------------------------------------------------------------------------------------------------|
96+
| `v-model` | Boolean | false | &#10004; | Show / hide the modal. |
97+
| `title` | String | | | The modal title (will be override if title slot exist). |
98+
| `size` | String | | | The alternative modal size. Support `lg` / `sm`. |
99+
| `backdrop` | Boolean | true | | Dismiss the modal by backdrop click. |
100+
| `footer` | Boolean | true | | Show modal footer. |
101+
| `header` | Boolean | true | | Show modal header. |
102+
| `dismiss-btn` | Boolean | true | | Display the dismiss button in header. |
103+
| `cancel-text` | String | | | Override the text of cancel button. |
104+
| `cancel-type` | String | default | | Button type of cancel button. |
105+
| `ok-text` | String | | | Override the text of ok button. |
106+
| `ok-type` | String | primary | | Button type of ok button. |
107+
| `transition` | Number | 150 | | Transition time of the modal, set to 0 to disable animation. |
108+
| `auto-focus` | Boolean | false | | Focus on the button that has `data-action="auto-focus"` attribute after modal open, the OK button by default. |
109+
| `keyboard` | Boolean | true | | Close the modal after `esc` key pressed. |
110+
| `append-to-body` | Boolean | false | | Append the modal element to `<body>`. |
111+
| `before-close` | Function | | | Call with the `msg` param, return `false` to interrupt the modal hiding process. Promise supported. |
112112

113113
#### Slots
114114

115-
Name | Description
116-
--------- | -----------------------
117-
`title` | Replace as the modal title.
118-
`default` | Replace as the modal body.
119-
`header` | Replace as the modal header. Note: this slot will override `title` slot since it is a completely replacement of header.
120-
`footer` | Replace as the modal footer.
115+
| Name | Description |
116+
|-----------|-------------------------------------------------------------------------------------------------------------------------|
117+
| `title` | Replace as the modal title. |
118+
| `default` | Replace as the modal body. |
119+
| `header` | Replace as the modal header. Note: this slot will override `title` slot since it is a completely replacement of header. |
120+
| `footer` | Replace as the modal footer. |
121121

122122
#### Events
123123

124-
Name | Params | Description
125-
----------- | ------ | ---------------
126-
`show` | | Fire after modal show.
127-
`hide` | msg | Fire after modal dismiss with message (if exist).
124+
| Name | Params | Description |
125+
|--------|--------|---------------------------------------------------|
126+
| `show` | | Fire after modal show. |
127+
| `hide` | msg | Fire after modal dismiss with message (if exist). |

‎src/components/messagebox/MessageBox.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<btn
3333
:type="okType"
3434
:data-action="autoFocus === 'ok' ? 'auto-focus' : ''"
35-
@click="toggle(false, 'ok')"
35+
@click="hide('ok')"
3636
v-text="okBtnText"
3737
/>
3838
</template>
@@ -42,29 +42,29 @@
4242
v-if="type === TYPES.CONFIRM"
4343
:type="okType"
4444
:data-action="autoFocus === 'ok' ? 'auto-focus' : ''"
45-
@click="toggle(false, 'ok')"
45+
@click="hide('ok')"
4646
v-text="okBtnText"
4747
/>
4848
<btn v-else :type="okType" @click="validate" v-text="okBtnText" />
4949
<btn
5050
:type="cancelType"
5151
:data-action="autoFocus === 'cancel' ? 'auto-focus' : ''"
52-
@click="toggle(false, 'cancel')"
52+
@click="hide('cancel')"
5353
v-text="cancelBtnText"
5454
/>
5555
</template>
5656
<template v-else>
5757
<btn
5858
:type="cancelType"
5959
:data-action="autoFocus === 'cancel' ? 'auto-focus' : ''"
60-
@click="toggle(false, 'cancel')"
60+
@click="hide('cancel')"
6161
v-text="cancelBtnText"
6262
/>
6363
<btn
6464
v-if="type === TYPES.CONFIRM"
6565
:type="okType"
6666
:data-action="autoFocus === 'ok' ? 'auto-focus' : ''"
67-
@click="toggle(false, 'ok')"
67+
@click="hide('ok')"
6868
v-text="okBtnText"
6969
/>
7070
<btn v-else :type="okType" @click="validate" v-text="okBtnText" />
@@ -117,14 +117,14 @@ const inputNotValid = computed(() => dirty.value && inputError.value);
117117
const okBtnText = computed(() => props.okText || t('uiv.modal.ok'));
118118
const cancelBtnText = computed(() => props.cancelText || t('uiv.modal.cancel'));
119119
120-
function toggle(show, msg) {
121-
modal.value?.toggle(show, msg);
120+
function hide(msg) {
121+
modal.value?.hideModal(msg);
122122
}
123123
124124
function validate() {
125125
dirty.value = true;
126126
if (!isExist(inputError.value)) {
127-
toggle(false, { value: input.value });
127+
hide({ value: input.value });
128128
}
129129
}
130130
</script>

‎src/components/modal/Modal.spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -816,7 +816,7 @@ describe('Modal', () => {
816816
expect(document.querySelector('.modal-backdrop')).toBeNull();
817817
});
818818

819-
it('should be able to use `beforeClose` when promise not supported', async () => {
819+
it.skip('should be able to use `beforeClose` when promise not supported', async () => {
820820
const wrapper = createWrapper(
821821
'<modal v-model="open" title="Modal 1" :before-close="beforeClose"><p>{{msg}}</p></modal>',
822822
{
@@ -845,7 +845,7 @@ describe('Modal', () => {
845845
expect(wrapper.vm.msg).toEqual('test');
846846
});
847847

848-
it('should be able to interrupt hide with `beforeClose` promise is not supported', async () => {
848+
it.skip('should be able to interrupt hide with `beforeClose` promise is not supported', async () => {
849849
const wrapper = createWrapper(
850850
'<modal v-model="open" title="Modal 1" :before-close="beforeClose"><p>{{msg}}</p></modal>',
851851
{

‎src/components/modal/Modal.vue‎

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
class="close"
2222
aria-label="Close"
2323
style="position: relative; z-index: 1060"
24-
@click="toggle(false)"
24+
@click="hideModal()"
2525
>
2626
<!-- 1060 is bigger than dialog z-index 1050 because it got cover by title sometimes -->
2727
<span aria-hidden="true">×</span>
@@ -36,13 +36,13 @@
3636
</div>
3737
<div v-if="footer" class="modal-footer">
3838
<slot name="footer">
39-
<btn :type="cancelType" @click="toggle(false, 'cancel')">
39+
<btn :type="cancelType" @click="hideModal('cancel')">
4040
<span>{{ cancelText || t('uiv.modal.cancel') }}</span>
4141
</btn>
4242
<btn
4343
:type="okType"
4444
data-action="auto-focus"
45-
@click="toggle(false, 'ok')"
45+
@click="hideModal('ok')"
4646
>
4747
<span>{{ okText || t('uiv.modal.ok') }}</span>
4848
</btn>
@@ -157,35 +157,23 @@ export default {
157157
}
158158
}
159159
}
160-
this.toggle(false);
160+
this.hideModal();
161161
}
162162
},
163-
toggle(show, msg) {
164-
let shouldClose = true;
165-
if (isFunction(this.beforeClose)) {
166-
shouldClose = this.beforeClose(msg);
167-
}
163+
hideModal(msg) {
164+
const shouldClose = isFunction(this.beforeClose)
165+
? this.beforeClose(msg)
166+
: true;
168167
169-
if (isPromiseSupported()) {
170-
// Skip the hiding when beforeClose returning falsely value or returned Promise resolves to falsely value
171-
// Use Promise.resolve to accept both Boolean values and Promises
172-
Promise.resolve(shouldClose).then((shouldClose) => {
173-
// Skip the hiding while show===false
174-
if (!show && shouldClose) {
175-
this.msg = msg;
176-
this.$emit('update:modelValue', show);
177-
}
178-
});
179-
} else {
180-
// Fallback to old version if promise is not supported
181-
// skip the hiding while show===false & beforeClose returning falsely value
182-
if (!show && !shouldClose) {
168+
// Skip the hiding when beforeClose returning falsely value or returned Promise resolves to falsely value
169+
// Use Promise.resolve to accept both Boolean values and Promises
170+
Promise.resolve(shouldClose).then((_shouldClose) => {
171+
if (!_shouldClose) {
183172
return;
184173
}
185-
186174
this.msg = msg;
187-
this.$emit('update:modelValue', show);
188-
}
175+
this.$emit('update:modelValue', false);
176+
});
189177
},
190178
$toggle(show) {
191179
const modal = this.$el;
@@ -271,9 +259,9 @@ export default {
271259
}, 1);
272260
}
273261
},
274-
backdropClicked(event) {
262+
backdropClicked() {
275263
if (this.backdrop && !this.isCloseSuppressed) {
276-
this.toggle(false);
264+
this.hideModal();
277265
}
278266
},
279267
},

‎src/services/messagebox/MessageBox.js‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import { TYPES } from '../../constants/messagebox.constants';
2-
import {
3-
isFunction,
4-
isExist,
5-
isString,
6-
isPromiseSupported,
7-
} from '../../utils/object.utils';
2+
import { isFunction, isExist, isString } from '../../utils/object.utils';
83
import MessageBox from '../../components/messagebox/MessageBox.vue';
94
import { render, h } from 'vue';
105

@@ -55,15 +50,10 @@ const init = function (type, options, cb, resolve = null, reject = null) {
5550
document.body.appendChild(container.firstElementChild);
5651
};
5752

58-
// eslint-disable-next-line default-param-last
5953
const initModal = function (type, options = {}, cb) {
60-
if (isPromiseSupported()) {
61-
return new Promise((resolve, reject) => {
62-
init.apply(this, [type, options, cb, resolve, reject]);
63-
});
64-
} else {
65-
init.apply(this, [type, options, cb]);
66-
}
54+
return new Promise((resolve, reject) => {
55+
init.apply(this, [type, options, cb, resolve, reject]);
56+
});
6757
};
6858

6959
const alert = function (options, cb) {

‎src/services/messagebox/MessageBox.spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ describe('MessageBox Service', () => {
7777
expect(spy).toBeCalledWith('cancel');
7878
});
7979

80-
it('should be able to work without browser Promise', async () => {
80+
it.skip('should be able to work without browser Promise', async () => {
8181
// mute Promise
8282
const savedPromise = window.Promise;
8383
window.Promise = null;
@@ -107,7 +107,7 @@ describe('MessageBox Service', () => {
107107
expect(spy).toBeCalledWith('ok');
108108
});
109109

110-
it('should be able to work without browser Promise and callback', async () => {
110+
it.skip('should be able to work without browser Promise and callback', async () => {
111111
// mute Promise
112112
const savedPromise = window.Promise;
113113
window.Promise = null;

‎src/services/notification/Notification.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
isFunction,
44
isExist,
55
isString,
6-
isPromiseSupported,
76
hasOwnProperty,
87
} from '../../utils/object.utils';
98
import Notification from '../../components/notification/Notification.vue';
@@ -66,13 +65,9 @@ const _notify = (options = {}, cb) => {
6665
if (!isExist(options.placement)) {
6766
options.placement = PLACEMENTS.TOP_RIGHT;
6867
}
69-
if (isPromiseSupported()) {
70-
return new Promise((resolve, reject) => {
71-
init(options, cb, resolve, reject);
72-
});
73-
} else {
74-
init(options, cb);
75-
}
68+
return new Promise((resolve, reject) => {
69+
init(options, cb, resolve, reject);
70+
});
7671
};
7772

7873
function _notify2(type, args) {

0 commit comments

Comments
 (0)