mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Deploy to GitHub pages
This commit is contained in:
Wolfgang Huß
GitHub
commit
b6ed3bda18
41
CHANGELOG.html
Normal file
41
CHANGELOG.html
Normal file
File diff suppressed because one or more lines are too long
41
CODE_OF_CONDUCT.html
Normal file
41
CODE_OF_CONDUCT.html
Normal file
File diff suppressed because one or more lines are too long
47
CONTRIBUTING.html
Normal file
47
CONTRIBUTING.html
Normal file
File diff suppressed because one or more lines are too long
41
LICENSE.html
Normal file
41
LICENSE.html
Normal file
File diff suppressed because one or more lines are too long
41
SUMMARY.html
Normal file
41
SUMMARY.html
Normal file
File diff suppressed because one or more lines are too long
1
assets/404.html-Dj-szF7z.js
Normal file
1
assets/404.html-Dj-szF7z.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,b as n,o as r}from"./app-BnOEODOX.js";const a={};function l(s,t){return r(),o("div",null,t[0]||(t[0]=[n("p",null,"404 Not Found",-1)]))}const m=e(a,[["render",l],["__file","404.html.vue"]]),p=JSON.parse('{"path":"/404.html","title":"","lang":"en-US","frontmatter":{"layout":"NotFound"},"headers":[],"git":{},"readingTime":{"minutes":0.01,"words":3},"filePathRelative":null,"excerpt":"<p>404 Not Found</p>\\n"}');export{m as comp,p as data};
|
||||
1
assets/CHANGELOG.html-BP-LmV-Y.js
Normal file
1
assets/CHANGELOG.html-BP-LmV-Y.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/CODE_OF_CONDUCT.html-kV5kWQ5V.js
Normal file
1
assets/CODE_OF_CONDUCT.html-kV5kWQ5V.js
Normal file
File diff suppressed because one or more lines are too long
7
assets/CONTRIBUTING.html-DnQSeSwq.js
Normal file
7
assets/CONTRIBUTING.html-DnQSeSwq.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/DataDisplay.html-pB2RxZnl.js
Normal file
1
assets/DataDisplay.html-pB2RxZnl.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,b as s,o}from"./app-BnOEODOX.js";const r={};function n(i,e){return o(),t("div",null,e[0]||(e[0]=[s("p",null,"Data Display components are used to present data in an approachable way.",-1)]))}const c=a(r,[["render",n],["__file","DataDisplay.html.vue"]]),d=JSON.parse('{"path":"/styleguide/src/styleguide/docs/DataDisplay.html","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.04,"words":12},"filePathRelative":"styleguide/src/styleguide/docs/DataDisplay.md","localizedDate":"December 10, 2025","excerpt":"<p>Data Display components are used to present data in an approachable way.</p>\\n"}');export{c as comp,d as data};
|
||||
1
assets/DesignTokens.html-BEvC9in_.js
Normal file
1
assets/DesignTokens.html-BEvC9in_.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a,e as n,o,r}from"./app-BnOEODOX.js";const l={};function d(c,e){const s=r("design-tokens");return o(),i("div",null,[e[0]||(e[0]=a('<p>Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.</p><p>You can use tokens as SCSS variables or import them in your JS:</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>import { tokens } from 'system'</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>',3)),n(s)])}const u=t(l,[["render",d],["__file","DesignTokens.html.vue"]]),h=JSON.parse('{"path":"/styleguide/src/styleguide/docs/DesignTokens.html","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.25,"words":74},"filePathRelative":"styleguide/src/styleguide/docs/DesignTokens.md","localizedDate":"December 10, 2025","excerpt":"<p>Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.</p>"}');export{u as comp,h as data};
|
||||
50
assets/GraphQL-Playground.html-CrvxUh5s.js
Normal file
50
assets/GraphQL-Playground.html-CrvxUh5s.js
Normal file
@ -0,0 +1,50 @@
|
||||
import{_ as h}from"./graphql-playground (1)-C_SWrH2M.js";import{_ as p}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as r,a as e,b as a,d as i,e as t,f as l,r as d,o as k}from"./app-BnOEODOX.js";const o={};function g(u,s){const n=d("RouteLink");return k(),r("div",null,[s[8]||(s[8]=e('<h1 id="graphql-playground" tabindex="-1"><a class="header-anchor" href="#graphql-playground"><span>GraphQL Playground</span></a></h1><figure><img src="'+h+'" alt="GraphQL Playground" tabindex="0" loading="lazy"><figcaption>GraphQL Playground</figcaption></figure><p><em><strong>Attention:</strong> For using the GraphQL Playground set <code>DEBUG=true</code> in your backend <code>.env</code>, see <code>.env.template</code>!</em></p><p>To use GraphQL Playground, we need to know some basics:</p><h2 id="how-to-login" tabindex="-1"><a class="header-anchor" href="#how-to-login"><span>How To Login?</span></a></h2><p>First, we need to have a user from ocelot.social to log in as. The user can be created by seeding the Neo4j database from the backend or by multiple GraphQL mutations.</p><h3 id="seed-the-neo4j-database" tabindex="-1"><a class="header-anchor" href="#seed-the-neo4j-database"><span>Seed The Neo4j Database</span></a></h3>',7)),a("p",null,[s[1]||(s[1]=i("In your browser you can reach the GraphQL Playground under ")),s[2]||(s[2]=a("code",null,"http://localhost:4000/",-1)),s[3]||(s[3]=i(", if the database and the backend are running, see ")),t(n,{to:"/backend/"},{default:l(()=>s[0]||(s[0]=[i("backend")])),_:1}),s[4]||(s[4]=i(". There you will also find instructions on how to seed the database."))]),s[9]||(s[9]=e(`<h3 id="use-graphql-mutations-to-create-a-user" tabindex="-1"><a class="header-anchor" href="#use-graphql-mutations-to-create-a-user"><span>Use GraphQL Mutations To Create A User</span></a></h3><p>TODO: Describe how to create a user using GraphQL mutations!</p><h3 id="login-via-graphql" tabindex="-1"><a class="header-anchor" href="#login-via-graphql"><span>Login Via GraphQL</span></a></h3><p>You can register a user by sending the query:</p><div class="language-gql line-numbers-mode" data-highlighter="shiki" data-ext="gql" data-title="gql" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">mutation</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> login</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;">email</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"user@example.org"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;">password</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"1234"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Or use <code>"moderator@example.org"</code> or <code>"admin@example.org"</code> for the roll you need.</p><p>If all goes well, you will receive a QGL response like:</p><div class="language-json line-numbers-mode" data-highlighter="shiki" data-ext="json" data-title="json" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">{</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "data"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "login"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InUzIiwibmFtZSI6Ikplbm55IFJvc3RvY2siLCJzbHVnIjoiamVubnktcm9zdG9jayIsImlhdCI6MTY2MjAyMzMwNSwiZXhwIjoxNzI1MTM4NTA1LCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwMDAiLCJzdWIiOiJ1MyJ9.atBS-SOeS784HPeFl_5s8sRWehEAU1BkgcOZFD8d4bU"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can use this response to set an HTTP header when you click <code>HTTP HEADERS</code> in the footer. Just set it with the login token you received in response:</p><div class="language-json line-numbers-mode" data-highlighter="shiki" data-ext="json" data-title="json" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">{</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "Authorization"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InUzIiwibmFtZSI6Ikplbm55IFJvc3RvY2siLCJzbHVnIjoiamVubnktcm9zdG9jayIsImlhdCI6MTY2MjAyMzMwNSwiZXhwIjoxNzI1MTM4NTA1LCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwMDAiLCJzdWIiOiJ1MyJ9.atBS-SOeS784HPeFl_5s8sRWehEAU1BkgcOZFD8d4bU"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>This token is used for all other queries and mutations you send to the backend.</p><h2 id="query-and-mutate" tabindex="-1"><a class="header-anchor" href="#query-and-mutate"><span>Query And Mutate</span></a></h2><p>When you are logged in and open a new playground tab by clicking "+", you can create a new group by sending the following mutation:</p><div class="language-gql line-numbers-mode" data-highlighter="shiki" data-ext="gql" data-title="gql" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">mutation</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> CreateGroup</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span></span>
|
||||
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> # id: ""</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"My Group"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> # slug: ""</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> about</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"We will save the world"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> description</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"<p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\"\\"</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">><em>English:</em></p><p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\"\\"</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">>This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\"\\"</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">>Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\"\\"</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">>Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\"\\"</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">>Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> groupType</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> hidden</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> actionRadius</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> interplanetary</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> categoryIds</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: [</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">"cat12"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">]</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> ) {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> id</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> name</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> slug</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> createdAt</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> updatedAt</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> disabled</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> deleted</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> about</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> description</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> groupType</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> actionRadius</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> myRole</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You will receive the answer:</p><div class="language-json line-numbers-mode" data-highlighter="shiki" data-ext="json" data-title="json" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">{</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "data"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "CreateGroup"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "id"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"2e3bbadb-804b-4ebc-a673-2d7c7f05e827"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "name"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"My Group"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "slug"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"my-group"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "createdAt"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"2022-09-01T09:44:47.969Z"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "updatedAt"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"2022-09-01T09:44:47.969Z"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "disabled"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0184BC;--shiki-dark:#D19A66;">false</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "deleted"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0184BC;--shiki-dark:#D19A66;">false</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "about"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"We will save the world"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "description"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"<p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\"\\"</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">><em>English:</em></p><p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\"\\"</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">>This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\"\\"</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">>Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\"\\"</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">>Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\"\\"</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">>Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "groupType"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"hidden"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "actionRadius"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"interplanetary"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> "myRole"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"owner"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,16)),a("p",null,[s[6]||(s[6]=i("If you look into the Neo4j database with your browser and search the groups, you will now also find your new group. For more details about our Neo4j database read ")),t(n,{to:"/neo4j/"},{default:l(()=>s[5]||(s[5]=[i("here")])),_:1}),s[7]||(s[7]=i("."))])])}const B=p(o,[["render",g],["__file","GraphQL-Playground.html.vue"]]),b=JSON.parse('{"path":"/backend/src/graphql/GraphQL-Playground.html","title":"GraphQL Playground","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"How To Login?","slug":"how-to-login","link":"#how-to-login","children":[{"level":3,"title":"Seed The Neo4j Database","slug":"seed-the-neo4j-database","link":"#seed-the-neo4j-database","children":[]},{"level":3,"title":"Use GraphQL Mutations To Create A User","slug":"use-graphql-mutations-to-create-a-user","link":"#use-graphql-mutations-to-create-a-user","children":[]},{"level":3,"title":"Login Via GraphQL","slug":"login-via-graphql","link":"#login-via-graphql","children":[]}]},{"level":2,"title":"Query And Mutate","slug":"query-and-mutate","link":"#query-and-mutate","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.94,"words":581},"filePathRelative":"backend/src/graphql/GraphQL-Playground.md","localizedDate":"December 10, 2025","excerpt":"\\n<figure><figcaption>GraphQL Playground</figcaption></figure>\\n<p><em><strong>Attention:</strong> For using the GraphQL Playground set <code>DEBUG=true</code> in your backend <code>.env</code>, see <code>.env.template</code>!</em></p>\\n<p>To use GraphQL Playground, we need to know some basics:</p>\\n<h2>How To Login?</h2>"}');export{B as comp,b as data};
|
||||
1
assets/Introduction.html-BIEKy8L1.js
Normal file
1
assets/Introduction.html-BIEKy8L1.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a as o,o as i}from"./app-BnOEODOX.js";const a={};function s(r,e){return i(),t("div",null,e[0]||(e[0]=[o('<h2 id="human-connection-styleguide" tabindex="-1"><a class="header-anchor" href="#human-connection-styleguide"><span>Human Connection - Styleguide</span></a></h2><p>This Design System provides our team with essential components and guidelines to achieve a consistent user experience accross our applications.</p><h3 id="documentation" tabindex="-1"><a class="header-anchor" href="#documentation"><span>Documentation</span></a></h3><p>If you are searching for more technical information for the UI & API, you can find it in the <a href="https://docs.human-connection.org/nitro" target="_blank" rel="noopener noreferrer">HC Documentation</a>.</p><h3 id="how-to-use-it" tabindex="-1"><a class="header-anchor" href="#how-to-use-it"><span>How to use it</span></a></h3><p>Use the system's components to solve common UI problems like layout, typography, displaying data or data input.</p><p>When no component fits your case, either extend an existing one or create a new one.</p><h3 id="extending-existing-components" tabindex="-1"><a class="header-anchor" href="#extending-existing-components"><span>Extending existing components</span></a></h3><p>When extending components, make sure not to break existing features. If you really need to, it might be better to create a new one and mark the existing component as <code>deprecated</code></p><h3 id="creating-new-components" tabindex="-1"><a class="header-anchor" href="#creating-new-components"><span>Creating new components</span></a></h3><p>Keep a few things in mind when creating a new component:</p><ul><li>Keep it simple</li><li>Keep it extendable</li><li>Use Design Tokens wherever needed</li><li>Document it</li></ul><h3 id="resources" tabindex="-1"><a class="header-anchor" href="#resources"><span>Resources</span></a></h3><p>If you would like to become a component superhero feel free to dive into the <a href="https://pablohpsilva.github.io/vuejs-component-style-guide/#/" target="_blank" rel="noopener noreferrer">Vuejs Component Style Guide</a>.</p>',14)]))}const d=n(a,[["render",s],["__file","Introduction.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/styleguide/docs/Introduction.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Human Connection - Styleguide","slug":"human-connection-styleguide","link":"#human-connection-styleguide","children":[{"level":3,"title":"Documentation","slug":"documentation","link":"#documentation","children":[]},{"level":3,"title":"How to use it","slug":"how-to-use-it","link":"#how-to-use-it","children":[]},{"level":3,"title":"Extending existing components","slug":"extending-existing-components","link":"#extending-existing-components","children":[]},{"level":3,"title":"Creating new components","slug":"creating-new-components","link":"#creating-new-components","children":[]},{"level":3,"title":"Resources","slug":"resources","link":"#resources","children":[]}]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.58,"words":174},"filePathRelative":"styleguide/src/styleguide/docs/Introduction.md","localizedDate":"December 10, 2025","excerpt":"<h2>Human Connection - Styleguide</h2>\\n<p>This Design System provides our team with essential components and guidelines to achieve a consistent user experience accross our applications.</p>\\n<h3>Documentation</h3>\\n<p>If you are searching for more technical information for the UI & API, you can find it in the <a href=\\"https://docs.human-connection.org/nitro\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">HC Documentation</a>.</p>"}');export{d as comp,p as data};
|
||||
1
assets/LICENSE.html-B6oI5YvV.js
Normal file
1
assets/LICENSE.html-B6oI5YvV.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as o}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,b as e,d as n,o as r}from"./app-BnOEODOX.js";const a={};function s(l,t){return r(),i("div",null,t[0]||(t[0]=[e("h1",{id:"license",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#license"},[e("span",null,"LICENSE")])],-1),e("p",null,"MIT License",-1),e("p",null,[n("Copyright (c) 2018-2021 "),e("a",{href:"https://github.com/Ocelot-Social-Community",target:"_blank",rel:"noopener noreferrer"},"Ocelot.Social Community")],-1),e("p",null,'Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:',-1),e("p",null,"The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.",-1),e("p",null,'THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.',-1)]))}const d=o(a,[["render",s],["__file","LICENSE.html.vue"]]),p=JSON.parse('{"path":"/LICENSE.html","title":"LICENSE","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.58,"words":175},"filePathRelative":"LICENSE.md","localizedDate":"December 10, 2025","excerpt":"\\n<p>MIT License</p>\\n<p>Copyright (c) 2018-2021 <a href=\\"https://github.com/Ocelot-Social-Community\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Ocelot.Social Community</a></p>\\n<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \\"Software\\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>"}');export{d as comp,p as data};
|
||||
1
assets/Layout.html-CKKP9Zx_.js
Normal file
1
assets/Layout.html-CKKP9Zx_.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,b as n,o as s}from"./app-BnOEODOX.js";const r={};function a(c,e){return s(),o("div",null,e[0]||(e[0]=[n("p",null,"Layout components are used to group related content together. The also provide consistent spacing for blocks of content.",-1)]))}const l=t(r,[["render",a],["__file","Layout.html.vue"]]),m=JSON.parse('{"path":"/styleguide/src/styleguide/docs/Layout.html","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.06,"words":18},"filePathRelative":"styleguide/src/styleguide/docs/Layout.md","localizedDate":"December 10, 2025","excerpt":"<p>Layout components are used to group related content together. The also provide consistent spacing for blocks of content.</p>\\n"}');export{l as comp,m as data};
|
||||
1
assets/Navigation.html-BYfQ6UrW.js
Normal file
1
assets/Navigation.html-BYfQ6UrW.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,b as o,o as i}from"./app-BnOEODOX.js";const n={};function r(s,e){return i(),a("div",null,e[0]||(e[0]=[o("p",null,"Navigation components allow the user to navigate through the application.",-1)]))}const m=t(n,[["render",r],["__file","Navigation.html.vue"]]),d=JSON.parse('{"path":"/styleguide/src/styleguide/docs/Navigation.html","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.03,"words":10},"filePathRelative":"styleguide/src/styleguide/docs/Navigation.md","localizedDate":"December 10, 2025","excerpt":"<p>Navigation components allow the user to navigate through the application.</p>\\n"}');export{m as comp,d as data};
|
||||
1
assets/SUMMARY.html-CnqmqWxV.js
Normal file
1
assets/SUMMARY.html-CnqmqWxV.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as r,b as l,e as n,f as a,r as u,o as s,d as o}from"./app-BnOEODOX.js";const d={};function p(m,t){const e=u("RouteLink");return s(),r("div",null,[t[20]||(t[20]=l("h1",{id:"table-of-contents",tabindex:"-1"},[l("a",{class:"header-anchor",href:"#table-of-contents"},[l("span",null,"Table of contents")])],-1)),l("ul",null,[l("li",null,[n(e,{to:"/"},{default:a(()=>t[0]||(t[0]=[o("Introduction")])),_:1})]),l("li",null,[n(e,{to:"/neo4j/"},{default:a(()=>t[1]||(t[1]=[o("Neo4J")])),_:1})]),l("li",null,[n(e,{to:"/backend/"},{default:a(()=>t[2]||(t[2]=[o("Backend")])),_:1}),l("ul",null,[l("li",null,[n(e,{to:"/backend/graphql.html"},{default:a(()=>t[3]||(t[3]=[o("GraphQL")])),_:1})]),l("li",null,[n(e,{to:"/backend/neo4j-graphql-js.html"},{default:a(()=>t[4]||(t[4]=[o("neo4j-graphql-js")])),_:1})])])]),l("li",null,[n(e,{to:"/webapp/"},{default:a(()=>t[5]||(t[5]=[o("Webapp (Frontend)")])),_:1}),l("ul",null,[l("li",null,[n(e,{to:"/webapp/components.html"},{default:a(()=>t[6]||(t[6]=[o("Components")])),_:1})]),l("li",null,[n(e,{to:"/webapp/html.html"},{default:a(()=>t[7]||(t[7]=[o("HTML")])),_:1})]),l("li",null,[n(e,{to:"/webapp/scss.html"},{default:a(()=>t[8]||(t[8]=[o("SCSS")])),_:1})]),l("li",null,[n(e,{to:"/webapp/vue.html"},{default:a(()=>t[9]||(t[9]=[o("Vue")])),_:1})])])]),l("li",null,[n(e,{to:"/testing.html"},{default:a(()=>t[10]||(t[10]=[o("Testing Guide")])),_:1}),l("ul",null,[l("li",null,[n(e,{to:"/cypress/"},{default:a(()=>t[11]||(t[11]=[o("End-to-end Tests")])),_:1})]),l("li",null,[n(e,{to:"/webapp/testing.html"},{default:a(()=>t[12]||(t[12]=[o("Webapp (Frontend) Tests")])),_:1})]),l("li",null,[n(e,{to:"/backend/testing.html"},{default:a(()=>t[13]||(t[13]=[o("Backend Tests")])),_:1})])])]),l("li",null,[n(e,{to:"/deployment/"},{default:a(()=>t[14]||(t[14]=[o("Deployment")])),_:1})]),l("li",null,[n(e,{to:"/CONTRIBUTING.html"},{default:a(()=>t[15]||(t[15]=[o("Contributing")])),_:1})]),l("li",null,[n(e,{to:"/cypress/features.html"},{default:a(()=>t[16]||(t[16]=[o("Feature Specification")])),_:1})]),l("li",null,[n(e,{to:"/CODE_OF_CONDUCT.html"},{default:a(()=>t[17]||(t[17]=[o("Code of Conduct")])),_:1})]),l("li",null,[n(e,{to:"/documentation.html"},{default:a(()=>t[18]||(t[18]=[o("Documentation")])),_:1})]),l("li",null,[n(e,{to:"/LICENSE.html"},{default:a(()=>t[19]||(t[19]=[o("License")])),_:1})])])])}const g=i(d,[["render",p],["__file","SUMMARY.html.vue"]]),k=JSON.parse('{"path":"/SUMMARY.html","title":"Table of contents","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.19,"words":58},"filePathRelative":"SUMMARY.md","localizedDate":"December 10, 2025","excerpt":"\\n<ul>\\n<li><a href=\\"/\\" target=\\"_blank\\">Introduction</a></li>\\n<li><a href=\\"/neo4j/\\" target=\\"_blank\\">Neo4J</a></li>\\n<li><a href=\\"/backend/\\" target=\\"_blank\\">Backend</a>\\n<ul>\\n<li><a href=\\"/backend/graphql.html\\" target=\\"_blank\\">GraphQL</a></li>\\n<li><a href=\\"/backend/neo4j-graphql-js.html\\" target=\\"_blank\\">neo4j-graphql-js</a></li>\\n</ul>\\n</li>\\n<li><a href=\\"/webapp/\\" target=\\"_blank\\">Webapp (Frontend)</a>\\n<ul>\\n<li><a href=\\"/webapp/components.html\\" target=\\"_blank\\">Components</a></li>\\n<li><a href=\\"/webapp/html.html\\" target=\\"_blank\\">HTML</a></li>\\n<li><a href=\\"/webapp/scss.html\\" target=\\"_blank\\">SCSS</a></li>\\n<li><a href=\\"/webapp/vue.html\\" target=\\"_blank\\">Vue</a></li>\\n</ul>\\n</li>\\n<li><a href=\\"/testing.html\\" target=\\"_blank\\">Testing Guide</a>\\n<ul>\\n<li><a href=\\"/cypress/\\" target=\\"_blank\\">End-to-end Tests</a></li>\\n<li><a href=\\"/webapp/testing.html\\" target=\\"_blank\\">Webapp (Frontend) Tests</a></li>\\n<li><a href=\\"/backend/testing.html\\" target=\\"_blank\\">Backend Tests</a></li>\\n</ul>\\n</li>\\n<li><a href=\\"/deployment/\\" target=\\"_blank\\">Deployment</a></li>\\n<li><a href=\\"/CONTRIBUTING.html\\" target=\\"_blank\\">Contributing</a></li>\\n<li><a href=\\"/cypress/features.html\\" target=\\"_blank\\">Feature Specification</a></li>\\n<li><a href=\\"/CODE_OF_CONDUCT.html\\" target=\\"_blank\\">Code of Conduct</a></li>\\n<li><a href=\\"/documentation.html\\" target=\\"_blank\\">Documentation</a></li>\\n<li><a href=\\"/LICENSE.html\\" target=\\"_blank\\">License</a></li>\\n</ul>"}');export{g as comp,k as data};
|
||||
1
assets/SearchResult-B_UvBMGn.js
Normal file
1
assets/SearchResult-B_UvBMGn.js
Normal file
File diff suppressed because one or more lines are too long
12
assets/TODO-next-update.html-CDflrR8x.js
Normal file
12
assets/TODO-next-update.html-CDflrR8x.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/Typography.html-s7KNFIlI.js
Normal file
1
assets/Typography.html-s7KNFIlI.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,b as a,o as r}from"./app-BnOEODOX.js";const i={};function n(s,e){return r(),o("div",null,e[0]||(e[0]=[a("p",null,"Typographic components are used to give text a semantic meaning. They also create hierarchy and provide styling through size and color.",-1)]))}const d=t(i,[["render",n],["__file","Typography.html.vue"]]),l=JSON.parse('{"path":"/styleguide/src/styleguide/docs/Typography.html","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.07,"words":21},"filePathRelative":"styleguide/src/styleguide/docs/Typography.md","localizedDate":"December 10, 2025","excerpt":"<p>Typographic components are used to give text a semantic meaning. They also create hierarchy and provide styling through size and color.</p>\\n"}');export{d as comp,l as data};
|
||||
45
assets/app-BnOEODOX.js
Normal file
45
assets/app-BnOEODOX.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/components.html-B9OtlAQj.js
Normal file
1
assets/components.html-B9OtlAQj.js
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/customize-a-KtvxVU.png
Normal file
BIN
assets/customize-a-KtvxVU.png
Normal file
Binary file not shown.
40
assets/demo.html-4zwWpUx9.js
Normal file
40
assets/demo.html-4zwWpUx9.js
Normal file
@ -0,0 +1,40 @@
|
||||
import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as e,o as i}from"./app-BnOEODOX.js";const l={};function p(t,s){return i(),a("div",null,s[0]||(s[0]=[e(`<h2 id="chip-colors" tabindex="-1"><a class="header-anchor" href="#chip-colors"><span>Chip colors</span></a></h2><p>Use different colors to emphasize or provide meaning.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-chip>Medium</ds-chip></span></span>
|
||||
<span class="line"><span><ds-chip color="inverse">Inverse</ds-chip></span></span>
|
||||
<span class="line"><span><ds-chip color="primary">Primary</ds-chip></span></span>
|
||||
<span class="line"><span><ds-chip color="success">Success</ds-chip></span></span>
|
||||
<span class="line"><span><ds-chip color="warning">Warning</ds-chip></span></span>
|
||||
<span class="line"><span><ds-chip color="danger">Danger</ds-chip></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="chip-sizes" tabindex="-1"><a class="header-anchor" href="#chip-sizes"><span>Chip sizes</span></a></h2><p>Use different sizes to create hierarchy (defaults to <code>base</code>).</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-chip size="small">Small</ds-chip></span></span>
|
||||
<span class="line"><span><ds-chip size="base">Base</ds-chip></span></span>
|
||||
<span class="line"><span><ds-chip size="large">Large</ds-chip></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="deletable" tabindex="-1"><a class="header-anchor" href="#deletable"><span>Deletable</span></a></h2><p>A chip can be deletable.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-chip</span></span>
|
||||
<span class="line"><span> v-for="(tag, index) in tags"</span></span>
|
||||
<span class="line"><span> @remove="removeTag(index)"</span></span>
|
||||
<span class="line"><span> removable</span></span>
|
||||
<span class="line"><span> :key="index"</span></span>
|
||||
<span class="line"><span> :color="tag.color"></span></span>
|
||||
<span class="line"><span> {{ tag.label }}</span></span>
|
||||
<span class="line"><span> </ds-chip></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> tags: [</span></span>
|
||||
<span class="line"><span> {label: 'Dog'},</span></span>
|
||||
<span class="line"><span> {label: 'Cat'},</span></span>
|
||||
<span class="line"><span> {label: 'Duck'},</span></span>
|
||||
<span class="line"><span> {label: 'Mouse', color: "primary"},</span></span>
|
||||
<span class="line"><span> {label: 'Bird', color: "primary"},</span></span>
|
||||
<span class="line"><span> {label: 'Elephant', color: "primary"},</span></span>
|
||||
<span class="line"><span> ],</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> },</span></span>
|
||||
<span class="line"><span> methods: {</span></span>
|
||||
<span class="line"><span> removeTag (index) {</span></span>
|
||||
<span class="line"><span> this.tags.splice(index, 1)</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,9)]))}const r=n(l,[["render",p],["__file","demo.html.vue"]]),o=JSON.parse('{"path":"/styleguide/src/system/components/typography/Chip/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Chip colors","slug":"chip-colors","link":"#chip-colors","children":[]},{"level":2,"title":"Chip sizes","slug":"chip-sizes","link":"#chip-sizes","children":[]},{"level":2,"title":"Deletable","slug":"deletable","link":"#deletable","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.48,"words":143},"filePathRelative":"styleguide/src/system/components/typography/Chip/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Chip colors</h2>\\n<p>Use different colors to emphasize or provide meaning.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-chip>Medium</ds-chip></span></span>\\n<span class=\\"line\\"><span><ds-chip color=\\"inverse\\">Inverse</ds-chip></span></span>\\n<span class=\\"line\\"><span><ds-chip color=\\"primary\\">Primary</ds-chip></span></span>\\n<span class=\\"line\\"><span><ds-chip color=\\"success\\">Success</ds-chip></span></span>\\n<span class=\\"line\\"><span><ds-chip color=\\"warning\\">Warning</ds-chip></span></span>\\n<span class=\\"line\\"><span><ds-chip color=\\"danger\\">Danger</ds-chip></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{r as comp,o as data};
|
||||
148
assets/demo.html-5C-VdXBe.js
Normal file
148
assets/demo.html-5C-VdXBe.js
Normal file
File diff suppressed because one or more lines are too long
40
assets/demo.html-6kO36WWO.js
Normal file
40
assets/demo.html-6kO36WWO.js
Normal file
@ -0,0 +1,40 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as l,a,b as n,d as e,o as t}from"./app-BnOEODOX.js";const d={};function p(r,s){return t(),l("div",null,s[0]||(s[0]=[a(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-radio :options="['blue', 'red', 'green']" /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="usage-with-label" tabindex="-1"><a class="header-anchor" href="#usage-with-label"><span>Usage with label</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-radio</span></span>
|
||||
<span class="line"><span> label="Color"</span></span>
|
||||
<span class="line"><span> :options="['blue', 'red', 'green']" /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="bind-to-a-value" tabindex="-1"><a class="header-anchor" href="#bind-to-a-value"><span>Bind to a value</span></a></h2><p>Use v-model to bind a value to the select input.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-radio</span></span>
|
||||
<span class="line"><span> v-model="color"</span></span>
|
||||
<span class="line"><span> :options="['blue', 'red', 'green']"</span></span>
|
||||
<span class="line"><span> placeholder="Color ..."></ds-radio></span></span>
|
||||
<span class="line"><span> <ds-text>Your color: {{ color }}</ds-text></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> color: 'blue'</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="style-variations" tabindex="-1"><a class="header-anchor" href="#style-variations"><span>Style variations</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-radio</span></span>
|
||||
<span class="line"><span> label="Color"</span></span>
|
||||
<span class="line"><span> :options="['blue', 'red', 'green']"</span></span>
|
||||
<span class="line"><span> buttons /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="validation" tabindex="-1"><a class="header-anchor" href="#validation"><span>Validation</span></a></h2>`,10),n("p",null,[e("We use "),n("a",{href:"https://github.com/yiminghe/async-validator",targe:"_blank"},"async-validator schemas"),e(" for validation.")],-1),a(`<p>If you need to validate more than one field it is better to use the form component.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-radio</span></span>
|
||||
<span class="line"><span> v-model="color"</span></span>
|
||||
<span class="line"><span> :options="['blue', 'red', 'green']"</span></span>
|
||||
<span class="line"><span> :schema="{type: 'enum', enum: ['green'], message: 'Please choose green :)' }"</span></span>
|
||||
<span class="line"><span> placeholder="Color ..." /></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> color: ''</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,2)]))}const u=i(d,[["render",p],["__file","demo.html.vue"]]),v=JSON.parse(`{"path":"/styleguide/src/system/components/data-input/Radio/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Usage with label","slug":"usage-with-label","link":"#usage-with-label","children":[]},{"level":2,"title":"Bind to a value","slug":"bind-to-a-value","link":"#bind-to-a-value","children":[]},{"level":2,"title":"Style variations","slug":"style-variations","link":"#style-variations","children":[]},{"level":2,"title":"Validation","slug":"validation","link":"#validation","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.49,"words":147},"filePathRelative":"styleguide/src/system/components/data-input/Radio/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic usage</h2>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-radio :options=\\"['blue', 'red', 'green']\\" /></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div></div></div>"}`);export{u as comp,v as data};
|
||||
108
assets/demo.html-8KhK_z_y.js
Normal file
108
assets/demo.html-8KhK_z_y.js
Normal file
@ -0,0 +1,108 @@
|
||||
import{_ as l}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a as n,b as a,d as e,o as p}from"./app-BnOEODOX.js";const t={};function d(c,s){return p(),i("div",null,s[0]||(s[0]=[n(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-select :options="['blue', 'red', 'green']" /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="usage-with-label" tabindex="-1"><a class="header-anchor" href="#usage-with-label"><span>Usage with label</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-select</span></span>
|
||||
<span class="line"><span> label="Color"</span></span>
|
||||
<span class="line"><span> :options="['blue', 'red', 'green']" /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="bind-to-a-value" tabindex="-1"><a class="header-anchor" href="#bind-to-a-value"><span>Bind to a value</span></a></h2><p>Use v-model to bind a value to the select input.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-select</span></span>
|
||||
<span class="line"><span> v-model="color"</span></span>
|
||||
<span class="line"><span> :options="['blue', 'red', 'green']"</span></span>
|
||||
<span class="line"><span> placeholder="Color ..."></ds-select></span></span>
|
||||
<span class="line"><span> <ds-text>Your color: {{ color }}</ds-text></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> color: 'blue'</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="multiselect" tabindex="-1"><a class="header-anchor" href="#multiselect"><span>Multiselect</span></a></h2><p>Use the multiple prop to allow the user selecting multiple values.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-select</span></span>
|
||||
<span class="line"><span> v-model="color"</span></span>
|
||||
<span class="line"><span> :options="['blue', 'red', 'green']"</span></span>
|
||||
<span class="line"><span> placeholder="Color ..."</span></span>
|
||||
<span class="line"><span> multiple></ds-select></span></span>
|
||||
<span class="line"><span> <ds-text>Your colors: {{ color }}</ds-text></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> color: ['blue', 'red']</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="options-as-objects" tabindex="-1"><a class="header-anchor" href="#options-as-objects"><span>Options as objects</span></a></h2><p>Options can be objects. You can define which property to show as the label by defining label-prop. Defaults to "label".</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-select</span></span>
|
||||
<span class="line"><span> v-model="color"</span></span>
|
||||
<span class="line"><span> :options="colorOptions"</span></span>
|
||||
<span class="line"><span> placeholder="Color ..."></ds-select></span></span>
|
||||
<span class="line"><span> <ds-text>Selected color: {{ color }}</ds-text></span></span>
|
||||
<span class="line"><span> <ds-select</span></span>
|
||||
<span class="line"><span> v-model="colors"</span></span>
|
||||
<span class="line"><span> :options="colorOptions"</span></span>
|
||||
<span class="line"><span> placeholder="Colors ..."</span></span>
|
||||
<span class="line"><span> multiple></ds-select></span></span>
|
||||
<span class="line"><span> <ds-text>Selected colors: {{ colors }}</ds-text></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> color: null,</span></span>
|
||||
<span class="line"><span> colors: [],</span></span>
|
||||
<span class="line"><span> colorOptions: [</span></span>
|
||||
<span class="line"><span> {</span></span>
|
||||
<span class="line"><span> label: 'blue',</span></span>
|
||||
<span class="line"><span> value: '#0e17d8'</span></span>
|
||||
<span class="line"><span> },</span></span>
|
||||
<span class="line"><span> {</span></span>
|
||||
<span class="line"><span> label: 'red',</span></span>
|
||||
<span class="line"><span> value: '#d80e3f'</span></span>
|
||||
<span class="line"><span> },</span></span>
|
||||
<span class="line"><span> {</span></span>
|
||||
<span class="line"><span> label: 'green',</span></span>
|
||||
<span class="line"><span> value: '#0ed853'</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> ]</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="validation" tabindex="-1"><a class="header-anchor" href="#validation"><span>Validation</span></a></h2>`,14),a("p",null,[e("We use "),a("a",{href:"https://github.com/yiminghe/async-validator",targe:"_blank"},"async-validator schemas"),e(" for validation.")],-1),n(`<p>If you need to validate more than one field it is better to use the form component.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-select</span></span>
|
||||
<span class="line"><span> v-model="color"</span></span>
|
||||
<span class="line"><span> :options="['blue', 'red', 'green']"</span></span>
|
||||
<span class="line"><span> :schema="{type: 'enum', enum: ['green'], message: 'Please choose green :)' }"</span></span>
|
||||
<span class="line"><span> placeholder="Color ..." /></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> color: ''</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="select-sizes" tabindex="-1"><a class="header-anchor" href="#select-sizes"><span>Select sizes</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-select placeholder="Small ..." size="small"></ds-select></span></span>
|
||||
<span class="line"><span><ds-select placeholder="Base ..."></ds-select></span></span>
|
||||
<span class="line"><span><ds-select placeholder="Large ..." size="large"></ds-select></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="select-icons" tabindex="-1"><a class="header-anchor" href="#select-icons"><span>Select icons</span></a></h2><p>Add an icon to help the user identify the select fields usage.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-select</span></span>
|
||||
<span class="line"><span> placeholder="User ..."</span></span>
|
||||
<span class="line"><span> icon="user"></ds-select></span></span>
|
||||
<span class="line"><span><ds-select</span></span>
|
||||
<span class="line"><span> placeholder="Day ..."</span></span>
|
||||
<span class="line"><span> icon="clock"></ds-select></span></span>
|
||||
<span class="line"><span><ds-select</span></span>
|
||||
<span class="line"><span> placeholder="User ..."</span></span>
|
||||
<span class="line"><span> size="small"</span></span>
|
||||
<span class="line"><span> icon="user"></ds-select></span></span>
|
||||
<span class="line"><span><ds-select</span></span>
|
||||
<span class="line"><span> placeholder="User ..."</span></span>
|
||||
<span class="line"><span> size="large"</span></span>
|
||||
<span class="line"><span> icon="user"></ds-select></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,7)]))}const u=l(t,[["render",d],["__file","demo.html.vue"]]),v=JSON.parse(`{"path":"/styleguide/src/system/components/data-input/Select/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Usage with label","slug":"usage-with-label","link":"#usage-with-label","children":[]},{"level":2,"title":"Bind to a value","slug":"bind-to-a-value","link":"#bind-to-a-value","children":[]},{"level":2,"title":"Multiselect","slug":"multiselect","link":"#multiselect","children":[]},{"level":2,"title":"Options as objects","slug":"options-as-objects","link":"#options-as-objects","children":[]},{"level":2,"title":"Validation","slug":"validation","link":"#validation","children":[]},{"level":2,"title":"Select sizes","slug":"select-sizes","link":"#select-sizes","children":[]},{"level":2,"title":"Select icons","slug":"select-icons","link":"#select-icons","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.18,"words":353},"filePathRelative":"styleguide/src/system/components/data-input/Select/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic usage</h2>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-select :options=\\"['blue', 'red', 'green']\\" /></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div></div></div>"}`);export{u as comp,v as data};
|
||||
14
assets/demo.html-B2arsc9Y.js
Normal file
14
assets/demo.html-B2arsc9Y.js
Normal file
@ -0,0 +1,14 @@
|
||||
import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a,o as t}from"./app-BnOEODOX.js";const i={};function l(d,e){return t(),n("div",null,e[0]||(e[0]=[a(`<h2 id="default" tabindex="-1"><a class="header-anchor" href="#default"><span>Default</span></a></h2><p>A default section.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-section></span></span>
|
||||
<span class="line"><span> <ds-heading>Give a little respect</ds-heading></span></span>
|
||||
<span class="line"><span> <ds-text>A default section is used to separate content.</ds-text></span></span>
|
||||
<span class="line"><span></ds-section></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="variants" tabindex="-1"><a class="header-anchor" href="#variants"><span>Variants</span></a></h2><p>Use color variants to catch the users attention.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-section primary></span></span>
|
||||
<span class="line"><span> <ds-heading>Give a little respect</ds-heading></span></span>
|
||||
<span class="line"><span> <ds-text>A default section is used to separate content.</ds-text></span></span>
|
||||
<span class="line"><span></ds-section></span></span>
|
||||
<span class="line"><span><ds-section secondary></span></span>
|
||||
<span class="line"><span> <ds-heading>Give a little respect</ds-heading></span></span>
|
||||
<span class="line"><span> <ds-text>A default section is used to separate content.</ds-text></span></span>
|
||||
<span class="line"><span></ds-section></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="fullheight" tabindex="-1"><a class="header-anchor" href="#fullheight"><span>Fullheight</span></a></h2><p>A fullheight section is useful to draw additional attention to its content.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-section secondary fullheight centered></span></span>
|
||||
<span class="line"><span> <ds-heading>Give a little respect</ds-heading></span></span>
|
||||
<span class="line"><span> <ds-text>A default section is used to separate content.</ds-text></span></span>
|
||||
<span class="line"><span></ds-section></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,9)]))}const p=s(i,[["render",l],["__file","demo.html.vue"]]),h=JSON.parse('{"path":"/styleguide/src/system/components/layout/Section/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Default","slug":"default","link":"#default","children":[]},{"level":2,"title":"Variants","slug":"variants","link":"#variants","children":[]},{"level":2,"title":"Fullheight","slug":"fullheight","link":"#fullheight","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.42,"words":127},"filePathRelative":"styleguide/src/system/components/layout/Section/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Default</h2>\\n<p>A default section.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-section></span></span>\\n<span class=\\"line\\"><span> <ds-heading>Give a little respect</ds-heading></span></span>\\n<span class=\\"line\\"><span> <ds-text>A default section is used to separate content.</ds-text></span></span>\\n<span class=\\"line\\"><span></ds-section></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{p as comp,h as data};
|
||||
32
assets/demo.html-B5HLn9y0.js
Normal file
32
assets/demo.html-B5HLn9y0.js
Normal file
@ -0,0 +1,32 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a as e,o as t}from"./app-BnOEODOX.js";const a={};function l(d,s){return t(),n("div",null,s[0]||(s[0]=[e(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-list></span></span>
|
||||
<span class="line"><span> <ds-list-item>Layout components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Typography components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Navigation components</ds-list-item></span></span>
|
||||
<span class="line"><span></ds-list></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="ordered-list" tabindex="-1"><a class="header-anchor" href="#ordered-list"><span>Ordered list</span></a></h2><p>Use an ordered list to display a sorted set of items.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-list ordered></span></span>
|
||||
<span class="line"><span> <ds-list-item>Layout components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Typography components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Navigation components</ds-list-item></span></span>
|
||||
<span class="line"><span></ds-list></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-icon" tabindex="-1"><a class="header-anchor" href="#custom-icon"><span>Custom icon</span></a></h2><p>Provide a custom icon for the list items.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-list icon="user"></span></span>
|
||||
<span class="line"><span> <ds-list-item>Layout components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Typography components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Navigation components</ds-list-item></span></span>
|
||||
<span class="line"><span></ds-list></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizes" tabindex="-1"><a class="header-anchor" href="#sizes"><span>Sizes</span></a></h2><p>Use different sizes to create hierarchy.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-list size="x-large"></span></span>
|
||||
<span class="line"><span> <ds-list-item>Layout components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Typography components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Navigation components</ds-list-item></span></span>
|
||||
<span class="line"><span></ds-list></span></span>
|
||||
<span class="line"><span><ds-list size="large"></span></span>
|
||||
<span class="line"><span> <ds-list-item>Layout components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Typography components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Navigation components</ds-list-item></span></span>
|
||||
<span class="line"><span></ds-list></span></span>
|
||||
<span class="line"><span><ds-list size="base"></span></span>
|
||||
<span class="line"><span> <ds-list-item>Layout components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Typography components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Navigation components</ds-list-item></span></span>
|
||||
<span class="line"><span></ds-list></span></span>
|
||||
<span class="line"><span><ds-list size="small"></span></span>
|
||||
<span class="line"><span> <ds-list-item>Layout components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Typography components</ds-list-item></span></span>
|
||||
<span class="line"><span> <ds-list-item>Navigation components</ds-list-item></span></span>
|
||||
<span class="line"><span></ds-list></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,11)]))}const o=i(a,[["render",l],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/data-display/List/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Ordered list","slug":"ordered-list","link":"#ordered-list","children":[]},{"level":2,"title":"Custom icon","slug":"custom-icon","link":"#custom-icon","children":[]},{"level":2,"title":"Sizes","slug":"sizes","link":"#sizes","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.8,"words":240},"filePathRelative":"styleguide/src/system/components/data-display/List/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic usage</h2>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-list></span></span>\\n<span class=\\"line\\"><span> <ds-list-item>Layout components</ds-list-item></span></span>\\n<span class=\\"line\\"><span> <ds-list-item>Typography components</ds-list-item></span></span>\\n<span class=\\"line\\"><span> <ds-list-item>Navigation components</ds-list-item></span></span>\\n<span class=\\"line\\"><span></ds-list></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{o as comp,r as data};
|
||||
15
assets/demo.html-BPFVTyG7.js
Normal file
15
assets/demo.html-BPFVTyG7.js
Normal file
@ -0,0 +1,15 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a as s,o as a}from"./app-BnOEODOX.js";const t={};function d(l,e){return a(),n("div",null,e[0]||(e[0]=[s(`<h2 id="heading-tag" tabindex="-1"><a class="header-anchor" href="#heading-tag"><span>Heading tag</span></a></h2><p>Use different heading tags to create structure (defaults to h1).</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-heading>The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading tag="h2">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading tag="h3">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading tag="h4">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading tag="h5">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading tag="h6">The quick brown fox</ds-heading></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="heading-sizes" tabindex="-1"><a class="header-anchor" href="#heading-sizes"><span>Heading sizes</span></a></h2><p>In case you need a different size you can set it independently from the heading tag.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-heading size="h1">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading size="h2">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading size="h3">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading size="h4">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading size="h5">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading size="h6">The quick brown fox</ds-heading></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="heading-variants" tabindex="-1"><a class="header-anchor" href="#heading-variants"><span>Heading variants</span></a></h2><p>Use primary headings for important headlines, like a page title. Use soft headings for less important headlines.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-heading primary>The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading soft>The quick brown fox</ds-heading></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="no-margin" tabindex="-1"><a class="header-anchor" href="#no-margin"><span>No Margin</span></a></h2><p>You can remove the margin easily</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-heading no-margin>The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading no-margin>The quick brown fox</ds-heading></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="text-align" tabindex="-1"><a class="header-anchor" href="#text-align"><span>Text Align</span></a></h2><p>Align text</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-heading align="left">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading align="center">The quick brown fox</ds-heading></span></span>
|
||||
<span class="line"><span><ds-heading align="right">The quick brown fox</ds-heading></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,15)]))}const r=i(t,[["render",d],["__file","demo.html.vue"]]),o=JSON.parse('{"path":"/styleguide/src/system/components/typography/Heading/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Heading tag","slug":"heading-tag","link":"#heading-tag","children":[]},{"level":2,"title":"Heading sizes","slug":"heading-sizes","link":"#heading-sizes","children":[]},{"level":2,"title":"Heading variants","slug":"heading-variants","link":"#heading-variants","children":[]},{"level":2,"title":"No Margin","slug":"no-margin","link":"#no-margin","children":[]},{"level":2,"title":"Text Align","slug":"text-align","link":"#text-align","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.83,"words":248},"filePathRelative":"styleguide/src/system/components/typography/Heading/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Heading tag</h2>\\n<p>Use different heading tags to create structure (defaults to h1).</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-heading>The quick brown fox</ds-heading></span></span>\\n<span class=\\"line\\"><span><ds-heading tag=\\"h2\\">The quick brown fox</ds-heading></span></span>\\n<span class=\\"line\\"><span><ds-heading tag=\\"h3\\">The quick brown fox</ds-heading></span></span>\\n<span class=\\"line\\"><span><ds-heading tag=\\"h4\\">The quick brown fox</ds-heading></span></span>\\n<span class=\\"line\\"><span><ds-heading tag=\\"h5\\">The quick brown fox</ds-heading></span></span>\\n<span class=\\"line\\"><span><ds-heading tag=\\"h6\\">The quick brown fox</ds-heading></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{r as comp,o as data};
|
||||
165
assets/demo.html-BZ4U58pg.js
Normal file
165
assets/demo.html-BZ4U58pg.js
Normal file
File diff suppressed because one or more lines are too long
6
assets/demo.html-BqsBwijZ.js
Normal file
6
assets/demo.html-BqsBwijZ.js
Normal file
@ -0,0 +1,6 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a,o as s}from"./app-BnOEODOX.js";const l={};function n(d,e){return s(),t("div",null,e[0]||(e[0]=[a(`<h2 id="default" tabindex="-1"><a class="header-anchor" href="#default"><span>Default</span></a></h2><p>The default page title</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-page-title heading="Give a little respect"></span></span>
|
||||
<span class="line"><span></ds-page-title></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="adding-text" tabindex="-1"><a class="header-anchor" href="#adding-text"><span>Adding text</span></a></h2><p>You can add additional text</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-page-title heading="Give a little respect"></span></span>
|
||||
<span class="line"><span> <ds-text>Some additional title information.</ds-text></span></span>
|
||||
<span class="line"><span></ds-page-title></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="highlight" tabindex="-1"><a class="header-anchor" href="#highlight"><span>Highlight</span></a></h2><p>You can highlight the page title</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-page-title heading="Give a little respect" highlight></span></span>
|
||||
<span class="line"><span> <ds-text>Some additional title information.</ds-text></span></span>
|
||||
<span class="line"><span></ds-page-title></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,9)]))}const p=i(l,[["render",n],["__file","demo.html.vue"]]),g=JSON.parse('{"path":"/styleguide/src/system/components/layout/PageTitle/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Default","slug":"default","link":"#default","children":[]},{"level":2,"title":"Adding text","slug":"adding-text","link":"#adding-text","children":[]},{"level":2,"title":"Highlight","slug":"highlight","link":"#highlight","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.23,"words":69},"filePathRelative":"styleguide/src/system/components/layout/PageTitle/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Default</h2>\\n<p>The default page title</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-page-title heading=\\"Give a little respect\\"></span></span>\\n<span class=\\"line\\"><span></ds-page-title></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{p as comp,g as data};
|
||||
173
assets/demo.html-BrLgf-TD.js
Normal file
173
assets/demo.html-BrLgf-TD.js
Normal file
@ -0,0 +1,173 @@
|
||||
import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as e,o as i}from"./app-BnOEODOX.js";const l={};function t(p,s){return i(),a("div",null,s[0]||(s[0]=[e(`<h2 id="common-usage" tabindex="-1"><a class="header-anchor" href="#common-usage"><span>Common usage</span></a></h2><p>Set a header and image for the card and provide some content.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex gutter="base" :width="{ base: '100%', sm: 1 }"></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> header="The header"</span></span>
|
||||
<span class="line"><span> image="https://picsum.photos/400/300?image=1063"></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> header="The header"</span></span>
|
||||
<span class="line"><span> image="https://picsum.photos/400/300?image=260"></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="space" tabindex="-1"><a class="header-anchor" href="#space"><span>Space</span></a></h2><p>Need more or less space top and bottom of the card? Specify with with the <code>space</code> prop</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-card</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> space</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"xx-small"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> xx-small </span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-card</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-card</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> space</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"xx-large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> xx-large </span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-card</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="cards-with-footer" tabindex="-1"><a class="header-anchor" href="#cards-with-footer"><span>Cards with footer</span></a></h2><p>Most commonly the footer will contain some actions connected to the content.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex gutter="base" :width="{ base: '100%', sm: 1 }"></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> header="The header"></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <template slot="footer"></span></span>
|
||||
<span class="line"><span> <ds-button primary>Read more</ds-button></span></span>
|
||||
<span class="line"><span> </template></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> header="The header"></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <template slot="footer"></span></span>
|
||||
<span class="line"><span> <ds-button primary>Read more</ds-button></span></span>
|
||||
<span class="line"><span> </template></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="centered-content" tabindex="-1"><a class="header-anchor" href="#centered-content"><span>Centered content</span></a></h2><p>Center the content if it is short and its purpose is to draw attention rather than to share information.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex gutter="base" :width="{ base: '100%', sm: 1 }"></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> centered</span></span>
|
||||
<span class="line"><span> header="The header"></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <template slot="footer"></span></span>
|
||||
<span class="line"><span> <ds-button primary>Read more</ds-button></span></span>
|
||||
<span class="line"><span> </template></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> centered</span></span>
|
||||
<span class="line"><span> header="The header"></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <template slot="footer"></span></span>
|
||||
<span class="line"><span> <ds-button primary>Read more</ds-button></span></span>
|
||||
<span class="line"><span> </template></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="icon-card" tabindex="-1"><a class="header-anchor" href="#icon-card"><span>Icon card</span></a></h2><p>A card can contain an icon to emphasize its message.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex gutter="base" :width="{ base: '100%', sm: 1 }"></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> centered</span></span>
|
||||
<span class="line"><span> icon="map"</span></span>
|
||||
<span class="line"><span> header="The header"></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <template slot="footer"></span></span>
|
||||
<span class="line"><span> <ds-button primary>Read more</ds-button></span></span>
|
||||
<span class="line"><span> </template></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> centered</span></span>
|
||||
<span class="line"><span> icon="users"</span></span>
|
||||
<span class="line"><span> header="The header"></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <template slot="footer"></span></span>
|
||||
<span class="line"><span> <ds-button primary>Read more</ds-button></span></span>
|
||||
<span class="line"><span> </template></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="color-variants" tabindex="-1"><a class="header-anchor" href="#color-variants"><span>Color variants</span></a></h2><p>Use color variants to highlight content.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex gutter="base" :width="{ base: '100%', sm: 1 }"></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> icon="cubes"</span></span>
|
||||
<span class="line"><span> header="The header"</span></span>
|
||||
<span class="line"><span> primary</span></span>
|
||||
<span class="line"><span> centered></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <template slot="footer"></span></span>
|
||||
<span class="line"><span> <ds-button>Read more</ds-button></span></span>
|
||||
<span class="line"><span> </template></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> icon="book"</span></span>
|
||||
<span class="line"><span> header="The header"</span></span>
|
||||
<span class="line"><span> secondary</span></span>
|
||||
<span class="line"><span> centered></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <template slot="footer"></span></span>
|
||||
<span class="line"><span> <ds-button secondary>Read more</ds-button></span></span>
|
||||
<span class="line"><span> </template></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="hover-cards" tabindex="-1"><a class="header-anchor" href="#hover-cards"><span>Hover cards</span></a></h2><p>Use a hover card to draw additional attention to the its content.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex gutter="base" :width="{ base: '100%', sm: 1 }"></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> icon="cubes"</span></span>
|
||||
<span class="line"><span> header="The header"</span></span>
|
||||
<span class="line"><span> primary</span></span>
|
||||
<span class="line"><span> centered</span></span>
|
||||
<span class="line"><span> hover></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <template slot="footer"></span></span>
|
||||
<span class="line"><span> <ds-button>Read more</ds-button></span></span>
|
||||
<span class="line"><span> </template></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> icon="book"</span></span>
|
||||
<span class="line"><span> header="The header"</span></span>
|
||||
<span class="line"><span> secondary</span></span>
|
||||
<span class="line"><span> centered</span></span>
|
||||
<span class="line"><span> hover></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <template slot="footer"></span></span>
|
||||
<span class="line"><span> <ds-button secondary>Read more</ds-button></span></span>
|
||||
<span class="line"><span> </template></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="section-footer" tabindex="-1"><a class="header-anchor" href="#section-footer"><span>Section Footer</span></a></h2><p>Here we apply a section footer without margin</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex gutter="base" :width="{ base: '100%', sm: 1 }"></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> icon="cubes"</span></span>
|
||||
<span class="line"><span> header="The header"</span></span>
|
||||
<span class="line"><span> centered</span></span>
|
||||
<span class="line"><span> hover></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <div slot="footer" class="no-margin"></span></span>
|
||||
<span class="line"><span> <ds-icon name="comments" /></span></span>
|
||||
<span class="line"><span> <ds-tag</span></span>
|
||||
<span class="line"><span> style="margin-top: -4px; margin-left: -7px; position: absolute;"</span></span>
|
||||
<span class="line"><span> color="primary"</span></span>
|
||||
<span class="line"><span> size="small"</span></span>
|
||||
<span class="line"><span> round></span></span>
|
||||
<span class="line"><span> 2</span></span>
|
||||
<span class="line"><span> </ds-tag></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-card</span></span>
|
||||
<span class="line"><span> icon="book"</span></span>
|
||||
<span class="line"><span> header="The header"</span></span>
|
||||
<span class="line"><span> centered></span></span>
|
||||
<span class="line"><span> Look ma! I'm in a card.</span></span>
|
||||
<span class="line"><span> <div slot="footer" class="no-margin"></span></span>
|
||||
<span class="line"><span> <ds-icon name="comments" /></span></span>
|
||||
<span class="line"><span> <ds-tag</span></span>
|
||||
<span class="line"><span> style="margin-top: -4px; margin-left: -7px; position: absolute;"</span></span>
|
||||
<span class="line"><span> color="primary"</span></span>
|
||||
<span class="line"><span> size="small"</span></span>
|
||||
<span class="line"><span> round></span></span>
|
||||
<span class="line"><span> 34</span></span>
|
||||
<span class="line"><span> </ds-tag></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span> </ds-card></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,25)]))}const r=n(l,[["render",t],["__file","demo.html.vue"]]),o=JSON.parse(`{"path":"/styleguide/src/system/components/layout/Card/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Common usage","slug":"common-usage","link":"#common-usage","children":[]},{"level":2,"title":"Space","slug":"space","link":"#space","children":[]},{"level":2,"title":"Cards with footer","slug":"cards-with-footer","link":"#cards-with-footer","children":[]},{"level":2,"title":"Centered content","slug":"centered-content","link":"#centered-content","children":[]},{"level":2,"title":"Icon card","slug":"icon-card","link":"#icon-card","children":[]},{"level":2,"title":"Color variants","slug":"color-variants","link":"#color-variants","children":[]},{"level":2,"title":"Hover cards","slug":"hover-cards","link":"#hover-cards","children":[]},{"level":2,"title":"Section Footer","slug":"section-footer","link":"#section-footer","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":2.34,"words":702},"filePathRelative":"styleguide/src/system/components/layout/Card/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Common usage</h2>\\n<p>Set a header and image for the card and provide some content.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-flex gutter=\\"base\\" :width=\\"{ base: '100%', sm: 1 }\\"></span></span>\\n<span class=\\"line\\"><span> <ds-flex-item></span></span>\\n<span class=\\"line\\"><span> <ds-card</span></span>\\n<span class=\\"line\\"><span> header=\\"The header\\"</span></span>\\n<span class=\\"line\\"><span> image=\\"https://picsum.photos/400/300?image=1063\\"></span></span>\\n<span class=\\"line\\"><span> Look ma! I'm in a card.</span></span>\\n<span class=\\"line\\"><span> </ds-card></span></span>\\n<span class=\\"line\\"><span> </ds-flex-item></span></span>\\n<span class=\\"line\\"><span> <ds-flex-item></span></span>\\n<span class=\\"line\\"><span> <ds-card</span></span>\\n<span class=\\"line\\"><span> header=\\"The header\\"</span></span>\\n<span class=\\"line\\"><span> image=\\"https://picsum.photos/400/300?image=260\\"></span></span>\\n<span class=\\"line\\"><span> Look ma! I'm in a card.</span></span>\\n<span class=\\"line\\"><span> </ds-card></span></span>\\n<span class=\\"line\\"><span> </ds-flex-item></span></span>\\n<span class=\\"line\\"><span></ds-flex></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}`);export{r as comp,o as data};
|
||||
17
assets/demo.html-BsdC_3Q5.js
Normal file
17
assets/demo.html-BsdC_3Q5.js
Normal file
@ -0,0 +1,17 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a,o as n}from"./app-BnOEODOX.js";const l={};function h(e,s){return n(),t("div",null,s[0]||(s[0]=[a(`<h2 id="button-types" tabindex="-1"><a class="header-anchor" href="#button-types"><span>Button types</span></a></h2><p>Use a primary button to draw the users attention to important actions. Use default buttons for less important actions.</p><p>A danger button should be used only for destructive actions.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Default</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Primary</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> secondary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Secondary</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> danger</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Danger</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="ghost-buttons" tabindex="-1"><a class="header-anchor" href="#ghost-buttons"><span>Ghost buttons</span></a></h2><p>Use a ghost button for secondary actions.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> ghost</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Default</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> ghost</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Primary</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> ghost</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> secondary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Secondary</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> ghost</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> danger</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Danger</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="button-sizes" tabindex="-1"><a class="header-anchor" href="#button-sizes"><span>Button sizes</span></a></h2><p>Use different sizes to create hierarchy.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"small"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Small</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Base</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Large</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"x-large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>very Large</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="button-full-width" tabindex="-1"><a class="header-anchor" href="#button-full-width"><span>Button full width</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> fullwidth</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Full Width</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="button-states" tabindex="-1"><a class="header-anchor" href="#button-states"><span>Button states</span></a></h2><p>A button can take different states.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Default state</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> disabled</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Disabled state</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> hover</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Hover state</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> loading</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Loading state</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="icon-buttons" tabindex="-1"><a class="header-anchor" href="#icon-buttons"><span>Icon buttons</span></a></h2><p>Add an icon to a button to help the user identify the button's action.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> icon</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"arrow-left"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Click me</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> icon</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"arrow-right"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> right</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Click me</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> icon</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"plus"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> icon</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"plus"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> ghost</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="button-as-links" tabindex="-1"><a class="header-anchor" href="#button-as-links"><span>Button as links</span></a></h2><p>Provide a path to the button. You can pass a url string or a Vue router path object.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> path</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"/navigation"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Click me</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> :path</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"{ name: 'Navigation' }"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>Click me</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div>`,21)]))}const d=i(l,[["render",h],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/navigation/Button/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Button types","slug":"button-types","link":"#button-types","children":[]},{"level":2,"title":"Ghost buttons","slug":"ghost-buttons","link":"#ghost-buttons","children":[]},{"level":2,"title":"Button sizes","slug":"button-sizes","link":"#button-sizes","children":[]},{"level":2,"title":"Button full width","slug":"button-full-width","link":"#button-full-width","children":[]},{"level":2,"title":"Button states","slug":"button-states","link":"#button-states","children":[]},{"level":2,"title":"Icon buttons","slug":"icon-buttons","link":"#icon-buttons","children":[]},{"level":2,"title":"Button as links","slug":"button-as-links","link":"#button-as-links","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.89,"words":268},"filePathRelative":"styleguide/src/system/components/navigation/Button/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Button types</h2>\\n<p>Use a primary button to draw the users attention to important actions. Use default buttons for less important actions.</p>\\n<p>A danger button should be used only for destructive actions.</p>\\n<div class=\\"language-html line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"html\\" data-title=\\"html\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>Default</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> primary</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>Primary</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> secondary</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>Secondary</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> danger</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>Danger</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{d as comp,r as data};
|
||||
4
assets/demo.html-C-LsDDEK.js
Normal file
4
assets/demo.html-C-LsDDEK.js
Normal file
@ -0,0 +1,4 @@
|
||||
import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a,e as t,o as l,r as o}from"./app-BnOEODOX.js";const c={};function d(r,e){const s=o("icon-list");return l(),i("div",null,[e[0]||(e[0]=a(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><p>Simply provide the name for the icon.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-icon name="plus"></ds-icon></span></span>
|
||||
<span class="line"><span><ds-icon name="user"></ds-icon></span></span>
|
||||
<span class="line"><span><ds-icon name="comments"></ds-icon></span></span>
|
||||
<span class="line"><span><ds-icon name="ban"></ds-icon></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="icon-list" tabindex="-1"><a class="header-anchor" href="#icon-list"><span>Icon list</span></a></h2><p>Below is a list of all available icons. If you want to change these icons or want to add new ones, put them in <code>system/icons/svg</code>.</p>`,5)),t(s)])}const h=n(c,[["render",d],["__file","demo.html.vue"]]),u=JSON.parse('{"path":"/styleguide/src/system/components/typography/Icon/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Icon list","slug":"icon-list","link":"#icon-list","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.22,"words":65},"filePathRelative":"styleguide/src/system/components/typography/Icon/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic usage</h2>\\n<p>Simply provide the name for the icon.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-icon name=\\"plus\\"></ds-icon></span></span>\\n<span class=\\"line\\"><span><ds-icon name=\\"user\\"></ds-icon></span></span>\\n<span class=\\"line\\"><span><ds-icon name=\\"comments\\"></ds-icon></span></span>\\n<span class=\\"line\\"><span><ds-icon name=\\"ban\\"></ds-icon></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{h as comp,u as data};
|
||||
9
assets/demo.html-C1kq2agI.js
Normal file
9
assets/demo.html-C1kq2agI.js
Normal file
@ -0,0 +1,9 @@
|
||||
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as e,a as i,o as t}from"./app-BnOEODOX.js";const n={};function l(d,s){return t(),e("div",null,s[0]||(s[0]=[i(`<h2 id="tag-colors" tabindex="-1"><a class="header-anchor" href="#tag-colors"><span>Tag colors</span></a></h2><p>Use different colors to emphasize or provide meaning.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-tag>medium</ds-tag></span></span>
|
||||
<span class="line"><span><ds-tag color="inverse">inverse</ds-tag></span></span>
|
||||
<span class="line"><span><ds-tag color="primary">primary</ds-tag></span></span>
|
||||
<span class="line"><span><ds-tag color="success">success</ds-tag></span></span>
|
||||
<span class="line"><span><ds-tag color="warning">warning</ds-tag></span></span>
|
||||
<span class="line"><span><ds-tag color="danger">danger</ds-tag></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="tag-sizes" tabindex="-1"><a class="header-anchor" href="#tag-sizes"><span>Tag sizes</span></a></h2><p>Use different sizes to create hierarchy (defaults to <code>base</code>).</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-tag size="small">small</ds-tag></span></span>
|
||||
<span class="line"><span><ds-tag size="base">base</ds-tag></span></span>
|
||||
<span class="line"><span><ds-tag size="large">large</ds-tag></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="variations" tabindex="-1"><a class="header-anchor" href="#variations"><span>Variations</span></a></h2><p>Use a round tag to present small numbers.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-tag color="primary" round>7</ds-tag></span></span>
|
||||
<span class="line"><span><ds-tag color="primary" round>42</ds-tag></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div>`,9)]))}const g=a(n,[["render",l],["__file","demo.html.vue"]]),c=JSON.parse('{"path":"/styleguide/src/system/components/typography/Tag/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Tag colors","slug":"tag-colors","link":"#tag-colors","children":[]},{"level":2,"title":"Tag sizes","slug":"tag-sizes","link":"#tag-sizes","children":[]},{"level":2,"title":"Variations","slug":"variations","link":"#variations","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.36,"words":108},"filePathRelative":"styleguide/src/system/components/typography/Tag/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Tag colors</h2>\\n<p>Use different colors to emphasize or provide meaning.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-tag>medium</ds-tag></span></span>\\n<span class=\\"line\\"><span><ds-tag color=\\"inverse\\">inverse</ds-tag></span></span>\\n<span class=\\"line\\"><span><ds-tag color=\\"primary\\">primary</ds-tag></span></span>\\n<span class=\\"line\\"><span><ds-tag color=\\"success\\">success</ds-tag></span></span>\\n<span class=\\"line\\"><span><ds-tag color=\\"warning\\">warning</ds-tag></span></span>\\n<span class=\\"line\\"><span><ds-tag color=\\"danger\\">danger</ds-tag></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{g as comp,c as data};
|
||||
3
assets/demo.html-C7avtGr5.js
Normal file
3
assets/demo.html-C7avtGr5.js
Normal file
@ -0,0 +1,3 @@
|
||||
import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a,o as n}from"./app-BnOEODOX.js";const t={};function d(l,e){return n(),i("div",null,e[0]||(e[0]=[a(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-code>cd your-system-name && yarn install</ds-code></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="inline-code" tabindex="-1"><a class="header-anchor" href="#inline-code"><span>Inline Code</span></a></h2><p>Can be used inline to display small chunks of code.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-text></span></span>
|
||||
<span class="line"><span> Remove the folder with <ds-code inline>rm -rf node_modules</ds-code> and be happy.</span></span>
|
||||
<span class="line"><span></ds-text></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,5)]))}const c=s(t,[["render",d],["__file","demo.html.vue"]]),h=JSON.parse('{"path":"/styleguide/src/system/components/typography/Code/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Inline Code","slug":"inline-code","link":"#inline-code","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.14,"words":43},"filePathRelative":"styleguide/src/system/components/typography/Code/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic usage</h2>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-code>cd your-system-name && yarn install</ds-code></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div></div></div>"}');export{c as comp,h as data};
|
||||
1
assets/demo.html-C8h45_H2.js
Normal file
1
assets/demo.html-C8h45_H2.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a,o as t}from"./app-BnOEODOX.js";const d={};function l(n,e){return t(),i("div",null,e[0]||(e[0]=[a('<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-copy-field>Copy me please!</ds-copy-field></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>',2)]))}const c=s(d,[["render",l],["__file","demo.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/system/components/data-display/CopyField/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.04,"words":11},"filePathRelative":"styleguide/src/system/components/data-display/CopyField/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic usage</h2>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-copy-field>Copy me please!</ds-copy-field></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div></div></div>"}');export{c as comp,p as data};
|
||||
19
assets/demo.html-C9_Ub8Pl.js
Normal file
19
assets/demo.html-C9_Ub8Pl.js
Normal file
@ -0,0 +1,19 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as n,o as t}from"./app-BnOEODOX.js";const l={};function e(h,s){return t(),a("div",null,s[0]||(s[0]=[n(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> name</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"Hans Alba"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> image</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizes" tabindex="-1"><a class="header-anchor" href="#sizes"><span>Sizes</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> online</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"small"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> name</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"Hans Peter"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> online</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"base"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> name</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"Hans Peter"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> online</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> name</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"Hans Peter"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> online</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"x-large"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> name</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"Hans Peter"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> online</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"x-large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> online</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> online</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"base"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> online</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"small"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="broken-image" tabindex="-1"><a class="header-anchor" href="#broken-image"><span>Broken Image</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> name</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"Peter Sommerfield"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> image</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"http://not-valid-image-link.org/image-does-not-exist.jpg"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">/></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="anonymus" tabindex="-1"><a class="header-anchor" href="#anonymus"><span>Anonymus</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> image</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"http://not-valid-image-link##.org/image-does-not-exist.jpg"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">/></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="online-status" tabindex="-1"><a class="header-anchor" href="#online-status"><span>Online Status</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-avatar</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> name</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"Hans Alba"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> image</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> online</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">/></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,10)]))}const d=i(l,[["render",e],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/data-display/Avatar/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Sizes","slug":"sizes","link":"#sizes","children":[]},{"level":2,"title":"Broken Image","slug":"broken-image","link":"#broken-image","children":[]},{"level":2,"title":"Anonymus","slug":"anonymus","link":"#anonymus","children":[]},{"level":2,"title":"Online Status","slug":"online-status","link":"#online-status","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.43,"words":130},"filePathRelative":"styleguide/src/system/components/data-display/Avatar/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic usage</h2>\\n<div class=\\"language-html line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"html\\" data-title=\\"html\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-avatar</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"> </span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> name</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"Hans Alba\\"</span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> image</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"> /></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{d as comp,r as data};
|
||||
14
assets/demo.html-CFGbUhAB.js
Normal file
14
assets/demo.html-CFGbUhAB.js
Normal file
@ -0,0 +1,14 @@
|
||||
import{_ as e}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a,o as i}from"./app-BnOEODOX.js";const l={};function t(d,s){return i(),n("div",null,s[0]||(s[0]=[a(`<div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-container></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I am contained</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-container></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="container-widths" tabindex="-1"><a class="header-anchor" href="#container-widths"><span>Container widths</span></a></h2><p>Use smaller maximum width for content that doesn't need the full size (ex. Login Form / Registration Form).</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-container width="x-small"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>My max-width is x-small</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-container></span></span>
|
||||
<span class="line"><span><ds-container width="small"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>My max-width is small</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-container></span></span>
|
||||
<span class="line"><span><ds-container width="medium"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>My max-width is medium</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-container></span></span>
|
||||
<span class="line"><span><ds-container width="large"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>My max-width is large</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-container></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,4)]))}const p=e(l,[["render",t],["__file","demo.html.vue"]]),o=JSON.parse('{"path":"/styleguide/src/system/components/layout/Container/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Container widths","slug":"container-widths","link":"#container-widths","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.32,"words":95},"filePathRelative":"styleguide/src/system/components/layout/Container/demo.md","localizedDate":"December 10, 2025","excerpt":"<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-container></span></span>\\n<span class=\\"line\\"><span> <ds-placeholder>I am contained</ds-placeholder></span></span>\\n<span class=\\"line\\"><span></ds-container></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{p as comp,o as data};
|
||||
31
assets/demo.html-CNxlDtD6.js
Normal file
31
assets/demo.html-CNxlDtD6.js
Normal file
@ -0,0 +1,31 @@
|
||||
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as e,a as n,o as l}from"./app-BnOEODOX.js";const i={};function t(p,s){return l(),e("div",null,s[0]||(s[0]=[n(`<h2 id="default-margins" tabindex="-1"><a class="header-anchor" href="#default-margins"><span>Default margins</span></a></h2><p>By default the top margin is 0 and the bottom margin is <code>large</code>.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-space></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span>
|
||||
<span class="line"><span><ds-space></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-margins" tabindex="-1"><a class="header-anchor" href="#custom-margins"><span>Custom margins</span></a></h2><p>Margins can be <code>xxx-small, xx-small, x-small, small, base, large, x-large, xx-large and xxx-large</code></p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-space margin-bottom="xxx-small"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space (xxx-small)</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span>
|
||||
<span class="line"><span><ds-space margin-bottom="xx-small"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space (xx-small)</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span>
|
||||
<span class="line"><span><ds-space margin-bottom="small"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space (small)</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span>
|
||||
<span class="line"><span><ds-space margin-bottom="base"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space (base)</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span>
|
||||
<span class="line"><span><ds-space margin-bottom="large"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space (large)</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span>
|
||||
<span class="line"><span><ds-space margin-bottom="xx-large"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space (xx-large)</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span>
|
||||
<span class="line"><span><ds-space></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive-breakpoints" tabindex="-1"><a class="header-anchor" href="#responsive-breakpoints"><span>Responsive Breakpoints</span></a></h2><p>Sometimes we need to adjust the layout for different screen sizes. Therefore margin can be set as an object of breakpoints <code>base, xs, sm, md, lg, xl</code></p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span>
|
||||
<span class="line"><span><ds-space></span></span>
|
||||
<span class="line"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>
|
||||
<span class="line"><span></ds-space></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,9)]))}const r=a(i,[["render",t],["__file","demo.html.vue"]]),o=JSON.parse('{"path":"/styleguide/src/system/components/layout/Space/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Default margins","slug":"default-margins","link":"#default-margins","children":[]},{"level":2,"title":"Custom margins","slug":"custom-margins","link":"#custom-margins","children":[]},{"level":2,"title":"Responsive Breakpoints","slug":"responsive-breakpoints","link":"#responsive-breakpoints","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.82,"words":247},"filePathRelative":"styleguide/src/system/components/layout/Space/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Default margins</h2>\\n<p>By default the top margin is 0 and the bottom margin is <code>large</code>.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-space></span></span>\\n<span class=\\"line\\"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>\\n<span class=\\"line\\"><span></ds-space></span></span>\\n<span class=\\"line\\"><span><ds-space></span></span>\\n<span class=\\"line\\"><span> <ds-placeholder>I have my own space</ds-placeholder></span></span>\\n<span class=\\"line\\"><span></ds-space></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{r as comp,o as data};
|
||||
150
assets/demo.html-Cb1tKiDC.js
Normal file
150
assets/demo.html-Cb1tKiDC.js
Normal file
File diff suppressed because one or more lines are too long
5
assets/demo.html-CqubcSvQ.js
Normal file
5
assets/demo.html-CqubcSvQ.js
Normal file
@ -0,0 +1,5 @@
|
||||
import{_ as e}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a,o as n}from"./app-BnOEODOX.js";const t={};function l(d,s){return n(),i("div",null,s[0]||(s[0]=[a(`<h1 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h1><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-section></span></span>
|
||||
<span class="line"><span> <ds-logo></ds-logo></span></span>
|
||||
<span class="line"><span></ds-section></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="inverse-logo" tabindex="-1"><a class="header-anchor" href="#inverse-logo"><span>Inverse Logo</span></a></h1><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-section secondary></span></span>
|
||||
<span class="line"><span> <ds-logo inverse></ds-logo></span></span>
|
||||
<span class="line"><span></ds-section></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,4)]))}const c=e(t,[["render",l],["__file","demo.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/system/components/typography/Logo/demo.html","title":"Basic usage","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.07,"words":22},"filePathRelative":"styleguide/src/system/components/typography/Logo/demo.md","localizedDate":"December 10, 2025","excerpt":"\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-section></span></span>\\n<span class=\\"line\\"><span> <ds-logo></ds-logo></span></span>\\n<span class=\\"line\\"><span></ds-section></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{c as comp,p as data};
|
||||
57
assets/demo.html-D2rsdRlv.js
Normal file
57
assets/demo.html-D2rsdRlv.js
Normal file
@ -0,0 +1,57 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as l,a as n,b as a,d as e,o as t}from"./app-BnOEODOX.js";const p={};function d(r,s){return t(),l("div",null,s[0]||(s[0]=[n(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-input placeholder="Name ..." /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="usage-with-label" tabindex="-1"><a class="header-anchor" href="#usage-with-label"><span>Usage with label</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-input</span></span>
|
||||
<span class="line"><span> id="name"</span></span>
|
||||
<span class="line"><span> label="Your name"</span></span>
|
||||
<span class="line"><span> placeholder="Name ..." /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1"><a class="header-anchor" href="#disabled"><span>Disabled</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-input placeholder="Name ..." disabled /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="input-types" tabindex="-1"><a class="header-anchor" href="#input-types"><span>Input types</span></a></h2><p>You can use an input for different types of input.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-input v-model="text"></ds-input></span></span>
|
||||
<span class="line"><span> <ds-input v-model="text" type="password"></ds-input></span></span>
|
||||
<span class="line"><span> <ds-input v-model="text" type="textarea" rows="2"></ds-input></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> text: 'Default text'</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="bind-to-a-value" tabindex="-1"><a class="header-anchor" href="#bind-to-a-value"><span>Bind to a value</span></a></h2><p>Use v-model to bind a value to the input.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-input</span></span>
|
||||
<span class="line"><span> v-model="name"</span></span>
|
||||
<span class="line"><span> placeholder="Name ..."></ds-input></span></span>
|
||||
<span class="line"><span> <ds-text>Your name: {{ name }}</ds-text></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> name: ''</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="validation" tabindex="-1"><a class="header-anchor" href="#validation"><span>Validation</span></a></h2>`,13),a("p",null,[e("We use "),a("a",{href:"https://github.com/yiminghe/async-validator",targe:"_blank"},"async-validator schemas"),e(" for validation.")],-1),n(`<p>If you need to validate more than one field it is better to use the form component.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-input</span></span>
|
||||
<span class="line"><span> v-model="name"</span></span>
|
||||
<span class="line"><span> :schema="{type: 'string', min: 6, message: 'Name must be longer' }"</span></span>
|
||||
<span class="line"><span> placeholder="Name ..." /></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> name: ''</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="input-sizes" tabindex="-1"><a class="header-anchor" href="#input-sizes"><span>Input sizes</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-input placeholder="Small ..." size="small"></ds-input></span></span>
|
||||
<span class="line"><span><ds-input placeholder="Base ..."></ds-input></span></span>
|
||||
<span class="line"><span><ds-input placeholder="Large ..." size="large"></ds-input></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="input-icons" tabindex="-1"><a class="header-anchor" href="#input-icons"><span>Input icons</span></a></h2><p>Add an icon to help the user identify the input type.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-input placeholder="Search ..." icon="search"></ds-input></span></span>
|
||||
<span class="line"><span><ds-input placeholder="Time ..." icon="clock"></ds-input></span></span>
|
||||
<span class="line"><span><ds-input placeholder="Search ..." icon-right="search"></ds-input></span></span>
|
||||
<span class="line"><span><ds-input placeholder="Search ..." icon="search" size="small"></ds-input></span></span>
|
||||
<span class="line"><span><ds-input placeholder="Search ..." icon="search" size="large"></ds-input></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,7)]))}const o=i(p,[["render",d],["__file","demo.html.vue"]]),h=JSON.parse('{"path":"/styleguide/src/system/components/data-input/Input/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Usage with label","slug":"usage-with-label","link":"#usage-with-label","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Input types","slug":"input-types","link":"#input-types","children":[]},{"level":2,"title":"Bind to a value","slug":"bind-to-a-value","link":"#bind-to-a-value","children":[]},{"level":2,"title":"Validation","slug":"validation","link":"#validation","children":[]},{"level":2,"title":"Input sizes","slug":"input-sizes","link":"#input-sizes","children":[]},{"level":2,"title":"Input icons","slug":"input-icons","link":"#input-icons","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.92,"words":277},"filePathRelative":"styleguide/src/system/components/data-input/Input/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic usage</h2>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-input placeholder=\\"Name ...\\" /></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div></div></div>"}');export{o as comp,h as data};
|
||||
14
assets/demo.html-DF4IRx3Q.js
Normal file
14
assets/demo.html-DF4IRx3Q.js
Normal file
@ -0,0 +1,14 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as e,o as l}from"./app-BnOEODOX.js";const n={};function t(h,s){return l(),a("div",null,s[0]||(s[0]=[e(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-number</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> count</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"125"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> label</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"Users Online"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizes" tabindex="-1"><a class="header-anchor" href="#sizes"><span>Sizes</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-number</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"small"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> count</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"1734"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> label</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"Contributions"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-number</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"xx-large"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> label-size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> count</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"1734"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> label</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"Contributions"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="slot" tabindex="-1"><a class="header-anchor" href="#slot"><span>Slot</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-number</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> label</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"collected donations from users"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> slot</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"count"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>1.123.124,03 EUR</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-number</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,7)]))}const p=i(n,[["render",t],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/data-display/Number/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Sizes","slug":"sizes","link":"#sizes","children":[]},{"level":2,"title":"Slot","slug":"slot","link":"#slot","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.19,"words":56},"filePathRelative":"styleguide/src/system/components/data-display/Number/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic usage</h2>\\n<div class=\\"language-html line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"html\\" data-title=\\"html\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-number</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"> </span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> count</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"125\\"</span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> label</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"Users Online\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"> /></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{p as comp,r as data};
|
||||
5
assets/demo.html-DHDFIknG.js
Normal file
5
assets/demo.html-DHDFIknG.js
Normal file
@ -0,0 +1,5 @@
|
||||
import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a,o as n}from"./app-BnOEODOX.js";const t={};function l(d,e){return n(),i("div",null,e[0]||(e[0]=[a(`<h1 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h1><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-section></span></span>
|
||||
<span class="line"><span> <ds-logo></ds-logo></span></span>
|
||||
<span class="line"><span></ds-section></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="inverse-logo" tabindex="-1"><a class="header-anchor" href="#inverse-logo"><span>Inverse Logo</span></a></h1><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-section secondary></span></span>
|
||||
<span class="line"><span> <ds-logo inverse></ds-logo></span></span>
|
||||
<span class="line"><span></ds-section></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,4)]))}const c=s(t,[["render",l],["__file","demo.html.vue"]]),p=JSON.parse('{"path":"/webapp/components/Logo/demo.html","title":"Basic usage","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.07,"words":22},"filePathRelative":"webapp/components/Logo/demo.md","localizedDate":"December 10, 2025","excerpt":"\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-section></span></span>\\n<span class=\\"line\\"><span> <ds-logo></ds-logo></span></span>\\n<span class=\\"line\\"><span></ds-section></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{c as comp,p as data};
|
||||
226
assets/demo.html-DOEMb_Ap.js
Normal file
226
assets/demo.html-DOEMb_Ap.js
Normal file
File diff suppressed because one or more lines are too long
32
assets/demo.html-Db9iRCwm.js
Normal file
32
assets/demo.html-Db9iRCwm.js
Normal file
@ -0,0 +1,32 @@
|
||||
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a as i,b as t,d as e,e as d,f as r,r as o,o as p}from"./app-BnOEODOX.js";const g={};function h(c,s){const l=o("RouteLink");return p(),n("div",null,[s[7]||(s[7]=i(`<h2 id="column-width" tabindex="-1"><a class="header-anchor" href="#column-width"><span>Column Width</span></a></h2><p>All columns share the space in the grid evenly and grow and shrink dynamically.</p><p>You can set a minimum width beyond which columns will continue to grow until there is enough space to fit another column of minimum width. (Resize the window to see the effect.)</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-grid :min-column-width="200"></span></span>
|
||||
<span class="line"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span></ds-grid></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="gaps" tabindex="-1"><a class="header-anchor" href="#gaps"><span>Gaps</span></a></h2>`,5)),t("p",null,[s[1]||(s[1]=e("You can set a gap which will be applied as a vertical and horizontal space between all grid items. Allowed values are ")),d(l,{to:"/design-tokens/#spaceSize"},{default:r(()=>s[0]||(s[0]=[e("the common space sizes")])),_:1}),s[2]||(s[2]=e(" and ")),s[3]||(s[3]=t("code",null,"0",-1)),s[4]||(s[4]=e(". The default is ")),s[5]||(s[5]=t("code",null,"small",-1)),s[6]||(s[6]=e("."))]),s[8]||(s[8]=i(`<div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-grid gap="x-small"></span></span>
|
||||
<span class="line"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span></ds-grid></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="grid-item-size" tabindex="-1"><a class="header-anchor" href="#grid-item-size"><span>Grid Item Size</span></a></h2><p>Once the grid is defined a grid item can span several columns and/or rows. You can adjust this by setting the column span and/or row span of each item individually. The column span can also be set to <code>'fullWidth'</code>.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-grid></span></span>
|
||||
<span class="line"><span> <ds-grid-item column-span="fullWidth"><ds-placeholder>full width</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="6" :column-span="2"><ds-placeholder>2 columns, 6 rows</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="8"><ds-placeholder>8 rows</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item><ds-placeholder>default (1 column, 4 rows)</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span></ds-grid></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="row-height" tabindex="-1"><a class="header-anchor" href="#row-height"><span>Row Height</span></a></h2><p>You can set the height of a row – but this is only recommended in combination with setting the grid item property <code>row-span</code>! With these values you can fine tune the height of grid items which will always be a multiple of the defined <code>row-height</code>.</p><p>Low row height leads to a more fine-grained item height:</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-grid :row-height="4"></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="10"><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="11"><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="12"><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span></ds-grid></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>High row height leads to a rougher item height:</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-grid :row-height="100"></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="1"><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="2"><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="3"><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span></ds-grid></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="masonry-layout" tabindex="-1"><a class="header-anchor" href="#masonry-layout"><span>Masonry Layout</span></a></h2><p>In a classic masonry layout items usually have the same width but different heights and are sorted from left to right then top to bottom. You can achieve this by calculating and setting the <code>row-span</code> programmatically for each grid item, depending on its contents.</p><p>Some items may move slightly out of order to make sure existing rows are filled before creating new ones.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-grid></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="4"><ds-placeholder>first</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="8"><ds-placeholder>second</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="6"><ds-placeholder>third</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="6"><ds-placeholder>fourth</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="4"><ds-placeholder>fifth</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="8"><ds-placeholder>sixth</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span> <ds-grid-item :row-span="4"><ds-placeholder>seventh</ds-placeholder></ds-grid-item></span></span>
|
||||
<span class="line"><span></ds-grid></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Hint:</strong> Make sure to pass <code>numbers</code> with a colon (shortcut for <code>v-bind:</code>) so they are not interpreted as strings. For a more thorough explanation visit <a href="https://vuejs.org/v2/guide/components-props.html#Passing-a-Number" target="_blank" rel="noopener noreferrer">the Vue.js docs</a>.</p>`,15))])}const v=a(g,[["render",h],["__file","demo.html.vue"]]),b=JSON.parse('{"path":"/styleguide/src/system/components/layout/Grid/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Column Width","slug":"column-width","link":"#column-width","children":[]},{"level":2,"title":"Gaps","slug":"gaps","link":"#gaps","children":[]},{"level":2,"title":"Grid Item Size","slug":"grid-item-size","link":"#grid-item-size","children":[]},{"level":2,"title":"Row Height","slug":"row-height","link":"#row-height","children":[]},{"level":2,"title":"Masonry Layout","slug":"masonry-layout","link":"#masonry-layout","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":2.24,"words":672},"filePathRelative":"styleguide/src/system/components/layout/Grid/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Column Width</h2>\\n<p>All columns share the space in the grid evenly and grow and shrink dynamically.</p>\\n<p>You can set a minimum width beyond which columns will continue to grow until there is enough space to fit another column of minimum width. (Resize the window to see the effect.)</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-grid :min-column-width=\\"200\\"></span></span>\\n<span class=\\"line\\"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>\\n<span class=\\"line\\"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>\\n<span class=\\"line\\"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>\\n<span class=\\"line\\"><span> <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item></span></span>\\n<span class=\\"line\\"><span></ds-grid></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{v as comp,b as data};
|
||||
9
assets/demo.html-DkKmG04a.js
Normal file
9
assets/demo.html-DkKmG04a.js
Normal file
@ -0,0 +1,9 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as n,o as t}from"./app-BnOEODOX.js";const l={};function h(e,s){return t(),a("div",null,s[0]||(s[0]=[n(`<h2 id="spinning-loading-indicator" tabindex="-1"><a class="header-anchor" href="#spinning-loading-indicator"><span>Spinning loading indicator</span></a></h2><p>Multiple sizes</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-section</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> centered</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"small"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"base"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-section</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Inverse color</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-section</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> centered</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> secondary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"small"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> inverse</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"base"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> inverse</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> inverse</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-spinner</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-section</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,5)]))}const d=i(l,[["render",h],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/layout/Spinner/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Spinning loading indicator","slug":"spinning-loading-indicator","link":"#spinning-loading-indicator","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.2,"words":59},"filePathRelative":"styleguide/src/system/components/layout/Spinner/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Spinning loading indicator</h2>\\n<p>Multiple sizes</p>\\n<div class=\\"language-html line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"html\\" data-title=\\"html\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-section</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> centered</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"> <</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-spinner</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"small\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-spinner</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"> <</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-spinner</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"base\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-spinner</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"> <</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-spinner</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"large\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-spinner</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"></</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-section</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{d as comp,r as data};
|
||||
14
assets/demo.html-DrIc-t_2.js
Normal file
14
assets/demo.html-DrIc-t_2.js
Normal file
@ -0,0 +1,14 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as t,o as e}from"./app-BnOEODOX.js";const h={};function l(n,s){return e(),a("div",null,s[0]||(s[0]=[t(`<h2 id="text-sizes" tabindex="-1"><a class="header-anchor" href="#text-sizes"><span>Text sizes</span></a></h2><p>Use different sizes to create hierarchy.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"x-large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox (x-large)</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox (large)</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"base"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox (base)</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"small"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox (small)</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="text-colors" tabindex="-1"><a class="header-anchor" href="#text-colors"><span>Text colors</span></a></h2><p>Use colors to highlight or deemphasize.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"soft"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"softer"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"primary"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"success"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"danger"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"warning"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="text-align" tabindex="-1"><a class="header-anchor" href="#text-align"><span>Text align</span></a></h2><p>Align text to left, center or right.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;"> align</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"center"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;"> align</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"right"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="text-uppercase" tabindex="-1"><a class="header-anchor" href="#text-uppercase"><span>Text uppercase</span></a></h2><p>Display text in uppercase.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> uppercase</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="nesting-styles" tabindex="-1"><a class="header-anchor" href="#nesting-styles"><span>Nesting styles</span></a></h2><p>Nested text components use their parents format by default.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"primary"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> The quick <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> bold</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>brown</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">> fox</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,15)]))}const d=i(h,[["render",l],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/typography/Text/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Text sizes","slug":"text-sizes","link":"#text-sizes","children":[]},{"level":2,"title":"Text colors","slug":"text-colors","link":"#text-colors","children":[]},{"level":2,"title":"Text align","slug":"text-align","link":"#text-align","children":[]},{"level":2,"title":"Text uppercase","slug":"text-uppercase","link":"#text-uppercase","children":[]},{"level":2,"title":"Nesting styles","slug":"nesting-styles","link":"#nesting-styles","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.72,"words":215},"filePathRelative":"styleguide/src/system/components/typography/Text/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Text sizes</h2>\\n<p>Use different sizes to create hierarchy.</p>\\n<div class=\\"language-html line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"html\\" data-title=\\"html\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"x-large\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>The quick brown fox (x-large)</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"large\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>The quick brown fox (large)</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"base\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>The quick brown fox (base)</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"small\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>The quick brown fox (small)</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{d as comp,r as data};
|
||||
66
assets/demo.html-YKeON6ik.js
Normal file
66
assets/demo.html-YKeON6ik.js
Normal file
@ -0,0 +1,66 @@
|
||||
import{_ as e}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as l,a as n,o as a}from"./app-BnOEODOX.js";const i={};function t(d,s){return a(),l("div",null,s[0]||(s[0]=[n(`<h2 id="item-widths" tabindex="-1"><a class="header-anchor" href="#item-widths"><span>Item widths</span></a></h2><p>By default each item has the same width.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can set widths as parts of the whole.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>1</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item width="2"><ds-placeholder>2</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item width="3"><ds-placeholder>3</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can set widths as fix values.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex></span></span>
|
||||
<span class="line"><span> <ds-flex-item width="200px"><ds-placeholder>200px</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>1</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item width="30%"><ds-placeholder>30%</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can set a default width for each item on the flex component.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex width="50%"></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>item</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>item</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item width="100%"><ds-placeholder>item</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>item</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>item</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="column-gutter" tabindex="-1"><a class="header-anchor" href="#column-gutter"><span>Column Gutter</span></a></h2><p>You can set a gutter for each item on the flex component.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex gutter="small"></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span>
|
||||
<span class="line"><span><ds-flex gutter="base"></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span>
|
||||
<span class="line"><span><ds-flex gutter="large"></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="responsive-breakpoints" tabindex="-1"><a class="header-anchor" href="#responsive-breakpoints"><span>Responsive Breakpoints</span></a></h2><p>Sometimes we need to adjust the layout for different screen sizes. Therefore width, gutter and direction can be set as an object of breakpoints <code>base, xs, sm, md, lg, xl</code></p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex</span></span>
|
||||
<span class="line"><span> :gutter="{ base: 'xx-small', md: 'small' }"</span></span>
|
||||
<span class="line"><span> :direction="{ md: 'row-reverse' }"></span></span>
|
||||
<span class="line"><span> <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>1@md</ds-placeholder></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item :width="{ base: '100%', sm: 1, md: 2 }"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>2@md</ds-placeholder></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="common-patterns" tabindex="-1"><a class="header-anchor" href="#common-patterns"><span>Common Patterns</span></a></h2><p>Fix sidebar flex</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex></span></span>
|
||||
<span class="line"><span> <ds-flex-item :width="{ base: '60px', md: '200px' }"></span></span>
|
||||
<span class="line"><span> <ds-placeholder>sidebar</ds-placeholder></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-placeholder>main content</ds-placeholder></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Grid list of items</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-flex</span></span>
|
||||
<span class="line"><span> :gutter="{ base: 'x-small', md: 'small' }"</span></span>
|
||||
<span class="line"><span> :width="{ base: '100%', sm: '50%', lg: '33.333332%' }"></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-flex-item></span></span>
|
||||
<span class="line"><span> <ds-placeholder>item</ds-placeholder></span></span>
|
||||
<span class="line"><span> </ds-flex-item></span></span>
|
||||
<span class="line"><span></ds-flex></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,20)]))}const c=e(i,[["render",t],["__file","demo.html.vue"]]),m=JSON.parse('{"path":"/styleguide/src/system/components/layout/Flex/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Item widths","slug":"item-widths","link":"#item-widths","children":[]},{"level":2,"title":"Column Gutter","slug":"column-gutter","link":"#column-gutter","children":[]},{"level":2,"title":"Responsive Breakpoints","slug":"responsive-breakpoints","link":"#responsive-breakpoints","children":[]},{"level":2,"title":"Common Patterns","slug":"common-patterns","link":"#common-patterns","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.71,"words":514},"filePathRelative":"styleguide/src/system/components/layout/Flex/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Item widths</h2>\\n<p>By default each item has the same width.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-flex></span></span>\\n<span class=\\"line\\"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>\\n<span class=\\"line\\"><span> <ds-flex-item><ds-placeholder>same</ds-placeholder></ds-flex-item></span></span>\\n<span class=\\"line\\"><span></ds-flex></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{c as comp,m as data};
|
||||
3
assets/demo.html-_niEJMA3.js
Normal file
3
assets/demo.html-_niEJMA3.js
Normal file
@ -0,0 +1,3 @@
|
||||
import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a,o as n}from"./app-BnOEODOX.js";const l={};function t(d,e){return n(),i("div",null,e[0]||(e[0]=[a(`<div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-placeholder></span></span>
|
||||
<span class="line"><span> Holding my ground</span></span>
|
||||
<span class="line"><span></ds-placeholder></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1)]))}const c=s(l,[["render",t],["__file","demo.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/system/components/layout/Placeholder/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.02,"words":7},"filePathRelative":"styleguide/src/system/components/layout/Placeholder/demo.md","localizedDate":"December 10, 2025","excerpt":"<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-placeholder></span></span>\\n<span class=\\"line\\"><span> Holding my ground</span></span>\\n<span class=\\"line\\"><span></ds-placeholder></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{c as comp,p as data};
|
||||
48
assets/demo.html-umcTiQSx.js
Normal file
48
assets/demo.html-umcTiQSx.js
Normal file
@ -0,0 +1,48 @@
|
||||
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a as i,o as e}from"./app-BnOEODOX.js";const l={};function t(p,s){return e(),n("div",null,s[0]||(s[0]=[i(`<h2 id="basic-modal" tabindex="-1"><a class="header-anchor" href="#basic-modal"><span>Basic Modal</span></a></h2><p>Basic modal usage</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-modal</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> style</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"</span><span style="--shiki-light:#383A42;--shiki-dark:#98C379;">position: absolute</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-modal </span></span>
|
||||
<span class="line"><span> v-model="isOpen"</span></span>
|
||||
<span class="line"><span> title="Modal Title" </span></span>
|
||||
<span class="line"><span> ></span></span>
|
||||
<span class="line"><span> <p>Hello World</p></span></span>
|
||||
<span class="line"><span> </ds-modal></span></span>
|
||||
<span class="line"><span> <ds-button primary icon="rocket" @click="isOpen = true">Open Modal</ds-button></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> isOpen: false</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Customize button labels</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
||||
<span class="line"><span> <div></span></span>
|
||||
<span class="line"><span> <ds-modal </span></span>
|
||||
<span class="line"><span> v-if="isOpen"</span></span>
|
||||
<span class="line"><span> v-model="isOpen"</span></span>
|
||||
<span class="line"><span> title="Custom Button Labels" </span></span>
|
||||
<span class="line"><span> force</span></span>
|
||||
<span class="line"><span> extended</span></span>
|
||||
<span class="line"><span> confirm-label="All right"</span></span>
|
||||
<span class="line"><span> cancel-label="Please not"</span></span>
|
||||
<span class="line"><span> ></span></span>
|
||||
<span class="line"><span> <p>Culpa amet sunt aperiam ratione est sed. Molestiae minus doloremque libero. Beatae nam repellendus aliquid maxime.</p></span></span>
|
||||
<span class="line"><span> <p>Sint quasi provident natus id earum debitis. Et facilis a iure ullam. Velit autem eveniet ea reprehenderit ducimus doloribus earum quo.</p></span></span>
|
||||
<span class="line"><span> <p>Consequatur ratione repudiandae aliquid ea. Ut eum architecto assumenda. Autem eaque provident quia et.</p></span></span>
|
||||
<span class="line"><span> <p>Eaque quia aut dolorum sunt ea consequuntur. Labore reprehenderit placeat pariatur molestiae sit laborum nostrum. Deserunt est commodi et suscipit tenetur ipsa voluptas cupiditate. Porro laborum quidem ut corrupti. Dolorum et est placeat qui.</p></span></span>
|
||||
<span class="line"><span> <p>Adipisci beatae cumque esse harum. Error quis nulla illo nemo est. Enim est quis explicabo voluptatem. Omnis maxime qui similique consequatur voluptatibus. Est necessitatibus iure aliquid omnis eum. Ut voluptatibus vel error exercitationem temporibus qui expedita.</p></span></span>
|
||||
<span class="line"><span> </ds-modal></span></span>
|
||||
<span class="line"><span> <ds-button primary icon="rocket" @click="isOpen = true">Open Modal</ds-button></span></span>
|
||||
<span class="line"><span> </div></span></span>
|
||||
<span class="line"><span></template></span></span>
|
||||
<span class="line"><span><script></span></span>
|
||||
<span class="line"><span> export default {</span></span>
|
||||
<span class="line"><span> data() {</span></span>
|
||||
<span class="line"><span> return {</span></span>
|
||||
<span class="line"><span> isOpen: false</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span> }</span></span>
|
||||
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,6)]))}const c=a(l,[["render",t],["__file","demo.html.vue"]]),u=JSON.parse('{"path":"/styleguide/src/system/components/layout/Modal/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic Modal","slug":"basic-modal","link":"#basic-modal","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.77,"words":232},"filePathRelative":"styleguide/src/system/components/layout/Modal/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic Modal</h2>\\n<p>Basic modal usage</p>\\n<div class=\\"language-html line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"html\\" data-title=\\"html\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-modal</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> style</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#98C379\\">position: absolute</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"> /></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div></div></div>"}');export{c as comp,u as data};
|
||||
3
assets/deployment-values.html-Kf53zrvx.js
Normal file
3
assets/deployment-values.html-Kf53zrvx.js
Normal file
File diff suppressed because one or more lines are too long
17
assets/documentation.html-B0Ol86WH.js
Normal file
17
assets/documentation.html-B0Ol86WH.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/features.html-DRv-GGKb.js
Normal file
1
assets/features.html-DRv-GGKb.js
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/grafik (1)-BTXGtrIV.png
Normal file
BIN
assets/grafik (1)-BTXGtrIV.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
assets/grafik-1 (1)-D9Bz6W0K.png
Normal file
BIN
assets/grafik-1 (1)-D9Bz6W0K.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 720 KiB |
BIN
assets/grafik-4-Cy8h69YF.png
Normal file
BIN
assets/grafik-4-Cy8h69YF.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
1
assets/graphql-playground (1)-C_SWrH2M.js
Normal file
1
assets/graphql-playground (1)-C_SWrH2M.js
Normal file
@ -0,0 +1 @@
|
||||
const p="/assets/graphql-playground-Ci-zpEKq.png";export{p as _};
|
||||
BIN
assets/graphql-playground-Ci-zpEKq.png
Normal file
BIN
assets/graphql-playground-Ci-zpEKq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
1
assets/graphql.html-B7Vh3u0g.js
Normal file
1
assets/graphql.html-B7Vh3u0g.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as o}from"./graphql-playground (1)-C_SWrH2M.js";import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,b as r,d as a,e as i,f as l,a as d,r as p,o as c}from"./app-BnOEODOX.js";const h="/assets/grafik-4-Cy8h69YF.png",u={};function m(g,e){const t=p("RouteLink");return c(),n("div",null,[e[3]||(e[3]=r("h1",{id:"graphql-with-apollo",tabindex:"-1"},[r("a",{class:"header-anchor",href:"#graphql-with-apollo"},[r("span",null,"GraphQL with Apollo")])],-1)),e[4]||(e[4]=r("p",null,"GraphQL is a data query language which provides an alternative to REST and ad-hoc web service architectures. It allows clients to define the structure of the data required, and exactly the same structure of the data is returned from the server.",-1)),r("p",null,[e[1]||(e[1]=a("We have a closer description for the ")),i(t,{to:"/backend/src/graphql/GraphQL-Playground.html"},{default:l(()=>e[0]||(e[0]=[a("GraphQL Playground")])),_:1}),e[2]||(e[2]=a("."))]),e[5]||(e[5]=d('<figure><img src="'+o+'" alt="GraphQL Playground" tabindex="0" loading="lazy"><figcaption>GraphQL Playground</figcaption></figure><h2 id="middleware-keeps-resolvers-clean" tabindex="-1"><a class="header-anchor" href="#middleware-keeps-resolvers-clean"><span>Middleware keeps resolvers clean</span></a></h2><figure><img src="'+h+'" alt="Middleware schema" tabindex="0" loading="lazy"><figcaption>Middleware schema</figcaption></figure><p>A well-organized codebase is key for the ability to maintain and easily introduce changes into an app. Figuring out the right structure for your code remains a continuous challenge - especially as an application grows and more developers are joining a project.</p><p>A common problem in GraphQL servers is that resolvers often get cluttered with business logic, making the entire resolver system harder to understand and maintain.</p><p>GraphQL Middleware uses the <a href="https://dzone.com/articles/understanding-middleware-pattern-in-expressjs" target="_blank" rel="noopener noreferrer"><em>middleware pattern</em></a> (well-known from Express.js) to pull out repetitive code from resolvers and execute it before or after one of your resolvers is invoked. This improves code modularity and keeps your resolvers clean and simple.</p>',6))])}const b=s(u,[["render",m],["__file","graphql.html.vue"]]),k=JSON.parse('{"path":"/backend/graphql.html","title":"GraphQL with Apollo","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Middleware keeps resolvers clean","slug":"middleware-keeps-resolvers-clean","link":"#middleware-keeps-resolvers-clean","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.62,"words":185},"filePathRelative":"backend/graphql.md","localizedDate":"December 10, 2025","excerpt":"\\n<p>GraphQL is a data query language which provides an alternative to REST and ad-hoc web service architectures. It allows clients to define the structure of the data required, and exactly the same structure of the data is returned from the server.</p>\\n<p>We have a closer description for the <a href=\\"/backend/src/graphql/GraphQL-Playground.html\\" target=\\"_blank\\">GraphQL Playground</a>.</p>"}');export{b as comp,k as data};
|
||||
1
assets/html.html-BMUJ1Zmz.js
Normal file
1
assets/html.html-BMUJ1Zmz.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a as s,o as n}from"./app-BnOEODOX.js";const r={};function o(i,e){return n(),t("div",null,e[0]||(e[0]=[s('<h1 id="html-–-code-guidelines" tabindex="-1"><a class="header-anchor" href="#html-–-code-guidelines"><span>HTML – Code Guidelines</span></a></h1><h2 id="we-write-semantic-markup" tabindex="-1"><a class="header-anchor" href="#we-write-semantic-markup"><span>We write semantic markup</span></a></h2><p>We avoid using <code>divs</code> and <code>spans</code> and try to choose more meaningful HTML elements instead. If unsure which element to use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">this list by MDN</a> can be of help.</p><p>Why?</p><ul><li>semantic markup is crucial for accessibility</li><li>it makes the code more readable for other developers</li><li>it benefits our SEO</li></ul><p>For more background <a href="https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/" target="_blank" rel="noopener noreferrer">see this article</a>.</p><p>This doesn’t mean you can’t ever use a <code>div</code> – just think twice before you do!</p><h2 id="we-write-as-little-html-as-possible-–-and-as-much-as-necessary" tabindex="-1"><a class="header-anchor" href="#we-write-as-little-html-as-possible-–-and-as-much-as-necessary"><span>We write as little HTML as possible – and as much as necessary</span></a></h2><p>HTML is used to <em>structure content on the page</em> and should therefore reflect its complexity. Not more and not less. Most content does not require deep nesting of HTML elements – if you find yourself wrapping <code>container</code> around <code>container</code> or adding an element just to correctly position another element on the page this calls for the use of CSS instead!</p><p>Why?</p><ul><li>deep nesting makes it hard to understand, style and maintain components</li><li>it can lead to performance issues</li></ul><h2 id="recommended-reads" tabindex="-1"><a class="header-anchor" href="#recommended-reads"><span>Recommended reads</span></a></h2><p>For a deeper dive into the WHY and HOW have a look at the following resources:</p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML" target="_blank" rel="noopener noreferrer">HTML: a good basis for accessibility</a></li><li><a href="https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/" target="_blank" rel="noopener noreferrer">Why, how, and when to use semantic HTML and ARIA</a></li></ul>',14)]))}const c=a(r,[["render",o],["__file","html.html.vue"]]),m=JSON.parse('{"path":"/webapp/html.html","title":"HTML – Code Guidelines","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"We write semantic markup","slug":"we-write-semantic-markup","link":"#we-write-semantic-markup","children":[]},{"level":2,"title":"We write as little HTML as possible – and as much as necessary","slug":"we-write-as-little-html-as-possible-–-and-as-much-as-necessary","link":"#we-write-as-little-html-as-possible-–-and-as-much-as-necessary","children":[]},{"level":2,"title":"Recommended reads","slug":"recommended-reads","link":"#recommended-reads","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.78,"words":233},"filePathRelative":"webapp/html.md","localizedDate":"December 10, 2025","excerpt":"\\n<h2>We write semantic markup</h2>\\n<p>We avoid using <code>divs</code> and <code>spans</code> and try to choose more meaningful HTML elements instead. If unsure which element to use <a href=\\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">this list by MDN</a> can be of help.</p>"}');export{c as comp,m as data};
|
||||
1
assets/index.html--oSASlTN.js
Normal file
1
assets/index.html--oSASlTN.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as n,r}from"./app-BnOEODOX.js";const s={};function l(c,i){const e=r("Catalog");return n(),a("div",null,[o(e)])}const _=t(s,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/webapp/static/img/mapbox/","title":"Mapbox","lang":"en-US","frontmatter":{"title":"Mapbox","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-03z_lZOH.js
Normal file
1
assets/index.html-03z_lZOH.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as r,o as n,r as o}from"./app-BnOEODOX.js";const l={};function s(c,i){const e=o("Catalog");return n(),a("div",null,[r(e)])}const _=t(l,[["render",s],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/backend/src/graphql/","title":"Graphql","lang":"en-US","frontmatter":{"title":"Graphql","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-71y43I4Z.js
Normal file
1
assets/index.html-71y43I4Z.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,e as n,o as a,r as s}from"./app-BnOEODOX.js";const r={};function l(c,i){const e=s("Catalog");return a(),o("div",null,[n(e)])}const _=t(r,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/styleguide/src/system/components/","title":"Components","lang":"en-US","frontmatter":{"title":"Components","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-B6brLUEe.js
Normal file
1
assets/index.html-B6brLUEe.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as n,r as s}from"./app-BnOEODOX.js";const r={};function l(c,i){const e=s("Catalog");return n(),a("div",null,[o(e)])}const f=t(r,[["render",l],["__file","index.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/system/components/layout/Page/","title":"Page","lang":"en-US","frontmatter":{"title":"Page","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{f as comp,p as data};
|
||||
1
assets/index.html-B6lg-84o.js
Normal file
1
assets/index.html-B6lg-84o.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as l,r}from"./app-BnOEODOX.js";const n={};function s(c,i){const e=r("Catalog");return l(),a("div",null,[o(e)])}const _=t(n,[["render",s],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/styleguide/src/system/components/layout/Placeholder/","title":"Placeholder","lang":"en-US","frontmatter":{"title":"Placeholder","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
49
assets/index.html-BBG1XX_R.js
Normal file
49
assets/index.html-BBG1XX_R.js
Normal file
@ -0,0 +1,49 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as n,o as e}from"./app-BnOEODOX.js";const l={};function t(h,s){return e(),a("div",null,s[0]||(s[0]=[n(`<h1 id="styleguide-deployment" tabindex="-1"><a class="header-anchor" href="#styleguide-deployment"><span>Styleguide Deployment</span></a></h1><p>You can use the webhook template <code>webhook.conf.template</code> and the <code>deploy-styleguide.sh</code> script in <code>deployment/styleguide/</code> for an automatic deployment from a (github) webhook.</p><p>For this to work follow these steps (using alpine):</p><p>Setup webhook service</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">apk</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> add</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> webhook</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">cp</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> deployment/styleguide/hooks.json.template</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> deployment/styleguide/hooks.json</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">vi</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> deployment/styleguide/hooks.json</span></span>
|
||||
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># adjust content of .github/webhooks/hooks.json</span></span>
|
||||
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># replace all variables accordingly</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># copy webhook service file</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">cp</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> deployment/styleguide/webhook.template</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> /etc/init.d/webhook</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">vi</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> /etc/init.d/webhook</span></span>
|
||||
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># adjust content of /etc/init.d/webhook</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">chmod</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> +x</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> /etc/init.d/webhook</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">service</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> webhook</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> start</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">rc-update</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> add</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> webhook</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> boot</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Setup nginx</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">vi</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> /etc/nginx/http.d/default.conf</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># contents of /etc/nginx/http.d/default.conf</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">server</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> listen</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 80</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> default_server</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> listen</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> [::]:80 default_server;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> root</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> /var/www/localhost/htdocs</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> # The github payload is quite big sometimes, hence those two lines can prevent an reoccurring error message on nginx</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> client_body_buffer_size</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 10M</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> client_max_body_size</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 10M</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> location</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> /</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> index</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> index.html</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> try_files</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> $uri</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> $uri</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">/</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> /index.html</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> location</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> /hooks/</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> proxy_http_version</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 1.1</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> proxy_set_header</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> Upgrade</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> $http_upgrade</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> proxy_set_header</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> Connection</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'upgrade'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> proxy_set_header</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> X-Forwarded-For</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> $remote_addr</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> proxy_set_header</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> X-Real-IP</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> $remote_addr</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> proxy_set_header</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> Host</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> $host</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> proxy_pass</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> http://127.0.0.1:9000/hooks/</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> proxy_redirect</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> off</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span>
|
||||
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># contents of /etc/nginx/http.d/default.conf</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">service</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> nginx</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> reload</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># delete htdocs/ folder to allow creation of symlink</span></span>
|
||||
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">rm</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> -r</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> /var/www/localhost/htdocs</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For the github webhook configure the following:</p><table><thead><tr><th>Field</th><th>Value</th></tr></thead><tbody><tr><td>Payload URL</td><td>https://styleguide.ocelot.social/hooks/github</td></tr><tr><td>Content type</td><td>application/json</td></tr><tr><td>Secret</td><td>A SECRET</td></tr><tr><td>SSL verification</td><td>Enable SSL verification</td></tr><tr><td>Which events would you like to trigger this webhook?</td><td>Send me everything.</td></tr><tr><td>Active</td><td>[x]</td></tr></tbody></table>`,9)]))}const k=i(l,[["render",t],["__file","index.html.vue"]]),r=JSON.parse('{"path":"/deployment/styleguide/","title":"Styleguide Deployment","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.7,"words":209},"filePathRelative":"deployment/styleguide/README.md","localizedDate":"December 10, 2025","excerpt":"\\n<p>You can use the webhook template <code>webhook.conf.template</code> and the <code>deploy-styleguide.sh</code> script in <code>deployment/styleguide/</code> for an automatic deployment from a (github) webhook.</p>\\n<p>For this to work follow these steps (using alpine):</p>\\n<p>Setup webhook service</p>"}');export{k as comp,r as data};
|
||||
26
assets/index.html-BNaTDnff.js
Normal file
26
assets/index.html-BNaTDnff.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/index.html-BW8MOpgZ.js
Normal file
1
assets/index.html-BW8MOpgZ.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as n,r}from"./app-BnOEODOX.js";const c={};function s(l,i){const e=r("Catalog");return n(),a("div",null,[o(e)])}const _=t(c,[["render",s],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/webapp/static/","title":"Static","lang":"en-US","frontmatter":{"title":"Static","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-B_2J8dg9.js
Normal file
1
assets/index.html-B_2J8dg9.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,e as a,o as n,r as s}from"./app-BnOEODOX.js";const r={};function c(l,i){const e=s("Catalog");return n(),o("div",null,[a(e)])}const _=t(r,[["render",c],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/styleguide/src/system/components/typography/Icon/","title":"Icon","lang":"en-US","frontmatter":{"title":"Icon","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-Bbsmw2QS.js
Normal file
1
assets/index.html-Bbsmw2QS.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,e as a,o as n,r as s}from"./app-BnOEODOX.js";const c={};function r(l,i){const e=s("Catalog");return n(),o("div",null,[a(e)])}const f=t(c,[["render",r],["__file","index.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/system/components/layout/Section/","title":"Section","lang":"en-US","frontmatter":{"title":"Section","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{f as comp,p as data};
|
||||
1
assets/index.html-BnEUjErI.js
Normal file
1
assets/index.html-BnEUjErI.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as s,o,r as n}from"./app-BnOEODOX.js";const l={};function r(c,i){const e=n("Catalog");return o(),a("div",null,[s(e)])}const d=t(l,[["render",r],["__file","index.html.vue"]]),_=JSON.parse('{"path":"/styleguide/src/system/components/data-display/","title":"Data Display","lang":"en-US","frontmatter":{"title":"Data Display","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{d as comp,_ as data};
|
||||
1
assets/index.html-BsfUojZF.js
Normal file
1
assets/index.html-BsfUojZF.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as r,r as s}from"./app-BnOEODOX.js";const n={};function l(c,i){const e=s("Catalog");return r(),a("div",null,[o(e)])}const p=t(n,[["render",l],["__file","index.html.vue"]]),_=JSON.parse('{"path":"/styleguide/src/system/components/data-display/Avatar/","title":"Avatar","lang":"en-US","frontmatter":{"title":"Avatar","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{p as comp,_ as data};
|
||||
1
assets/index.html-Btpb2jrs.js
Normal file
1
assets/index.html-Btpb2jrs.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as s,o,r as n}from"./app-BnOEODOX.js";const r={};function l(c,i){const e=n("Catalog");return o(),a("div",null,[s(e)])}const f=t(r,[["render",l],["__file","index.html.vue"]]),d=JSON.parse('{"path":"/styleguide/src/system/","title":"System","lang":"en-US","frontmatter":{"title":"System","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{f as comp,d as data};
|
||||
1
assets/index.html-C7YHgthV.js
Normal file
1
assets/index.html-C7YHgthV.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as n,r as l}from"./app-BnOEODOX.js";const r={};function s(c,i){const e=l("Catalog");return n(),a("div",null,[o(e)])}const _=t(r,[["render",s],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/deployment/","title":"Deployment","lang":"en-US","frontmatter":{"title":"Deployment","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-C82rtvSN.js
Normal file
1
assets/index.html-C82rtvSN.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as n,o,r as s}from"./app-BnOEODOX.js";const r={};function l(c,i){const e=s("Catalog");return o(),a("div",null,[n(e)])}const _=t(r,[["render",l],["__file","index.html.vue"]]),d=JSON.parse('{"path":"/styleguide/src/system/components/data-input/Input/","title":"Input","lang":"en-US","frontmatter":{"title":"Input","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,d as data};
|
||||
1
assets/index.html-CFCjNzZg.js
Normal file
1
assets/index.html-CFCjNzZg.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as r,r as n}from"./app-BnOEODOX.js";const s={};function l(c,i){const e=n("Catalog");return r(),a("div",null,[o(e)])}const _=t(s,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/styleguide/src/system/components/typography/","title":"Typography","lang":"en-US","frontmatter":{"title":"Typography","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-CHsV7Zd3.js
Normal file
1
assets/index.html-CHsV7Zd3.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as r,r as n}from"./app-BnOEODOX.js";const s={};function l(c,i){const e=n("Catalog");return r(),a("div",null,[o(e)])}const _=t(s,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/styleguide/src/system/components/layout/Grid/","title":"Grid","lang":"en-US","frontmatter":{"title":"Grid","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-CNQul1Qh.js
Normal file
1
assets/index.html-CNQul1Qh.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as s,r as l}from"./app-BnOEODOX.js";const n={};function r(c,i){const e=l("Catalog");return s(),a("div",null,[o(e)])}const p=t(n,[["render",r],["__file","index.html.vue"]]),_=JSON.parse('{"path":"/styleguide/src/system/components/data-display/Table/","title":"Table","lang":"en-US","frontmatter":{"title":"Table","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{p as comp,_ as data};
|
||||
1
assets/index.html-CSJefKwa.js
Normal file
1
assets/index.html-CSJefKwa.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,e as o,o as a,r as s}from"./app-BnOEODOX.js";const r={};function l(c,i){const e=s("Catalog");return a(),n("div",null,[o(e)])}const f=t(r,[["render",l],["__file","index.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/system/components/navigation/Button/","title":"Button","lang":"en-US","frontmatter":{"title":"Button","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{f as comp,p as data};
|
||||
1
assets/index.html-CSzdz3Ja.js
Normal file
1
assets/index.html-CSzdz3Ja.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as n,o,r as s}from"./app-BnOEODOX.js";const i={};function r(l,c){const e=s("Catalog");return o(),a("div",null,[n(e)])}const f=t(i,[["render",r],["__file","index.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/system/components/navigation/","title":"Navigation","lang":"en-US","frontmatter":{"title":"Navigation","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{f as comp,p as data};
|
||||
1
assets/index.html-CZlIGxDq.js
Normal file
1
assets/index.html-CZlIGxDq.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,e as a,o as n,r}from"./app-BnOEODOX.js";const s={};function l(c,i){const e=r("Catalog");return n(),o("div",null,[a(e)])}const _=t(s,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/webapp/components/Logo/","title":"Logo","lang":"en-US","frontmatter":{"title":"Logo","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-CbeIRDPO.js
Normal file
1
assets/index.html-CbeIRDPO.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as n,o,r as s}from"./app-BnOEODOX.js";const r={};function l(c,i){const e=s("Catalog");return o(),a("div",null,[n(e)])}const _=t(r,[["render",l],["__file","index.html.vue"]]),d=JSON.parse('{"path":"/styleguide/src/system/components/data-input/","title":"Data Input","lang":"en-US","frontmatter":{"title":"Data Input","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,d as data};
|
||||
1
assets/index.html-CdIk_YLa.js
Normal file
1
assets/index.html-CdIk_YLa.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,e as a,o as n,r as s}from"./app-BnOEODOX.js";const r={};function l(c,i){const e=s("Catalog");return n(),o("div",null,[a(e)])}const p=t(r,[["render",l],["__file","index.html.vue"]]),_=JSON.parse('{"path":"/styleguide/src/system/components/typography/Code/","title":"Code","lang":"en-US","frontmatter":{"title":"Code","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{p as comp,_ as data};
|
||||
1
assets/index.html-CfQyfq3C.js
Normal file
1
assets/index.html-CfQyfq3C.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as l,r as n}from"./app-BnOEODOX.js";const s={};function r(c,i){const e=n("Catalog");return l(),a("div",null,[o(e)])}const f=t(s,[["render",r],["__file","index.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/system/components/layout/PageTitle/","title":"Page Title","lang":"en-US","frontmatter":{"title":"Page Title","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{f as comp,p as data};
|
||||
1
assets/index.html-Ci5bKGdI.js
Normal file
1
assets/index.html-Ci5bKGdI.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as n,r as s}from"./app-BnOEODOX.js";const r={};function l(c,i){const e=s("Catalog");return n(),a("div",null,[o(e)])}const _=t(r,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/styleguide/src/system/components/typography/Tag/","title":"Tag","lang":"en-US","frontmatter":{"title":"Tag","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-ClUd9WVw.js
Normal file
1
assets/index.html-ClUd9WVw.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as n,o,r as s}from"./app-BnOEODOX.js";const r={};function l(c,i){const e=s("Catalog");return o(),a("div",null,[n(e)])}const p=t(r,[["render",l],["__file","index.html.vue"]]),_=JSON.parse('{"path":"/styleguide/src/system/components/typography/Heading/","title":"Heading","lang":"en-US","frontmatter":{"title":"Heading","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{p as comp,_ as data};
|
||||
1
assets/index.html-CqATndDW.js
Normal file
1
assets/index.html-CqATndDW.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as n,o,r}from"./app-BnOEODOX.js";const s={};function l(c,i){const e=r("Catalog");return o(),a("div",null,[n(e)])}const f=t(s,[["render",l],["__file","index.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/system/components/layout/Container/","title":"Container","lang":"en-US","frontmatter":{"title":"Container","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{f as comp,p as data};
|
||||
1
assets/index.html-Cyo52jKH.js
Normal file
1
assets/index.html-Cyo52jKH.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as r,r as s}from"./app-BnOEODOX.js";const n={};function l(c,i){const e=s("Catalog");return r(),a("div",null,[o(e)])}const p=t(n,[["render",l],["__file","index.html.vue"]]),_=JSON.parse('{"path":"/styleguide/src/system/components/data-display/Number/","title":"Number","lang":"en-US","frontmatter":{"title":"Number","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{p as comp,_ as data};
|
||||
1
assets/index.html-D3tMuoE0.js
Normal file
1
assets/index.html-D3tMuoE0.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as l,r as n}from"./app-BnOEODOX.js";const s={};function r(c,i){const e=n("Catalog");return l(),a("div",null,[o(e)])}const _=t(s,[["render",r],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/styleguide/src/system/components/layout/Modal/","title":"Modal","lang":"en-US","frontmatter":{"title":"Modal","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
56
assets/index.html-DGKBBKeG.js
Normal file
56
assets/index.html-DGKBBKeG.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/index.html-DGWDkYQs.js
Normal file
1
assets/index.html-DGWDkYQs.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as n,r}from"./app-BnOEODOX.js";const s={};function l(c,i){const e=r("Catalog");return n(),a("div",null,[o(e)])}const _=t(s,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/webapp/static/img/","title":"Img","lang":"en-US","frontmatter":{"title":"Img","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-DKwJGPq1.js
Normal file
1
assets/index.html-DKwJGPq1.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as r,r as n}from"./app-BnOEODOX.js";const s={};function l(c,i){const e=n("Catalog");return r(),a("div",null,[o(e)])}const _=t(s,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/styleguide/src/system/components/layout/Card/","title":"Card","lang":"en-US","frontmatter":{"title":"Card","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-DMWRMMvc.js
Normal file
1
assets/index.html-DMWRMMvc.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as t,o as s}from"./app-BnOEODOX.js";const n={};function l(d,e){return s(),a("div",null,e[0]||(e[0]=[t('<h3 id="example" tabindex="-1"><a class="header-anchor" href="#example"><span>Example</span></a></h3><p>Relative time from 08.03.2017</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><date-time dateTime="03.08.2017" /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>',3)]))}const o=i(n,[["render",l],["__file","index.html.vue"]]),p=JSON.parse('{"path":"/webapp/components/DateTime/","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"Example","slug":"example","link":"#example","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.03,"words":10},"filePathRelative":"webapp/components/DateTime/Readme.md","localizedDate":"December 10, 2025","excerpt":"<h3>Example</h3>\\n<p>Relative time from 08.03.2017</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><date-time dateTime=\\"03.08.2017\\" /></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div></div></div>"}');export{o as comp,p as data};
|
||||
1
assets/index.html-DNBzWjKb.js
Normal file
1
assets/index.html-DNBzWjKb.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,e as n,o as a,r as s}from"./app-BnOEODOX.js";const r={};function l(c,i){const e=s("Catalog");return a(),o("div",null,[n(e)])}const _=t(r,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/webapp/components/","title":"Components","lang":"en-US","frontmatter":{"title":"Components","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};
|
||||
1
assets/index.html-DOTyI_MX.js
Normal file
1
assets/index.html-DOTyI_MX.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as s,r as l}from"./app-BnOEODOX.js";const n={};function r(i,c){const e=l("Catalog");return s(),a("div",null,[o(e)])}const p=t(n,[["render",r],["__file","index.html.vue"]]),_=JSON.parse('{"path":"/styleguide/src/system/components/data-display/CopyField/","title":"Copy Field","lang":"en-US","frontmatter":{"title":"Copy Field","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{p as comp,_ as data};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user