mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-04-06 01:25:31 +00:00
101 lines
44 KiB
JavaScript
101 lines
44 KiB
JavaScript
import{_ as l}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as e,a as t,b as i,d as a,e as h,f as p,r as k,o as d}from"./app-h9l50wZ_.js";const r={};function c(g,s){const n=k("RouteLink");return d(),e("div",null,[s[5]||(s[5]=t(`<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>`,40)),i("ul",null,[i("li",null,[s[1]||(s[1]=a("Check the ")),h(n,{to:"/CONTRIBUTING.html"},{default:p(()=>s[0]||(s[0]=[a("main CONTRIBUTING.md")])),_:1}),s[2]||(s[2]=a(" for general guidelines"))]),s[3]||(s[3]=i("li",null,[a("Join the "),i("a",{href:"https://discord.gg/AJSX9DCSUA",target:"_blank",rel:"noopener noreferrer"},"Discord"),a(" for questions")],-1)),s[4]||(s[4]=i("li",null,"Open an issue for bugs or feature requests",-1))])])}const y=l(r,[["render",c],["__file","CONTRIBUTING.html.vue"]]),u=JSON.parse('{"path":"/packages/ui/CONTRIBUTING.html","title":"Contributing to @ocelot-social/ui","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Development Setup","slug":"development-setup","link":"#development-setup","children":[]},{"level":2,"title":"Creating a New Component","slug":"creating-a-new-component","link":"#creating-a-new-component","children":[{"level":3,"title":"File Structure","slug":"file-structure","link":"#file-structure","children":[]},{"level":3,"title":"Naming Convention","slug":"naming-convention","link":"#naming-convention","children":[]},{"level":3,"title":"Component Template","slug":"component-template","link":"#component-template","children":[]}]},{"level":2,"title":"Code Standards","slug":"code-standards","link":"#code-standards","children":[{"level":3,"title":"TypeScript","slug":"typescript","link":"#typescript","children":[]},{"level":3,"title":"Props","slug":"props","link":"#props","children":[]},{"level":3,"title":"Styling","slug":"styling","link":"#styling","children":[]},{"level":3,"title":"Vue 2/3 Compatibility","slug":"vue-2-3-compatibility","link":"#vue-2-3-compatibility","children":[]}]},{"level":2,"title":"Testing","slug":"testing","link":"#testing","children":[{"level":3,"title":"Requirements","slug":"requirements","link":"#requirements","children":[]},{"level":3,"title":"Writing Tests","slug":"writing-tests","link":"#writing-tests","children":[]},{"level":3,"title":"Running Tests","slug":"running-tests","link":"#running-tests","children":[]}]},{"level":2,"title":"Commit Conventions","slug":"commit-conventions","link":"#commit-conventions","children":[]},{"level":2,"title":"Pull Request Checklist","slug":"pull-request-checklist","link":"#pull-request-checklist","children":[]},{"level":2,"title":"Example Apps","slug":"example-apps","link":"#example-apps","children":[]},{"level":2,"title":"Questions?","slug":"questions","link":"#questions","children":[]}],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.7,"words":511},"filePathRelative":"packages/ui/CONTRIBUTING.md","localizedDate":"April 5, 2026","excerpt":"\\n<p>Thank you for contributing to the ocelot.social UI library!</p>\\n<h2>Development Setup</h2>\\n<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>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#4078F2;--shiki-dark:#61AFEF\\">npm</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\"> install</span></span>\\n<span class=\\"line\\"></span>\\n<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>\\n<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>\\n<span class=\\"line\\"></span>\\n<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>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#4078F2;--shiki-dark:#61AFEF\\">npm</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\"> test</span></span>\\n<span class=\\"line\\"></span>\\n<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>\\n<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>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{y as comp,u as data};
|