mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-03-01 12:44:37 +00:00
58 lines
13 KiB
JavaScript
58 lines
13 KiB
JavaScript
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as l,a as n,b as a,d as e,o as t}from"./app-C6w_Pklu.js";const d={};function p(r,s){return t(),l("div",null,s[0]||(s[0]=[n(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-input placeholder="Name ..." /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="usage-with-label" tabindex="-1"><a class="header-anchor" href="#usage-with-label"><span>Usage with label</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-input</span></span>
|
|
<span class="line"><span> id="name"</span></span>
|
|
<span class="line"><span> label="Your name"</span></span>
|
|
<span class="line"><span> placeholder="Name ..." /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="disabled" tabindex="-1"><a class="header-anchor" href="#disabled"><span>Disabled</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-input placeholder="Name ..." disabled /></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="input-types" tabindex="-1"><a class="header-anchor" href="#input-types"><span>Input types</span></a></h2><p>You can use an input for different types of input.</p><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><template></span></span>
|
|
<span class="line"><span> <div></span></span>
|
|
<span class="line"><span> <ds-input v-model="text"></ds-input></span></span>
|
|
<span class="line"><span> <ds-input v-model="text" type="password"></ds-input></span></span>
|
|
<span class="line"><span> <ds-input v-model="text" type="textarea" rows="2"></ds-input></span></span>
|
|
<span class="line"><span> </div></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> text: 'Default text'</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></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></div><h2 id="bind-to-a-value" tabindex="-1"><a class="header-anchor" href="#bind-to-a-value"><span>Bind to a value</span></a></h2><p>Use v-model to bind a value to the input.</p><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><template></span></span>
|
|
<span class="line"><span> <div></span></span>
|
|
<span class="line"><span> <ds-input</span></span>
|
|
<span class="line"><span> v-model="name"</span></span>
|
|
<span class="line"><span> placeholder="Name ..."></ds-input></span></span>
|
|
<span class="line"><span> <ds-text>Your name: {{ name }}</ds-text></span></span>
|
|
<span class="line"><span> </div></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> name: ''</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></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></div><h2 id="validation" tabindex="-1"><a class="header-anchor" href="#validation"><span>Validation</span></a></h2>`,13),a("p",null,[e("We use "),a("a",{href:"https://github.com/yiminghe/async-validator",targe:"_blank"},"async-validator schemas"),e(" for validation.")],-1),n(`<p>If you need to validate more than one field it is better to use the form component.</p><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><template></span></span>
|
|
<span class="line"><span> <div></span></span>
|
|
<span class="line"><span> <ds-input</span></span>
|
|
<span class="line"><span> v-model="name"</span></span>
|
|
<span class="line"><span> :schema="{type: 'string', min: 6, message: 'Name must be longer' }"</span></span>
|
|
<span class="line"><span> placeholder="Name ..." /></span></span>
|
|
<span class="line"><span> </div></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> name: ''</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></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></div><h2 id="input-sizes" tabindex="-1"><a class="header-anchor" href="#input-sizes"><span>Input sizes</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-input placeholder="Small ..." size="small"></ds-input></span></span>
|
|
<span class="line"><span><ds-input placeholder="Base ..."></ds-input></span></span>
|
|
<span class="line"><span><ds-input placeholder="Large ..." size="large"></ds-input></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></div><h2 id="input-icons" tabindex="-1"><a class="header-anchor" href="#input-icons"><span>Input icons</span></a></h2><p>Add an icon to help the user identify the input type.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-input placeholder="Search ..." icon="search"></ds-input></span></span>
|
|
<span class="line"><span><ds-input placeholder="Time ..." icon="clock"></ds-input></span></span>
|
|
<span class="line"><span><ds-input placeholder="Search ..." icon-right="search"></ds-input></span></span>
|
|
<span class="line"><span><ds-input placeholder="Search ..." icon="search" size="small"></ds-input></span></span>
|
|
<span class="line"><span><ds-input placeholder="Search ..." icon="search" size="large"></ds-input></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>`,7)]))}const o=i(d,[["render",p],["__file","demo.html.vue"]]),h=JSON.parse('{"path":"/styleguide/src/system/components/data-input/Input/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Usage with label","slug":"usage-with-label","link":"#usage-with-label","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Input types","slug":"input-types","link":"#input-types","children":[]},{"level":2,"title":"Bind to a value","slug":"bind-to-a-value","link":"#bind-to-a-value","children":[]},{"level":2,"title":"Validation","slug":"validation","link":"#validation","children":[]},{"level":2,"title":"Input sizes","slug":"input-sizes","link":"#input-sizes","children":[]},{"level":2,"title":"Input icons","slug":"input-icons","link":"#input-icons","children":[]}],"git":{"createdTime":1772365170000,"updatedTime":1772365170000,"contributors":[{"name":"Ulf Gebhardt","email":"ulf.gebhardt@webcraft-media.de","commits":1}]},"readingTime":{"minutes":0.92,"words":277},"filePathRelative":"styleguide/src/system/components/data-input/Input/demo.md","localizedDate":"March 1, 2026","excerpt":"<h2>Basic usage</h2>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-input placeholder=\\"Name ...\\" /></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div></div></div>"}');export{o as comp,h as data};
|