@supersoniks/concorde 5.0.2 → 5.0.4
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/.github/workflows/ci.yml +21 -0
- package/.github-export-ignore +30 -0
- package/CONTRIBUTING.md +59 -0
- package/DEV.md +54 -0
- package/LICENSE +21 -0
- package/OPEN_SOURCE_CHECKPOINT.md +133 -0
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +66 -66
- package/concorde-core.es.js +1368 -1318
- package/dist/concorde-core.bundle.js +66 -66
- package/dist/concorde-core.es.js +1368 -1318
- package/docs/altcha-widget.js +2662 -0
- package/docs/assets/index-D8MVWqY6.js +12251 -0
- package/docs/assets/index-DiD0qYvE.css +1 -0
- 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/jsonata/jsonata.html +79 -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 +38 -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 +177 -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 +149 -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 +78 -0
- package/docs/crawl/docs/_decorators/post.html +139 -0
- package/docs/crawl/docs/_decorators/publish.html +61 -0
- package/docs/crawl/docs/_decorators/put.html +78 -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 +173 -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 +158 -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/formelement-subscriber-removal.html +138 -0
- package/docs/crawl/docs/_misc/html-integration.html +48 -0
- package/docs/crawl/hubs/decorators.html +547 -0
- package/docs/crawl/hubs/form-components.html +359 -0
- package/docs/crawl/hubs/remote-data.html +452 -0
- package/docs/crawl/index.html +101 -0
- package/docs/css/docs.css +0 -0
- package/docs/docs-mock-api-sw.js +724 -0
- package/docs/docs-mock-api-sw.js.map +7 -0
- package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
- package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
- package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Light.eot +0 -0
- package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Light.woff +0 -0
- package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
- package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
- package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
- package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
- package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
- package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
- package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
- package/docs/img/concorde-icon.svg +5 -0
- package/docs/img/concorde-logo.svg +1 -0
- package/docs/img/concorde.png +0 -0
- package/docs/img/concorde_def.png +0 -0
- package/docs/img/concorde_seuil.png.webp +0 -0
- package/docs/img/concorde_seuil_invert.png +0 -0
- package/docs/img/paul_metrand.jpg +0 -0
- package/docs/img/paul_metrand_xs.jpg +0 -0
- package/docs/index.html +93 -0
- package/docs/llms-full.txt +5761 -0
- package/docs/llms.txt +104 -0
- package/docs/robots.txt +16 -0
- package/docs/sitemap.xml +237 -0
- package/docs/src/core/components/functional/date/date.md +290 -0
- package/docs/src/core/components/functional/fetch/fetch.md +125 -0
- package/docs/src/core/components/functional/if/if.md +9 -0
- package/docs/src/core/components/functional/jsonata/jsonata.md +56 -0
- package/docs/src/core/components/functional/list/list.md +65 -0
- package/docs/src/core/components/functional/mix/mix.md +41 -0
- package/docs/src/core/components/functional/queue/queue.md +72 -0
- package/docs/src/core/components/functional/router/router.md +94 -0
- package/docs/src/core/components/functional/sdui/default-library.json +108 -0
- package/docs/src/core/components/functional/sdui/example.json +99 -0
- package/docs/src/core/components/functional/sdui/sdui.md +356 -0
- package/docs/src/core/components/functional/states/states.md +87 -0
- package/docs/src/core/components/functional/submit/submit.md +114 -0
- package/docs/src/core/components/functional/subscriber/subscriber.md +91 -0
- package/docs/src/core/components/functional/value/value.md +35 -0
- package/docs/src/core/components/ui/alert/alert.md +121 -0
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
- package/docs/src/core/components/ui/badge/badge.md +127 -0
- package/docs/src/core/components/ui/button/button.md +182 -0
- package/docs/src/core/components/ui/captcha/captcha.md +12 -0
- package/docs/src/core/components/ui/card/card.md +97 -0
- package/docs/src/core/components/ui/divider/divider.md +35 -0
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +77 -0
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +129 -0
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +77 -0
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +44 -0
- package/docs/src/core/components/ui/form/input/input.md +142 -0
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +29 -0
- package/docs/src/core/components/ui/form/radio/radio.md +57 -0
- package/docs/src/core/components/ui/form/select/select.md +71 -0
- package/docs/src/core/components/ui/form/switch/switch.md +57 -0
- package/docs/src/core/components/ui/form/textarea/textarea.md +65 -0
- package/docs/src/core/components/ui/group/group.md +75 -0
- package/docs/src/core/components/ui/icon/icon.md +125 -0
- package/docs/src/core/components/ui/icon/icons.json +1 -0
- package/docs/src/core/components/ui/image/image.md +107 -0
- package/docs/src/core/components/ui/link/link.md +43 -0
- package/docs/src/core/components/ui/loader/loader.md +55 -0
- package/docs/src/core/components/ui/menu/menu.md +329 -0
- package/docs/src/core/components/ui/modal/modal.md +119 -0
- package/docs/src/core/components/ui/pop/pop.md +96 -0
- package/docs/src/core/components/ui/progress/progress.md +63 -0
- package/docs/src/core/components/ui/table/table.md +455 -0
- package/docs/src/core/components/ui/toast/toast.md +166 -0
- package/docs/src/core/components/ui/tooltip/tooltip.md +82 -0
- package/docs/src/docs/_core-concept/dataFlow.md +88 -0
- package/docs/src/docs/_core-concept/overview.md +57 -0
- package/docs/src/docs/_core-concept/subscriber.md +75 -0
- package/docs/src/docs/_decorators/ancestor-attribute.md +127 -0
- package/docs/src/docs/_decorators/auto-subscribe.md +202 -0
- package/docs/src/docs/_decorators/bind.md +167 -0
- package/docs/src/docs/_decorators/get.md +162 -0
- package/docs/src/docs/_decorators/handle.md +175 -0
- package/docs/src/docs/_decorators/on-assign.md +390 -0
- package/docs/src/docs/_decorators/patch.md +70 -0
- package/docs/src/docs/_decorators/post.md +146 -0
- package/docs/src/docs/_decorators/publish.md +55 -0
- package/docs/src/docs/_decorators/put.md +70 -0
- package/docs/src/docs/_decorators/subscribe.md +100 -0
- package/docs/src/docs/_decorators/wait-for-ancestors.md +163 -0
- package/docs/src/docs/_directives/sub.md +91 -0
- package/docs/src/docs/_getting-started/ai-agents.md +76 -0
- package/docs/src/docs/_getting-started/concorde-manual-install.md +133 -0
- package/docs/src/docs/_getting-started/concorde-outside.md +33 -0
- package/docs/src/docs/_getting-started/create-a-component.md +139 -0
- package/docs/src/docs/_getting-started/my-first-component.md +236 -0
- package/docs/src/docs/_getting-started/my-first-subscriber.md +120 -0
- package/docs/src/docs/_getting-started/pubsub.md +37 -0
- package/docs/src/docs/_getting-started/start.md +47 -0
- package/docs/src/docs/_getting-started/theming.md +91 -0
- package/docs/src/docs/_misc/api-configuration.md +81 -0
- package/docs/src/docs/_misc/dataProviderKey.md +168 -0
- package/docs/src/docs/_misc/docs-mock-api.md +63 -0
- package/docs/src/docs/_misc/dynamic-path.md +71 -0
- package/docs/src/docs/_misc/endpoint.md +45 -0
- package/docs/src/docs/_misc/formelement-subscriber-removal.md +115 -0
- package/docs/src/docs/_misc/html-integration.md +15 -0
- package/docs/src/docs/search/docs-search.json +9507 -0
- package/docs/src/tag-list.json +1 -0
- package/docs/src/tsconfig-model.json +23 -0
- package/docs/src/tsconfig.declarations.json +22 -0
- package/docs/src/tsconfig.emit.json +23 -0
- package/docs/src/tsconfig.json +1182 -0
- package/docs/svg/regular/plane.svg +1 -0
- package/docs/svg/solid/plane.svg +1 -0
- package/gitlab/job_github_mirror.sh +39 -0
- package/gitlab/job_tests.sh +0 -0
- package/package.json +1 -1
- package/scripts/github-export.mjs +150 -0
- package/scripts/post-build-docs.js +0 -0
- package/scripts/post-build.mjs +0 -0
- package/src/core/components/functional/fetch/fetch.md +0 -0
- package/src/core/components/functional/if/if.md +0 -0
- package/src/core/components/functional/list/list.demo.ts +0 -0
- package/src/core/components/functional/list/list.md +0 -0
- package/src/core/components/functional/router/router.md +0 -0
- package/src/core/components/functional/router/router.ts +0 -0
- package/src/core/components/functional/sdui/sdui.md +0 -0
- package/src/core/components/functional/states/states.md +0 -0
- package/src/core/components/functional/submit/submit.md +0 -0
- package/src/core/components/functional/subscriber/subscriber.ts +0 -0
- package/src/core/components/ui/_css/size.ts +0 -0
- package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
- package/src/core/components/ui/captcha/captcha.md +0 -0
- package/src/core/components/ui/form/radio/radio.md +0 -0
- package/src/core/components/ui/form/select/select.md +0 -0
- package/src/core/components/ui/form/switch/switch.md +0 -0
- package/src/core/components/ui/loader/loader.md +0 -0
- package/src/core/components/ui/menu/menu.md +0 -0
- package/src/core/components/ui/modal/modal.md +0 -0
- package/src/core/components/ui/table/table-caption.ts +0 -0
- package/src/core/components/ui/table/table.md +0 -0
- package/src/core/decorators/subscriber/ancestorAttribute.spec.ts +26 -0
- package/src/core/decorators/subscriber/ancestorAttribute.ts +3 -4
- package/src/core/mixins/Subscriber.ts +0 -0
- package/src/core/utils/AncestorAttributeObserver.ts +183 -70
- package/src/core/utils/DataBindObserver.ts +0 -0
- package/src/core/utils/Objects.ts +0 -0
- package/src/core/utils/route.ts +0 -0
- package/src/css.d.ts +19 -0
- package/src/docs/_core-concept/subscriber.md +0 -0
- package/src/docs/_decorators/ancestor-attribute.md +3 -2
- package/src/docs/_getting-started/my-first-subscriber.md +0 -0
- package/src/docs/_getting-started/pubsub.md +0 -0
- package/src/docs/_getting-started/start.md +0 -0
- package/src/docs/example/users.ts +0 -0
- package/src/docs/search/page.ts +0 -0
- package/src/tsconfig.declarations.json +22 -0
- package/src/tsconfig.emit.json +23 -0
- package/src/tsconfig.tsbuildinfo +1 -1
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# Input
|
|
2
|
+
|
|
3
|
+
<sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_input.asp#midcontentadcontainer">
|
|
4
|
+
<sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
|
|
5
|
+
Native attibutes list
|
|
6
|
+
</sonic-button>
|
|
7
|
+
|
|
8
|
+
## Label
|
|
9
|
+
<sonic-code>
|
|
10
|
+
<template>
|
|
11
|
+
<sonic-input label="Label"></sonic-input>
|
|
12
|
+
</template>
|
|
13
|
+
</sonic-code>
|
|
14
|
+
|
|
15
|
+
## Placeholder
|
|
16
|
+
<sonic-code>
|
|
17
|
+
<template>
|
|
18
|
+
<sonic-input placeholder="placeholder"></sonic-input>
|
|
19
|
+
</template>
|
|
20
|
+
</sonic-code>
|
|
21
|
+
|
|
22
|
+
## Value
|
|
23
|
+
<sonic-code>
|
|
24
|
+
<template>
|
|
25
|
+
<sonic-input value="value"></sonic-input>
|
|
26
|
+
</template>
|
|
27
|
+
</sonic-code>
|
|
28
|
+
|
|
29
|
+
## Required
|
|
30
|
+
<sonic-code>
|
|
31
|
+
<template>
|
|
32
|
+
<sonic-input required type="email" placeholder="you@email.com" label="Feedback on blur"></sonic-input>
|
|
33
|
+
</template>
|
|
34
|
+
</sonic-code>
|
|
35
|
+
|
|
36
|
+
## Description
|
|
37
|
+
<sonic-code>
|
|
38
|
+
<template>
|
|
39
|
+
<sonic-input description="Description goes here" ></sonic-input>
|
|
40
|
+
</template>
|
|
41
|
+
</sonic-code>
|
|
42
|
+
|
|
43
|
+
## Type
|
|
44
|
+
<sonic-button size="2xs" type="info" target="_blank" href="https://www.w3schools.com/html/html_form_input_types.asp">Liste des types</sonic-button>
|
|
45
|
+
|
|
46
|
+
<sonic-code>
|
|
47
|
+
<template>
|
|
48
|
+
<div class="grid gap-3">
|
|
49
|
+
<sonic-input type="text" label="Text">Text</sonic-input>
|
|
50
|
+
<sonic-input type="email" label="Email" placeholder="plop@kiki.com"></sonic-input>
|
|
51
|
+
<sonic-input type="password" label="Password"></sonic-input>
|
|
52
|
+
<sonic-input type="date" label="Date"></sonic-input>
|
|
53
|
+
<sonic-input type="number" label="Number"></sonic-input>
|
|
54
|
+
<sonic-input type="color" label="Color" value="#ffff00"></sonic-input>
|
|
55
|
+
</div>
|
|
56
|
+
</template>
|
|
57
|
+
</sonic-code>
|
|
58
|
+
|
|
59
|
+
## Size
|
|
60
|
+
<sonic-code>
|
|
61
|
+
<template>
|
|
62
|
+
<div class="grid gap-3">
|
|
63
|
+
<sonic-input size="2xs" value="2xs"></sonic-input>
|
|
64
|
+
<sonic-input size="xs" value="xs"></sonic-input>
|
|
65
|
+
<sonic-input size="sm" value="sm"></sonic-input>
|
|
66
|
+
<sonic-input size="md" value="md"></sonic-input>
|
|
67
|
+
<sonic-input value="default"></sonic-input>
|
|
68
|
+
<sonic-input size="lg" value="lg"></sonic-input>
|
|
69
|
+
<sonic-input size="xl" value="xl"></sonic-input>
|
|
70
|
+
<sonic-input size="2xl" value="2xl"></sonic-input>
|
|
71
|
+
</div>
|
|
72
|
+
</template>
|
|
73
|
+
</sonic-code>
|
|
74
|
+
|
|
75
|
+
## List
|
|
76
|
+
<sonic-alert status="error" label="Non fonctionnel" class="mb-4"></sonic-alert>
|
|
77
|
+
|
|
78
|
+
<sonic-code>
|
|
79
|
+
<template>
|
|
80
|
+
<sonic-input list="browsers"></sonic-input>
|
|
81
|
+
<datalist id="browsers">
|
|
82
|
+
<option value="Internet Explorer">
|
|
83
|
+
<option value="Firefox">
|
|
84
|
+
<option value="Google Chrome">
|
|
85
|
+
<option value="Opera">
|
|
86
|
+
<option value="Safari">
|
|
87
|
+
</datalist>
|
|
88
|
+
</template>
|
|
89
|
+
</sonic-code>
|
|
90
|
+
|
|
91
|
+
## Prefix & suffix
|
|
92
|
+
|
|
93
|
+
<sonic-code>
|
|
94
|
+
<template>
|
|
95
|
+
<div class="grid grid-cols-2 gap-3">
|
|
96
|
+
<sonic-input type="search" label="Search" placeholder="Search plane">
|
|
97
|
+
<sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
|
|
98
|
+
</sonic-input>
|
|
99
|
+
<sonic-input type="number" label="Amount" placeholder="0">
|
|
100
|
+
<sonic-icon library="iconoir" name="euro" slot="suffix"></sonic-icon>
|
|
101
|
+
</sonic-input>
|
|
102
|
+
</div>
|
|
103
|
+
</template>
|
|
104
|
+
</sonic-code>
|
|
105
|
+
|
|
106
|
+
## InlineContent
|
|
107
|
+
|
|
108
|
+
<sonic-code>
|
|
109
|
+
<template>
|
|
110
|
+
<div class="grid grid-cols-2 gap-3">
|
|
111
|
+
<sonic-input inlineContent type="search" label="Search icon in input" placeholder="Search plane">
|
|
112
|
+
<sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
|
|
113
|
+
</sonic-input>
|
|
114
|
+
<sonic-input inlineContent type="number" label="Number of seats" placeholder="0">
|
|
115
|
+
<div slot="suffix" class="flex gap-2 items-center">
|
|
116
|
+
<sonic-badge type="danger" size="sm">4 max</sonic-badge>
|
|
117
|
+
<sonic-icon library="iconoir" name="euro" ></sonic-icon>
|
|
118
|
+
</div>
|
|
119
|
+
</sonic-input>
|
|
120
|
+
</div>
|
|
121
|
+
</template>
|
|
122
|
+
</sonic-code>
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
## Example of use — search + queue
|
|
127
|
+
|
|
128
|
+
Filter with **`formDataProvider`** + **`name="contains"`** (mock API: substring on joke text). Caption and rows via Lit (`@subscribe`, `.items` on `sonic-queue`):
|
|
129
|
+
|
|
130
|
+
<docs-lit-demo for="docs-joke-search-demo"></docs-lit-demo>
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
<sonic-code>
|
|
134
|
+
<template>
|
|
135
|
+
<sonic-input type="search" placeholder="Search plane" class="inline-block">
|
|
136
|
+
</sonic-input>
|
|
137
|
+
<sonic-button type="danger" label="Amount" placeholder="0">azdazd
|
|
138
|
+
</sonic-button>
|
|
139
|
+
</template>
|
|
140
|
+
</sonic-code>
|
|
141
|
+
|
|
142
|
+
<!-- <sonic-input type="password" inlineContent size="2xl"><span slot="suffix">PLOP</span></sonic-input> -->
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# Input-autocomplete
|
|
2
|
+
|
|
3
|
+
Champ formulaire + suggestions via [queue](#core/components/functional/queue/queue.md/queue). Valeur via `formDataProvider` + `name` ; la recherche filtre la queue (store interne).
|
|
4
|
+
|
|
5
|
+
Rendu des lignes : propriété **`.items`** (callback Lit) — voir les démos ci-dessous. Mock : `serviceURL="/docs-mock-api/geo/"`.
|
|
6
|
+
|
|
7
|
+
## Simple
|
|
8
|
+
|
|
9
|
+
`name` = paramètre de recherche = valeur formulaire.
|
|
10
|
+
|
|
11
|
+
<docs-lit-demo for="docs-input-autocomplete-basic-demo"></docs-lit-demo>
|
|
12
|
+
|
|
13
|
+
## Valeur ≠ paramètre de recherche
|
|
14
|
+
|
|
15
|
+
Recherche sur `nom`, valeur formulaire = `code`. Préremplissage via `value`.
|
|
16
|
+
|
|
17
|
+
<docs-lit-demo for="docs-input-autocomplete-code-demo"></docs-lit-demo>
|
|
18
|
+
|
|
19
|
+
## Mode select
|
|
20
|
+
|
|
21
|
+
À la fermeture du pop, seule une valeur de la liste (ou vide) est conservée.
|
|
22
|
+
|
|
23
|
+
<docs-lit-demo for="docs-input-autocomplete-select-demo"></docs-lit-demo>
|
|
24
|
+
|
|
25
|
+
## Navigation clavier
|
|
26
|
+
|
|
27
|
+
`data-keyboard-nav` sur le champ et les items (flèches haut / bas).
|
|
28
|
+
|
|
29
|
+
<docs-lit-demo for="docs-input-autocomplete-keyboard-demo"></docs-lit-demo>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# Radio
|
|
2
|
+
|
|
3
|
+
## Size
|
|
4
|
+
<sonic-code>
|
|
5
|
+
<template>
|
|
6
|
+
<div class="grid gap-2" formDataProvider="radioSizeExemple">
|
|
7
|
+
<sonic-radio name="size" value="2xs" size="2xs">2xs radio</sonic-radio>
|
|
8
|
+
<sonic-radio name="size" value="xs" size="xs">xs radio</sonic-radio>
|
|
9
|
+
<sonic-radio name="size" value="sm" size="sm">sm radio</sonic-radio>
|
|
10
|
+
<sonic-radio name="size" value="default" >default radio</sonic-radio>
|
|
11
|
+
<sonic-radio name="size" value="lg" size="lg">lg radio</sonic-radio>
|
|
12
|
+
<sonic-radio name="size" value="xl" size="xl">xl radio</sonic-radio>
|
|
13
|
+
<sonic-radio name="size" value="2xl" size="2xl">2xl radio</sonic-radio>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
</sonic-code>
|
|
17
|
+
|
|
18
|
+
## Checked
|
|
19
|
+
<sonic-code>
|
|
20
|
+
<template>
|
|
21
|
+
<sonic-radio checked
|
|
22
|
+
>Already checked radio
|
|
23
|
+
</sonic-radio>
|
|
24
|
+
</template>
|
|
25
|
+
</sonic-code>
|
|
26
|
+
|
|
27
|
+
## Disabled
|
|
28
|
+
<sonic-code>
|
|
29
|
+
<template>
|
|
30
|
+
<sonic-radio disabled
|
|
31
|
+
>Disabled radio
|
|
32
|
+
</sonic-radio>
|
|
33
|
+
</template>
|
|
34
|
+
</sonic-code>
|
|
35
|
+
|
|
36
|
+
## Disabled and checked
|
|
37
|
+
<sonic-code>
|
|
38
|
+
<template>
|
|
39
|
+
<sonic-radio disabled checked
|
|
40
|
+
>Disabled but already checked radio
|
|
41
|
+
</sonic-radio>
|
|
42
|
+
</template>
|
|
43
|
+
</sonic-code>
|
|
44
|
+
|
|
45
|
+
## radio with link
|
|
46
|
+
<sonic-code>
|
|
47
|
+
<template>
|
|
48
|
+
<sonic-radio name="link" value="link">radio with <sonic-link href="#" class="underline text-info">link</sonic-link>
|
|
49
|
+
</template>
|
|
50
|
+
</sonic-code>
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
## Example of use — blacklist + queue
|
|
54
|
+
|
|
55
|
+
Same mock filter as [Checkbox](#core/components/ui/form/checkbox/checkbox.md/checkbox) (`blacklistFlags` query param). Radio sends **one** flag at a time.
|
|
56
|
+
|
|
57
|
+
<docs-lit-demo for="docs-joke-blacklist-radio-demo"></docs-lit-demo>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# Select
|
|
2
|
+
|
|
3
|
+
## Options
|
|
4
|
+
<sonic-code>
|
|
5
|
+
<template>
|
|
6
|
+
<div class="grid gap-3">
|
|
7
|
+
<sonic-select>
|
|
8
|
+
<option value="">No Selection</option>
|
|
9
|
+
<option value="1">One</option>
|
|
10
|
+
<option value="2" selected>Two (set by "tag")</option>
|
|
11
|
+
<option value="3">Three</option>
|
|
12
|
+
</sonic-select>
|
|
13
|
+
<sonic-select options='[{"value":"", "wording":"Set options via \"attribute\""},
|
|
14
|
+
{"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}
|
|
15
|
+
]'>
|
|
16
|
+
</sonic-select>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
</sonic-code>
|
|
20
|
+
|
|
21
|
+
## Size
|
|
22
|
+
<sonic-code>
|
|
23
|
+
<template>
|
|
24
|
+
<div class="grid gap-3">
|
|
25
|
+
<sonic-select size="2xs"><option>2xs</option></sonic-select>
|
|
26
|
+
<sonic-select size="xs"><option>xs</option></sonic-select>
|
|
27
|
+
<sonic-select size="sm"><option>sm</option></sonic-select>
|
|
28
|
+
<sonic-select size="md"><option>md</option></sonic-select>
|
|
29
|
+
<sonic-select size="default"><option>default</option></sonic-select>
|
|
30
|
+
<sonic-select size="lg"><option>lg</option></sonic-select>
|
|
31
|
+
<sonic-select size="xl"><option>xl</option></sonic-select>
|
|
32
|
+
<sonic-select size="2xl"><option>2xl</option></sonic-select>
|
|
33
|
+
</div>
|
|
34
|
+
</template>
|
|
35
|
+
</sonic-code>
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## Multiple
|
|
39
|
+
<sonic-code>
|
|
40
|
+
<template>
|
|
41
|
+
<div class="grid gap-3">
|
|
42
|
+
<sonic-select multiple>
|
|
43
|
+
<option value="">Choose a number</option>
|
|
44
|
+
<option value="1">One</option>
|
|
45
|
+
<option value="2">Two</option>
|
|
46
|
+
<option value="3">Three</option>
|
|
47
|
+
</sonic-select>
|
|
48
|
+
</div>
|
|
49
|
+
</template>
|
|
50
|
+
</sonic-code>
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
## Disabled
|
|
54
|
+
<sonic-code>
|
|
55
|
+
<template>
|
|
56
|
+
<div class="grid gap-3">
|
|
57
|
+
<sonic-select disabled>
|
|
58
|
+
<option value="">Choose a number</option>
|
|
59
|
+
<option value="1">One</option>
|
|
60
|
+
<option value="2">Two</option>
|
|
61
|
+
<option value="3">Three</option>
|
|
62
|
+
</sonic-select>
|
|
63
|
+
</div>
|
|
64
|
+
</template>
|
|
65
|
+
</sonic-code>
|
|
66
|
+
|
|
67
|
+
## Example of use — language filter + queue
|
|
68
|
+
|
|
69
|
+
**`name="lang"`** is sent as `?lang=fr|en` to the [doc mock API](#docs/_misc/docs-mock-api.md/docs-mock-api) (`filterDocsJokes`). Same pattern as [Input](#core/components/ui/form/input/input.md/input) (`contains`):
|
|
70
|
+
|
|
71
|
+
<docs-lit-demo for="docs-joke-lang-demo"></docs-lit-demo>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# Switch
|
|
2
|
+
|
|
3
|
+
## Size
|
|
4
|
+
<sonic-code>
|
|
5
|
+
<template>
|
|
6
|
+
<div class="grid gap-2" formDataProvider="switchSizeExemple">
|
|
7
|
+
<sonic-switch name="size2xs" value="2xs" size="2xs">2xs switch</sonic-switch>
|
|
8
|
+
<sonic-switch name="sizexs" value="xs" size="xs">xs switch</sonic-switch>
|
|
9
|
+
<sonic-switch name="sizesm" value="sm" size="sm">sm switch</sonic-switch>
|
|
10
|
+
<sonic-switch name="size" value="default" >default switch</sonic-switch>
|
|
11
|
+
<sonic-switch name="sizelg" value="lg" size="lg">lg switch</sonic-switch>
|
|
12
|
+
<sonic-switch name="sizexl" value="xl" size="xl">xl switch</sonic-switch>
|
|
13
|
+
<sonic-switch name="size2xl" value="2xl" size="2xl">2xl switch</sonic-switch>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
</sonic-code>
|
|
17
|
+
|
|
18
|
+
## Checked
|
|
19
|
+
<sonic-code>
|
|
20
|
+
<template>
|
|
21
|
+
<sonic-switch checked
|
|
22
|
+
>Already checked switch
|
|
23
|
+
</sonic-switch>
|
|
24
|
+
</template>
|
|
25
|
+
</sonic-code>
|
|
26
|
+
|
|
27
|
+
## Disabled
|
|
28
|
+
<sonic-code>
|
|
29
|
+
<template>
|
|
30
|
+
<sonic-switch disabled
|
|
31
|
+
>Disabled switch
|
|
32
|
+
</sonic-switch>
|
|
33
|
+
</template>
|
|
34
|
+
</sonic-code>
|
|
35
|
+
|
|
36
|
+
## Disabled and checked
|
|
37
|
+
<sonic-code>
|
|
38
|
+
<template>
|
|
39
|
+
<sonic-switch disabled checked
|
|
40
|
+
>Disabled but already checked switch
|
|
41
|
+
</sonic-switch>
|
|
42
|
+
</template>
|
|
43
|
+
</sonic-code>
|
|
44
|
+
|
|
45
|
+
## switch with link
|
|
46
|
+
<sonic-code>
|
|
47
|
+
<template>
|
|
48
|
+
<sonic-switch name="link" value="link">switch with <sonic-link href="#" class="underline text-info">link</sonic-link>
|
|
49
|
+
</template>
|
|
50
|
+
</sonic-code>
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
## Example of use — blacklist + queue
|
|
54
|
+
|
|
55
|
+
Same mock filter as [Checkbox](#core/components/ui/form/checkbox/checkbox.md/checkbox); switches can enable several flags (comma-separated in the query).
|
|
56
|
+
|
|
57
|
+
<docs-lit-demo for="docs-joke-blacklist-switch-demo"></docs-lit-demo>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Textarea
|
|
2
|
+
|
|
3
|
+
<sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp#midcontentadcontainer">
|
|
4
|
+
<sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
|
|
5
|
+
Native attibutes list
|
|
6
|
+
</sonic-button>
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Label
|
|
10
|
+
<sonic-code>
|
|
11
|
+
<template>
|
|
12
|
+
<sonic-textarea label="Label"></sonic-textarea>
|
|
13
|
+
</template>
|
|
14
|
+
</sonic-code>
|
|
15
|
+
|
|
16
|
+
## Placeholder
|
|
17
|
+
<sonic-code>
|
|
18
|
+
<template>
|
|
19
|
+
<sonic-textarea placeholder="placeholder"></sonic-textarea>
|
|
20
|
+
</template>
|
|
21
|
+
</sonic-code>
|
|
22
|
+
|
|
23
|
+
## Value
|
|
24
|
+
<sonic-code>
|
|
25
|
+
<template>
|
|
26
|
+
<sonic-textarea value="value"></sonic-textarea>
|
|
27
|
+
</template>
|
|
28
|
+
</sonic-code>
|
|
29
|
+
|
|
30
|
+
## Required
|
|
31
|
+
<sonic-code>
|
|
32
|
+
<template>
|
|
33
|
+
<sonic-textarea required label="Feedback on blur" placeholder="required" ></sonic-textarea>
|
|
34
|
+
</template>
|
|
35
|
+
</sonic-code>
|
|
36
|
+
|
|
37
|
+
## Rows
|
|
38
|
+
<sonic-code>
|
|
39
|
+
<template>
|
|
40
|
+
<sonic-textarea rows="8"></sonic-textarea>
|
|
41
|
+
</template>
|
|
42
|
+
</sonic-code>
|
|
43
|
+
|
|
44
|
+
## Description
|
|
45
|
+
<sonic-code>
|
|
46
|
+
<template>
|
|
47
|
+
<sonic-textarea description="Description goes here" ></sonic-textarea>
|
|
48
|
+
</template>
|
|
49
|
+
</sonic-code>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
## Size
|
|
53
|
+
<sonic-code>
|
|
54
|
+
<template>
|
|
55
|
+
<div class="grid gap-4">
|
|
56
|
+
<sonic-textarea size="2xs" value="2xs"></sonic-textarea>
|
|
57
|
+
<sonic-textarea size="xs" value="xs"></sonic-textarea>
|
|
58
|
+
<sonic-textarea size="sm" value="sm"></sonic-textarea>
|
|
59
|
+
<sonic-textarea value="md / default"></sonic-textarea>
|
|
60
|
+
<sonic-textarea size="lg" value="lg"></sonic-textarea>
|
|
61
|
+
<sonic-textarea size="xl" value="xl"></sonic-textarea>
|
|
62
|
+
<sonic-textarea size="2xl" value="2xl"></sonic-textarea>
|
|
63
|
+
</div>
|
|
64
|
+
</template>
|
|
65
|
+
</sonic-code>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# Group
|
|
2
|
+
|
|
3
|
+
## Radio group
|
|
4
|
+
<sonic-code>
|
|
5
|
+
<template>
|
|
6
|
+
<sonic-group formDataProvider="subscriptionData">
|
|
7
|
+
<sonic-button radio name="subscription" value="standard" type="default">😎 Standard</sonic-button>
|
|
8
|
+
<sonic-button radio checked name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
|
|
9
|
+
<sonic-button radio name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
|
|
10
|
+
</sonic-group>
|
|
11
|
+
</template>
|
|
12
|
+
</sonic-code>
|
|
13
|
+
|
|
14
|
+
## Button group
|
|
15
|
+
<sonic-code>
|
|
16
|
+
<template>
|
|
17
|
+
<sonic-group>
|
|
18
|
+
<sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼Air France</sonic-button>
|
|
19
|
+
<sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
|
|
20
|
+
<sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
|
|
21
|
+
</sonic-group>
|
|
22
|
+
</template>
|
|
23
|
+
</sonic-code>
|
|
24
|
+
|
|
25
|
+
## Input actions prefix
|
|
26
|
+
<sonic-code>
|
|
27
|
+
<template>
|
|
28
|
+
<div class="grid grid-cols-3 gap-3">
|
|
29
|
+
<sonic-group>
|
|
30
|
+
<sonic-button type="info" shape="square">
|
|
31
|
+
<sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
|
|
32
|
+
</sonic-button>
|
|
33
|
+
<sonic-input placeholder="placeholder" ></sonic-input>
|
|
34
|
+
</sonic-group>
|
|
35
|
+
<sonic-group label="Label">
|
|
36
|
+
<sonic-button type="info" shape="square">
|
|
37
|
+
<sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
|
|
38
|
+
</sonic-button>
|
|
39
|
+
<sonic-input ></sonic-input>
|
|
40
|
+
</sonic-group>
|
|
41
|
+
<sonic-group description="Description">
|
|
42
|
+
<sonic-button type="info" shape="square">
|
|
43
|
+
<sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
|
|
44
|
+
</sonic-button>
|
|
45
|
+
<sonic-input ></sonic-input>
|
|
46
|
+
</sonic-group>
|
|
47
|
+
</div>
|
|
48
|
+
</template>
|
|
49
|
+
</sonic-code>
|
|
50
|
+
|
|
51
|
+
## Input actions suffix
|
|
52
|
+
<sonic-code>
|
|
53
|
+
<template>
|
|
54
|
+
<div class="grid grid-cols-3 gap-3">
|
|
55
|
+
<sonic-group>
|
|
56
|
+
<sonic-input placeholder="placeholder" ></sonic-input>
|
|
57
|
+
<sonic-button type="primary" shape="square">
|
|
58
|
+
<sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
|
|
59
|
+
</sonic-button>
|
|
60
|
+
</sonic-group>
|
|
61
|
+
<sonic-group label="Label">
|
|
62
|
+
<sonic-input ></sonic-input>
|
|
63
|
+
<sonic-button type="primary" shape="square">
|
|
64
|
+
<sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
|
|
65
|
+
</sonic-button>
|
|
66
|
+
</sonic-group>
|
|
67
|
+
<sonic-group description="Description">
|
|
68
|
+
<sonic-input ></sonic-input>
|
|
69
|
+
<sonic-button type="primary" shape="square">
|
|
70
|
+
<sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
|
|
71
|
+
</sonic-button>
|
|
72
|
+
</sonic-group>
|
|
73
|
+
</div>
|
|
74
|
+
</template>
|
|
75
|
+
</sonic-code>
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# Icon
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
## Custom
|
|
5
|
+
|
|
6
|
+
<p >Icons located in the following folder : <span class="text-info">/svg/$prefix/$name.svg<span></p>
|
|
7
|
+
|
|
8
|
+
<sonic-code customIconLibraryPath="/svg/$prefix/$name.svg"
|
|
9
|
+
customIconDefaultPrefix="regular">
|
|
10
|
+
<template>
|
|
11
|
+
<sonic-scope customIconLibraryPath="/svg/$prefix/$name.svg"
|
|
12
|
+
customIconDefaultPrefix="regular">
|
|
13
|
+
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
14
|
+
<div class="text-center">
|
|
15
|
+
<sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
|
|
16
|
+
<br>
|
|
17
|
+
<div class="text-xs mt-1">regular</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="text-center">
|
|
20
|
+
<sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
|
|
21
|
+
<br>
|
|
22
|
+
<div class="text-xs mt-1">solid</div>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="text-center">
|
|
25
|
+
<sonic-icon library="custom" name="plane"></sonic-icon>
|
|
26
|
+
<br>
|
|
27
|
+
<div class="text-xs mt-1">default prefix</div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</sonic-scope>
|
|
31
|
+
</template>
|
|
32
|
+
</sonic-code>
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
## External
|
|
36
|
+
<sonic-code>
|
|
37
|
+
<template>
|
|
38
|
+
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
39
|
+
<sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
|
|
40
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
|
|
41
|
+
<br>
|
|
42
|
+
<div class="text-xs mt-1">heroicons</div>
|
|
43
|
+
</sonic-link>
|
|
44
|
+
<sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
|
|
45
|
+
<sonic-icon library="iconoir" name="2x2-cell" size="lg"></sonic-icon>
|
|
46
|
+
<br>
|
|
47
|
+
<div class="text-xs mt-1">iconoir</div>
|
|
48
|
+
</sonic-link>
|
|
49
|
+
<sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
|
|
50
|
+
<sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
|
|
51
|
+
<br>
|
|
52
|
+
<div class="text-xs mt-1">material design</div>
|
|
53
|
+
</sonic-link>
|
|
54
|
+
<sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
|
|
55
|
+
<sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
|
|
56
|
+
<br>
|
|
57
|
+
<div class="text-xs mt-1">fontAwesome regular</div>
|
|
58
|
+
</sonic-link>
|
|
59
|
+
<sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
|
|
60
|
+
<sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
|
|
61
|
+
<br>
|
|
62
|
+
<div class="text-xs mt-1">fontAwesome solid</div>
|
|
63
|
+
</sonic-link>
|
|
64
|
+
<sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
|
|
65
|
+
<sonic-icon library="feathers" name="activity" size="lg"></sonic-icon>
|
|
66
|
+
<br>
|
|
67
|
+
<div class="text-xs mt-1">feathers</div>
|
|
68
|
+
</sonic-link>
|
|
69
|
+
<sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
|
|
70
|
+
<sonic-icon library="lucide" name="album" size="lg"></sonic-icon>
|
|
71
|
+
<br>
|
|
72
|
+
<div class="text-xs mt-1">lucide</div>
|
|
73
|
+
</sonic-link>
|
|
74
|
+
</div>
|
|
75
|
+
</template>
|
|
76
|
+
</sonic-code>
|
|
77
|
+
|
|
78
|
+
## Size
|
|
79
|
+
<sonic-code>
|
|
80
|
+
<template>
|
|
81
|
+
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
82
|
+
<div class="text-center">
|
|
83
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
|
|
84
|
+
<br>
|
|
85
|
+
<div class="text-xs mt-1">2xs</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="text-center">
|
|
88
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
|
|
89
|
+
<br>
|
|
90
|
+
<div class="text-xs mt-1">xs</div>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="text-center">
|
|
93
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
|
|
94
|
+
<br>
|
|
95
|
+
<div class="text-xs mt-1">sm</div>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="text-center">
|
|
98
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
|
|
99
|
+
<br>
|
|
100
|
+
<div class="text-xs mt-1">default</div>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="text-center">
|
|
103
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
|
|
104
|
+
<br>
|
|
105
|
+
<div class="text-xs mt-1">lg</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="text-center">
|
|
108
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
|
|
109
|
+
<br>
|
|
110
|
+
<div class="text-xs mt-1">xl</div>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="text-center">
|
|
113
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
|
|
114
|
+
<br>
|
|
115
|
+
<div class="text-xs mt-1">2xl</div>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="text-center">
|
|
118
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
|
|
119
|
+
<br>
|
|
120
|
+
<div class="text-xs mt-1">3xl</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</template>
|
|
124
|
+
</sonic-code>
|
|
125
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"core":{"cancel":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","emoji-puzzled":"<svg width=\"24px\" height=\"24px\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" ><path d=\"M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M11.5 15.5s1.5-2 4.5-2 4.5 2 4.5 2M3 4c0-2.754 4-2.754 4 0 0 1.967-2 1.64-2 4M5 11.01l.01-.011\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M17.5 9a.5.5 0 110-1 .5.5 0 010 1zM10.5 9a.5.5 0 110-1 .5.5 0 010 1z\" fill=\"#000\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>","info-empty":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","loader":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-loader\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>","minus-small":"<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18 12H6\" />\n</svg>\n","more-horiz":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M18 12.5C18.2761 12.5 18.5 12.2761 18.5 12C18.5 11.7239 18.2761 11.5 18 11.5C17.7239 11.5 17.5 11.7239 17.5 12C17.5 12.2761 17.7239 12.5 18 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M6 12.5C6.27614 12.5 6.5 12.2761 6.5 12C6.5 11.7239 6.27614 11.5 6 11.5C5.72386 11.5 5.5 11.7239 5.5 12C5.5 12.2761 5.72386 12.5 6 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","more-vert":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","nav-arrow-down":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","warning-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"}}
|