hr-design-system-handlebars 1.102.1 → 1.102.2
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 +12 -0
- package/dist/assets/index.css +6 -3
- package/dist/views/components/forms/fields.hbs +8 -10
- package/dist/views/components/forms/select.hbs +8 -1
- package/dist/views_static/components/forms/fields.hbs +8 -10
- package/dist/views_static/components/forms/select.hbs +8 -1
- package/package.json +1 -1
- package/src/assets/fixtures/forms/form_fields.inc.json +8 -0
- package/src/assets/fixtures/forms/form_group.json +46 -0
- package/src/stories/views/components/forms/fields.hbs +8 -10
- package/src/stories/views/components/forms/fixtures/form_group.json +1 -0
- package/src/stories/views/components/forms/form_group.stories.js +34 -0
- package/src/stories/views/components/forms/select.hbs +8 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v1.102.2 (Tue Sep 24 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- ✨ Formulargruppen mit und ohne Überschriften [#1076](https://github.com/mumprod/hr-design-system-handlebars/pull/1076) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.102.1 (Tue Sep 24 2024)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1136,6 +1136,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1136
1136
|
.right-0 {
|
|
1137
1137
|
right: 0px;
|
|
1138
1138
|
}
|
|
1139
|
+
.right-14 {
|
|
1140
|
+
right: 3.5rem;
|
|
1141
|
+
}
|
|
1139
1142
|
.right-4 {
|
|
1140
1143
|
right: 1rem;
|
|
1141
1144
|
}
|
|
@@ -3483,7 +3486,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3483
3486
|
border-bottom-color: var(--color-secondary-ds);
|
|
3484
3487
|
}
|
|
3485
3488
|
.counter-reset {
|
|
3486
|
-
counter-reset:
|
|
3489
|
+
counter-reset: cnt1727186810627;
|
|
3487
3490
|
}
|
|
3488
3491
|
.hyphens-auto {
|
|
3489
3492
|
-webkit-hyphens: auto;
|
|
@@ -3891,7 +3894,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3891
3894
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3892
3895
|
}
|
|
3893
3896
|
.-ordered {
|
|
3894
|
-
counter-increment:
|
|
3897
|
+
counter-increment: cnt1727186810627 1;
|
|
3895
3898
|
}
|
|
3896
3899
|
.-ordered::before {
|
|
3897
3900
|
position: absolute;
|
|
@@ -3907,7 +3910,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3907
3910
|
letter-spacing: .0125em;
|
|
3908
3911
|
--tw-text-opacity: 1;
|
|
3909
3912
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3910
|
-
content: counter(
|
|
3913
|
+
content: counter(cnt1727186810627);
|
|
3911
3914
|
}
|
|
3912
3915
|
/*! ****************************/
|
|
3913
3916
|
/*! DataPolicy stuff */
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
{{#each this.fields}}
|
|
2
2
|
{{#if this.type.isGroup}}
|
|
3
3
|
|
|
4
|
-
{{#if this.caption}}
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
{{~> modules/forms/fields}}
|
|
10
|
-
</div>
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<fieldset>
|
|
6
|
+
<legend class="mb-5 font-headingSerif">{{this.caption}}</legend>
|
|
7
|
+
{{~> components/forms/fields}}
|
|
8
|
+
</fieldset>
|
|
11
9
|
{{else}}
|
|
12
|
-
<
|
|
13
|
-
{{~>
|
|
14
|
-
</
|
|
10
|
+
<fieldset>
|
|
11
|
+
{{~> components/forms/fields}}
|
|
12
|
+
</fieldset>
|
|
15
13
|
{{/if}}
|
|
16
14
|
|
|
17
15
|
{{else}}
|
|
@@ -43,9 +43,16 @@
|
|
|
43
43
|
">
|
|
44
44
|
{{_label}}{{#if _required}}*{{/if}}
|
|
45
45
|
</label>
|
|
46
|
+
{{#if _required}}
|
|
47
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
|
|
48
|
+
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
49
|
+
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
{{/if}}
|
|
46
53
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
47
54
|
{{#if _description}}
|
|
48
|
-
<div class="pl-4 text-xs text-gray-500
|
|
55
|
+
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
|
|
49
56
|
{{/if}}
|
|
50
57
|
{{#if _required}}
|
|
51
58
|
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
{{#each this.fields}}
|
|
2
2
|
{{#if this.type.isGroup}}
|
|
3
3
|
|
|
4
|
-
{{#if this.caption}}
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
{{~> modules/forms/fields}}
|
|
10
|
-
</div>
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<fieldset>
|
|
6
|
+
<legend class="mb-5 font-headingSerif">{{this.caption}}</legend>
|
|
7
|
+
{{~> components/forms/fields}}
|
|
8
|
+
</fieldset>
|
|
11
9
|
{{else}}
|
|
12
|
-
<
|
|
13
|
-
{{~>
|
|
14
|
-
</
|
|
10
|
+
<fieldset>
|
|
11
|
+
{{~> components/forms/fields}}
|
|
12
|
+
</fieldset>
|
|
15
13
|
{{/if}}
|
|
16
14
|
|
|
17
15
|
{{else}}
|
|
@@ -43,9 +43,16 @@
|
|
|
43
43
|
">
|
|
44
44
|
{{_label}}{{#if _required}}*{{/if}}
|
|
45
45
|
</label>
|
|
46
|
+
{{#if _required}}
|
|
47
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
|
|
48
|
+
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
49
|
+
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
{{/if}}
|
|
46
53
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
47
54
|
{{#if _description}}
|
|
48
|
-
<div class="pl-4 text-xs text-gray-500
|
|
55
|
+
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
|
|
49
56
|
{{/if}}
|
|
50
57
|
{{#if _required}}
|
|
51
58
|
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
|
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.2",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"fields":[
|
|
3
|
+
{
|
|
4
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
5
|
+
"@->contentpath": "group",
|
|
6
|
+
"@->overrides": [
|
|
7
|
+
{
|
|
8
|
+
"@->contentpath": "fields",
|
|
9
|
+
"@->value": [
|
|
10
|
+
{
|
|
11
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
12
|
+
"@->contentpath": "input-text-vorname-required"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
16
|
+
"@->contentpath": "input-text-nachname-required"
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
24
|
+
"@->contentpath": "group",
|
|
25
|
+
"@->overrides": [
|
|
26
|
+
{
|
|
27
|
+
"@->contentpath": "fields",
|
|
28
|
+
"@->value": [
|
|
29
|
+
{
|
|
30
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
31
|
+
"@->contentpath": "input-text-vorname-required"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
35
|
+
"@->contentpath": "input-text-nachname-required"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"@->contentpath": "caption",
|
|
41
|
+
"@->value": "Noch eine Gruppe mit einer anderen Überschrift"
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
{{#each this.fields}}
|
|
2
2
|
{{#if this.type.isGroup}}
|
|
3
3
|
|
|
4
|
-
{{#if this.caption}}
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
{{~> modules/forms/fields}}
|
|
10
|
-
</div>
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<fieldset>
|
|
6
|
+
<legend class="mb-5 font-headingSerif">{{this.caption}}</legend>
|
|
7
|
+
{{~> components/forms/fields}}
|
|
8
|
+
</fieldset>
|
|
11
9
|
{{else}}
|
|
12
|
-
<
|
|
13
|
-
{{~>
|
|
14
|
-
</
|
|
10
|
+
<fieldset>
|
|
11
|
+
{{~> components/forms/fields}}
|
|
12
|
+
</fieldset>
|
|
15
13
|
{{/if}}
|
|
16
14
|
|
|
17
15
|
{{else}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"fields":[{"type":{"isGroup":true,"asString":"group"},"caption":"Eine Gruppe mit Überschrift","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]},{"type":{"isGroup":true,"asString":"group"},"caption":"Noch eine Gruppe mit einer anderen Überschrift","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
|
|
2
|
+
import groupJson from './fixtures/form_group.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 Gruppe = {
|
|
31
|
+
render: Template.bind({}),
|
|
32
|
+
name: 'Gruppe',
|
|
33
|
+
args: groupJson,
|
|
34
|
+
}
|
|
@@ -43,9 +43,16 @@
|
|
|
43
43
|
">
|
|
44
44
|
{{_label}}{{#if _required}}*{{/if}}
|
|
45
45
|
</label>
|
|
46
|
+
{{#if _required}}
|
|
47
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
|
|
48
|
+
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
49
|
+
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
{{/if}}
|
|
46
53
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
47
54
|
{{#if _description}}
|
|
48
|
-
<div class="pl-4 text-xs text-gray-500
|
|
55
|
+
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
|
|
49
56
|
{{/if}}
|
|
50
57
|
{{#if _required}}
|
|
51
58
|
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
|