release: WRNexusJS 0.5.10
This commit is contained in:
@@ -53,7 +53,9 @@ component AvatarGroup {
|
||||
role="group"
|
||||
aria-label="Avatar group"
|
||||
>
|
||||
<div class="wire-next__avatar-group-members">
|
||||
<div
|
||||
class="wire-next__avatar-group-members"
|
||||
>
|
||||
{#each visibleMembers() as item}
|
||||
<span
|
||||
class="wire-next__avatar-group-member"
|
||||
@@ -64,18 +66,35 @@ component AvatarGroup {
|
||||
tabindex="{showTooltips && (item.tooltip || item.name) ? '0' : '-1'}"
|
||||
aria-label="{item.name || item.alt || item.initials || 'Group member'}"
|
||||
>
|
||||
<span class="wire-next__avatar-group-avatar">
|
||||
<span
|
||||
class="wire-next__avatar-group-avatar"
|
||||
>
|
||||
{#if item.src}
|
||||
<img src="{item.src}" alt="{item.alt || item.name || ''}" loading="lazy" />
|
||||
<img
|
||||
src="{item.src}"
|
||||
alt="{item.alt || item.name || ''}"
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else if item.initials}
|
||||
<span aria-hidden="true">{item.initials}</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
>
|
||||
{item.initials}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="icon-[lucide--user-round]" aria-hidden="true"></span>
|
||||
<span
|
||||
class="icon-[lucide--user-round]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
{#if showTooltips && (item.tooltip || item.name)}
|
||||
<span class="wire-next__avatar-group-tooltip" role="tooltip">
|
||||
<span
|
||||
class="wire-next__avatar-group-tooltip"
|
||||
role="tooltip"
|
||||
>
|
||||
{item.tooltip || item.name}
|
||||
</span>
|
||||
{/if}
|
||||
@@ -83,7 +102,9 @@ component AvatarGroup {
|
||||
{/each}
|
||||
|
||||
{#if hiddenMembers().length > 0}
|
||||
<span class="wire-next__avatar-group-overflow">
|
||||
<span
|
||||
class="wire-next__avatar-group-overflow"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="wire-next__avatar-group-overflow-button"
|
||||
@@ -101,10 +122,19 @@ component AvatarGroup {
|
||||
aria-hidden="{overflowOpen ? 'false' : 'true'}"
|
||||
>
|
||||
{#each hiddenMembers() as item}
|
||||
<span class="wire-next__avatar-group-menu-item" role="menuitem">
|
||||
<span class="wire-next__avatar-group-menu-avatar">
|
||||
<span
|
||||
class="wire-next__avatar-group-menu-item"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
class="wire-next__avatar-group-menu-avatar"
|
||||
>
|
||||
{#if item.src}
|
||||
<img src="{item.src}" alt="" loading="lazy" />
|
||||
<img
|
||||
src="{item.src}"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else}
|
||||
<span>{item.initials || '?'}</span>
|
||||
{/if}
|
||||
|
||||
@@ -1,23 +1,53 @@
|
||||
component Dropdown {
|
||||
props {
|
||||
@event toggle = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event select = function
|
||||
@event change = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Dropdown"
|
||||
description = ""
|
||||
open = false
|
||||
placement = "bottom"
|
||||
closeLabel = "Close"
|
||||
label = "Open menu"
|
||||
items = []
|
||||
placement = "end"
|
||||
class = ""
|
||||
}
|
||||
|
||||
functions {
|
||||
function toggleMenu(event) {
|
||||
$emit("toggle", { open: event.currentTarget.open })
|
||||
$emit(event.currentTarget.open ? "open" : "close", { source: "trigger" })
|
||||
}
|
||||
|
||||
function selectItem(item) {
|
||||
$emit("select", { item: item, value: item.value || "" })
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--dropdown wire-next--placement-{placement} {class}" role="region" aria-modal="false" aria-label="{title}">
|
||||
<header><strong>{title}</strong><button type="button" aria-label="{closeLabel}">×</button></header>
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
<slot />
|
||||
</div>
|
||||
<details class="wire-dropdown wire-dropdown--{placement} wire-next--color-{color} wire-next--size-{size} {class}" data-wrn-dropdown @toggle="toggleMenu($event)">
|
||||
<summary aria-label="{label}">
|
||||
<slot name="trigger" />
|
||||
<span class="wire-dropdown__chevron icon-[lucide--chevron-down]" aria-hidden="true"></span>
|
||||
</summary>
|
||||
<div class="wire-dropdown__panel" role="menu" aria-label="{label}">
|
||||
<slot name="header" />
|
||||
{#each items as item}
|
||||
{#if item.type === "divider"}
|
||||
<hr />
|
||||
{:else}
|
||||
{#if item.type === "header"}
|
||||
<span class="wire-dropdown__heading">{item.label}</span>
|
||||
{:else}
|
||||
<a class="wire-dropdown__item {item.danger ? 'wire-dropdown__item--danger' : ''}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" role="menuitem" @click="selectItem(item)">
|
||||
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
|
||||
<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
|
||||
{#if item.external}<span class="icon-[lucide--arrow-up-right]" aria-hidden="true"></span>{/if}
|
||||
</a>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</details>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,18 +3,138 @@ component Navbar {
|
||||
@event toggle = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event select = function
|
||||
@event action = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Navbar"
|
||||
label = "Primary navigation"
|
||||
topbarLabel = "Utility navigation"
|
||||
brand = {}
|
||||
items = []
|
||||
actions = []
|
||||
active = ""
|
||||
orientation = "horizontal"
|
||||
sticky = false
|
||||
openOnHover = false
|
||||
maxWidth = "full"
|
||||
mobileLabel = "Toggle navigation"
|
||||
class = ""
|
||||
}
|
||||
|
||||
state mobileOpen = false
|
||||
|
||||
functions {
|
||||
function toggleNavigation() {
|
||||
mobileOpen = !mobileOpen
|
||||
$emit("toggle", { open: mobileOpen })
|
||||
$emit(mobileOpen ? "open" : "close", { source: "mobile" })
|
||||
}
|
||||
|
||||
function selectItem(item, level) {
|
||||
mobileOpen = false
|
||||
$emit("select", { item: item, value: item.value || "", level: level })
|
||||
}
|
||||
|
||||
function selectAction(item) {
|
||||
mobileOpen = false
|
||||
$emit("action", { item: item, value: item.value || "" })
|
||||
}
|
||||
|
||||
function isItemActive(item) {
|
||||
if (!item) return false
|
||||
if (item.value && item.value === active) return true
|
||||
if (!item.children || !item.children.length) return false
|
||||
return item.children.some(function (child) {
|
||||
return isItemActive(child)
|
||||
})
|
||||
}
|
||||
|
||||
function toggleDropdown(event, item) {
|
||||
$emit(event.currentTarget.open ? "open" : "close", {
|
||||
source: "menu",
|
||||
item: item
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<nav class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--navbar wire-next--{orientation} {class}" aria-label="{label}">
|
||||
{#each items as item}<a href="{item.href}" aria-current="{item.value === active ? 'page' : ''}">{item.label}</a>{/each}
|
||||
<slot />
|
||||
</nav>
|
||||
<header class="wire-navbar wire-navbar--width-{maxWidth} wire-next--color-{color} wire-next--size-{size} {sticky ? 'wire-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}">
|
||||
<div class="wire-navbar__topbar" aria-label="{topbarLabel}">
|
||||
<slot name="topbar" />
|
||||
</div>
|
||||
|
||||
<div class="wire-navbar__main">
|
||||
<a class="wire-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}">
|
||||
{#if brand.logo}
|
||||
<img class="wire-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}" />
|
||||
{/if}
|
||||
{#if brand.icon}
|
||||
<span class="wire-navbar__brand-icon {brand.icon}" aria-hidden="true"></span>
|
||||
{/if}
|
||||
{#if brand.label || brand.description}
|
||||
<span class="wire-navbar__brand-copy">
|
||||
{#if brand.label}<strong>{brand.label}</strong>{/if}
|
||||
{#if brand.description}<small>{brand.description}</small>{/if}
|
||||
</span>
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
<button type="button" class="wire-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
|
||||
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
|
||||
</button>
|
||||
|
||||
<div class="wire-navbar__collapse {mobileOpen ? 'is-open' : ''}">
|
||||
<nav class="wire-navbar__menus" aria-label="{label}">
|
||||
{#each items as item}
|
||||
{#if item.children && item.children.length}
|
||||
<details class="wire-navbar__dropdown wire-navbar__dropdown--{item.type || 'dropdown'}" name="wire-navbar-menu" @toggle="toggleDropdown($event, item)">
|
||||
<summary aria-current="{isItemActive(item) ? 'page' : ''}">
|
||||
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
|
||||
<span>{item.label}</span>
|
||||
<span class="wire-navbar__chevron" aria-hidden="true"></span>
|
||||
</summary>
|
||||
<div class="wire-navbar__panel wire-navbar__panel--columns-{item.columns || 1}">
|
||||
{#if item.description}<p class="wire-navbar__panel-intro">{item.description}</p>{/if}
|
||||
{#each item.children as child}
|
||||
<div class="wire-navbar__group">
|
||||
{#if child.children && child.children.length}
|
||||
{#if child.label}<strong class="wire-navbar__group-title">{child.label}</strong>{/if}
|
||||
{#if child.description}<small>{child.description}</small>{/if}
|
||||
{#each child.children as nested}
|
||||
<a href="{nested.href || '#'}" target="{nested.target || ''}" rel="{nested.rel || ''}" aria-current="{nested.value === active ? 'page' : ''}" @click="selectItem(nested, 3)">
|
||||
{#if nested.icon}<span class="{nested.icon}" aria-hidden="true"></span>{/if}
|
||||
<span><strong>{nested.label}</strong>{#if nested.description}<small>{nested.description}</small>{/if}</span>
|
||||
</a>
|
||||
{/each}
|
||||
{:else}
|
||||
<a href="{child.href || '#'}" target="{child.target || ''}" rel="{child.rel || ''}" aria-current="{child.value === active ? 'page' : ''}" @click="selectItem(child, 2)">
|
||||
{#if child.icon}<span class="{child.icon}" aria-hidden="true"></span>{/if}
|
||||
<span><strong>{child.label}</strong>{#if child.description}<small>{child.description}</small>{/if}</span>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</details>
|
||||
{:else}
|
||||
<a class="wire-navbar__menu-link" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{item.value === active ? 'page' : ''}" @click="selectItem(item, 1)">
|
||||
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<div class="wire-navbar__actions">
|
||||
{#each actions as item}
|
||||
<a class="wire-navbar__action wire-navbar__action--{item.variant || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectAction(item)">
|
||||
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,18 +3,77 @@ component Sidebar {
|
||||
@event toggle = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event select = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Sidebar"
|
||||
items = []
|
||||
active = ""
|
||||
orientation = "horizontal"
|
||||
mobileLabel = "Open navigation"
|
||||
class = ""
|
||||
}
|
||||
|
||||
state mobileOpen = false
|
||||
|
||||
functions {
|
||||
function toggleSidebar() {
|
||||
mobileOpen = !mobileOpen
|
||||
$emit("toggle", { open: mobileOpen })
|
||||
$emit(mobileOpen ? "open" : "close", { source: "mobile" })
|
||||
}
|
||||
|
||||
function closeSidebar() {
|
||||
mobileOpen = false
|
||||
$emit("close", { source: "mobile" })
|
||||
}
|
||||
|
||||
function selectItem(item, level) {
|
||||
mobileOpen = false
|
||||
$emit("select", { item: item, value: item.value || "", level: level })
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<nav class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--sidebar wire-next--{orientation} {class}" aria-label="{label}">
|
||||
{#each items as item}<a href="{item.href}" aria-current="{item.value === active ? 'page' : ''}">{item.label}</a>{/each}
|
||||
<slot />
|
||||
</nav>
|
||||
<div class="wire-sidebar-shell wire-next--color-{color} wire-next--size-{size} {mobileOpen ? 'is-open' : ''} {class}">
|
||||
<button type="button" class="wire-sidebar-toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleSidebar()">
|
||||
<span class="icon-[lucide--panel-left-open]" aria-hidden="true"></span>
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
<button type="button" class="wire-sidebar-backdrop" aria-label="Close navigation" @click="closeSidebar()"></button>
|
||||
<nav class="wire-next wire-next--sidebar wire-next--{orientation} wire-sidebar-panel" aria-label="{label}">
|
||||
<div class="wire-sidebar-panel__head">
|
||||
<strong>{label}</strong>
|
||||
<button type="button" aria-label="Close navigation" @click="closeSidebar()"><span class="icon-[lucide--x]" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
<div class="wire-sidebar-items">
|
||||
{#each items as item}
|
||||
{#if item.children && item.children.length}
|
||||
<details class="wire-sidebar-group" name="wire-sidebar-group">
|
||||
<summary>
|
||||
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
|
||||
<span>{item.label}</span>
|
||||
<span class="icon-[lucide--chevron-down]" aria-hidden="true"></span>
|
||||
</summary>
|
||||
<div class="wire-sidebar-group__children">
|
||||
{#each item.children as child}
|
||||
<a href="{child.href || '#'}" aria-current="{child.value === active ? 'page' : ''}" @click="selectItem(child, 2)">
|
||||
{#if child.icon}<span class="{child.icon}" aria-hidden="true"></span>{/if}
|
||||
<span>{child.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</details>
|
||||
{:else}
|
||||
<a href="{item.href || '#'}" aria-current="{item.value === active ? 'page' : ''}" @click="selectItem(item, 1)">
|
||||
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<slot />
|
||||
</nav>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,25 +38,136 @@ component Checkbox {
|
||||
function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
|
||||
}
|
||||
view {
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--checkbox-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-orientation="{orientation}" data-card="{card}" data-list="{list}" data-right-aligned="{rightAligned}">
|
||||
<div class="wire-next__field-heading">{#if options.length || cornerHint}<span class="{hiddenLabel ? 'wire-next__sr-only' : ''}">{label}</span>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}{/if}</div>
|
||||
<div
|
||||
{...attrs}
|
||||
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--checkbox-field {class}"
|
||||
data-inline="{inline}"
|
||||
data-invalid="{error ? 'true' : 'false'}"
|
||||
data-orientation="{orientation}"
|
||||
data-card="{card}"
|
||||
data-list="{list}"
|
||||
data-right-aligned="{rightAligned}"
|
||||
>
|
||||
<div
|
||||
class="wire-next__field-heading"
|
||||
>
|
||||
{#if options.length || cornerHint}
|
||||
<span
|
||||
class="{hiddenLabel ? 'wire-next__sr-only' : ''}"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
{#if cornerHint}
|
||||
<span
|
||||
class="wire-next__field-hint"
|
||||
>
|
||||
{cornerHint}
|
||||
</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{#if options.length}
|
||||
<div class="wire-next__checkbox-group" role="group" aria-label="{hiddenLabel ? label : ''}" aria-invalid="{error ? 'true' : 'false'}">
|
||||
<div
|
||||
class="wire-next__checkbox-group"
|
||||
role="group"
|
||||
aria-label="{hiddenLabel ? label : ''}"
|
||||
aria-invalid="{error ? 'true' : 'false'}"
|
||||
>
|
||||
{#each options as option}
|
||||
<label class="wire-next__choice wire-next--checkbox" for="{id || name}-{option.value}" data-variant="{variant}" data-disabled="{disabled || option.disabled}">
|
||||
<input id="{id || name}-{option.value}" type="checkbox" name="{name}" value="{option.value}" checked="{values.includes(option.value) || option.checked}" disabled="{disabled || option.disabled}" required="{required}" readonly="{readonly}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
|
||||
<span class="wire-next__choice-copy"><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
|
||||
<label
|
||||
class="wire-next__choice wire-next--checkbox"
|
||||
for="{id || name}-{option.value}"
|
||||
data-variant="{variant}"
|
||||
data-disabled="{disabled || option.disabled}"
|
||||
>
|
||||
<input
|
||||
id="{id || name}-{option.value}"
|
||||
type="checkbox"
|
||||
name="{name}"
|
||||
value="{option.value}"
|
||||
checked="{values.includes(option.value) || option.checked}"
|
||||
disabled="{disabled || option.disabled}"
|
||||
required="{required}"
|
||||
readonly="{readonly}"
|
||||
@click="preventReadonly(event)"
|
||||
@input="emitField('input', event)"
|
||||
@change="emitField('change', event)"
|
||||
@focus="emitField('focus', event)"
|
||||
@blur="emitField('blur', event)"
|
||||
@invalid="emitField('invalid', event)"
|
||||
/>
|
||||
<span
|
||||
class="wire-next__choice-copy"
|
||||
>
|
||||
<strong>{option.label}</strong>
|
||||
{#if option.description}
|
||||
<small>{option.description}</small>
|
||||
{/if}
|
||||
</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<label class="wire-next__choice wire-next--checkbox" for="{id || name}" data-variant="{variant}" data-icon-position="{iconPosition}">
|
||||
<input id="{id || name}" type="checkbox" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-checked="{indeterminate ? 'mixed' : (checked ? 'true' : 'false')}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
|
||||
{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}
|
||||
<span class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}">{label}</span>
|
||||
</label>
|
||||
<div
|
||||
class="wire-next__checkbox-content"
|
||||
>
|
||||
<label
|
||||
class="wire-next__choice wire-next--checkbox"
|
||||
for="{id || name}"
|
||||
data-variant="{variant}"
|
||||
data-icon-position="{iconPosition}"
|
||||
>
|
||||
<input
|
||||
id="{id || name}"
|
||||
type="checkbox"
|
||||
name="{name}"
|
||||
value="{value}"
|
||||
checked="{checked}"
|
||||
disabled="{disabled}"
|
||||
required="{required}"
|
||||
readonly="{readonly}"
|
||||
aria-checked="{indeterminate ? 'mixed' : (checked ? 'true' : 'false')}"
|
||||
aria-invalid="{error ? 'true' : 'false'}"
|
||||
@click="preventReadonly(event)"
|
||||
@input="emitField('input', event)"
|
||||
@change="emitField('change', event)"
|
||||
@focus="emitField('focus', event)"
|
||||
@blur="emitField('blur', event)"
|
||||
@invalid="emitField('invalid', event)"
|
||||
/>
|
||||
{#if icon}
|
||||
<span
|
||||
class="{icon}"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
<span
|
||||
class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
<div
|
||||
class="wire-next__checkbox-slot"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
{#if helperText}
|
||||
<small
|
||||
class="wire-next__field-help"
|
||||
>
|
||||
{helperText}
|
||||
</small>
|
||||
{/if}
|
||||
<small
|
||||
class="wire-next__field-error"
|
||||
data-error="{name}"
|
||||
>
|
||||
{error}
|
||||
</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user