@classic-homes/theme-svelte 1.24.2 → 1.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
2
3
|
import { cn } from '../utils.js';
|
|
3
4
|
import Label from './Label.svelte';
|
|
4
5
|
import Input from './Input.svelte';
|
|
6
|
+
import PasswordInput from './PasswordInput.svelte';
|
|
5
7
|
import Textarea from './Textarea.svelte';
|
|
6
8
|
|
|
7
9
|
interface Props {
|
|
8
10
|
/** Label text */
|
|
9
11
|
label: string;
|
|
12
|
+
/** Content beside the label, e.g. a "Forgot password?" link */
|
|
13
|
+
labelAction?: Snippet;
|
|
10
14
|
/** Input ID for association */
|
|
11
15
|
id: string;
|
|
12
16
|
/** Input type (text, email, password, tel, url, number, date, textarea) */
|
|
@@ -41,6 +45,7 @@
|
|
|
41
45
|
|
|
42
46
|
let {
|
|
43
47
|
label,
|
|
48
|
+
labelAction,
|
|
44
49
|
id,
|
|
45
50
|
type = 'text',
|
|
46
51
|
value = $bindable(''),
|
|
@@ -75,14 +80,25 @@
|
|
|
75
80
|
</script>
|
|
76
81
|
|
|
77
82
|
<div class={cn('space-y-2', className)}>
|
|
83
|
+
{#snippet fieldLabel()}
|
|
84
|
+
<Label for={id} {disabled}>
|
|
85
|
+
{label}
|
|
86
|
+
{#if required}
|
|
87
|
+
<span class="text-destructive ml-0.5" aria-hidden="true">*</span>
|
|
88
|
+
<span class="sr-only">(required)</span>
|
|
89
|
+
{/if}
|
|
90
|
+
</Label>
|
|
91
|
+
{/snippet}
|
|
92
|
+
|
|
78
93
|
<!-- Label with required indicator -->
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
94
|
+
{#if labelAction}
|
|
95
|
+
<div class="flex items-center justify-between gap-2">
|
|
96
|
+
{@render fieldLabel()}
|
|
97
|
+
{@render labelAction()}
|
|
98
|
+
</div>
|
|
99
|
+
{:else}
|
|
100
|
+
{@render fieldLabel()}
|
|
101
|
+
{/if}
|
|
86
102
|
|
|
87
103
|
<!-- Input or Textarea based on type -->
|
|
88
104
|
{#if type === 'textarea'}
|
|
@@ -101,6 +117,23 @@
|
|
|
101
117
|
class={inputClasses}
|
|
102
118
|
{...restProps}
|
|
103
119
|
/>
|
|
120
|
+
{:else if type === 'password'}
|
|
121
|
+
<!-- PasswordInput adds the show/hide toggle a bare type="password" Input lacks -->
|
|
122
|
+
<PasswordInput
|
|
123
|
+
{id}
|
|
124
|
+
bind:value
|
|
125
|
+
{placeholder}
|
|
126
|
+
{disabled}
|
|
127
|
+
{readonly}
|
|
128
|
+
{required}
|
|
129
|
+
{name}
|
|
130
|
+
{autocomplete}
|
|
131
|
+
{onValueChange}
|
|
132
|
+
aria-invalid={error ? 'true' : undefined}
|
|
133
|
+
aria-describedby={ariaDescribedBy}
|
|
134
|
+
class={inputClasses}
|
|
135
|
+
{...restProps}
|
|
136
|
+
/>
|
|
104
137
|
{:else}
|
|
105
138
|
<Input
|
|
106
139
|
{id}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
1
2
|
interface Props {
|
|
2
3
|
/** Label text */
|
|
3
4
|
label: string;
|
|
5
|
+
/** Content beside the label, e.g. a "Forgot password?" link */
|
|
6
|
+
labelAction?: Snippet;
|
|
4
7
|
/** Input ID for association */
|
|
5
8
|
id: string;
|
|
6
9
|
/** Input type (text, email, password, tel, url, number, date, textarea) */
|