@marianmeres/stuic 1.52.0 → 1.54.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.
- package/dist/actions/validate.js +1 -1
- package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte +11 -21
- package/dist/components/DismissibleMessage/DismissibleMessage.svelte +26 -38
- package/dist/components/DismissibleMessage/DismissibleMessage.svelte.d.ts +7 -8
- package/dist/components/Input/Field.svelte +98 -68
- package/dist/components/Input/Field.svelte.d.ts +26 -12
- package/dist/components/Input/FieldCheckbox.svelte +68 -39
- package/dist/components/Input/FieldCheckbox.svelte.d.ts +22 -8
- package/dist/components/Input/FieldRadios.svelte +19 -14
- package/dist/components/Input/FieldRadios.svelte.d.ts +20 -5
- package/dist/components/Input/FieldSelect.svelte +78 -52
- package/dist/components/Input/FieldSelect.svelte.d.ts +26 -10
- package/dist/components/Input/Fieldset.svelte +20 -18
- package/dist/components/Input/Fieldset.svelte.d.ts +8 -2
- package/dist/components/Input/XFieldRadioInternal.svelte +65 -39
- package/dist/components/Input/XFieldRadioInternal.svelte.d.ts +3 -8
- package/dist/components/Notifications/Notifications.svelte +1 -0
- package/dist/index.d.ts +5 -5
- package/dist/index.js +5 -5
- package/dist/utils/omit-pick.d.ts +6 -0
- package/dist/utils/omit-pick.js +10 -0
- package/package.json +1 -1
|
@@ -1,22 +1,36 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import { type ValidateOptions } from '../../index.js';
|
|
2
|
+
import { type THC, type ValidateOptions } from '../../index.js';
|
|
3
|
+
export interface FieldCheckboxConfigClasses {
|
|
4
|
+
box?: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
input?: string;
|
|
7
|
+
invalid?: string;
|
|
8
|
+
validationMessage?: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface FieldCheckboxConfigClassesBySize {
|
|
12
|
+
sm?: FieldCheckboxConfigClasses;
|
|
13
|
+
md?: FieldCheckboxConfigClasses;
|
|
14
|
+
lg?: FieldCheckboxConfigClasses;
|
|
15
|
+
}
|
|
16
|
+
export declare class FieldCheckboxConfig {
|
|
17
|
+
static class: FieldCheckboxConfigClasses;
|
|
18
|
+
static classBySize: FieldCheckboxConfigClassesBySize;
|
|
19
|
+
}
|
|
3
20
|
declare const __propDef: {
|
|
4
21
|
props: {
|
|
5
|
-
class?:
|
|
6
|
-
|
|
7
|
-
labelClass?: string | undefined;
|
|
8
|
-
descriptionClass?: string | undefined;
|
|
22
|
+
class?: FieldCheckboxConfigClasses | undefined;
|
|
23
|
+
classBySize?: FieldCheckboxConfigClassesBySize | undefined;
|
|
9
24
|
size?: "sm" | "md" | "lg" | undefined;
|
|
10
25
|
id?: string | undefined;
|
|
11
26
|
checked?: boolean | undefined;
|
|
12
|
-
label?:
|
|
27
|
+
label?: THC | undefined;
|
|
13
28
|
name?: string | undefined;
|
|
14
|
-
description?:
|
|
29
|
+
description?: THC | undefined;
|
|
15
30
|
tabindex?: number | undefined;
|
|
16
31
|
disabled?: boolean | undefined;
|
|
17
32
|
readonly?: boolean | undefined;
|
|
18
33
|
required?: boolean | undefined;
|
|
19
|
-
validationMessageClass?: string | undefined;
|
|
20
34
|
validate?: ValidateOptions | true | undefined;
|
|
21
35
|
};
|
|
22
36
|
events: {
|
|
@@ -1,15 +1,22 @@
|
|
|
1
|
-
<script>import {
|
|
2
|
-
import
|
|
3
|
-
import { createClog } from "@marianmeres/clog";
|
|
1
|
+
<script context="module">import { createClog } from "@marianmeres/clog";
|
|
2
|
+
import { twMerge } from "tailwind-merge";
|
|
4
3
|
import { getId } from "../../index.js";
|
|
5
|
-
|
|
4
|
+
import XFieldRadioInternal from "./XFieldRadioInternal.svelte";
|
|
5
|
+
export class FieldRadiosConfig {
|
|
6
|
+
static class;
|
|
7
|
+
static classBySize;
|
|
8
|
+
}
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<script>const clog = createClog("FieldRadio");
|
|
6
12
|
export let options = [];
|
|
7
|
-
let _class =
|
|
13
|
+
let _class = {};
|
|
8
14
|
export { _class as class };
|
|
9
|
-
export let
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
15
|
+
export let classBySize = {};
|
|
16
|
+
$:
|
|
17
|
+
if (typeof _class === "string") {
|
|
18
|
+
_class = { group: _class };
|
|
19
|
+
}
|
|
13
20
|
export let size = "md";
|
|
14
21
|
export let name = "";
|
|
15
22
|
export let value;
|
|
@@ -29,7 +36,7 @@ $:
|
|
|
29
36
|
</script>
|
|
30
37
|
|
|
31
38
|
{#if options.length}
|
|
32
|
-
<div class={twMerge(`
|
|
39
|
+
<div class={twMerge(`gap-y-2 grid ${_class.group || ''}`)}>
|
|
33
40
|
{#each _options as o, i}
|
|
34
41
|
<XFieldRadioInternal
|
|
35
42
|
bind:group={value}
|
|
@@ -37,13 +44,11 @@ $:
|
|
|
37
44
|
label={o.label}
|
|
38
45
|
value={o.value || o.label}
|
|
39
46
|
description={o.description}
|
|
40
|
-
class={
|
|
41
|
-
{
|
|
42
|
-
{descriptionClass}
|
|
47
|
+
class={_class}
|
|
48
|
+
{classBySize}
|
|
43
49
|
{disabled}
|
|
44
50
|
{tabindex}
|
|
45
51
|
{required}
|
|
46
|
-
{invalidClass}
|
|
47
52
|
{size}
|
|
48
53
|
/>
|
|
49
54
|
{/each}
|
|
@@ -1,4 +1,22 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
+
export interface FieldRadiosConfigClasses {
|
|
3
|
+
group?: string;
|
|
4
|
+
box?: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
input?: string;
|
|
7
|
+
invalid?: string;
|
|
8
|
+
validationMessage?: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface FieldRadiosConfigClassesBySize {
|
|
12
|
+
sm?: FieldRadiosConfigClasses;
|
|
13
|
+
md?: FieldRadiosConfigClasses;
|
|
14
|
+
lg?: FieldRadiosConfigClasses;
|
|
15
|
+
}
|
|
16
|
+
export declare class FieldRadiosConfig {
|
|
17
|
+
static class: FieldRadiosConfigClasses;
|
|
18
|
+
static classBySize: FieldRadiosConfigClassesBySize;
|
|
19
|
+
}
|
|
2
20
|
declare const __propDef: {
|
|
3
21
|
props: {
|
|
4
22
|
options?: (string | {
|
|
@@ -6,11 +24,8 @@ declare const __propDef: {
|
|
|
6
24
|
value?: string | undefined;
|
|
7
25
|
description?: string | undefined;
|
|
8
26
|
})[] | undefined;
|
|
9
|
-
class?:
|
|
10
|
-
|
|
11
|
-
labelClass?: string | undefined;
|
|
12
|
-
descriptionClass?: string | undefined;
|
|
13
|
-
invalidClass?: string | undefined;
|
|
27
|
+
class?: FieldRadiosConfigClasses | undefined;
|
|
28
|
+
classBySize?: FieldRadiosConfigClassesBySize | undefined;
|
|
14
29
|
size?: "sm" | "md" | "lg" | undefined;
|
|
15
30
|
name?: string | undefined;
|
|
16
31
|
value: any;
|
|
@@ -1,11 +1,43 @@
|
|
|
1
|
-
<script>import { createEventDispatcher } from "svelte";
|
|
1
|
+
<script context="module">import { createEventDispatcher } from "svelte";
|
|
2
2
|
import { slide } from "svelte/transition";
|
|
3
3
|
import { twMerge } from "tailwind-merge";
|
|
4
4
|
import {
|
|
5
5
|
getId,
|
|
6
|
+
Thc,
|
|
6
7
|
validate as validateAction
|
|
7
8
|
} from "../../index.js";
|
|
8
|
-
const
|
|
9
|
+
const _PRESET = {
|
|
10
|
+
box: "mb-4",
|
|
11
|
+
wrap: `
|
|
12
|
+
flex items-center
|
|
13
|
+
rounded-md border border-gray-300
|
|
14
|
+
bg-gray-100
|
|
15
|
+
focus-within:border-stuic-primary
|
|
16
|
+
focus-within:ring-4
|
|
17
|
+
focus-within:ring-stuic-primary
|
|
18
|
+
focus-within:ring-opacity-20
|
|
19
|
+
`,
|
|
20
|
+
input: `
|
|
21
|
+
rounded-md border-0 block w-full flex-1
|
|
22
|
+
bg-transparent
|
|
23
|
+
tracking-tight
|
|
24
|
+
focus:outline-0 focus-visible:ring-0
|
|
25
|
+
placeholder:text-black/35 placeholder:tracking-tight
|
|
26
|
+
`,
|
|
27
|
+
invalid: `border-stuic-primary`,
|
|
28
|
+
validationMessage: `mt-1 text-xs text-stuic-primary px-2 tracking-tight`,
|
|
29
|
+
description: `mx-2 mt-1 text-sm opacity-50`,
|
|
30
|
+
below: `mx-2 mt-1`,
|
|
31
|
+
asterix: `after:content-['*'] after:opacity-30 after:pl-1`
|
|
32
|
+
};
|
|
33
|
+
const _PRESET_BY_SIZE = {};
|
|
34
|
+
export class FieldSelectConfig {
|
|
35
|
+
static class = {};
|
|
36
|
+
static classBySize = {};
|
|
37
|
+
}
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<script>const dispatch = createEventDispatcher();
|
|
9
41
|
const inputSizePreset = {
|
|
10
42
|
sm: "text-sm placeholder:text-sm",
|
|
11
43
|
md: "text-base placeholder:text-base",
|
|
@@ -17,10 +49,9 @@ const labelSizePreset = {
|
|
|
17
49
|
lg: "text-base font-bold"
|
|
18
50
|
};
|
|
19
51
|
export let options = [];
|
|
20
|
-
let _class =
|
|
52
|
+
let _class = {};
|
|
21
53
|
export { _class as class };
|
|
22
|
-
export let
|
|
23
|
-
export let invalidClass = "border-stuic-primary";
|
|
54
|
+
export let classBySize = {};
|
|
24
55
|
export let size = "md";
|
|
25
56
|
export let id = getId();
|
|
26
57
|
export let value;
|
|
@@ -28,12 +59,11 @@ export let label = "";
|
|
|
28
59
|
export let name = "";
|
|
29
60
|
export let tabindex = 0;
|
|
30
61
|
export let description = "";
|
|
31
|
-
export let descriptionClass = "";
|
|
32
62
|
export let disabled = false;
|
|
33
63
|
export let required = false;
|
|
34
64
|
export let autofocus = void 0;
|
|
35
|
-
export let validationMessageClass = "";
|
|
36
65
|
export let validate = void 0;
|
|
66
|
+
export let showAsterixOnRequired = true;
|
|
37
67
|
let validation;
|
|
38
68
|
const setValidationResult = (res) => validation = res;
|
|
39
69
|
let _options = [];
|
|
@@ -51,55 +81,58 @@ let _inputEl;
|
|
|
51
81
|
$:
|
|
52
82
|
if (_inputEl)
|
|
53
83
|
dispatch("input_mounted", _inputEl);
|
|
84
|
+
const _collectClasses = (k, extra = "") => [
|
|
85
|
+
_PRESET?.[k] || "",
|
|
86
|
+
_PRESET_BY_SIZE?.[size]?.[k] || "",
|
|
87
|
+
FieldSelectConfig?.class?.[k] || "",
|
|
88
|
+
FieldSelectConfig?.classBySize?.[size]?.[k] || "",
|
|
89
|
+
extra || "",
|
|
90
|
+
_class?.[k] || "",
|
|
91
|
+
classBySize?.[size]?.[k] || ""
|
|
92
|
+
];
|
|
93
|
+
$:
|
|
94
|
+
_boxClass = twMerge(_collectClasses("box"));
|
|
95
|
+
$:
|
|
96
|
+
_labelClass = twMerge(
|
|
97
|
+
_collectClasses(
|
|
98
|
+
"label",
|
|
99
|
+
showAsterixOnRequired && required ? _collectClasses("asterix").join(" ") : ""
|
|
100
|
+
)
|
|
101
|
+
);
|
|
102
|
+
$:
|
|
103
|
+
_wrapClass = twMerge(
|
|
104
|
+
_collectClasses(
|
|
105
|
+
"wrap",
|
|
106
|
+
validation && !validation.valid ? _collectClasses("invalid").join(" ") : ""
|
|
107
|
+
)
|
|
108
|
+
);
|
|
54
109
|
$:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
`);
|
|
110
|
+
_inputClass = twMerge("form-input", _collectClasses("input"));
|
|
111
|
+
$:
|
|
112
|
+
_validationMessageClass = twMerge(_collectClasses("validationMessage"));
|
|
113
|
+
$:
|
|
114
|
+
_descriptionClass = twMerge(_collectClasses("description"));
|
|
115
|
+
$:
|
|
116
|
+
_belowClass = twMerge(_collectClasses("below"));
|
|
63
117
|
</script>
|
|
64
118
|
|
|
65
|
-
<div class={
|
|
119
|
+
<div class={_boxClass}>
|
|
66
120
|
<div class="flex items-end px-2 mb-1">
|
|
67
121
|
{#if label || $$slots.label}
|
|
68
|
-
<label
|
|
69
|
-
for={id}
|
|
70
|
-
class={twMerge(
|
|
71
|
-
'block flex-1',
|
|
72
|
-
required ? "after:content-['*'] after:opacity-30 after:pl-1" : '',
|
|
73
|
-
labelSizePreset[size]
|
|
74
|
-
)}
|
|
75
|
-
>
|
|
122
|
+
<label for={id} class={_labelClass}>
|
|
76
123
|
{#if $$slots.label}
|
|
77
124
|
<slot name="label" />
|
|
78
125
|
{:else}
|
|
79
|
-
{
|
|
126
|
+
<Thc thc={label} forceAsHtml />
|
|
80
127
|
{/if}
|
|
81
128
|
</label>
|
|
82
129
|
{/if}
|
|
83
130
|
<slot name="right_of_label" />
|
|
84
131
|
</div>
|
|
85
|
-
<div
|
|
86
|
-
class={twMerge(`
|
|
87
|
-
flex items-center
|
|
88
|
-
rounded-md border border-gray-300
|
|
89
|
-
bg-gray-100
|
|
90
|
-
focus-within:border-stuic-primary
|
|
91
|
-
focus-within:ring-4
|
|
92
|
-
focus-within:ring-stuic-primary
|
|
93
|
-
focus-within:ring-opacity-20
|
|
94
|
-
${wrapClass}
|
|
95
|
-
${validation && !validation.valid ? invalidClass : ''}
|
|
96
|
-
`)}
|
|
97
|
-
class:cursor-not-allowed={disabled}
|
|
98
|
-
class:opacity-50={disabled}
|
|
99
|
-
>
|
|
132
|
+
<div class={_wrapClass} class:cursor-not-allowed={disabled} class:opacity-50={disabled}>
|
|
100
133
|
<slot name="input_before" {id} />
|
|
101
134
|
<select
|
|
102
|
-
class={
|
|
135
|
+
class={_inputClass}
|
|
103
136
|
bind:value
|
|
104
137
|
bind:this={_inputEl}
|
|
105
138
|
{disabled}
|
|
@@ -119,23 +152,16 @@ $:
|
|
|
119
152
|
<slot name="input_after" {id} />
|
|
120
153
|
</div>
|
|
121
154
|
{#if validation && !validation?.valid}
|
|
122
|
-
<div
|
|
123
|
-
transition:slide={{ duration: 150 }}
|
|
124
|
-
class={twMerge(
|
|
125
|
-
`mt-1 text-xs text-stuic-primary px-2 tracking-tight ${validationMessageClass}`
|
|
126
|
-
)}
|
|
127
|
-
>
|
|
155
|
+
<div transition:slide={{ duration: 150 }} class={_validationMessageClass}>
|
|
128
156
|
{@html validation.message}
|
|
129
157
|
</div>
|
|
130
158
|
{/if}
|
|
131
159
|
{#if description}
|
|
132
|
-
<div class={
|
|
133
|
-
{
|
|
160
|
+
<div class={_descriptionClass}>
|
|
161
|
+
<Thc thc={description} forceAsHtml />
|
|
134
162
|
</div>
|
|
135
163
|
{/if}
|
|
136
164
|
{#if $$slots.below}
|
|
137
|
-
<div class="
|
|
138
|
-
<slot name="below" {id} />
|
|
139
|
-
</div>
|
|
165
|
+
<div class={_belowClass}><slot name="below" {id} /></div>
|
|
140
166
|
{/if}
|
|
141
167
|
</div>
|
|
@@ -1,31 +1,47 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import { type ValidateOptions } from '../../index.js';
|
|
2
|
+
import { type THC, type ValidateOptions } from '../../index.js';
|
|
3
|
+
export interface FieldSelectConfigClasses {
|
|
4
|
+
box?: string;
|
|
5
|
+
wrap?: string;
|
|
6
|
+
label?: string;
|
|
7
|
+
input?: string;
|
|
8
|
+
invalid?: string;
|
|
9
|
+
validationMessage?: string;
|
|
10
|
+
description?: string;
|
|
11
|
+
below?: string;
|
|
12
|
+
asterix?: string;
|
|
13
|
+
}
|
|
14
|
+
export interface FieldSelectConfigClassesBySize {
|
|
15
|
+
sm?: FieldSelectConfigClasses;
|
|
16
|
+
md?: FieldSelectConfigClasses;
|
|
17
|
+
lg?: FieldSelectConfigClasses;
|
|
18
|
+
}
|
|
19
|
+
export declare class FieldSelectConfig {
|
|
20
|
+
static class: FieldSelectConfigClasses;
|
|
21
|
+
static classBySize: FieldSelectConfigClassesBySize;
|
|
22
|
+
}
|
|
3
23
|
declare const __propDef: {
|
|
4
24
|
props: {
|
|
5
25
|
options?: (string | {
|
|
6
26
|
label: string;
|
|
7
27
|
value?: string | undefined;
|
|
8
28
|
})[] | undefined;
|
|
9
|
-
class?:
|
|
10
|
-
|
|
11
|
-
invalidClass?: string | undefined;
|
|
29
|
+
class?: FieldSelectConfigClasses | undefined;
|
|
30
|
+
classBySize?: FieldSelectConfigClassesBySize | undefined;
|
|
12
31
|
size?: "sm" | "md" | "lg" | undefined;
|
|
13
32
|
id?: string | undefined;
|
|
14
33
|
value: any;
|
|
15
|
-
label?:
|
|
34
|
+
label?: THC | undefined;
|
|
16
35
|
name?: string | undefined;
|
|
17
36
|
tabindex?: number | undefined;
|
|
18
|
-
description?:
|
|
19
|
-
descriptionClass?: string | undefined;
|
|
37
|
+
description?: THC | undefined;
|
|
20
38
|
disabled?: boolean | undefined;
|
|
21
39
|
required?: boolean | undefined;
|
|
22
40
|
autofocus?: true | undefined;
|
|
23
|
-
validationMessageClass?: string | undefined;
|
|
24
41
|
validate?: ValidateOptions | true | undefined;
|
|
42
|
+
showAsterixOnRequired?: boolean | undefined;
|
|
25
43
|
};
|
|
26
44
|
events: {
|
|
27
|
-
input_mounted: CustomEvent<any>;
|
|
28
|
-
} & {
|
|
29
45
|
[evt: string]: CustomEvent<any>;
|
|
30
46
|
};
|
|
31
47
|
slots: {
|
|
@@ -1,26 +1,28 @@
|
|
|
1
|
-
<script>import { twMerge } from "tailwind-merge";
|
|
2
|
-
|
|
1
|
+
<script context="module">import { twMerge } from "tailwind-merge";
|
|
2
|
+
import Thc from "../Thc/Thc.svelte";
|
|
3
|
+
const _PRESET = {
|
|
4
|
+
box: `border border-gray-200 p-4 pt-3 rounded-md`,
|
|
5
|
+
legend: `px-2`
|
|
6
|
+
};
|
|
7
|
+
export class FieldsetConfig {
|
|
8
|
+
static class = {};
|
|
9
|
+
}
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<script>let _class = {};
|
|
3
13
|
export { _class as class };
|
|
4
14
|
export let legend = "";
|
|
5
|
-
|
|
15
|
+
const _collectClasses = (k, extra = "") => [
|
|
16
|
+
_PRESET?.[k] || "",
|
|
17
|
+
FieldsetConfig?.class?.[k] || "",
|
|
18
|
+
_class?.[k] || ""
|
|
19
|
+
];
|
|
6
20
|
</script>
|
|
7
21
|
|
|
8
|
-
<fieldset
|
|
9
|
-
class={twMerge(`
|
|
10
|
-
border border-gray-200
|
|
11
|
-
p-4 pt-3
|
|
12
|
-
rounded-md
|
|
13
|
-
${_class}
|
|
14
|
-
`)}
|
|
15
|
-
>
|
|
22
|
+
<fieldset class={twMerge(_collectClasses('box'))}>
|
|
16
23
|
{#if legend}
|
|
17
|
-
<legend
|
|
18
|
-
|
|
19
|
-
px-2
|
|
20
|
-
${legendClass}
|
|
21
|
-
`)}
|
|
22
|
-
>
|
|
23
|
-
{@html legend}
|
|
24
|
+
<legend class={twMerge(_collectClasses('legend'))}>
|
|
25
|
+
<Thc thc={legend} forceAsHtml />
|
|
24
26
|
</legend>
|
|
25
27
|
{/if}
|
|
26
28
|
<slot />
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
+
export interface FieldsetConfigClasses {
|
|
3
|
+
box?: string;
|
|
4
|
+
legend?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare class FieldsetConfig {
|
|
7
|
+
static class: FieldsetConfigClasses;
|
|
8
|
+
}
|
|
2
9
|
declare const __propDef: {
|
|
3
10
|
props: {
|
|
4
|
-
class?:
|
|
11
|
+
class?: FieldsetConfigClasses | undefined;
|
|
5
12
|
legend?: string | undefined;
|
|
6
|
-
legendClass?: string | undefined;
|
|
7
13
|
};
|
|
8
14
|
events: {
|
|
9
15
|
[evt: string]: CustomEvent<any>;
|
|
@@ -1,16 +1,43 @@
|
|
|
1
|
-
<script>import { twMerge } from "tailwind-merge";
|
|
1
|
+
<script context="module">import { twMerge } from "tailwind-merge";
|
|
2
2
|
import {
|
|
3
3
|
getId,
|
|
4
|
-
validate as validateAction
|
|
4
|
+
validate as validateAction,
|
|
5
|
+
FieldRadiosConfig,
|
|
6
|
+
Thc
|
|
5
7
|
} from "../../index.js";
|
|
6
8
|
import { slide } from "svelte/transition";
|
|
7
9
|
import { createEventDispatcher, onMount } from "svelte";
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
+
const _PRESET = {
|
|
11
|
+
box: "flex items-start",
|
|
12
|
+
label: "block w-full",
|
|
13
|
+
input: `
|
|
14
|
+
size-4 rounded-full
|
|
15
|
+
bg-gray-100
|
|
16
|
+
border-gray-300
|
|
17
|
+
shadow-sm
|
|
18
|
+
text-stuic-primary
|
|
19
|
+
cursor-pointer
|
|
20
|
+
focus:border-stuic-primary
|
|
21
|
+
focus:ring-4
|
|
22
|
+
focus:ring-offset-0
|
|
23
|
+
focus:ring-stuic-primary
|
|
24
|
+
focus:ring-opacity-20
|
|
25
|
+
disabled:cursor-not-allowed
|
|
26
|
+
`,
|
|
27
|
+
validationMessage: "text-xs text-stuic-primary tracking-tight",
|
|
28
|
+
description: "text-sm opacity-50"
|
|
29
|
+
};
|
|
30
|
+
const _PRESET_BY_SIZE = {
|
|
31
|
+
sm: { label: "text-sm" },
|
|
32
|
+
md: { label: "text-base" },
|
|
33
|
+
lg: { label: "text-base font-bold" }
|
|
34
|
+
};
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<script>const dispatch = createEventDispatcher();
|
|
38
|
+
let _class = {};
|
|
10
39
|
export { _class as class };
|
|
11
|
-
export let
|
|
12
|
-
export let labelClass = "";
|
|
13
|
-
export let descriptionClass = "";
|
|
40
|
+
export let classBySize = {};
|
|
14
41
|
export let size = "md";
|
|
15
42
|
export let value;
|
|
16
43
|
export let group;
|
|
@@ -20,12 +47,6 @@ export let description = "";
|
|
|
20
47
|
export let tabindex = 0;
|
|
21
48
|
export let disabled = false;
|
|
22
49
|
export let required = false;
|
|
23
|
-
const labelSizePreset = {
|
|
24
|
-
sm: "text-sm",
|
|
25
|
-
md: "text-base",
|
|
26
|
-
lg: "text-base font-bold"
|
|
27
|
-
};
|
|
28
|
-
export let validationMessageClass = "";
|
|
29
50
|
export let validate = void 0;
|
|
30
51
|
let validation;
|
|
31
52
|
const setValidationResult = (res) => {
|
|
@@ -34,9 +55,33 @@ const setValidationResult = (res) => {
|
|
|
34
55
|
};
|
|
35
56
|
let id = getId();
|
|
36
57
|
let idDesc = getId();
|
|
58
|
+
const _collectClasses = (k, extra = "") => [
|
|
59
|
+
_PRESET?.[k] || "",
|
|
60
|
+
_PRESET_BY_SIZE?.[size]?.[k] || "",
|
|
61
|
+
FieldRadiosConfig?.class?.[k] || "",
|
|
62
|
+
FieldRadiosConfig?.classBySize?.[size]?.[k] || "",
|
|
63
|
+
extra || "",
|
|
64
|
+
_class?.[k] || "",
|
|
65
|
+
classBySize?.[size]?.[k] || ""
|
|
66
|
+
];
|
|
67
|
+
$:
|
|
68
|
+
_boxClass = twMerge(_collectClasses("box"));
|
|
69
|
+
$:
|
|
70
|
+
_inputClass = twMerge(
|
|
71
|
+
_collectClasses(
|
|
72
|
+
"input",
|
|
73
|
+
validation && !validation.valid ? _collectClasses("invalid").join(" ") : ""
|
|
74
|
+
)
|
|
75
|
+
);
|
|
76
|
+
$:
|
|
77
|
+
_labelClass = twMerge(_collectClasses("label"));
|
|
78
|
+
$:
|
|
79
|
+
_validationMessageClass = twMerge(_collectClasses("validationMessage"));
|
|
80
|
+
$:
|
|
81
|
+
_descriptionClass = twMerge(_collectClasses("description"));
|
|
37
82
|
</script>
|
|
38
83
|
|
|
39
|
-
<div class={
|
|
84
|
+
<div class={_boxClass}>
|
|
40
85
|
<div class="flex h-6 items-center ml-1">
|
|
41
86
|
<input
|
|
42
87
|
{id}
|
|
@@ -45,21 +90,7 @@ let idDesc = getId();
|
|
|
45
90
|
bind:group
|
|
46
91
|
aria-describedby={description ? idDesc : undefined}
|
|
47
92
|
{name}
|
|
48
|
-
class={
|
|
49
|
-
size-4 rounded-full
|
|
50
|
-
bg-gray-100
|
|
51
|
-
border-gray-300
|
|
52
|
-
shadow-sm
|
|
53
|
-
text-stuic-primary
|
|
54
|
-
cursor-pointer
|
|
55
|
-
focus:border-stuic-primary
|
|
56
|
-
focus:ring-4
|
|
57
|
-
focus:ring-offset-0
|
|
58
|
-
focus:ring-stuic-primary
|
|
59
|
-
focus:ring-opacity-20
|
|
60
|
-
disabled:cursor-not-allowed
|
|
61
|
-
${validation && !validation.valid ? invalidClass : ''}
|
|
62
|
-
`)}
|
|
93
|
+
class={_inputClass}
|
|
63
94
|
{disabled}
|
|
64
95
|
{required}
|
|
65
96
|
{tabindex}
|
|
@@ -72,32 +103,27 @@ let idDesc = getId();
|
|
|
72
103
|
{#if label}
|
|
73
104
|
<label
|
|
74
105
|
for={id}
|
|
75
|
-
class={
|
|
106
|
+
class={_labelClass}
|
|
76
107
|
class:cursor-pointer={!disabled}
|
|
77
108
|
class:cursor-not-allowed={disabled}
|
|
78
109
|
>
|
|
79
|
-
{
|
|
110
|
+
<Thc thc={label} forceAsHtml />
|
|
80
111
|
</label>
|
|
81
112
|
{/if}
|
|
82
113
|
{#if validation && !validation?.valid}
|
|
83
|
-
<div
|
|
84
|
-
transition:slide={{ duration: 150 }}
|
|
85
|
-
class={twMerge(
|
|
86
|
-
`text-xs text-stuic-primary tracking-tight ${validationMessageClass}`
|
|
87
|
-
)}
|
|
88
|
-
>
|
|
114
|
+
<div transition:slide={{ duration: 150 }} class={_validationMessageClass}>
|
|
89
115
|
{@html validation.message}
|
|
90
116
|
</div>
|
|
91
117
|
{/if}
|
|
92
118
|
{#if description}
|
|
93
119
|
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
|
|
94
120
|
<div
|
|
95
|
-
class={
|
|
121
|
+
class={_descriptionClass}
|
|
96
122
|
class:cursor-pointer={!disabled}
|
|
97
123
|
class:cursor-not-allowed={disabled}
|
|
98
124
|
on:click={() => !disabled && (group = value)}
|
|
99
125
|
>
|
|
100
|
-
{
|
|
126
|
+
<Thc thc={description} forceAsHtml />
|
|
101
127
|
</div>
|
|
102
128
|
{/if}
|
|
103
129
|
</div>
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import { type ValidateOptions } from '../../index.js';
|
|
2
|
+
import { type FieldRadiosConfigClassesBySize, type ValidateOptions, type FieldRadiosConfigClasses } from '../../index.js';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
-
class?:
|
|
6
|
-
|
|
7
|
-
labelClass?: string | undefined;
|
|
8
|
-
descriptionClass?: string | undefined;
|
|
5
|
+
class?: FieldRadiosConfigClasses | undefined;
|
|
6
|
+
classBySize?: FieldRadiosConfigClassesBySize | undefined;
|
|
9
7
|
size?: "sm" | "md" | "lg" | undefined;
|
|
10
8
|
value: any;
|
|
11
9
|
group: any;
|
|
@@ -15,12 +13,9 @@ declare const __propDef: {
|
|
|
15
13
|
tabindex?: number | undefined;
|
|
16
14
|
disabled?: boolean | undefined;
|
|
17
15
|
required?: boolean | undefined;
|
|
18
|
-
validationMessageClass?: string | undefined;
|
|
19
16
|
validate?: ValidateOptions | true | undefined;
|
|
20
17
|
};
|
|
21
18
|
events: {
|
|
22
|
-
validation: CustomEvent<any>;
|
|
23
|
-
} & {
|
|
24
19
|
[evt: string]: CustomEvent<any>;
|
|
25
20
|
};
|
|
26
21
|
slots: {};
|
package/dist/index.d.ts
CHANGED
|
@@ -9,11 +9,11 @@ export { ColorScheme } from './components/ColorScheme/color-scheme.js';
|
|
|
9
9
|
export { default as DismissibleMessage, DismissibleMessageConfig, } from './components/DismissibleMessage/DismissibleMessage.svelte';
|
|
10
10
|
export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
|
|
11
11
|
export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
|
|
12
|
-
export { default as Field } from './components/Input/Field.svelte';
|
|
13
|
-
export { default as FieldCheckbox } from './components/Input/FieldCheckbox.svelte';
|
|
14
|
-
export { default as FieldRadios } from './components/Input/FieldRadios.svelte';
|
|
15
|
-
export { default as FieldSelect } from './components/Input/FieldSelect.svelte';
|
|
16
|
-
export { default as Fieldset } from './components/Input/Fieldset.svelte';
|
|
12
|
+
export { default as Field, FieldConfig, type FieldConfigClasses, } from './components/Input/Field.svelte';
|
|
13
|
+
export { default as FieldCheckbox, FieldCheckboxConfig, type FieldCheckboxConfigClasses, type FieldCheckboxConfigClassesBySize, } from './components/Input/FieldCheckbox.svelte';
|
|
14
|
+
export { default as FieldRadios, FieldRadiosConfig, type FieldRadiosConfigClasses, type FieldRadiosConfigClassesBySize, } from './components/Input/FieldRadios.svelte';
|
|
15
|
+
export { default as FieldSelect, FieldSelectConfig, type FieldSelectConfigClasses, type FieldSelectConfigClassesBySize, } from './components/Input/FieldSelect.svelte';
|
|
16
|
+
export { default as Fieldset, FieldsetConfig, type FieldsetConfigClasses, } from './components/Input/Fieldset.svelte';
|
|
17
17
|
export { createNotificationsStore, NOTIFICATION_EVENT, type NotiticationsCreateStoreOptions, type NotificationCreateParam, type Notification, type NotificationInput, type NotificationType, type NotificationOnEventHandler, type NotificationsSortOrder, type NotificationKnownClasses, } from './components/Notifications/notifications.js';
|
|
18
18
|
export { default as Notifications, NotificationsConfig, } from './components/Notifications/Notifications.svelte';
|
|
19
19
|
export { default as Popover } from './components/Popover/Popover.svelte';
|