30 lines
16 KiB
JavaScript
30 lines
16 KiB
JavaScript
import{_ as o,C as t,o as p,c as r,k as a,a as s,H as n,Q as e}from"./chunks/framework.4313453f.js";const B=JSON.parse('{"title":"Input","description":"","frontmatter":{},"headers":[],"relativePath":"references/input.md","filePath":"references/input.md","lastUpdated":null}'),c={name:"references/input.md"},d=e(`<h1 id="input" tabindex="-1">Input <a class="header-anchor" href="#input" aria-label="Permalink to "Input""></a></h1><p>Input elements allow users to enter text or data. They are commonly used in forms and text entry fields to gather user input.</p><p>Input inherit from <a href="./visualelement.html">VisualElement</a> and <a href="./element.html">BasicElement</a></p><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to "Properties""></a></h2><table><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>value</td><td>string</td><td>The current text inside the input field.</td></tr><tr><td>cursorIndex</td><td>number</td><td>Position of the cursor within the text.</td></tr><tr><td>scrollIndex</td><td>number</td><td>The index from which the visible text starts, useful for longer inputs.</td></tr><tr><td>inputLimit</td><td>number</td><td>Maximum number of characters the input field can accept.</td></tr><tr><td>inputType</td><td>string</td><td>Defines the nature of input, e.g., 'text', 'password', 'number'.</td></tr><tr><td>placeholderText</td><td>string</td><td>Placeholder text, which is beeing displayed when there's no value.</td></tr><tr><td>placeholderColor</td><td>color</td><td>Text color for placedholder text.</td></tr><tr><td>placeholderBackground</td><td>color</td><td>Background color for placeholder text.</td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to "Events""></a></h2><table><thead><tr><th>Method</th><th>Returns</th><th>Description</th></tr></thead><tbody><tr><td><a href="#onchange">onChange</a></td><td>self</td><td>Gets triggered as soon as the value changes.</td></tr></tbody></table><h2 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to "Methods""></a></h2><table><thead><tr><th>Method</th><th>Returns</th><th>Description</th></tr></thead><tbody><tr><td><a href="#setplaceholder">setPlaceholder</a></td><td>self</td><td>Changes placeholder text, color and background.</td></tr><tr><td><a href="#getplaceholder">getPlaceholder</a></td><td>multiple</td><td>Returns placeholder text, color and background.</td></tr></tbody></table><h2 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to "Example""></a></h2><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> main </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">getMainFrame</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> userInput </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addInput</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0;">userInput</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setInputLimit</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">12</span><span style="color:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="color:#B392F0;">userInput</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setInputType</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"password"</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> main </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">getMainFrame</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> userInput </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addInput</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#6F42C1;">userInput</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setInputLimit</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">12</span><span style="color:#24292E;">)</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">userInput</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setInputType</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"password"</span><span style="color:#24292E;">)</span></span></code></pre></div></details>`,11),i={id:"onchange",tabindex:"-1"},h=a("a",{class:"header-anchor",href:"#onchange","aria-label":'Permalink to "onChange <C content="onChange"/>"'},"",-1),y=e(`<p>Registers a new custom event listener which triggers on value change.</p><h3 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-label="Permalink to "Parameters""></a></h3><ol><li><code>function</code> - The function to call when the event triggers.</li></ol><h3 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to "Returns""></a></h3><ol><li><code>self</code> - The element itself.</li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> main </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">getMainFrame</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> input </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addInput</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">valueChange</span><span style="color:#E1E4E8;">(self, value)</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">debug</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"Value has changed to "</span><span style="color:#F97583;">..</span><span style="color:#E1E4E8;">value)</span></span>
|
||
<span class="line"><span style="color:#F97583;">end</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">onChange</span><span style="color:#E1E4E8;">(valueChange)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> main </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">getMainFrame</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> input </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addInput</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">valueChange</span><span style="color:#24292E;">(self, value)</span></span>
|
||
<span class="line"><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">debug</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"Value has changed to "</span><span style="color:#D73A49;">..</span><span style="color:#24292E;">value)</span></span>
|
||
<span class="line"><span style="color:#D73A49;">end</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">onChange</span><span style="color:#24292E;">(valueChange)</span></span></code></pre></div></details>`,6),E={id:"setplaceholder",tabindex:"-1"},u=a("a",{class:"header-anchor",href:"#setplaceholder","aria-label":'Permalink to "setPlaceholder <C content="setPlaceholder"/>"'},"",-1),m=e(`<p>Changes the placeholder text, color and background.</p><h3 id="parameters-1" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-1" aria-label="Permalink to "Parameters""></a></h3><ol><li><code>string</code> - The placeholder text.</li><li><code>color?</code> - The text color of the placeholder text.</li><li><code>color?</code> - The background color.</li></ol><h3 id="returns-1" tabindex="-1">Returns <a class="header-anchor" href="#returns-1" aria-label="Permalink to "Returns""></a></h3><ol><li><code>self</code> - The element itself.</li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> main </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">getMainFrame</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addInput</span><span style="color:#E1E4E8;">():</span><span style="color:#79B8FF;">setPlaceholder</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"..."</span><span style="color:#E1E4E8;">, colors.</span><span style="color:#B392F0;">gray</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> main </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">getMainFrame</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addInput</span><span style="color:#24292E;">():</span><span style="color:#005CC5;">setPlaceholder</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"..."</span><span style="color:#24292E;">, colors.</span><span style="color:#6F42C1;">gray</span><span style="color:#24292E;">)</span></span></code></pre></div></details>`,6),g={id:"getplaceholder",tabindex:"-1"},F=a("a",{class:"header-anchor",href:"#getplaceholder","aria-label":'Permalink to "getPlaceholder <C content="getPlaceholder"/>"'},"",-1),C=e(`<p>Returns the placeholder text, color and background.</p><h3 id="returns-2" tabindex="-1">Returns <a class="header-anchor" href="#returns-2" aria-label="Permalink to "Returns""></a></h3><ol><li><code>string</code> - The placeholder text.</li><li><code>color</code> - The text color of the placeholder text.</li><li><code>color</code> - The background color.</li></ol><details class="details custom-block"><summary>Click to see example</summary><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> main </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">getMainFrame</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> input </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addInput</span><span style="color:#E1E4E8;">():</span><span style="color:#79B8FF;">setPlaceholder</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"..."</span><span style="color:#E1E4E8;">, colors.</span><span style="color:#B392F0;">gray</span><span style="color:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">basalt.</span><span style="color:#79B8FF;">debug</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">getPlaceholder</span><span style="color:#E1E4E8;">())</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> main </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">getMainFrame</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> input </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addInput</span><span style="color:#24292E;">():</span><span style="color:#005CC5;">setPlaceholder</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"..."</span><span style="color:#24292E;">, colors.</span><span style="color:#6F42C1;">gray</span><span style="color:#24292E;">)</span></span>
|
||
<span class="line"><span style="color:#24292E;">basalt.</span><span style="color:#005CC5;">debug</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">getPlaceholder</span><span style="color:#24292E;">())</span></span></code></pre></div></details>`,4);function b(_,f,x,k,P,v){const l=t("C");return p(),r("div",null,[d,a("h2",i,[s("onChange "),n(l,{content:"onChange"}),s(),h]),y,a("h2",E,[s("setPlaceholder "),n(l,{content:"setPlaceholder"}),s(),u]),m,a("h2",g,[s("getPlaceholder "),n(l,{content:"getPlaceholder"}),s(),F]),C])}const q=o(c,[["render",b]]);export{B as __pageData,q as default};
|