Skip to content

Commit

Permalink
feat(dialog): add ok-auto-close (#2626) (#2627)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yi-boide
yi-boide authored Oct 30, 2023
1 parent 1d3da4d commit 1cc4b9f
Show file tree
Hide file tree
Showing 7 changed files with 217 additions and 192 deletions.
7 changes: 6 additions & 1 deletion src/packages/__VUE/dialog/__tests__/index.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ test('Dialog: basic props', async () => {
title: 't1',
content: 'c1',
cancelText: 'cancelText',
okText: 'okText'
okText: 'okText',
okAutoClose: false
}
});
nextTick(() => {
Expand All @@ -33,6 +34,10 @@ test('Dialog: basic props', async () => {
expect(cancel.html()).includes('cancelText');
const ok = wrapper.find('.nut-dialog__footer-ok');
expect(ok.html()).includes('okText');
ok.trigger('click');
nextTick(() => {
expect(wrapper.vm.showPopup).toBeTruthy();
});
});
});

Expand Down
142 changes: 72 additions & 70 deletions src/packages/__VUE/dialog/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ const onCancel = () => {
const onOk = () => {
console.log('event ok');
};
const baseClick = (): void => {
const baseClick = () => {
showDialog({
title: 'Basic spring frame',
content: createVNode('span', { style: { color: 'red' } }, 'I can be a custom component'),
onCancel,
onOk
});
};
const transparentClick = (): void => {
const transparentClick = () => {
showDialog({
overlayStyle: { background: 'rgba(0,0,0,0)' },
title: 'Transparent Dialog',
Expand All @@ -59,7 +59,7 @@ const transparentClick = (): void => {
onOk
});
};
const htmlClick = (): void => {
const htmlClick = () => {
showDialog({
title: 'Use html',
content:
Expand All @@ -68,13 +68,13 @@ const htmlClick = (): void => {
onOk
});
};
const beforeCloseClick = (): void => {
const beforeCloseClick = () => {
showDialog({
title: 'Before Close',
content: 'Click confirm to close it in 1 second',
onCancel,
onOk,
beforeClose: (action: string) => {
beforeClose: (action) => {
return new Promise((r) => {
setTimeout(() => {
r(action == 'ok');
Expand Down Expand Up @@ -172,7 +172,7 @@ import '@nutui/nutui/dist/packages/dialog/style';
const onCancel = () => {
console.log('event cancel');
};
const teleportClick = (teleport: string) => {
const teleportClick = (teleport) => {
showDialog({
teleport,
title: 'teleport to ' + teleport,
Expand All @@ -190,84 +190,86 @@ const teleportClick = (teleport: string) => {

### DialogOptions

| Attribute | Description | Type | Default |
| ------------------- | ------------------------------------------------------------------------------ | ------------------------ | ---------------------- |
| title | Title | string | - |
| id | Identifier, share one instance at the same time, default to multiple instances | string \| object | `new Date().getTime()` |
| content | Content, support HTML | string | - |
| teleport | Specifies a target element where Dialog will be mounted | string | `"body"` |
| closeOnClickOverlay | Whether to close when overlay is clicked | boolean | `false` |
| noFooter | Hide bottom button bar | boolean | `false` |
| noOkBtn | Hide OK button | boolean | `false` |
| noCancelBtn | Hide cancel button | boolean | `false` |
| cancelText | Cancel button text | string | `"Cancel"` |
| okText | OK button text | string | `"Confirm"` |
| cancelAutoClose | Click Cancel to close the popup | boolean | `true` |
| textAlign | Text alignment direction, the optional value is the same as css text-align | string | `"center"` |
| closeOnPopstate | Whether to close when popstate | boolean | `false` |
| customClass | Custom dialog class | string | |
| overlayClass | Custom mask classname | string | - |
| overlayStyle | Custom mask styles | CSSProperties | - |
| popClass | Custom popup classname | string | - |
| popStyle | Custom popup styles | CSSProperties | - |
| onUpdate | Update | boolean | `false` |
| onOk | Emitted when the confirm button is clicked | Function | - |
| onCancel | Emitted when the cancel button is clicked | Function | - |
| onOpened | Emitted when Dialog is opened | Function | - |
| onClosed | Emitted when Dialog is closed | Function | - |
| beforeClose | Callback function before close support return `promise` | Function(action: string) | - |
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| title | Title | string | - |
| id | Identifier, share one instance at the same time, default to multiple instances | string \| object | `new Date().getTime()` |
| content | Content, support HTML | string | - |
| teleport | Specifies a target element where Dialog will be mounted | string | `"body"` |
| closeOnClickOverlay | Whether to close when overlay is clicked | boolean | `false` |
| noFooter | Hide bottom button bar | boolean | `false` |
| noOkBtn | Hide OK button | boolean | `false` |
| noCancelBtn | Hide cancel button | boolean | `false` |
| cancelText | Cancel button text | string | `"Cancel"` |
| okText | OK button text | string | `"Confirm"` |
| cancelAutoClose | Click Cancel to close the popup | boolean | `true` |
| okAutoClose`4.2.1` | Check whether the button closes the popup by default | boolean | `true` |
| textAlign | Text alignment direction, the optional value is the same as css text-align | string | `"center"` |
| closeOnPopstate | Whether to close when popstate | boolean | `false` |
| customClass | Custom dialog class | string | |
| overlayClass | Custom mask classname | string | - |
| overlayStyle | Custom mask styles | CSSProperties | - |
| popClass | Custom popup classname | string | - |
| popStyle | Custom popup styles | CSSProperties | - |
| onUpdate | Update | boolean | `false` |
| onOk | Emitted when the confirm button is clicked | Function | - |
| onCancel | Emitted when the cancel button is clicked | Function | - |
| onOpened | Emitted when Dialog is opened | Function | - |
| onClosed | Emitted when Dialog is closed | Function | - |
| beforeClose | Callback function before close support return `promise` | Function(action: string) | - |

### Props

| Attribute | Description | Type | Default |
| ---------------------- | -------------------------------------------------------------------------- | ------------------------ | ------------ |
| title | Title | string | - |
| content | Content, support HTML | string | - |
| teleport | Specifies a target element where Dialog will be mounted | string | `"body"` |
| close-on-click-overlay | Whether to close when overlay is clicked | boolean | `true` |
| no-footer | Hide bottom button bar | boolean | `false` |
| no-ok-btn | Hide OK button | boolean | `false` |
| no-cancel-btn | Hide cancel button | boolean | `false` |
| cancel-text | Cancel button text | string | `"Cancel"` |
| ok-text | OK button text | string | `"Confirm"` |
| cancel-auto-close | Click Cancel to close the popup | boolean | `true` |
| text-align | Text alignment direction, the optional value is the same as css text-align | string | `"center"` |
| close-on-popstate | Whether to close when popstate | boolean | `false` |
| lock-scroll | Whether to lock background scroll | boolean | `false` |
| footer-direction | Use `horizontal` and `vertical` optional values | string | `horizontal` |
| overlay-class | Custom mask classname | string | - |
| overlay-style | Custom mask styles | CSSProperties | - |
| pop-class | Custom popup classname | string | - |
| pop-style | Custom popup styles | CSSProperties | - |
| custom-class | Custom dialog class | string | - |
| before-close | Callback function before close support return `promise` | Function(action: string) | - |
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| title | Title | string | - |
| content | Content, support HTML | string | - |
| teleport | Specifies a target element where Dialog will be mounted | string | `"body"` |
| close-on-click-overlay | Whether to close when overlay is clicked | boolean | `true` |
| no-footer | Hide bottom button bar | boolean | `false` |
| no-ok-btn | Hide OK button | boolean | `false` |
| no-cancel-btn | Hide cancel button | boolean | `false` |
| cancel-text | Cancel button text | string | `"Cancel"` |
| ok-text | OK button text | string | `"Confirm"` |
| cancel-auto-close | Click Cancel to close the popup | boolean | `true` |
| ok-auto-close`4.2.1` | Check whether the button closes the popup by default | boolean | `true` |
| text-align | Text alignment direction, the optional value is the same as css text-align | string | `"center"` |
| close-on-popstate | Whether to close when popstate | boolean | `false` |
| lock-scroll | Whether to lock background scroll | boolean | `false` |
| footer-direction | Use `horizontal` and `vertical` optional values | string | `horizontal` |
| overlay-class | Custom mask classname | string | - |
| overlay-style | Custom mask styles | CSSProperties | - |
| pop-class | Custom popup classname | string | - |
| pop-style | Custom popup styles | CSSProperties | - |
| custom-class | Custom dialog class | string | - |
| before-close | Callback function before close support return `promise` | Function(action: string) | - |

### Events

| Event | Description | Type | Default |
| ------ | ------------------------------------------ | -------- | ------- |
| ok | Emitted when the confirm button is clicked | Function | - |
| cancel | Emitted when the cancel button is clicked | Function | - |
| closed | Emitted when Dialog is closed | Function | - |
| opened | Emitted when Dialog is Opened | Function | - |
| Event | Description | Type | Default |
| --- | --- | --- | --- |
| ok | Emitted when the confirm button is clicked | Function | - |
| cancel | Emitted when the cancel button is clicked | Function | - |
| closed | Emitted when Dialog is closed | Function | - |
| opened | Emitted when Dialog is Opened | Function | - |

### Slots

| Name | Description |
| ------- | -------------- |
| header | Custom title |
| Name | Description |
| --- | --- |
| header | Custom title |
| default | Custom default |
| footer | Custom footer |
| footer | Custom footer |

## Theming

### CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).

| Name | Default Value |
| ----------------------------------- | --------------------- |
| --nut-dialog-width | _296px_ |
| --nut-dialog-header-font-weight | _normal_ |
| --nut-dialog-header-color | _rgba(38, 38, 38, 1)_ |
| --nut-dialog-footer-justify-content | _space-around_ |
| Name | Default Value |
| --- | --- |
| --nut-dialog-width | _296px_ |
| --nut-dialog-header-font-weight | _normal_ |
| --nut-dialog-header-color | _rgba(38, 38, 38, 1)_ |
| --nut-dialog-footer-justify-content | _space-around_ |
Loading

0 comments on commit 1cc4b9f

Please sign in to comment.