mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-04-06 01:25:31 +00:00
121 lines
134 KiB
JavaScript
121 lines
134 KiB
JavaScript
import{_ as e}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as d,a as i,o as s}from"./app-h9l50wZ_.js";const n={};function a(r,t){return s(),d("div",null,t[0]||(t[0]=[i(`<h1 id="komponenten-katalog" tabindex="-1"><a class="header-anchor" href="#komponenten-katalog"><span>Komponenten-Katalog</span></a></h1><blockquote><p>Tracking der Katalogisierung aller bestehenden Komponenten. Diese Datei ermöglicht das Unterbrechen und Fortsetzen der Analyse.</p></blockquote><hr><h2 id="fortschritt" tabindex="-1"><a class="header-anchor" href="#fortschritt"><span>Fortschritt</span></a></h2><h3 id="ubersicht" tabindex="-1"><a class="header-anchor" href="#ubersicht"><span>Übersicht</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>Phase 0: Analyse ██████████ 100% (8/8 Schritte) ✅</span></span>
|
|
<span class="line"><span>Phase 3: OsButton ██████████ 100% (133/133 Buttons) ✅</span></span>
|
|
<span class="line"><span>Phase 4: Tier 1 ██████████ 100% (OsButton, OsIcon, OsSpinner, OsCard) ✅</span></span>
|
|
<span class="line"><span>Phase 4: Tier A → HTML ██████████ 100% (10 ds-* Wrapper → Plain HTML) ✅</span></span>
|
|
<span class="line"><span>Phase 4: Tier B ██████████ 100% (ds-chip→OsBadge✅, ds-tag→OsBadge✅, ds-grid✅, ds-number→OsNumber✅, ds-radio→HTML✅)</span></span>
|
|
<span class="line"><span>Phase 4: Tier B ██████████ 100% (Chip→OsBadge, Tag→OsBadge, Grid→HTML, Number→OsNumber, Radio→HTML, Table→HTML) ✅</span></span>
|
|
<span class="line"><span>Phase 4: Tier 2+ ██████████ 100% (OsModal✅, ds-form✅, OcelotInput✅, OcelotSelect✅, OsMenu/OsMenuItem✅) | 0 ds-* Tags verbleibend ✅</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><h3 id="statistiken" tabindex="-1"><a class="header-anchor" href="#statistiken"><span>Statistiken</span></a></h3><table><thead><tr><th>Metrik</th><th>Wert</th></tr></thead><tbody><tr><td>Webapp Komponenten</td><td>139</td></tr><tr><td>Styleguide Komponenten</td><td>38 (23 in Webapp genutzt)</td></tr><tr><td><strong>Gesamt</strong></td><td><strong>177</strong></td></tr><tr><td>✅ UI-Library</td><td>OsButton, OsIcon, OsSpinner, OsCard, OsBadge, OsNumber (6)</td></tr><tr><td>✅ → Plain HTML</td><td>Section, Placeholder, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem, Grid, GridItem, Table (13)</td></tr><tr><td>✅ → OsBadge</td><td>Chip (20 Nutzungen → OsBadge), Tag (3 → OsBadge shape="square")</td></tr><tr><td>✅ → OsNumber</td><td>Number (5 Nutzungen → OsNumber, CountTo.vue gelöscht, vue-count-to entfernt)</td></tr><tr><td>✅ → Plain HTML</td><td>Radio (1 Datei → native <code><input type="radio"></code> in ReportModal)</td></tr><tr><td>✅ → OsModal</td><td>Modal (7 Nutzungen → OsModal, Focus-Trap, Scroll-Lock, A11y)</td></tr><tr><td>✅ ds-input → OcelotInput</td><td>Input (23 Dateien → OcelotInput Webapp-Komponente, lokale Imports, formValidation-kompatibel)</td></tr><tr><td>✅ ds-form entkoppelt</td><td>Form-Validierung → formValidation Mixin (async-validator), vuelidate entfernt</td></tr><tr><td>✅ ds-select → OcelotSelect</td><td>Select (3 Dateien → OcelotSelect Webapp-Komponente, lokale Imports, click-outside inline)</td></tr><tr><td>✅ → OsMenu/OsMenuItem</td><td>Menu, MenuItem (17 Nutzungen → packages/ui, dropdown Prop, eigene CSS)</td></tr><tr><td>⬜ Nicht in Webapp</td><td>Code, CopyField, FormItem, InputError, InputLabel, Page, PageTitle, Logo, Avatar, TableCol, TableHeadCol (11)</td></tr><tr><td>❌ Nicht geplant</td><td>OsLocaleSwitch — bricht Props-Only-Philosophie oder ist nur OsMenu-Wrapper (siehe Entscheidung unten)</td></tr><tr><td>✅ Maintenance entkoppelt</td><td>Eigenständiges Nuxt 4-Projekt unter <code>maintenance/</code> — nutzt OsButton, OsIcon, OsCard aus packages/ui</td></tr></tbody></table><h3 id="architektur-entscheidungen" tabindex="-1"><a class="header-anchor" href="#architektur-entscheidungen"><span>Architektur-Entscheidungen</span></a></h3><p><strong>OsLocaleSwitch: Nicht in packages/ui</strong> (Session 34, 2026-03-27)</p><p>Evaluiert und abgelehnt. Eine LocaleSwitch-Komponente in der UI-Library würde entweder:</p><ol><li>Die Props-Only-Philosophie brechen (i18n-Logik, Sprachnamen, Cookie-Handling eingebaut)</li><li>Oder nur ein triviales OsMenu-Wrapper sein (kein Mehrwert)</li></ol><p>Stattdessen: Jede App baut ihre eigene LocaleSwitch mit UI-Library-Komponenten + app-spezifischer Logik.</p><p><strong>Maintenance-App: Entkopplung umgesetzt ✅</strong> (Session 35, 2026-03-28)</p><p>Die Maintenance-App ist jetzt ein eigenständiges Nuxt 4-Projekt unter <code>maintenance/</code>:</p><ul><li>Eigene LocaleSwitch: OsButton (ghost/circle) + OsIcon (language) + floating-vue VDropdown</li><li>@nuxtjs/i18n v10 mit 11 Sprachen, eigene Locale-Dateien</li><li>Abhängigkeiten: @ocelot-social/ui, @nuxtjs/i18n, floating-vue, Tailwind CSS v4</li><li>Kein Vuex, kein Apollo, kein v-tooltip — <strong>vollständig von Webapp entkoppelt</strong></li><li>Docker + nginx für statisches Hosting</li><li><strong>Validiert packages/ui als echten Shared Layer</strong> (erster externer Consumer)</li></ul><h3 id="osbutton-migration-phase-3-✅" tabindex="-1"><a class="header-anchor" href="#osbutton-migration-phase-3-✅"><span>OsButton Migration (Phase 3) ✅</span></a></h3><p><strong>133 Buttons migriert in 79 Dateien ✅</strong> — BaseButton.vue gelöscht, base-components.js Plugin entfernt.</p><p><strong>Erkenntnisse aus der Migration:</strong></p><ul><li><code>type="submit"</code> muss explizit gesetzt werden (OsButton Default: <code>type="button"</code>)</li><li><code>formErrors</code> ist ein Objekt → <code>!!formErrors</code> für Boolean-Cast bei <code>:disabled</code></li><li>CSS <code>.base-button</code> Selektoren → <code>> button</code> oder <code>button</code></li><li>Filter-Buttons nutzen <code>:appearance="condition ? 'filled' : 'outline'"</code> Pattern</li><li>Circle-Buttons mit Icon: <code><template #icon><os-icon :icon="..." /></template></code></li></ul><hr><h2 id="styleguide-komponenten-38" tabindex="-1"><a class="header-anchor" href="#styleguide-komponenten-38"><span>Styleguide Komponenten (38)</span></a></h2><blockquote><p>Quelle: <code>../../styleguide/src/system/components/</code> Live: http://styleguide.ocelot.social/</p></blockquote><h3 id="data-display" tabindex="-1"><a class="header-anchor" href="#data-display"><span>Data Display</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>1</td><td>Avatar</td><td>⬜ Nicht genutzt</td><td>Webapp nutzt eigenes ProfileAvatar</td></tr><tr><td>2</td><td>Card</td><td>✅ UI-Library</td><td>→ OsCard (BaseCard gelöscht)</td></tr><tr><td>3</td><td>Chip</td><td>✅ UI-Library</td><td>→ OsBadge (20 Nutzungen in 5 Dateien)</td></tr><tr><td>4</td><td>Code</td><td>⬜ Nicht genutzt</td><td>Nicht in Webapp verwendet</td></tr><tr><td>5</td><td>Icon</td><td>✅ UI-Library</td><td>→ OsIcon (BaseIcon gelöscht, 82 Ocelot-Icons)</td></tr><tr><td>6</td><td>Number</td><td>✅ UI-Library</td><td>→ OsNumber (5 Dateien, CountTo.vue gelöscht, vue-count-to entfernt)</td></tr><tr><td>7</td><td>Placeholder</td><td>✅ → HTML</td><td>Tier A: <code><div class="ds-placeholder"></code></td></tr><tr><td>8</td><td>Spinner</td><td>✅ UI-Library</td><td>→ OsSpinner (LoadingSpinner gelöscht)</td></tr><tr><td>9</td><td>Table</td><td>✅ → HTML</td><td>7 Dateien → Plain HTML <code><table></code> + CSS-Klassen (kein OsTable nötig)</td></tr><tr><td>10</td><td>TableCol</td><td>✅ → HTML</td><td>Ersetzt durch native <code><td class="ds-table-col"></code></td></tr><tr><td>11</td><td>TableHeadCol</td><td>✅ → HTML</td><td>Ersetzt durch native <code><th class="ds-table-head-col"></code></td></tr><tr><td>12</td><td>Tag</td><td>✅ UI-Library</td><td>→ OsBadge shape="square" (3 Nutzungen in 3 Dateien)</td></tr></tbody></table><h3 id="data-input" tabindex="-1"><a class="header-anchor" href="#data-input"><span>Data Input</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>13</td><td>Button</td><td>✅ UI-Library</td><td>→ OsButton (133 Buttons in 79 Dateien, BaseButton gelöscht)</td></tr><tr><td>14</td><td>CopyField</td><td>⬜ Nicht genutzt</td><td>Nicht in Webapp verwendet</td></tr><tr><td>15</td><td>Form</td><td>⬜ Offen</td><td>18 Dateien — HTML <code><form></code> oder OsForm?</td></tr><tr><td>16</td><td>FormItem</td><td>⬜ Nicht genutzt</td><td>Nicht in Webapp verwendet</td></tr><tr><td>17</td><td>Input</td><td>✅ → OcelotInput</td><td>23 Dateien → OcelotInput (Webapp-Komponente, FormItem/Label/Error vereint)</td></tr><tr><td>18</td><td>InputError</td><td>✅ → OcelotInput</td><td>In OcelotInput integriert</td></tr><tr><td>19</td><td>InputLabel</td><td>✅ → OcelotInput</td><td>In OcelotInput integriert</td></tr><tr><td>20</td><td>Radio</td><td>✅ → HTML</td><td>1 Datei → native <code><input type="radio"></code> + <code><fieldset></code> (ReportModal)</td></tr><tr><td>21</td><td>Select</td><td>✅ → OcelotSelect</td><td>3 Dateien → OcelotSelect (Webapp-Komponente, click-outside inline)</td></tr></tbody></table><h3 id="layout" tabindex="-1"><a class="header-anchor" href="#layout"><span>Layout</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>22</td><td>Container</td><td>✅ → HTML</td><td>Tier A: <code><div class="ds-container ds-container-{width}"></code></td></tr><tr><td>23</td><td>Flex</td><td>✅ → HTML</td><td>Tier A: Plain HTML + CSS @media Queries</td></tr><tr><td>24</td><td>FlexItem</td><td>✅ → HTML</td><td>Tier A: Plain HTML + CSS @media Queries</td></tr><tr><td>25</td><td>Grid</td><td>✅ → HTML</td><td>2 Dateien → CSS Grid (class="ds-grid")</td></tr><tr><td>26</td><td>GridItem</td><td>✅ → HTML</td><td>8 Dateien → CSS Grid</td></tr><tr><td>27</td><td>Modal</td><td>✅ Tier 2</td><td>→ OsModal (h() Render, Focus-Trap, Scroll-Lock, A11y; ConfirmModal + ReportModal nutzen OsModal)</td></tr><tr><td>28</td><td>Page</td><td>⬜ Nicht genutzt</td><td>Nicht direkt in Webapp verwendet</td></tr><tr><td>29</td><td>PageTitle</td><td>⬜ Nicht genutzt</td><td>Nicht direkt in Webapp verwendet</td></tr><tr><td>30</td><td>Section</td><td>✅ → HTML</td><td>Tier A: <code><section class="ds-section"></code></td></tr><tr><td>31</td><td>Space</td><td>✅ → HTML</td><td>Tier A: <code><div class="ds-mb-{size}"></code> / <code><div class="ds-my-{size}"></code></td></tr></tbody></table><h3 id="navigation" tabindex="-1"><a class="header-anchor" href="#navigation"><span>Navigation</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>32</td><td>List</td><td>✅ → HTML</td><td>Tier A: <code><ul class="ds-list"></code></td></tr><tr><td>33</td><td>ListItem</td><td>✅ → HTML</td><td>Tier A: <code><li class="ds-list-item"></code></td></tr><tr><td>34</td><td>Logo</td><td>⬜ Nicht genutzt</td><td>Webapp nutzt eigenes Logo</td></tr><tr><td>35</td><td>Menu</td><td>✅ UI-Library</td><td>11 Dateien → OsMenu (packages/ui, dropdown Prop)</td></tr><tr><td>36</td><td>MenuItem</td><td>✅ UI-Library</td><td>6 Dateien → OsMenuItem (packages/ui)</td></tr></tbody></table><h3 id="typography" tabindex="-1"><a class="header-anchor" href="#typography"><span>Typography</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td>37</td><td>Heading</td><td>✅ → HTML</td><td>Tier A: <code><h1-h4 class="ds-heading ds-heading-h{n}"></code></td></tr><tr><td>38</td><td>Text</td><td>✅ → HTML</td><td>Tier A: <code><p class="ds-text ds-text-{color}"></code></td></tr></tbody></table><hr><h2 id="webapp-komponenten-139" tabindex="-1"><a class="header-anchor" href="#webapp-komponenten-139"><span>Webapp Komponenten (139)</span></a></h2><blockquote><p>Quelle: <code>../../webapp/components/</code></p></blockquote><h3 id="status-legende" tabindex="-1"><a class="header-anchor" href="#status-legende"><span>Status-Legende</span></a></h3><ul><li>⬜ Ausstehend</li><li>⏳ In Arbeit</li><li>✅ Analysiert</li><li>🔗 Duplikat (siehe Notizen)</li><li>⛔ Nicht migrieren (veraltet/ungenutzt)</li><li>🔄 Konsolidieren (mit anderen zusammenführen)</li></ul><h3 id="a-b" tabindex="-1"><a class="header-anchor" href="#a-b"><span>A-B</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>1</td><td>ActionButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr><tr><td>2</td><td>ActionRadiusSelect</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td></td></tr><tr><td>3</td><td>AddChatRoomByUserSearch</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Chat-spezifisch</td></tr><tr><td>4</td><td>AddGroupMember</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Group-spezifisch</td></tr><tr><td>5</td><td>AvatarMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Avatar + Menu</td><td></td></tr><tr><td>6</td><td>AvatarUploader</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td></td></tr><tr><td>7</td><td>BadgeSelection</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td></td></tr><tr><td>8</td><td>Badges</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>9</td><td>BadgesSection</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>10</td><td><s>BaseButton</s></td><td>✅ Gelöscht</td><td>Button</td><td>Button</td><td>→ OsButton (133 Buttons, Komponente gelöscht)</td></tr><tr><td>11</td><td><s>BaseCard</s></td><td>✅ Gelöscht</td><td>Layout</td><td>Card</td><td>→ OsCard (~30 Dateien, Komponente gelöscht)</td></tr><tr><td>12</td><td><s>BaseIcon</s></td><td>✅ Gelöscht</td><td>Display</td><td>Icon</td><td>→ OsIcon (131 Nutzungen, Komponente gelöscht)</td></tr></tbody></table><h3 id="c" tabindex="-1"><a class="header-anchor" href="#c"><span>C</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>13</td><td>CategoriesFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr><tr><td>14</td><td>CategoriesMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>15</td><td>CategoriesSelect</td><td>✅ Migriert</td><td>Input</td><td>Select</td><td>Buttons → OsButton (icon)</td></tr><tr><td>16</td><td>ChangePassword</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth-spezifisch</td></tr><tr><td>17</td><td>Change</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>18</td><td>Chat</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Chat-spezifisch</td></tr><tr><td>19</td><td>ChatNotificationMenu</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Chat-spezifisch</td></tr><tr><td>20</td><td>CommentCard</td><td>✅ Migriert</td><td>Display</td><td>Card</td><td>Buttons → OsButton, BaseCard → OsCard</td></tr><tr><td>21</td><td>CommentForm</td><td>⬜ Ausstehend</td><td>Input</td><td>Form</td><td></td></tr><tr><td>22</td><td>CommentList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>23</td><td>ComponentSlider</td><td>⬜ Ausstehend</td><td>Layout</td><td></td><td></td></tr><tr><td>24</td><td>ConfirmModal</td><td>⬜ Ausstehend</td><td>Feedback</td><td>Modal</td><td>🔄 Modal-Familie</td></tr><tr><td>25</td><td>ContentMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>26</td><td>ContentViewer</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>27</td><td>ContextMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>28</td><td>ContributionForm</td><td>✅ Migriert</td><td>Feature</td><td>Form</td><td>Buttons → OsButton, ds-* → HTML</td></tr><tr><td>29</td><td>CounterIcon</td><td>⬜ Ausstehend</td><td>Display</td><td>Icon</td><td></td></tr><tr><td>30</td><td><s>CountTo</s></td><td>✅ Gelöscht</td><td>Display</td><td>Number</td><td>→ OsNumber (Animation eingebaut, vue-count-to entfernt)</td></tr><tr><td>31</td><td>CreateInvitation</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>32</td><td>CtaJoinLeaveGroup</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr><tr><td>33</td><td>CtaUnblockAuthor</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton (icon, as="nuxt-link")</td></tr><tr><td>34</td><td>CustomButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr></tbody></table><h3 id="d-e" tabindex="-1"><a class="header-anchor" href="#d-e"><span>D-E</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>35</td><td>DateTimeRange</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td></td></tr><tr><td>36</td><td>DeleteData</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>37</td><td>DeleteUserModal</td><td>✅ Migriert</td><td>Feedback</td><td>Modal</td><td>🔄 Modal-Familie, Buttons → OsButton</td></tr><tr><td>38</td><td>DisableModal</td><td>✅ Migriert</td><td>Feedback</td><td>Modal</td><td>🔄 Modal-Familie, Buttons → OsButton</td></tr><tr><td>39</td><td>DonationInfo</td><td>✅ Migriert</td><td>Display</td><td></td><td>Button → OsButton</td></tr><tr><td>40</td><td>Dropdown</td><td>⬜ Ausstehend</td><td>Input</td><td>Select</td><td></td></tr><tr><td>41</td><td>DropdownFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td>Select</td><td></td></tr><tr><td>42</td><td>Editor</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td>Rich-Text</td></tr><tr><td>43</td><td>EmailDisplayAndVerify</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>44</td><td>EmbedComponent</td><td>✅ Migriert</td><td>Display</td><td></td><td>Buttons → OsButton</td></tr><tr><td>45</td><td>EmotionButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>46</td><td>Emotions</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>47</td><td>Empty</td><td>⬜ Ausstehend</td><td>Feedback</td><td>Placeholder</td><td></td></tr><tr><td>48</td><td>EnterNonce</td><td>✅ Migriert</td><td>Feature</td><td></td><td>Auth, Submit → OsButton</td></tr></tbody></table><h3 id="f-g" tabindex="-1"><a class="header-anchor" href="#f-g"><span>F-G</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>49</td><td>EventsByFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr><tr><td>50</td><td>FiledReportsTable</td><td>⬜ Ausstehend</td><td>Display</td><td>Table</td><td></td></tr><tr><td>51</td><td>FilterMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>52</td><td>FilterMenuComponent</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>53</td><td>FilterMenuSection</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>54</td><td>FollowButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>55</td><td>FollowingFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr><tr><td>56</td><td>FollowList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>57</td><td>GroupButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>58</td><td>GroupContentMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>59</td><td>GroupForm</td><td>✅ Migriert</td><td>Input</td><td>Form</td><td>Buttons → OsButton</td></tr><tr><td>60</td><td>GroupLink</td><td>⬜ Ausstehend</td><td>Navigation</td><td></td><td></td></tr><tr><td>61</td><td>GroupList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>62</td><td>GroupMember</td><td>✅ Migriert</td><td>Display</td><td></td><td>Button → OsButton</td></tr><tr><td>63</td><td>GroupTeaser</td><td>⬜ Ausstehend</td><td>Display</td><td>Card</td><td></td></tr></tbody></table><h3 id="h-l" tabindex="-1"><a class="header-anchor" href="#h-l"><span>H-L</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>64</td><td>Hashtag</td><td>✅ Migriert</td><td>Display</td><td>Tag/Chip</td><td>🔄 nutzt OsBadge shape="square"</td></tr><tr><td>65</td><td>HashtagsFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr><tr><td>66</td><td>HeaderButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr><tr><td>67</td><td>HeaderMenu</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>68</td><td>ImageUploader</td><td>✅ Migriert</td><td>Input</td><td></td><td>Crop-Buttons → OsButton, Spinner → OsSpinner</td></tr><tr><td>69</td><td>index</td><td>⬜ Ausstehend</td><td>?</td><td></td><td>Prüfen</td></tr><tr><td>70</td><td>InternalPage</td><td>⬜ Ausstehend</td><td>Layout</td><td>Page</td><td></td></tr><tr><td>71</td><td>Invitation</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>72</td><td>InvitationList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>73</td><td>InviteButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>74</td><td>JoinLeaveButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>75</td><td>LabeledButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr><tr><td>76</td><td>LinkInput</td><td>⬜ Ausstehend</td><td>Input</td><td>Input</td><td></td></tr><tr><td>77</td><td><s>LoadingSpinner</s></td><td>✅ Gelöscht</td><td>Feedback</td><td>Spinner</td><td>→ OsSpinner (Komponente gelöscht)</td></tr><tr><td>78</td><td>LocaleSwitch</td><td>⬜ Ausstehend</td><td>Navigation</td><td></td><td></td></tr><tr><td>79</td><td>LocationInfo</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>80</td><td>LocationSelect</td><td>✅ Migriert</td><td>Input</td><td>Select</td><td>Close-Button → OsButton (icon)</td></tr><tr><td>81</td><td>LocationTeaser</td><td>⬜ Ausstehend</td><td>Display</td><td>Card</td><td></td></tr><tr><td>82</td><td>LoginButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>83</td><td>LoginForm</td><td>⬜ Ausstehend</td><td>Feature</td><td>Form</td><td>Auth</td></tr><tr><td>84</td><td>Logo</td><td>⬜ Ausstehend</td><td>Display</td><td>Logo</td><td>🔗 DUPLIKAT (noch ungelöst)</td></tr></tbody></table><h3 id="m-o" tabindex="-1"><a class="header-anchor" href="#m-o"><span>M-O</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>85</td><td>MapButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>86</td><td>MapStylesButtons</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Button → OsButton</td></tr><tr><td>87</td><td>MasonryGrid</td><td>⬜ Ausstehend</td><td>Layout</td><td>Grid</td><td></td></tr><tr><td>88</td><td>MasonryGridItem</td><td>⬜ Ausstehend</td><td>Layout</td><td>GridItem</td><td></td></tr><tr><td>89</td><td>MenuBar</td><td>⬜ Ausstehend</td><td>Navigation</td><td>Menu</td><td></td></tr><tr><td>90</td><td>MenuBarButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>🔄 Button-Familie, nutzt OsButton</td></tr><tr><td>91</td><td>MenuLegend</td><td>⬜ Ausstehend</td><td>Navigation</td><td></td><td></td></tr><tr><td>92</td><td>Modal</td><td>⬜ Ausstehend</td><td>Feedback</td><td>Modal</td><td>🔗 DUPLIKAT</td></tr><tr><td>93</td><td>MySomethingList</td><td>✅ Migriert</td><td>Display</td><td>List</td><td>Buttons → OsButton</td></tr><tr><td>94</td><td>NotificationMenu</td><td>✅ Migriert</td><td>Navigation</td><td>Menu</td><td>Buttons → OsButton</td></tr><tr><td>95</td><td>NotificationsTable</td><td>⬜ Ausstehend</td><td>Display</td><td>Table</td><td></td></tr><tr><td>96</td><td>ObserveButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>97</td><td>OrderByFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr></tbody></table><h3 id="p-r" tabindex="-1"><a class="header-anchor" href="#p-r"><span>P-R</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>98</td><td>PageFooter</td><td>⬜ Ausstehend</td><td>Layout</td><td></td><td></td></tr><tr><td>99</td><td>PageParamsLink</td><td>⬜ Ausstehend</td><td>Navigation</td><td></td><td></td></tr><tr><td>100</td><td>PaginationButtons</td><td>✅ Migriert</td><td>Navigation</td><td></td><td>2 Buttons → OsButton (icon, circle)</td></tr><tr><td>101</td><td>PostTeaser</td><td>⬜ Ausstehend</td><td>Display</td><td>Card</td><td></td></tr><tr><td>102</td><td>PostTypeFilter</td><td>⬜ Ausstehend</td><td>Filter</td><td></td><td></td></tr><tr><td>103</td><td>ProfileAvatar</td><td>⬜ Ausstehend</td><td>Display</td><td>Avatar</td><td></td></tr><tr><td>104</td><td>ProfileList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>105</td><td>ProgressBar</td><td>⬜ Ausstehend</td><td>Feedback</td><td></td><td></td></tr><tr><td>106</td><td>RegistrationSlideCreate</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>107</td><td>RegistrationSlideEmail</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>108</td><td>RegistrationSlideInvite</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>109</td><td>RegistrationSlideNonce</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>110</td><td>RegistrationSlideNoPublic</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>111</td><td>RegistrationSlider</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>112</td><td>ReleaseModal</td><td>✅ Migriert</td><td>Feedback</td><td>Modal</td><td>🔄 Modal-Familie, Buttons → OsButton</td></tr><tr><td>113</td><td>ReportList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr><tr><td>114</td><td>ReportModal</td><td>⬜ Ausstehend</td><td>Feedback</td><td>Modal</td><td>🔄 Modal-Familie</td></tr><tr><td>115</td><td>ReportRow</td><td>✅ Migriert</td><td>Display</td><td></td><td>More Details → OsButton</td></tr><tr><td>116</td><td>ReportsTable</td><td>⬜ Ausstehend</td><td>Display</td><td>Table</td><td></td></tr><tr><td>117</td><td>Request</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td></td></tr><tr><td>118</td><td>ResponsiveImage</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr></tbody></table><h3 id="s" tabindex="-1"><a class="header-anchor" href="#s"><span>S</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>119</td><td>SearchableInput</td><td>⬜ Ausstehend</td><td>Input</td><td>Input</td><td></td></tr><tr><td>120</td><td>SearchField</td><td>⬜ Ausstehend</td><td>Input</td><td>Input</td><td></td></tr><tr><td>121</td><td>SearchGroup</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Search</td></tr><tr><td>122</td><td>SearchHeading</td><td>⬜ Ausstehend</td><td>Display</td><td>Heading</td><td></td></tr><tr><td>123</td><td>SearchPost</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Search</td></tr><tr><td>124</td><td>SearchResults</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Search</td></tr><tr><td>125</td><td>SelectUserSearch</td><td>⬜ Ausstehend</td><td>Input</td><td>Select</td><td></td></tr><tr><td>126</td><td>ShoutButton</td><td>✅ Migriert</td><td>Button</td><td>Button</td><td>Nutzt OsButton intern</td></tr><tr><td>127</td><td>ShowPassword</td><td>⬜ Ausstehend</td><td>Input</td><td></td><td></td></tr><tr><td>128</td><td>Signup</td><td>⬜ Ausstehend</td><td>Feature</td><td></td><td>Auth</td></tr><tr><td>129</td><td>SocialMedia</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>130</td><td>SocialMediaListItem</td><td>⬜ Ausstehend</td><td>Display</td><td>ListItem</td><td></td></tr><tr><td>131</td><td>Strength</td><td>⬜ Ausstehend</td><td>Feedback</td><td></td><td>Password</td></tr><tr><td>132</td><td>SuggestionList</td><td>⬜ Ausstehend</td><td>Display</td><td>List</td><td></td></tr></tbody></table><h3 id="t-z" tabindex="-1"><a class="header-anchor" href="#t-z"><span>T-Z</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th><th>Kategorie</th><th>Styleguide-Pendant</th><th>Notizen</th></tr></thead><tbody><tr><td>133</td><td>TabNavigation</td><td>⬜ Ausstehend</td><td>Navigation</td><td></td><td></td></tr><tr><td>134</td><td>UserTeaser</td><td>⬜ Ausstehend</td><td>Display</td><td>Card</td><td></td></tr><tr><td>135</td><td>UserTeaserHelper</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>136</td><td>UserTeaserNonAnonymous</td><td>⬜ Ausstehend</td><td>Display</td><td></td><td></td></tr><tr><td>137</td><td>UserTeaserPopover</td><td>✅ Migriert</td><td>Display</td><td></td><td>Button → OsButton</td></tr></tbody></table><hr><h2 id="identifizierte-duplikate-konsolidierung" tabindex="-1"><a class="header-anchor" href="#identifizierte-duplikate-konsolidierung"><span>Identifizierte Duplikate & Konsolidierung</span></a></h2><h3 id="direkte-duplikate-webapp-↔-styleguide" tabindex="-1"><a class="header-anchor" href="#direkte-duplikate-webapp-↔-styleguide"><span>Direkte Duplikate (Webapp ↔ Styleguide)</span></a></h3><table><thead><tr><th>Webapp</th><th>Styleguide</th><th>Aktion</th><th>Status</th></tr></thead><tbody><tr><td>Logo</td><td>Logo</td><td>Konsolidieren zu OsLogo</td><td>⬜ Ausstehend</td></tr><tr><td>Modal</td><td>Modal</td><td>Konsolidieren zu OsModal</td><td>✅ Erledigt</td></tr><tr><td><s>BaseCard</s></td><td>Card</td><td>→ OsCard</td><td>✅ Erledigt (BaseCard gelöscht)</td></tr><tr><td><s>BaseIcon</s></td><td>Icon</td><td>→ OsIcon</td><td>✅ Erledigt (BaseIcon gelöscht)</td></tr><tr><td><s>LoadingSpinner</s></td><td>Spinner</td><td>→ OsSpinner</td><td>✅ Erledigt (LoadingSpinner gelöscht)</td></tr></tbody></table><h3 id="button-familie-✅-alle-nutzen-osbutton" tabindex="-1"><a class="header-anchor" href="#button-familie-✅-alle-nutzen-osbutton"><span>Button-Familie ✅ (alle nutzen OsButton)</span></a></h3><table><thead><tr><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td><s>Button (Styleguide)</s></td><td>✅ Ersetzt</td><td>→ OsButton</td></tr><tr><td><s>BaseButton</s></td><td>✅ Gelöscht</td><td>→ OsButton (133 Buttons)</td></tr><tr><td>CustomButton</td><td>✅ Nutzt OsButton</td><td>Feature-Wrapper</td></tr><tr><td>ActionButton</td><td>✅ Nutzt OsButton</td><td>Feature-Wrapper</td></tr><tr><td>HeaderButton</td><td>✅ Nutzt OsButton</td><td>Feature-Wrapper</td></tr><tr><td>LabeledButton</td><td>✅ Nutzt OsButton</td><td>Feature-Wrapper</td></tr><tr><td>MenuBarButton</td><td>✅ Nutzt OsButton</td><td>Feature-Wrapper</td></tr><tr><td>FollowButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>GroupButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>InviteButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>LoginButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>EmotionButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>JoinLeaveButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>MapButton</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>MapStylesButtons</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>PaginationButtons</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>CtaJoinLeaveGroup</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr><tr><td>CtaUnblockAuthor</td><td>✅ Nutzt OsButton</td><td>Feature-spezifisch</td></tr></tbody></table><h3 id="modal-familie-✅-alle-nutzen-osmodal" tabindex="-1"><a class="header-anchor" href="#modal-familie-✅-alle-nutzen-osmodal"><span>Modal-Familie ✅ (alle nutzen OsModal)</span></a></h3><table><thead><tr><th>Komponente</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td><s>Modal (Styleguide)</s></td><td>✅ Ersetzt</td><td>→ OsModal</td></tr><tr><td><s>Modal (Webapp)</s></td><td>✅ Ersetzt</td><td>→ OsModal</td></tr><tr><td>ConfirmModal</td><td>✅ Nutzt OsModal</td><td>Generischer Confirm-Dialog mit Callbacks</td></tr><tr><td><s>DeleteUserModal</s></td><td>✅ Gelöscht</td><td>→ ConfirmModal</td></tr><tr><td><s>DisableModal</s></td><td>✅ Gelöscht</td><td>→ ConfirmModal</td></tr><tr><td><s>ReleaseModal</s></td><td>✅ Gelöscht</td><td>→ ConfirmModal</td></tr><tr><td>ReportModal</td><td>✅ Nutzt OsModal</td><td>Feature-spezifisch</td></tr></tbody></table><h3 id="menu-familie-zur-konsolidierung" tabindex="-1"><a class="header-anchor" href="#menu-familie-zur-konsolidierung"><span>Menu-Familie (zur Konsolidierung)</span></a></h3><table><thead><tr><th>Komponente</th><th>Beschreibung</th><th>Ziel</th></tr></thead><tbody><tr><td>Menu (Styleguide)</td><td>Basis-Menu</td><td>OsMenu</td></tr><tr><td>MenuItem (Styleguide)</td><td>Menu-Item</td><td>OsMenuItem</td></tr><tr><td>HeaderMenu</td><td>Header-Navigation</td><td>→ OsMenu</td></tr><tr><td>ContentMenu</td><td>Kontext-Menu</td><td>→ OsMenu variant</td></tr><tr><td>ContextMenu</td><td>Kontext-Menu</td><td>→ OsMenu variant</td></tr><tr><td>FilterMenu</td><td>Filter-Menu</td><td>→ OsMenu variant</td></tr><tr><td>NotificationMenu</td><td>Benachrichtigungen</td><td>Feature-spezifisch</td></tr><tr><td>CategoriesMenu</td><td>Kategorien</td><td>Feature-spezifisch</td></tr><tr><td>AvatarMenu</td><td>User-Menu</td><td>Feature-spezifisch</td></tr></tbody></table><hr><h2 id="kategorisierung" tabindex="-1"><a class="header-anchor" href="#kategorisierung"><span>Kategorisierung</span></a></h2><h3 id="basis-komponenten-—-ui-library-✅" tabindex="-1"><a class="header-anchor" href="#basis-komponenten-—-ui-library-✅"><span>Basis-Komponenten — UI-Library ✅</span></a></h3><ul><li><s>Button → OsButton</s> ✅</li><li><s>Card → OsCard</s> ✅</li><li><s>Icon → OsIcon</s> ✅</li><li><s>Spinner → OsSpinner</s> ✅</li></ul><h3 id="basis-komponenten-—-ui-library-ausstehend" tabindex="-1"><a class="header-anchor" href="#basis-komponenten-—-ui-library-ausstehend"><span>Basis-Komponenten — UI-Library (ausstehend)</span></a></h3><ul><li>Modal → OsModal ✅</li><li>Input → OcelotInput (Webapp-Komponente) ✅ — langfristig → OsInput in packages/ui</li><li>Select → OcelotSelect (Webapp-Komponente) ✅ — langfristig → OsSelect in packages/ui</li><li>Menu → OsMenu (packages/ui) ✅</li><li>MenuItem → OsMenuItem (packages/ui) ✅</li><li>Avatar → OsAvatar (falls benötigt)</li></ul><h3 id="layout-typography-—-→-plain-html-✅-tier-a" tabindex="-1"><a class="header-anchor" href="#layout-typography-—-→-plain-html-✅-tier-a"><span>Layout & Typography — → Plain HTML ✅ (Tier A)</span></a></h3><ul><li><s>Container, Flex, FlexItem, Section, Space</s> ✅ → HTML + CSS</li><li><s>Heading, Text, List, ListItem, Placeholder</s> ✅ → HTML + CSS</li><li><s>Chip, Tag</s> ✅ → OsBadge (UI-Library)</li></ul><h3 id="noch-zu-migrieren-tier-b-rest" tabindex="-1"><a class="header-anchor" href="#noch-zu-migrieren-tier-b-rest"><span>Noch zu migrieren (Tier B Rest)</span></a></h3><ul><li>Number (5 Dateien), Radio (1 Datei)</li><li><s>Grid, GridItem</s> ✅ → CSS Grid (Plain HTML)</li></ul><h3 id="feature-komponenten-bleiben-in-webapp" tabindex="-1"><a class="header-anchor" href="#feature-komponenten-bleiben-in-webapp"><span>Feature-Komponenten (bleiben in Webapp)</span></a></h3><ul><li>Chat, Group, Registration, Search, etc.</li></ul><hr><h2 id="analyse-protokoll" tabindex="-1"><a class="header-anchor" href="#analyse-protokoll"><span>Analyse-Protokoll</span></a></h2><table><thead><tr><th>Datum</th><th>Bearbeiter</th><th>Aktion</th><th>Details</th></tr></thead><tbody><tr><td>2026-02-04</td><td>Claude</td><td>Katalog erstellt</td><td>177 Komponenten erfasst</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Duplikate identifiziert</td><td>Button, Modal, Menu Familien</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Button-Analyse</td><td>Props-Vergleich, Konsolidierungsvorschlag, Token-Extraktion</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Modal-Analyse</td><td>Architektur erkannt: DsModal = Basis, Feature-Modals nutzen DsModal</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Menu-Analyse</td><td>DsMenu, Dropdown, Feature-Menus - 3 separate Patterns identifiziert</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Priorisierung</td><td>15 Komponenten in 4 Tiers priorisiert</td></tr><tr><td>2026-02-04</td><td>Claude</td><td>Konsolidierungsplan</td><td>3 Phasen definiert, Token-Liste erstellt</td></tr><tr><td>2026-02-04</td><td>Claude</td><td><strong>Phase 0 abgeschlossen</strong></td><td>Bereit für Phase 2 (Projekt-Setup)</td></tr><tr><td>2026-02-08</td><td>Claude</td><td>OsButton entwickelt</td><td>CVA-Varianten, Vue 2/3 kompatibel via vue-demi</td></tr><tr><td>2026-02-08</td><td>Claude</td><td>Webapp-Integration</td><td>Jest Mock, Docker Build, CI-Kompatibilität</td></tr><tr><td>2026-02-08</td><td>Claude</td><td><strong>16 Buttons migriert</strong></td><td>Alle ohne icon/circle/loading Props, validiert</td></tr><tr><td>2026-02-08</td><td>Claude</td><td>OsButton erweitert</td><td>attrs/listeners Forwarding für Vue 2 ($listeners)</td></tr><tr><td>2026-02-09</td><td>Claude</td><td>Scope erweitert</td><td>~90 Buttons identifiziert (16 migriert, 14 ohne Props, ~60 mit Props)</td></tr><tr><td>2026-02-09</td><td>Claude</td><td><strong>Milestone 4a: 8 Buttons</strong></td><td>DisableModal, DeleteUserModal, ReleaseModal, ContributionForm, EnterNonce, MySomethingList, ImageUploader (2x)</td></tr><tr><td>2026-02-09</td><td>Claude</td><td><strong>Milestone 4a abgeschlossen</strong></td><td>6 weitere: donations, profile (2x), badges, notifications/index, ReportRow</td></tr><tr><td>2026-02-11</td><td>Claude</td><td><strong>M4b: icon + circle</strong></td><td>icon-Slot implementiert, circle-Prop mit CVA</td></tr><tr><td>2026-02-11</td><td>Claude</td><td><strong>9 icon-Buttons migriert (M4c)</strong></td><td>DisableModal, DeleteUserModal, CtaUnblockAuthor, LocationSelect, CategoriesSelect, my-email-address, profile Chat, PaginationButtons (2x circle)</td></tr><tr><td>2026-02-11→18</td><td>Claude</td><td><strong>Sessions 12-26</strong></td><td>OsButton M4c abgeschlossen, OsIcon, OsSpinner, OsCard implementiert + Webapp-Migration, BaseButton/BaseCard/BaseIcon/LoadingSpinner gelöscht</td></tr><tr><td>2026-02-19</td><td>Claude</td><td><strong>Tier A Migration</strong></td><td>10 ds-* Vue-Wrapper → Plain HTML + CSS, _ds-compat.scss, ~450 Nutzungen in ~90 Dateien</td></tr><tr><td>2026-02-19</td><td>Claude</td><td><strong>Katalog konsolidiert</strong></td><td>Styleguide- und Webapp-Tabellen aktualisiert, veraltete Status korrigiert</td></tr><tr><td>2026-03-23</td><td>Claude</td><td><strong>ds-input → OcelotInput</strong></td><td>23 Dateien migriert, Webapp-Komponente mit lokalen Imports (tree-shakeable), FormItem/Label/Error vereint</td></tr><tr><td>2026-03-23</td><td>Claude</td><td><strong>ds-select → OcelotSelect</strong></td><td>3 Dateien migriert, Webapp-Komponente, DsSelect+inputMixin+multiinputMixin vereint, Form-Kopplung entfernt, DsChip→OsBadge, DsSpinner→OsSpinner, click-outside inline</td></tr><tr><td>2026-03-23</td><td>Claude</td><td><strong>ds-menu → OsMenu/OsMenuItem</strong></td><td>packages/ui Komponenten mit h() Render, vue-demi, provide/inject, dropdown Prop, eigene CSS in index.css. 17 Nutzungen in 11 Dateien migriert. Vite-Build: ui.css in style.css integriert. Action-Menüs nutzen <code><a></code> statt router-link. 0 ds-* Tags verbleibend in Webapp.</td></tr></tbody></table><hr><h2 id="nachste-schritte" tabindex="-1"><a class="header-anchor" href="#nachste-schritte"><span>Nächste Schritte</span></a></h2><h3 id="phase-0-analyse-✅" tabindex="-1"><a class="header-anchor" href="#phase-0-analyse-✅"><span>Phase 0: Analyse ✅</span></a></h3><ol><li>[x] Webapp-Komponenten auflisten</li><li>[x] Styleguide-Komponenten auflisten</li><li>[x] Duplikate und Familien identifizieren</li><li>[x] Button/Modal/Menu im Detail analysieren</li><li>[x] Priorisierung und Konsolidierungsplan</li></ol><h3 id="phase-3-osbutton-migration-✅" tabindex="-1"><a class="header-anchor" href="#phase-3-osbutton-migration-✅"><span>Phase 3: OsButton Migration ✅</span></a></h3><ol start="6"><li>[x] OsButton entwickeln (CVA, vue-demi)</li><li>[x] 133 Buttons in 79 Dateien migriert</li><li>[x] BaseButton.vue gelöscht, base-components.js Plugin entfernt</li></ol><h3 id="phase-4-tier-1-—-ui-library-kern-✅" tabindex="-1"><a class="header-anchor" href="#phase-4-tier-1-—-ui-library-kern-✅"><span>Phase 4: Tier 1 — UI-Library Kern ✅</span></a></h3><ol start="9"><li>[x] OsIcon + 82 Ocelot-Icons, BaseIcon gelöscht</li><li>[x] OsSpinner + Webapp-Migration, LoadingSpinner gelöscht</li><li>[x] OsCard + Webapp-Migration, BaseCard gelöscht</li></ol><h3 id="phase-4-tier-a-—-ds-→-plain-html-✅" tabindex="-1"><a class="header-anchor" href="#phase-4-tier-a-—-ds-→-plain-html-✅"><span>Phase 4: Tier A — ds-* → Plain HTML ✅</span></a></h3><ol start="12"><li>[x] _ds-compat.scss Utility-Klassen</li><li>[x] 10 ds-* Wrapper → HTML + CSS (~450 Nutzungen, ~90 Dateien)</li></ol><h3 id="phase-4-tier-b-—-ds-migration-60" tabindex="-1"><a class="header-anchor" href="#phase-4-tier-b-—-ds-migration-60"><span>Phase 4: Tier B — ds-* Migration (60%)</span></a></h3><ol start="14"><li>[x] ds-chip (5 Dateien, 20 Nutzungen) → OsBadge (UI-Library)</li><li>[x] ds-tag (3 Dateien) → OsBadge shape="square" (UI-Library)</li><li>[x] ds-grid / ds-grid-item (10 Dateien) → CSS Grid (Plain HTML)</li><li>[x] ds-number (5 Dateien) → OsNumber (UI-Library) ✅</li><li>[x] ds-radio (1 Datei) → native <code><input type="radio"></code> + <code><fieldset></code> (ReportModal) ✅</li></ol><h3 id="phase-4-tier-2-4-—-ui-library" tabindex="-1"><a class="header-anchor" href="#phase-4-tier-2-4-—-ui-library"><span>Phase 4: Tier 2-4 — UI-Library</span></a></h3><ol start="19"><li>[x] OsModal (h() Render, Focus-Trap, Scroll-Lock, A11y; ConfirmModal + ReportModal nutzen OsModal; DeleteUserModal/DisableModal/ReleaseModal gelöscht) ✅</li><li>[x] ds-form → formValidation Mixin (async-validator), 18 Dateien migriert, vuelidate entfernt ✅</li><li>[x] ds-input → OcelotInput (23 Dateien, Webapp-Komponente mit lokalen Imports, FormItem/Label/Error vereint, formValidation-kompatibel) ✅</li><li>[x] OsMenu / OsMenuItem (packages/ui, 17 Nutzungen in 11 Dateien, dropdown Prop, eigene CSS) ✅</li><li>[x] ds-select → OcelotSelect (3 Dateien, Webapp-Komponente, click-outside inline, DsChip→OsBadge) ✅</li></ol><hr><p><em><em>✅ Phase 0-3 abgeschlossen. Phase 4: Alle ds-</em> Komponenten migriert! Tier 1 ✅, Tier A ✅, Tier B ✅, Tier 2: OsModal ✅, OcelotInput ✅, OcelotSelect ✅, Tier 3: OsMenu/OsMenuItem ✅. 0 ds-</em> Tags in Webapp.**</p><hr><h2 id="detailanalyse-button-familie" tabindex="-1"><a class="header-anchor" href="#detailanalyse-button-familie"><span>Detailanalyse: Button-Familie</span></a></h2><h3 id="styleguide-button-dsbutton" tabindex="-1"><a class="header-anchor" href="#styleguide-button-dsbutton"><span>Styleguide Button (DsButton)</span></a></h3><p><strong>Pfad:</strong> <code>styleguide/src/system/components/navigation/Button/Button.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>path</td><td>String|Object</td><td>null</td><td>URL oder Vue Router Pfad</td></tr><tr><td>size</td><td>String</td><td>null</td><td><code>small</code> | <code>base</code> | <code>large</code></td></tr><tr><td>linkTag</td><td>String</td><td>auto</td><td><code>router-link</code> | <code>a</code> | <code>button</code></td></tr><tr><td>name</td><td>String</td><td>null</td><td>Accessibility name</td></tr><tr><td>primary</td><td>Boolean</td><td>false</td><td>Primärer Stil (grün)</td></tr><tr><td>secondary</td><td>Boolean</td><td>false</td><td>Sekundärer Stil (blau)</td></tr><tr><td>danger</td><td>Boolean</td><td>false</td><td>Danger Stil (rot)</td></tr><tr><td>hover</td><td>Boolean</td><td>false</td><td>Hover-State erzwingen</td></tr><tr><td>ghost</td><td>Boolean</td><td>false</td><td>Transparenter Hintergrund</td></tr><tr><td>icon</td><td>String</td><td>null</td><td>Icon-Name</td></tr><tr><td>right</td><td>Boolean</td><td>false</td><td>Icon rechts positionieren</td></tr><tr><td>fullwidth</td><td>Boolean</td><td>false</td><td>Volle Breite</td></tr><tr><td>loading</td><td>Boolean</td><td>false</td><td>Ladezustand</td></tr></tbody></table><p><strong>Besonderheiten:</strong></p><ul><li>Automatische Link-Erkennung (router-link/a/button)</li><li>Icon-Only Modus wenn kein Slot-Content</li><li>Spinner bei loading</li><li>CSS-Klassen: <code>ds-button</code>, <code>ds-button-primary</code>, etc.</li></ul><hr><h3 id="webapp-basebutton" tabindex="-1"><a class="header-anchor" href="#webapp-basebutton"><span>Webapp BaseButton</span></a></h3><p><strong>Pfad:</strong> <code>webapp/components/_new/generic/BaseButton/BaseButton.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>bullet</td><td>Boolean</td><td>false</td><td>Kleiner runder Punkt (18px)</td></tr><tr><td>circle</td><td>Boolean</td><td>false</td><td>Runder Button</td></tr><tr><td>danger</td><td>Boolean</td><td>false</td><td>Danger-Farbschema</td></tr><tr><td>filled</td><td>Boolean</td><td>false</td><td>Gefüllter Hintergrund</td></tr><tr><td>ghost</td><td>Boolean</td><td>false</td><td>Ohne Border</td></tr><tr><td>icon</td><td>String</td><td>-</td><td>Icon-Name</td></tr><tr><td>loading</td><td>Boolean</td><td>false</td><td>Ladezustand</td></tr><tr><td>size</td><td>String</td><td>'regular'</td><td><code>tiny</code> | <code>small</code> | <code>regular</code> | <code>large</code></td></tr><tr><td>padding</td><td>Boolean</td><td>false</td><td>Extra Padding</td></tr><tr><td>type</td><td>String</td><td>'button'</td><td><code>button</code> | <code>submit</code></td></tr><tr><td>disabled</td><td>Boolean</td><td>false</td><td>Deaktiviert</td></tr></tbody></table><p><strong>Besonderheiten:</strong></p><ul><li>Kein automatischer Link-Support (nur <code><button></code>)</li><li>Nutzt <code>buttonStates</code> Mixin für Farben</li><li>CSS-Klassen: <code>base-button</code>, <code>--filled</code>, <code>--ghost</code>, etc.</li><li>Zusätzliche Größe: <code>tiny</code></li><li>Zusätzliche Form: <code>bullet</code></li></ul><hr><h3 id="vergleich-styleguide-vs-webapp" tabindex="-1"><a class="header-anchor" href="#vergleich-styleguide-vs-webapp"><span>Vergleich: Styleguide vs Webapp</span></a></h3><table><thead><tr><th>Feature</th><th>Styleguide (DsButton)</th><th>Webapp (BaseButton)</th></tr></thead><tbody><tr><td><strong>Sizes</strong></td><td>small, base, large</td><td>tiny, small, regular, large</td></tr><tr><td><strong>Varianten</strong></td><td>primary, secondary, danger</td><td>danger (+ filled)</td></tr><tr><td><strong>Formen</strong></td><td>icon-only (auto)</td><td>circle, bullet, icon-only (auto)</td></tr><tr><td><strong>Ghost</strong></td><td>✅</td><td>✅</td></tr><tr><td><strong>Loading</strong></td><td>✅ Spinner</td><td>✅ LoadingSpinner</td></tr><tr><td><strong>Link-Support</strong></td><td>✅ path prop</td><td>❌</td></tr><tr><td><strong>Fullwidth</strong></td><td>✅</td><td>❌</td></tr><tr><td><strong>Icon-Position</strong></td><td>✅ left/right</td><td>❌ nur links</td></tr><tr><td><strong>Submit-Type</strong></td><td>❌</td><td>✅</td></tr><tr><td><strong>CSS-Prefix</strong></td><td>ds-button</td><td>base-button</td></tr></tbody></table><hr><h3 id="wrapper-komponenten-nutzen-basebutton" tabindex="-1"><a class="header-anchor" href="#wrapper-komponenten-nutzen-basebutton"><span>Wrapper-Komponenten (nutzen BaseButton)</span></a></h3><table><thead><tr><th>Komponente</th><th>Zweck</th><th>Eigene Props</th><th>Migration</th></tr></thead><tbody><tr><td><strong>ActionButton</strong></td><td>Button + Counter Badge</td><td>count, text, icon, filled</td><td>Eigene Komponente behalten</td></tr><tr><td><strong>LabeledButton</strong></td><td>Button + Label darunter</td><td>icon, label, filled</td><td>Eigene Komponente behalten</td></tr><tr><td><strong>HeaderButton</strong></td><td>Filter-Button + Remove</td><td>title, clickButton, titleRemove, clickRemove</td><td>Feature-spezifisch</td></tr><tr><td><strong>MenuBarButton</strong></td><td>Editor-Toolbar</td><td>isActive, icon, label, onClick</td><td>Feature-spezifisch</td></tr><tr><td><strong>CustomButton</strong></td><td>Button mit externem Icon</td><td>settings (Object)</td><td>Feature-spezifisch</td></tr></tbody></table><p><strong>Erkenntnis:</strong> Diese Wrapper fügen Layout/Logik hinzu, nicht Button-Varianten.</p><hr><h3 id="feature-buttons-business-logik-✅" tabindex="-1"><a class="header-anchor" href="#feature-buttons-business-logik-✅"><span>Feature-Buttons (Business-Logik) ✅</span></a></h3><p>Feature-Buttons behalten Business-Logik, nutzen aber intern alle OsButton:</p><table><thead><tr><th>Komponente</th><th>Status</th></tr></thead><tbody><tr><td>FollowButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>GroupButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>InviteButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>LoginButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>ShoutButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>ObserveButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>EmotionButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>JoinLeaveButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>MapButton</td><td>✅ Nutzt OsButton</td></tr><tr><td>MapStylesButtons</td><td>✅ Nutzt OsButton</td></tr><tr><td>PaginationButtons</td><td>✅ Nutzt OsButton</td></tr></tbody></table><hr><h3 id="konsolidierungsvorschlag-osbutton-✅-implementiert" tabindex="-1"><a class="header-anchor" href="#konsolidierungsvorschlag-osbutton-✅-implementiert"><span>Konsolidierungsvorschlag: OsButton ✅ IMPLEMENTIERT</span></a></h3><blockquote><p><strong>Hinweis:</strong> Die tatsächliche API weicht vom ursprünglichen Vorschlag ab. Siehe <code>packages/ui/src/components/OsButton/OsButton.vue</code> für die aktuelle Implementierung.</p></blockquote><p><strong>Implementierte API (CVA-basiert):</strong></p><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;"> '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 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>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> appearance</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;"> 'filled'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'outline'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'ghost'</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // statt separate booleans</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;"> '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 style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // vereinfachte Größen</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 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 style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> as</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;"> 'a'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'nuxt-link'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'router-link'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> Component</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // polymorphes Rendering</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 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:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // Icon: slot-basiert (<template #icon>), nicht prop-basiert</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></div><hr><h3 id="verwendete-design-tokens-tatsachlich-genutzt" tabindex="-1"><a class="header-anchor" href="#verwendete-design-tokens-tatsachlich-genutzt"><span>Verwendete Design-Tokens (tatsächlich genutzt)</span></a></h3><p><strong>Farben:</strong></p><ul><li><code>$color-primary</code>, <code>$color-primary-dark</code>, <code>$color-primary-light</code></li><li><code>$color-danger</code>, <code>$color-danger-dark</code>, <code>$color-danger-light</code></li><li><code>$color-neutral-60</code>, <code>$color-neutral-80</code>, <code>$color-neutral-100</code></li><li><code>$text-color-base</code>, <code>$text-color-primary-inverse</code>, etc.</li><li><code>$background-color-*</code></li></ul><p><strong>Größen:</strong></p><ul><li><code>$size-button-tiny</code>, <code>$size-button-small</code>, <code>$size-button-base</code>, <code>$size-button-large</code></li><li><code>$input-height</code>, <code>$input-height-small</code>, <code>$input-height-large</code>, <code>$input-height-x-large</code></li></ul><p><strong>Spacing:</strong></p><ul><li><code>$space-x-small</code>, <code>$space-xx-small</code>, <code>$space-small</code>, <code>$space-base</code></li></ul><p><strong>Typography:</strong></p><ul><li><code>$font-size-small</code>, <code>$font-size-base</code>, <code>$font-size-large</code></li><li><code>$font-weight-bold</code></li><li><code>$letter-spacing-large</code></li></ul><p><strong>Border:</strong></p><ul><li><code>$border-size-base</code></li><li><code>$border-radius-x-large</code>, <code>$border-radius-base</code>, <code>$border-radius-rounded</code></li></ul><p><strong>Animation:</strong></p><ul><li><code>$duration-short</code></li></ul><hr><h3 id="offene-fragen-✅-alle-gelost" tabindex="-1"><a class="header-anchor" href="#offene-fragen-✅-alle-gelost"><span>Offene Fragen ✅ (alle gelöst)</span></a></h3><ol><li><s>secondary Variante</s> → ✅ Ja, implementiert als <code>variant="secondary"</code></li><li><s>x-large Size</s> → ✅ Implementiert als <code>size="xl"</code></li><li><s>bullet Form</s> → ✅ Nicht übernommen, <code>circle</code> + custom CSS reicht</li></ol><hr><h2 id="detailanalyse-modal-familie" tabindex="-1"><a class="header-anchor" href="#detailanalyse-modal-familie"><span>Detailanalyse: Modal-Familie</span></a></h2><h3 id="architektur-ubersicht" tabindex="-1"><a class="header-anchor" href="#architektur-ubersicht"><span>Architektur-Übersicht</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>┌─────────────────────────────────────────────────────────────┐</span></span>
|
|
<span class="line"><span>│ DsModal (Styleguide) │</span></span>
|
|
<span class="line"><span>│ = Basis-Modal-Komponente │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ ↓ wird genutzt von │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ ConfirmModal, DisableModal, ReportModal, etc. │</span></span>
|
|
<span class="line"><span>│ = Feature-Modals mit Business-Logik │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ ↓ werden gerendert von │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ Modal.vue (Webapp) │</span></span>
|
|
<span class="line"><span>│ = Modal-Manager (Router via Vuex-State) │</span></span>
|
|
<span class="line"><span>└─────────────────────────────────────────────────────────────┘</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><strong>Erkenntnis:</strong> Die Webapp <code>Modal.vue</code> ist <strong>KEIN Duplikat</strong> von DsModal, sondern ein State-basierter Modal-Router.</p><hr><h3 id="styleguide-dsmodal" tabindex="-1"><a class="header-anchor" href="#styleguide-dsmodal"><span>Styleguide DsModal</span></a></h3><p><strong>Pfad:</strong> <code>styleguide/src/system/components/layout/Modal/Modal.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>title</td><td>String</td><td>null</td><td>Modal-Titel</td></tr><tr><td>isOpen</td><td>Boolean</td><td>false</td><td>Geöffnet-Status (v-model)</td></tr><tr><td>force</td><td>Boolean</td><td>false</td><td>Schließen verhindern (kein ESC, kein Backdrop-Click)</td></tr><tr><td>extended</td><td>Boolean</td><td>false</td><td>Breiterer Modal (600px statt 400px)</td></tr><tr><td>cancelLabel</td><td>String</td><td>'Cancel'</td><td>Text für Abbrechen-Button</td></tr><tr><td>confirmLabel</td><td>String</td><td>'Confirm'</td><td>Text für Bestätigen-Button</td></tr></tbody></table><p><strong>Events:</strong></p><ul><li><code>@opened</code> - Modal wurde geöffnet</li><li><code>@cancel</code> - Abbrechen geklickt</li><li><code>@confirm</code> - Bestätigen geklickt</li><li><code>@close</code> - Modal geschlossen (mit type: 'close', 'cancel', 'confirm', 'backdrop')</li><li><code>@update:isOpen</code> - v-model Support</li></ul><p><strong>Slots:</strong></p><ul><li><code>default</code> - Modal-Inhalt</li><li><code>footer</code> - Footer mit Buttons (erhält confirm/cancel Funktionen als Slot-Props)</li></ul><p><strong>Features:</strong></p><ul><li>ESC-Taste zum Schließen</li><li>Backdrop-Click zum Schließen</li><li>Scroll-Lock auf Body</li><li>Animations (fade + scale)</li><li>Nutzt DsCard für Layout</li></ul><hr><h3 id="feature-modals-✅-nutzen-osmodal" tabindex="-1"><a class="header-anchor" href="#feature-modals-✅-nutzen-osmodal"><span>Feature-Modals ✅ (nutzen OsModal)</span></a></h3><table><thead><tr><th>Modal</th><th>Status</th><th>Notizen</th></tr></thead><tbody><tr><td><strong>ConfirmModal</strong></td><td>✅ Nutzt OsModal</td><td>Generischer Confirm-Dialog mit Callbacks, Success-Animation</td></tr><tr><td><s><strong>DisableModal</strong></s></td><td>✅ Gelöscht</td><td>→ ConfirmModal (inline modalData)</td></tr><tr><td><strong>ReportModal</strong></td><td>✅ Nutzt OsModal</td><td>Report-Logik mit Radio-Auswahl</td></tr><tr><td><s><strong>DeleteUserModal</strong></s></td><td>✅ Gelöscht</td><td>→ ConfirmModal (inline modalData)</td></tr><tr><td><s><strong>ReleaseModal</strong></s></td><td>✅ Gelöscht</td><td>→ ConfirmModal (inline modalData)</td></tr></tbody></table><p><strong>Ergebnis:</strong> DsModal vollständig durch OsModal ersetzt. Vuex Modal Store entfernt — Modals werden inline gerendert (v-if + showConfirmModal). DeleteUserModal, DisableModal, ReleaseModal wurden in ConfirmModal konsolidiert.</p><hr><h3 id="webapp-modal-vue-modal-manager-✅-geloscht" tabindex="-1"><a class="header-anchor" href="#webapp-modal-vue-modal-manager-✅-geloscht"><span><s>Webapp Modal.vue (Modal-Manager)</s> ✅ Gelöscht</span></a></h3><p><strong>Vuex Modal Store (<code>store/modal.js</code>) und Modal-Router (<code>components/Modal.vue</code>) wurden entfernt.</strong></p><p>Modals werden jetzt inline gerendert: Jede Komponente hat eigenes <code>showConfirmModal</code>/<code>currentModalData</code> State und rendert <code><confirm-modal v-if="showConfirmModal"></code> direkt.</p><hr><h3 id="konsolidierungsvorschlag-osmodal-✅-implementiert" tabindex="-1"><a class="header-anchor" href="#konsolidierungsvorschlag-osmodal-✅-implementiert"><span><s>Konsolidierungsvorschlag</s> OsModal ✅ (implementiert)</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;"> OsModalProps</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;"> // Basis</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> title</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;"> isOpen</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#E5C07B;"> boolean</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // v-model:open</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;"> // Verhalten</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> persistent</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 style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // = force (Schließen verhindern)</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> closeOnBackdrop</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 style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // Default: true</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> closeOnEsc</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 style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> // Default: true</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</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;"> 'default'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'large'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'fullscreen'</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;"> // Footer</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> showFooter</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;"> cancelLabel</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;"> confirmLabel</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;"> confirmVariant</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;"> 'danger'</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></div><p><strong>Slots:</strong></p><ul><li><code>default</code> - Inhalt</li><li><code>header</code> - Custom Header (ersetzt title)</li><li><code>footer</code> - Custom Footer</li></ul><p><strong>Nicht übernommen:</strong></p><ul><li><code>extended</code> prop → wird zu <code>size="large"</code></li></ul><hr><h3 id="verwendete-design-tokens-tatsachlich-genutzt-1" tabindex="-1"><a class="header-anchor" href="#verwendete-design-tokens-tatsachlich-genutzt-1"><span>Verwendete Design-Tokens (tatsächlich genutzt)</span></a></h3><p><strong>Layout:</strong></p><ul><li><code>$z-index-modal</code> (9999)</li><li><code>$space-base</code>, <code>$space-small</code>, <code>$space-x-small</code>, <code>$space-large</code></li><li><code>$border-radius-x-large</code></li></ul><p><strong>Farben:</strong></p><ul><li><code>$background-color-softer</code> (Footer)</li></ul><p><strong>Shadows:</strong></p><ul><li><code>$box-shadow-x-large</code></li></ul><p><strong>Animation:</strong></p><ul><li><code>$ease-out-bounce</code></li></ul><hr><h2 id="detailanalyse-menu-familie" tabindex="-1"><a class="header-anchor" href="#detailanalyse-menu-familie"><span>Detailanalyse: Menu-Familie</span></a></h2><h3 id="architektur-ubersicht-1" tabindex="-1"><a class="header-anchor" href="#architektur-ubersicht-1"><span>Architektur-Übersicht</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>┌─────────────────────────────────────────────────────────────┐</span></span>
|
|
<span class="line"><span>│ DsMenu / DsMenuItem (Styleguide) │</span></span>
|
|
<span class="line"><span>│ = Routen-basierte Navigationskomponenten │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ ↓ wird genutzt von │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ ContentMenu, GroupContentMenu │</span></span>
|
|
<span class="line"><span>│ = Dropdown + DsMenu für Kontext-Menüs │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ Dropdown (Webapp) │</span></span>
|
|
<span class="line"><span>│ = Eigenständiger Popover-Wrapper (v-popover) │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ HeaderMenu │</span></span>
|
|
<span class="line"><span>│ = Komplexes Layout (DsFlex-basiert), KEIN DsMenu │</span></span>
|
|
<span class="line"><span>├─────────────────────────────────────────────────────────────┤</span></span>
|
|
<span class="line"><span>│ AvatarMenu, NotificationMenu, FilterMenu, etc. │</span></span>
|
|
<span class="line"><span>│ = Feature-spezifische Menüs mit eigener Logik │</span></span>
|
|
<span class="line"><span>└─────────────────────────────────────────────────────────────┘</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><p><strong>Erkenntnis:</strong> DsMenu wird nur für strukturierte Routen-Navigation verwendet. Die meisten Webapp-Menüs sind Feature-spezifisch und bauen eigene Strukturen.</p><hr><h3 id="styleguide-dsmenu" tabindex="-1"><a class="header-anchor" href="#styleguide-dsmenu"><span>Styleguide DsMenu</span></a></h3><p><strong>Pfad:</strong> <code>styleguide/src/system/components/navigation/Menu/Menu.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>routes</td><td>Array</td><td>null</td><td>Array von Route-Objekten</td></tr><tr><td>inverse</td><td>Boolean</td><td>false</td><td>Dunkler Hintergrund</td></tr><tr><td>navbar</td><td>Boolean</td><td>false</td><td>Horizontale Navbar-Darstellung</td></tr><tr><td>linkTag</td><td>String</td><td>'router-link'</td><td>Link-Komponente</td></tr><tr><td>urlParser</td><td>Function</td><td>default</td><td>URL-Parser für Routes</td></tr><tr><td>nameParser</td><td>Function</td><td>default</td><td>Name-Parser für Routes</td></tr><tr><td>matcher</td><td>Function</td><td>default</td><td>Active-State Matcher</td></tr><tr><td>isExact</td><td>Function</td><td>default</td><td>Exact-Match Checker</td></tr></tbody></table><p><strong>Slots:</strong></p><ul><li><code>default</code> - Custom Menu-Items</li><li><code>menuitem</code> (scoped) - Custom MenuItem Template</li></ul><p><strong>Features:</strong></p><ul><li>Automatische URL-Generierung aus Route-Namen</li><li>Submenu-Support via <code>route.children</code></li><li>Active-State Tracking</li></ul><hr><h3 id="styleguide-dsmenuitem" tabindex="-1"><a class="header-anchor" href="#styleguide-dsmenuitem"><span>Styleguide DsMenuItem</span></a></h3><p><strong>Pfad:</strong> <code>styleguide/src/system/components/navigation/Menu/MenuItem.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>route</td><td>Object</td><td>null</td><td>Route-Objekt</td></tr><tr><td>parents</td><td>Array</td><td>[]</td><td>Parent-Routes (für Submenu)</td></tr><tr><td>linkTag</td><td>String</td><td>from parent</td><td>Link-Komponente</td></tr></tbody></table><p><strong>Features:</strong></p><ul><li>Automatische Submenu-Erkennung via <code>route.children</code></li><li>Hover/Click Submenu Toggle (bei navbar)</li><li>Click-Outside zum Schließen</li><li>Level-basierte CSS-Klassen</li></ul><hr><h3 id="webapp-dropdown" tabindex="-1"><a class="header-anchor" href="#webapp-dropdown"><span>Webapp Dropdown</span></a></h3><p><strong>Pfad:</strong> <code>webapp/components/Dropdown.vue</code></p><p><strong>Props:</strong></p><table><thead><tr><th>Prop</th><th>Typ</th><th>Default</th><th>Beschreibung</th></tr></thead><tbody><tr><td>placement</td><td>String</td><td>'bottom-end'</td><td>Popover-Position</td></tr><tr><td>disabled</td><td>Boolean</td><td>false</td><td>Deaktiviert</td></tr><tr><td>offset</td><td>String|Number</td><td>'16'</td><td>Abstand vom Trigger</td></tr><tr><td>noMouseLeaveClosing</td><td>Boolean</td><td>false</td><td>Verhindert Schließen bei Mouse-Leave</td></tr></tbody></table><p><strong>Slot-Props:</strong></p><ul><li><code>toggleMenu()</code> - Toggle Funktion</li><li><code>openMenu()</code> - Öffnen Funktion</li><li><code>closeMenu()</code> - Schließen Funktion</li><li><code>isOpen</code> - Geöffnet-State</li></ul><p><strong>Features:</strong></p><ul><li>Nutzt v-popover</li><li>Hover-Verzögerung (500ms open, 300ms close)</li><li>Body-Class bei Open</li></ul><p><strong>Erkenntnis:</strong> Dies ist das <strong>primäre Dropdown-Pattern</strong> in der Webapp - nicht DsMenu!</p><hr><h3 id="kategorisierung-der-menu-komponenten" tabindex="-1"><a class="header-anchor" href="#kategorisierung-der-menu-komponenten"><span>Kategorisierung der Menu-Komponenten</span></a></h3><table><thead><tr><th>Komponente</th><th>Typ</th><th>Nutzt DsMenu</th><th>Migration</th></tr></thead><tbody><tr><td><strong>ContentMenu</strong></td><td>Kontext-Menü</td><td>✅</td><td>OsDropdown + OsMenu</td></tr><tr><td><strong>GroupContentMenu</strong></td><td>Kontext-Menü</td><td>✅</td><td>OsDropdown + OsMenu</td></tr><tr><td><strong>HeaderMenu</strong></td><td>Layout</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>AvatarMenu</strong></td><td>Feature</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>NotificationMenu</strong></td><td>Feature</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>FilterMenu</strong></td><td>Feature</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>CategoriesMenu</strong></td><td>Feature</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>ChatNotificationMenu</strong></td><td>Feature</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>MenuBar</strong></td><td>Editor</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr><tr><td><strong>ContextMenu</strong> (Editor)</td><td>Editor</td><td>❌</td><td>Bleibt Feature-spezifisch</td></tr></tbody></table><hr><h3 id="konsolidierungsvorschlag" tabindex="-1"><a class="header-anchor" href="#konsolidierungsvorschlag"><span>Konsolidierungsvorschlag</span></a></h3><p><strong>Drei separate Komponenten:</strong></p><ol><li><strong>OsMenu</strong> (für Navigation)</li></ol><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;"> OsMenuProps</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> routes</span><span style="--shiki-light:#0184BC;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> RouteItem</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">[]</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> orientation</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;"> 'vertical'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'horizontal'</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> inverse</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:#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><ol start="2"><li><strong>OsMenuItem</strong> (für Menu-Items)</li></ol><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;"> OsMenuItemProps</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</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 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;"> active</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:#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></div><ol start="3"><li><strong>OsDropdown</strong> (für Popover-Menüs) - <strong>NEU</strong></li></ol><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;"> OsDropdownProps</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> placement</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;"> 'top'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'bottom'</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 style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'top-start'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'top-end'</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;"> |</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> ...</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;"> offset</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;"> number</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;"> closeOnClick</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;"> closeOnOutsideClick</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:#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><p><strong>Erkenntnis:</strong> OsDropdown ist wichtiger als OsMenu, da es häufiger verwendet wird!</p><hr><h3 id="verwendete-design-tokens-tatsachlich-genutzt-2" tabindex="-1"><a class="header-anchor" href="#verwendete-design-tokens-tatsachlich-genutzt-2"><span>Verwendete Design-Tokens (tatsächlich genutzt)</span></a></h3><p><strong>Spacing:</strong></p><ul><li><code>$space-x-small</code>, <code>$space-xx-small</code></li></ul><p><strong>Typography:</strong></p><ul><li>Font-Size via DsText</li></ul><p><strong>Farben:</strong></p><ul><li>Inverse-Modus Farben</li></ul><hr><h2 id="priorisierung-der-komponenten" tabindex="-1"><a class="header-anchor" href="#priorisierung-der-komponenten"><span>Priorisierung der Komponenten</span></a></h2><h3 id="tier-1-kern-komponenten-✅" tabindex="-1"><a class="header-anchor" href="#tier-1-kern-komponenten-✅"><span>Tier 1: Kern-Komponenten ✅</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th></tr></thead><tbody><tr><td>1</td><td><strong>OsButton</strong></td><td>✅ 133 Buttons in 79 Dateien, BaseButton gelöscht</td></tr><tr><td>2</td><td><strong>OsIcon</strong></td><td>✅ 131 Nutzungen, 82 Ocelot-Icons, BaseIcon gelöscht</td></tr><tr><td>3</td><td><strong>OsSpinner</strong></td><td>✅ 4 Spinner migriert, LoadingSpinner gelöscht</td></tr><tr><td>4</td><td><strong>OsCard</strong></td><td>✅ ~30 Dateien, BaseCard gelöscht</td></tr></tbody></table><h3 id="tier-a-triviale-ds-→-plain-html-✅" tabindex="-1"><a class="header-anchor" href="#tier-a-triviale-ds-→-plain-html-✅"><span>Tier A: Triviale ds-* → Plain HTML ✅</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Status</th></tr></thead><tbody><tr><td>—</td><td>ds-section, ds-placeholder, ds-list, ds-list-item</td><td>✅ → HTML-Elemente + CSS-Klassen</td></tr><tr><td>—</td><td>ds-container, ds-heading, ds-text</td><td>✅ → HTML-Elemente + CSS-Klassen</td></tr><tr><td>—</td><td>ds-space</td><td>✅ → div + Margin-Utility-Klassen</td></tr><tr><td>—</td><td>ds-flex, ds-flex-item</td><td>✅ → HTML + CSS @media Queries</td></tr></tbody></table><h3 id="tier-b-einfache-ds-migration-✅" tabindex="-1"><a class="header-anchor" href="#tier-b-einfache-ds-migration-✅"><span>Tier B: Einfache ds-* Migration ✅</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Dateien</th><th>Ziel</th><th>Status</th></tr></thead><tbody><tr><td>5</td><td><strong>OsBadge</strong></td><td>—</td><td>ds-chip (20 Nutzungen, 5 Dateien) + ds-tag (3 Dateien)</td><td>✅</td></tr><tr><td>—</td><td>ds-grid / ds-grid-item</td><td>10</td><td>CSS Grid (Plain HTML)</td><td>✅</td></tr><tr><td>—</td><td>ds-number</td><td>5</td><td>OsNumber (UI-Library)</td><td>✅</td></tr><tr><td>—</td><td>ds-radio</td><td>1</td><td>native <code><input type="radio"></code></td><td>✅</td></tr></tbody></table><h3 id="tier-2-layout-feedback" tabindex="-1"><a class="header-anchor" href="#tier-2-layout-feedback"><span>Tier 2: Layout & Feedback</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Dateien</th><th>Abhängigkeiten</th><th>Status</th></tr></thead><tbody><tr><td>5</td><td><strong>OsModal</strong></td><td>7</td><td>OsButton</td><td>✅</td></tr><tr><td>6</td><td><strong>OsDropdown</strong></td><td>—</td><td>OsButton</td><td>⬜</td></tr><tr><td>7</td><td><strong>OsAvatar</strong></td><td>—</td><td>-</td><td>⬜</td></tr><tr><td>8</td><td><strong>OsInput</strong></td><td>23</td><td>ds-form Kopplung aufgelöst (formValidation Mixin)</td><td>⬜</td></tr></tbody></table><h3 id="tier-3-navigation-ausstehend" tabindex="-1"><a class="header-anchor" href="#tier-3-navigation-ausstehend"><span>Tier 3: Navigation (ausstehend)</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Dateien</th><th>Abhängigkeiten</th></tr></thead><tbody><tr><td>9</td><td><strong>OsMenu</strong></td><td>11</td><td>OsMenuItem</td></tr><tr><td>10</td><td><strong>OsMenuItem</strong></td><td>6</td><td>-</td></tr></tbody></table><h3 id="tier-4-spezial-komponenten-ausstehend" tabindex="-1"><a class="header-anchor" href="#tier-4-spezial-komponenten-ausstehend"><span>Tier 4: Spezial-Komponenten (ausstehend)</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Dateien</th></tr></thead><tbody><tr><td>11</td><td>OsSelect</td><td>3</td></tr><tr><td>12</td><td>OsTable</td><td>7</td></tr><tr><td>13</td><td><s>ds-form</s></td><td>—</td></tr></tbody></table><blockquote><p><strong>Hinweis:</strong> OsHeading, OsText, OsTag sind nicht mehr geplant — wurden zu Plain HTML migriert (Tier A).</p></blockquote><hr><h2 id="finaler-konsolidierungsplan" tabindex="-1"><a class="header-anchor" href="#finaler-konsolidierungsplan"><span>Finaler Konsolidierungsplan</span></a></h2><blockquote><p><strong>Hinweis:</strong> "Tier 1/A/B/2/3/4" bezeichnet die Migrations-Reihenfolge innerhalb von Phase 4.</p></blockquote><h3 id="tier-1-kern-komponenten-✅-1" tabindex="-1"><a class="header-anchor" href="#tier-1-kern-komponenten-✅-1"><span>Tier 1: Kern-Komponenten ✅</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>1. OsIcon ✅ Vereint: DsIcon + BaseIcon → 82 Ocelot-Icons</span></span>
|
|
<span class="line"><span>2. OsSpinner ✅ Vereint: DsSpinner + LoadingSpinner</span></span>
|
|
<span class="line"><span>3. OsButton ✅ Vereint: DsButton + BaseButton → 133 Buttons in 79 Dateien</span></span>
|
|
<span class="line"><span>4. OsCard ✅ Vereint: DsCard + BaseCard → ~30 Dateien</span></span>
|
|
<span class="line"><span>5. OsBadge ✅ Vereint: ds-chip (20 Nutzungen) + ds-tag (3 Dateien)</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><h3 id="tier-a-triviale-ds-wrapper-→-plain-html-✅" tabindex="-1"><a class="header-anchor" href="#tier-a-triviale-ds-wrapper-→-plain-html-✅"><span>Tier A: Triviale ds-* Wrapper → Plain HTML ✅</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>ds-section, ds-placeholder, ds-list, ds-list-item ✅ → HTML + CSS-Klassen</span></span>
|
|
<span class="line"><span>ds-container, ds-heading, ds-text ✅ → HTML + CSS-Klassen</span></span>
|
|
<span class="line"><span>ds-space ✅ → div + Margin-Utilities</span></span>
|
|
<span class="line"><span>ds-flex, ds-flex-item ✅ → HTML + CSS @media Queries</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><h3 id="tier-b-einfache-ds-migration-60" tabindex="-1"><a class="header-anchor" href="#tier-b-einfache-ds-migration-60"><span>Tier B: Einfache ds-* Migration (60%)</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>ds-chip → OsBadge (UI-Library) ✅</span></span>
|
|
<span class="line"><span>ds-tag → OsBadge shape="square" (UI-Library) ✅</span></span>
|
|
<span class="line"><span>ds-grid / ds-grid-item → CSS Grid (HTML) ✅</span></span>
|
|
<span class="line"><span>ds-number → OsNumber (UI-Library) ✅</span></span>
|
|
<span class="line"><span>ds-radio → native <input type="radio"> ✅ (1 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></div><h3 id="tier-2-4-ui-library" tabindex="-1"><a class="header-anchor" href="#tier-2-4-ui-library"><span>Tier 2-4: UI-Library</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>5. OsModal → Basis: DsModal, Feature-Modals bleiben in Webapp ✅</span></span>
|
|
<span class="line"><span>6. OsDropdown → Basis: Dropdown (Webapp) — wichtiger als gedacht!</span></span>
|
|
<span class="line"><span>7. OsAvatar → Vereint: DsAvatar + ProfileAvatar</span></span>
|
|
<span class="line"><span>8. OsInput → Basis: DsInput (ds-form Kopplung aufgelöst via formValidation Mixin)</span></span>
|
|
<span class="line"><span>9. OsMenu → Basis: DsMenu/DsMenuItem</span></span>
|
|
<span class="line"><span>10. OsSelect → Basis: DsSelect</span></span>
|
|
<span class="line"><span>11. OsTable → Basis: DsTable</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><hr><h2 id="erkenntnisse-aus-der-analyse" tabindex="-1"><a class="header-anchor" href="#erkenntnisse-aus-der-analyse"><span>Erkenntnisse aus der Analyse</span></a></h2><h3 id="was-funktioniert-gut" tabindex="-1"><a class="header-anchor" href="#was-funktioniert-gut"><span>Was funktioniert gut:</span></a></h3><ol><li><strong>DsModal als Basis</strong> - Feature-Modals nutzen bereits DsModal → OsModal wird gleich funktionieren</li><li><strong>Dropdown-Pattern</strong> - Funktioniert gut mit v-popover</li><li><strong>Tier A Migration</strong> - 10 ds-* Wrapper durch HTML + CSS ersetzt, kein Funktionsverlust</li></ol><h3 id="was-gelost-wurde-✅" tabindex="-1"><a class="header-anchor" href="#was-gelost-wurde-✅"><span>Was gelöst wurde: ✅</span></a></h3><ol><li><s>Button-Varianten</s> → OsButton mit CVA-Varianten vereinheitlicht</li><li><s>Inkonsistente Naming</s> → os-* Prefix für Library, ds-* CSS-Klassen temporär beibehalten</li><li><s>Doppelte Komponenten</s> → BaseCard, BaseIcon, LoadingSpinner gelöscht (3/5 Duplikate aufgelöst)</li><li><s>Layout-Shift bei ds-flex</s> → CSS @media Queries statt JavaScript window.innerWidth</li></ol><h3 id="noch-offen" tabindex="-1"><a class="header-anchor" href="#noch-offen"><span>Noch offen:</span></a></h3><ol><li><strong>Logo</strong> - Existiert doppelt (Webapp + Styleguide)</li><li><s><strong>Modal</strong> - Existiert doppelt</s> → OsModal migriert ✅</li><li><s><strong>ds-form Kopplung</strong></s> → aufgelöst via formValidation Mixin (async-validator), vuelidate entfernt ✅</li></ol><hr><h2 id="token-extraktion-aus-analyse" tabindex="-1"><a class="header-anchor" href="#token-extraktion-aus-analyse"><span>Token-Extraktion (aus Analyse)</span></a></h2><h3 id="benotigte-design-tokens-fur-phase-1" tabindex="-1"><a class="header-anchor" href="#benotigte-design-tokens-fur-phase-1"><span>Benötigte Design-Tokens für Phase 1</span></a></h3><p><strong>Farben:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" 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:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">// Primär/Sekundär/Danger</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-primary-dark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-primary-light</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-secondary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-secondary-dark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-secondary-light</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-danger</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-danger-dark</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-danger-light</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;">// Neutral</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-neutral-60</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-neutral-80</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-neutral-100</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;">// Semantisch</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$text-color-base</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$text-color-inverse</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$background-color-softer</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$background-color-soft</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$border-color-base</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><p><strong>Größen:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" 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:#E45649;--shiki-dark:#E06C75;">$size-button-tiny</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">24</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$size-button-small</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">32</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$size-button-base</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">40</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$size-button-large</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">48</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</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><strong>Spacing:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" 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:#E45649;--shiki-dark:#E06C75;">$space-xx-small</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$space-x-small</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">8</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$space-small</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">16</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$space-base</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">24</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</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><strong>Border:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" 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:#E45649;--shiki-dark:#E06C75;">$border-size-base</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$border-radius-base</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$border-radius-x-large</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">5</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$border-radius-rounded</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">em</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><strong>Animation:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" 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:#E45649;--shiki-dark:#E06C75;">$duration-short</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0.08</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">s</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p><strong>Z-Index:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" 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:#E45649;--shiki-dark:#E06C75;">$z-index-modal</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">9999</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$z-index-dropdown</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">8888</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><p><strong>Shadows:</strong></p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" 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:#E45649;--shiki-dark:#E06C75;">$box-shadow-x-large</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 15</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 30</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> rgba</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.11</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">), ...</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$box-shadow-small-inset</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#383A42;--shiki-dark:#D19A66;">inset</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#986801;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> rgba</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#E45649;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.05</span><span style="--shiki-light:#E45649;--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><hr><h2 id="phase-3-webapp-integration-tracking" tabindex="-1"><a class="header-anchor" href="#phase-3-webapp-integration-tracking"><span>Phase 3: Webapp-Integration (Tracking)</span></a></h2><h3 id="osbutton-migration-abgeschlossen-133-133-✅" tabindex="-1"><a class="header-anchor" href="#osbutton-migration-abgeschlossen-133-133-✅"><span>OsButton Migration - Abgeschlossen (133/133) ✅</span></a></h3><table><thead><tr><th>#</th><th>Datei</th><th>Button</th><th>Status</th></tr></thead><tbody><tr><td>1</td><td>UserTeaserPopover.vue</td><td>Open Profile</td><td>✅ Migriert</td></tr><tr><td>2</td><td>GroupForm.vue</td><td>Cancel</td><td>✅ Migriert</td></tr><tr><td>3</td><td>EmbedComponent.vue</td><td>Cancel</td><td>✅ Migriert</td></tr><tr><td>4</td><td>EmbedComponent.vue</td><td>Play Now</td><td>✅ Migriert</td></tr><tr><td>5</td><td>DonationInfo.vue</td><td>Donate</td><td>✅ Migriert</td></tr><tr><td>6</td><td>CommentCard.vue</td><td>Show More</td><td>✅ Migriert</td></tr><tr><td>7</td><td>MapStylesButtons.vue</td><td>Style Toggle</td><td>✅ Migriert</td></tr><tr><td>8</td><td>GroupMember.vue</td><td>Remove</td><td>✅ Migriert</td></tr><tr><td>9</td><td>embeds.vue</td><td>Allow All</td><td>✅ Migriert</td></tr><tr><td>10</td><td>embeds.vue</td><td>Deny All</td><td>✅ Migriert</td></tr><tr><td>11</td><td>notifications.vue</td><td>Check All</td><td>✅ Migriert</td></tr><tr><td>12</td><td>notifications.vue</td><td>Uncheck All</td><td>✅ Migriert</td></tr><tr><td>13</td><td>notifications.vue</td><td>Save</td><td>✅ Migriert</td></tr><tr><td>14</td><td>privacy.vue</td><td>Save</td><td>✅ Migriert</td></tr><tr><td>15</td><td>terms-and-conditions-confirm.vue</td><td>Read T&C</td><td>✅ Migriert</td></tr><tr><td>16</td><td>terms-and-conditions-confirm.vue</td><td>Save</td><td>✅ Migriert</td></tr></tbody></table><h3 id="osbutton-migration-alle-milestones-abgeschlossen-✅" tabindex="-1"><a class="header-anchor" href="#osbutton-migration-alle-milestones-abgeschlossen-✅"><span>OsButton Migration - Alle Milestones abgeschlossen ✅</span></a></h3><table><thead><tr><th>Milestone</th><th>Status</th><th>Details</th></tr></thead><tbody><tr><td>M4a: Buttons ohne neue Props</td><td>✅</td><td>14 Buttons (Modals, Forms, Pages)</td></tr><tr><td>M4b: Props implementieren</td><td>✅</td><td>icon (Slot), circle, loading</td></tr><tr><td>M4c: Buttons mit icon/circle/loading</td><td>✅</td><td>Alle verbleibenden Buttons migriert</td></tr></tbody></table><h3 id="osbutton-features-alle-implementiert-✅" tabindex="-1"><a class="header-anchor" href="#osbutton-features-alle-implementiert-✅"><span>OsButton Features - Alle implementiert ✅</span></a></h3><table><thead><tr><th>Feature</th><th>Status</th></tr></thead><tbody><tr><td><code>variant</code> (7 Varianten)</td><td>✅</td></tr><tr><td><code>appearance</code> (filled/outline/ghost)</td><td>✅</td></tr><tr><td><code>size</code> (xs/sm/md/lg/xl)</td><td>✅</td></tr><tr><td><code>icon</code> Slot</td><td>✅</td></tr><tr><td><code>circle</code> Prop</td><td>✅</td></tr><tr><td><code>loading</code> Prop</td><td>✅</td></tr><tr><td><code>disabled</code> mit hover/active-Override</td><td>✅</td></tr><tr><td><code>fullWidth</code> Prop</td><td>✅</td></tr><tr><td><code>type</code> Prop (button/submit/reset)</td><td>✅</td></tr></tbody></table><h3 id="status" tabindex="-1"><a class="header-anchor" href="#status"><span>Status</span></a></h3><p><strong>OsButton Migration: ✅ Vollständig abgeschlossen.</strong></p><ul><li>BaseButton.vue gelöscht, base-components.js Plugin entfernt</li><li>Alle Tests, Snapshots, Cypress E2E-Selektoren aktualisiert</li><li>Nächster Schritt: Tier B Rest (ds-number, ds-radio) oder Tier 2 (OsModal)</li></ul>`,300)]))}const h=e(n,[["render",a],["__file","KATALOG.html.vue"]]),p=JSON.parse('{"path":"/packages/ui/KATALOG.html","title":"Komponenten-Katalog","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Fortschritt","slug":"fortschritt","link":"#fortschritt","children":[{"level":3,"title":"Übersicht","slug":"ubersicht","link":"#ubersicht","children":[]},{"level":3,"title":"Statistiken","slug":"statistiken","link":"#statistiken","children":[]},{"level":3,"title":"Architektur-Entscheidungen","slug":"architektur-entscheidungen","link":"#architektur-entscheidungen","children":[]},{"level":3,"title":"OsButton Migration (Phase 3) ✅","slug":"osbutton-migration-phase-3-✅","link":"#osbutton-migration-phase-3-✅","children":[]}]},{"level":2,"title":"Styleguide Komponenten (38)","slug":"styleguide-komponenten-38","link":"#styleguide-komponenten-38","children":[{"level":3,"title":"Data Display","slug":"data-display","link":"#data-display","children":[]},{"level":3,"title":"Data Input","slug":"data-input","link":"#data-input","children":[]},{"level":3,"title":"Layout","slug":"layout","link":"#layout","children":[]},{"level":3,"title":"Navigation","slug":"navigation","link":"#navigation","children":[]},{"level":3,"title":"Typography","slug":"typography","link":"#typography","children":[]}]},{"level":2,"title":"Webapp Komponenten (139)","slug":"webapp-komponenten-139","link":"#webapp-komponenten-139","children":[{"level":3,"title":"Status-Legende","slug":"status-legende","link":"#status-legende","children":[]},{"level":3,"title":"A-B","slug":"a-b","link":"#a-b","children":[]},{"level":3,"title":"C","slug":"c","link":"#c","children":[]},{"level":3,"title":"D-E","slug":"d-e","link":"#d-e","children":[]},{"level":3,"title":"F-G","slug":"f-g","link":"#f-g","children":[]},{"level":3,"title":"H-L","slug":"h-l","link":"#h-l","children":[]},{"level":3,"title":"M-O","slug":"m-o","link":"#m-o","children":[]},{"level":3,"title":"P-R","slug":"p-r","link":"#p-r","children":[]},{"level":3,"title":"S","slug":"s","link":"#s","children":[]},{"level":3,"title":"T-Z","slug":"t-z","link":"#t-z","children":[]}]},{"level":2,"title":"Identifizierte Duplikate & Konsolidierung","slug":"identifizierte-duplikate-konsolidierung","link":"#identifizierte-duplikate-konsolidierung","children":[{"level":3,"title":"Direkte Duplikate (Webapp ↔ Styleguide)","slug":"direkte-duplikate-webapp-↔-styleguide","link":"#direkte-duplikate-webapp-↔-styleguide","children":[]},{"level":3,"title":"Button-Familie ✅ (alle nutzen OsButton)","slug":"button-familie-✅-alle-nutzen-osbutton","link":"#button-familie-✅-alle-nutzen-osbutton","children":[]},{"level":3,"title":"Modal-Familie ✅ (alle nutzen OsModal)","slug":"modal-familie-✅-alle-nutzen-osmodal","link":"#modal-familie-✅-alle-nutzen-osmodal","children":[]},{"level":3,"title":"Menu-Familie (zur Konsolidierung)","slug":"menu-familie-zur-konsolidierung","link":"#menu-familie-zur-konsolidierung","children":[]}]},{"level":2,"title":"Kategorisierung","slug":"kategorisierung","link":"#kategorisierung","children":[{"level":3,"title":"Basis-Komponenten — UI-Library ✅","slug":"basis-komponenten-—-ui-library-✅","link":"#basis-komponenten-—-ui-library-✅","children":[]},{"level":3,"title":"Basis-Komponenten — UI-Library (ausstehend)","slug":"basis-komponenten-—-ui-library-ausstehend","link":"#basis-komponenten-—-ui-library-ausstehend","children":[]},{"level":3,"title":"Layout & Typography — → Plain HTML ✅ (Tier A)","slug":"layout-typography-—-→-plain-html-✅-tier-a","link":"#layout-typography-—-→-plain-html-✅-tier-a","children":[]},{"level":3,"title":"Noch zu migrieren (Tier B Rest)","slug":"noch-zu-migrieren-tier-b-rest","link":"#noch-zu-migrieren-tier-b-rest","children":[]},{"level":3,"title":"Feature-Komponenten (bleiben in Webapp)","slug":"feature-komponenten-bleiben-in-webapp","link":"#feature-komponenten-bleiben-in-webapp","children":[]}]},{"level":2,"title":"Analyse-Protokoll","slug":"analyse-protokoll","link":"#analyse-protokoll","children":[]},{"level":2,"title":"Nächste Schritte","slug":"nachste-schritte","link":"#nachste-schritte","children":[{"level":3,"title":"Phase 0: Analyse ✅","slug":"phase-0-analyse-✅","link":"#phase-0-analyse-✅","children":[]},{"level":3,"title":"Phase 3: OsButton Migration ✅","slug":"phase-3-osbutton-migration-✅","link":"#phase-3-osbutton-migration-✅","children":[]},{"level":3,"title":"Phase 4: Tier 1 — UI-Library Kern ✅","slug":"phase-4-tier-1-—-ui-library-kern-✅","link":"#phase-4-tier-1-—-ui-library-kern-✅","children":[]},{"level":3,"title":"Phase 4: Tier A — ds-* → Plain HTML ✅","slug":"phase-4-tier-a-—-ds-→-plain-html-✅","link":"#phase-4-tier-a-—-ds-→-plain-html-✅","children":[]},{"level":3,"title":"Phase 4: Tier B — ds-* Migration (60%)","slug":"phase-4-tier-b-—-ds-migration-60","link":"#phase-4-tier-b-—-ds-migration-60","children":[]},{"level":3,"title":"Phase 4: Tier 2-4 — UI-Library","slug":"phase-4-tier-2-4-—-ui-library","link":"#phase-4-tier-2-4-—-ui-library","children":[]}]},{"level":2,"title":"Detailanalyse: Button-Familie","slug":"detailanalyse-button-familie","link":"#detailanalyse-button-familie","children":[{"level":3,"title":"Styleguide Button (DsButton)","slug":"styleguide-button-dsbutton","link":"#styleguide-button-dsbutton","children":[]},{"level":3,"title":"Webapp BaseButton","slug":"webapp-basebutton","link":"#webapp-basebutton","children":[]},{"level":3,"title":"Vergleich: Styleguide vs Webapp","slug":"vergleich-styleguide-vs-webapp","link":"#vergleich-styleguide-vs-webapp","children":[]},{"level":3,"title":"Wrapper-Komponenten (nutzen BaseButton)","slug":"wrapper-komponenten-nutzen-basebutton","link":"#wrapper-komponenten-nutzen-basebutton","children":[]},{"level":3,"title":"Feature-Buttons (Business-Logik) ✅","slug":"feature-buttons-business-logik-✅","link":"#feature-buttons-business-logik-✅","children":[]},{"level":3,"title":"Konsolidierungsvorschlag: OsButton ✅ IMPLEMENTIERT","slug":"konsolidierungsvorschlag-osbutton-✅-implementiert","link":"#konsolidierungsvorschlag-osbutton-✅-implementiert","children":[]},{"level":3,"title":"Verwendete Design-Tokens (tatsächlich genutzt)","slug":"verwendete-design-tokens-tatsachlich-genutzt","link":"#verwendete-design-tokens-tatsachlich-genutzt","children":[]},{"level":3,"title":"Offene Fragen ✅ (alle gelöst)","slug":"offene-fragen-✅-alle-gelost","link":"#offene-fragen-✅-alle-gelost","children":[]}]},{"level":2,"title":"Detailanalyse: Modal-Familie","slug":"detailanalyse-modal-familie","link":"#detailanalyse-modal-familie","children":[{"level":3,"title":"Architektur-Übersicht","slug":"architektur-ubersicht","link":"#architektur-ubersicht","children":[]},{"level":3,"title":"Styleguide DsModal","slug":"styleguide-dsmodal","link":"#styleguide-dsmodal","children":[]},{"level":3,"title":"Feature-Modals ✅ (nutzen OsModal)","slug":"feature-modals-✅-nutzen-osmodal","link":"#feature-modals-✅-nutzen-osmodal","children":[]},{"level":3,"title":"Webapp Modal.vue (Modal-Manager) ✅ Gelöscht","slug":"webapp-modal-vue-modal-manager-✅-geloscht","link":"#webapp-modal-vue-modal-manager-✅-geloscht","children":[]},{"level":3,"title":"Konsolidierungsvorschlag OsModal ✅ (implementiert)","slug":"konsolidierungsvorschlag-osmodal-✅-implementiert","link":"#konsolidierungsvorschlag-osmodal-✅-implementiert","children":[]},{"level":3,"title":"Verwendete Design-Tokens (tatsächlich genutzt)","slug":"verwendete-design-tokens-tatsachlich-genutzt-1","link":"#verwendete-design-tokens-tatsachlich-genutzt-1","children":[]}]},{"level":2,"title":"Detailanalyse: Menu-Familie","slug":"detailanalyse-menu-familie","link":"#detailanalyse-menu-familie","children":[{"level":3,"title":"Architektur-Übersicht","slug":"architektur-ubersicht-1","link":"#architektur-ubersicht-1","children":[]},{"level":3,"title":"Styleguide DsMenu","slug":"styleguide-dsmenu","link":"#styleguide-dsmenu","children":[]},{"level":3,"title":"Styleguide DsMenuItem","slug":"styleguide-dsmenuitem","link":"#styleguide-dsmenuitem","children":[]},{"level":3,"title":"Webapp Dropdown","slug":"webapp-dropdown","link":"#webapp-dropdown","children":[]},{"level":3,"title":"Kategorisierung der Menu-Komponenten","slug":"kategorisierung-der-menu-komponenten","link":"#kategorisierung-der-menu-komponenten","children":[]},{"level":3,"title":"Konsolidierungsvorschlag","slug":"konsolidierungsvorschlag","link":"#konsolidierungsvorschlag","children":[]},{"level":3,"title":"Verwendete Design-Tokens (tatsächlich genutzt)","slug":"verwendete-design-tokens-tatsachlich-genutzt-2","link":"#verwendete-design-tokens-tatsachlich-genutzt-2","children":[]}]},{"level":2,"title":"Priorisierung der Komponenten","slug":"priorisierung-der-komponenten","link":"#priorisierung-der-komponenten","children":[{"level":3,"title":"Tier 1: Kern-Komponenten ✅","slug":"tier-1-kern-komponenten-✅","link":"#tier-1-kern-komponenten-✅","children":[]},{"level":3,"title":"Tier A: Triviale ds-* → Plain HTML ✅","slug":"tier-a-triviale-ds-→-plain-html-✅","link":"#tier-a-triviale-ds-→-plain-html-✅","children":[]},{"level":3,"title":"Tier B: Einfache ds-* Migration ✅","slug":"tier-b-einfache-ds-migration-✅","link":"#tier-b-einfache-ds-migration-✅","children":[]},{"level":3,"title":"Tier 2: Layout & Feedback","slug":"tier-2-layout-feedback","link":"#tier-2-layout-feedback","children":[]},{"level":3,"title":"Tier 3: Navigation (ausstehend)","slug":"tier-3-navigation-ausstehend","link":"#tier-3-navigation-ausstehend","children":[]},{"level":3,"title":"Tier 4: Spezial-Komponenten (ausstehend)","slug":"tier-4-spezial-komponenten-ausstehend","link":"#tier-4-spezial-komponenten-ausstehend","children":[]}]},{"level":2,"title":"Finaler Konsolidierungsplan","slug":"finaler-konsolidierungsplan","link":"#finaler-konsolidierungsplan","children":[{"level":3,"title":"Tier 1: Kern-Komponenten ✅","slug":"tier-1-kern-komponenten-✅-1","link":"#tier-1-kern-komponenten-✅-1","children":[]},{"level":3,"title":"Tier A: Triviale ds-* Wrapper → Plain HTML ✅","slug":"tier-a-triviale-ds-wrapper-→-plain-html-✅","link":"#tier-a-triviale-ds-wrapper-→-plain-html-✅","children":[]},{"level":3,"title":"Tier B: Einfache ds-* Migration (60%)","slug":"tier-b-einfache-ds-migration-60","link":"#tier-b-einfache-ds-migration-60","children":[]},{"level":3,"title":"Tier 2-4: UI-Library","slug":"tier-2-4-ui-library","link":"#tier-2-4-ui-library","children":[]}]},{"level":2,"title":"Erkenntnisse aus der Analyse","slug":"erkenntnisse-aus-der-analyse","link":"#erkenntnisse-aus-der-analyse","children":[{"level":3,"title":"Was funktioniert gut:","slug":"was-funktioniert-gut","link":"#was-funktioniert-gut","children":[]},{"level":3,"title":"Was gelöst wurde: ✅","slug":"was-gelost-wurde-✅","link":"#was-gelost-wurde-✅","children":[]},{"level":3,"title":"Noch offen:","slug":"noch-offen","link":"#noch-offen","children":[]}]},{"level":2,"title":"Token-Extraktion (aus Analyse)","slug":"token-extraktion-aus-analyse","link":"#token-extraktion-aus-analyse","children":[{"level":3,"title":"Benötigte Design-Tokens für Phase 1","slug":"benotigte-design-tokens-fur-phase-1","link":"#benotigte-design-tokens-fur-phase-1","children":[]}]},{"level":2,"title":"Phase 3: Webapp-Integration (Tracking)","slug":"phase-3-webapp-integration-tracking","link":"#phase-3-webapp-integration-tracking","children":[{"level":3,"title":"OsButton Migration - Abgeschlossen (133/133) ✅","slug":"osbutton-migration-abgeschlossen-133-133-✅","link":"#osbutton-migration-abgeschlossen-133-133-✅","children":[]},{"level":3,"title":"OsButton Migration - Alle Milestones abgeschlossen ✅","slug":"osbutton-migration-alle-milestones-abgeschlossen-✅","link":"#osbutton-migration-alle-milestones-abgeschlossen-✅","children":[]},{"level":3,"title":"OsButton Features - Alle implementiert ✅","slug":"osbutton-features-alle-implementiert-✅","link":"#osbutton-features-alle-implementiert-✅","children":[]},{"level":3,"title":"Status","slug":"status","link":"#status","children":[]}]}],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":16.7,"words":5010},"filePathRelative":"packages/ui/KATALOG.md","localizedDate":"April 5, 2026","excerpt":"\\n<blockquote>\\n<p>Tracking der Katalogisierung aller bestehenden Komponenten.\\nDiese Datei ermöglicht das Unterbrechen und Fortsetzen der Analyse.</p>\\n</blockquote>\\n<hr>\\n<h2>Fortschritt</h2>\\n<h3>Übersicht</h3>\\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>Phase 0: Analyse ██████████ 100% (8/8 Schritte) ✅</span></span>\\n<span class=\\"line\\"><span>Phase 3: OsButton ██████████ 100% (133/133 Buttons) ✅</span></span>\\n<span class=\\"line\\"><span>Phase 4: Tier 1 ██████████ 100% (OsButton, OsIcon, OsSpinner, OsCard) ✅</span></span>\\n<span class=\\"line\\"><span>Phase 4: Tier A → HTML ██████████ 100% (10 ds-* Wrapper → Plain HTML) ✅</span></span>\\n<span class=\\"line\\"><span>Phase 4: Tier B ██████████ 100% (ds-chip→OsBadge✅, ds-tag→OsBadge✅, ds-grid✅, ds-number→OsNumber✅, ds-radio→HTML✅)</span></span>\\n<span class=\\"line\\"><span>Phase 4: Tier B ██████████ 100% (Chip→OsBadge, Tag→OsBadge, Grid→HTML, Number→OsNumber, Radio→HTML, Table→HTML) ✅</span></span>\\n<span class=\\"line\\"><span>Phase 4: Tier 2+ ██████████ 100% (OsModal✅, ds-form✅, OcelotInput✅, OcelotSelect✅, OsMenu/OsMenuItem✅) | 0 ds-* Tags verbleibend ✅</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></div>"}');export{h as comp,p as data};
|