@supersoniks/concorde 5.0.3 → 5.0.5
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/.agents/skills/concorde-component-docs/SKILL.md +194 -0
- package/.agents/skills/concorde-component-docs/template.md +45 -0
- package/ai/cursor/rules/concorde-theme.mdc +1 -1
- package/ai/cursor/rules/concorde.mdc +1 -1
- package/ai/skills/concorde/SKILL.md +1 -1
- package/ai/skills/concorde-theme/SKILL.md +21 -10
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +515 -521
- package/concorde-core.es.js +5151 -5056
- package/dist/concorde-core.bundle.js +515 -521
- package/dist/concorde-core.es.js +5151 -5056
- package/dist/docs-mock-api-sw.js +2 -0
- package/dist/docs-mock-api-sw.js.map +2 -2
- package/docs/assets/index-CD4WyL6o.css +1 -0
- package/docs/assets/{index-BnK6OS7w.js → index-wVZpLVYW.js} +815 -808
- package/docs/crawl/core/components/ui/alert/alert.html +76 -5
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +113 -5
- package/docs/crawl/core/components/ui/badge/badge.html +57 -8
- package/docs/crawl/core/components/ui/captcha/captcha.html +90 -8
- package/docs/crawl/core/components/ui/card/card.html +122 -12
- package/docs/crawl/core/components/ui/divider/divider.html +117 -31
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +232 -101
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +95 -52
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +97 -38
- package/docs/crawl/core/components/ui/group/group.html +60 -38
- package/docs/crawl/core/components/ui/icon/icon.html +136 -47
- package/docs/crawl/core/components/ui/image/image.html +118 -6
- package/docs/crawl/core/components/ui/link/link.html +65 -7
- package/docs/crawl/core/components/ui/loader/loader.html +97 -23
- package/docs/crawl/core/components/ui/menu/menu.html +162 -90
- package/docs/crawl/core/components/ui/modal/modal.html +275 -50
- package/docs/crawl/core/components/ui/pop/pop.html +242 -124
- package/docs/crawl/core/components/ui/progress/progress.html +103 -30
- package/docs/crawl/core/components/ui/table/table.html +303 -171
- package/docs/crawl/core/components/ui/theme/theme.html +131 -0
- package/docs/crawl/core/components/ui/toast/toast.html +170 -59
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +90 -29
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +3 -2
- package/docs/crawl/docs/_getting-started/start.html +1 -1
- package/docs/crawl/docs/_getting-started/theming.html +311 -63
- package/docs/crawl/hubs/form-components.html +71 -49
- package/docs/crawl/index.html +7 -6
- package/docs/docs-mock-api-sw.js +2 -0
- package/docs/docs-mock-api-sw.js.map +2 -2
- package/docs/index.html +6 -4
- package/docs/llms-full.txt +1468 -405
- package/docs/llms.txt +23 -30
- package/docs/sitemap.xml +3 -0
- package/docs/src/core/components/ui/alert/alert.md +21 -2
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/src/core/components/ui/badge/badge.md +19 -6
- package/docs/src/core/components/ui/captcha/captcha.md +65 -6
- package/docs/src/core/components/ui/card/card.md +73 -10
- package/docs/src/core/components/ui/divider/divider.md +107 -13
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +175 -99
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +75 -52
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +109 -34
- package/docs/src/core/components/ui/group/group.md +36 -36
- package/docs/src/core/components/ui/icon/icon.md +132 -43
- package/docs/src/core/components/ui/image/image.md +35 -3
- package/docs/src/core/components/ui/link/link.md +43 -5
- package/docs/src/core/components/ui/loader/loader.md +79 -22
- package/docs/src/core/components/ui/menu/menu.md +133 -92
- package/docs/src/core/components/ui/modal/modal.md +163 -47
- package/docs/src/core/components/ui/pop/pop.md +217 -123
- package/docs/src/core/components/ui/progress/progress.md +76 -30
- package/docs/src/core/components/ui/table/table.md +147 -171
- package/docs/src/core/components/ui/theme/theme.md +122 -0
- package/docs/src/core/components/ui/toast/toast.md +108 -58
- package/docs/src/core/components/ui/tooltip/tooltip.md +68 -26
- package/docs/src/docs/_decorators/ancestor-attribute.md +3 -2
- package/docs/src/docs/_getting-started/start.md +1 -1
- package/docs/src/docs/_getting-started/theming.md +223 -61
- package/docs/src/docs/search/docs-search.json +2504 -399
- package/docs/src/tsconfig.json +18 -0
- package/index.html +4 -2
- package/package.json +7 -1
- package/public/docs-mock-api-sw.js +2 -0
- package/public/docs-mock-api-sw.js.map +2 -2
- package/src/core/components/ui/_css/align.ts +1 -0
- package/src/core/components/ui/_css/type.ts +86 -8
- package/src/core/components/ui/_i18n/ui-aria-labels.ts +8 -0
- package/src/core/components/ui/alert/alert.md +21 -2
- package/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/src/core/components/ui/badge/badge.md +19 -6
- package/src/core/components/ui/badge/badge.ts +8 -9
- package/src/core/components/ui/button/button.ts +5 -15
- package/src/core/components/ui/captcha/captcha.md +65 -6
- package/src/core/components/ui/card/card.md +73 -10
- package/src/core/components/ui/card/card.ts +24 -22
- package/src/core/components/ui/divider/divider.md +107 -13
- package/src/core/components/ui/divider/divider.ts +40 -33
- package/src/core/components/ui/form/fieldset/fieldset.md +175 -99
- package/src/core/components/ui/form/fieldset/fieldset.ts +15 -28
- package/src/core/components/ui/form/fieldset/legend.ts +13 -13
- package/src/core/components/ui/form/form-actions/form-actions.md +75 -52
- package/src/core/components/ui/form/form-actions/form-actions.ts +7 -5
- package/src/core/components/ui/form/form-layout/form-layout.md +109 -34
- package/src/core/components/ui/form/form-layout/form-layout.ts +27 -24
- package/src/core/components/ui/form/textarea/textarea.ts +4 -3
- package/src/core/components/ui/group/group.md +36 -36
- package/src/core/components/ui/group/group.ts +5 -10
- package/src/core/components/ui/icon/icon.md +132 -43
- package/src/core/components/ui/image/image.md +35 -3
- package/src/core/components/ui/link/link.md +43 -5
- package/src/core/components/ui/loader/loader.md +79 -22
- package/src/core/components/ui/loader/loader.ts +67 -27
- package/src/core/components/ui/loader/styles/fixed.ts +6 -11
- package/src/core/components/ui/menu/menu.md +133 -92
- package/src/core/components/ui/menu/menu.ts +53 -58
- package/src/core/components/ui/modal/modal.md +163 -47
- package/src/core/components/ui/modal/modal.ts +2 -4
- package/src/core/components/ui/pop/pop.md +217 -123
- package/src/core/components/ui/pop/pop.ts +0 -1
- package/src/core/components/ui/progress/progress.md +76 -30
- package/src/core/components/ui/progress/progress.ts +25 -56
- package/src/core/components/ui/table/table-caption.ts +2 -2
- package/src/core/components/ui/table/table-tbody.ts +3 -3
- package/src/core/components/ui/table/table-td.ts +23 -18
- package/src/core/components/ui/table/table-th.ts +8 -8
- package/src/core/components/ui/table/table-tr.ts +4 -4
- package/src/core/components/ui/table/table.md +147 -171
- package/src/core/components/ui/table/table.ts +20 -19
- package/src/core/components/ui/theme/theme-collection/auto.ts +15 -0
- package/src/core/components/ui/theme/theme-collection/core-variables.ts +8 -31
- package/src/core/components/ui/theme/theme-collection/dark.ts +1 -7
- package/src/core/components/ui/theme/theme-collection/light.ts +30 -26
- package/src/core/components/ui/theme/theme.md +122 -0
- package/src/core/components/ui/theme/theme.ts +30 -7
- package/src/core/components/ui/toast/toast-item.ts +6 -9
- package/src/core/components/ui/toast/toast.md +108 -58
- package/src/core/components/ui/toast/types.ts +1 -1
- package/src/core/components/ui/tooltip/tooltip.md +68 -26
- package/src/core/decorators/subscriber/ancestorAttribute.spec.ts +26 -0
- package/src/core/decorators/subscriber/ancestorAttribute.ts +3 -4
- package/src/core/utils/AncestorAttributeObserver.ts +183 -70
- package/src/docs/_decorators/ancestor-attribute.md +3 -2
- package/src/docs/_getting-started/start.md +1 -1
- package/src/docs/_getting-started/theming.md +223 -61
- package/src/docs/code.ts +125 -58
- package/src/docs/header/header.ts +62 -54
- package/src/docs/mock-api/router.ts +2 -0
- package/src/docs/navigation/navigation.ts +6 -3
- package/src/docs/search/docs-search.json +2504 -399
- package/src/docs/search/markdown-renderer.ts +6 -6
- package/src/docs/search/search.ts +4 -4
- package/src/docs/tailwind/css/tailwind.css +6 -5
- package/src/tsconfig.json +18 -0
- package/src/tsconfig.tsbuildinfo +1 -1
- package/tailwind.config.js +19 -0
- package/docs/assets/index--GpD7R7a.css +0 -1
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<meta name="description" content="
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/modal/modal, modal, UI component, sonic-modal, web component">
|
|
6
|
+
<title>Modal — Concorde</title>
|
|
7
|
+
<meta name="description" content="sonic-modal presents focused content in a <dialog> overlay with backdrop, enter/exit animation, and a built-in close control. Compose sonic-modal-title / sonic-modal-subtitle / sonic-modal-content / s">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/modal/modal, modal, Modal, UI component, sonic-modal, web component, , sonic-modal-title, sonic-modal-subtitle, sonic-modal-content, sonic-modal-actions, show(), hideModal, hide(), forceAction">
|
|
9
9
|
<meta name="concorde-doc-id" content="core/components/ui/modal/modal">
|
|
10
10
|
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">
|
|
11
11
|
</head>
|
|
@@ -15,101 +15,326 @@
|
|
|
15
15
|
</header>
|
|
16
16
|
<main>
|
|
17
17
|
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component —
|
|
19
|
-
<
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Modal</strong>. sonic-modal presents focused content in a <dialog> overlay with backdrop, enter/exit animation, and a built-in close control. Compose sonic-modal-title / sonic-modal-subtitle / sonic-modal-content / s <span>Doc ID: <code>core/components/ui/modal/modal</code>. Keywords: Concorde, supersoniks, core/components/ui/modal/modal, modal, Modal, UI component, sonic-modal, web component, , sonic-modal-title, sonic-modal-subtitle, sonic-modal-content, sonic-modal-actions, show(), hideModal, hide(), forceAction. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html</a>.</span></p>
|
|
19
|
+
<h1 id="modal">Modal</h1>
|
|
20
|
+
<p><strong><code>sonic-modal</code></strong> presents focused content in a <code><dialog></code> overlay with backdrop, enter/exit animation, and a built-in close control. Compose <strong><code>sonic-modal-title</code></strong> / <strong><code>sonic-modal-subtitle</code></strong> / <strong><code>sonic-modal-content</code></strong> / <strong><code>sonic-modal-actions</code></strong>, or use the default slot. Call <strong><code>show()</code></strong> on the element to open; use <strong><code>hideModal</code></strong> on action buttons or <strong><code>hide()</code></strong> from script. Set <strong><code>forceAction</code></strong> when dismissal must go through explicit actions only. Imperative dialogs: <strong><code>Modal.create()</code></strong> (also <strong><code>window.SonicModal</code></strong>).</p>
|
|
21
|
+
<h2 id="basic-example">Basic example</h2>
|
|
22
|
+
<p>Click the trigger to open. <strong><code>sonic-modal-actions</code></strong> lays out footer buttons; <strong><code>hideModal</code></strong> closes the modal on click. Scope form state with <strong><code>formDataProvider</code></strong> on <strong><code>sonic-modal-actions</code></strong> so child <strong><code>sonic-button</code></strong> elements share one publisher.</p>
|
|
20
23
|
<pre><code><sonic-button onclick="document.getElementById('modalExample').show()">
|
|
21
|
-
|
|
24
|
+
Open modal
|
|
22
25
|
</sonic-button>
|
|
23
26
|
<sonic-modal id="modalExample">
|
|
24
|
-
<sonic-modal-title
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<
|
|
27
|
+
<sonic-modal-title>
|
|
28
|
+
Export ready
|
|
29
|
+
<sonic-badge type="success" size="sm">New</sonic-badge>
|
|
30
|
+
</sonic-modal-title>
|
|
31
|
+
<sonic-modal-subtitle>Your report finished processing.</sonic-modal-subtitle>
|
|
28
32
|
<sonic-modal-content>
|
|
29
|
-
|
|
33
|
+
Download the CSV now or review the summary in your dashboard before sharing.
|
|
30
34
|
</sonic-modal-content>
|
|
31
35
|
<sonic-modal-actions formDataProvider="ModalMiniForm">
|
|
32
|
-
<sonic-button
|
|
33
|
-
|
|
36
|
+
<sonic-button minWidth="8rem" value="true" name="click">
|
|
37
|
+
Save draft
|
|
34
38
|
</sonic-button>
|
|
35
|
-
<sonic-button minWidth="8rem" type="success" hideModal>
|
|
39
|
+
<sonic-button minWidth="8rem" type="success" hideModal>Download</sonic-button>
|
|
36
40
|
</sonic-modal-actions>
|
|
37
41
|
</sonic-modal>
|
|
38
42
|
</code></pre>
|
|
39
|
-
<h2 id="
|
|
40
|
-
<
|
|
43
|
+
<h2 id="scrollable-content">Scrollable content</h2>
|
|
44
|
+
<p>Long copy scrolls inside the dialog. Default <strong><code>maxHeight</code></strong> is <code>90vh</code>. Default <strong><code>align</code></strong> is <code>left</code>.</p>
|
|
45
|
+
<pre><code><sonic-button onclick="document.getElementById('modalText').show()">Venue details</sonic-button>
|
|
41
46
|
<sonic-modal align="left" id="modalText">
|
|
42
|
-
<sonic-modal-title>
|
|
47
|
+
<sonic-modal-title>Hours and tickets</sonic-modal-title>
|
|
43
48
|
<sonic-modal-content>
|
|
44
49
|
<div class="prose">
|
|
45
50
|
<p>
|
|
46
|
-
<strong>
|
|
47
|
-
|
|
48
|
-
+ horaires spécifiques pour événements ou festivals&nbsp;
|
|
51
|
+
<strong>Opening hours</strong><br />
|
|
52
|
+
Wednesday–Saturday, 1:30 p.m.–7:00 p.m.; Sunday, 1:30 p.m.–6:00 p.m.
|
|
49
53
|
</p>
|
|
50
54
|
<p>
|
|
51
|
-
<strong>
|
|
52
|
-
|
|
53
|
-
réservations disponibles en ligne ou au guichet.&nbsp;&nbsp;<strong><br /></strong>
|
|
55
|
+
<strong>Ticketing</strong><br />
|
|
56
|
+
Some events require online or box-office reservations. Prices vary by event; booking ahead is recommended when capacity is limited.
|
|
54
57
|
</p>
|
|
55
58
|
<p>
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
conseillé de réserver les billets en avance pour s’assurer une place.
|
|
59
|
+
<strong>Contact</strong><br />
|
|
60
|
+
tickets@example.com · +33 3 28 33 48 33
|
|
59
61
|
</p>
|
|
60
62
|
<p>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<p>
|
|
65
|
-
<strong>+ d’infos <br /></strong>billetterie@laconditionpublique.com <br />+33 (0)328334833&nbsp;
|
|
66
|
-
</p>
|
|
67
|
-
<br />
|
|
68
|
-
<p>
|
|
69
|
-
<strong>Accès <br /></strong>14, place Faidherbe <br />59100 Roubaix <br />Métro / Tram : Arrêt
|
|
70
|
-
Eurotéléport, Ligne 2 <br />Bus / V’Lille : Arrêt Condition Publique&nbsp;
|
|
71
|
-
</p>
|
|
72
|
-
<p>
|
|
73
|
-
Accès handicapés : nous contacter avant votre venue au 03 28 33 48 33 ou par mail
|
|
74
|
-
billetterie@laconditionpublique.com
|
|
63
|
+
<strong>Access</strong><br />
|
|
64
|
+
14 Place Faidherbe, 59100 Roubaix<br />
|
|
65
|
+
Metro line 2, Eurotéléport stop
|
|
75
66
|
</p>
|
|
76
67
|
</div>
|
|
77
68
|
</sonic-modal-content>
|
|
78
69
|
</sonic-modal>
|
|
79
70
|
</code></pre>
|
|
80
71
|
<h2 id="force-action">Force action</h2>
|
|
81
|
-
<
|
|
72
|
+
<p>With <strong><code>forceAction</code></strong>, backdrop click, Escape, and the default close button are disabled. Provide <strong><code>sonic-modal-actions</code></strong> (or <strong><code>sonic-modal-close</code></strong>) so users can finish the flow.</p>
|
|
73
|
+
<pre><code><sonic-button onclick="document.getElementById('force').show()">Cookie consent</sonic-button>
|
|
82
74
|
<sonic-modal forceAction id="force">
|
|
83
|
-
<sonic-modal-title>
|
|
75
|
+
<sonic-modal-title>Allow analytics cookies?</sonic-modal-title>
|
|
84
76
|
<sonic-modal-content>
|
|
85
|
-
|
|
77
|
+
We use cookies to measure traffic and improve the product. You can change this later in settings.
|
|
86
78
|
</sonic-modal-content>
|
|
87
|
-
<sonic-modal-actions
|
|
88
|
-
<sonic-button hideModal minWidth="8rem">
|
|
89
|
-
<sonic-button hideModal minWidth="8rem" type="success">
|
|
79
|
+
<sonic-modal-actions>
|
|
80
|
+
<sonic-button hideModal minWidth="8rem">Decline</sonic-button>
|
|
81
|
+
<sonic-button hideModal minWidth="8rem" type="success">Accept</sonic-button>
|
|
90
82
|
</sonic-modal-actions>
|
|
91
83
|
</sonic-modal>
|
|
92
|
-
</sonic-modal>
|
|
93
84
|
</code></pre>
|
|
94
85
|
<h2 id="custom-dimensions">Custom dimensions</h2>
|
|
95
|
-
<
|
|
96
|
-
|
|
86
|
+
<p>Set <strong><code>width</code></strong> / <strong><code>height</code></strong> / <strong><code>maxWidth</code></strong> / <strong><code>maxHeight</code></strong> (CSS lengths). On narrow viewports the panel becomes a bottom sheet. Use <strong><code>rounded="none"</code></strong> for edge-to-edge media.</p>
|
|
87
|
+
<pre><code><sonic-button onclick="document.getElementById('CustomWidth').show()">Image preview</sonic-button>
|
|
88
|
+
<sonic-modal
|
|
89
|
+
rounded="none"
|
|
90
|
+
maxHeight="50vh"
|
|
91
|
+
maxWidth="90vw"
|
|
92
|
+
width="100%"
|
|
93
|
+
height="100%"
|
|
94
|
+
id="CustomWidth"
|
|
95
|
+
>
|
|
97
96
|
<sonic-image
|
|
98
97
|
cover
|
|
99
98
|
objectPosition="center 20%"
|
|
100
99
|
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
100
|
+
alt="View from an airplane window"
|
|
101
101
|
></sonic-image>
|
|
102
102
|
</sonic-modal>
|
|
103
103
|
</code></pre>
|
|
104
104
|
<h2 id="fullscreen">Fullscreen</h2>
|
|
105
|
-
<
|
|
105
|
+
<p><strong><code>fullscreen</code></strong> fills the viewport and hides the backdrop.</p>
|
|
106
|
+
<pre><code><sonic-button onclick="document.getElementById('Fullscreen').show()">Fullscreen</sonic-button>
|
|
106
107
|
<sonic-modal fullscreen id="Fullscreen">
|
|
107
108
|
<sonic-image
|
|
108
109
|
cover
|
|
109
110
|
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
111
|
+
alt="View from an airplane window"
|
|
110
112
|
></sonic-image>
|
|
111
113
|
</sonic-modal>
|
|
112
114
|
</code></pre>
|
|
115
|
+
<h2 id="programmatic-creation">Programmatic creation</h2>
|
|
116
|
+
<p>Use <strong><code>Modal.create(options)</code></strong> when there is no modal in the template—for confirmations, toasts that need a follow-up, or one-off flows from script. The modal is appended to the nearest <strong><code>sonic-theme</code></strong> pop container (same as declarative modals), opened automatically, and returns the <strong><code>sonic-modal</code></strong> instance. Set <strong><code>removeOnHide: true</code></strong> to detach it from the DOM after close. In the browser, <strong><code>window.SonicModal</code></strong> is the same class after the module loads.</p>
|
|
117
|
+
<p>Pass <strong><code>title</code></strong> / <strong><code>subtitle</code></strong> / <strong><code>content</code></strong> / <strong><code>actions</code></strong> as HTML strings (or Lit template results from application code). Put <strong><code>hideModal</code></strong> on action buttons in the <strong><code>actions</code></strong> string so clicks close the dialog.</p>
|
|
118
|
+
<pre><code><sonic-button
|
|
119
|
+
onclick="window.SonicModal.create({
|
|
120
|
+
title: 'Send invite?',
|
|
121
|
+
subtitle: 'The recipient can join immediately.',
|
|
122
|
+
content: 'We will email an invitation to alex@example.com.',
|
|
123
|
+
actions: '&lt;sonic-button hideModal minWidth=\'8rem\'&gt;Cancel&lt;/sonic-button&gt;&lt;sonic-button hideModal minWidth=\'8rem\' type=\'success\'&gt;Send&lt;/sonic-button&gt;',
|
|
124
|
+
removeOnHide: true
|
|
125
|
+
})"
|
|
126
|
+
>
|
|
127
|
+
Open programmatic modal
|
|
128
|
+
</sonic-button>
|
|
129
|
+
</code></pre>
|
|
130
|
+
<pre><code class="language-javascript">import { Modal } from "@supersoniks/concorde/core/components/ui/modal/modal";
|
|
131
|
+
|
|
132
|
+
const modal = Modal.create({
|
|
133
|
+
title: "Delete project?",
|
|
134
|
+
subtitle: "This cannot be undone.",
|
|
135
|
+
content: "<p>All files in <strong>Acme HQ</strong> will be removed.</p>",
|
|
136
|
+
actions: `
|
|
137
|
+
<sonic-button hideModal minWidth="8rem">Cancel</sonic-button>
|
|
138
|
+
<sonic-button hideModal minWidth="8rem" type="danger">Delete</sonic-button>
|
|
139
|
+
`,
|
|
140
|
+
removeOnHide: true,
|
|
141
|
+
forceAction: false,
|
|
142
|
+
maxWidth: "min(100vw, 28rem)",
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
modal.addEventListener("hidden", () => {
|
|
146
|
+
console.log("Modal removed from the DOM");
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
// Or close from script: await modal.hide(); await modal.dispose();
|
|
150
|
+
</code></pre>
|
|
151
|
+
<h2 id="api-reference">API reference</h2>
|
|
152
|
+
<h3 id="sonic-modal"><code>sonic-modal</code></h3>
|
|
153
|
+
<table>
|
|
154
|
+
<thead>
|
|
155
|
+
<tr>
|
|
156
|
+
<th>Attribute</th>
|
|
157
|
+
<th>Values</th>
|
|
158
|
+
<th>Description</th>
|
|
159
|
+
</tr>
|
|
160
|
+
</thead>
|
|
161
|
+
<tbody><tr>
|
|
162
|
+
<td><code>align</code></td>
|
|
163
|
+
<td><code>left</code> (default) · <code>center</code> · <code>right</code></td>
|
|
164
|
+
<td>Align title and slotted content</td>
|
|
165
|
+
</tr>
|
|
166
|
+
<tr>
|
|
167
|
+
<td><code>maxWidth</code></td>
|
|
168
|
+
<td>CSS length (default <code>min(100vw, 40rem)</code>)</td>
|
|
169
|
+
<td>Dialog max width</td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td><code>maxHeight</code></td>
|
|
173
|
+
<td>CSS length (default <code>90vh</code>)</td>
|
|
174
|
+
<td>Scrollable body max height</td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td><code>width</code></td>
|
|
178
|
+
<td>CSS length (default <code>100%</code>)</td>
|
|
179
|
+
<td>Dialog width</td>
|
|
180
|
+
</tr>
|
|
181
|
+
<tr>
|
|
182
|
+
<td><code>height</code></td>
|
|
183
|
+
<td>CSS length (default <code>fit-content</code>)</td>
|
|
184
|
+
<td>Dialog height</td>
|
|
185
|
+
</tr>
|
|
186
|
+
<tr>
|
|
187
|
+
<td><code>paddingX</code> · <code>paddingY</code></td>
|
|
188
|
+
<td>CSS length</td>
|
|
189
|
+
<td>Override content padding (<code>--sc-modal-px</code> / <code>--sc-modal-py</code>)</td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<td><code>zIndex</code></td>
|
|
193
|
+
<td>CSS number</td>
|
|
194
|
+
<td>Stacking order (default <code>990</code>)</td>
|
|
195
|
+
</tr>
|
|
196
|
+
<tr>
|
|
197
|
+
<td><code>effect</code></td>
|
|
198
|
+
<td><code>slide</code> (default) · <code>fade</code> · <code>none</code></td>
|
|
199
|
+
<td>Open/close animation</td>
|
|
200
|
+
</tr>
|
|
201
|
+
<tr>
|
|
202
|
+
<td><code>fullscreen</code></td>
|
|
203
|
+
<td>boolean</td>
|
|
204
|
+
<td>Full viewport; no backdrop</td>
|
|
205
|
+
</tr>
|
|
206
|
+
<tr>
|
|
207
|
+
<td><code>forceAction</code></td>
|
|
208
|
+
<td>boolean</td>
|
|
209
|
+
<td>Disable overlay, Escape, and default close button</td>
|
|
210
|
+
</tr>
|
|
211
|
+
<tr>
|
|
212
|
+
<td><code>noCloseButton</code></td>
|
|
213
|
+
<td>boolean</td>
|
|
214
|
+
<td>Hide built-in close when not <strong><code>forceAction</code></strong></td>
|
|
215
|
+
</tr>
|
|
216
|
+
<tr>
|
|
217
|
+
<td><code>closeButtonType</code></td>
|
|
218
|
+
<td><strong><code>sonic-button</code></strong> <code>type</code></td>
|
|
219
|
+
<td>Style of built-in close</td>
|
|
220
|
+
</tr>
|
|
221
|
+
<tr>
|
|
222
|
+
<td><code>visible</code></td>
|
|
223
|
+
<td>boolean</td>
|
|
224
|
+
<td>When toggled, opens or closes the dialog</td>
|
|
225
|
+
</tr>
|
|
226
|
+
<tr>
|
|
227
|
+
<td><code>removeOnHide</code></td>
|
|
228
|
+
<td>boolean</td>
|
|
229
|
+
<td>Remove element from DOM after close</td>
|
|
230
|
+
</tr>
|
|
231
|
+
<tr>
|
|
232
|
+
<td><code>removeHashOnHide</code></td>
|
|
233
|
+
<td>boolean</td>
|
|
234
|
+
<td>Clear URL hash on close</td>
|
|
235
|
+
</tr>
|
|
236
|
+
<tr>
|
|
237
|
+
<td><code>closeOnLocationChange</code></td>
|
|
238
|
+
<td>boolean</td>
|
|
239
|
+
<td>Close when app location changes</td>
|
|
240
|
+
</tr>
|
|
241
|
+
<tr>
|
|
242
|
+
<td><code>resetDataProviderOnHide</code></td>
|
|
243
|
+
<td>string</td>
|
|
244
|
+
<td>Reset named <strong><code>formDataProvider</code></strong> on close</td>
|
|
245
|
+
</tr>
|
|
246
|
+
<tr>
|
|
247
|
+
<td><code>rounded</code></td>
|
|
248
|
+
<td><code>none</code></td>
|
|
249
|
+
<td>Square dialog corners (useful for full-bleed media)</td>
|
|
250
|
+
</tr>
|
|
251
|
+
</tbody></table>
|
|
252
|
+
<table>
|
|
253
|
+
<thead>
|
|
254
|
+
<tr>
|
|
255
|
+
<th>Slot</th>
|
|
256
|
+
<th>Description</th>
|
|
257
|
+
</tr>
|
|
258
|
+
</thead>
|
|
259
|
+
<tbody><tr>
|
|
260
|
+
<td><em>(default)</em></td>
|
|
261
|
+
<td>Additional markup alongside structured children</td>
|
|
262
|
+
</tr>
|
|
263
|
+
</tbody></table>
|
|
264
|
+
<table>
|
|
265
|
+
<thead>
|
|
266
|
+
<tr>
|
|
267
|
+
<th>Event</th>
|
|
268
|
+
<th>Description</th>
|
|
269
|
+
</tr>
|
|
270
|
+
</thead>
|
|
271
|
+
<tbody><tr>
|
|
272
|
+
<td><code>show</code></td>
|
|
273
|
+
<td>Fired when open animation completes</td>
|
|
274
|
+
</tr>
|
|
275
|
+
<tr>
|
|
276
|
+
<td><code>hide</code></td>
|
|
277
|
+
<td>Fired when close starts</td>
|
|
278
|
+
</tr>
|
|
279
|
+
<tr>
|
|
280
|
+
<td><code>hidden</code></td>
|
|
281
|
+
<td>Fired when close finishes</td>
|
|
282
|
+
</tr>
|
|
283
|
+
</tbody></table>
|
|
284
|
+
<p>Methods: <strong><code>show()</code></strong> · <strong><code>hide()</code></strong> · <strong><code>dispose()</code></strong> (hide and remove). Static <strong><code>Modal.create(options)</code></strong> appends a modal to the theme pop container and opens it. <strong><code>options</code></strong> / <strong><code>styleSheet</code></strong> are JavaScript-only.</p>
|
|
285
|
+
<h3 id="sonic-modal-title--sonic-modal-subtitle--sonic-modal-content"><code>sonic-modal-title</code> · <code>sonic-modal-subtitle</code> · <code>sonic-modal-content</code></h3>
|
|
286
|
+
<table>
|
|
287
|
+
<thead>
|
|
288
|
+
<tr>
|
|
289
|
+
<th>Slot</th>
|
|
290
|
+
<th>Description</th>
|
|
291
|
+
</tr>
|
|
292
|
+
</thead>
|
|
293
|
+
<tbody><tr>
|
|
294
|
+
<td><em>(default)</em></td>
|
|
295
|
+
<td>Title, subtitle, or main body content</td>
|
|
296
|
+
</tr>
|
|
297
|
+
</tbody></table>
|
|
298
|
+
<h3 id="sonic-modal-actions"><code>sonic-modal-actions</code></h3>
|
|
299
|
+
<table>
|
|
300
|
+
<thead>
|
|
301
|
+
<tr>
|
|
302
|
+
<th>Slot</th>
|
|
303
|
+
<th>Description</th>
|
|
304
|
+
</tr>
|
|
305
|
+
</thead>
|
|
306
|
+
<tbody><tr>
|
|
307
|
+
<td><em>(default)</em></td>
|
|
308
|
+
<td>Footer actions (typically <strong><code>sonic-button</code></strong>)</td>
|
|
309
|
+
</tr>
|
|
310
|
+
</tbody></table>
|
|
311
|
+
<p>Put <strong><code>hideModal</code></strong> on a <strong><code>sonic-button</code></strong> to close the parent modal on click. Ancestor <strong><code>formDataProvider</code></strong> on this element is inherited by child form controls.</p>
|
|
312
|
+
<h3 id="sonic-modal-close"><code>sonic-modal-close</code></h3>
|
|
313
|
+
<p>Rendered automatically unless <strong><code>forceAction</code></strong> or <strong><code>noCloseButton</code></strong> is set. Calls <strong><code>hide()</code></strong> on the parent modal.</p>
|
|
314
|
+
<table>
|
|
315
|
+
<thead>
|
|
316
|
+
<tr>
|
|
317
|
+
<th>Attribute</th>
|
|
318
|
+
<th>Values</th>
|
|
319
|
+
<th>Description</th>
|
|
320
|
+
</tr>
|
|
321
|
+
</thead>
|
|
322
|
+
<tbody><tr>
|
|
323
|
+
<td><code>type</code></td>
|
|
324
|
+
<td><strong><code>sonic-button</code></strong> <code>type</code></td>
|
|
325
|
+
<td>Close button color</td>
|
|
326
|
+
</tr>
|
|
327
|
+
<tr>
|
|
328
|
+
<td><code>reset</code></td>
|
|
329
|
+
<td>string</td>
|
|
330
|
+
<td>Passed to inner <strong><code>sonic-button</code></strong> <strong><code>reset</code></strong></td>
|
|
331
|
+
</tr>
|
|
332
|
+
<tr>
|
|
333
|
+
<td><code>translation</code></td>
|
|
334
|
+
<td>UI label object</td>
|
|
335
|
+
<td>Overrides default close <strong><code>aria-label</code></strong></td>
|
|
336
|
+
</tr>
|
|
337
|
+
</tbody></table>
|
|
113
338
|
|
|
114
339
|
</article>
|
|
115
340
|
</main>
|