mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-03-01 12:44:37 +00:00
141 lines
64 KiB
HTML
141 lines
64 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>Contributing to @ocelot-social/ui | 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/CONTRIBUTING.html-vtvi86EK.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/KATALOG.html-mRGwYwFN.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><!---->Contributing to @ocelot-social/ui</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 2 min</span><meta property="timeRequired" content="PT2M"></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="#development-setup">Development Setup</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#creating-a-new-component">Creating a New Component</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#file-structure">File Structure</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#naming-convention">Naming Convention</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#component-template">Component Template</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#code-standards">Code Standards</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#typescript">TypeScript</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#props">Props</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#styling">Styling</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#vue-2-3-compatibility">Vue 2/3 Compatibility</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#testing">Testing</a></li><li><ul class="vp-toc-list"><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#requirements">Requirements</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#writing-tests">Writing Tests</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level3" href="#running-tests">Running Tests</a></li><!----><!--]--></ul></li><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#commit-conventions">Commit Conventions</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#pull-request-checklist">Pull Request Checklist</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#example-apps">Example Apps</a></li><!----><!--]--><!--[--><li class="vp-toc-item"><a class="route-link vp-toc-link level2" href="#questions">Questions?</a></li><!----><!--]--></ul><div class="vp-toc-marker" style="top:-1.7rem;"></div></div><!----></aside></div><!----><div class="theme-hope-content" vp-content><h1 id="contributing-to-ocelot-social-ui" tabindex="-1"><a class="header-anchor" href="#contributing-to-ocelot-social-ui"><span>Contributing to @ocelot-social/ui</span></a></h1><p>Thank you for contributing to the ocelot.social UI library!</p><h2 id="development-setup" tabindex="-1"><a class="header-anchor" href="#development-setup"><span>Development Setup</span></a></h2><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" 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;"># Install dependencies</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> install</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;"># Start development server</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> dev</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;"># Run tests</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> test</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;"># Run linter</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> lint</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></div><h2 id="creating-a-new-component" tabindex="-1"><a class="header-anchor" href="#creating-a-new-component"><span>Creating a New Component</span></a></h2><h3 id="file-structure" tabindex="-1"><a class="header-anchor" href="#file-structure"><span>File Structure</span></a></h3><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>src/components/</span></span>
|
|
<span class="line"><span>└── OsButton/</span></span>
|
|
<span class="line"><span> ├── OsButton.vue # Component</span></span>
|
|
<span class="line"><span> ├── OsButton.spec.ts # Tests</span></span>
|
|
<span class="line"><span> └── index.ts # Export</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="naming-convention" tabindex="-1"><a class="header-anchor" href="#naming-convention"><span>Naming Convention</span></a></h3><ul><li>All components use the <code>Os</code> prefix: <code>OsButton</code>, <code>OsCard</code>, <code>OsModal</code></li><li>Files use PascalCase: <code>OsButton.vue</code></li></ul><h3 id="component-template" tabindex="-1"><a class="header-anchor" href="#component-template"><span>Component Template</span></a></h3><div class="language-vue line-numbers-mode" data-highlighter="shiki" data-ext="vue" data-title="vue" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">script</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> setup</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> lang</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"ts"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">computed</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'vue-demi'</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;"> type</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">Size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">Variant</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> '@/types'</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">interface</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;"> Props</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;"> /** Button size */</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:#C18401;--shiki-dark:#E5C07B;"> Size</span></span>
|
|
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> /** Visual variant */</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:#C18401;--shiki-dark:#E5C07B;"> Variant</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#986801;--shiki-dark:#E5C07B;"> props</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> withDefaults</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">defineProps</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#C18401;--shiki-dark:#E5C07B;">Props</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>(), {</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> size</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'md'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> variant</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'primary'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">})</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#986801;--shiki-dark:#E5C07B;"> classes</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> computed</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(() </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">=></span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> [</span></span>
|
|
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'os-button'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
|
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> `os-button--</span><span style="--shiki-light:#CA1243;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#383A42;--shiki-dark:#E5C07B;">props</span><span style="--shiki-light:#50A14F;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#C18401;--shiki-dark:#E06C75;">size</span><span style="--shiki-light:#CA1243;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
|
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> `os-button--</span><span style="--shiki-light:#CA1243;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#383A42;--shiki-dark:#E5C07B;">props</span><span style="--shiki-light:#50A14F;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#C18401;--shiki-dark:#E06C75;">variant</span><span style="--shiki-light:#CA1243;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">])</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">script</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">template</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> :class</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"classes"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">slot</span><span style="--shiki-light:white;--shiki-dark:#FFFFFF;"> /</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">template</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="code-standards" tabindex="-1"><a class="header-anchor" href="#code-standards"><span>Code Standards</span></a></h2><h3 id="typescript" tabindex="-1"><a class="header-anchor" href="#typescript"><span>TypeScript</span></a></h3><ul><li><code>strict: true</code> is enabled</li><li>All props must be typed</li><li>Use JSDoc comments for documentation</li></ul><h3 id="props" tabindex="-1"><a class="header-anchor" href="#props"><span>Props</span></a></h3><p>Use the complete Tailwind-based scales:</p><table><thead><tr><th>Prop</th><th>Values</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>2xl</code></td></tr><tr><td><code>rounded</code></td><td><code>none</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>2xl</code>, <code>3xl</code>, <code>full</code></td></tr><tr><td><code>shadow</code></td><td><code>none</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>2xl</code></td></tr><tr><td><code>variant</code></td><td><code>primary</code>, <code>secondary</code>, <code>danger</code>, <code>warning</code>, <code>success</code>, <code>info</code></td></tr></tbody></table><h3 id="styling" tabindex="-1"><a class="header-anchor" href="#styling"><span>Styling</span></a></h3><ul><li>Use CSS Custom Properties (no hardcoded colors)</li><li>Use Tailwind utility classes</li><li>Dark mode via <code>dark:</code> prefix</li></ul><div class="language-vue line-numbers-mode" data-highlighter="shiki" data-ext="vue" data-title="vue" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">template</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"bg-[--button-primary-bg] dark:bg-[--button-primary-bg-dark]"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">slot</span><span style="--shiki-light:white;--shiki-dark:#FFFFFF;"> /</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> </</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">template</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vue-2-3-compatibility" tabindex="-1"><a class="header-anchor" href="#vue-2-3-compatibility"><span>Vue 2/3 Compatibility</span></a></h3><p>Always import from <code>vue-demi</code>, not <code>vue</code>:</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:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">// Correct</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ref</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">computed</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'vue-demi'</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;">// Wrong</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ref</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">computed</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'vue'</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="testing" tabindex="-1"><a class="header-anchor" href="#testing"><span>Testing</span></a></h2><h3 id="requirements" tabindex="-1"><a class="header-anchor" href="#requirements"><span>Requirements</span></a></h3><ul><li><strong>100% code coverage</strong> is required</li><li>Tests must pass for both Vue 2.7 and Vue 3</li></ul><h3 id="writing-tests" tabindex="-1"><a class="header-anchor" href="#writing-tests"><span>Writing Tests</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;">import</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">mount</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> '@vue/test-utils'</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">describe</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">expect</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">it</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'vitest'</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> OsButton</span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;"> from</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> './OsButton.vue'</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">describe</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">'OsButton'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, () </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">=></span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> it</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">'renders slot content'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, () </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">=></span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;"> const</span><span style="--shiki-light:#986801;--shiki-dark:#E5C07B;"> wrapper</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> mount</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;">OsButton</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, {</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> slots</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">default</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'Click me'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> },</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> })</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> expect</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#E5C07B;">wrapper</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">()).</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">toBe</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">'Click me'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">)</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> })</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> it</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">'applies size class'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, () </span><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">=></span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;"> const</span><span style="--shiki-light:#986801;--shiki-dark:#E5C07B;"> wrapper</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> mount</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#E06C75;">OsButton</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, {</span></span>
|
|
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> props</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">size</span><span style="--shiki-light:#0184BC;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> 'lg'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> },</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> })</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> expect</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#E5C07B;">wrapper</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">classes</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">()).</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">toContain</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">'os-button--lg'</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">)</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> })</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">})</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="running-tests" tabindex="-1"><a class="header-anchor" href="#running-tests"><span>Running Tests</span></a></h3><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" 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;"># Run once</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> test</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;"># Watch mode</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> test:watch</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;"># With coverage</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> test:coverage</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="commit-conventions" tabindex="-1"><a class="header-anchor" href="#commit-conventions"><span>Commit Conventions</span></a></h2><p>We use <a href="https://www.conventionalcommits.org/" target="_blank" rel="noopener noreferrer">Conventional Commits</a> for automatic releases:</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" 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;"># Features (minor version bump)</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">feat(button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">): add loading state</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;"># Bug fixes (patch version bump)</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">fix(modal</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">): correct focus trap behavior</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;"># Breaking changes (major version bump)</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">feat(input</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">)!</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> rename</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> value</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> prop</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> to</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> modelValue</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;"># Other types</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">docs:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> update</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> README</span></span>
|
|
<span class="line"><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">test</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> add</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> button</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> accessibility</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> tests</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">chore:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> update</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> dependencies</span></span>
|
|
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">refactor:</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> simplify</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> dropdown</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> logic</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><h2 id="pull-request-checklist" tabindex="-1"><a class="header-anchor" href="#pull-request-checklist"><span>Pull Request Checklist</span></a></h2><p>Before submitting a PR, ensure:</p><ul><li>[ ] Tests pass (<code>npm test</code>)</li><li>[ ] Linter passes (<code>npm run lint</code>)</li><li>[ ] Build succeeds (<code>npm run build</code>)</li><li>[ ] 100% code coverage maintained</li><li>[ ] New components have Histoire stories</li><li>[ ] Props have JSDoc documentation</li><li>[ ] Commit messages follow Conventional Commits</li></ul><h2 id="example-apps" tabindex="-1"><a class="header-anchor" href="#example-apps"><span>Example Apps</span></a></h2><p>Test your changes in the example apps:</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" 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;"># Vue 3 + Tailwind</span></span>
|
|
<span class="line"><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">cd</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> examples/vue3-tailwind</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> && </span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> install</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> && </span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> dev</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;"># Vue 3 + CSS</span></span>
|
|
<span class="line"><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">cd</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> examples/vue3-css</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> && </span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> install</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> && </span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> dev</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;"># Vue 2 + Tailwind</span></span>
|
|
<span class="line"><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">cd</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> examples/vue2-tailwind</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> && </span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> install</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> && </span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> dev</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;"># Vue 2 + CSS</span></span>
|
|
<span class="line"><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">cd</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> examples/vue2-css</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> && </span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> install</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> && </span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> dev</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></div><h2 id="questions" tabindex="-1"><a class="header-anchor" href="#questions"><span>Questions?</span></a></h2><ul><li>Check the <a class="route-link" href="/CONTRIBUTING.html">main CONTRIBUTING.md</a> for general guidelines</li><li>Join the <a href="https://discord.gg/AJSX9DCSUA" target="_blank" rel="noopener noreferrer">Discord</a> for questions</li><li>Open an issue for bugs or feature requests</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/CONTRIBUTING.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>
|