@functionalcms/svelte-components 4.10.23 → 4.10.24
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.
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
size = '',
|
|
37
37
|
// Provides bind:checked capabilities that consumer can use
|
|
38
38
|
checked = $bindable([]),
|
|
39
|
-
|
|
39
|
+
...restProps
|
|
40
40
|
}: Partial<Props & HtmlParts> = $props();
|
|
41
41
|
|
|
42
42
|
let labelClasses = $derived(
|
|
@@ -96,29 +96,31 @@
|
|
|
96
96
|
};
|
|
97
97
|
</script>
|
|
98
98
|
|
|
99
|
-
<
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
99
|
+
<div class="w-100">
|
|
100
|
+
<fieldset class={fieldsetClasses}>
|
|
101
|
+
<legend class={legendClasses}>{label}</legend>
|
|
102
|
+
{#each options as { value, label }, index}
|
|
103
|
+
<label
|
|
104
|
+
class={labelClasses}
|
|
105
|
+
class:disabled={isDisabled || disabledOptions.includes(value) || undefined}
|
|
106
|
+
>
|
|
107
|
+
<input
|
|
108
|
+
class={inputClasses}
|
|
109
|
+
id="{id}-{name}-{index}"
|
|
110
|
+
{type}
|
|
111
|
+
{name}
|
|
112
|
+
{value}
|
|
113
|
+
disabled={isDisabled || disabledOptions.includes(value)}
|
|
114
|
+
checked={checkedOptions.includes(value)}
|
|
115
|
+
onchange={onChange}
|
|
116
|
+
{...restProps}
|
|
117
|
+
/>
|
|
118
|
+
<span class={labelSpanClasses} aria-hidden="true"></span>
|
|
119
|
+
<span class={labelCopyClasses}>{label}</span>
|
|
120
|
+
</label>
|
|
121
|
+
{/each}
|
|
122
|
+
</fieldset>
|
|
123
|
+
</div>
|
|
122
124
|
|
|
123
125
|
<style>
|
|
124
126
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { cn } from
|
|
2
|
+
import { cn } from '../../utils.js';
|
|
3
3
|
|
|
4
4
|
interface Props {
|
|
5
5
|
id: string;
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
css = '',
|
|
33
33
|
singleSelected = $bindable(''),
|
|
34
34
|
multiSelected = $bindable([]), // multiSelected can be used for two-way bindings
|
|
35
|
-
selected = () => {}
|
|
35
|
+
selected = () => {}
|
|
36
36
|
}: Partial<Props> = $props();
|
|
37
37
|
|
|
38
38
|
const changeHandler = () => {
|
|
@@ -42,45 +42,45 @@
|
|
|
42
42
|
|
|
43
43
|
let disable = isDisabled;
|
|
44
44
|
let classes = $derived(
|
|
45
|
-
cn(
|
|
46
|
-
|
|
47
|
-
size ? `select-${size}` : '',
|
|
48
|
-
css ? `${css}` : ''));
|
|
45
|
+
cn(isSkinned ? 'select' : 'select-base', size ? `select-${size}` : '', css ? `${css}` : '')
|
|
46
|
+
);
|
|
49
47
|
</script>
|
|
50
48
|
|
|
51
|
-
<
|
|
52
|
-
{
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
49
|
+
<div class="w-100">
|
|
50
|
+
<label for={id}> {label} </label>
|
|
51
|
+
{#if isMultiple}
|
|
52
|
+
<select
|
|
53
|
+
{id}
|
|
54
|
+
class={classes}
|
|
55
|
+
{name}
|
|
56
|
+
disabled={disable}
|
|
57
|
+
multiple
|
|
58
|
+
size={multipleSize}
|
|
59
|
+
bind:value={multiSelected}
|
|
60
|
+
onchange={changeHandler}
|
|
61
|
+
>
|
|
62
|
+
{#each options as { value, label }}
|
|
63
|
+
<option {value}>{label}</option>
|
|
64
|
+
{/each}
|
|
65
|
+
</select>
|
|
66
|
+
{:else}
|
|
67
|
+
<select
|
|
68
|
+
{id}
|
|
69
|
+
class={classes}
|
|
70
|
+
{name}
|
|
71
|
+
disabled={disable}
|
|
72
|
+
bind:value={singleSelected}
|
|
73
|
+
onchange={changeHandler}
|
|
74
|
+
>
|
|
75
|
+
<option value="" disabled selected>
|
|
76
|
+
{defaultOptionLabel}
|
|
77
|
+
</option>
|
|
78
|
+
{#each options as { value, label }}
|
|
79
|
+
<option {value}>{label}</option>
|
|
80
|
+
{/each}
|
|
81
|
+
</select>
|
|
82
|
+
{/if}
|
|
83
|
+
</div>
|
|
84
84
|
|
|
85
85
|
<style>
|
|
86
86
|
.select,
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
}
|
|
16
16
|
let {
|
|
17
17
|
id = '',
|
|
18
|
-
name= '',
|
|
18
|
+
name = '',
|
|
19
19
|
label = '',
|
|
20
20
|
css = '',
|
|
21
21
|
labelPosition = 'left',
|
|
@@ -64,22 +64,24 @@
|
|
|
64
64
|
};
|
|
65
65
|
</script>
|
|
66
66
|
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
67
|
+
<div class="w-100">
|
|
68
|
+
<label class={switchContainer} for={id}>
|
|
69
|
+
{#if labelPosition === 'left'}<span class="switch-label">{label}</span>{/if}
|
|
70
|
+
<input
|
|
71
|
+
type="checkbox"
|
|
72
|
+
class="switch-input"
|
|
73
|
+
{id}
|
|
74
|
+
{name}
|
|
75
|
+
bind:checked={isChecked}
|
|
76
|
+
disabled={isDisabled}
|
|
77
|
+
onclick={handleClick}
|
|
78
|
+
onkeypress={handleKeypress}
|
|
79
|
+
role="switch"
|
|
80
|
+
/>
|
|
81
|
+
<span class={switchSpan()} aria-hidden="true"></span>
|
|
82
|
+
{#if labelPosition === 'right'}<span class="switch-label">{label}</span>{/if}
|
|
83
|
+
</label>
|
|
84
|
+
</div>
|
|
83
85
|
|
|
84
86
|
<style>
|
|
85
87
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@functionalcms/svelte-components",
|
|
3
|
-
"version": "4.10.
|
|
3
|
+
"version": "4.10.24",
|
|
4
4
|
"watch": {
|
|
5
5
|
"build": {
|
|
6
6
|
"patterns": [
|
|
@@ -70,7 +70,8 @@
|
|
|
70
70
|
"ioredis": "^5.6.1",
|
|
71
71
|
"marked": "^15.0.11",
|
|
72
72
|
"oauth4webapi": "^3.5.0",
|
|
73
|
-
"sveltekit-superforms": "^2.25.0"
|
|
73
|
+
"sveltekit-superforms": "^2.25.0",
|
|
74
|
+
"yup": "^1.6.1"
|
|
74
75
|
},
|
|
75
76
|
"peerDependencies": {
|
|
76
77
|
"@sveltejs/kit": "^2.20.8",
|