mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
Eric Y Liu
parent
870c2c2ae8
commit
2b8600d96c
8 changed files with 183 additions and 48 deletions
|
|
@ -2219,27 +2219,28 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
|
||||
| size | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | -- | Set the size of the modal |
|
||||
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| alert | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
|
||||
| passiveModal | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
|
||||
| modalHeading | <code>let</code> | No | <code>string</code> | -- | Specify the modal heading |
|
||||
| modalLabel | <code>let</code> | No | <code>string</code> | -- | Specify the modal label |
|
||||
| modalAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the modal |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
|
||||
| hasForm | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
|
||||
| hasScrollingContent | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
|
||||
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| shouldSubmitOnEnter | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the primary button to be triggered when pressing "Enter" |
|
||||
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| selectorPrimaryFocus | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
|
||||
| preventCloseOnClickOutside | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
|
||||
| size | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | -- | Set the size of the modal |
|
||||
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| alert | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
|
||||
| passiveModal | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
|
||||
| modalHeading | <code>let</code> | No | <code>string</code> | -- | Specify the modal heading |
|
||||
| modalLabel | <code>let</code> | No | <code>string</code> | -- | Specify the modal label |
|
||||
| modalAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the modal |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
|
||||
| hasForm | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
|
||||
| hasScrollingContent | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
|
||||
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| shouldSubmitOnEnter | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the primary button to be triggered when pressing "Enter" |
|
||||
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryButtons | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />Supercedes `secondaryButtonText` |
|
||||
| selectorPrimaryFocus | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
|
||||
| preventCloseOnClickOutside | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2254,13 +2255,13 @@ None.
|
|||
| Event name | Type | Detail |
|
||||
| :---------------------- | :--------- | :------------------------------ |
|
||||
| transitionend | dispatched | <code>{ open: boolean; }</code> |
|
||||
| click:button--secondary | dispatched | <code>{ text: string; }</code> |
|
||||
| keydown | forwarded | -- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| submit | dispatched | -- |
|
||||
| click:button--secondary | dispatched | -- |
|
||||
| close | dispatched | -- |
|
||||
| open | dispatched | -- |
|
||||
|
||||
|
|
@ -2287,14 +2288,15 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------- |
|
||||
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| primaryClass | <code>let</code> | No | <code>string</code> | -- | Specify a class for the primary button |
|
||||
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryClass | <code>let</code> | No | <code>string</code> | -- | Specify a class for the secondary button |
|
||||
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------- |
|
||||
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| primaryClass | <code>let</code> | No | <code>string</code> | -- | Specify a class for the primary button |
|
||||
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryButtons | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />Supercedes `secondaryButtonText` |
|
||||
| secondaryClass | <code>let</code> | No | <code>string</code> | -- | Specify a class for the secondary button |
|
||||
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2304,7 +2306,9 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
None.
|
||||
| Event name | Type | Detail |
|
||||
| :---------------------- | :--------- | :----------------------------- |
|
||||
| click:button--secondary | dispatched | <code>{ text: string; }</code> |
|
||||
|
||||
## `ModalHeader`
|
||||
|
||||
|
|
|
|||
|
|
@ -5375,6 +5375,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "secondaryButtons",
|
||||
"kind": "let",
|
||||
"description": "2-tuple prop to render two secondary buttons for a 3 button modal\nSupercedes `secondaryButtonText`",
|
||||
"type": "[{ text: string; }, { text: string; }]",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "selectorPrimaryFocus",
|
||||
"kind": "let",
|
||||
|
|
@ -5437,13 +5447,17 @@
|
|||
"name": "transitionend",
|
||||
"detail": "{ open: boolean; }"
|
||||
},
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "click:button--secondary",
|
||||
"detail": "{ text: string; }"
|
||||
},
|
||||
{ "type": "forwarded", "name": "keydown", "element": "div" },
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
|
||||
{ "type": "dispatched", "name": "submit" },
|
||||
{ "type": "dispatched", "name": "click:button--secondary" },
|
||||
{ "type": "dispatched", "name": "close" },
|
||||
{ "type": "dispatched", "name": "open" }
|
||||
],
|
||||
|
|
@ -5523,6 +5537,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "secondaryButtons",
|
||||
"kind": "let",
|
||||
"description": "2-tuple prop to render two secondary buttons for a 3 button modal\nSupercedes `secondaryButtonText`",
|
||||
"type": "[{ text: string; }, { text: string; }]",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "secondaryClass",
|
||||
"kind": "let",
|
||||
|
|
@ -5544,7 +5568,13 @@
|
|||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"events": [
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "click:button--secondary",
|
||||
"detail": "{ text: string; }"
|
||||
}
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@
|
|||
|
||||
<FileSource src="/framed/Modal/PassiveModal" />
|
||||
|
||||
### 3-button modal
|
||||
|
||||
<FileSource src="/framed/Modal/3ButtonModal" />
|
||||
|
||||
### Extra-small size
|
||||
|
||||
<FileSource src="/framed/Modal/ModalExtraSmall" />
|
||||
|
|
|
|||
23
docs/src/pages/framed/Modal/3ButtonModal.svelte
Normal file
23
docs/src/pages/framed/Modal/3ButtonModal.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
|
||||
<Modal
|
||||
bind:open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Edit' }]}"
|
||||
on:click:button--secondary="{({ detail }) => {
|
||||
if (detail.text === 'Cancel') open = false;
|
||||
if (detail.text === 'Edit') console.log('Edit');
|
||||
}}"
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
<script>
|
||||
/**
|
||||
* @event {{ text: string; }} click:button--secondary
|
||||
*/
|
||||
|
||||
/** Specify the primary button text */
|
||||
export let primaryButtonText = "";
|
||||
|
||||
|
|
@ -14,6 +18,13 @@
|
|||
/** Specify the secondary button text */
|
||||
export let secondaryButtonText = "";
|
||||
|
||||
/**
|
||||
* 2-tuple prop to render two secondary buttons for a 3 button modal
|
||||
* Supercedes `secondaryButtonText`
|
||||
* @type {[{ text: string; }, { text: string; }]}
|
||||
*/
|
||||
export let secondaryButtons = [];
|
||||
|
||||
/**
|
||||
* Specify a class for the secondary button
|
||||
* @type {string}
|
||||
|
|
@ -23,15 +34,38 @@
|
|||
/** Set to `true` to use the danger variant */
|
||||
export let danger = false;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
import { getContext, createEventDispatcher } from "svelte";
|
||||
import Button from "../Button/Button.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const { closeModal, submit } = getContext("ComposedModal");
|
||||
</script>
|
||||
|
||||
<div class:bx--modal-footer="{true}" {...$$restProps}>
|
||||
{#if secondaryButtonText}
|
||||
<Button kind="secondary" class="{secondaryClass}" on:click="{closeModal}">
|
||||
<div
|
||||
class:bx--modal-footer="{true}"
|
||||
class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if secondaryButtons.length > 0}
|
||||
{#each secondaryButtons as button}
|
||||
<Button
|
||||
kind="secondary"
|
||||
on:click="{() => {
|
||||
dispatch('click:button--secondary', { text: button.text });
|
||||
}}"
|
||||
>
|
||||
{button.text}
|
||||
</Button>
|
||||
{/each}
|
||||
{:else}
|
||||
<Button
|
||||
kind="secondary"
|
||||
class="{secondaryClass}"
|
||||
on:click="{() => {
|
||||
closeModal();
|
||||
dispatch('click:button--secondary', { text: secondaryButtonText });
|
||||
}}"
|
||||
>
|
||||
{secondaryButtonText}
|
||||
</Button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
/**
|
||||
* @event {{ open: boolean; }} transitionend
|
||||
* @event {{ text: string; }} click:button--secondary
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
@ -60,6 +61,13 @@
|
|||
/** Specify the secondary button text */
|
||||
export let secondaryButtonText = "";
|
||||
|
||||
/**
|
||||
* 2-tuple prop to render two secondary buttons for a 3 button modal
|
||||
* Supercedes `secondaryButtonText`
|
||||
* @type {[{ text: string; }, { text: string; }]}
|
||||
*/
|
||||
export let secondaryButtons = [];
|
||||
|
||||
/** Specify a selector to be focused when opening the modal */
|
||||
export let selectorPrimaryFocus = "[data-modal-primary-focus]";
|
||||
|
||||
|
|
@ -257,15 +265,33 @@
|
|||
<div class:bx--modal-content--overflow-indicator="{true}"></div>
|
||||
{/if}
|
||||
{#if !passiveModal}
|
||||
<div class:bx--modal-footer="{true}">
|
||||
<Button
|
||||
kind="secondary"
|
||||
on:click="{() => {
|
||||
dispatch('click:button--secondary');
|
||||
}}"
|
||||
>
|
||||
{secondaryButtonText}
|
||||
</Button>
|
||||
<div
|
||||
class:bx--modal-footer="{true}"
|
||||
class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
|
||||
>
|
||||
{#if secondaryButtons.length > 0}
|
||||
{#each secondaryButtons as button}
|
||||
<Button
|
||||
kind="secondary"
|
||||
on:click="{() => {
|
||||
dispatch('click:button--secondary', { text: button.text });
|
||||
}}"
|
||||
>
|
||||
{button.text}
|
||||
</Button>
|
||||
{/each}
|
||||
{:else}
|
||||
<Button
|
||||
kind="secondary"
|
||||
on:click="{() => {
|
||||
dispatch('click:button--secondary', {
|
||||
text: secondaryButtonText,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
{secondaryButtonText}
|
||||
</Button>
|
||||
{/if}
|
||||
<Button
|
||||
kind="{danger ? 'danger' : 'primary'}"
|
||||
disabled="{primaryButtonDisabled}"
|
||||
|
|
|
|||
9
types/ComposedModal/ModalFooter.d.ts
vendored
9
types/ComposedModal/ModalFooter.d.ts
vendored
|
|
@ -26,6 +26,13 @@ export interface ModalFooterProps
|
|||
*/
|
||||
secondaryButtonText?: string;
|
||||
|
||||
/**
|
||||
* 2-tuple prop to render two secondary buttons for a 3 button modal
|
||||
* Supercedes `secondaryButtonText`
|
||||
* @default []
|
||||
*/
|
||||
secondaryButtons?: [{ text: string }, { text: string }];
|
||||
|
||||
/**
|
||||
* Specify a class for the secondary button
|
||||
*/
|
||||
|
|
@ -40,6 +47,6 @@ export interface ModalFooterProps
|
|||
|
||||
export default class ModalFooter extends SvelteComponentTyped<
|
||||
ModalFooterProps,
|
||||
{},
|
||||
{ ["click:button--secondary"]: CustomEvent<{ text: string }> },
|
||||
{ default: {} }
|
||||
> {}
|
||||
|
|
|
|||
9
types/Modal/Modal.d.ts
vendored
9
types/Modal/Modal.d.ts
vendored
|
|
@ -89,6 +89,13 @@ export interface ModalProps
|
|||
*/
|
||||
secondaryButtonText?: string;
|
||||
|
||||
/**
|
||||
* 2-tuple prop to render two secondary buttons for a 3 button modal
|
||||
* Supercedes `secondaryButtonText`
|
||||
* @default []
|
||||
*/
|
||||
secondaryButtons?: [{ text: string }, { text: string }];
|
||||
|
||||
/**
|
||||
* Specify a selector to be focused when opening the modal
|
||||
* @default "[data-modal-primary-focus]"
|
||||
|
|
@ -118,13 +125,13 @@ export default class Modal extends SvelteComponentTyped<
|
|||
ModalProps,
|
||||
{
|
||||
transitionend: CustomEvent<{ open: boolean }>;
|
||||
["click:button--secondary"]: CustomEvent<{ text: string }>;
|
||||
keydown: WindowEventMap["keydown"];
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
submit: CustomEvent<any>;
|
||||
["click:button--secondary"]: CustomEvent<any>;
|
||||
close: CustomEvent<any>;
|
||||
open: CustomEvent<any>;
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue