@supersoniks/concorde 5.1.0 → 5.1.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/.agents/skills/concorde-docs/SKILL.md +153 -0
- package/.agents/skills/{concorde-component-docs/template.md → concorde-docs/templates/component.md} +6 -2
- package/.agents/skills/concorde-docs/templates/decorator.md +43 -0
- package/.agents/skills/concorde-docs/templates/guide.md +25 -0
- package/.claude/launch.json +15 -0
- package/.claude/vite.http.config.mjs +7 -0
- package/.taste-skill/after/desktop-fold.jpg +0 -0
- package/.taste-skill/after/desktop-page-01.jpg +0 -0
- package/.taste-skill/after/desktop-page-02.jpg +0 -0
- package/.taste-skill/after/desktop-page-03.jpg +0 -0
- package/.taste-skill/after/mobile-fold.jpg +0 -0
- package/.taste-skill/after/mobile-page-01.jpg +0 -0
- package/.taste-skill/after/report.json +4103 -0
- package/.taste-skill/after/tablet-fold.jpg +0 -0
- package/.taste-skill/after/tablet-page-01.jpg +0 -0
- package/.taste-skill/after/tablet-page-02.jpg +0 -0
- package/.taste-skill/before/desktop-fold.jpg +0 -0
- package/.taste-skill/before/desktop-page-01.jpg +0 -0
- package/.taste-skill/before/desktop-page-02.jpg +0 -0
- package/.taste-skill/before/mobile-fold.jpg +0 -0
- package/.taste-skill/before/mobile-page-01.jpg +0 -0
- package/.taste-skill/before/report.json +2556 -0
- package/.taste-skill/before/tablet-fold.jpg +0 -0
- package/.taste-skill/before/tablet-page-01.jpg +0 -0
- package/.taste-skill/direction.json +510 -0
- package/.taste-skill/notes.md +84 -0
- package/.taste-skill/prod/desktop-fold.jpg +0 -0
- package/.taste-skill/prod/desktop-page-01.jpg +0 -0
- package/.taste-skill/prod/desktop-page-02.jpg +0 -0
- package/.taste-skill/prod/desktop-page-03.jpg +0 -0
- package/.taste-skill/prod/mobile-fold.jpg +0 -0
- package/.taste-skill/prod/mobile-page-01.jpg +0 -0
- package/.taste-skill/prod/mobile-page-02.jpg +0 -0
- package/.taste-skill/prod/report.json +1973 -0
- package/.taste-skill/prod/tablet-fold.jpg +0 -0
- package/.taste-skill/prod/tablet-page-01.jpg +0 -0
- package/.taste-skill/prod/tablet-page-02.jpg +0 -0
- package/.tmp-cem/custom-elements.json +2013 -2013
- package/AUDIT.md +228 -0
- package/PLAN-AMELIORATION.md +220 -0
- package/PLAN-DOCS-AGENTS.md +80 -0
- package/README.md +3 -3
- package/ai/skills/concorde/SKILL.md +1 -1
- package/ai/skills/concorde-get-set-dp/SKILL.md +3 -3
- package/ai/skills/concorde-theme/SKILL.md +1 -1
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +16 -16
- package/concorde-core.es.js +235 -233
- package/dist/concorde-core.bundle.js +16 -16
- package/dist/concorde-core.es.js +235 -233
- package/dist/img/archive/concorde-001-2cv.webp +0 -0
- package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/dist/img/archive/credits.json +28 -0
- package/docs/.htaccess +75 -0
- package/docs/404.html +15 -0
- package/docs/404.md +5 -0
- package/docs/assets/index-BgG6FFPt.js +11765 -0
- package/docs/assets/index-x89XINSG.css +1 -0
- package/docs/core/components/functional/date/date.html +211 -0
- package/docs/core/components/functional/date/date.md +150 -0
- package/docs/core/components/functional/fetch/fetch.html +180 -0
- package/docs/core/components/functional/fetch/fetch.md +108 -0
- package/docs/core/components/functional/if/if.html +65 -0
- package/docs/core/components/functional/if/if.md +34 -0
- package/docs/core/components/functional/jsonata/jsonata.html +110 -0
- package/docs/core/components/functional/jsonata/jsonata.md +61 -0
- package/docs/core/components/functional/list/list.html +198 -0
- package/docs/core/components/functional/list/list.md +121 -0
- package/docs/core/components/functional/mix/mix.html +78 -0
- package/docs/core/components/functional/mix/mix.md +46 -0
- package/docs/core/components/functional/queue/queue.html +155 -0
- package/docs/core/components/functional/queue/queue.md +51 -0
- package/docs/core/components/functional/router/router.html +154 -0
- package/docs/core/components/functional/router/router.md +93 -0
- package/docs/core/components/functional/sdui/sdui-extension-points.html +127 -0
- package/docs/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/core/components/functional/sdui/sdui.html +397 -0
- package/docs/core/components/functional/sdui/sdui.md +307 -0
- package/docs/core/components/functional/states/states.html +141 -0
- package/docs/core/components/functional/states/states.md +112 -0
- package/docs/core/components/functional/submit/submit.html +178 -0
- package/docs/core/components/functional/submit/submit.md +106 -0
- package/docs/{crawl/core → core}/components/functional/subscriber/subscriber.html +6 -5
- package/docs/core/components/functional/subscriber/subscriber.md +91 -0
- package/docs/core/components/functional/translation/translation.html +60 -0
- package/docs/core/components/functional/translation/translation.md +38 -0
- package/docs/core/components/functional/value/value.html +81 -0
- package/docs/core/components/functional/value/value.md +47 -0
- package/docs/core/components/ui/alert/alert.html +201 -0
- package/docs/core/components/ui/alert/alert.md +186 -0
- package/docs/core/components/ui/alert-messages/alert-messages.html +132 -0
- package/docs/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/core/components/ui/badge/badge.html +197 -0
- package/docs/core/components/ui/badge/badge.md +181 -0
- package/docs/core/components/ui/button/button.html +309 -0
- package/docs/core/components/ui/button/button.md +216 -0
- package/docs/core/components/ui/captcha/captcha.html +80 -0
- package/docs/core/components/ui/captcha/captcha.md +56 -0
- package/docs/core/components/ui/card/card.html +254 -0
- package/docs/core/components/ui/card/card.md +215 -0
- package/docs/core/components/ui/divider/divider.html +144 -0
- package/docs/core/components/ui/divider/divider.md +126 -0
- package/docs/core/components/ui/form/checkbox/checkbox.html +200 -0
- package/docs/core/components/ui/form/checkbox/checkbox.md +125 -0
- package/docs/core/components/ui/form/fieldset/fieldset.html +238 -0
- package/docs/core/components/ui/form/fieldset/fieldset.md +161 -0
- package/docs/core/components/ui/form/form-actions/form-actions.html +122 -0
- package/docs/core/components/ui/form/form-actions/form-actions.md +98 -0
- package/docs/core/components/ui/form/form-layout/form-layout.html +115 -0
- package/docs/core/components/ui/form/form-layout/form-layout.md +109 -0
- package/docs/core/components/ui/form/input/input.html +235 -0
- package/docs/core/components/ui/form/input/input.md +142 -0
- package/docs/core/components/ui/form/radio/radio.html +144 -0
- package/docs/core/components/ui/form/radio/radio.md +78 -0
- package/docs/core/components/ui/form/select/select.html +178 -0
- package/docs/core/components/ui/form/select/select.md +86 -0
- package/docs/core/components/ui/form/switch/switch.html +146 -0
- package/docs/core/components/ui/form/switch/switch.md +80 -0
- package/docs/core/components/ui/form/textarea/textarea.html +162 -0
- package/docs/core/components/ui/form/textarea/textarea.md +82 -0
- package/docs/core/components/ui/group/group.html +113 -0
- package/docs/core/components/ui/group/group.md +77 -0
- package/docs/core/components/ui/icon/icon.html +223 -0
- package/docs/core/components/ui/icon/icon.md +214 -0
- package/docs/core/components/ui/image/image.html +194 -0
- package/docs/core/components/ui/image/image.md +167 -0
- package/docs/core/components/ui/link/link.html +101 -0
- package/docs/core/components/ui/link/link.md +81 -0
- package/docs/core/components/ui/loader/loader.html +114 -0
- package/docs/core/components/ui/loader/loader.md +87 -0
- package/docs/{crawl/core → core}/components/ui/menu/menu.html +189 -116
- package/docs/core/components/ui/menu/menu.md +370 -0
- package/docs/core/components/ui/modal/modal.html +324 -0
- package/docs/core/components/ui/modal/modal.md +211 -0
- package/docs/core/components/ui/pop/pop.html +250 -0
- package/docs/core/components/ui/pop/pop.md +216 -0
- package/docs/core/components/ui/progress/progress.html +132 -0
- package/docs/core/components/ui/progress/progress.md +109 -0
- package/docs/core/components/ui/table/table.html +333 -0
- package/docs/core/components/ui/table/table.md +267 -0
- package/docs/core/components/ui/theme/theme.html +116 -0
- package/docs/core/components/ui/theme/theme.md +97 -0
- package/docs/core/components/ui/toast/toast.html +185 -0
- package/docs/core/components/ui/toast/toast.md +147 -0
- package/docs/core/components/ui/tooltip/tooltip.html +112 -0
- package/docs/core/components/ui/tooltip/tooltip.md +89 -0
- package/docs/docs/decorators/ancestor-attribute.html +71 -0
- package/docs/docs/decorators/ancestor-attribute.md +59 -0
- package/docs/docs/decorators/auto-subscribe.html +61 -0
- package/docs/docs/decorators/auto-subscribe.md +40 -0
- package/docs/docs/decorators/bind.html +86 -0
- package/docs/docs/decorators/bind.md +77 -0
- package/docs/docs/decorators/get.html +166 -0
- package/docs/docs/decorators/get.md +160 -0
- package/docs/docs/decorators/handle.html +139 -0
- package/docs/docs/decorators/handle.md +119 -0
- package/docs/docs/decorators/on-assign.html +72 -0
- package/docs/docs/decorators/on-assign.md +63 -0
- package/docs/docs/decorators/patch.html +76 -0
- package/docs/docs/decorators/patch.md +44 -0
- package/docs/docs/decorators/post.html +150 -0
- package/docs/docs/decorators/post.md +134 -0
- package/docs/docs/decorators/publish.html +74 -0
- package/docs/docs/decorators/publish.md +56 -0
- package/docs/docs/decorators/put.html +83 -0
- package/docs/docs/decorators/put.md +51 -0
- package/docs/docs/decorators/subscribe.html +91 -0
- package/docs/docs/decorators/subscribe.md +87 -0
- package/docs/docs/decorators/wait-for-ancestors.html +82 -0
- package/docs/docs/decorators/wait-for-ancestors.md +76 -0
- package/docs/docs/directives/sub.html +79 -0
- package/docs/docs/directives/sub.md +75 -0
- package/docs/docs/directives/t.html +91 -0
- package/docs/docs/directives/t.md +73 -0
- package/docs/{crawl/docs/_getting-started → docs/getting-started}/ai-agents.html +12 -11
- package/{src/docs/_getting-started → docs/docs/getting-started}/ai-agents.md +3 -3
- package/docs/docs/getting-started/components.html +27 -0
- package/docs/docs/getting-started/components.md +5 -0
- package/docs/{crawl/docs/_getting-started → docs/getting-started}/create-a-component.html +11 -14
- package/docs/{src/docs/_getting-started → docs/getting-started}/create-a-component.md +3 -6
- package/docs/{crawl/docs/_core-concept → docs/getting-started}/dataFlow.html +26 -29
- package/docs/{src/docs/_core-concept → docs/getting-started}/dataFlow.md +17 -18
- package/docs/docs/getting-started/installation.html +69 -0
- package/docs/docs/getting-started/installation.md +36 -0
- package/docs/{crawl/docs/_getting-started → docs/getting-started}/my-first-component.html +13 -22
- package/docs/{src/docs/_getting-started → docs/getting-started}/my-first-component.md +5 -14
- package/docs/docs/getting-started/start.html +47 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/start.md +1 -13
- package/docs/docs/getting-started/theming.html +334 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/theming.md +2 -2
- package/docs/docs/index.html +99 -0
- package/docs/{crawl/docs/_misc → docs/misc}/api-configuration.html +18 -18
- package/docs/{src/docs/_misc → docs/misc}/api-configuration.md +10 -12
- package/docs/{crawl/docs/_misc → docs/misc}/dataProviderKey.html +12 -11
- package/{src/docs/_misc → docs/docs/misc}/dataProviderKey.md +4 -4
- package/docs/{crawl/docs/_misc → docs/misc}/docs-mock-api.html +25 -28
- package/docs/{src/docs/_misc → docs/misc}/docs-mock-api.md +12 -13
- package/docs/{crawl/docs/_misc → docs/misc}/dynamic-path.html +16 -15
- package/{src/docs/_misc → docs/docs/misc}/dynamic-path.md +8 -8
- package/docs/{crawl/docs/_misc → docs/misc}/endpoint.html +16 -15
- package/{src/docs/_misc → docs/docs/misc}/endpoint.md +8 -8
- package/docs/{crawl/docs/_misc → docs/misc}/html-integration.html +12 -15
- package/docs/{src/docs/_misc → docs/misc}/html-integration.md +4 -5
- package/docs/docs-mock-api-sw.js +60 -223
- package/docs/docs-mock-api-sw.js.map +4 -4
- package/docs/hubs/decorators.html +443 -0
- package/docs/hubs/form-components.html +404 -0
- package/docs/hubs/remote-data.html +371 -0
- package/docs/img/archive/concorde-001-2cv.webp +0 -0
- package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/docs/img/archive/credits.json +28 -0
- package/docs/img/concorde/plane_01.jpg +0 -0
- package/docs/img/concorde/plane_02.jpg +0 -0
- package/docs/img/concorde/plane_03.jpg +0 -0
- package/docs/img/concorde/plane_04.jpg +0 -0
- package/docs/img/concorde/plane_05.jpg +0 -0
- package/docs/img/concorde/plane_06.jpg +0 -0
- package/docs/img/concorde/plane_07.jpg +0 -0
- package/docs/img/concorde/plane_08.jpg +0 -0
- package/docs/img/concorde/plane_09.jpg +0 -0
- package/docs/img/concorde/plane_10.jpg +0 -0
- package/docs/img/concorde/plane_11.jpg +0 -0
- package/docs/img/concorde/plane_12.jpg +0 -0
- package/docs/img/concorde/plane_13.jpg +0 -0
- package/docs/index.html +96 -67
- package/docs/index.md +22 -0
- package/docs/llms-full.txt +3329 -3295
- package/docs/llms.txt +94 -92
- package/docs/robots.txt +11 -10
- package/docs/sitemap.xml +78 -78
- package/docs/src/core/components/functional/date/date.md +91 -231
- package/docs/src/core/components/functional/fetch/fetch.md +66 -83
- package/docs/src/core/components/functional/if/if.md +28 -3
- package/docs/src/core/components/functional/jsonata/jsonata.md +42 -37
- package/docs/src/core/components/functional/list/list.md +99 -43
- package/docs/src/core/components/functional/mix/mix.md +31 -26
- package/docs/src/core/components/functional/queue/queue.md +40 -61
- package/docs/src/core/components/functional/router/router.md +64 -65
- package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
- package/docs/src/core/components/functional/sdui/component-catalog.json +3103 -0
- package/docs/src/core/components/functional/sdui/example.json +19 -86
- package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/src/core/components/functional/sdui/sdui.md +196 -245
- package/docs/src/core/components/functional/states/states.md +86 -61
- package/docs/src/core/components/functional/submit/submit.md +64 -72
- package/docs/src/core/components/functional/translation/translation.md +38 -0
- package/docs/src/core/components/functional/value/value.md +34 -22
- package/docs/src/core/components/ui/alert/alert.md +139 -74
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/src/core/components/ui/badge/badge.md +137 -83
- package/docs/src/core/components/ui/button/button.md +139 -105
- package/docs/src/core/components/ui/captcha/captcha.md +50 -6
- package/docs/src/core/components/ui/card/card.md +183 -65
- package/docs/src/core/components/ui/divider/divider.md +104 -13
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +90 -42
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +135 -103
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +71 -50
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +99 -34
- package/docs/src/core/components/ui/form/input/input.md +95 -95
- package/docs/src/core/components/ui/form/radio/radio.md +55 -34
- package/docs/src/core/components/ui/form/select/select.md +60 -45
- package/docs/src/core/components/ui/form/switch/switch.md +57 -34
- package/docs/src/core/components/ui/form/textarea/textarea.md +55 -38
- package/docs/src/core/components/ui/group/group.md +49 -47
- package/docs/src/core/components/ui/icon/icon.md +132 -43
- package/docs/src/core/components/ui/image/image.md +132 -72
- package/docs/src/core/components/ui/link/link.md +46 -8
- package/docs/src/core/components/ui/loader/loader.md +55 -23
- package/docs/src/core/components/ui/menu/menu.md +155 -114
- package/docs/src/core/components/ui/modal/modal.md +154 -62
- package/docs/src/core/components/ui/pop/pop.md +185 -65
- package/docs/src/core/components/ui/progress/progress.md +76 -30
- package/docs/src/core/components/ui/table/table.md +146 -334
- package/docs/src/core/components/ui/theme/theme.md +97 -0
- package/docs/src/core/components/ui/toast/toast.md +80 -99
- package/docs/src/core/components/ui/tooltip/tooltip.md +52 -45
- package/docs/src/docs/decorators/ancestor-attribute.md +59 -0
- package/docs/src/docs/decorators/auto-subscribe.md +40 -0
- package/docs/src/docs/decorators/bind.md +77 -0
- package/docs/src/docs/decorators/get.md +160 -0
- package/docs/src/docs/decorators/handle.md +119 -0
- package/docs/src/docs/decorators/on-assign.md +63 -0
- package/docs/src/docs/decorators/patch.md +44 -0
- package/docs/src/docs/decorators/post.md +134 -0
- package/docs/src/docs/decorators/publish.md +56 -0
- package/docs/src/docs/decorators/put.md +51 -0
- package/docs/src/docs/decorators/subscribe.md +87 -0
- package/docs/src/docs/decorators/wait-for-ancestors.md +76 -0
- package/docs/src/docs/directives/sub.md +75 -0
- package/docs/src/docs/directives/t.md +73 -0
- package/docs/src/docs/{_getting-started → getting-started}/ai-agents.md +3 -3
- package/docs/src/docs/getting-started/components.md +5 -0
- package/{src/docs/_getting-started → docs/src/docs/getting-started}/create-a-component.md +3 -6
- package/{src/docs/_core-concept → docs/src/docs/getting-started}/dataFlow.md +17 -18
- package/docs/src/docs/getting-started/installation.md +36 -0
- package/{src/docs/_getting-started → docs/src/docs/getting-started}/my-first-component.md +5 -14
- package/docs/src/docs/getting-started/start.md +35 -0
- package/docs/src/docs/getting-started/theming.md +253 -0
- package/{src/docs/_misc → docs/src/docs/misc}/api-configuration.md +10 -12
- package/docs/src/docs/{_misc → misc}/dataProviderKey.md +4 -4
- package/{src/docs/_misc → docs/src/docs/misc}/docs-mock-api.md +12 -13
- package/docs/src/docs/{_misc → misc}/dynamic-path.md +8 -8
- package/docs/src/docs/{_misc → misc}/endpoint.md +8 -8
- package/{src/docs/_misc → docs/src/docs/misc}/html-integration.md +4 -5
- package/docs/src/docs/search/docs-search.json +3729 -2949
- package/docs/src/tsconfig.json +176 -5
- package/index.html +94 -67
- package/package.json +11 -4
- package/public/docs-mock-api-sw.js +58 -223
- package/public/docs-mock-api-sw.js.map +4 -4
- package/public/img/archive/concorde-001-2cv.webp +0 -0
- package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/public/img/archive/credits.json +28 -0
- package/public/img/concorde/plane_01.jpg +0 -0
- package/public/img/concorde/plane_02.jpg +0 -0
- package/public/img/concorde/plane_03.jpg +0 -0
- package/public/img/concorde/plane_04.jpg +0 -0
- package/public/img/concorde/plane_05.jpg +0 -0
- package/public/img/concorde/plane_06.jpg +0 -0
- package/public/img/concorde/plane_07.jpg +0 -0
- package/public/img/concorde/plane_08.jpg +0 -0
- package/public/img/concorde/plane_09.jpg +0 -0
- package/public/img/concorde/plane_10.jpg +0 -0
- package/public/img/concorde/plane_11.jpg +0 -0
- package/public/img/concorde/plane_12.jpg +0 -0
- package/public/img/concorde/plane_13.jpg +0 -0
- package/public/robots.txt +11 -10
- package/scripts/docs-markdown-vite-plugin.ts +37 -0
- package/scripts/docs-public-url.mjs +50 -0
- package/scripts/docs.htaccess +75 -0
- package/scripts/generate-crawl-docs.mjs +207 -116
- package/scripts/generate-crawl-docs.test.mjs +124 -0
- package/scripts/post-build-docs.js +34 -50
- package/scripts/post-build.mjs +0 -0
- package/src/core/components/functional/date/date.md +91 -231
- package/src/core/components/functional/fetch/fetch.md +66 -83
- package/src/core/components/functional/if/if.md +28 -3
- package/src/core/components/functional/if/if.ts +0 -0
- package/src/core/components/functional/jsonata/jsonata.md +42 -37
- package/src/core/components/functional/list/list.demo.ts +0 -0
- package/src/core/components/functional/list/list.md +99 -43
- package/src/core/components/functional/mix/mix.md +31 -26
- package/src/core/components/functional/queue/queue.demo.ts +10 -7
- package/src/core/components/functional/queue/queue.md +40 -61
- package/src/core/components/functional/router/router.demo.ts +16 -16
- package/src/core/components/functional/router/router.md +64 -65
- package/src/core/components/functional/router/router.ts +0 -0
- package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
- package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
- package/src/core/components/functional/sdui/component-catalog.json +1 -1
- package/src/core/components/functional/sdui/example.json +19 -86
- package/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
- package/src/core/components/functional/sdui/sdui.md +187 -358
- package/src/core/components/functional/sdui/types.ts +0 -0
- package/src/core/components/functional/states/states.demo.ts +21 -22
- package/src/core/components/functional/states/states.md +86 -61
- package/src/core/components/functional/states/states.ts +1 -1
- package/src/core/components/functional/submit/submit.md +64 -72
- package/src/core/components/functional/subscriber/subscriber.ts +0 -0
- package/src/core/components/functional/translation/translation.md +38 -0
- package/src/core/components/functional/value/value.md +34 -22
- package/src/core/components/functional/value/value.ts +0 -0
- package/src/core/components/ui/_css/size.ts +0 -0
- package/src/core/components/ui/alert/alert.md +48 -58
- package/src/core/components/ui/badge/badge.md +27 -34
- package/src/core/components/ui/button/button.md +139 -106
- package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
- package/src/core/components/ui/captcha/captcha.md +17 -32
- package/src/core/components/ui/card/card.md +6 -6
- package/src/core/components/ui/divider/divider.md +8 -11
- package/src/core/components/ui/form/checkbox/checkbox.md +90 -42
- package/src/core/components/ui/form/fieldset/fieldset.md +31 -75
- package/src/core/components/ui/form/form-actions/form-actions.md +14 -16
- package/src/core/components/ui/form/form-layout/form-layout.md +19 -29
- package/src/core/components/ui/form/input/input.md +95 -95
- package/src/core/components/ui/form/radio/radio.md +55 -34
- package/src/core/components/ui/form/select/select.md +60 -45
- package/src/core/components/ui/form/switch/switch.md +57 -34
- package/src/core/components/ui/form/textarea/textarea.md +55 -38
- package/src/core/components/ui/group/group.md +35 -33
- package/src/core/components/ui/icon/icon.md +4 -4
- package/src/core/components/ui/image/image.md +41 -107
- package/src/core/components/ui/link/link.md +6 -6
- package/src/core/components/ui/loader/loader.md +30 -55
- package/src/core/components/ui/menu/menu.md +27 -27
- package/src/core/components/ui/modal/modal.md +72 -96
- package/src/core/components/ui/modal/modal.ts +14 -11
- package/src/core/components/ui/pop/pop.md +80 -158
- package/src/core/components/ui/progress/progress.md +2 -2
- package/src/core/components/ui/table/table.md +91 -255
- package/src/core/components/ui/theme/theme.md +11 -36
- package/src/core/components/ui/toast/toast.md +48 -117
- package/src/core/components/ui/tooltip/tooltip.md +27 -62
- package/src/core/mixins/Subscriber.ts +0 -0
- package/src/core/utils/DataBindObserver.ts +0 -0
- package/src/core/utils/LocationHandler.spec.ts +80 -0
- package/src/core/utils/LocationHandler.ts +5 -9
- package/src/core/utils/Objects.ts +0 -0
- package/src/core/utils/route.ts +0 -0
- package/src/docs/code.ts +88 -75
- package/src/docs/components/docs-demo-sources.ts +70 -147
- package/src/docs/components/docs-lit-demo.ts +20 -40
- package/src/docs/components/docs-source-link.ts +0 -82
- package/src/docs/decorators/ancestor-attribute.md +59 -0
- package/src/docs/decorators/auto-subscribe.md +40 -0
- package/src/docs/decorators/bind.md +77 -0
- package/src/docs/decorators/get.md +160 -0
- package/src/docs/decorators/handle.md +119 -0
- package/src/docs/decorators/on-assign.md +63 -0
- package/src/docs/decorators/patch.md +44 -0
- package/src/docs/decorators/post.md +134 -0
- package/src/docs/decorators/publish.md +56 -0
- package/src/docs/decorators/put.md +51 -0
- package/src/docs/decorators/subscribe.md +87 -0
- package/src/docs/decorators/wait-for-ancestors.md +76 -0
- package/src/docs/directives/sub.md +75 -0
- package/src/docs/directives/t.md +73 -0
- package/src/docs/docs-location.spec.ts +46 -0
- package/src/docs/docs-location.ts +123 -32
- package/src/docs/docs.ts +6 -2
- package/src/docs/example/decorators-demo-bind-demos.ts +81 -116
- package/src/docs/example/decorators-demo-geo.ts +30 -19
- package/src/docs/example/decorators-demo-post.ts +88 -186
- package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
- package/src/docs/example/decorators-demo.ts +85 -98
- package/src/docs/example/docs-api-config-demos.ts +19 -20
- package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
- package/src/docs/example/docs-flight-demos.ts +147 -0
- package/src/docs/example/docs-jsonata-demos.ts +52 -52
- package/src/docs/example/docs-list-demos.ts +43 -123
- package/src/docs/example/docs-provider-keys.ts +33 -28
- package/src/docs/example/docs-queue-demos.ts +37 -77
- package/src/docs/example/docs-router-demos.ts +20 -25
- package/src/docs/example/docs-submit-demos.ts +48 -48
- package/src/docs/example/docs-toggle-demos.ts +4 -3
- package/src/docs/example/users.ts +0 -0
- package/src/docs/getting-started/ai-agents.md +76 -0
- package/src/docs/getting-started/components.md +5 -0
- package/src/docs/getting-started/create-a-component.md +136 -0
- package/src/docs/getting-started/dataFlow.md +87 -0
- package/src/docs/getting-started/installation.md +36 -0
- package/src/docs/getting-started/my-first-component.md +227 -0
- package/src/docs/getting-started/start.md +35 -0
- package/src/docs/getting-started/theming.md +253 -0
- package/src/docs/header/header.ts +240 -71
- package/src/docs/home/catalog.ts +44 -0
- package/src/docs/home/home.ts +520 -0
- package/src/docs/home/mach-stage.ts +389 -0
- package/src/docs/layout.ts +12 -11
- package/src/docs/misc/api-configuration.md +79 -0
- package/src/docs/misc/dataProviderKey.md +168 -0
- package/src/docs/misc/docs-mock-api.md +62 -0
- package/src/docs/misc/dynamic-path.md +71 -0
- package/src/docs/misc/endpoint.md +45 -0
- package/src/docs/misc/html-integration.md +14 -0
- package/src/docs/mock-api/api-config-mock.ts +5 -0
- package/src/docs/mock-api/fixtures.ts +0 -278
- package/src/docs/mock-api/flights.ts +89 -0
- package/src/docs/mock-api/router.ts +3 -4
- package/src/docs/mock-api/urls.ts +1 -2
- package/src/docs/navigation/components-index.ts +56 -0
- package/src/docs/navigation/navigation.ts +219 -232
- package/src/docs/navigation/pager.ts +67 -0
- package/src/docs/navigation/toc.ts +101 -0
- package/src/docs/search/docs-search.json +2419 -4374
- package/src/docs/search/markdown-renderer.ts +33 -7
- package/src/docs/search/page.ts +9 -6
- package/src/docs/search/search.ts +154 -122
- package/src/docs/shiki/index.ts +109 -0
- package/src/docs/tailwind/css/base/scrollbar.css +22 -0
- package/src/docs/tailwind/css/base/theme.css +96 -0
- package/src/docs/tailwind/css/base/typography.css +4 -0
- package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
- package/src/docs/tailwind/css/docs/content.css +32 -0
- package/src/docs/tailwind/css/docs/page.css +10 -0
- package/src/docs/tailwind/css/docs.css +9 -0
- package/src/docs/tailwind/css/home/hero.css +210 -0
- package/src/docs/tailwind/css/home/motion.css +84 -0
- package/src/docs/tailwind/css/home/sections.css +416 -0
- package/src/docs/tailwind/css/tailwind.css +7 -185
- package/src/tsconfig.json +23 -2
- package/src/tsconfig.tsbuildinfo +1 -1
- package/tailwind.config.js +8 -4
- package/vite.config.mts +11 -2
- package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
- package/.github/workflows/ci.yml +0 -21
- package/.github-export-ignore +0 -30
- package/CONTRIBUTING.md +0 -59
- package/DEV.md +0 -54
- package/LICENSE +0 -21
- package/OPEN_SOURCE_CHECKPOINT.md +0 -133
- package/concorde-3d.bundle.js +0 -3960
- package/concorde-3d.es.js +0 -33433
- package/concorde-hugging-face-infer.bundle.js +0 -32
- package/concorde-hugging-face-infer.es.js +0 -2952
- package/concorde-interactive.bundle.js +0 -1157
- package/concorde-interactive.es.js +0 -10734
- package/concorde-shader.bundle.js +0 -116
- package/concorde-shader.es.js +0 -8353
- package/concorde-webgpu.bundle.js +0 -307
- package/concorde-webgpu.es.js +0 -8627
- package/docs/assets/index-D8MVWqY6.js +0 -12251
- package/docs/assets/index-DiD0qYvE.css +0 -1
- package/docs/crawl/core/components/functional/date/date.html +0 -190
- package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
- package/docs/crawl/core/components/functional/if/if.html +0 -27
- package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
- package/docs/crawl/core/components/functional/list/list.html +0 -70
- package/docs/crawl/core/components/functional/mix/mix.html +0 -45
- package/docs/crawl/core/components/functional/queue/queue.html +0 -96
- package/docs/crawl/core/components/functional/router/router.html +0 -106
- package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
- package/docs/crawl/core/components/functional/states/states.html +0 -66
- package/docs/crawl/core/components/functional/submit/submit.html +0 -160
- package/docs/crawl/core/components/functional/value/value.html +0 -51
- package/docs/crawl/core/components/ui/alert/alert.html +0 -110
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
- package/docs/crawl/core/components/ui/badge/badge.html +0 -119
- package/docs/crawl/core/components/ui/button/button.html +0 -149
- package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
- package/docs/crawl/core/components/ui/card/card.html +0 -99
- package/docs/crawl/core/components/ui/divider/divider.html +0 -58
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
- package/docs/crawl/core/components/ui/form/input/input.html +0 -109
- package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
- package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
- package/docs/crawl/core/components/ui/form/select/select.html +0 -73
- package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
- package/docs/crawl/core/components/ui/group/group.html +0 -82
- package/docs/crawl/core/components/ui/icon/icon.html +0 -133
- package/docs/crawl/core/components/ui/image/image.html +0 -110
- package/docs/crawl/core/components/ui/link/link.html +0 -42
- package/docs/crawl/core/components/ui/loader/loader.html +0 -50
- package/docs/crawl/core/components/ui/modal/modal.html +0 -117
- package/docs/crawl/core/components/ui/pop/pop.html +0 -102
- package/docs/crawl/core/components/ui/progress/progress.html +0 -58
- package/docs/crawl/core/components/ui/table/table.html +0 -413
- package/docs/crawl/core/components/ui/toast/toast.html +0 -122
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
- package/docs/crawl/docs/_core-concept/overview.html +0 -66
- package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -116
- package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
- package/docs/crawl/docs/_decorators/bind.html +0 -141
- package/docs/crawl/docs/_decorators/get.html +0 -149
- package/docs/crawl/docs/_decorators/handle.html +0 -165
- package/docs/crawl/docs/_decorators/on-assign.html +0 -355
- package/docs/crawl/docs/_decorators/patch.html +0 -78
- package/docs/crawl/docs/_decorators/post.html +0 -139
- package/docs/crawl/docs/_decorators/publish.html +0 -61
- package/docs/crawl/docs/_decorators/put.html +0 -78
- package/docs/crawl/docs/_decorators/subscribe.html +0 -109
- package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
- package/docs/crawl/docs/_directives/sub.html +0 -93
- package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
- package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
- package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
- package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
- package/docs/crawl/docs/_getting-started/start.html +0 -76
- package/docs/crawl/docs/_getting-started/theming.html +0 -85
- package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
- package/docs/crawl/hubs/decorators.html +0 -547
- package/docs/crawl/hubs/form-components.html +0 -359
- package/docs/crawl/hubs/remote-data.html +0 -452
- package/docs/crawl/index.html +0 -101
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
- package/docs/src/docs/_core-concept/overview.md +0 -57
- package/docs/src/docs/_core-concept/subscriber.md +0 -75
- package/docs/src/docs/_decorators/ancestor-attribute.md +0 -127
- package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
- package/docs/src/docs/_decorators/bind.md +0 -167
- package/docs/src/docs/_decorators/get.md +0 -162
- package/docs/src/docs/_decorators/handle.md +0 -175
- package/docs/src/docs/_decorators/on-assign.md +0 -390
- package/docs/src/docs/_decorators/patch.md +0 -70
- package/docs/src/docs/_decorators/post.md +0 -146
- package/docs/src/docs/_decorators/publish.md +0 -55
- package/docs/src/docs/_decorators/put.md +0 -70
- package/docs/src/docs/_decorators/subscribe.md +0 -100
- package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
- package/docs/src/docs/_directives/sub.md +0 -91
- package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
- package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
- package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
- package/docs/src/docs/_getting-started/pubsub.md +0 -37
- package/docs/src/docs/_getting-started/start.md +0 -47
- package/docs/src/docs/_getting-started/theming.md +0 -91
- package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
- package/docs/src/tsconfig.declarations.json +0 -22
- package/docs/src/tsconfig.emit.json +0 -23
- package/gitlab/job_github_mirror.sh +0 -39
- package/scripts/github-export.mjs +0 -150
- package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
- package/src/css.d.ts +0 -19
- package/src/docs/_core-concept/overview.md +0 -57
- package/src/docs/_core-concept/subscriber.md +0 -75
- package/src/docs/_decorators/ancestor-attribute.md +0 -128
- package/src/docs/_decorators/auto-subscribe.md +0 -202
- package/src/docs/_decorators/bind.md +0 -167
- package/src/docs/_decorators/get.md +0 -162
- package/src/docs/_decorators/handle.md +0 -175
- package/src/docs/_decorators/on-assign.md +0 -390
- package/src/docs/_decorators/patch.md +0 -70
- package/src/docs/_decorators/post.md +0 -146
- package/src/docs/_decorators/publish.md +0 -55
- package/src/docs/_decorators/put.md +0 -70
- package/src/docs/_decorators/subscribe.md +0 -100
- package/src/docs/_decorators/wait-for-ancestors.md +0 -163
- package/src/docs/_directives/sub.md +0 -91
- package/src/docs/_getting-started/concorde-manual-install.md +0 -133
- package/src/docs/_getting-started/concorde-outside.md +0 -33
- package/src/docs/_getting-started/my-first-subscriber.md +0 -120
- package/src/docs/_getting-started/pubsub.md +0 -37
- package/src/docs/_misc/formelement-subscriber-removal.md +0 -115
- package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
- package/src/docs/example/docs-joke-demos.ts +0 -297
- package/src/docs/prism/index.ts +0 -6
- package/src/docs/prism/prism.css +0 -158
- package/src/docs/prism/prism.js +0 -1022
- package/src/tsconfig.declarations.json +0 -22
- package/src/tsconfig.emit.json +0 -23
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html" data-doc-id="docs/_getting-started/concorde-manual-install">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Manual installation (Vite) — Concorde</title>
|
|
7
|
-
<meta name="description" content="> Legacy — for brownfield apps or custom stacks. New projects should use the starter.">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/concorde-manual-install, concorde-manual-install, Manual installation (Vite), guide, tsconfig.json, AGENTS.md, --host, becomes ,
|
|
9
|
-
* , main.ts, my-element.ts">
|
|
10
|
-
<meta name="concorde-doc-id" content="docs/_getting-started/concorde-manual-install">
|
|
11
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html">
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
<header>
|
|
15
|
-
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/concorde-manual-install.md/concorde-manual-install" rel="nofollow">interactive version</a></p>
|
|
16
|
-
</header>
|
|
17
|
-
<main>
|
|
18
|
-
<article>
|
|
19
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — Manual installation (Vite)</strong>. > Legacy — for brownfield apps or custom stacks. New projects should use the starter. <span>Doc ID: <code>docs/_getting-started/concorde-manual-install</code>. Keywords: Concorde, supersoniks, docs/_getting-started/concorde-manual-install, concorde-manual-install, Manual installation (Vite), guide, tsconfig.json, AGENTS.md, --host, becomes ,
|
|
20
|
-
* , main.ts, my-element.ts. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html</a>.</span></p>
|
|
21
|
-
<h1 id="manual-installation-vite">Manual installation (Vite)</h1>
|
|
22
|
-
<blockquote>
|
|
23
|
-
<p><strong>Legacy</strong> — for brownfield apps or custom stacks. New projects should use the <a href="./concorde-outside.html#concorde-outside">starter</a>.</p>
|
|
24
|
-
</blockquote>
|
|
25
|
-
<h2 id="brand-new-vite-project">Brand New Vite Project</h2>
|
|
26
|
-
<p>Tailwind configuration is not covered here yet.</p>
|
|
27
|
-
<h3 id="creating-the-project">Creating the Project</h3>
|
|
28
|
-
<pre><code class="language-shell"># Pure JavaScript project
|
|
29
|
-
yarn create vite --template vanilla-js
|
|
30
|
-
# TypeScript project
|
|
31
|
-
# (it is recommended to use this approach, which installs Lit separately if needed, via "yarn add lit")
|
|
32
|
-
yarn create vite --template vanilla-ts
|
|
33
|
-
# TypeScript + Lit project
|
|
34
|
-
# (creating new web components, for example, to extend the fetch or subscriber mixins)
|
|
35
|
-
yarn create vite --template lit-ts
|
|
36
|
-
</code></pre>
|
|
37
|
-
<p>Using Lit with TypeScript requires the following configuration in the "compilerOptions" section of the <code>tsconfig.json</code> file:</p>
|
|
38
|
-
<pre><code class="language-json">"experimentalDecorators": true,
|
|
39
|
-
"useDefineForClassFields": false
|
|
40
|
-
</code></pre>
|
|
41
|
-
<h3 id="installing-concorde">Installing Concorde</h3>
|
|
42
|
-
<p>Navigate to the project folder created and perform the installation:</p>
|
|
43
|
-
<pre><code class="language-shell">yarn add @supersoniks/concorde
|
|
44
|
-
</code></pre>
|
|
45
|
-
<p>Agent skills (<code>AGENTS.md</code>, Cursor / JetBrains): see <a href="./ai-agents.html#ai-agents">AI agents</a> — run <code>node node_modules/@supersoniks/concorde/scripts/ai-init.mjs</code> after install.</p>
|
|
46
|
-
<h3 id="development--build">Development / Build</h3>
|
|
47
|
-
<pre><code class="language-shell"># Development (you can add `--host` after the command chain in package.json's dev script instead of typing it each time as shown below)
|
|
48
|
-
yarn dev --host
|
|
49
|
-
# Build
|
|
50
|
-
yarn build
|
|
51
|
-
</code></pre>
|
|
52
|
-
<h2 id="shortcut-imports">Shortcut Imports</h2>
|
|
53
|
-
<p>Shortcut imports work by default in JavaScript, but in TypeScript, they are activated by choice as they inject data into <em>tsconfig.json</em>. Here is the command:</p>
|
|
54
|
-
<pre><code class="language-shell">npx concorde enable-short-paths
|
|
55
|
-
</code></pre>
|
|
56
|
-
<p>Shortcut imports replace the actual paths with aliases as follows:</p>
|
|
57
|
-
<ul>
|
|
58
|
-
<li><code>@supersoniks/concorde/core/components/functional_or_ui/component/component</code> becomes <code>@supersoniks/concorde/functional_or_ui/component</code></li>
|
|
59
|
-
<li><code>@supersoniks/concorde/core/mixins_or_utils/class_name</code> becomes <code>@supersoniks/concorde/mixins_or_utils/class_name</code></li>
|
|
60
|
-
</ul>
|
|
61
|
-
<p>The original paths remain accessible. Shortcut imports are used for the examples later in this documentation.</p>
|
|
62
|
-
<h2 id="usage">Usage</h2>
|
|
63
|
-
<h3 id="simple-integration-in-html">Simple Integration in HTML</h3>
|
|
64
|
-
<p>Import needed component in <code>main.ts</code> or wherever you want to use it:</p>
|
|
65
|
-
<pre><code class="language-typescript">import "@supersoniks/concorde/ui/button";
|
|
66
|
-
</code></pre>
|
|
67
|
-
<p>Then in the render function ofyour component or in the HTML of the web page that includes the compiled JS, use the component as follows:</p>
|
|
68
|
-
<pre><code><sonic-button variant="outline">My button</sonic-button>
|
|
69
|
-
</code></pre>
|
|
70
|
-
<h3 id="using-a-mixin-to-create-a-new-lit-component">Using a Mixin to Create a New Lit Component</h3>
|
|
71
|
-
<p>For example, create a file <code>my-element.ts</code> at the root:</p>
|
|
72
|
-
<pre><code class="language-typescript">import { html, LitElement } from "lit";
|
|
73
|
-
import { customElement, property } from "lit/decorators.js";
|
|
74
|
-
import Fetcher from "@supersoniks/concorde/mixins/Fetcher";
|
|
75
|
-
import Subscriber from "@supersoniks/concorde/mixins/Subscriber";
|
|
76
|
-
|
|
77
|
-
@customElement("my-element")
|
|
78
|
-
export class SonicComponent extends Fetcher(Subscriber(LitElement)) {
|
|
79
|
-
@property() email = "";
|
|
80
|
-
@property() first_name = "";
|
|
81
|
-
@property() last_name = "";
|
|
82
|
-
|
|
83
|
-
render() {
|
|
84
|
-
return html`<div>
|
|
85
|
-
${this.first_name} ${this.last_name} : ${this.email}
|
|
86
|
-
</div>`;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
</code></pre>
|
|
90
|
-
<p>Import component <code>main.ts</code> or <code>main.js</code> or any other component that uses it to be compiled</p>
|
|
91
|
-
<pre><code class="language-typescript">import "./my-element";
|
|
92
|
-
</code></pre>
|
|
93
|
-
<p>In the HTML of a JS or TS component or in the HTML of the web page containing the compiled JS:</p>
|
|
94
|
-
<pre><code class="language-html"><my-element serviceURL="/docs-mock-api" dataProvider="api/users/2" key="data"></my-element>
|
|
95
|
-
</code></pre>
|
|
96
|
-
|
|
97
|
-
</article>
|
|
98
|
-
</main>
|
|
99
|
-
</body>
|
|
100
|
-
</html>
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html" data-doc-id="docs/_getting-started/concorde-outside">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Installation — Concorde</title>
|
|
7
|
-
<meta name="description" content="The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/concorde-outside, concorde-outside, Installation, guide, yarn ai:sync">
|
|
9
|
-
<meta name="concorde-doc-id" content="docs/_getting-started/concorde-outside">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/concorde-outside.md/concorde-outside" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — Installation</strong>. The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started. <span>Doc ID: <code>docs/_getting-started/concorde-outside</code>. Keywords: Concorde, supersoniks, docs/_getting-started/concorde-outside, concorde-outside, Installation, guide, yarn ai:sync. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html</a>.</span></p>
|
|
19
|
-
<h1 id="installation">Installation</h1>
|
|
20
|
-
<sonic-alert status="success" label="Recommended — use the starter" size="xl" background>
|
|
21
|
-
<p><strong>For almost all new projects, use <a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a>.</strong></p>
|
|
22
|
-
<p>You get Vite + TypeScript + Lit + Tailwind, an example component, <code>npx concorde enable-short-paths</code> ready to run, and <code>yarn ai:sync</code> for <a href="./ai-agents.html#ai-agents">AI agent skills</a> (<code>AGENTS.md</code>, Cursor / JetBrains rules) without extra setup.</p>
|
|
23
|
-
</sonic-alert>
|
|
24
|
-
|
|
25
|
-
<h2 id="starter">Starter</h2>
|
|
26
|
-
<p>The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.</p>
|
|
27
|
-
<pre><code class="language-shell">npx @supersoniks/create-concorde-ts-starter "project_name"
|
|
28
|
-
</code></pre>
|
|
29
|
-
<p>Then, from the project folder:</p>
|
|
30
|
-
<pre><code class="language-shell">yarn install
|
|
31
|
-
yarn dev --host
|
|
32
|
-
</code></pre>
|
|
33
|
-
<h2 id="next-steps">Next steps</h2>
|
|
34
|
-
<table>
|
|
35
|
-
<thead>
|
|
36
|
-
<tr>
|
|
37
|
-
<th>Step</th>
|
|
38
|
-
<th>Page</th>
|
|
39
|
-
</tr>
|
|
40
|
-
</thead>
|
|
41
|
-
<tbody><tr>
|
|
42
|
-
<td>Learn patterns</td>
|
|
43
|
-
<td><a href="./my-first-component.html#my-first-component">My first component</a></td>
|
|
44
|
-
</tr>
|
|
45
|
-
<tr>
|
|
46
|
-
<td>Agent skills</td>
|
|
47
|
-
<td><a href="./ai-agents.html#ai-agents">AI agents (skills)</a> — <code>yarn ai:sync</code> on the starter</td>
|
|
48
|
-
</tr>
|
|
49
|
-
<tr>
|
|
50
|
-
<td>Brownfield / manual Vite</td>
|
|
51
|
-
<td><a href="./concorde-manual-install.html#concorde-manual-install">Legacy: Manual installation</a></td>
|
|
52
|
-
</tr>
|
|
53
|
-
</tbody></table>
|
|
54
|
-
|
|
55
|
-
</article>
|
|
56
|
-
</main>
|
|
57
|
-
</body>
|
|
58
|
-
</html>
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html" data-doc-id="docs/_getting-started/my-first-subscriber">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Legacy: My first subscriber component — Concorde</title>
|
|
7
|
-
<meta name="description" content="> New projects: use My first component (@ancestorAttribute, @subscribe + DataProviderKey, .items on lists) and Data flow. This page documents the Subscriber mixin used by older apps and core component">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/my-first-subscriber, my-first-subscriber, Legacy: My first subscriber component, guide, @ancestorAttribute, @subscribe, DataProviderKey, .items, ${unsafeCSS(tailwindImport)}">
|
|
9
|
-
<meta name="concorde-doc-id" content="docs/_getting-started/my-first-subscriber">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/my-first-subscriber.md/my-first-subscriber" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — Legacy: My first subscriber component</strong>. > New projects: use My first component (@ancestorAttribute, @subscribe + DataProviderKey, .items on lists) and Data flow. This page documents the Subscriber mixin used by older apps and core component <span>Doc ID: <code>docs/_getting-started/my-first-subscriber</code>. Keywords: Concorde, supersoniks, docs/_getting-started/my-first-subscriber, my-first-subscriber, Legacy: My first subscriber component, guide, @ancestorAttribute, @subscribe, DataProviderKey, .items, ${unsafeCSS(tailwindImport)}. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html</a>.</span></p>
|
|
19
|
-
<h1 id="legacy-my-first-subscriber-component">Legacy: My first subscriber component</h1>
|
|
20
|
-
<blockquote>
|
|
21
|
-
<p><strong>New projects:</strong> use <a href="./my-first-component.html#my-first-component">My first component</a> (<code>@ancestorAttribute</code>, <code>@subscribe</code> + <code>DataProviderKey</code>, <code>.items</code> on lists) and <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>. This page documents the <strong>Subscriber mixin</strong> used by older apps and core components.</p>
|
|
22
|
-
</blockquote>
|
|
23
|
-
<p>Learn how to build a component with the <strong>Subscriber</strong> mixin, styled with Tailwind, filled from a DataProvider via automatic property mapping.</p>
|
|
24
|
-
<h2 id="create-a-classic-lit-component">Create a classic lit component</h2>
|
|
25
|
-
<pre><code class="language-javascript">import { html, LitElement, nothing } from "lit";
|
|
26
|
-
import { customElement, property } from "lit/decorators.js";
|
|
27
|
-
@customElement("docs-user")
|
|
28
|
-
export class user extends LitElement {
|
|
29
|
-
@property({ type: String }) first_name = "";
|
|
30
|
-
@property({ type: String }) last_name = "";
|
|
31
|
-
@property({ type: String }) avatar = "";
|
|
32
|
-
@property({ type: String }) email = "";
|
|
33
|
-
render() {
|
|
34
|
-
return html`
|
|
35
|
-
&lt;img src="${this.avatar}" /&gt; &lt;br&gt;
|
|
36
|
-
${this.first_name} ${this.last_name} &lt;br&gt;
|
|
37
|
-
${this.email}`;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
</code></pre>
|
|
41
|
-
<h3 id="style-with-tailwind-and-ui-components">Style with tailwind and ui components</h3>
|
|
42
|
-
<pre><code class="language-javascript">import { css, unsafeCSS } from "lit";
|
|
43
|
-
import tailwindImport from "./css/tailwind.css?inline";
|
|
44
|
-
export const tailwind = css`${unsafeCSS(tailwindImport)}`;
|
|
45
|
-
</code></pre>
|
|
46
|
-
<pre><code class="language-javascript">import { html, LitElement } from "lit";
|
|
47
|
-
import { customElement, property } from "lit/decorators.js";
|
|
48
|
-
import { tailwind } from "../tailwind";
|
|
49
|
-
import '@supersoniks/concode/ui/image'
|
|
50
|
-
import '@supersoniks/concode/ui/button'
|
|
51
|
-
import '@supersoniks/concode/ui/icon'
|
|
52
|
-
@customElement("docs-user")
|
|
53
|
-
export class user extends LitElement {
|
|
54
|
-
static styles = [tailwind];
|
|
55
|
-
@property({ type: String }) first_name = "";
|
|
56
|
-
@property({ type: String }) last_name = "";
|
|
57
|
-
@property({ type: String }) avatar = "";
|
|
58
|
-
@property({ type: String }) email = "";
|
|
59
|
-
render() {
|
|
60
|
-
return html`&lt;div class="flex items-center gap-3 p-2"&gt;
|
|
61
|
-
&lt;sonic-image src=${this.avatar} rounded="md" ratio="1/1" class="w-16"&gt;&lt;/sonic-image&gt;
|
|
62
|
-
&lt;div&gt;${this.first_name} &lt;span class="font-bold"&gt;${this.last_name}&lt;/span&gt;&lt;/div&gt;
|
|
63
|
-
&lt;div class="text-sm text-neutral-400"&gt;${this.email}&lt;/div&gt;
|
|
64
|
-
&lt;/div&gt;`;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
</code></pre>
|
|
68
|
-
<h2 id="add-subscriber-mixin">Add Subscriber mixin</h2>
|
|
69
|
-
<pre><code class="language-javascript">import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
|
|
70
|
-
@customElement("docs-user")
|
|
71
|
-
export class user extends Subscriber(LitElement) {
|
|
72
|
-
// properties auto-filled from DataProvider when names match
|
|
73
|
-
}
|
|
74
|
-
</code></pre>
|
|
75
|
-
<p>See <a href="../_core-concept/subscriber.html#subscriber">Legacy: Subscriber mixin</a>.</p>
|
|
76
|
-
<h2 id="autofill-from-a-dataprovider">Autofill from a dataProvider</h2>
|
|
77
|
-
<pre><code><docs-demo-sources for="list-users-fetch"></docs-demo-sources>
|
|
78
|
-
<div serviceURL="/docs-mock-api">
|
|
79
|
-
<sonic-fetch
|
|
80
|
-
serviceURL="/docs-mock-api"
|
|
81
|
-
dataProvider="api/users/3"
|
|
82
|
-
key="data">
|
|
83
|
-
<docs-user></docs-user>
|
|
84
|
-
</sonic-fetch>
|
|
85
|
-
</div>
|
|
86
|
-
</code></pre>
|
|
87
|
-
<pre><code><sonic-fetch
|
|
88
|
-
serviceURL="/docs-mock-api"
|
|
89
|
-
dataProvider="api/users/2"
|
|
90
|
-
key="data"></sonic-fetch>
|
|
91
|
-
<docs-user dataProvider="api/users/2" ></docs-user>
|
|
92
|
-
</code></pre>
|
|
93
|
-
<pre><code><div class="grid grid-cols-1 gap-4">
|
|
94
|
-
<form formDataProvider="userPreview" class="grid grid-cols-4 gap-3" >
|
|
95
|
-
<sonic-input label="First name" type="text" name="first_name" value="Paul" size="sm"></sonic-input>
|
|
96
|
-
<sonic-input label="Last name" type="text" name="last_name" value="Metrand" size="sm"></sonic-input>
|
|
97
|
-
<sonic-input class="col-span-2" label="email" type="text" name="email" value="paul@example.com" size="sm"></sonic-input>
|
|
98
|
-
<sonic-input label="Image url" type="text" name="avatar" value="https://i.pravatar.cc/150?u=paul" size="sm"></sonic-input>
|
|
99
|
-
</form>
|
|
100
|
-
<sonic-divider align="left">Preview before submit</sonic-divider>
|
|
101
|
-
<div dataProvider="userPreview">
|
|
102
|
-
<docs-user></docs-user>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
</code></pre>
|
|
106
|
-
|
|
107
|
-
</article>
|
|
108
|
-
</main>
|
|
109
|
-
</body>
|
|
110
|
-
</html>
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html" data-doc-id="docs/_getting-started/pubsub">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Legacy: Sharing data — Concorde</title>
|
|
7
|
-
<meta name="description" content="> New apps: Data flow (get / set / DataProviderKey, decorators). This page documents the historical Publisher proxy API (PublisherManager, publisher.set, onAssign, …).">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/pubsub, pubsub, Legacy: Sharing data, guide, get, set, DataProviderKey, PublisherManager, publisher.set, onAssign, {foo:{hello:["world"]}, bar:"baz"}, myPublisher.foo.hello, null">
|
|
9
|
-
<meta name="concorde-doc-id" content="docs/_getting-started/pubsub">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/pubsub.md/pubsub" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — Legacy: Sharing data</strong>. > New apps: Data flow (get / set / DataProviderKey, decorators). This page documents the historical Publisher proxy API (PublisherManager, publisher.set, onAssign, …). <span>Doc ID: <code>docs/_getting-started/pubsub</code>. Keywords: Concorde, supersoniks, docs/_getting-started/pubsub, pubsub, Legacy: Sharing data, guide, get, set, DataProviderKey, PublisherManager, publisher.set, onAssign, {foo:{hello:["world"]}, bar:"baz"}, myPublisher.foo.hello, null. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html</a>.</span></p>
|
|
19
|
-
<h1 id="legacy-sharing-data">Legacy: Sharing data</h1>
|
|
20
|
-
<blockquote>
|
|
21
|
-
<p><strong>New apps:</strong> <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a> (<code>get</code> / <code>set</code> / <code>DataProviderKey</code>, decorators). This page documents the historical <strong>Publisher</strong> proxy API (<code>PublisherManager</code>, <code>publisher.set</code>, <code>onAssign</code>, …).</p>
|
|
22
|
-
</blockquote>
|
|
23
|
-
<p>This section describes how data is shared between graphical and non-graphical components.</p>
|
|
24
|
-
<p>Graphical components should not reference each other directly — they stay decoupled via a <strong>publish/subscribe</strong> store.</p>
|
|
25
|
-
<h2 id="the-publisher">The Publisher</h2>
|
|
26
|
-
<h3 id="principle">Principle</h3>
|
|
27
|
-
<ul>
|
|
28
|
-
<li><p>The <strong>publisher</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">JavaScript proxy</a> that holds data.<br>
|
|
29
|
-
Example: <code>{foo:{hello:["world"]}, bar:"baz"}</code></p>
|
|
30
|
-
</li>
|
|
31
|
-
<li><p>Accessing a property (<code>myPublisher.foo.hello</code>) returns another <strong>publisher</strong> for that segment.</p>
|
|
32
|
-
</li>
|
|
33
|
-
<li><p>Missing properties create a publisher with internal data <code>null</code>, filled later.</p>
|
|
34
|
-
</li>
|
|
35
|
-
<li><p><strong>Subscribers</strong> listen via <code>onAssign</code>, <code>onInternalMutation</code>, template filling on the <strong>Subscriber mixin</strong>, etc.</p>
|
|
36
|
-
</li>
|
|
37
|
-
<li><p>Updates use <code>publisher.set(...)</code> or nested assignment; changes propagate to subscribers.</p>
|
|
38
|
-
</li>
|
|
39
|
-
</ul>
|
|
40
|
-
<p>❇️ Order of creation vs subscription theoretically does not matter.</p>
|
|
41
|
-
<h3 id="methods">Methods</h3>
|
|
42
|
-
<ul>
|
|
43
|
-
<li><strong>set</strong> — replace internal value</li>
|
|
44
|
-
</ul>
|
|
45
|
-
<pre><code class="language-javascript">publisher.set({foo:{hello:["world"]}, bar:"baz"});
|
|
46
|
-
</code></pre>
|
|
47
|
-
<ul>
|
|
48
|
-
<li><strong>get</strong> — read internal value</li>
|
|
49
|
-
</ul>
|
|
50
|
-
<pre><code class="language-javascript">publisher.get()
|
|
51
|
-
</code></pre>
|
|
52
|
-
<ul>
|
|
53
|
-
<li><strong>onAssign / offAssign</strong> — react to <code>set</code></li>
|
|
54
|
-
</ul>
|
|
55
|
-
<pre><code class="language-javascript">publisher.a.b.onAssign(console.log);
|
|
56
|
-
</code></pre>
|
|
57
|
-
<p>Modern equivalent: <code>get</code> / <code>set</code> / <code>@handle</code> — see <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>.</p>
|
|
58
|
-
|
|
59
|
-
</article>
|
|
60
|
-
</main>
|
|
61
|
-
</body>
|
|
62
|
-
</html>
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html" data-doc-id="docs/_getting-started/start">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Introduction — Concorde</title>
|
|
7
|
-
<meta name="description" content="Based on lit.dev, Concorde is a collection of web components for shared apps and websites.">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/start, start, Introduction, guide, get, set, formDataProvider, @ancestorAttribute, @bind, serviceURL, yarn ai:sync, AGENTS.md">
|
|
9
|
-
<meta name="concorde-doc-id" content="docs/_getting-started/start">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/start.md/start" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — Introduction</strong>. Based on lit.dev, Concorde is a collection of web components for shared apps and websites. <span>Doc ID: <code>docs/_getting-started/start</code>. Keywords: Concorde, supersoniks, docs/_getting-started/start, start, Introduction, guide, get, set, formDataProvider, @ancestorAttribute, @bind, serviceURL, yarn ai:sync, AGENTS.md. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html</a>.</span></p>
|
|
19
|
-
<h1 id="introduction">Introduction</h1>
|
|
20
|
-
<h2 id="what-is-concorde">What is Concorde?</h2>
|
|
21
|
-
<p>Based on <strong><a href="https://lit.dev">lit.dev</a></strong>, Concorde is a collection of web components for shared apps and websites.<br>Build UIs without tying components to a specific host stack, while keeping visual consistency through a small set of CSS variables.</p>
|
|
22
|
-
<h2 id="why-and-use-case">Why and use case</h2>
|
|
23
|
-
<p>In 2022, Supersoniks needed a new ticketing stack for nearly 100 sites — mobile apps, modern sites, and legacy PHP without bundlers.<br>One composable web-component library replaced many one-off apps. Lit was chosen for broad runtime compatibility.</p>
|
|
24
|
-
<h3 id="stack">Stack</h3>
|
|
25
|
-
<ul>
|
|
26
|
-
<li>Lit</li>
|
|
27
|
-
<li>TypeScript</li>
|
|
28
|
-
<li>Vite</li>
|
|
29
|
-
<li>Tailwind (starter kit, not required in the core package)</li>
|
|
30
|
-
</ul>
|
|
31
|
-
<h3 id="functional-features">Functional features</h3>
|
|
32
|
-
<ul>
|
|
33
|
-
<li><strong>DataProvider</strong> store (decorators, <code>get</code> / <code>set</code>)</li>
|
|
34
|
-
<li>Forms (<code>formDataProvider</code>)</li>
|
|
35
|
-
<li>Lists, queues, lazy loading</li>
|
|
36
|
-
<li>Router, states, UI kit with status variants</li>
|
|
37
|
-
</ul>
|
|
38
|
-
<h2 id="learn-concorde">Learn Concorde</h2>
|
|
39
|
-
<table>
|
|
40
|
-
<thead>
|
|
41
|
-
<tr>
|
|
42
|
-
<th>Step</th>
|
|
43
|
-
<th>Page</th>
|
|
44
|
-
</tr>
|
|
45
|
-
</thead>
|
|
46
|
-
<tbody><tr>
|
|
47
|
-
<td>1</td>
|
|
48
|
-
<td><a href="./my-first-component.html#my-first-component">My first component</a> — Lit card, <code>@ancestorAttribute</code>, <code>@bind</code>, mock API</td>
|
|
49
|
-
</tr>
|
|
50
|
-
<tr>
|
|
51
|
-
<td>2</td>
|
|
52
|
-
<td><a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a> — Core concepts: decorators and APIs</td>
|
|
53
|
-
</tr>
|
|
54
|
-
<tr>
|
|
55
|
-
<td>3</td>
|
|
56
|
-
<td><a href="../_misc/docs-mock-api.html#docs-mock-api">Local API demos</a> — offline <code>serviceURL</code> for this site (Misc)</td>
|
|
57
|
-
</tr>
|
|
58
|
-
<tr>
|
|
59
|
-
<td>4</td>
|
|
60
|
-
<td><a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a> — <strong>recommended</strong> project kit (Vite, Tailwind, <code>yarn ai:sync</code>)</td>
|
|
61
|
-
</tr>
|
|
62
|
-
<tr>
|
|
63
|
-
<td>5</td>
|
|
64
|
-
<td><a href="./ai-agents.html#ai-agents">AI agents (skills)</a> — <code>AGENTS.md</code>, Cursor / JetBrains rules</td>
|
|
65
|
-
</tr>
|
|
66
|
-
</tbody></table>
|
|
67
|
-
<p>Legacy (Subscriber mixin, Publisher API): <strong>Legacy</strong> section at the bottom of the sidebar.</p>
|
|
68
|
-
<h2 id="start-a-new-project">Start a new project</h2>
|
|
69
|
-
<pre><code class="language-bash">npx @supersoniks/create-concorde-ts-starter "project_name"
|
|
70
|
-
</code></pre>
|
|
71
|
-
<p>The starter runs <strong><code>yarn ai:sync</code></strong> for you. Details: <a href="./ai-agents.html#ai-agents">AI agents (skills)</a>. Manual Vite setup: <a href="./concorde-manual-install.html#concorde-manual-install">Legacy: Manual installation</a>.</p>
|
|
72
|
-
|
|
73
|
-
</article>
|
|
74
|
-
</main>
|
|
75
|
-
</body>
|
|
76
|
-
</html>
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html" data-doc-id="docs/_getting-started/theming">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Adding styles — Concorde</title>
|
|
7
|
-
<meta name="description" content="No style crosses the shadow root of a component, except for inheritable properties (which have the "inherit" property possible) and CSS variables.">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/theming, theming, Adding styles, guide, , size, {reflect: true}, :host(), :host([type='primary']){...}, inline, block, display, contents">
|
|
9
|
-
<meta name="concorde-doc-id" content="docs/_getting-started/theming">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/theming.md/theming" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — Adding styles</strong>. No style crosses the shadow root of a component, except for inheritable properties (which have the "inherit" property possible) and CSS variables. <span>Doc ID: <code>docs/_getting-started/theming</code>. Keywords: Concorde, supersoniks, docs/_getting-started/theming, theming, Adding styles, guide, , size, {reflect: true}, :host(), :host([type='primary']){...}, inline, block, display, contents. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html</a>.</span></p>
|
|
19
|
-
<h1 id="adding-styles">Adding styles</h1>
|
|
20
|
-
<h2 id="normal-behavior">Normal Behavior</h2>
|
|
21
|
-
<p>No style crosses the shadow root of a component, except for inheritable properties (which have the "inherit" property possible) and CSS variables.
|
|
22
|
-
Properties integrated via a "<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/slot">slot</a>" remain stylizable in a conventional way.</p>
|
|
23
|
-
<ul>
|
|
24
|
-
<li><strong>During creation / from the inside:</strong><ul>
|
|
25
|
-
<li>We edit the <a href="https://lit.dev/docs/components/styles/">static "styles" property of the lit component</a>, which can also reference shared and dynamic styles.
|
|
26
|
-
These styles are scoped and do not impact the outside.</li>
|
|
27
|
-
<li>We use CSS variables as the value of properties intended to be customized from the outside.
|
|
28
|
-
For each variable, we define a default value to have a simple but consistent base style.</li>
|
|
29
|
-
<li>We only rewrite inheritable properties with hard values if they are truly specific to the component.</li>
|
|
30
|
-
<li>The <code><style></code> tag as a direct child can be used as a last resort, especially if there is a need for particularly dynamic customization. Performance is reduced.</li>
|
|
31
|
-
</ul>
|
|
32
|
-
</li>
|
|
33
|
-
<li><strong>During use / from the outside:</strong>
|
|
34
|
-
We define values for <strong>inheritable CSS properties</strong> (e.g., font-_, color...) using tools like Tailwind.
|
|
35
|
-
We modify the value of <strong>CSS variables</strong> used by the component.</li>
|
|
36
|
-
</ul>
|
|
37
|
-
<h2 id="choosing-style-presets-via-reactive-properties">Choosing Style Presets via Reactive Properties:</h2>
|
|
38
|
-
<p>The declaration of reactive properties is useful for selecting a particular configuration that mostly affects a set of properties.</p>
|
|
39
|
-
<p>For example, a <code>size</code> property (xs, sm, md, xl) will affect margins, font, line heights to align them with the corresponding CSS vars, which can be customized using the methods mentioned earlier if necessary.</p>
|
|
40
|
-
<p>It is recommended to use the <code>{reflect: true}</code> property for reactive properties that have an associated style on the <code>:host()</code>. For example: <code>:host([type='primary']){...}</code></p>
|
|
41
|
-
<p>☢️ <strong>Caution:</strong> Passing class names via reactive properties / HTML attributes of the component should be avoided as it can quickly lead to difficult-to-manage situations.</p>
|
|
42
|
-
<h4 id="css-display-property">CSS "display" Property</h4>
|
|
43
|
-
<p>By default, the display property is <code>inline</code>.
|
|
44
|
-
Therefore, be careful to define it according to the needs, as one might mistakenly expect it to be <code>block</code> as with a regular <code><div></code>.</p>
|
|
45
|
-
<p>☢️ <strong>Caution:</strong> Defining the <code>display</code> property as <code>contents</code> may seem attractive at first, but:</p>
|
|
46
|
-
<ul>
|
|
47
|
-
<li>It almost always leads to the creation of wrappers to style the content (instead of using <code>:host</code>).</li>
|
|
48
|
-
<li>It is no longer possible to directly add classes to the component or style it from the outside.
|
|
49
|
-
Ultimately, the amount of code to write increases significantly.</li>
|
|
50
|
-
</ul>
|
|
51
|
-
<h2 id="tailwind-functional-classes">TAILWIND Functional Classes</h2>
|
|
52
|
-
<p><a href="https://tailwindcss.com/">tailwind</a> has been integrated into Concorde and is available in scoped components (with Shadow DOM).
|
|
53
|
-
To use it, you need to import the following:</p>
|
|
54
|
-
<pre><code class="language-javascript">import { tailwind } from "@supersoniks/concorde/la-billetterie/ui/theme/theme";
|
|
55
|
-
</code></pre>
|
|
56
|
-
<p>Then include the <code>tailwind</code> style in the static <code>styles</code> property of the component:</p>
|
|
57
|
-
<pre><code class="language-javascript">static styles = [tailwind];
|
|
58
|
-
</code></pre>
|
|
59
|
-
<p>Finally, use it in the HTML within the render function:</p>
|
|
60
|
-
<pre><code class="language-html"><p class="m-2">A paragraph with margin</p>
|
|
61
|
-
</code></pre>
|
|
62
|
-
<p>The colors from Concorde's theme are referenced in Tailwind's theme.</p>
|
|
63
|
-
<h2 id="operation-without-shadow-dom">Operation without Shadow DOM</h2>
|
|
64
|
-
<h3 id="usefulness">Usefulness</h3>
|
|
65
|
-
<p>This operation is particularly useful when it comes to <strong>adding behavior to a simple existing element</strong>.
|
|
66
|
-
It may also become necessary to establish <strong>compatibility with a traditional JS library</strong>.</p>
|
|
67
|
-
<p>For example, with a text input:</p>
|
|
68
|
-
<ul>
|
|
69
|
-
<li>Trigger automatic data or filter update when typing text.</li>
|
|
70
|
-
<li>Automatic formatting.</li>
|
|
71
|
-
<li>Constraints that cannot be handled by native methods.</li>
|
|
72
|
-
</ul>
|
|
73
|
-
<h3 id="consequences">Consequences</h3>
|
|
74
|
-
<p>If there is no shadow DOM (see the <strong>noShadowDom</strong> property of <strong>Subscriber</strong>):</p>
|
|
75
|
-
<ul>
|
|
76
|
-
<li>Styling using the static "styles" property of the lit component will not be applied.</li>
|
|
77
|
-
<li>The element and its content can be styled in a traditional manner.</li>
|
|
78
|
-
</ul>
|
|
79
|
-
<p>For example, the components <code>queue</code>, <code>list</code>, and <code>fetch</code> do not have a shadow DOM.</p>
|
|
80
|
-
<p>ℹ️ <strong>Note:</strong> Specifically in this case, it may be useful to set the <code>display</code> property to <code>contents</code>.</p>
|
|
81
|
-
|
|
82
|
-
</article>
|
|
83
|
-
</main>
|
|
84
|
-
</body>
|
|
85
|
-
</html>
|