@supersoniks/concorde 4.9.0 → 4.9.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/build-infos.json +1 -1
- package/concorde-core.bundle.js +195 -195
- package/concorde-core.es.js +3390 -3370
- package/dist/concorde-core.bundle.js +195 -195
- package/dist/concorde-core.es.js +3390 -3370
- package/dist/docs-mock-api-sw.js +3 -1
- package/dist/docs-mock-api-sw.js.map +2 -2
- package/dist/js/core/decorators/api.js +64 -12
- package/dist/js/core/decorators/api.js.map +1 -1
- package/dist/js/core/utils/HTML.js +4 -5
- package/dist/js/core/utils/HTML.js.map +1 -1
- package/dist/robots.txt +15 -1
- package/dist/types/core/decorators/api.d.ts +14 -1
- package/dist/types/core/decorators/api.d.ts.map +1 -1
- package/dist/types/core/utils/HTML.d.ts.map +1 -1
- package/docs/assets/{index-t0-i22oI.css → index-Bnp7gVaA.css} +1 -1
- package/docs/assets/{index-BEgZEIbv.js → index-hElUgV9_.js} +894 -552
- package/docs/crawl/core/components/functional/date/date.html +190 -0
- package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
- package/docs/crawl/core/components/functional/if/if.html +27 -0
- package/docs/crawl/core/components/functional/list/list.html +70 -0
- package/docs/crawl/core/components/functional/mix/mix.html +45 -0
- package/docs/crawl/core/components/functional/queue/queue.html +96 -0
- package/docs/crawl/core/components/functional/router/router.html +106 -0
- package/docs/crawl/core/components/functional/sdui/sdui.html +269 -0
- package/docs/crawl/core/components/functional/states/states.html +66 -0
- package/docs/crawl/core/components/functional/submit/submit.html +160 -0
- package/docs/crawl/core/components/functional/subscriber/subscriber.html +67 -0
- package/docs/crawl/core/components/functional/value/value.html +51 -0
- package/docs/crawl/core/components/ui/alert/alert.html +110 -0
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +23 -0
- package/docs/crawl/core/components/ui/badge/badge.html +119 -0
- package/docs/crawl/core/components/ui/button/button.html +149 -0
- package/docs/crawl/core/components/ui/captcha/captcha.html +30 -0
- package/docs/crawl/core/components/ui/card/card.html +99 -0
- package/docs/crawl/core/components/ui/divider/divider.html +58 -0
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +135 -0
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +79 -0
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +62 -0
- package/docs/crawl/core/components/ui/form/input/input.html +109 -0
- package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +106 -0
- package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
- package/docs/crawl/core/components/ui/form/select/select.html +73 -0
- package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
- package/docs/crawl/core/components/ui/group/group.html +82 -0
- package/docs/crawl/core/components/ui/icon/icon.html +133 -0
- package/docs/crawl/core/components/ui/image/image.html +110 -0
- package/docs/crawl/core/components/ui/link/link.html +42 -0
- package/docs/crawl/core/components/ui/loader/loader.html +50 -0
- package/docs/crawl/core/components/ui/menu/menu.html +322 -0
- package/docs/crawl/core/components/ui/modal/modal.html +117 -0
- package/docs/crawl/core/components/ui/pop/pop.html +102 -0
- package/docs/crawl/core/components/ui/progress/progress.html +58 -0
- package/docs/crawl/core/components/ui/table/table.html +413 -0
- package/docs/crawl/core/components/ui/toast/toast.html +122 -0
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +79 -0
- package/docs/crawl/docs/_core-concept/dataFlow.html +166 -0
- package/docs/crawl/docs/_core-concept/overview.html +66 -0
- package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +116 -0
- package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
- package/docs/crawl/docs/_decorators/bind.html +141 -0
- package/docs/crawl/docs/_decorators/get.html +120 -0
- package/docs/crawl/docs/_decorators/handle.html +165 -0
- package/docs/crawl/docs/_decorators/on-assign.html +355 -0
- package/docs/crawl/docs/_decorators/patch.html +52 -0
- package/docs/crawl/docs/_decorators/post.html +102 -0
- package/docs/crawl/docs/_decorators/publish.html +61 -0
- package/docs/crawl/docs/_decorators/put.html +49 -0
- package/docs/crawl/docs/_decorators/subscribe.html +109 -0
- package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
- package/docs/crawl/docs/_directives/sub.html +93 -0
- package/docs/crawl/docs/_getting-started/ai-agents.html +134 -0
- package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
- package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
- package/docs/crawl/docs/_getting-started/create-a-component.html +111 -0
- package/docs/crawl/docs/_getting-started/my-first-component.html +189 -0
- package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
- package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
- package/docs/crawl/docs/_getting-started/start.html +76 -0
- package/docs/crawl/docs/_getting-started/theming.html +85 -0
- package/docs/crawl/docs/_misc/api-configuration.html +149 -0
- package/docs/crawl/docs/_misc/dataProviderKey.html +135 -0
- package/docs/crawl/docs/_misc/docs-mock-api.html +146 -0
- package/docs/crawl/docs/_misc/dynamic-path.html +180 -0
- package/docs/crawl/docs/_misc/endpoint.html +50 -0
- package/docs/crawl/docs/_misc/html-integration.html +47 -0
- package/docs/crawl/hubs/decorators.html +467 -0
- package/docs/crawl/hubs/form-components.html +357 -0
- package/docs/crawl/hubs/remote-data.html +374 -0
- package/docs/crawl/index.html +99 -0
- package/docs/docs-mock-api-sw.js +3 -1
- package/docs/docs-mock-api-sw.js.map +2 -2
- package/docs/index.html +3 -3
- package/docs/llms-full.txt +5423 -0
- package/docs/llms.txt +102 -0
- package/docs/robots.txt +15 -1
- package/docs/sitemap.xml +231 -0
- package/docs/src/docs/_decorators/ancestor-attribute.md +56 -8
- package/docs/src/docs/_decorators/get.md +47 -1
- package/docs/src/docs/search/docs-search.json +92 -2
- package/docs/src/tsconfig.declarations.json +22 -0
- package/docs/src/tsconfig.emit.json +23 -0
- package/docs/src/tsconfig.json +3 -285
- package/index.html +1 -0
- package/package.json +1 -1
- package/public/docs-mock-api-sw.js +3 -1
- package/public/docs-mock-api-sw.js.map +2 -2
- package/public/robots.txt +15 -1
- package/scripts/generate-crawl-docs.mjs +569 -0
- package/scripts/post-build-docs.js +18 -14
- package/src/core/decorators/api.spec.ts +74 -4
- package/src/core/decorators/api.ts +103 -20
- package/src/core/decorators/subscriber/ancestorAttribute.spec.ts +42 -0
- package/src/core/utils/HTML.ts +4 -5
- package/src/docs/_decorators/get.md +47 -1
- package/src/docs/components/docs-demo-sources.ts +7 -2
- package/src/docs/example/decorators-demo-geo.ts +5 -0
- package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +72 -31
- package/src/docs/mock-api/router.ts +3 -1
- package/src/docs/search/docs-search.json +92 -2
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html" data-doc-id="core/components/ui/card/card">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Card — Concorde</title>
|
|
7
|
+
<meta name="description" content="Suffix">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/card/card">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/card/card.md/card" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Card</strong>. Suffix <span>Doc ID: <code>core/components/ui/card/card</code>. Keywords: Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html">https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html</a>.</span></p>
|
|
19
|
+
<h1 id="card">Card</h1>
|
|
20
|
+
<h2 id="type">Type</h2>
|
|
21
|
+
<pre><code><div class="grid grid-cols-3 gap-3">
|
|
22
|
+
<sonic-card type="base">Base</sonic-card>
|
|
23
|
+
<sonic-card type="light">Light</sonic-card>
|
|
24
|
+
<sonic-card type="primary">Primary</sonic-card>
|
|
25
|
+
<sonic-card type="warning">Warning</sonic-card>
|
|
26
|
+
<sonic-card type="danger">Danger</sonic-card>
|
|
27
|
+
<sonic-card type="success">Success</sonic-card>
|
|
28
|
+
<sonic-card type="info">Info</sonic-card>
|
|
29
|
+
<sonic-card type="neutral">Neutral</sonic-card>
|
|
30
|
+
<sonic-card type="invert">Invert</sonic-card>
|
|
31
|
+
</div>
|
|
32
|
+
</code></pre>
|
|
33
|
+
<h2 id="header">Header</h2>
|
|
34
|
+
<pre><code><div class="grid grid-cols-1 gap-3">
|
|
35
|
+
<sonic-card >
|
|
36
|
+
<sonic-card-header label="Header simple, titre géré via l'attribut : label" description="Description via l'attribut : description">
|
|
37
|
+
</sonic-card-header>
|
|
38
|
+
</sonic-card>
|
|
39
|
+
<sonic-card type="neutral">
|
|
40
|
+
<sonic-card-header label="Header composé">
|
|
41
|
+
<sonic-card-header-description>Description rendu via le composant : "sonic-card-header-description"</sonic-card-header-description>
|
|
42
|
+
<div slot="suffix" class="flex">
|
|
43
|
+
Suffix
|
|
44
|
+
</div>
|
|
45
|
+
</sonic-card-header>
|
|
46
|
+
</sonic-card>
|
|
47
|
+
<sonic-card type="invert">
|
|
48
|
+
<sonic-card-header>
|
|
49
|
+
<div>Header custom</div>
|
|
50
|
+
<div class="text-lg text-danger">Tout le contenu excepté l'icône ✈ passe par le slot du header</div>
|
|
51
|
+
<span slot="suffix" >✈</span>
|
|
52
|
+
</sonic-card-header>
|
|
53
|
+
</sonic-card>
|
|
54
|
+
</div>
|
|
55
|
+
</code></pre>
|
|
56
|
+
<h2 id="main">Main</h2>
|
|
57
|
+
<pre><code><sonic-card >
|
|
58
|
+
<sonic-card-main >
|
|
59
|
+
<h3>Main area</h3>
|
|
60
|
+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
|
|
61
|
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ" title="Big Buck Bunny (Blender Foundation)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
62
|
+
</sonic-card-main>
|
|
63
|
+
</sonic-card>
|
|
64
|
+
</code></pre>
|
|
65
|
+
<h2 id="footer">Footer</h2>
|
|
66
|
+
<pre><code><sonic-card >
|
|
67
|
+
<sonic-card-footer >
|
|
68
|
+
<div >
|
|
69
|
+
<h4 class="mb-0">Footer area</h4>
|
|
70
|
+
<small>Debitis deleniti eligendi natus dolorem aufdh.</small>
|
|
71
|
+
<div>
|
|
72
|
+
🛫 ✈ ✈ ✈ ✈ ✈ 🛬
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</sonic-card-footer>
|
|
76
|
+
</sonic-card>
|
|
77
|
+
</code></pre>
|
|
78
|
+
<h2 id="example-of-use">Example of use</h2>
|
|
79
|
+
<pre><code><sonic-card >
|
|
80
|
+
<sonic-card-header label="Header" description="Header description">
|
|
81
|
+
<sonic-icon library="iconoir" name="nav-arrow-right" slot="suffix" ></sonic-icon>
|
|
82
|
+
</sonic-card-header>
|
|
83
|
+
<sonic-card-main >
|
|
84
|
+
<sonic-image rounded ratio="11/4" src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg">
|
|
85
|
+
</sonic-image>
|
|
86
|
+
<p><b>Main</b> - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
|
|
87
|
+
</sonic-card-main>
|
|
88
|
+
<sonic-card-footer>
|
|
89
|
+
<div>
|
|
90
|
+
<i>Footer</i> - Amet consectetur adipisicing
|
|
91
|
+
</div>
|
|
92
|
+
</sonic-card-footer>
|
|
93
|
+
</sonic-card>
|
|
94
|
+
</code></pre>
|
|
95
|
+
|
|
96
|
+
</article>
|
|
97
|
+
</main>
|
|
98
|
+
</body>
|
|
99
|
+
</html>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/divider/divider.html" data-doc-id="core/components/ui/divider/divider">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Divider — Concorde</title>
|
|
7
|
+
<meta name="description" content="Default
|
|
8
|
+
|
|
9
|
+
Align
|
|
10
|
+
|
|
11
|
+
Size
|
|
12
|
+
|
|
13
|
+
Custom
|
|
14
|
+
|
|
15
|
+
Lorem ipsum dolor sit amet +25">
|
|
16
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component">
|
|
17
|
+
<meta name="concorde-doc-id" content="core/components/ui/divider/divider">
|
|
18
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/divider/divider.html">
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<header>
|
|
22
|
+
<p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/divider/divider.md/divider" rel="nofollow">interactive version</a></p>
|
|
23
|
+
</header>
|
|
24
|
+
<main>
|
|
25
|
+
<article>
|
|
26
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Divider</strong>. Default
|
|
27
|
+
|
|
28
|
+
Align
|
|
29
|
+
|
|
30
|
+
Size
|
|
31
|
+
|
|
32
|
+
Custom
|
|
33
|
+
|
|
34
|
+
Lorem ipsum dolor sit amet +25 <span>Doc ID: <code>core/components/ui/divider/divider</code>. Keywords: Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/divider/divider.html">https://concorde.supersoniks.org/crawl/core/components/ui/divider/divider.html</a>.</span></p>
|
|
35
|
+
<h1 id="divider">Divider</h1>
|
|
36
|
+
<h2 id="default">Default</h2>
|
|
37
|
+
<pre><code><sonic-divider></sonic-divider>
|
|
38
|
+
</code></pre>
|
|
39
|
+
<h2 id="align">Align</h2>
|
|
40
|
+
<pre><code><sonic-divider label="Default centered label"></sonic-divider>
|
|
41
|
+
<sonic-divider label="Right" align="right"></sonic-divider>
|
|
42
|
+
<sonic-divider label="Center" align="center"></sonic-divider>
|
|
43
|
+
<sonic-divider label="Left" align="left"></sonic-divider>
|
|
44
|
+
</code></pre>
|
|
45
|
+
<h2 id="size">Size</h2>
|
|
46
|
+
<pre><code><sonic-divider size="xs" label="xs"></sonic-divider>
|
|
47
|
+
<sonic-divider size="sm" label="sm"></sonic-divider>
|
|
48
|
+
<sonic-divider size="md" label="md"></sonic-divider>
|
|
49
|
+
<sonic-divider size="lg" label="lg"></sonic-divider>
|
|
50
|
+
</code></pre>
|
|
51
|
+
<h2 id="custom">Custom</h2>
|
|
52
|
+
<pre><code><sonic-divider><span class="mr-2">Lorem ipsum dolor sit amet</span><sonic-badge type="danger">+25</sonic-badge></sonic-divider>
|
|
53
|
+
</code></pre>
|
|
54
|
+
|
|
55
|
+
</article>
|
|
56
|
+
</main>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/checkbox/checkbox.html" data-doc-id="core/components/ui/form/checkbox/checkbox">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Checkbox — Concorde</title>
|
|
7
|
+
<meta name="description" content=">Already checked checkbox">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/checkbox/checkbox, checkbox, Checkbox, UI component, form, sonic-checkbox, web component, blacklistFlags, ?blacklistFlags=racist,sexist,…, flags, filterDocsJokes, src/docs/mock-api/fixtures.ts">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/checkbox/checkbox">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/checkbox/checkbox.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/checkbox/checkbox.md/checkbox" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Checkbox</strong>. >Already checked checkbox <span>Doc ID: <code>core/components/ui/form/checkbox/checkbox</code>. Keywords: Concorde, supersoniks, core/components/ui/form/checkbox/checkbox, checkbox, Checkbox, UI component, form, sonic-checkbox, web component, blacklistFlags, ?blacklistFlags=racist,sexist,…, flags, filterDocsJokes, src/docs/mock-api/fixtures.ts. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/checkbox/checkbox.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/checkbox/checkbox.html</a>.</span></p>
|
|
19
|
+
<h1 id="checkbox">Checkbox</h1>
|
|
20
|
+
<h2 id="size">Size</h2>
|
|
21
|
+
<pre><code><div class="grid gap-2">
|
|
22
|
+
<sonic-checkbox size="2xs">2xs checkbox</sonic-checkbox>
|
|
23
|
+
<sonic-checkbox size="xs">xs checkbox</sonic-checkbox>
|
|
24
|
+
<sonic-checkbox size="sm">sm checkbox</sonic-checkbox>
|
|
25
|
+
<sonic-checkbox>default checkbox</sonic-checkbox>
|
|
26
|
+
<sonic-checkbox size="lg">lg checkbox</sonic-checkbox>
|
|
27
|
+
<sonic-checkbox size="xl">xl checkbox</sonic-checkbox>
|
|
28
|
+
<sonic-checkbox size="2xl">2xl checkbox</sonic-checkbox>
|
|
29
|
+
</div>
|
|
30
|
+
</code></pre>
|
|
31
|
+
<h2 id="checked">Checked</h2>
|
|
32
|
+
<pre><code><sonic-checkbox checked
|
|
33
|
+
>Already checked checkbox
|
|
34
|
+
</sonic-checkbox>
|
|
35
|
+
</code></pre>
|
|
36
|
+
<h2 id="disabled">Disabled</h2>
|
|
37
|
+
<pre><code><sonic-checkbox disabled
|
|
38
|
+
>Disabled checkbox
|
|
39
|
+
</sonic-checkbox>
|
|
40
|
+
</code></pre>
|
|
41
|
+
<h2 id="disabled-and-checked">Disabled and checked</h2>
|
|
42
|
+
<pre><code><sonic-checkbox disabled checked
|
|
43
|
+
>Disabled but already checked checkbox
|
|
44
|
+
</sonic-checkbox>
|
|
45
|
+
</code></pre>
|
|
46
|
+
<h2 id="checkbox-with-link">Checkbox with link</h2>
|
|
47
|
+
<pre><code><sonic-checkbox>Checkbox with <sonic-link href="#" class="underline text-info">link</sonic-link>
|
|
48
|
+
</code></pre>
|
|
49
|
+
<h2 id="check-all-checkbox">Check all checkbox</h2>
|
|
50
|
+
<pre><code><div formDataProvider="checkbox-check-all-demo" dataProvider="checkbox-check-all-demo">
|
|
51
|
+
<sonic-checkbox name='someSharedName' value="all" checksAll>All</sonic-checkbox>
|
|
52
|
+
<sonic-divider></sonic-divider>
|
|
53
|
+
<div class="grid gap-2">
|
|
54
|
+
<sonic-checkbox name="someSharedName" value="foo">Foo</sonic-checkbox>
|
|
55
|
+
<sonic-checkbox name="someSharedName" value="bar">Bar</sonic-checkbox>
|
|
56
|
+
</div>
|
|
57
|
+
<sonic-divider></sonic-divider>
|
|
58
|
+
<div>
|
|
59
|
+
<span>Enabling unsetOnDisconect ensures that outdated or irrelevant values are not retained in the form state once their associated inputs are no longer rendered.</span>
|
|
60
|
+
<div id="prunable-checkbox" class="flex gap-2 items-center">
|
|
61
|
+
<sonic-checkbox name="someSharedName" value="baz">Baz</sonic-checkbox>
|
|
62
|
+
<sonic-button variant="ghost" shape="circle" unique name="toggleCheckboxExistance" onclick="document.getElementById('prunable-checkbox').remove();" value="true"><sonic-icon library="fontAwesome" prefix="solid" name="trash"></sonic-icon></sonic-button>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</code></pre>
|
|
66
|
+
<h2 id="example-of-use--blacklist--queue">Example of use — blacklist + queue</h2>
|
|
67
|
+
<p>Checked <strong><code>blacklistFlags</code></strong> values are sent to the mock API (<code>?blacklistFlags=racist,sexist,…</code>), which excludes jokes whose <strong><code>flags</code></strong> match (see <code>filterDocsJokes</code> in <code>src/docs/mock-api/fixtures.ts</code>).</p>
|
|
68
|
+
<p><docs-lit-demo for="docs-joke-blacklist-demo"></docs-lit-demo></p>
|
|
69
|
+
|
|
70
|
+
</article>
|
|
71
|
+
</main>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html" data-doc-id="core/components/ui/form/fieldset/fieldset">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Fieldset — Concorde</title>
|
|
7
|
+
<meta name="description" content="Default">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/fieldset/fieldset">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/fieldset/fieldset.md/fieldset" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Fieldset</strong>. Default <span>Doc ID: <code>core/components/ui/form/fieldset/fieldset</code>. Keywords: Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html</a>.</span></p>
|
|
19
|
+
<h1 id="fieldset">Fieldset</h1>
|
|
20
|
+
<h2 id="variant">Variant</h2>
|
|
21
|
+
<pre><code><sonic-fieldset variant="default" >
|
|
22
|
+
Default
|
|
23
|
+
</sonic-fieldset>
|
|
24
|
+
<sonic-fieldset variant="ghost" >
|
|
25
|
+
Ghost
|
|
26
|
+
</sonic-fieldset>
|
|
27
|
+
<sonic-fieldset variant="shadow" >
|
|
28
|
+
Shadow
|
|
29
|
+
</sonic-fieldset>
|
|
30
|
+
</code></pre>
|
|
31
|
+
<h2 id="legend">Legend</h2>
|
|
32
|
+
<pre><code><sonic-fieldset>
|
|
33
|
+
<sonic-legend label="Legend via attribut : label" description="Description via attribut : description">
|
|
34
|
+
</sonic-legend>
|
|
35
|
+
</sonic-fieldset>
|
|
36
|
+
<sonic-fieldset>
|
|
37
|
+
<sonic-legend iconLibrary="iconoir" iconName="pin-alt">
|
|
38
|
+
Custom legend via <b>slot</b>
|
|
39
|
+
<sonic-legend-description>
|
|
40
|
+
Description via composant : sonic-legend-description
|
|
41
|
+
</sonic-legend-description>
|
|
42
|
+
</sonic-legend>
|
|
43
|
+
</sonic-fieldset>
|
|
44
|
+
</code></pre>
|
|
45
|
+
<h2 id="short-hand">Short hand</h2>
|
|
46
|
+
<pre><code><sonic-fieldset
|
|
47
|
+
label="All props on fieldset tag"
|
|
48
|
+
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
|
|
49
|
+
iconLibrary="iconoir"
|
|
50
|
+
iconName="user">
|
|
51
|
+
</sonic-fieldset>
|
|
52
|
+
</code></pre>
|
|
53
|
+
<h2 id="example-of-use">Example of use</h2>
|
|
54
|
+
<pre><code><sonic-div formDataProvider="user_create">
|
|
55
|
+
<form action="/inscription?lang=fr" method="POST" class="mb-20" accept-charset="UTF-8" id="youpla">
|
|
56
|
+
<sonic-fieldset form="formid" collapsible="true" collapsed="false">
|
|
57
|
+
<sonic-legend iconLibrary="iconoir" iconName="user">
|
|
58
|
+
Informations personnelles
|
|
59
|
+
<span slot="description">Description du fieldset lorem ipsum dolor</span>
|
|
60
|
+
<sonic-pop class="inline-block" slot="suffix">
|
|
61
|
+
<sonic-button shape="circle" variant="ghost">
|
|
62
|
+
<sonic-icon library="iconoir" size="lg" name="more-vert"></sonic-icon
|
|
63
|
+
></sonic-button>
|
|
64
|
+
<sonic-menu slot="content" minWidth="12rem">
|
|
65
|
+
<sonic-menu-item>Mentions légales</sonic-menu-item>
|
|
66
|
+
<sonic-menu-item>Conditions générales d'utilisation</sonic-menu-item>
|
|
67
|
+
</sonic-menu>
|
|
68
|
+
</sonic-pop>
|
|
69
|
+
</sonic-legend>
|
|
70
|
+
<sonic-form-layout>
|
|
71
|
+
<sonic-input autocomplete="family-name" label="Nom" name="nom"></sonic-input>
|
|
72
|
+
<sonic-input autocomplete="given-name" label="Prénom" name="prenom"></sonic-input>
|
|
73
|
+
<sonic-select autocomplete="sex" label="Sexe" name="sexe">
|
|
74
|
+
<option value="" selected="selected">- Sélectionner -</option>
|
|
75
|
+
<option value="-">Je préfère ne pas le dire</option>
|
|
76
|
+
<option value="Homme">Homme</option>
|
|
77
|
+
<option value="Femme">Femme</option>
|
|
78
|
+
</sonic-select>
|
|
79
|
+
<sonic-input autocomplete="bday" label="Date de naissance" name="date_naissance" type="date"></sonic-input>
|
|
80
|
+
<sonic-divider></sonic-divider>
|
|
81
|
+
<sonic-input autocomplete="email" label="e-mail" name="email" type="email"></sonic-input>
|
|
82
|
+
<sonic-input
|
|
83
|
+
autocomplete="email"
|
|
84
|
+
label="Confirmer votre e-mail"
|
|
85
|
+
name="email_confirmation"
|
|
86
|
+
type="email"
|
|
87
|
+
></sonic-input>
|
|
88
|
+
<sonic-input autocomplete="new-password" label="Mot de passe" name="password" type="password"></sonic-input>
|
|
89
|
+
<sonic-input
|
|
90
|
+
autocomplete="new-password"
|
|
91
|
+
label="Confirmer votre mot de passe"
|
|
92
|
+
name="password_confirmation"
|
|
93
|
+
type="password"
|
|
94
|
+
></sonic-input>
|
|
95
|
+
</sonic-form-layout>
|
|
96
|
+
</sonic-fieldset>
|
|
97
|
+
<sonic-fieldset form="formid" collapsible="true" collapsed="false">
|
|
98
|
+
<sonic-legend iconLibrary="iconoir" iconName="pin-alt"> Coordonnées </sonic-legend>
|
|
99
|
+
<sonic-form-layout>
|
|
100
|
+
<sonic-input autocomplete="postal-code" label="Code postal" name="cp"></sonic-input>
|
|
101
|
+
<sonic-input autocomplete="address-level2" label="Ville" name="ville"></sonic-input>
|
|
102
|
+
</sonic-form-layout>
|
|
103
|
+
</sonic-fieldset>
|
|
104
|
+
<div class="">
|
|
105
|
+
<sonic-button submit type="primary">
|
|
106
|
+
<sonic-icon library="iconoir" name="check"></sonic-icon>
|
|
107
|
+
S'inscrire
|
|
108
|
+
</sonic-button>
|
|
109
|
+
<sonic-tooltip class="inline-flex" label="Vous êtes sûr(e) ? 🙄">
|
|
110
|
+
<sonic-button size="sm" variant="ghost"> Continuer sans m'inscrire </sonic-button>
|
|
111
|
+
</sonic-tooltip>
|
|
112
|
+
</div>
|
|
113
|
+
</form>
|
|
114
|
+
<div dataProvider="user_create" class="my-6 text-neutral-600 p-5 rounded-xl shadow-lg">
|
|
115
|
+
<div class="font-bold text-lg text-neutral-400">Submitted informations...</div>
|
|
116
|
+
<div class="text-lg my-2">
|
|
117
|
+
<sonic-value key="nom" class="font-bold"></sonic-value>
|
|
118
|
+
<sonic-value key="prenom"></sonic-value>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="text-sm">
|
|
121
|
+
<sonic-value key="sexe"></sonic-value>
|
|
122
|
+
<sonic-value key="date_naissance"></sonic-value>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="text-sm">
|
|
125
|
+
<sonic-value key="email"></sonic-value>
|
|
126
|
+
<sonic-value key="cp"></sonic-value>
|
|
127
|
+
<sonic-value key="ville"></sonic-value></div>
|
|
128
|
+
</div>
|
|
129
|
+
</sonic-div>
|
|
130
|
+
</code></pre>
|
|
131
|
+
|
|
132
|
+
</article>
|
|
133
|
+
</main>
|
|
134
|
+
</body>
|
|
135
|
+
</html>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html" data-doc-id="core/components/ui/form/form-actions/form-actions">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Form-actions — Concorde</title>
|
|
7
|
+
<meta name="description" content="Left seats">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form-actions, UI component, form, sonic-form-actions, web component">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/form-actions/form-actions">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/form-actions/form-actions.md/form-actions" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form-actions</strong>. Left seats <span>Doc ID: <code>core/components/ui/form/form-actions/form-actions</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form-actions, UI component, form, sonic-form-actions, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html</a>.</span></p>
|
|
19
|
+
<h1 id="form-actions">Form-actions</h1>
|
|
20
|
+
<h2 id="left-by-default">Left by default</h2>
|
|
21
|
+
<pre><code><form>
|
|
22
|
+
<sonic-form-layout>
|
|
23
|
+
<sonic-input label="First name"></sonic-input>
|
|
24
|
+
<sonic-input label="Last name"></sonic-input>
|
|
25
|
+
<sonic-form-actions>
|
|
26
|
+
<sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
|
|
27
|
+
<sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
|
|
28
|
+
</sonic-form-actions>
|
|
29
|
+
</sonic-form-layout>
|
|
30
|
+
</form >
|
|
31
|
+
</code></pre>
|
|
32
|
+
<h2 id="justify">Justify</h2>
|
|
33
|
+
<pre><code><form>
|
|
34
|
+
<sonic-form-layout>
|
|
35
|
+
<sonic-input label="First name"></sonic-input>
|
|
36
|
+
<sonic-input label="Last name"></sonic-input>
|
|
37
|
+
<sonic-form-actions justify="flex-end">
|
|
38
|
+
<sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
|
|
39
|
+
<sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
|
|
40
|
+
</sonic-form-actions>
|
|
41
|
+
</sonic-form-layout>
|
|
42
|
+
</form >
|
|
43
|
+
</code></pre>
|
|
44
|
+
<h2 id="direction">Direction</h2>
|
|
45
|
+
<pre><code><form>
|
|
46
|
+
<sonic-form-layout>
|
|
47
|
+
<sonic-input label="First name"></sonic-input>
|
|
48
|
+
<sonic-input label="Last name"></sonic-input>
|
|
49
|
+
<sonic-form-actions direction="row-reverse">
|
|
50
|
+
<sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
|
|
51
|
+
<sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
|
|
52
|
+
</sonic-form-actions>
|
|
53
|
+
</sonic-form-layout>
|
|
54
|
+
</form >
|
|
55
|
+
</code></pre>
|
|
56
|
+
<h2 id="center">Center</h2>
|
|
57
|
+
<pre><code><form>
|
|
58
|
+
<sonic-form-layout>
|
|
59
|
+
<sonic-input label="First name"></sonic-input>
|
|
60
|
+
<sonic-input label="Last name"></sonic-input>
|
|
61
|
+
<sonic-form-actions justify="center" >
|
|
62
|
+
<sonic-button type="info" minWidth="12rem">
|
|
63
|
+
<sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
|
|
64
|
+
Left seats
|
|
65
|
+
</sonic-button>
|
|
66
|
+
<sonic-divider vertical></sonic-divider>
|
|
67
|
+
<sonic-button type="info" minWidth="12rem">
|
|
68
|
+
<sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
|
|
69
|
+
Right seats
|
|
70
|
+
</sonic-button>
|
|
71
|
+
</sonic-form-actions>
|
|
72
|
+
</sonic-form-layout>
|
|
73
|
+
</form >
|
|
74
|
+
</code></pre>
|
|
75
|
+
|
|
76
|
+
</article>
|
|
77
|
+
</main>
|
|
78
|
+
</body>
|
|
79
|
+
</html>
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html" data-doc-id="core/components/ui/form/form-layout/form-layout">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Form-layout — Concorde</title>
|
|
7
|
+
<meta name="description" content="autocomplete="email"">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form-layout, UI component, form, sonic-form-layout, web component">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/form-layout/form-layout">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/form-layout/form-layout.md/form-layout" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form-layout</strong>. autocomplete="email" <span>Doc ID: <code>core/components/ui/form/form-layout/form-layout</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form-layout, UI component, form, sonic-form-layout, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html</a>.</span></p>
|
|
19
|
+
<h1 id="form-layout">Form-layout</h1>
|
|
20
|
+
<pre><code><form>
|
|
21
|
+
<sonic-form-layout>
|
|
22
|
+
<sonic-input autocomplete="family-name" label="Nom" name="nom"></sonic-input>
|
|
23
|
+
<sonic-input autocomplete="given-name" label="Prénom" name="prenom"></sonic-input>
|
|
24
|
+
<sonic-select autocomplete="sex" label="Sexe" name="sexe">
|
|
25
|
+
<option value="" selected="selected">- Sélectionner -</option>
|
|
26
|
+
<option value="-">Je préfère ne pas le dire</option>
|
|
27
|
+
<option value="Homme">Homme</option>
|
|
28
|
+
<option value="Femme">Femme</option>
|
|
29
|
+
</sonic-select>
|
|
30
|
+
<sonic-input autocomplete="bday" label="Date de naissance" name="date_naissance" type="date"></sonic-input>
|
|
31
|
+
<sonic-divider></sonic-divider>
|
|
32
|
+
<sonic-input autocomplete="email" label="e-mail" name="email" type="email"></sonic-input>
|
|
33
|
+
<sonic-input
|
|
34
|
+
autocomplete="email"
|
|
35
|
+
label="Confirmer votre e-mail"
|
|
36
|
+
name="email_confirmation"
|
|
37
|
+
type="email"
|
|
38
|
+
></sonic-input>
|
|
39
|
+
<sonic-input autocomplete="new-password" label="Mot de passe" name="password" type="password"></sonic-input>
|
|
40
|
+
<sonic-input
|
|
41
|
+
autocomplete="new-password"
|
|
42
|
+
label="Confirmer votre mot de passe"
|
|
43
|
+
name="password_confirmation"
|
|
44
|
+
type="password"
|
|
45
|
+
></sonic-input>
|
|
46
|
+
<sonic-divider></sonic-divider>
|
|
47
|
+
<sonic-textarea label="Message" rows="5">
|
|
48
|
+
</sonic-textarea>
|
|
49
|
+
<sonic-switch>Activer une superbe option</sonic-switch>
|
|
50
|
+
<sonic-checkbox>Inscription à la newsletter</sonic-checkbox>
|
|
51
|
+
<sonic-checkbox>J'ai lu et accepte les <sonic-link href="#" class="underline">Conditions générales de ventes</sonic-link></sonic-checkbox>
|
|
52
|
+
<sonic-form-actions>
|
|
53
|
+
<sonic-button type="success">Valider</sonic-button>
|
|
54
|
+
</sonic-form-actions>
|
|
55
|
+
</sonic-form-layout>
|
|
56
|
+
</form >
|
|
57
|
+
</code></pre>
|
|
58
|
+
|
|
59
|
+
</article>
|
|
60
|
+
</main>
|
|
61
|
+
</body>
|
|
62
|
+
</html>
|