svseeds 0.4.4 → 0.4.5
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.
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
validations?: ToggleGroupFieldValidation[];
|
|
17
17
|
status?: string; // bindable <STATE.NEUTRAL>
|
|
18
18
|
style?: SVSStyle;
|
|
19
|
+
name?: string;
|
|
19
20
|
deps?: ToggleGroupFieldDeps;
|
|
20
21
|
[key: string]: unknown | Snippet;
|
|
21
22
|
}
|
|
@@ -40,6 +41,7 @@
|
|
|
40
41
|
validations?: ToggleGroupFieldValidation[];
|
|
41
42
|
status?: string; // bindable <STATE.NEUTRAL>
|
|
42
43
|
style?: SVSStyle;
|
|
44
|
+
name?: string;
|
|
43
45
|
deps?: ToggleGroupFieldDeps;
|
|
44
46
|
[key: string]: unknown | Snippet;
|
|
45
47
|
}
|
|
@@ -60,7 +62,7 @@
|
|
|
60
62
|
</script>
|
|
61
63
|
|
|
62
64
|
<script lang="ts">
|
|
63
|
-
let { options, label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), multiple = true, validations = [], status = $bindable(""), style,
|
|
65
|
+
let { options, label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), multiple = true, validations = [], status = $bindable(""), style, name, deps, ...rest }: ToggleGroupFieldProps = $props();
|
|
64
66
|
|
|
65
67
|
// *** Initialize *** //
|
|
66
68
|
if (!status) status = STATE.NEUTRAL;
|
|
@@ -131,7 +133,7 @@
|
|
|
131
133
|
{@render desc(descFirst)}
|
|
132
134
|
<div class={cls(PARTS.MIDDLE, status)}>
|
|
133
135
|
{@render side(PARTS.LEFT, left)}
|
|
134
|
-
|
|
136
|
+
{@render fnForm()}
|
|
135
137
|
<ToggleGroup bind:values bind:ariaErrMsgId={idMsg} bind:status={neutral} {options} {multiple} {...svsToggleGroup} />
|
|
136
138
|
{@render side(PARTS.RIGHT, right)}
|
|
137
139
|
</div>
|
|
@@ -159,3 +161,9 @@
|
|
|
159
161
|
<div class={cls(PARTS.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
|
|
160
162
|
{/if}
|
|
161
163
|
{/snippet}
|
|
164
|
+
{#snippet fnForm()}
|
|
165
|
+
<input bind:this={element} style="display: none;" aria-hidden="true" {oninvalid} />
|
|
166
|
+
{#each values as value}
|
|
167
|
+
<input type="hidden" {name} {value} />
|
|
168
|
+
{/each}
|
|
169
|
+
{/snippet}
|
|
@@ -12,6 +12,7 @@ export interface ToggleGroupFieldProps {
|
|
|
12
12
|
validations?: ToggleGroupFieldValidation[];
|
|
13
13
|
status?: string;
|
|
14
14
|
style?: SVSStyle;
|
|
15
|
+
name?: string;
|
|
15
16
|
deps?: ToggleGroupFieldDeps;
|
|
16
17
|
[key: string]: unknown | Snippet;
|
|
17
18
|
}
|
|
@@ -42,6 +43,7 @@ import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindP
|
|
|
42
43
|
* validations?: ToggleGroupFieldValidation[];
|
|
43
44
|
* status?: string; // bindable <STATE.NEUTRAL>
|
|
44
45
|
* style?: SVSStyle;
|
|
46
|
+
* name?: string;
|
|
45
47
|
* deps?: ToggleGroupFieldDeps;
|
|
46
48
|
* [key: string]: unknown | Snippet;
|
|
47
49
|
* }
|
|
@@ -51,6 +53,6 @@ import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindP
|
|
|
51
53
|
* type ToggleGroupFieldValidation = (values: string[]) => string;
|
|
52
54
|
* ```
|
|
53
55
|
*/
|
|
54
|
-
declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "
|
|
56
|
+
declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "status" | "values">;
|
|
55
57
|
type ToggleGroupField = ReturnType<typeof ToggleGroupField>;
|
|
56
58
|
export default ToggleGroupField;
|
package/_svseeds/_Toggle.svelte
CHANGED
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
attributes?: HTMLButtonAttributes;
|
|
15
15
|
action?: Action;
|
|
16
16
|
element?: HTMLButtonElement; // bindable
|
|
17
|
+
children?: Snippet;
|
|
17
18
|
}
|
|
18
19
|
```
|
|
19
20
|
-->
|
|
@@ -30,6 +31,7 @@
|
|
|
30
31
|
attributes?: HTMLButtonAttributes;
|
|
31
32
|
action?: Action;
|
|
32
33
|
element?: HTMLButtonElement; // bindable
|
|
34
|
+
children?: Snippet;
|
|
33
35
|
}
|
|
34
36
|
export type ToggleReqdProps = never;
|
|
35
37
|
export type ToggleBindProps = "value" | "status" | "element";
|
|
@@ -44,7 +46,7 @@
|
|
|
44
46
|
</script>
|
|
45
47
|
|
|
46
48
|
<script lang="ts">
|
|
47
|
-
let { main, left, right, value = $bindable(false), type = "button", ariaLabel, status = $bindable(""), style, attributes, action, element = $bindable() }: ToggleProps = $props();
|
|
49
|
+
let { main, left, right, value = $bindable(false), type = "button", ariaLabel, status = $bindable(""), style, attributes, action, element = $bindable(), children }: ToggleProps = $props();
|
|
48
50
|
|
|
49
51
|
// *** Initialize *** //
|
|
50
52
|
if (!status) status = STATE.NEUTRAL;
|
|
@@ -88,6 +90,8 @@
|
|
|
88
90
|
{#snippet contents()}
|
|
89
91
|
{#if main}
|
|
90
92
|
{@render main(status, value, element)}
|
|
93
|
+
{:else if children}
|
|
94
|
+
{@render children()}
|
|
91
95
|
{/if}
|
|
92
96
|
{/snippet}
|
|
93
97
|
{#snippet button(role: string)}
|
|
@@ -10,6 +10,7 @@ export interface ToggleProps {
|
|
|
10
10
|
attributes?: HTMLButtonAttributes;
|
|
11
11
|
action?: Action;
|
|
12
12
|
element?: HTMLButtonElement;
|
|
13
|
+
children?: Snippet;
|
|
13
14
|
}
|
|
14
15
|
export type ToggleReqdProps = never;
|
|
15
16
|
export type ToggleBindProps = "value" | "status" | "element";
|
|
@@ -32,6 +33,7 @@ import { type SVSStyle } from "./core";
|
|
|
32
33
|
* attributes?: HTMLButtonAttributes;
|
|
33
34
|
* action?: Action;
|
|
34
35
|
* element?: HTMLButtonElement; // bindable
|
|
36
|
+
* children?: Snippet;
|
|
35
37
|
* }
|
|
36
38
|
* ```
|
|
37
39
|
*/
|