hr-design-system-handlebars 1.102.3 → 1.102.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.
- package/CHANGELOG.md +26 -0
- package/dist/assets/index.css +22 -5
- package/dist/views/components/forms/choice.hbs +9 -34
- package/dist/views/components/forms/choiceGroup.hbs +41 -0
- package/dist/views/components/forms/fields.hbs +2 -1
- package/dist/views_static/components/forms/choice.hbs +9 -34
- package/dist/views_static/components/forms/choiceGroup.hbs +41 -0
- package/dist/views_static/components/forms/fields.hbs +2 -1
- package/package.json +1 -1
- package/src/assets/fixtures/forms/form_checkbox_grouped.json +8 -0
- package/src/assets/fixtures/forms/form_fields.inc.json +56 -3
- package/src/stories/views/components/forms/choice.hbs +9 -34
- package/src/stories/views/components/forms/choiceGroup.hbs +41 -0
- package/src/stories/views/components/forms/fields.hbs +2 -1
- package/src/stories/views/components/forms/fixtures/form_checkbox.json +1 -1
- package/src/stories/views/components/forms/fixtures/form_checkbox_grouped.json +1 -0
- package/src/stories/views/components/forms/form_checkbox_grouped.stories.js +34 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
# v1.102.5 (Mon Sep 30 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- bugfix: remove old css classes [#1080](https://github.com/mumprod/hr-design-system-handlebars/pull/1080) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
10
|
+
- selbaciri (saad.elbaciri@hr.de)
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# v1.102.4 (Fri Sep 27 2024)
|
|
15
|
+
|
|
16
|
+
#### 🐛 Bug Fix
|
|
17
|
+
|
|
18
|
+
- DPE-3306-b: add checkbox group [#1079](https://github.com/mumprod/hr-design-system-handlebars/pull/1079) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
|
|
19
|
+
|
|
20
|
+
#### Authors: 2
|
|
21
|
+
|
|
22
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
23
|
+
- selbaciri (saad.elbaciri@hr.de)
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
1
27
|
# v1.102.3 (Tue Sep 24 2024)
|
|
2
28
|
|
|
3
29
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -2112,6 +2112,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2112
2112
|
.gap-y-3 {
|
|
2113
2113
|
row-gap: 0.75rem;
|
|
2114
2114
|
}
|
|
2115
|
+
.gap-y-4 {
|
|
2116
|
+
row-gap: 1rem;
|
|
2117
|
+
}
|
|
2115
2118
|
.gap-y-5 {
|
|
2116
2119
|
row-gap: 1.25rem;
|
|
2117
2120
|
}
|
|
@@ -3492,7 +3495,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3492
3495
|
border-bottom-color: var(--color-secondary-ds);
|
|
3493
3496
|
}
|
|
3494
3497
|
.counter-reset {
|
|
3495
|
-
counter-reset:
|
|
3498
|
+
counter-reset: cnt1727684908502;
|
|
3496
3499
|
}
|
|
3497
3500
|
.hyphens-auto {
|
|
3498
3501
|
-webkit-hyphens: auto;
|
|
@@ -3900,7 +3903,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3900
3903
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3901
3904
|
}
|
|
3902
3905
|
.-ordered {
|
|
3903
|
-
counter-increment:
|
|
3906
|
+
counter-increment: cnt1727684908502 1;
|
|
3904
3907
|
}
|
|
3905
3908
|
.-ordered::before {
|
|
3906
3909
|
position: absolute;
|
|
@@ -3916,7 +3919,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3916
3919
|
letter-spacing: .0125em;
|
|
3917
3920
|
--tw-text-opacity: 1;
|
|
3918
3921
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3919
|
-
content: counter(
|
|
3922
|
+
content: counter(cnt1727684908502);
|
|
3920
3923
|
}
|
|
3921
3924
|
/*! ****************************/
|
|
3922
3925
|
/*! DataPolicy stuff */
|
|
@@ -6983,6 +6986,10 @@ input[type="checkbox"]:checked::after {
|
|
|
6983
6986
|
margin-bottom: 0px;
|
|
6984
6987
|
}
|
|
6985
6988
|
|
|
6989
|
+
.md\:mb-12 {
|
|
6990
|
+
margin-bottom: 3rem;
|
|
6991
|
+
}
|
|
6992
|
+
|
|
6986
6993
|
.md\:mb-16 {
|
|
6987
6994
|
margin-bottom: 4rem;
|
|
6988
6995
|
}
|
|
@@ -7177,17 +7184,27 @@ input[type="checkbox"]:checked::after {
|
|
|
7177
7184
|
justify-content: space-between;
|
|
7178
7185
|
}
|
|
7179
7186
|
|
|
7187
|
+
.md\:gap-x-3 {
|
|
7188
|
+
-moz-column-gap: 0.75rem;
|
|
7189
|
+
column-gap: 0.75rem;
|
|
7190
|
+
}
|
|
7191
|
+
|
|
7180
7192
|
.md\:gap-x-6 {
|
|
7181
7193
|
-moz-column-gap: 1.5rem;
|
|
7182
7194
|
column-gap: 1.5rem;
|
|
7183
7195
|
}
|
|
7184
7196
|
|
|
7197
|
+
.md\:gap-x-7 {
|
|
7198
|
+
-moz-column-gap: 1.75rem;
|
|
7199
|
+
column-gap: 1.75rem;
|
|
7200
|
+
}
|
|
7201
|
+
|
|
7185
7202
|
.md\:gap-y-14 {
|
|
7186
7203
|
row-gap: 3.5rem;
|
|
7187
7204
|
}
|
|
7188
7205
|
|
|
7189
|
-
.md\:gap-y-
|
|
7190
|
-
row-gap:
|
|
7206
|
+
.md\:gap-y-5 {
|
|
7207
|
+
row-gap: 1.25rem;
|
|
7191
7208
|
}
|
|
7192
7209
|
|
|
7193
7210
|
.md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-6 gap-y-
|
|
1
|
+
<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5"
|
|
2
2
|
ax-load
|
|
3
3
|
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
|
-
|
|
7
|
-
<div class="flex flex-row items-center w-full gap-x-4">
|
|
8
|
-
|
|
6
|
+
<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
|
|
9
7
|
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
|
|
10
8
|
:class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
|
|
11
9
|
@change="validateInput"
|
|
@@ -47,32 +45,22 @@
|
|
|
47
45
|
{{/if}}
|
|
48
46
|
{{/if~}}
|
|
49
47
|
>
|
|
50
|
-
|
|
51
48
|
<label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
|
|
52
49
|
{{#if _hasBody}}
|
|
53
|
-
{{decorator_body}}{{#if _required}}*{{/if}}
|
|
50
|
+
{{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
54
51
|
{{else}}
|
|
55
52
|
{{#if _locaKey}}
|
|
56
|
-
{{loca _locaKey}}{{#if _required}}*{{/if}}
|
|
53
|
+
{{loca _locaKey}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
57
54
|
{{else}}
|
|
58
55
|
{{#if _label}}
|
|
59
|
-
{{{_label}}}{{#if _required}}*{{/if}}
|
|
56
|
+
{{{_label}}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
60
57
|
{{/if}}
|
|
61
58
|
{{/if}}
|
|
62
59
|
{{/if}}
|
|
63
60
|
</label>
|
|
64
|
-
|
|
65
|
-
{{#
|
|
66
|
-
|
|
67
|
-
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
68
|
-
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
{{/if}}
|
|
72
|
-
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<div class="flex items-end justify-between h-5 font-heading">
|
|
61
|
+
</div>
|
|
62
|
+
{{#unless _inGroup}}
|
|
63
|
+
<div class="font-heading">
|
|
76
64
|
{{#if _description}}
|
|
77
65
|
<div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
78
66
|
{{/if}}
|
|
@@ -80,18 +68,5 @@
|
|
|
80
68
|
<div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
81
69
|
{{/if}}
|
|
82
70
|
</div>
|
|
83
|
-
|
|
84
|
-
<div class="hidden" >
|
|
85
|
-
<b>DEBUGG</b>
|
|
86
|
-
<div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
87
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
88
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
89
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
90
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
91
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
92
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
71
|
+
{{/unless}}
|
|
97
72
|
</div>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<fieldset>
|
|
2
|
+
<div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
|
|
3
|
+
<legend class="text-lg font-bold text-black md:text-xl font-heading">
|
|
4
|
+
{{#if _hasBody}}
|
|
5
|
+
{{decorator_body}}{{#if _required}}*{{/if}}
|
|
6
|
+
{{else}}
|
|
7
|
+
{{#if _locaKey}}
|
|
8
|
+
{{loca _locaKey}}{{#if _required}}*{{/if}}
|
|
9
|
+
{{else}}
|
|
10
|
+
{{#if _label}}
|
|
11
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
12
|
+
{{/if}}
|
|
13
|
+
{{/if}}
|
|
14
|
+
{{/if}}
|
|
15
|
+
</legend>
|
|
16
|
+
<div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
|
|
17
|
+
{{#each _items}}
|
|
18
|
+
<div>
|
|
19
|
+
{{> components/forms/choice
|
|
20
|
+
_type=../_type
|
|
21
|
+
_name=../_name
|
|
22
|
+
_value=this.value
|
|
23
|
+
_inGroup=true
|
|
24
|
+
_label=this.label
|
|
25
|
+
_selected=this.selected
|
|
26
|
+
_title=this.title
|
|
27
|
+
_multipleChoice=../_multipleChoice
|
|
28
|
+
}}
|
|
29
|
+
</div>
|
|
30
|
+
{{/each}}
|
|
31
|
+
</div>
|
|
32
|
+
<div class="font-heading">
|
|
33
|
+
{{#if _description}}
|
|
34
|
+
<div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
35
|
+
{{/if}}
|
|
36
|
+
{{#if _required}}
|
|
37
|
+
<div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
38
|
+
{{/if}}
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</fieldset>
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
}}
|
|
57
57
|
{{else if this.type.isChoice}}
|
|
58
58
|
{{#if this.isGrouped }}
|
|
59
|
-
{{~>
|
|
59
|
+
{{~> components/forms/choiceGroup
|
|
60
60
|
_type=this.type.asString
|
|
61
61
|
_name=this.name
|
|
62
62
|
_label=this.label
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
_required=this.isRequired
|
|
66
66
|
_multipleChoice=../_multipleChoice
|
|
67
67
|
_addClass=../_addClass
|
|
68
|
+
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
68
69
|
|
|
69
70
|
}}
|
|
70
71
|
{{else}}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-6 gap-y-
|
|
1
|
+
<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5"
|
|
2
2
|
ax-load
|
|
3
3
|
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
|
-
|
|
7
|
-
<div class="flex flex-row items-center w-full gap-x-4">
|
|
8
|
-
|
|
6
|
+
<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
|
|
9
7
|
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
|
|
10
8
|
:class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
|
|
11
9
|
@change="validateInput"
|
|
@@ -47,32 +45,22 @@
|
|
|
47
45
|
{{/if}}
|
|
48
46
|
{{/if~}}
|
|
49
47
|
>
|
|
50
|
-
|
|
51
48
|
<label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
|
|
52
49
|
{{#if _hasBody}}
|
|
53
|
-
{{decorator_body}}{{#if _required}}*{{/if}}
|
|
50
|
+
{{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
54
51
|
{{else}}
|
|
55
52
|
{{#if _locaKey}}
|
|
56
|
-
{{loca _locaKey}}{{#if _required}}*{{/if}}
|
|
53
|
+
{{loca _locaKey}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
57
54
|
{{else}}
|
|
58
55
|
{{#if _label}}
|
|
59
|
-
{{{_label}}}{{#if _required}}*{{/if}}
|
|
56
|
+
{{{_label}}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
60
57
|
{{/if}}
|
|
61
58
|
{{/if}}
|
|
62
59
|
{{/if}}
|
|
63
60
|
</label>
|
|
64
|
-
|
|
65
|
-
{{#
|
|
66
|
-
|
|
67
|
-
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
68
|
-
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
{{/if}}
|
|
72
|
-
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<div class="flex items-end justify-between h-5 font-heading">
|
|
61
|
+
</div>
|
|
62
|
+
{{#unless _inGroup}}
|
|
63
|
+
<div class="font-heading">
|
|
76
64
|
{{#if _description}}
|
|
77
65
|
<div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
78
66
|
{{/if}}
|
|
@@ -80,18 +68,5 @@
|
|
|
80
68
|
<div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
81
69
|
{{/if}}
|
|
82
70
|
</div>
|
|
83
|
-
|
|
84
|
-
<div class="hidden" >
|
|
85
|
-
<b>DEBUGG</b>
|
|
86
|
-
<div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
87
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
88
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
89
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
90
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
91
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
92
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
71
|
+
{{/unless}}
|
|
97
72
|
</div>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<fieldset>
|
|
2
|
+
<div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
|
|
3
|
+
<legend class="text-lg font-bold text-black md:text-xl font-heading">
|
|
4
|
+
{{#if _hasBody}}
|
|
5
|
+
{{decorator_body}}{{#if _required}}*{{/if}}
|
|
6
|
+
{{else}}
|
|
7
|
+
{{#if _locaKey}}
|
|
8
|
+
{{loca _locaKey}}{{#if _required}}*{{/if}}
|
|
9
|
+
{{else}}
|
|
10
|
+
{{#if _label}}
|
|
11
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
12
|
+
{{/if}}
|
|
13
|
+
{{/if}}
|
|
14
|
+
{{/if}}
|
|
15
|
+
</legend>
|
|
16
|
+
<div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
|
|
17
|
+
{{#each _items}}
|
|
18
|
+
<div>
|
|
19
|
+
{{> components/forms/choice
|
|
20
|
+
_type=../_type
|
|
21
|
+
_name=../_name
|
|
22
|
+
_value=this.value
|
|
23
|
+
_inGroup=true
|
|
24
|
+
_label=this.label
|
|
25
|
+
_selected=this.selected
|
|
26
|
+
_title=this.title
|
|
27
|
+
_multipleChoice=../_multipleChoice
|
|
28
|
+
}}
|
|
29
|
+
</div>
|
|
30
|
+
{{/each}}
|
|
31
|
+
</div>
|
|
32
|
+
<div class="font-heading">
|
|
33
|
+
{{#if _description}}
|
|
34
|
+
<div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
35
|
+
{{/if}}
|
|
36
|
+
{{#if _required}}
|
|
37
|
+
<div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
38
|
+
{{/if}}
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</fieldset>
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
}}
|
|
57
57
|
{{else if this.type.isChoice}}
|
|
58
58
|
{{#if this.isGrouped }}
|
|
59
|
-
{{~>
|
|
59
|
+
{{~> components/forms/choiceGroup
|
|
60
60
|
_type=this.type.asString
|
|
61
61
|
_name=this.name
|
|
62
62
|
_label=this.label
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
_required=this.isRequired
|
|
66
66
|
_multipleChoice=../_multipleChoice
|
|
67
67
|
_addClass=../_addClass
|
|
68
|
+
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
68
69
|
|
|
69
70
|
}}
|
|
70
71
|
{{else}}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.102.
|
|
9
|
+
"version": "1.102.5",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -91,14 +91,67 @@
|
|
|
91
91
|
"label":"Ich bin damit einverstanden.",
|
|
92
92
|
"isMeta":false,
|
|
93
93
|
"description":"Das ist der Beschreibungstext von Checkbox",
|
|
94
|
-
"isRequired":true
|
|
94
|
+
"isRequired":true
|
|
95
|
+
},
|
|
96
|
+
"checkbox-group":
|
|
97
|
+
{
|
|
98
|
+
"isGrouped":true,
|
|
99
|
+
"type":{
|
|
100
|
+
"isChoice":true,
|
|
101
|
+
"asString":"checkbox"
|
|
102
|
+
},
|
|
103
|
+
"name":"interessen",
|
|
104
|
+
"label":"Wählen Sie Ihre Interessen:",
|
|
105
|
+
"isMeta":false,
|
|
106
|
+
"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.",
|
|
107
|
+
"isRequired":false,
|
|
95
108
|
"options":[
|
|
96
109
|
{
|
|
97
|
-
"value":"
|
|
110
|
+
"value":"sport",
|
|
111
|
+
"label":"sport",
|
|
112
|
+
"title":"sport",
|
|
113
|
+
"isSelected":false
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"value":"musik",
|
|
117
|
+
"label":"musik",
|
|
118
|
+
"title":"musik",
|
|
119
|
+
"isSelected":false
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"value":"lesen",
|
|
123
|
+
"label":"lesen",
|
|
124
|
+
"title":"lesen",
|
|
125
|
+
"isSelected":false
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"value":"reisen",
|
|
129
|
+
"label":"reisen",
|
|
130
|
+
"title":"reisen",
|
|
131
|
+
"isSelected":false
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"value":"kochen",
|
|
135
|
+
"label":"kochen",
|
|
136
|
+
"title":"kochen",
|
|
137
|
+
"isSelected":false
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"value":"filme",
|
|
141
|
+
"label":"filme",
|
|
142
|
+
"title":"filme",
|
|
143
|
+
"isSelected":false
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"value":"tanzen",
|
|
147
|
+
"label":"tanzen",
|
|
148
|
+
"title":"tanzen",
|
|
98
149
|
"isSelected":false
|
|
99
150
|
},
|
|
100
151
|
{
|
|
101
|
-
"value":"
|
|
152
|
+
"value":"fotografie",
|
|
153
|
+
"label":"fotografie",
|
|
154
|
+
"title":"fotografie",
|
|
102
155
|
"isSelected":false
|
|
103
156
|
}
|
|
104
157
|
]
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-6 gap-y-
|
|
1
|
+
<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5"
|
|
2
2
|
ax-load
|
|
3
3
|
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
|
-
|
|
7
|
-
<div class="flex flex-row items-center w-full gap-x-4">
|
|
8
|
-
|
|
6
|
+
<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
|
|
9
7
|
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
|
|
10
8
|
:class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
|
|
11
9
|
@change="validateInput"
|
|
@@ -47,32 +45,22 @@
|
|
|
47
45
|
{{/if}}
|
|
48
46
|
{{/if~}}
|
|
49
47
|
>
|
|
50
|
-
|
|
51
48
|
<label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
|
|
52
49
|
{{#if _hasBody}}
|
|
53
|
-
{{decorator_body}}{{#if _required}}*{{/if}}
|
|
50
|
+
{{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
54
51
|
{{else}}
|
|
55
52
|
{{#if _locaKey}}
|
|
56
|
-
{{loca _locaKey}}{{#if _required}}*{{/if}}
|
|
53
|
+
{{loca _locaKey}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
57
54
|
{{else}}
|
|
58
55
|
{{#if _label}}
|
|
59
|
-
{{{_label}}}{{#if _required}}*{{/if}}
|
|
56
|
+
{{{_label}}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
60
57
|
{{/if}}
|
|
61
58
|
{{/if}}
|
|
62
59
|
{{/if}}
|
|
63
60
|
</label>
|
|
64
|
-
|
|
65
|
-
{{#
|
|
66
|
-
|
|
67
|
-
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
68
|
-
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
{{/if}}
|
|
72
|
-
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<div class="flex items-end justify-between h-5 font-heading">
|
|
61
|
+
</div>
|
|
62
|
+
{{#unless _inGroup}}
|
|
63
|
+
<div class="font-heading">
|
|
76
64
|
{{#if _description}}
|
|
77
65
|
<div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
78
66
|
{{/if}}
|
|
@@ -80,18 +68,5 @@
|
|
|
80
68
|
<div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
81
69
|
{{/if}}
|
|
82
70
|
</div>
|
|
83
|
-
|
|
84
|
-
<div class="hidden" >
|
|
85
|
-
<b>DEBUGG</b>
|
|
86
|
-
<div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
87
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
88
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
89
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
90
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
91
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
92
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
71
|
+
{{/unless}}
|
|
97
72
|
</div>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<fieldset>
|
|
2
|
+
<div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
|
|
3
|
+
<legend class="text-lg font-bold text-black md:text-xl font-heading">
|
|
4
|
+
{{#if _hasBody}}
|
|
5
|
+
{{decorator_body}}{{#if _required}}*{{/if}}
|
|
6
|
+
{{else}}
|
|
7
|
+
{{#if _locaKey}}
|
|
8
|
+
{{loca _locaKey}}{{#if _required}}*{{/if}}
|
|
9
|
+
{{else}}
|
|
10
|
+
{{#if _label}}
|
|
11
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
12
|
+
{{/if}}
|
|
13
|
+
{{/if}}
|
|
14
|
+
{{/if}}
|
|
15
|
+
</legend>
|
|
16
|
+
<div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
|
|
17
|
+
{{#each _items}}
|
|
18
|
+
<div>
|
|
19
|
+
{{> components/forms/choice
|
|
20
|
+
_type=../_type
|
|
21
|
+
_name=../_name
|
|
22
|
+
_value=this.value
|
|
23
|
+
_inGroup=true
|
|
24
|
+
_label=this.label
|
|
25
|
+
_selected=this.selected
|
|
26
|
+
_title=this.title
|
|
27
|
+
_multipleChoice=../_multipleChoice
|
|
28
|
+
}}
|
|
29
|
+
</div>
|
|
30
|
+
{{/each}}
|
|
31
|
+
</div>
|
|
32
|
+
<div class="font-heading">
|
|
33
|
+
{{#if _description}}
|
|
34
|
+
<div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
35
|
+
{{/if}}
|
|
36
|
+
{{#if _required}}
|
|
37
|
+
<div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
38
|
+
{{/if}}
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</fieldset>
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
}}
|
|
57
57
|
{{else if this.type.isChoice}}
|
|
58
58
|
{{#if this.isGrouped }}
|
|
59
|
-
{{~>
|
|
59
|
+
{{~> components/forms/choiceGroup
|
|
60
60
|
_type=this.type.asString
|
|
61
61
|
_name=this.name
|
|
62
62
|
_label=this.label
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
_required=this.isRequired
|
|
66
66
|
_multipleChoice=../_multipleChoice
|
|
67
67
|
_addClass=../_addClass
|
|
68
|
+
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
68
69
|
|
|
69
70
|
}}
|
|
70
71
|
{{else}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"fields":[{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true
|
|
1
|
+
{"fields":[{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"fields":[{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen:","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]}]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
|
|
2
|
+
import checkboxGroupJson from './fixtures/form_checkbox_grouped.json'
|
|
3
|
+
|
|
4
|
+
const handlebars = require('hrHandlebars')
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: 'Komponenten/Formulare',
|
|
9
|
+
decorators: [
|
|
10
|
+
(Story) => {
|
|
11
|
+
return `<div class="grid grid-page">
|
|
12
|
+
<div class="grid bg-white grid-article">
|
|
13
|
+
${Story()}
|
|
14
|
+
</div>
|
|
15
|
+
</div>`
|
|
16
|
+
},
|
|
17
|
+
],
|
|
18
|
+
}
|
|
19
|
+
const Template = (args) => {
|
|
20
|
+
let hbsTemplate = handlebars.compile(`
|
|
21
|
+
{{#>components/forms/backgroundBox }}
|
|
22
|
+
<form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >
|
|
23
|
+
{{> components/forms/fields }}
|
|
24
|
+
</form>
|
|
25
|
+
{{/components/forms/backgroundBox }}
|
|
26
|
+
`)
|
|
27
|
+
return hbsTemplate({ ...args })
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export const Checkbox_gruppe = {
|
|
31
|
+
render: Template.bind({}),
|
|
32
|
+
name: 'Checkbox Gruppe',
|
|
33
|
+
args: checkboxGroupJson,
|
|
34
|
+
}
|