mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-04-06 01:25:38 +00:00
51 lines
31 KiB
JavaScript
51 lines
31 KiB
JavaScript
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a as e,o as a}from"./app-UjmrCZP8.js";const n={};function l(r,s){return a(),t("div",null,s[0]||(s[0]=[e(`<h1 id="osbutton-status" tabindex="-1"><a class="header-anchor" href="#osbutton-status"><span>OsButton Status</span></a></h1><blockquote><p>Status-Tracking der OsButton-Komponente</p></blockquote><hr><h2 id="ubersicht" tabindex="-1"><a class="header-anchor" href="#ubersicht"><span>Übersicht</span></a></h2><table><thead><tr><th>Aspekt</th><th>Status</th></tr></thead><tbody><tr><td><strong>Implementierung</strong></td><td>Basis implementiert</td></tr><tr><td><strong>CVA-Integration</strong></td><td>Vollständig</td></tr><tr><td><strong>Tests</strong></td><td>9 Tests vorhanden</td></tr><tr><td><strong>Storybook</strong></td><td>Ausstehend</td></tr><tr><td><strong>A11y</strong></td><td>Teilweise</td></tr></tbody></table><hr><h2 id="implementierte-features" tabindex="-1"><a class="header-anchor" href="#implementierte-features"><span>Implementierte Features</span></a></h2><h3 id="props" tabindex="-1"><a class="header-anchor" href="#props"><span>Props</span></a></h3><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td><code>variant</code></td><td><code>'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'ghost' | 'outline'</code></td><td><code>'primary'</code></td><td>Implementiert</td><td>8 Varianten via CVA</td></tr><tr><td><code>size</code></td><td><code>'xs' | 'sm' | 'md' | 'lg' | 'xl'</code></td><td><code>'md'</code></td><td>Implementiert</td><td>5 Größen via CVA</td></tr><tr><td><code>fullWidth</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Implementiert</td><td></td></tr><tr><td><code>type</code></td><td><code>'button' | 'submit' | 'reset'</code></td><td><code>'button'</code></td><td>Implementiert</td><td></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Implementiert</td><td></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td><code>''</code></td><td>Implementiert</td><td>Via cn() gemerged</td></tr></tbody></table><h3 id="slots" tabindex="-1"><a class="header-anchor" href="#slots"><span>Slots</span></a></h3><table><thead><tr><th>Slot</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td><code>default</code></td><td>Implementiert</td><td>Button-Content</td></tr></tbody></table><h3 id="events" tabindex="-1"><a class="header-anchor" href="#events"><span>Events</span></a></h3><table><thead><tr><th>Event</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>Native Events</td><td>Implementiert</td><td>click, focus, etc. werden durchgereicht</td></tr></tbody></table><hr><h2 id="fehlende-features-aus-katalog-md" tabindex="-1"><a class="header-anchor" href="#fehlende-features-aus-katalog-md"><span>Fehlende Features (aus KATALOG.md)</span></a></h2><h3 id="hohe-prioritat" tabindex="-1"><a class="header-anchor" href="#hohe-prioritat"><span>Hohe Priorität</span></a></h3><table><thead><tr><th>Feature</th><th>Beschreibung</th><th>Aufwand</th></tr></thead><tbody><tr><td><code>icon</code></td><td>Icon-Name/Komponente einbinden</td><td>Mittel - erfordert OsIcon</td></tr><tr><td><code>iconPosition</code></td><td><code>'left' | 'right'</code></td><td>Klein - nach Icon-Support</td></tr><tr><td><code>loading</code></td><td>Ladezustand mit Spinner</td><td>Mittel - erfordert OsSpinner</td></tr></tbody></table><h3 id="mittlere-prioritat" tabindex="-1"><a class="header-anchor" href="#mittlere-prioritat"><span>Mittlere Priorität</span></a></h3><table><thead><tr><th>Feature</th><th>Beschreibung</th><th>Aufwand</th></tr></thead><tbody><tr><td><code>to</code></td><td>Vue Router Link-Support</td><td>Mittel - erfordert router-link/NuxtLink</td></tr><tr><td><code>href</code></td><td>Externer Link-Support</td><td>Klein - <code><a></code> statt <code><button></code></td></tr><tr><td><code>circle</code></td><td>Runder Button</td><td>Klein - CVA-Variant hinzufügen</td></tr></tbody></table><h3 id="niedrige-prioritat" tabindex="-1"><a class="header-anchor" href="#niedrige-prioritat"><span>Niedrige Priorität</span></a></h3><table><thead><tr><th>Feature</th><th>Beschreibung</th><th>Aufwand</th></tr></thead><tbody><tr><td><code>filled</code> vs <code>ghost</code></td><td>Explizite Unterscheidung</td><td>Diskussion nötig - aktuell via <code>variant</code></td></tr></tbody></table><h3 id="nicht-geplant" tabindex="-1"><a class="header-anchor" href="#nicht-geplant"><span>Nicht geplant</span></a></h3><table><thead><tr><th>Feature</th><th>Begründung</th></tr></thead><tbody><tr><td><code>bullet</code></td><td>Zu spezifisch, kann mit <code>circle</code> + custom size erreicht werden</td></tr><tr><td><code>hover</code> prop</td><td>CSS :hover reicht</td></tr><tr><td><code>padding</code> prop</td><td>Sollte über size geregelt werden</td></tr></tbody></table><hr><h2 id="vergleich-aktuell-vs-zielzustand" tabindex="-1"><a class="header-anchor" href="#vergleich-aktuell-vs-zielzustand"><span>Vergleich: Aktuell vs. Zielzustand</span></a></h2><h3 id="katalog-md-vorschlag-osbuttonprops" tabindex="-1"><a class="header-anchor" href="#katalog-md-vorschlag-osbuttonprops"><span>KATALOG.md Vorschlag (OsButtonProps)</span></a></h3><div class="language-typescript line-numbers-mode" data-highlighter="shiki" data-ext="typescript" data-title="typescript" 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;">interface</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> OsButtonProps</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;"> // Variante</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> variant</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'default'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'primary'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'secondary'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'danger'</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> filled</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> ghost</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</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;"> // Größe & Form</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> size</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'tiny'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'small'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'base'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'large'</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> circle</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> fullWidth</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</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;"> // Icon</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> icon</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> iconPosition</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'left'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'right'</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;"> // Zustände</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> loading</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> disabled</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</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;"> // Link-Support</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> to</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> RouteLocationRaw</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> href</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</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;"> // Button-Typ</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> type</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'button'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'submit'</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 class="line-number"></div></div></div><h3 id="aktuelle-implementierung" tabindex="-1"><a class="header-anchor" href="#aktuelle-implementierung"><span>Aktuelle Implementierung</span></a></h3><div class="language-typescript line-numbers-mode" data-highlighter="shiki" data-ext="typescript" data-title="typescript" 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;">interface</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> OsButtonProps</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> variant</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'primary'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'secondary'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'danger'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'warning'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'success'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'info'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'ghost'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'outline'</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> size</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'xs'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'sm'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'md'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'lg'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'xl'</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> fullWidth</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> type</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'button'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> \\</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'submit'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> \\</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'reset'</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> disabled</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> class</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> string</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></div><h3 id="unterschiede" tabindex="-1"><a class="header-anchor" href="#unterschiede"><span>Unterschiede</span></a></h3><table><thead><tr><th>Aspekt</th><th>KATALOG.md</th><th>Implementiert</th><th>Kommentar</th></tr></thead><tbody><tr><td><strong>Varianten</strong></td><td>4 + filled/ghost Modifikatoren</td><td>8 eigenständige</td><td>Besser: Mehr Varianten ohne Modifikatoren</td></tr><tr><td><strong>Sizes</strong></td><td>tiny, small, base, large</td><td>xs, sm, md, lg, xl</td><td>Besser: 5 statt 4, Standard-Naming</td></tr><tr><td><strong>Icon-Support</strong></td><td>icon, iconPosition</td><td>-</td><td>Fehlt: erfordert OsIcon</td></tr><tr><td><strong>Loading</strong></td><td>loading</td><td>-</td><td>Fehlt: erfordert OsSpinner</td></tr><tr><td><strong>Link-Support</strong></td><td>to, href</td><td>-</td><td>Fehlt: Router-Integration</td></tr><tr><td><strong>Circle</strong></td><td>circle</td><td>-</td><td>Fehlt: einfach hinzuzufügen</td></tr></tbody></table><hr><h2 id="test-coverage" tabindex="-1"><a class="header-anchor" href="#test-coverage"><span>Test-Coverage</span></a></h2><p><strong>Datei:</strong> <code>OsButton.spec.ts</code></p><table><thead><tr><th>Test</th><th>Beschreibung</th></tr></thead><tbody><tr><td>renders slot content</td><td>Slot-Inhalt wird gerendert</td></tr><tr><td>applies default variant classes</td><td>Primary-Variante als Default</td></tr><tr><td>applies size variant classes</td><td>Size-Classes korrekt</td></tr><tr><td>applies variant classes</td><td>Varianten-Classes korrekt</td></tr><tr><td>applies fullWidth class</td><td>w-full wird gesetzt</td></tr><tr><td>merges custom classes</td><td>Custom Classes werden via cn() gemerged</td></tr><tr><td>sets disabled attribute</td><td>disabled-Attribut wird gesetzt</td></tr><tr><td>sets button type</td><td>type-Attribut wird gesetzt</td></tr><tr><td>emits click event</td><td>Click-Event wird emittiert</td></tr></tbody></table><h3 id="fehlende-tests" tabindex="-1"><a class="header-anchor" href="#fehlende-tests"><span>Fehlende Tests</span></a></h3><ul><li>[ ] Alle 8 Varianten testen</li><li>[ ] Alle 5 Sizes testen</li><li>[ ] Keyboard-Navigation (Enter, Space)</li><li>[ ] Focus-States</li><li>[ ] Disabled-State verhindert Click</li></ul><hr><h2 id="architektur" tabindex="-1"><a class="header-anchor" href="#architektur"><span>Architektur</span></a></h2><h3 id="datei-struktur" tabindex="-1"><a class="header-anchor" href="#datei-struktur"><span>Datei-Struktur</span></a></h3><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>src/components/OsButton/</span></span>
|
|
<span class="line"><span>├── OsButton.vue # Hauptkomponente</span></span>
|
|
<span class="line"><span>├── OsButton.spec.ts # Tests</span></span>
|
|
<span class="line"><span>├── button.variants.ts # CVA-Varianten-Definition</span></span>
|
|
<span class="line"><span>├── index.ts # Exports</span></span>
|
|
<span class="line"><span>└── STATUS.md # Diese Datei</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><h3 id="cva-pattern" tabindex="-1"><a class="header-anchor" href="#cva-pattern"><span>CVA-Pattern</span></a></h3><p>Die Komponente nutzt das CVA-Pattern (Class Variance Authority):</p><ol><li><strong>button.variants.ts</strong> - Definiert alle Varianten als Type-Safe Funktion</li><li><strong>OsButton.vue</strong> - Nutzt <code>buttonVariants()</code> + <code>cn()</code> für finale Klassen</li><li><strong>Export</strong> - Varianten-Funktion + Typen werden exportiert für Composability</li></ol><h3 id="css-variablen" tabindex="-1"><a class="header-anchor" href="#css-variablen"><span>CSS-Variablen</span></a></h3><p>Die Komponente nutzt CSS Custom Properties für Theming:</p><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" data-title="css" 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;">--color-primary</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">--color-primary-contrast</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">--color-primary-hover</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">--color-secondary (etc.</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">)</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">--color-danger (etc.</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">)</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">--color-warning (etc.</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">)</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">--color-success (etc.</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">)</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">--color-info (etc.</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><hr><h2 id="nachste-schritte" tabindex="-1"><a class="header-anchor" href="#nachste-schritte"><span>Nächste Schritte</span></a></h2><h3 id="phase-1-icon-support-erfordert-osicon" tabindex="-1"><a class="header-anchor" href="#phase-1-icon-support-erfordert-osicon"><span>Phase 1: Icon-Support (erfordert OsIcon)</span></a></h3><ol><li>OsIcon-Komponente erstellen</li><li><code>icon</code> Prop hinzufügen (string für Icon-Name oder Komponente)</li><li><code>iconPosition</code> Prop hinzufügen ('left' | 'right')</li><li>Layout für Icon + Text anpassen</li></ol><h3 id="phase-2-loading-state-erfordert-osspinner" tabindex="-1"><a class="header-anchor" href="#phase-2-loading-state-erfordert-osspinner"><span>Phase 2: Loading-State (erfordert OsSpinner)</span></a></h3><ol><li>OsSpinner-Komponente erstellen</li><li><code>loading</code> Prop hinzufügen</li><li>Bei loading: Spinner anzeigen, Button disabled</li></ol><h3 id="phase-3-link-support" tabindex="-1"><a class="header-anchor" href="#phase-3-link-support"><span>Phase 3: Link-Support</span></a></h3><ol><li><code>to</code> Prop für Vue Router Links</li><li><code>href</code> Prop für externe Links</li><li>Dynamisches Element: <code><button></code> | <code><router-link></code> | <code><a></code></li></ol><h3 id="phase-4-circle-variant" tabindex="-1"><a class="header-anchor" href="#phase-4-circle-variant"><span>Phase 4: Circle-Variant</span></a></h3><ol><li><code>circle</code> Prop hinzufügen</li><li>CVA-Variant für runden Button</li></ol><hr><h2 id="abhangigkeiten" tabindex="-1"><a class="header-anchor" href="#abhangigkeiten"><span>Abhängigkeiten</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>OsButton</span></span>
|
|
<span class="line"><span>├── Benötigt: cn() utility Vorhanden</span></span>
|
|
<span class="line"><span>├── Benötigt: CVA Vorhanden</span></span>
|
|
<span class="line"><span>├── Für Icon: OsIcon Ausstehend (Tier 1)</span></span>
|
|
<span class="line"><span>├── Für Loading: OsSpinner Ausstehend (Tier 1)</span></span>
|
|
<span class="line"><span>└── Für Link: Vue Router Optional (nur für SPA-Links)</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><hr><h2 id="changelog" tabindex="-1"><a class="header-anchor" href="#changelog"><span>Changelog</span></a></h2><table><thead><tr><th>Datum</th><th>Änderung</th></tr></thead><tbody><tr><td>2026-02-07</td><td>Status-Datei erstellt</td></tr><tr><td>2026-02-07</td><td>CVA-Integration abgeschlossen</td></tr><tr><td>2026-02-07</td><td>8 Varianten, 5 Sizes implementiert</td></tr><tr><td>2026-02-07</td><td>9 Tests vorhanden</td></tr></tbody></table>`,63)]))}const p=i(n,[["render",l],["__file","STATUS.html.vue"]]),o=JSON.parse('{"path":"/packages/ui/src/components/OsButton/STATUS.html","title":"OsButton Status","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Übersicht","slug":"ubersicht","link":"#ubersicht","children":[]},{"level":2,"title":"Implementierte Features","slug":"implementierte-features","link":"#implementierte-features","children":[{"level":3,"title":"Props","slug":"props","link":"#props","children":[]},{"level":3,"title":"Slots","slug":"slots","link":"#slots","children":[]},{"level":3,"title":"Events","slug":"events","link":"#events","children":[]}]},{"level":2,"title":"Fehlende Features (aus KATALOG.md)","slug":"fehlende-features-aus-katalog-md","link":"#fehlende-features-aus-katalog-md","children":[{"level":3,"title":"Hohe Priorität","slug":"hohe-prioritat","link":"#hohe-prioritat","children":[]},{"level":3,"title":"Mittlere Priorität","slug":"mittlere-prioritat","link":"#mittlere-prioritat","children":[]},{"level":3,"title":"Niedrige Priorität","slug":"niedrige-prioritat","link":"#niedrige-prioritat","children":[]},{"level":3,"title":"Nicht geplant","slug":"nicht-geplant","link":"#nicht-geplant","children":[]}]},{"level":2,"title":"Vergleich: Aktuell vs. Zielzustand","slug":"vergleich-aktuell-vs-zielzustand","link":"#vergleich-aktuell-vs-zielzustand","children":[{"level":3,"title":"KATALOG.md Vorschlag (OsButtonProps)","slug":"katalog-md-vorschlag-osbuttonprops","link":"#katalog-md-vorschlag-osbuttonprops","children":[]},{"level":3,"title":"Aktuelle Implementierung","slug":"aktuelle-implementierung","link":"#aktuelle-implementierung","children":[]},{"level":3,"title":"Unterschiede","slug":"unterschiede","link":"#unterschiede","children":[]}]},{"level":2,"title":"Test-Coverage","slug":"test-coverage","link":"#test-coverage","children":[{"level":3,"title":"Fehlende Tests","slug":"fehlende-tests","link":"#fehlende-tests","children":[]}]},{"level":2,"title":"Architektur","slug":"architektur","link":"#architektur","children":[{"level":3,"title":"Datei-Struktur","slug":"datei-struktur","link":"#datei-struktur","children":[]},{"level":3,"title":"CVA-Pattern","slug":"cva-pattern","link":"#cva-pattern","children":[]},{"level":3,"title":"CSS-Variablen","slug":"css-variablen","link":"#css-variablen","children":[]}]},{"level":2,"title":"Nächste Schritte","slug":"nachste-schritte","link":"#nachste-schritte","children":[{"level":3,"title":"Phase 1: Icon-Support (erfordert OsIcon)","slug":"phase-1-icon-support-erfordert-osicon","link":"#phase-1-icon-support-erfordert-osicon","children":[]},{"level":3,"title":"Phase 2: Loading-State (erfordert OsSpinner)","slug":"phase-2-loading-state-erfordert-osspinner","link":"#phase-2-loading-state-erfordert-osspinner","children":[]},{"level":3,"title":"Phase 3: Link-Support","slug":"phase-3-link-support","link":"#phase-3-link-support","children":[]},{"level":3,"title":"Phase 4: Circle-Variant","slug":"phase-4-circle-variant","link":"#phase-4-circle-variant","children":[]}]},{"level":2,"title":"Abhängigkeiten","slug":"abhangigkeiten","link":"#abhangigkeiten","children":[]},{"level":2,"title":"Changelog","slug":"changelog","link":"#changelog","children":[]}],"git":{"createdTime":1775422481000,"updatedTime":1775422481000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":2.25,"words":676},"filePathRelative":"packages/ui/src/components/OsButton/STATUS.md","localizedDate":"April 5, 2026","excerpt":"\\n<blockquote>\\n<p>Status-Tracking der OsButton-Komponente</p>\\n</blockquote>\\n<hr>\\n<h2>Übersicht</h2>\\n<table>\\n<thead>\\n<tr>\\n<th>Aspekt</th>\\n<th>Status</th>\\n</tr>\\n</thead>\\n<tbody>\\n<tr>\\n<td><strong>Implementierung</strong></td>\\n<td>Basis implementiert</td>\\n</tr>\\n<tr>\\n<td><strong>CVA-Integration</strong></td>\\n<td>Vollständig</td>\\n</tr>\\n<tr>\\n<td><strong>Tests</strong></td>\\n<td>9 Tests vorhanden</td>\\n</tr>\\n<tr>\\n<td><strong>Storybook</strong></td>\\n<td>Ausstehend</td>\\n</tr>\\n<tr>\\n<td><strong>A11y</strong></td>\\n<td>Teilweise</td>\\n</tr>\\n</tbody>\\n</table>"}');export{p as comp,o as data};
|