mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-03-01 12:44:37 +00:00
160 lines
153 KiB
HTML
160 lines
153 KiB
HTML
<!doctype html>
|
|
<html lang="en-US" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<meta name="generator" content="VuePress 2.0.0-rc.18" />
|
|
<meta name="theme" content="VuePress Theme Hope 2.0.0-rc.59" />
|
|
<style>
|
|
:root {
|
|
--vp-c-bg: #fff;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--vp-c-bg: #1b1b1f;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: var(--vp-c-bg);
|
|
}
|
|
</style>
|
|
<script>
|
|
const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
|
|
const systemDarkMode =
|
|
window.matchMedia &&
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
|
|
if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
|
|
document.documentElement.setAttribute("data-theme", "dark");
|
|
}
|
|
</script>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>Komponenten-Katalog | Ocelot.Social Documentation</title><meta name="description" content="Ocelot.Social Documentation">
|
|
<link rel="preload" href="/assets/style-B3yxn0TC.css" as="style"><link rel="stylesheet" href="/assets/style-B3yxn0TC.css">
|
|
<link rel="modulepreload" href="/assets/app-C6w_Pklu.js"><link rel="modulepreload" href="/assets/KATALOG.html-mRGwYwFN.js"><link rel="modulepreload" href="/assets/plugin-vue_export-helper-DlAUqK2U.js">
|
|
<link rel="prefetch" href="/assets/CHANGELOG.html-Bnklulr8.js" as="script"><link rel="prefetch" href="/assets/CODE_OF_CONDUCT.html-D7Z-kzHo.js" as="script"><link rel="prefetch" href="/assets/CONTRIBUTING.html-DoGQ344g.js" as="script"><link rel="prefetch" href="/assets/LICENSE.html-BkNHjkmj.js" as="script"><link rel="prefetch" href="/assets/index.html-1dvphctW.js" as="script"><link rel="prefetch" href="/assets/SUMMARY.html-DlsPW9yB.js" as="script"><link rel="prefetch" href="/assets/documentation.html-B-SWCtsa.js" as="script"><link rel="prefetch" href="/assets/testing.html-DIbeaaFd.js" as="script"><link rel="prefetch" href="/assets/index.html-D1cGf28t.js" as="script"><link rel="prefetch" href="/assets/graphql.html-hAUzkKsr.js" as="script"><link rel="prefetch" href="/assets/neo4j-graphql-js.html-CoZVYA65.js" as="script"><link rel="prefetch" href="/assets/testing.html-BI46pcUx.js" as="script"><link rel="prefetch" href="/assets/index.html-vLTkaCiA.js" as="script"><link rel="prefetch" href="/assets/features.html-jBF7v5Tb.js" as="script"><link rel="prefetch" href="/assets/TODO-next-update.html-Dbd1HQYH.js" as="script"><link rel="prefetch" href="/assets/deployment-values.html-BuK-P7uz.js" as="script"><link rel="prefetch" href="/assets/index.html-DA6JIG7N.js" as="script"><link rel="prefetch" href="/assets/index.html-DTeYXEMn.js" as="script"><link rel="prefetch" href="/assets/index.html-BotCCvmf.js" as="script"><link rel="prefetch" href="/assets/components.html-eb5EQ5pR.js" as="script"><link rel="prefetch" href="/assets/html.html-D297kDdJ.js" as="script"><link rel="prefetch" href="/assets/scss.html-B5_5w6uH.js" as="script"><link rel="prefetch" href="/assets/testing.html-B-yKt6km.js" as="script"><link rel="prefetch" href="/assets/vue.html-usvwTHmn.js" as="script"><link rel="prefetch" href="/assets/index.html-e225B3G6.js" as="script"><link rel="prefetch" href="/assets/CONTRIBUTING.html-vtvi86EK.js" as="script"><link rel="prefetch" href="/assets/PROJEKT.html-BZRNQpP2.js" as="script"><link rel="prefetch" href="/assets/index.html-CvqC5bIY.js" as="script"><link rel="prefetch" href="/assets/index.html-CMfno-Jk.js" as="script"><link rel="prefetch" href="/assets/GraphQL-Playground.html-KHcgqCNs.js" as="script"><link rel="prefetch" href="/assets/index.html-Cei9bcC1.js" as="script"><link rel="prefetch" href="/assets/index.html-kBh9kVNW.js" as="script"><link rel="prefetch" href="/assets/demo.html-BiUsynyZ.js" as="script"><link rel="prefetch" href="/assets/DataDisplay.html-Sq6mPmsX.js" as="script"><link rel="prefetch" href="/assets/DesignTokens.html-BMTgeCjs.js" as="script"><link rel="prefetch" href="/assets/Introduction.html-BLSaoncO.js" as="script"><link rel="prefetch" href="/assets/Layout.html-47srRE8z.js" as="script"><link rel="prefetch" href="/assets/Navigation.html-CYz7rQzP.js" as="script"><link rel="prefetch" href="/assets/Typography.html-DOSESWuO.js" as="script"><link rel="prefetch" href="/assets/STATUS.html-BXjDgreh.js" as="script"><link rel="prefetch" href="/assets/index.html-Cww0Dhaz.js" as="script"><link rel="prefetch" href="/assets/demo.html-B0pnlV6F.js" as="script"><link rel="prefetch" href="/assets/demo.html-CW3cD-H7.js" as="script"><link rel="prefetch" href="/assets/demo.html-6dfjrebI.js" as="script"><link rel="prefetch" href="/assets/demo.html-C6Qxo9Yj.js" as="script"><link rel="prefetch" href="/assets/demo.html-Cry2GElr.js" as="script"><link rel="prefetch" href="/assets/demo.html-D5WfjYVc.js" as="script"><link rel="prefetch" href="/assets/demo.html-DgTy1wh7.js" as="script"><link rel="prefetch" href="/assets/demo.html-BJe7I_KV.js" as="script"><link rel="prefetch" href="/assets/demo.html-4tqTFmIl.js" as="script"><link rel="prefetch" href="/assets/demo.html-DYuC5F42.js" as="script"><link rel="prefetch" href="/assets/demo.html-yVAERFv_.js" as="script"><link rel="prefetch" href="/assets/demo.html-BvyZLl5C.js" as="script"><link rel="prefetch" href="/assets/demo.html-BycQma2M.js" as="script"><link rel="prefetch" href="/assets/demo.html-DtB7qtVV.js" as="script"><link rel="prefetch" href="/assets/demo.html-DzDfUj7H.js" as="script"><link rel="prefetch" href="/assets/demo.html-C19sXN7o.js" as="script"><link rel="prefetch" href="/assets/demo.html-Kr4R8KpK.js" as="script"><link rel="prefetch" href="/assets/demo.html-BF4J6jMP.js" as="script"><link rel="prefetch" href="/assets/demo.html-BI-OLisc.js" as="script"><link rel="prefetch" href="/assets/demo.html-B9TFHr4o.js" as="script"><link rel="prefetch" href="/assets/demo.html-CWpO2OIy.js" as="script"><link rel="prefetch" href="/assets/demo.html-pp2XB-6I.js" as="script"><link rel="prefetch" href="/assets/demo.html-ESNHpVvJ.js" as="script"><link rel="prefetch" href="/assets/demo.html-CREqiFsx.js" as="script"><link rel="prefetch" href="/assets/demo.html-DiSwsATb.js" as="script"><link rel="prefetch" href="/assets/demo.html-7n0yJEH_.js" as="script"><link rel="prefetch" href="/assets/demo.html-B_2DIOaF.js" as="script"><link rel="prefetch" href="/assets/demo.html-DWLc6gFO.js" as="script"><link rel="prefetch" href="/assets/demo.html-DmAuEWx0.js" as="script"><link rel="prefetch" href="/assets/404.html-CRHdR_pJ.js" as="script"><link rel="prefetch" href="/assets/index.html-Buh1ncoF.js" as="script"><link rel="prefetch" href="/assets/index.html-DGSGkBMu.js" as="script"><link rel="prefetch" href="/assets/index.html-JQc0YsYs.js" as="script"><link rel="prefetch" href="/assets/index.html-TA2-vxe5.js" as="script"><link rel="prefetch" href="/assets/index.html-trrnbNUq.js" as="script"><link rel="prefetch" href="/assets/index.html-cfpWt2jJ.js" as="script"><link rel="prefetch" href="/assets/index.html-D6JUTu4R.js" as="script"><link rel="prefetch" href="/assets/index.html-Bo7Ljf3a.js" as="script"><link rel="prefetch" href="/assets/index.html-Ch-l52j_.js" as="script"><link rel="prefetch" href="/assets/index.html-IpTOngCN.js" as="script"><link rel="prefetch" href="/assets/index.html-LVrUA5Ul.js" as="script"><link rel="prefetch" href="/assets/index.html-NfLl_DKG.js" as="script"><link rel="prefetch" href="/assets/index.html-DVXBW6uR.js" as="script"><link rel="prefetch" href="/assets/index.html-B9A0hIU3.js" as="script"><link rel="prefetch" href="/assets/index.html-DzJKTok5.js" as="script"><link rel="prefetch" href="/assets/index.html-Bnl9T6N5.js" as="script"><link rel="prefetch" href="/assets/index.html-CT0wGi5f.js" as="script"><link rel="prefetch" href="/assets/index.html-DwrHoA30.js" as="script"><link rel="prefetch" href="/assets/index.html-BSwbVjcn.js" as="script"><link rel="prefetch" href="/assets/index.html-BtnavBbg.js" as="script"><link rel="prefetch" href="/assets/index.html-D3mIxgfr.js" as="script"><link rel="prefetch" href="/assets/index.html-BrgOXTUr.js" as="script"><link rel="prefetch" href="/assets/index.html-CKtpFMus.js" as="script"><link rel="prefetch" href="/assets/index.html-BSOluCGA.js" as="script"><link rel="prefetch" href="/assets/index.html-CrpjDBoX.js" as="script"><link rel="prefetch" href="/assets/index.html-CZTXNS31.js" as="script"><link rel="prefetch" href="/assets/index.html-Bm1PPhY4.js" as="script"><link rel="prefetch" href="/assets/index.html-CI2ipqR1.js" as="script"><link rel="prefetch" href="/assets/index.html-Bbb8AMlW.js" as="script"><link rel="prefetch" href="/assets/index.html-CsIJCUeh.js" as="script"><link rel="prefetch" href="/assets/index.html-B2TWVP9L.js" as="script"><link rel="prefetch" href="/assets/index.html-Bwei2ul_.js" as="script"><link rel="prefetch" href="/assets/index.html-BsZpCI8J.js" as="script"><link rel="prefetch" href="/assets/index.html-BrAtRvv1.js" as="script"><link rel="prefetch" href="/assets/index.html-CF1IpUUb.js" as="script"><link rel="prefetch" href="/assets/index.html-DfhQXQ0d.js" as="script"><link rel="prefetch" href="/assets/index.html-CMM88C29.js" as="script"><link rel="prefetch" href="/assets/index.html-DXR7MLPg.js" as="script"><link rel="prefetch" href="/assets/index.html-VtoA8tN6.js" as="script"><link rel="prefetch" href="/assets/index.html-DnBsIglD.js" as="script"><link rel="prefetch" href="/assets/index.html-Ca3OZ9Wf.js" as="script"><link rel="prefetch" href="/assets/index.html-BEQOMUJ-.js" as="script"><link rel="prefetch" href="/assets/index.html-2oMIHQ-B.js" as="script"><link rel="prefetch" href="/assets/index.html-Bv1cv5QZ.js" as="script"><link rel="prefetch" href="/assets/index.html-TZE5wDuj.js" as="script"><link rel="prefetch" href="/assets/index.html-BOfzPdYe.js" as="script"><link rel="prefetch" href="/assets/index.html-B7ltYIGI.js" as="script"><link rel="prefetch" href="/assets/index.html-Cc8SuVO9.js" as="script"><link rel="prefetch" href="/assets/index.html-TIaxxz0H.js" as="script"><link rel="prefetch" href="/assets/index.html-DlRSH8xw.js" as="script"><link rel="prefetch" href="/assets/index.html-BC6ChnxU.js" as="script"><link rel="prefetch" href="/assets/photoswipe.esm-GXRgw7eJ.js" as="script"><link rel="prefetch" href="/assets/SearchResult-CRxy2nzi.js" as="script"><link rel="prefetch" href="/assets/setupDevtools-7MC2TMWH-B7E_wV2L.js" as="script">
|
|
</head>
|
|
<body>
|
|
<div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content" class="vp-skip-link sr-only">Skip to main content</a><!--]--><!--[--><div class="theme-container external-link-icon pure has-toc" vp-container><!--[--><header id="navbar" class="vp-navbar" vp-navbar><div class="vp-navbar-start"><button type="button" class="vp-toggle-sidebar-button" title="Toggle Sidebar"><span class="icon"></span></button><!----><!--[--><a class="route-link vp-brand" href="/" aria-label="Take me home"><img class="vp-nav-logo" src="/logo.svg" alt><!----><span class="vp-site-name hide-in-pad">Ocelot.Social Documentation</span></a><!--]--><!----></div><div class="vp-navbar-center"><!----><!--[--><nav class="vp-nav-links"><div class="vp-nav-item hide-in-mobile"><a class="auto-link external-link" href="https://stage.ocelot.social/" aria-label="Demo" target="_self"><!---->Demo<!----></a></div></nav><!--]--><!----></div><div class="vp-navbar-end"><!----><!--[--><div class="vp-nav-item vp-action"><a class="vp-action-link" href="https://github.com/Ocelot-Social-Community/Ocelot-Social" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="github icon" name="github" style="width:1.25rem;height:1.25rem;vertical-align:middle;"><path d="M511.957 21.333C241.024 21.333 21.333 240.981 21.333 512c0 216.832 140.544 400.725 335.574 465.664 24.49 4.395 32.256-10.07 32.256-23.083 0-11.69.256-44.245 0-85.205-136.448 29.61-164.736-64.64-164.736-64.64-22.315-56.704-54.4-71.765-54.4-71.765-44.587-30.464 3.285-29.824 3.285-29.824 49.195 3.413 75.179 50.517 75.179 50.517 43.776 75.008 114.816 53.333 142.762 40.79 4.523-31.66 17.152-53.377 31.19-65.537-108.971-12.458-223.488-54.485-223.488-242.602 0-53.547 19.114-97.323 50.517-131.67-5.035-12.33-21.93-62.293 4.779-129.834 0 0 41.258-13.184 134.912 50.346a469.803 469.803 0 0 1 122.88-16.554c41.642.213 83.626 5.632 122.88 16.554 93.653-63.488 134.784-50.346 134.784-50.346 26.752 67.541 9.898 117.504 4.864 129.834 31.402 34.347 50.474 78.123 50.474 131.67 0 188.586-114.73 230.016-224.042 242.09 17.578 15.232 33.578 44.672 33.578 90.454v135.85c0 13.142 7.936 27.606 32.854 22.87C862.25 912.597 1002.667 728.747 1002.667 512c0-271.019-219.648-490.667-490.71-490.667z"></path></svg></a></div><div class="vp-nav-item hide-in-mobile"><button type="button" class="vp-color-mode-switch" id="color-mode-switch"><svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon" name="auto" style="display:block;"><path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon" name="dark" style="display:none;"><path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon" name="light" style="display:none;"><path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path></svg></button></div><!--[--><button type="button" class="search-pro-button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" class="icon search-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="search icon" name="search"><path d="M192 480a256 256 0 1 1 512 0 256 256 0 0 1-512 0m631.776 362.496-143.2-143.168A318.464 318.464 0 0 0 768 480c0-176.736-143.264-320-320-320S128 303.264 128 480s143.264 320 320 320a318.016 318.016 0 0 0 184.16-58.592l146.336 146.368c12.512 12.48 32.768 12.48 45.28 0 12.48-12.512 12.48-32.768 0-45.28"></path></svg><div class="search-pro-placeholder">Search</div><div class="search-pro-key-hints"><kbd class="search-pro-key">Ctrl</kbd><kbd class="search-pro-key">K</kbd></div></button><!--]--><!--]--><!----><button type="button" class="vp-toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false" aria-controls="nav-screen"><span><span class="vp-top"></span><span class="vp-middle"></span><span class="vp-bottom"></span></span></button></div></header><!----><!--]--><!----><div class="toggle-sidebar-wrapper"><span class="arrow start"></span></div><aside id="sidebar" class="vp-sidebar" vp-sidebar><!----><ul class="vp-sidebar-links"><li><a class="route-link auto-link vp-sidebar-link" href="/" aria-label="Introduction"><!---->Introduction<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/neo4j/" aria-label="Neo4J"><!---->Neo4J<!----></a></li><li><section class="vp-sidebar-group"><p class="vp-sidebar-header clickable"><!----><a class="route-link auto-link vp-sidebar-title no-external-link-icon" href="/backend/" aria-label="Backend"><!---->Backend<!----></a><!----></p><ul class="vp-sidebar-links"><li><a class="route-link auto-link vp-sidebar-link" href="/backend/graphql.html" aria-label="GraphQL"><!---->GraphQL<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/backend/neo4j-graphql-js.html" aria-label="neo4j-graphql-js"><!---->neo4j-graphql-js<!----></a></li></ul></section></li><li><section class="vp-sidebar-group"><p class="vp-sidebar-header clickable"><!----><a class="route-link auto-link vp-sidebar-title no-external-link-icon" href="/webapp/" aria-label="Webapp (Frontend)"><!---->Webapp (Frontend)<!----></a><!----></p><ul class="vp-sidebar-links"><li><a class="route-link auto-link vp-sidebar-link" href="/webapp/components.html" aria-label="Components"><!---->Components<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/webapp/html.html" aria-label="HTML"><!---->HTML<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/webapp/scss.html" aria-label="SCSS"><!---->SCSS<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/webapp/vue.html" aria-label="Vue"><!---->Vue<!----></a></li></ul></section></li><li><section class="vp-sidebar-group"><p class="vp-sidebar-header clickable"><!----><a class="route-link auto-link vp-sidebar-title no-external-link-icon" href="/testing.html" aria-label="Testing Guide"><!---->Testing Guide<!----></a><!----></p><ul class="vp-sidebar-links"><li><a class="route-link auto-link vp-sidebar-link" href="/cypress/" aria-label="End-to-end Tests"><!---->End-to-end Tests<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/webapp/testing.html" aria-label="Webapp (Frontend) Tests"><!---->Webapp (Frontend) Tests<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/backend/testing.html" aria-label="Backend Tests"><!---->Backend Tests<!----></a></li></ul></section></li><li><a class="route-link auto-link vp-sidebar-link" href="/deployment/" aria-label="Deployment"><!---->Deployment<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/CONTRIBUTING.html" aria-label="Contributing"><!---->Contributing<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/cypress/features.html" aria-label="Feature Specification"><!---->Feature Specification<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/CODE_OF_CONDUCT.html" aria-label="Code of Conduct"><!---->Code of Conduct<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/documentation.html" aria-label="Documentation"><!---->Documentation<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/LICENSE.html" aria-label="License"><!---->License<!----></a></li></ul><!----></aside><!--[--><!--[--><main id="main-content" class="vp-page"><!--[--><!----><!----><nav class="vp-breadcrumb disable"></nav><div class="vp-page-title"><h1><!---->Komponenten-Katalog</h1><div class="page-info"><!----><!----><span class="page-date-info" aria-label="Writing Date"><svg xmlns="http://www.w3.org/2000/svg" class="icon calendar-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="calendar icon" name="calendar"><path d="M716.4 110.137c0-18.753-14.72-33.473-33.472-33.473-18.753 0-33.473 14.72-33.473 33.473v33.473h66.993v-33.473zm-334.87 0c0-18.753-14.72-33.473-33.473-33.473s-33.52 14.72-33.52 33.473v33.473h66.993v-33.473zm468.81 33.52H716.4v100.465c0 18.753-14.72 33.473-33.472 33.473a33.145 33.145 0 01-33.473-33.473V143.657H381.53v100.465c0 18.753-14.72 33.473-33.473 33.473a33.145 33.145 0 01-33.473-33.473V143.657H180.6A134.314 134.314 0 0046.66 277.595v535.756A134.314 134.314 0 00180.6 947.289h669.74a134.36 134.36 0 00133.94-133.938V277.595a134.314 134.314 0 00-133.94-133.938zm33.473 267.877H147.126a33.145 33.145 0 01-33.473-33.473c0-18.752 14.72-33.473 33.473-33.473h736.687c18.752 0 33.472 14.72 33.472 33.473a33.145 33.145 0 01-33.472 33.473z"></path></svg><span data-allow-mismatch="text">March 1, 2026</span><meta property="datePublished" content="2026-03-01T11:39:30.000Z"></span><!----><span class="page-reading-time-info" aria-label="Reading Time"><svg xmlns="http://www.w3.org/2000/svg" class="icon timer-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="timer icon" name="timer"><path d="M799.387 122.15c4.402-2.978 7.38-7.897 7.38-13.463v-1.165c0-8.933-7.38-16.312-16.312-16.312H256.33c-8.933 0-16.311 7.38-16.311 16.312v1.165c0 5.825 2.977 10.874 7.637 13.592 4.143 194.44 97.22 354.963 220.201 392.763-122.204 37.542-214.893 196.511-220.2 389.397-4.661 5.049-7.638 11.651-7.638 19.03v5.825h566.49v-5.825c0-7.379-2.849-13.981-7.509-18.9-5.049-193.016-97.867-351.985-220.2-389.527 123.24-37.67 216.446-198.453 220.588-392.892zM531.16 450.445v352.632c117.674 1.553 211.787 40.778 211.787 88.676H304.097c0-48.286 95.149-87.382 213.728-88.676V450.445c-93.077-3.107-167.901-81.297-167.901-177.093 0-8.803 6.99-15.793 15.793-15.793 8.803 0 15.794 6.99 15.794 15.793 0 80.261 63.69 145.635 142.01 145.635s142.011-65.374 142.011-145.635c0-8.803 6.99-15.793 15.794-15.793s15.793 6.99 15.793 15.793c0 95.019-73.789 172.82-165.96 177.093z"></path></svg><span>About 15 min</span><meta property="timeRequired" content="PT15M"></span><!----><!----></div><hr></div><div class="vp-toc-placeholder"><aside id="toc" vp-toc><!----><div class="vp-toc-header">On This Page<!----><div class="arrow end"></div></div><div class="vp-toc-wrapper"><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#fortschritt">Fortschritt</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#ubersicht">Übersicht</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#statistiken">Statistiken</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#osbutton-migration-phase-3-✅">OsButton Migration (Phase 3) ✅</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#styleguide-komponenten-38">Styleguide Komponenten (38)</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#data-display">Data Display</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#data-input">Data Input</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#layout">Layout</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#navigation">Navigation</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#typography">Typography</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#webapp-komponenten-139">Webapp Komponenten (139)</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#status-legende">Status-Legende</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#a-b">A-B</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#c">C</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#d-e">D-E</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#f-g">F-G</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#h-l">H-L</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#m-o">M-O</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#p-r">P-R</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#s">S</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#t-z">T-Z</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#identifizierte-duplikate-konsolidierung">Identifizierte Duplikate & Konsolidierung</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#direkte-duplikate-webapp-↔-styleguide">Direkte Duplikate (Webapp ↔ Styleguide)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#button-familie-✅-alle-nutzen-osbutton">Button-Familie ✅ (alle nutzen OsButton)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#modal-familie-zur-konsolidierung">Modal-Familie (zur Konsolidierung)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#menu-familie-zur-konsolidierung">Menu-Familie (zur Konsolidierung)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#kategorisierung">Kategorisierung</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#basis-komponenten-—-ui-library-✅">Basis-Komponenten — UI-Library ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#basis-komponenten-—-ui-library-ausstehend">Basis-Komponenten — UI-Library (ausstehend)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#layout-typography-—-→-plain-html-✅-tier-a">Layout & Typography — → Plain HTML ✅ (Tier A)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#noch-zu-migrieren-tier-b-rest">Noch zu migrieren (Tier B Rest)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#feature-komponenten-bleiben-in-webapp">Feature-Komponenten (bleiben in Webapp)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#analyse-protokoll">Analyse-Protokoll</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#nachste-schritte">Nächste Schritte</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-0-analyse-✅">Phase 0: Analyse ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-3-osbutton-migration-✅">Phase 3: OsButton Migration ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-4-tier-1-—-ui-library-kern-✅">Phase 4: Tier 1 — UI-Library Kern ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-4-tier-a-—-ds-→-plain-html-✅">Phase 4: Tier A — ds-* → Plain HTML ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-4-tier-b-—-ds-migration-60">Phase 4: Tier B — ds-* Migration (60%)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#phase-4-tier-2-4-—-ui-library-ausstehend">Phase 4: Tier 2-4 — UI-Library (ausstehend)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#detailanalyse-button-familie">Detailanalyse: Button-Familie</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#styleguide-button-dsbutton">Styleguide Button (DsButton)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#webapp-basebutton">Webapp BaseButton</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#vergleich-styleguide-vs-webapp">Vergleich: Styleguide vs Webapp</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#wrapper-komponenten-nutzen-basebutton">Wrapper-Komponenten (nutzen BaseButton)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#feature-buttons-business-logik-✅">Feature-Buttons (Business-Logik) ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#konsolidierungsvorschlag-osbutton-✅-implementiert">Konsolidierungsvorschlag: OsButton ✅ IMPLEMENTIERT</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#verwendete-design-tokens-tatsachlich-genutzt">Verwendete Design-Tokens (tatsächlich genutzt)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#offene-fragen-✅-alle-gelost">Offene Fragen ✅ (alle gelöst)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#detailanalyse-modal-familie">Detailanalyse: Modal-Familie</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#architektur-ubersicht">Architektur-Übersicht</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#styleguide-dsmodal">Styleguide DsModal</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#feature-modals-nutzen-dsmodal">Feature-Modals (nutzen DsModal)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#webapp-modal-vue-modal-manager">Webapp Modal.vue (Modal-Manager)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#konsolidierungsvorschlag-osmodal">Konsolidierungsvorschlag: OsModal</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#verwendete-design-tokens-tatsachlich-genutzt-1">Verwendete Design-Tokens (tatsächlich genutzt)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#detailanalyse-menu-familie">Detailanalyse: Menu-Familie</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#architektur-ubersicht-1">Architektur-Übersicht</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#styleguide-dsmenu">Styleguide DsMenu</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#styleguide-dsmenuitem">Styleguide DsMenuItem</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#webapp-dropdown">Webapp Dropdown</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#kategorisierung-der-menu-komponenten">Kategorisierung der Menu-Komponenten</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#konsolidierungsvorschlag">Konsolidierungsvorschlag</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#verwendete-design-tokens-tatsachlich-genutzt-2">Verwendete Design-Tokens (tatsächlich genutzt)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#priorisierung-der-komponenten">Priorisierung der Komponenten</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-1-kern-komponenten-✅">Tier 1: Kern-Komponenten ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-a-triviale-ds-→-plain-html-✅">Tier A: Triviale ds-* → Plain HTML ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-b-einfache-ds-migration-60">Tier B: Einfache ds-* Migration (60%)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-2-layout-feedback-ausstehend">Tier 2: Layout & Feedback (ausstehend)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-3-navigation-ausstehend">Tier 3: Navigation (ausstehend)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-4-spezial-komponenten-ausstehend">Tier 4: Spezial-Komponenten (ausstehend)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#finaler-konsolidierungsplan">Finaler Konsolidierungsplan</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-1-kern-komponenten-✅-1">Tier 1: Kern-Komponenten ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-a-triviale-ds-wrapper-→-plain-html-✅">Tier A: Triviale ds-* Wrapper → Plain HTML ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-b-einfache-ds-migration-60-1">Tier B: Einfache ds-* Migration (60%)</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#tier-2-4-ui-library-ausstehend">Tier 2-4: UI-Library (ausstehend)</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#erkenntnisse-aus-der-analyse">Erkenntnisse aus der Analyse</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#was-funktioniert-gut">Was funktioniert gut:</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#was-gelost-wurde-✅">Was gelöst wurde: ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#noch-offen">Noch offen:</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#token-extraktion-aus-analyse">Token-Extraktion (aus Analyse)</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#benotigte-design-tokens-fur-phase-1">Benötigte Design-Tokens für Phase 1</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#phase-3-webapp-integration-tracking">Phase 3: Webapp-Integration (Tracking)</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#osbutton-migration-abgeschlossen-133-133-✅">OsButton Migration - Abgeschlossen (133/133) ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#osbutton-migration-alle-milestones-abgeschlossen-✅">OsButton Migration - Alle Milestones abgeschlossen ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#osbutton-features-alle-implementiert-✅">OsButton Features - Alle implementiert ✅</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#status">Status</a></li><!----><!--]--></ul></li><!--]--></ul><div class="vp-toc-marker" style="top:-1.7rem;"></div></div><!----></aside></div><!----><div class="theme-hope-content" vp-content><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 ████████░░ 80% (ds-chip→OsBadge✅, ds-tag→OsBadge✅, ds-grid✅, ds-number→OsNumber✅, ds-radio⬜)</span></span>
|
|
<span class="line"><span>Phase 4: Tier B+ ████████░░ 75% (ds-table→HTML✅) | Tier 2-3 ausstehend (OsModal, OsInput, OsMenu, OsSelect)</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="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) — Tier B Rest</td></tr><tr><td>⬜ → UI-Library</td><td>Modal, Input, Menu, MenuItem, Select (5) — Tier 2-3</td></tr><tr><td>⬜ Offen</td><td>Form (18 Dateien — HTML oder OsForm?)</td></tr><tr><td>⬜ Nicht in Webapp</td><td>Code, CopyField, FormItem, InputError, InputLabel, Page, PageTitle, Logo, Avatar, TableCol, TableHeadCol (11)</td></tr></tbody></table><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>DsForm <code>errors</code> ist ein Objekt → <code>!!errors</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>⬜ Tier 2</td><td>23 Dateien → OsInput (gekoppelt mit Form)</td></tr><tr><td>18</td><td>InputError</td><td>⬜ Nicht genutzt</td><td>Intern von Input genutzt</td></tr><tr><td>19</td><td>InputLabel</td><td>⬜ Nicht genutzt</td><td>Intern von Input genutzt</td></tr><tr><td>20</td><td>Radio</td><td>⬜ Tier B</td><td>1 Datei → native <code><input type="radio"></code></td></tr><tr><td>21</td><td>Select</td><td>⬜ Tier 4</td><td>3 Dateien → OsSelect</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>7 Dateien → 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>⬜ Tier 3</td><td>11 Dateien → OsMenu</td></tr><tr><td>36</td><td>MenuItem</td><td>⬜ Tier 3</td><td>6 Dateien → OsMenuItem</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>⬜ Ausstehend</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-zur-konsolidierung" tabindex="-1"><a class="header-anchor" href="#modal-familie-zur-konsolidierung"><span>Modal-Familie (zur Konsolidierung)</span></a></h3><table><thead><tr><th>Komponente</th><th>Beschreibung</th><th>Ziel</th></tr></thead><tbody><tr><td>Modal (Styleguide)</td><td>Basis-Modal</td><td>OsModal</td></tr><tr><td>Modal (Webapp)</td><td>Basis-Modal</td><td>→ OsModal</td></tr><tr><td>ConfirmModal</td><td>Bestätigungs-Dialog</td><td>→ OsModal type="confirm"</td></tr><tr><td>DeleteUserModal</td><td>Löschen-Dialog</td><td>→ OsModal type="confirm"</td></tr><tr><td>DisableModal</td><td>Deaktivieren-Dialog</td><td>→ OsModal type="confirm"</td></tr><tr><td>ReleaseModal</td><td>Release-Dialog</td><td>Feature-spezifisch</td></tr><tr><td>ReportModal</td><td>Report-Dialog</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 → OsInput</li><li>Select → OsSelect</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></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>[ ] ds-number (5 Dateien) → <code><div class="ds-number"></code></li><li>[ ] ds-radio (1 Datei) → native <code><input type="radio"></code></li></ol><h3 id="phase-4-tier-2-4-—-ui-library-ausstehend" tabindex="-1"><a class="header-anchor" href="#phase-4-tier-2-4-—-ui-library-ausstehend"><span>Phase 4: Tier 2-4 — UI-Library (ausstehend)</span></a></h3><ol start="18"><li>[ ] OsModal (7 Dateien)</li><li>[ ] OsInput (23 Dateien, gekoppelt mit ds-form)</li><li>[ ] OsMenu / OsMenuItem (17 Dateien)</li><li>[ ] OsSelect (3 Dateien), OsTable (7 Dateien)</li><li>[ ] ds-form → HTML <code><form></code> oder OsForm (18 Dateien)</li></ol><hr><p><strong>✅ Phase 0-3 abgeschlossen. Phase 4: Tier 1 + Tier A ✅, Tier B 60% (Chip→OsBadge, Tag→OsBadge, Grid→HTML), Tier 2-4 ausstehend.</strong></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-dsmodal" tabindex="-1"><a class="header-anchor" href="#feature-modals-nutzen-dsmodal"><span>Feature-Modals (nutzen DsModal)</span></a></h3><table><thead><tr><th>Modal</th><th>Business-Logik</th><th>Migration</th></tr></thead><tbody><tr><td><strong>ConfirmModal</strong></td><td>Generischer Confirm-Dialog mit Callbacks</td><td>Bleibt, nutzt OsModal</td></tr><tr><td><strong>DisableModal</strong></td><td>GraphQL Mutation für Disable</td><td>Bleibt, nutzt OsModal</td></tr><tr><td><strong>ReportModal</strong></td><td>Report-Logik</td><td>Bleibt, nutzt OsModal</td></tr><tr><td><strong>DeleteUserModal</strong></td><td>User-Lösch-Logik</td><td>Bleibt, nutzt OsModal</td></tr><tr><td><strong>ReleaseModal</strong></td><td>Release-Logik</td><td>Bleibt, nutzt OsModal</td></tr></tbody></table><p><strong>Erkenntnis:</strong> Alle Feature-Modals nutzen bereits DsModal als Basis und fügen nur spezifische Business-Logik hinzu. Dies ist das gewünschte Pattern!</p><hr><h3 id="webapp-modal-vue-modal-manager" tabindex="-1"><a class="header-anchor" href="#webapp-modal-vue-modal-manager"><span>Webapp Modal.vue (Modal-Manager)</span></a></h3><p><strong>Pfad:</strong> <code>webapp/components/Modal.vue</code></p><p><strong>Funktion:</strong> Kein UI-Modal, sondern ein <strong>State-basierter Modal-Router</strong>:</p><ul><li>Liest <code>modal/open</code> und <code>modal/data</code> aus Vuex</li><li>Rendert das passende Feature-Modal basierend auf State</li><li>Leitet Props an Feature-Modals weiter</li></ul><p><strong>Mögliche Migration:</strong></p><ul><li>Als <code>OsModalManager</code> beibehalten oder</li><li>Durch Vue 3 <code><Teleport></code> + Composable ersetzen</li></ul><hr><h3 id="konsolidierungsvorschlag-osmodal" tabindex="-1"><a class="header-anchor" href="#konsolidierungsvorschlag-osmodal"><span>Konsolidierungsvorschlag: OsModal</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-60" tabindex="-1"><a class="header-anchor" href="#tier-b-einfache-ds-migration-60"><span>Tier B: Einfache ds-* Migration (60%)</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><code><div class="ds-number"></code></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-ausstehend" tabindex="-1"><a class="header-anchor" href="#tier-2-layout-feedback-ausstehend"><span>Tier 2: Layout & Feedback (ausstehend)</span></a></h3><table><thead><tr><th>#</th><th>Komponente</th><th>Dateien</th><th>Abhängigkeiten</th></tr></thead><tbody><tr><td>5</td><td><strong>OsModal</strong></td><td>7</td><td>OsButton, OsCard</td></tr><tr><td>6</td><td><strong>OsDropdown</strong></td><td>—</td><td>OsButton</td></tr><tr><td>7</td><td><strong>OsAvatar</strong></td><td>—</td><td>-</td></tr><tr><td>8</td><td><strong>OsInput</strong></td><td>23</td><td>gekoppelt mit ds-form (18 Dateien)</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>ds-form → HTML <code><form></code> oder OsForm</td><td>18</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-1" tabindex="-1"><a class="header-anchor" href="#tier-b-einfache-ds-migration-60-1"><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 → Plain HTML ⬜ (5 Dateien)</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-ausstehend" tabindex="-1"><a class="header-anchor" href="#tier-2-4-ui-library-ausstehend"><span>Tier 2-4: UI-Library (ausstehend)</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, gekoppelt mit ds-form</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><strong>Modal</strong> - Existiert doppelt (Webapp Modal.vue ist Modal-Router, DsModal ist UI)</li><li><strong>ds-form Kopplung</strong> - ds-input und ds-form sind stark gekoppelt (Schema-Validation)</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></div><!----><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link vp-meta-label" href="https://github.com/Ocelot-Social-Community/Ocelot-Social/edit/master/./packages/ui/KATALOG.md" aria-label="Edit this page" rel="noopener noreferrer" target="_blank"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon edit-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="edit icon" name="edit"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></svg><!--]-->Edit this page<!----></a></div><div class="vp-meta-item git-info"><!----><!----></div></footer><!----><!----><!----><!--]--></main><!--]--><!--]--><footer class="vp-footer-wrapper" vp-footer><div class="vp-footer">Released under the <a class="vt-link link link" href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer"><!--[-->MIT License<!--]--><!----></a>.</div><div class="vp-copyright">© by <a href="https://busfaktor.org" target="_blank">busFaktor() e.V.</a> & Authors | <a href="https://ocelot.social/en/impressum/">Imprint</a></div></footer></div><!--]--><!--]--><!--[--><!----><!----><!--[--><!--]--><!--]--><!--]--></div>
|
|
<script type="module" src="/assets/app-C6w_Pklu.js" defer></script>
|
|
</body>
|
|
</html>
|