ClintchizandClaude Opus 5
7a2b58652a
Bumps all 47 packages, the root manifest and the VS Code extension to 0.8.6, and rebuilds the editor compiler, language server and extension bundles that embed the version. The release carries the output delivery fix: camelCase outputs now reach parent bindings, and 18 components emit through output.* instead of hand-built CustomEvents. See the 0.8.6 migration entry for what changes for consumers. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
627 lines
24 KiB
Plaintext
627 lines
24 KiB
Plaintext
component InputNumber {
|
|
outputs {
|
|
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
|
|
change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
|
|
increment(payload: { value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
decrement(payload: { value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
variant: string = "default"
|
|
class: string = ""
|
|
|
|
id: string = ""
|
|
name: string = "quantity"
|
|
value: number = 0
|
|
min: string = ""
|
|
max: string = ""
|
|
step: number = 1
|
|
precision: string = "auto"
|
|
|
|
label: string = ""
|
|
description: string = ""
|
|
helpText: string = ""
|
|
error: string = ""
|
|
invalid: boolean = false
|
|
|
|
prefix: string = ""
|
|
suffix: string = ""
|
|
placeholder: string = ""
|
|
autocomplete: string = "off"
|
|
inputMode: string = "decimal"
|
|
ariaLabel: string = ""
|
|
|
|
required: boolean = false
|
|
disabled: boolean = false
|
|
inputDisabled: boolean = false
|
|
buttonsDisabled: boolean = false
|
|
readonly: boolean = false
|
|
allowInput: boolean = true
|
|
keyboard: boolean = true
|
|
wheel: boolean = false
|
|
clamp: boolean = true
|
|
fullWidth: boolean = false
|
|
showButtons: boolean = true
|
|
showValidationMessage: boolean = true
|
|
|
|
decrementLabel: string = "Decrease value"
|
|
incrementLabel: string = "Increase value"
|
|
controlsLabel: string = "Quantity controls"
|
|
requiredMessage: string = "A value is required."
|
|
minMessage: string = "Value is below the minimum."
|
|
maxMessage: string = "Value is above the maximum."
|
|
|
|
}
|
|
|
|
state currentValue = value
|
|
state committedValue = value
|
|
|
|
functions {
|
|
shared function inputId() {
|
|
if (id !== "") {
|
|
return id
|
|
}
|
|
|
|
if (name !== "") {
|
|
return name
|
|
}
|
|
|
|
return "input-number"
|
|
}
|
|
|
|
shared function descriptionId() {
|
|
return inputId() + "-description"
|
|
}
|
|
|
|
shared function messageId() {
|
|
return inputId() + "-message"
|
|
}
|
|
|
|
shared function componentColor() {
|
|
if (color === "secondary") {
|
|
return "var(--wire-color-secondary)"
|
|
}
|
|
|
|
if (color === "success") {
|
|
return "var(--wire-color-success)"
|
|
}
|
|
|
|
if (color === "warning") {
|
|
return "var(--wire-color-warning)"
|
|
}
|
|
|
|
if (color === "danger") {
|
|
return "var(--wire-color-danger)"
|
|
}
|
|
|
|
if (color === "info") {
|
|
return "var(--wire-color-info)"
|
|
}
|
|
|
|
return "var(--wire-color-primary)"
|
|
}
|
|
|
|
shared function hasMin() {
|
|
return min !== "" && min !== null && min !== undefined
|
|
}
|
|
|
|
shared function hasMax() {
|
|
return max !== "" && max !== null && max !== undefined
|
|
}
|
|
|
|
shared function isBlank() {
|
|
return currentValue === "" || currentValue === null || currentValue === undefined
|
|
}
|
|
|
|
shared function normalizedStep() {
|
|
return Number(step) > 0 ? Number(step) : 1
|
|
}
|
|
|
|
shared function inferredPrecision() {
|
|
if (precision !== "auto" && precision !== "") {
|
|
return Math.max(0, Number(precision) || 0)
|
|
}
|
|
|
|
if (String(normalizedStep()).includes(".")) {
|
|
return String(normalizedStep()).split(".")[1].length
|
|
}
|
|
|
|
return 0
|
|
}
|
|
|
|
shared function precisionFactor() {
|
|
return Math.pow(10, inferredPrecision())
|
|
}
|
|
|
|
shared function roundValue(nextValue) {
|
|
return Math.round(Number(nextValue) * precisionFactor()) / precisionFactor()
|
|
}
|
|
|
|
shared function clampValue(nextValue) {
|
|
nextValue = Number(nextValue)
|
|
|
|
if (hasMin() && nextValue < Number(min)) {
|
|
nextValue = Number(min)
|
|
}
|
|
|
|
if (hasMax() && nextValue > Number(max)) {
|
|
nextValue = Number(max)
|
|
}
|
|
|
|
return roundValue(nextValue)
|
|
}
|
|
|
|
shared function isBelowMin() {
|
|
return !isBlank() && hasMin() && Number(currentValue) < Number(min)
|
|
}
|
|
|
|
shared function isAboveMax() {
|
|
return !isBlank() && hasMax() && Number(currentValue) > Number(max)
|
|
}
|
|
|
|
shared function isInvalid() {
|
|
return (
|
|
invalid ||
|
|
error !== "" ||
|
|
(required && isBlank()) ||
|
|
isBelowMin() ||
|
|
isAboveMax()
|
|
)
|
|
}
|
|
|
|
shared function validationMessage() {
|
|
if (error !== "") {
|
|
return error
|
|
}
|
|
|
|
if (required && isBlank()) {
|
|
return requiredMessage
|
|
}
|
|
|
|
if (isBelowMin()) {
|
|
return minMessage
|
|
}
|
|
|
|
if (isAboveMax()) {
|
|
return maxMessage
|
|
}
|
|
|
|
return ""
|
|
}
|
|
|
|
shared function hasMessage() {
|
|
return (
|
|
helpText !== "" ||
|
|
(showValidationMessage && isInvalid() && validationMessage() !== "")
|
|
)
|
|
}
|
|
|
|
shared function describedBy() {
|
|
if (description !== "" && hasMessage()) {
|
|
return descriptionId() + " " + messageId()
|
|
}
|
|
|
|
if (description !== "") {
|
|
return descriptionId()
|
|
}
|
|
|
|
if (hasMessage()) {
|
|
return messageId()
|
|
}
|
|
|
|
return ""
|
|
}
|
|
|
|
shared function decrementDisabled() {
|
|
return (
|
|
disabled ||
|
|
readonly ||
|
|
buttonsDisabled ||
|
|
(hasMin() && !isBlank() && Number(currentValue) <= Number(min))
|
|
)
|
|
}
|
|
|
|
shared function incrementDisabled() {
|
|
return (
|
|
disabled ||
|
|
readonly ||
|
|
buttonsDisabled ||
|
|
(hasMax() && !isBlank() && Number(currentValue) >= Number(max))
|
|
)
|
|
}
|
|
|
|
// Outputs are resolved by name, so each one is written out. Raw
|
|
// CustomEvents dispatched on the root -- what this did before -- never
|
|
// reach a parent @binding.
|
|
client function dispatchInputNumberEvent(
|
|
sourceEvent,
|
|
eventName,
|
|
action,
|
|
previousValue,
|
|
payload
|
|
) {
|
|
payload = {
|
|
component: "InputNumber",
|
|
name: name,
|
|
value: currentValue,
|
|
previousValue: previousValue,
|
|
action: action,
|
|
min: hasMin() ? Number(min) : null,
|
|
max: hasMax() ? Number(max) : null,
|
|
step: normalizedStep(),
|
|
valid: !isInvalid()
|
|
}
|
|
|
|
if (eventName === "input") {
|
|
output.input(payload)
|
|
} else if (eventName === "change") {
|
|
output.change(payload)
|
|
} else if (eventName === "increment") {
|
|
output.increment(payload)
|
|
} else if (eventName === "decrement") {
|
|
output.decrement(payload)
|
|
}
|
|
}
|
|
|
|
client function applyControlValue(nextValue, action, sourceEvent, previousValue) {
|
|
previousValue = currentValue
|
|
currentValue = clampValue(nextValue)
|
|
committedValue = currentValue
|
|
|
|
dispatchInputNumberEvent(
|
|
sourceEvent,
|
|
"input",
|
|
action,
|
|
previousValue
|
|
)
|
|
dispatchInputNumberEvent(
|
|
sourceEvent,
|
|
"change",
|
|
action,
|
|
previousValue
|
|
)
|
|
dispatchInputNumberEvent(
|
|
sourceEvent,
|
|
action,
|
|
action,
|
|
previousValue
|
|
)
|
|
}
|
|
|
|
client function incrementValue(sourceEvent, nextValue) {
|
|
if (incrementDisabled()) {
|
|
return
|
|
}
|
|
|
|
if (isBlank()) {
|
|
nextValue = hasMin() ? Number(min) : normalizedStep()
|
|
} else {
|
|
nextValue =
|
|
Number(currentValue) +
|
|
normalizedStep() * (sourceEvent.shiftKey ? 10 : 1)
|
|
}
|
|
|
|
applyControlValue(nextValue, "increment", sourceEvent)
|
|
}
|
|
|
|
client function decrementValue(sourceEvent, nextValue) {
|
|
if (decrementDisabled()) {
|
|
return
|
|
}
|
|
|
|
if (isBlank()) {
|
|
nextValue = hasMax() ? Number(max) : -normalizedStep()
|
|
} else {
|
|
nextValue =
|
|
Number(currentValue) -
|
|
normalizedStep() * (sourceEvent.shiftKey ? 10 : 1)
|
|
}
|
|
|
|
applyControlValue(nextValue, "decrement", sourceEvent)
|
|
}
|
|
|
|
client function handleInput(sourceEvent, previousValue, nextValue) {
|
|
sourceEvent.stopPropagation()
|
|
previousValue = currentValue
|
|
nextValue = sourceEvent.target.value
|
|
|
|
if (nextValue === "") {
|
|
currentValue = ""
|
|
} else if (!Number.isNaN(Number(nextValue))) {
|
|
currentValue = roundValue(Number(nextValue))
|
|
}
|
|
|
|
dispatchInputNumberEvent(
|
|
sourceEvent,
|
|
"input",
|
|
"input",
|
|
previousValue
|
|
)
|
|
}
|
|
|
|
client function handleChange(sourceEvent, previousValue) {
|
|
sourceEvent.stopPropagation()
|
|
previousValue = committedValue
|
|
|
|
if (!isBlank()) {
|
|
currentValue = clamp
|
|
? clampValue(currentValue)
|
|
: roundValue(currentValue)
|
|
}
|
|
|
|
committedValue = currentValue
|
|
|
|
dispatchInputNumberEvent(
|
|
sourceEvent,
|
|
"change",
|
|
"change",
|
|
previousValue
|
|
)
|
|
}
|
|
|
|
client function handleKeydown(sourceEvent) {
|
|
if (
|
|
!keyboard ||
|
|
disabled ||
|
|
readonly ||
|
|
inputDisabled ||
|
|
!allowInput
|
|
) {
|
|
return
|
|
}
|
|
|
|
if (sourceEvent.key === "ArrowUp") {
|
|
sourceEvent.preventDefault()
|
|
incrementValue(sourceEvent)
|
|
} else if (sourceEvent.key === "ArrowDown") {
|
|
sourceEvent.preventDefault()
|
|
decrementValue(sourceEvent)
|
|
} else if (sourceEvent.key === "Home" && hasMin()) {
|
|
sourceEvent.preventDefault()
|
|
applyControlValue(Number(min), "decrement", sourceEvent)
|
|
} else if (sourceEvent.key === "End" && hasMax()) {
|
|
sourceEvent.preventDefault()
|
|
applyControlValue(Number(max), "increment", sourceEvent)
|
|
}
|
|
}
|
|
|
|
client function handleWheel(sourceEvent) {
|
|
if (
|
|
!wheel ||
|
|
disabled ||
|
|
readonly ||
|
|
inputDisabled ||
|
|
!allowInput
|
|
) {
|
|
return
|
|
}
|
|
|
|
sourceEvent.preventDefault()
|
|
|
|
if (sourceEvent.deltaY < 0) {
|
|
incrementValue(sourceEvent)
|
|
} else if (sourceEvent.deltaY > 0) {
|
|
decrementValue(sourceEvent)
|
|
}
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-wrn-input-number
|
|
data-variant='{variant}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-value='{currentValue}'
|
|
data-invalid='{isInvalid() ? "true" : "false"}'
|
|
data-disabled='{disabled ? "true" : "false"}'
|
|
style='--input-number-accent: {componentColor()};'
|
|
class='relative flex flex-col gap-1.5 text-[var(--wire-color-text)] {fullWidth ? "w-full" : variant === "compact" ? "w-fit max-w-full" : "w-full max-w-sm"} {disabled ? "opacity-60" : ""} {class}'
|
|
>
|
|
{#if label !== "" && variant !== "labeled" && variant !== "seat"}
|
|
<label
|
|
for='{inputId()}'
|
|
class='inline-flex items-center gap-1 text-sm font-semibold leading-5 text-[var(--wire-color-text)]'
|
|
>
|
|
<span>{label}</span>
|
|
{#if required}
|
|
<span
|
|
aria-hidden="true"
|
|
class='text-[var(--wire-color-danger)]'
|
|
>*</span>
|
|
{/if}
|
|
</label>
|
|
{/if}
|
|
|
|
{#if description !== "" && variant !== "labeled" && variant !== "seat"}
|
|
<p
|
|
id='{descriptionId()}'
|
|
class='m-0 text-xs leading-5 text-[var(--wire-color-muted)]'
|
|
>
|
|
{description}
|
|
</p>
|
|
{/if}
|
|
|
|
<div
|
|
class='group flex min-w-0 overflow-hidden border bg-[var(--wire-color-surface)] text-[var(--wire-color-text)] shadow-[var(--wire-shadow-1)] transition-[border-color,box-shadow,background-color] duration-[var(--wire-motion-base)] ease-[var(--wire-ease-standard)] focus-within:border-[var(--input-number-accent)] focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--input-number-accent)_18%,transparent)] {variant === "compact" ? "rounded-full" : "rounded-[var(--wire-radius-sm)]"} {size === "xs" ? "min-h-8 text-xs" : size === "sm" ? "min-h-9 text-sm" : size === "lg" ? "min-h-12 text-base" : size === "xl" ? "min-h-14 text-lg" : "min-h-10 text-sm"} {isInvalid() ? "border-[var(--wire-color-danger)] focus-within:border-[var(--wire-color-danger)] focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--wire-color-danger)_18%,transparent)]" : "border-[var(--wire-color-border)]"} {disabled ? "cursor-not-allowed bg-[var(--wire-color-surface-2)]" : ""}'
|
|
>
|
|
{#if variant === "horizontal" && showButtons}
|
|
<button
|
|
type="button"
|
|
aria-label='{decrementLabel}'
|
|
aria-controls='{inputId()}'
|
|
disabled='{decrementDisabled()}'
|
|
@click='decrementValue(event)'
|
|
class='inline-flex shrink-0 items-center justify-center border-r border-[var(--wire-color-border)] bg-transparent text-[var(--wire-color-muted)] transition-[color,background-color] duration-[var(--wire-motion-fast)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--input-number-accent)] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--input-number-accent)] disabled:cursor-not-allowed disabled:opacity-40 {size === "xs" ? "w-8" : size === "sm" ? "w-9" : size === "lg" ? "w-12" : size === "xl" ? "w-14" : "w-10"}'
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class='icon-[lucide--minus] size-4'
|
|
></span>
|
|
</button>
|
|
{/if}
|
|
|
|
<div
|
|
class='flex min-w-0 flex-1 {variant === "labeled" ? "flex-col items-stretch justify-center gap-0.5" : variant === "seat" ? "items-center justify-between gap-3" : "items-center"} {size === "xs" ? "px-2" : size === "sm" ? "px-2.5" : size === "lg" ? "px-4" : size === "xl" ? "px-5" : "px-3"}'
|
|
>
|
|
{#if variant === "labeled" || variant === "seat"}
|
|
<div class='min-w-0 flex-1'>
|
|
{#if label !== ""}
|
|
<label
|
|
for='{inputId()}'
|
|
class='block truncate font-semibold leading-4 text-[var(--wire-color-text)] {variant === "labeled" ? "text-xs font-medium text-[var(--wire-color-muted)]" : "text-sm"}'
|
|
>
|
|
{label}
|
|
{#if required}
|
|
<span
|
|
aria-hidden="true"
|
|
class='ml-0.5 text-[var(--wire-color-danger)]'
|
|
>*</span>
|
|
{/if}
|
|
</label>
|
|
{/if}
|
|
|
|
{#if description !== ""}
|
|
<span
|
|
id='{descriptionId()}'
|
|
class='block truncate text-xs leading-4 text-[var(--wire-color-muted)]'
|
|
>
|
|
{description}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<div
|
|
class='flex min-w-0 items-center {variant === "seat" ? "w-auto shrink-0" : "w-full"}'
|
|
>
|
|
{#if prefix !== ""}
|
|
<span
|
|
aria-hidden="true"
|
|
class='shrink-0 pr-1.5 text-[var(--wire-color-muted)]'
|
|
>
|
|
{prefix}
|
|
</span>
|
|
{/if}
|
|
|
|
<input
|
|
id='{inputId()}'
|
|
name='{name}'
|
|
type="number"
|
|
value='{currentValue}'
|
|
min='{min}'
|
|
max='{max}'
|
|
step='{normalizedStep()}'
|
|
placeholder='{placeholder}'
|
|
autocomplete='{autocomplete}'
|
|
inputmode='{inputMode}'
|
|
aria-label='{ariaLabel !== "" ? ariaLabel : label !== "" ? label : name}'
|
|
aria-describedby='{describedBy()}'
|
|
aria-invalid='{isInvalid() ? "true" : "false"}'
|
|
aria-required='{required ? "true" : "false"}'
|
|
aria-disabled='{disabled || inputDisabled ? "true" : "false"}'
|
|
required='{required}'
|
|
disabled='{disabled}'
|
|
readonly='{readonly || inputDisabled || !allowInput}'
|
|
tabindex='{inputDisabled ? "-1" : "0"}'
|
|
@input='handleInput(event)'
|
|
@change='handleChange(event)'
|
|
@keydown='handleKeydown(event)'
|
|
@wheel='handleWheel(event)'
|
|
class='min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 font-medium leading-none text-[var(--wire-color-text)] outline-none placeholder:text-[var(--wire-color-muted)] read-only:cursor-default disabled:cursor-not-allowed [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none {variant === "horizontal" || variant === "compact" || variant === "seat" ? "text-center" : "text-left"} {variant === "seat" ? "w-10 flex-none" : "w-full"}'
|
|
/>
|
|
|
|
{#if suffix !== ""}
|
|
<span
|
|
aria-hidden="true"
|
|
class='shrink-0 pl-1.5 text-[var(--wire-color-muted)]'
|
|
>
|
|
{suffix}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if variant === "horizontal" && showButtons}
|
|
<button
|
|
type="button"
|
|
aria-label='{incrementLabel}'
|
|
aria-controls='{inputId()}'
|
|
disabled='{incrementDisabled()}'
|
|
@click='incrementValue(event)'
|
|
class='inline-flex shrink-0 items-center justify-center border-l border-[var(--wire-color-border)] bg-transparent text-[var(--wire-color-muted)] transition-[color,background-color] duration-[var(--wire-motion-fast)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--input-number-accent)] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--input-number-accent)] disabled:cursor-not-allowed disabled:opacity-40 {size === "xs" ? "w-8" : size === "sm" ? "w-9" : size === "lg" ? "w-12" : size === "xl" ? "w-14" : "w-10"}'
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class='icon-[lucide--plus] size-4'
|
|
></span>
|
|
</button>
|
|
{:else}
|
|
{#if showButtons}
|
|
<div
|
|
role="group"
|
|
aria-label='{controlsLabel}'
|
|
class='flex shrink-0 border-l border-[var(--wire-color-border)] {variant === "vertical" ? "flex-col" : "flex-row"}'
|
|
>
|
|
<button
|
|
type="button"
|
|
aria-label='{decrementLabel}'
|
|
aria-controls='{inputId()}'
|
|
disabled='{decrementDisabled()}'
|
|
@click='decrementValue(event)'
|
|
class='inline-flex items-center justify-center bg-transparent text-[var(--wire-color-muted)] transition-[color,background-color] duration-[var(--wire-motion-fast)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--input-number-accent)] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--input-number-accent)] disabled:cursor-not-allowed disabled:opacity-40 {variant === "vertical" ? "flex-1 border-b border-[var(--wire-color-border)]" : "border-r border-[var(--wire-color-border)]"} {size === "xs" ? "w-8" : size === "sm" ? "w-9" : size === "lg" ? "w-12" : size === "xl" ? "w-14" : "w-10"}'
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class='icon-[lucide--minus] size-4'
|
|
></span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
aria-label='{incrementLabel}'
|
|
aria-controls='{inputId()}'
|
|
disabled='{incrementDisabled()}'
|
|
@click='incrementValue(event)'
|
|
class='inline-flex items-center justify-center bg-transparent text-[var(--wire-color-muted)] transition-[color,background-color] duration-[var(--wire-motion-fast)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--input-number-accent)] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--input-number-accent)] disabled:cursor-not-allowed disabled:opacity-40 {variant === "vertical" ? "flex-1" : ""} {size === "xs" ? "w-8" : size === "sm" ? "w-9" : size === "lg" ? "w-12" : size === "xl" ? "w-14" : "w-10"}'
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class='icon-[lucide--plus] size-4'
|
|
></span>
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
{#if showValidationMessage && isInvalid() && validationMessage() !== ""}
|
|
<p
|
|
id='{messageId()}'
|
|
role="alert"
|
|
aria-live="polite"
|
|
class='m-0 flex items-center gap-1.5 text-xs leading-5 text-[var(--wire-color-danger)]'
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class='icon-[lucide--circle-alert] size-3.5 shrink-0'
|
|
></span>
|
|
<span>{validationMessage()}</span>
|
|
</p>
|
|
{/if}
|
|
|
|
{#if (!showValidationMessage || !isInvalid() || validationMessage() === "") && helpText !== ""}
|
|
<p
|
|
id='{messageId()}'
|
|
class='m-0 text-xs leading-5 text-[var(--wire-color-muted)]'
|
|
>
|
|
{helpText}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
}
|
|
}
|