WorkRoot/WRNexusJSDoc
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
19e20408dba87e4c0f544f970f83851f04c6086d
WRNexusJSDoc/app/pages/components/date-picker.wrn
T

103 lines
16 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
page DatePickercomponent {
seo {
title = "DatePicker component"
description = "Theme-aware, responsive date picker component."
}
view {
<div class="docs-shell">
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
<header class="topbar">
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
</header>
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DatePicker</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>DatePicker</h1><p>Theme-aware, responsive date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>25 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DatePicker
size=&quot;default&quot;
color=&quot;primary&quot;
label=&quot;Date Picker&quot;
id=&quot;id&quot;
name=&quot;name&quot;
/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DatePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Date Picker&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;date&quot;</code></td></tr><tr><td><code>locale</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;en-US&quot;</code></td></tr><tr><td><code>firstDayOfWeek</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>months</code></td><td><code>string</code></td><td>Optional</td><td><code>[&#123; label: &quot;Jan&quot;, value: &quot;01&quot; &#125;, &#123; label: &quot;Feb&quot;, value: &quot;02&quot; &#125;, &#123; label: &quot;Mar&quot;, value: &quot;03&quot; &#125;, &#123; label: &quot;Apr&quot;, value: &quot;04&quot; &#125;, &#123; label: &quot;May&quot;, value: &quot;05&quot; &#125;, &#123; label: &quot;Jun&quot;, value: &quot;06&quot; &#125;, &#123; label: &quot;Jul&quot;, value: &quot;07&quot; &#125;, &#123; label: &quot;Aug&quot;, value: &quot;08&quot; &#125;, &#123; label: &quot;Sep&quot;, value: &quot;09&quot; &#125;, &#123; label: &quot;Oct&quot;, value: &quot;10&quot; &#125;, &#123; label: &quot;Nov&quot;, value: &quot;11&quot; &#125;, &#123; label: &quot;Dec&quot;, value: &quot;12&quot; &#125;]</code></td></tr><tr><td><code>days</code></td><td><code>string</code></td><td>Optional</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td></tr><tr><td><code>years</code></td><td><code>string</code></td><td>Optional</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;normal&quot;</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>open</code></li><li><code>close</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DatePicker.wrn</code></p><pre data-language="wrn"><code>component DatePicker &#123;
props &#123;
@event input = function
@event change = function
@event open = function
@event close = function
@event focus = function
@event blur = function
@event invalid = function
size = &quot;default&quot;
color = &quot;primary&quot;
label = &quot;Date Picker&quot;
id = &quot;&quot;
name = &quot;&quot;
value = &quot;&quot;
placeholder = &quot;&quot;
type = &quot;date&quot;
locale = &quot;en-US&quot;
firstDayOfWeek = 0
months = [&#123; label: &quot;Jan&quot;, value: &quot;01&quot; &#125;, &#123; label: &quot;Feb&quot;, value: &quot;02&quot; &#125;, &#123; label: &quot;Mar&quot;, value: &quot;03&quot; &#125;, &#123; label: &quot;Apr&quot;, value: &quot;04&quot; &#125;, &#123; label: &quot;May&quot;, value: &quot;05&quot; &#125;, &#123; label: &quot;Jun&quot;, value: &quot;06&quot; &#125;, &#123; label: &quot;Jul&quot;, value: &quot;07&quot; &#125;, &#123; label: &quot;Aug&quot;, value: &quot;08&quot; &#125;, &#123; label: &quot;Sep&quot;, value: &quot;09&quot; &#125;, &#123; label: &quot;Oct&quot;, value: &quot;10&quot; &#125;, &#123; label: &quot;Nov&quot;, value: &quot;11&quot; &#125;, &#123; label: &quot;Dec&quot;, value: &quot;12&quot; &#125;]
days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
years = [2024, 2025, 2026, 2027, 2028, 2029, 2030]
min = &quot;&quot;
max = &quot;&quot;
step = &quot;&quot;
helperText = &quot;&quot;
cornerHint = &quot;&quot;
error = &quot;&quot;
variant = &quot;normal&quot;
inline = false
readonly = false
disabled = false
required = false
class = &quot;&quot;
&#125;
state currentValue = value
state selectedYear = value ? value.split(&quot;-&quot;)[0] : &quot;&quot;
state selectedMonth = value ? value.split(&quot;-&quot;)[1] : &quot;&quot;
state selectedDay = value ? value.split(&quot;-&quot;)[2] : &quot;&quot;
state expanded = false
functions &#123;
function openCalendar(sourceEvent) &#123; expanded = true; $emit(&quot;open&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
function updateDate(part, nextValue, sourceEvent, nextDate, detail) &#123; if (part === &quot;year&quot;) &#123; selectedYear = String(nextValue) &#125; if (part === &quot;month&quot;) &#123; selectedMonth = String(nextValue).padStart(2, &quot;0&quot;) &#125; if (part === &quot;day&quot;) &#123; selectedDay = String(nextValue).padStart(2, &quot;0&quot;) &#125; if (!selectedYear || !selectedMonth || !selectedDay) &#123; return &#125; nextDate = selectedYear + &quot;-&quot; + selectedMonth + &quot;-&quot; + selectedDay; if ((min &amp;&amp; nextDate &lt; min) || (max &amp;&amp; nextDate &gt; max)) &#123; return &#125; currentValue = nextDate; detail = &#123; value: currentValue, year: selectedYear, month: selectedMonth, day: selectedDay, name: name, sourceEvent: sourceEvent &#125;; $emit(&quot;input&quot;, detail); $emit(&quot;change&quot;, detail) &#125;
function finishDate(sourceEvent) &#123; if (!currentValue) &#123; return &#125; expanded = false; $emit(&quot;close&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
function selectDay(sourceEvent, root, input, nextDate, trigger, detail) &#123; root = sourceEvent.currentTarget.closest(&quot;.wire-next--date-picker&quot;); input = root.querySelector(&quot;.wire-next__picker-value&quot;); nextDate = input.getAttribute(&quot;value&quot;).slice(0, 5) + root.querySelector(&quot;select&quot;).getAttribute(&quot;value&quot;) + &quot;-&quot; + sourceEvent.currentTarget.dataset.value; currentValue = nextDate; input.setAttribute(&quot;value&quot;, nextDate); trigger = root.querySelector(&quot;.wire-next__date-trigger span&quot;); if (trigger) &#123; trigger.replaceChildren(nextDate) &#125; sourceEvent.currentTarget.setAttribute(&quot;aria-pressed&quot;, &quot;true&quot;); detail = &#123; value: nextDate, name: name, sourceEvent: sourceEvent &#125;; $emit(&quot;input&quot;, detail); $emit(&quot;change&quot;, detail) &#125;
function clearDate(sourceEvent, detail) &#123; if (disabled || readonly) &#123; return &#125; currentValue = &quot;&quot;; detail = &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;; $emit(&quot;input&quot;, detail); $emit(&quot;change&quot;, detail) &#125;
function handleFocus(sourceEvent) &#123; $emit(&quot;focus&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
function handleBlur(sourceEvent) &#123; $emit(&quot;blur&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
function handleInvalid(sourceEvent) &#123; $emit(&quot;invalid&quot;, &#123; name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent &#125;) &#125;
&#125;
view &#123;
&lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--date-picker &#123;class&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; data-expanded=&quot;&#123;expanded&#125;&quot;&gt;
&lt;div class=&quot;wire-next__field-heading&quot;&gt;
&lt;label for=&quot;&#123;id || name&#125;&quot;&gt;&#123;label&#125;&lt;/label&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&lt;/div&gt;
&lt;div class=&quot;wire-next__picker-control&quot;&gt;
&lt;input id=&quot;&#123;id || name&#125;&quot; class=&quot;wire-next__sr-only wire-next__picker-value&quot; type=&quot;text&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;currentValue&#125;&quot; required=&quot;&#123;required&#125;&quot; readonly aria-hidden=&quot;true&quot; tabindex=&quot;-1&quot; @invalid=&quot;handleInvalid(event)&quot; /&gt;
&lt;button type=&quot;button&quot; class=&quot;wire-next__date-trigger&quot; disabled=&quot;&#123;disabled || readonly&#125;&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;&#123;expanded&#125;&quot; @click=&quot;openCalendar(event)&quot; @focus=&quot;handleFocus(event)&quot; @blur=&quot;handleBlur(event)&quot;&gt;
&lt;span&gt;&#123;currentValue || placeholder || &quot;Select date&quot;&#125;&lt;/span&gt;
&lt;i class=&quot;icon-[lucide--calendar-days]&quot; aria-hidden=&quot;true&quot;&gt;
&lt;/i&gt;
&lt;/button&gt;&#123;#if currentValue &amp;&amp; !readonly &amp;&amp; !disabled&#125;&lt;button type=&quot;button&quot; class=&quot;wire-next__picker-clear&quot; aria-label=&quot;Clear date&quot; @click=&quot;clearDate(event)&quot;&gt;×&lt;/button&gt;&#123;/if&#125;&lt;/div&gt;
&lt;div class=&quot;wire-next__calendar&quot; role=&quot;dialog&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
&lt;div class=&quot;wire-next__date-selectors&quot;&gt;
&lt;label&gt;Month&lt;select value=&quot;&#123;selectedMonth&#125;&quot; @change=&quot;updateDate('month', event.currentTarget.value, event)&quot;&gt;&#123;#each months as month&#125;&lt;option value=&quot;&#123;month.value&#125;&quot; selected=&quot;&#123;month.value === selectedMonth&#125;&quot;&gt;&#123;month.label&#125;&lt;/option&gt;&#123;/each&#125;&lt;/select&gt;
&lt;/label&gt;
&lt;label&gt;Year&lt;select value=&quot;&#123;selectedYear&#125;&quot; @change=&quot;updateDate('year', event.currentTarget.value, event)&quot;&gt;&#123;#each years as year&#125;&lt;option value=&quot;&#123;year&#125;&quot; selected=&quot;&#123;String(year) === selectedYear&#125;&quot;&gt;&#123;year&#125;&lt;/option&gt;&#123;/each&#125;&lt;/select&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;wire-next__calendar-grid&quot;&gt;&#123;#each days as day&#125;&lt;button type=&quot;button&quot; data-value=&quot;&#123;String(day).padStart(2, '0')&#125;&quot; aria-pressed=&quot;&#123;String(day).padStart(2, '0') === selectedDay&#125;&quot; @click=&quot;selectDay(event)&quot;&gt;&#123;day&#125;&lt;/button&gt;&#123;/each&#125;&lt;/div&gt;
&lt;button type=&quot;button&quot; class=&quot;wire-next__date-done&quot; disabled=&quot;&#123;!currentValue&#125;&quot; @click=&quot;finishDate(event)&quot;&gt;Done&lt;/button&gt;
&lt;/div&gt;
&#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;&lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&gt;
&lt;/div&gt;
&#125;
&#125;
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
<BackToTop />
</div>
}
}
Reference in New Issue View Git Blame Copy Permalink