hr-design-system-handlebars 1.100.6 → 1.100.8
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 +24 -0
- package/dist/assets/index.css +22 -3
- package/dist/assets/js/alpine.js +2 -0
- package/dist/assets/js/components/forms/inputHandler.alpine.js +30 -0
- package/dist/assets/js/components/social_sharing/socialSharingHandler.alpine.js +0 -1
- package/dist/views/components/forms/fields.hbs +1 -1
- package/dist/views/components/forms/input.hbs +98 -0
- package/dist/views/components/forms/textarea.hbs +19 -9
- package/dist/views_static/components/forms/fields.hbs +1 -1
- package/dist/views_static/components/forms/input.hbs +98 -0
- package/dist/views_static/components/forms/textarea.hbs +19 -9
- package/package.json +1 -1
- package/src/assets/js/alpine.js +2 -0
- package/src/stories/views/components/forms/fields.hbs +1 -1
- package/src/stories/views/components/forms/input.hbs +98 -0
- package/src/stories/views/components/forms/inputHandler.alpine.js +30 -0
- package/src/stories/views/components/forms/textarea.hbs +19 -9
- package/src/stories/views/components/social_sharing/socialSharingHandler.alpine.js +0 -1
- package/dist/views/components/forms/input_single_line.hbs +0 -117
- package/dist/views_static/components/forms/input_single_line.hbs +0 -117
- package/src/stories/views/components/forms/input_single_line.hbs +0 -117
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.100.8 (Wed Sep 18 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- 🎨 Form Validation as lazy loaded async script [#1070](https://github.com/mumprod/hr-design-system-handlebars/pull/1070) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.100.7 (Tue Sep 17 2024)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- DPE-3358 Falsche Vorschau beim Sharing von Dokumenten [#1069](https://github.com/mumprod/hr-design-system-handlebars/pull/1069) ([@Sunny1112358](https://github.com/Sunny1112358))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- [@Sunny1112358](https://github.com/Sunny1112358)
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.100.6 (Tue Sep 17 2024)
|
|
2
26
|
|
|
3
27
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -2198,6 +2198,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2198
2198
|
.rounded-lg {
|
|
2199
2199
|
border-radius: 0.5rem;
|
|
2200
2200
|
}
|
|
2201
|
+
.rounded-b {
|
|
2202
|
+
border-bottom-right-radius: 0.25rem;
|
|
2203
|
+
border-bottom-left-radius: 0.25rem;
|
|
2204
|
+
}
|
|
2201
2205
|
.rounded-l {
|
|
2202
2206
|
border-top-left-radius: 0.25rem;
|
|
2203
2207
|
border-bottom-left-radius: 0.25rem;
|
|
@@ -2259,6 +2263,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2259
2263
|
.border-t {
|
|
2260
2264
|
border-top-width: 1px;
|
|
2261
2265
|
}
|
|
2266
|
+
.border-t-0 {
|
|
2267
|
+
border-top-width: 0px;
|
|
2268
|
+
}
|
|
2262
2269
|
.border-t-\[3px\] {
|
|
2263
2270
|
border-top-width: 3px;
|
|
2264
2271
|
}
|
|
@@ -2348,6 +2355,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2348
2355
|
border-color: #005293;
|
|
2349
2356
|
border-color: var(--color-primary-ds);
|
|
2350
2357
|
}
|
|
2358
|
+
.border-red-400 {
|
|
2359
|
+
--tw-border-opacity: 1;
|
|
2360
|
+
border-color: rgba(248, 113, 113, var(--tw-border-opacity));
|
|
2361
|
+
}
|
|
2351
2362
|
.border-red-500 {
|
|
2352
2363
|
--tw-border-opacity: 1;
|
|
2353
2364
|
border-color: rgba(239, 68, 68, var(--tw-border-opacity));
|
|
@@ -2545,6 +2556,14 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2545
2556
|
background-color: #005293;
|
|
2546
2557
|
background-color: var(--color-primary-ds);
|
|
2547
2558
|
}
|
|
2559
|
+
.bg-red-100 {
|
|
2560
|
+
--tw-bg-opacity: 1;
|
|
2561
|
+
background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
|
|
2562
|
+
}
|
|
2563
|
+
.bg-red-500 {
|
|
2564
|
+
--tw-bg-opacity: 1;
|
|
2565
|
+
background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
|
|
2566
|
+
}
|
|
2548
2567
|
.bg-slate-200 {
|
|
2549
2568
|
--tw-bg-opacity: 1;
|
|
2550
2569
|
background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
|
|
@@ -3435,7 +3454,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3435
3454
|
border-bottom-color: var(--color-secondary-ds);
|
|
3436
3455
|
}
|
|
3437
3456
|
.counter-reset {
|
|
3438
|
-
counter-reset:
|
|
3457
|
+
counter-reset: cnt1726656177379;
|
|
3439
3458
|
}
|
|
3440
3459
|
.hyphens-auto {
|
|
3441
3460
|
-webkit-hyphens: auto;
|
|
@@ -3843,7 +3862,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3843
3862
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3844
3863
|
}
|
|
3845
3864
|
.-ordered {
|
|
3846
|
-
counter-increment:
|
|
3865
|
+
counter-increment: cnt1726656177379 1;
|
|
3847
3866
|
}
|
|
3848
3867
|
.-ordered::before {
|
|
3849
3868
|
position: absolute;
|
|
@@ -3859,7 +3878,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3859
3878
|
letter-spacing: .0125em;
|
|
3860
3879
|
--tw-text-opacity: 1;
|
|
3861
3880
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3862
|
-
content: counter(
|
|
3881
|
+
content: counter(cnt1726656177379);
|
|
3863
3882
|
}
|
|
3864
3883
|
/*! ****************************/
|
|
3865
3884
|
/*! DataPolicy stuff */
|
package/dist/assets/js/alpine.js
CHANGED
|
@@ -17,7 +17,9 @@ AsyncAlpine.init(Alpine)
|
|
|
17
17
|
.data('slider', () =>
|
|
18
18
|
import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
|
|
19
19
|
)
|
|
20
|
+
|
|
20
21
|
.data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
|
|
22
|
+
.data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
|
|
21
23
|
.start()
|
|
22
24
|
|
|
23
25
|
window.Alpine = Alpine
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export default function inputHandler(element, errorMandatory, errorEmail, isEmail = false, prefilledText = '') {
|
|
2
|
+
return {
|
|
3
|
+
[element]: prefilledText,
|
|
4
|
+
valid: false,
|
|
5
|
+
wasFocused: false,
|
|
6
|
+
isFocused: false,
|
|
7
|
+
validEmail: false,
|
|
8
|
+
errorMessage() {
|
|
9
|
+
if( Boolean(isEmail)){
|
|
10
|
+
return !this.valid ? errorMandatory : errorEmail
|
|
11
|
+
} else {
|
|
12
|
+
return errorMandatory
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
hideDescription() {
|
|
16
|
+
if( Boolean(isEmail)){
|
|
17
|
+
return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))
|
|
18
|
+
} else {
|
|
19
|
+
return Boolean(!this.valid && this.wasFocused && !this.isFocused)
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
hideError() {
|
|
23
|
+
return Boolean(!this.hideDescription())
|
|
24
|
+
},
|
|
25
|
+
validateEmail() {
|
|
26
|
+
var emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
|
|
27
|
+
this.validEmail = emailRegex.test( this[element]);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
+
ax-load
|
|
3
|
+
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_errorEmail}}',{{#if _isEmail}}true{{else}}false{{/if}},'{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
|
|
4
|
+
x-ignore
|
|
5
|
+
>
|
|
6
|
+
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
7
|
+
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
8
|
+
x-model="input{{getRandom}}"
|
|
9
|
+
id="input{{getRandom}}"
|
|
10
|
+
{{#if _required}}
|
|
11
|
+
@focus="isFocused = true;"
|
|
12
|
+
@blur="wasFocused = true; isFocused=false"
|
|
13
|
+
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
14
|
+
{{/if}}
|
|
15
|
+
type="{{#if _type}}{{_type}}{{/if}}"
|
|
16
|
+
name="{{#if _name}}{{_name}}{{/if}}"
|
|
17
|
+
{{#if _locaKey}}
|
|
18
|
+
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
19
|
+
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
20
|
+
{{else}}
|
|
21
|
+
{{#if _label}}
|
|
22
|
+
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
23
|
+
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
24
|
+
{{/if}}
|
|
25
|
+
{{/if}}
|
|
26
|
+
{{#if _formField.forHtmlAttribute}}
|
|
27
|
+
value="{{_formField.forHtmlAttribute}}"
|
|
28
|
+
{{else}}
|
|
29
|
+
{{#if _value}}
|
|
30
|
+
value="{{_value}}"
|
|
31
|
+
{{else}}
|
|
32
|
+
value="{{_defaultValue}}"
|
|
33
|
+
{{/if}}
|
|
34
|
+
{{/if}}
|
|
35
|
+
{{#if _maxLength}}
|
|
36
|
+
maxlength="{{_maxLength}}"
|
|
37
|
+
{{/if~}}
|
|
38
|
+
{{#if _required}} required{{/if}}
|
|
39
|
+
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
40
|
+
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
41
|
+
{{#if _autoSuggestFeature}}
|
|
42
|
+
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
43
|
+
>
|
|
44
|
+
|
|
45
|
+
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
46
|
+
|
|
47
|
+
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
48
|
+
|
|
49
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
50
|
+
{{#if _hasBody}}
|
|
51
|
+
{{decorator_body}}
|
|
52
|
+
{{else}}
|
|
53
|
+
{{#if _locaKey}}
|
|
54
|
+
{{loca _locaKey}}
|
|
55
|
+
{{else}}
|
|
56
|
+
{{#if _label}}
|
|
57
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
58
|
+
{{/if}}
|
|
59
|
+
{{/if}}
|
|
60
|
+
{{/if}}
|
|
61
|
+
</label>
|
|
62
|
+
{{#if _required}}
|
|
63
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
+
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
65
|
+
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
{{/if}}
|
|
69
|
+
<div class="flex items-end justify-between h-5 font-heading">
|
|
70
|
+
{{#if _description}}
|
|
71
|
+
<div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
72
|
+
{{/if}}
|
|
73
|
+
{{#if _required}}
|
|
74
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
75
|
+
{{/if}}
|
|
76
|
+
{{#if _maxLength}}
|
|
77
|
+
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
78
|
+
{{/if~}}
|
|
79
|
+
</div>
|
|
80
|
+
<div class="hidden">
|
|
81
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
82
|
+
DEBUG
|
|
83
|
+
</div>
|
|
84
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
85
|
+
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
86
|
+
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
87
|
+
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
88
|
+
<div>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
89
|
+
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
90
|
+
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
91
|
+
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
92
|
+
<div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
|
|
93
|
+
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
94
|
+
<div>prefilledText:<span x-text="prefilledText" class="font-bold" ></span></div>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
<textarea
|
|
4
4
|
x-model="textarea{{getRandom}}"
|
|
5
5
|
id="textarea{{getRandom}}"
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
{{#if _required}}
|
|
7
|
+
@focus="isFocused = true"
|
|
8
|
+
@blur="wasFocused = true; isFocused=false"
|
|
9
|
+
x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
10
|
+
{{/if}}
|
|
9
11
|
value=""
|
|
10
12
|
name="{{#if _name}}{{_name}}{{/if}}"
|
|
11
13
|
{{#if _locaKey}}
|
|
@@ -28,7 +30,9 @@
|
|
|
28
30
|
{{/if~}}
|
|
29
31
|
{{#if _required}}required{{/if}}
|
|
30
32
|
class="relative w-full px-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
|
|
31
|
-
|
|
33
|
+
{{#if _required}}
|
|
34
|
+
:class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused && !isFocused}"
|
|
35
|
+
{{/if}}
|
|
32
36
|
>{{#if _formField.isValid}}
|
|
33
37
|
{{{_formField.forHtmlContent}}}
|
|
34
38
|
{{else}}
|
|
@@ -62,16 +66,22 @@
|
|
|
62
66
|
<div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
|
|
63
67
|
{{/if}}
|
|
64
68
|
{{#if _required}}
|
|
65
|
-
<div class="hidden pl-4 text-xs
|
|
69
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
|
|
66
70
|
{{/if}}
|
|
67
71
|
{{#if _maxLength}}
|
|
68
72
|
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
69
73
|
{{/if~}}
|
|
70
74
|
</div>
|
|
75
|
+
|
|
71
76
|
<div class="hidden">
|
|
72
|
-
<div>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<div
|
|
77
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
78
|
+
DEBUG
|
|
79
|
+
</div>
|
|
80
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
81
|
+
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
+
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
+
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
84
|
+
<div>input.length:<span x-text="textarea{{getRandom}}.length " class="font-bold" ></span></div>
|
|
85
|
+
</div>
|
|
76
86
|
</div>
|
|
77
87
|
</div>
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
+
ax-load
|
|
3
|
+
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_errorEmail}}',{{#if _isEmail}}true{{else}}false{{/if}},'{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
|
|
4
|
+
x-ignore
|
|
5
|
+
>
|
|
6
|
+
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
7
|
+
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
8
|
+
x-model="input{{getRandom}}"
|
|
9
|
+
id="input{{getRandom}}"
|
|
10
|
+
{{#if _required}}
|
|
11
|
+
@focus="isFocused = true;"
|
|
12
|
+
@blur="wasFocused = true; isFocused=false"
|
|
13
|
+
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
14
|
+
{{/if}}
|
|
15
|
+
type="{{#if _type}}{{_type}}{{/if}}"
|
|
16
|
+
name="{{#if _name}}{{_name}}{{/if}}"
|
|
17
|
+
{{#if _locaKey}}
|
|
18
|
+
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
19
|
+
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
20
|
+
{{else}}
|
|
21
|
+
{{#if _label}}
|
|
22
|
+
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
23
|
+
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
24
|
+
{{/if}}
|
|
25
|
+
{{/if}}
|
|
26
|
+
{{#if _formField.forHtmlAttribute}}
|
|
27
|
+
value="{{_formField.forHtmlAttribute}}"
|
|
28
|
+
{{else}}
|
|
29
|
+
{{#if _value}}
|
|
30
|
+
value="{{_value}}"
|
|
31
|
+
{{else}}
|
|
32
|
+
value="{{_defaultValue}}"
|
|
33
|
+
{{/if}}
|
|
34
|
+
{{/if}}
|
|
35
|
+
{{#if _maxLength}}
|
|
36
|
+
maxlength="{{_maxLength}}"
|
|
37
|
+
{{/if~}}
|
|
38
|
+
{{#if _required}} required{{/if}}
|
|
39
|
+
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
40
|
+
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
41
|
+
{{#if _autoSuggestFeature}}
|
|
42
|
+
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
43
|
+
>
|
|
44
|
+
|
|
45
|
+
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
46
|
+
|
|
47
|
+
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
48
|
+
|
|
49
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
50
|
+
{{#if _hasBody}}
|
|
51
|
+
{{decorator_body}}
|
|
52
|
+
{{else}}
|
|
53
|
+
{{#if _locaKey}}
|
|
54
|
+
{{loca _locaKey}}
|
|
55
|
+
{{else}}
|
|
56
|
+
{{#if _label}}
|
|
57
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
58
|
+
{{/if}}
|
|
59
|
+
{{/if}}
|
|
60
|
+
{{/if}}
|
|
61
|
+
</label>
|
|
62
|
+
{{#if _required}}
|
|
63
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
+
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
65
|
+
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
{{/if}}
|
|
69
|
+
<div class="flex items-end justify-between h-5 font-heading">
|
|
70
|
+
{{#if _description}}
|
|
71
|
+
<div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
72
|
+
{{/if}}
|
|
73
|
+
{{#if _required}}
|
|
74
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
75
|
+
{{/if}}
|
|
76
|
+
{{#if _maxLength}}
|
|
77
|
+
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
78
|
+
{{/if~}}
|
|
79
|
+
</div>
|
|
80
|
+
<div class="hidden">
|
|
81
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
82
|
+
DEBUG
|
|
83
|
+
</div>
|
|
84
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
85
|
+
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
86
|
+
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
87
|
+
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
88
|
+
<div>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
89
|
+
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
90
|
+
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
91
|
+
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
92
|
+
<div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
|
|
93
|
+
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
94
|
+
<div>prefilledText:<span x-text="prefilledText" class="font-bold" ></span></div>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
<textarea
|
|
4
4
|
x-model="textarea{{getRandom}}"
|
|
5
5
|
id="textarea{{getRandom}}"
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
{{#if _required}}
|
|
7
|
+
@focus="isFocused = true"
|
|
8
|
+
@blur="wasFocused = true; isFocused=false"
|
|
9
|
+
x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
10
|
+
{{/if}}
|
|
9
11
|
value=""
|
|
10
12
|
name="{{#if _name}}{{_name}}{{/if}}"
|
|
11
13
|
{{#if _locaKey}}
|
|
@@ -28,7 +30,9 @@
|
|
|
28
30
|
{{/if~}}
|
|
29
31
|
{{#if _required}}required{{/if}}
|
|
30
32
|
class="relative w-full px-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
|
|
31
|
-
|
|
33
|
+
{{#if _required}}
|
|
34
|
+
:class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused && !isFocused}"
|
|
35
|
+
{{/if}}
|
|
32
36
|
>{{#if _formField.isValid}}
|
|
33
37
|
{{{_formField.forHtmlContent}}}
|
|
34
38
|
{{else}}
|
|
@@ -62,16 +66,22 @@
|
|
|
62
66
|
<div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
|
|
63
67
|
{{/if}}
|
|
64
68
|
{{#if _required}}
|
|
65
|
-
<div class="hidden pl-4 text-xs
|
|
69
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
|
|
66
70
|
{{/if}}
|
|
67
71
|
{{#if _maxLength}}
|
|
68
72
|
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
69
73
|
{{/if~}}
|
|
70
74
|
</div>
|
|
75
|
+
|
|
71
76
|
<div class="hidden">
|
|
72
|
-
<div>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<div
|
|
77
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
78
|
+
DEBUG
|
|
79
|
+
</div>
|
|
80
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
81
|
+
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
+
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
+
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
84
|
+
<div>input.length:<span x-text="textarea{{getRandom}}.length " class="font-bold" ></span></div>
|
|
85
|
+
</div>
|
|
76
86
|
</div>
|
|
77
87
|
</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.100.
|
|
9
|
+
"version": "1.100.8",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
package/src/assets/js/alpine.js
CHANGED
|
@@ -17,7 +17,9 @@ AsyncAlpine.init(Alpine)
|
|
|
17
17
|
.data('slider', () =>
|
|
18
18
|
import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
|
|
19
19
|
)
|
|
20
|
+
|
|
20
21
|
.data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
|
|
22
|
+
.data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
|
|
21
23
|
.start()
|
|
22
24
|
|
|
23
25
|
window.Alpine = Alpine
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
+
ax-load
|
|
3
|
+
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_errorEmail}}',{{#if _isEmail}}true{{else}}false{{/if}},'{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
|
|
4
|
+
x-ignore
|
|
5
|
+
>
|
|
6
|
+
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
7
|
+
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
8
|
+
x-model="input{{getRandom}}"
|
|
9
|
+
id="input{{getRandom}}"
|
|
10
|
+
{{#if _required}}
|
|
11
|
+
@focus="isFocused = true;"
|
|
12
|
+
@blur="wasFocused = true; isFocused=false"
|
|
13
|
+
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
14
|
+
{{/if}}
|
|
15
|
+
type="{{#if _type}}{{_type}}{{/if}}"
|
|
16
|
+
name="{{#if _name}}{{_name}}{{/if}}"
|
|
17
|
+
{{#if _locaKey}}
|
|
18
|
+
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
19
|
+
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
20
|
+
{{else}}
|
|
21
|
+
{{#if _label}}
|
|
22
|
+
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
23
|
+
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
24
|
+
{{/if}}
|
|
25
|
+
{{/if}}
|
|
26
|
+
{{#if _formField.forHtmlAttribute}}
|
|
27
|
+
value="{{_formField.forHtmlAttribute}}"
|
|
28
|
+
{{else}}
|
|
29
|
+
{{#if _value}}
|
|
30
|
+
value="{{_value}}"
|
|
31
|
+
{{else}}
|
|
32
|
+
value="{{_defaultValue}}"
|
|
33
|
+
{{/if}}
|
|
34
|
+
{{/if}}
|
|
35
|
+
{{#if _maxLength}}
|
|
36
|
+
maxlength="{{_maxLength}}"
|
|
37
|
+
{{/if~}}
|
|
38
|
+
{{#if _required}} required{{/if}}
|
|
39
|
+
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
40
|
+
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
41
|
+
{{#if _autoSuggestFeature}}
|
|
42
|
+
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
43
|
+
>
|
|
44
|
+
|
|
45
|
+
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
46
|
+
|
|
47
|
+
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
48
|
+
|
|
49
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
50
|
+
{{#if _hasBody}}
|
|
51
|
+
{{decorator_body}}
|
|
52
|
+
{{else}}
|
|
53
|
+
{{#if _locaKey}}
|
|
54
|
+
{{loca _locaKey}}
|
|
55
|
+
{{else}}
|
|
56
|
+
{{#if _label}}
|
|
57
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
58
|
+
{{/if}}
|
|
59
|
+
{{/if}}
|
|
60
|
+
{{/if}}
|
|
61
|
+
</label>
|
|
62
|
+
{{#if _required}}
|
|
63
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
+
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
65
|
+
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
{{/if}}
|
|
69
|
+
<div class="flex items-end justify-between h-5 font-heading">
|
|
70
|
+
{{#if _description}}
|
|
71
|
+
<div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
72
|
+
{{/if}}
|
|
73
|
+
{{#if _required}}
|
|
74
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
75
|
+
{{/if}}
|
|
76
|
+
{{#if _maxLength}}
|
|
77
|
+
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
78
|
+
{{/if~}}
|
|
79
|
+
</div>
|
|
80
|
+
<div class="hidden">
|
|
81
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
82
|
+
DEBUG
|
|
83
|
+
</div>
|
|
84
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
85
|
+
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
86
|
+
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
87
|
+
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
88
|
+
<div>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
89
|
+
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
90
|
+
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
91
|
+
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
92
|
+
<div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
|
|
93
|
+
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
94
|
+
<div>prefilledText:<span x-text="prefilledText" class="font-bold" ></span></div>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export default function inputHandler(element, errorMandatory, errorEmail, isEmail = false, prefilledText = '') {
|
|
2
|
+
return {
|
|
3
|
+
[element]: prefilledText,
|
|
4
|
+
valid: false,
|
|
5
|
+
wasFocused: false,
|
|
6
|
+
isFocused: false,
|
|
7
|
+
validEmail: false,
|
|
8
|
+
errorMessage() {
|
|
9
|
+
if( Boolean(isEmail)){
|
|
10
|
+
return !this.valid ? errorMandatory : errorEmail
|
|
11
|
+
} else {
|
|
12
|
+
return errorMandatory
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
hideDescription() {
|
|
16
|
+
if( Boolean(isEmail)){
|
|
17
|
+
return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))
|
|
18
|
+
} else {
|
|
19
|
+
return Boolean(!this.valid && this.wasFocused && !this.isFocused)
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
hideError() {
|
|
23
|
+
return Boolean(!this.hideDescription())
|
|
24
|
+
},
|
|
25
|
+
validateEmail() {
|
|
26
|
+
var emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
|
|
27
|
+
this.validEmail = emailRegex.test( this[element]);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
<textarea
|
|
4
4
|
x-model="textarea{{getRandom}}"
|
|
5
5
|
id="textarea{{getRandom}}"
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
{{#if _required}}
|
|
7
|
+
@focus="isFocused = true"
|
|
8
|
+
@blur="wasFocused = true; isFocused=false"
|
|
9
|
+
x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
10
|
+
{{/if}}
|
|
9
11
|
value=""
|
|
10
12
|
name="{{#if _name}}{{_name}}{{/if}}"
|
|
11
13
|
{{#if _locaKey}}
|
|
@@ -28,7 +30,9 @@
|
|
|
28
30
|
{{/if~}}
|
|
29
31
|
{{#if _required}}required{{/if}}
|
|
30
32
|
class="relative w-full px-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
|
|
31
|
-
|
|
33
|
+
{{#if _required}}
|
|
34
|
+
:class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused && !isFocused}"
|
|
35
|
+
{{/if}}
|
|
32
36
|
>{{#if _formField.isValid}}
|
|
33
37
|
{{{_formField.forHtmlContent}}}
|
|
34
38
|
{{else}}
|
|
@@ -62,16 +66,22 @@
|
|
|
62
66
|
<div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
|
|
63
67
|
{{/if}}
|
|
64
68
|
{{#if _required}}
|
|
65
|
-
<div class="hidden pl-4 text-xs
|
|
69
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
|
|
66
70
|
{{/if}}
|
|
67
71
|
{{#if _maxLength}}
|
|
68
72
|
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
69
73
|
{{/if~}}
|
|
70
74
|
</div>
|
|
75
|
+
|
|
71
76
|
<div class="hidden">
|
|
72
|
-
<div>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<div
|
|
77
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
78
|
+
DEBUG
|
|
79
|
+
</div>
|
|
80
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
81
|
+
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
+
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
+
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
84
|
+
<div>input.length:<span x-text="textarea{{getRandom}}.length " class="font-bold" ></span></div>
|
|
85
|
+
</div>
|
|
76
86
|
</div>
|
|
77
87
|
</div>
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
-
x-data="inputHandler">
|
|
3
|
-
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
4
|
-
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
5
|
-
x-model="input{{nextRandom}}"
|
|
6
|
-
id="input{{getRandom}}"
|
|
7
|
-
{{#if _required}}
|
|
8
|
-
@focus="isFocused = true"
|
|
9
|
-
@blur="wasFocused = true; isFocused=false"
|
|
10
|
-
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
11
|
-
{{/if}}
|
|
12
|
-
type="{{#if _type}}{{_type}}{{/if}}"
|
|
13
|
-
name="{{#if _name}}{{_name}}{{/if}}"
|
|
14
|
-
{{#if _locaKey}}
|
|
15
|
-
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
16
|
-
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
17
|
-
{{else}}
|
|
18
|
-
{{#if _label}}
|
|
19
|
-
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
20
|
-
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
21
|
-
{{/if}}
|
|
22
|
-
{{/if}}
|
|
23
|
-
{{#if _formField.forHtmlAttribute}}
|
|
24
|
-
value="{{_formField.forHtmlAttribute}}"
|
|
25
|
-
{{else}}
|
|
26
|
-
{{#if _value}}
|
|
27
|
-
value="{{_value}}"
|
|
28
|
-
{{else}}
|
|
29
|
-
value="{{_defaultValue}}"
|
|
30
|
-
{{/if}}
|
|
31
|
-
{{/if}}
|
|
32
|
-
{{#if _maxLength}}
|
|
33
|
-
maxlength="{{_maxLength}}"
|
|
34
|
-
{{/if~}}
|
|
35
|
-
{{#if _required}} required{{/if}}
|
|
36
|
-
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
37
|
-
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
38
|
-
{{#if _autoSuggestFeature}}
|
|
39
|
-
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
40
|
-
>
|
|
41
|
-
|
|
42
|
-
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
43
|
-
|
|
44
|
-
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
45
|
-
|
|
46
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
47
|
-
{{#if _hasBody}}
|
|
48
|
-
{{decorator_body}}
|
|
49
|
-
{{else}}
|
|
50
|
-
{{#if _locaKey}}
|
|
51
|
-
{{loca _locaKey}}
|
|
52
|
-
{{else}}
|
|
53
|
-
{{#if _label}}
|
|
54
|
-
{{{_label}}}{{#if _required}}*{{/if}}
|
|
55
|
-
{{/if}}
|
|
56
|
-
{{/if}}
|
|
57
|
-
{{/if}}
|
|
58
|
-
</label>
|
|
59
|
-
{{#if _required}}
|
|
60
|
-
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
61
|
-
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
62
|
-
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
{{/if}}
|
|
66
|
-
<div class="flex items-end justify-between h-5 font-heading">
|
|
67
|
-
{{#if _description}}
|
|
68
|
-
<div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
69
|
-
{{/if}}
|
|
70
|
-
{{#if _required}}
|
|
71
|
-
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
72
|
-
{{/if}}
|
|
73
|
-
{{#if _maxLength}}
|
|
74
|
-
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
75
|
-
{{/if~}}
|
|
76
|
-
</div>
|
|
77
|
-
<div class="hidden">
|
|
78
|
-
<b>DEBUGG</b>
|
|
79
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
80
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
81
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
-
<div>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
84
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
85
|
-
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
86
|
-
<div>input:<span x-text="input{{getRandom}} " class="font-bold" ></span></div>
|
|
87
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
88
|
-
</div>
|
|
89
|
-
<script>
|
|
90
|
-
function inputHandler() {
|
|
91
|
-
return {
|
|
92
|
-
input{{getRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' ,
|
|
93
|
-
valid: false,
|
|
94
|
-
wasFocused: false,
|
|
95
|
-
isFocused: false,
|
|
96
|
-
{{#if _isEmail}}
|
|
97
|
-
validEmail: false,
|
|
98
|
-
errorMessage(){ return !this.valid ? '{{_errorMandatory}}' : '{{_errorEmail}}'},
|
|
99
|
-
hideDescription() { return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))},
|
|
100
|
-
hideError() { return Boolean(!this.hideDescription())},
|
|
101
|
-
validateEmail(){
|
|
102
|
-
var email = this.input{{getRandom}}.trim();
|
|
103
|
-
// https://github.com/colinaut/alpinejs-plugin-simple-validate/blob/main/src/index.js slashes are double because webpack removes them
|
|
104
|
-
var emailRegexEscaped = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;
|
|
105
|
-
//https://emailregex.com/index.html slashes are double because webpack removes them
|
|
106
|
-
var emailRegexV2Escaped = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])/;
|
|
107
|
-
this.validEmail = emailRegexV2Escaped.test(email);
|
|
108
|
-
}
|
|
109
|
-
{{else}}
|
|
110
|
-
hideError() {return (this.valid || !this.wasFocused || this.isFocused)},
|
|
111
|
-
hideDescription() {return !this.valid && this.wasFocused && !this.isFocused},
|
|
112
|
-
errorMessage: "{{_errorMandatory}}"
|
|
113
|
-
{{/if}}
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
</script>
|
|
117
|
-
</div>
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
-
x-data="inputHandler">
|
|
3
|
-
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
4
|
-
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
5
|
-
x-model="input{{nextRandom}}"
|
|
6
|
-
id="input{{getRandom}}"
|
|
7
|
-
{{#if _required}}
|
|
8
|
-
@focus="isFocused = true"
|
|
9
|
-
@blur="wasFocused = true; isFocused=false"
|
|
10
|
-
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
11
|
-
{{/if}}
|
|
12
|
-
type="{{#if _type}}{{_type}}{{/if}}"
|
|
13
|
-
name="{{#if _name}}{{_name}}{{/if}}"
|
|
14
|
-
{{#if _locaKey}}
|
|
15
|
-
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
16
|
-
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
17
|
-
{{else}}
|
|
18
|
-
{{#if _label}}
|
|
19
|
-
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
20
|
-
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
21
|
-
{{/if}}
|
|
22
|
-
{{/if}}
|
|
23
|
-
{{#if _formField.forHtmlAttribute}}
|
|
24
|
-
value="{{_formField.forHtmlAttribute}}"
|
|
25
|
-
{{else}}
|
|
26
|
-
{{#if _value}}
|
|
27
|
-
value="{{_value}}"
|
|
28
|
-
{{else}}
|
|
29
|
-
value="{{_defaultValue}}"
|
|
30
|
-
{{/if}}
|
|
31
|
-
{{/if}}
|
|
32
|
-
{{#if _maxLength}}
|
|
33
|
-
maxlength="{{_maxLength}}"
|
|
34
|
-
{{/if~}}
|
|
35
|
-
{{#if _required}} required{{/if}}
|
|
36
|
-
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
37
|
-
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
38
|
-
{{#if _autoSuggestFeature}}
|
|
39
|
-
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
40
|
-
>
|
|
41
|
-
|
|
42
|
-
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
43
|
-
|
|
44
|
-
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
45
|
-
|
|
46
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
47
|
-
{{#if _hasBody}}
|
|
48
|
-
{{decorator_body}}
|
|
49
|
-
{{else}}
|
|
50
|
-
{{#if _locaKey}}
|
|
51
|
-
{{loca _locaKey}}
|
|
52
|
-
{{else}}
|
|
53
|
-
{{#if _label}}
|
|
54
|
-
{{{_label}}}{{#if _required}}*{{/if}}
|
|
55
|
-
{{/if}}
|
|
56
|
-
{{/if}}
|
|
57
|
-
{{/if}}
|
|
58
|
-
</label>
|
|
59
|
-
{{#if _required}}
|
|
60
|
-
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
61
|
-
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
62
|
-
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
{{/if}}
|
|
66
|
-
<div class="flex items-end justify-between h-5 font-heading">
|
|
67
|
-
{{#if _description}}
|
|
68
|
-
<div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
69
|
-
{{/if}}
|
|
70
|
-
{{#if _required}}
|
|
71
|
-
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
72
|
-
{{/if}}
|
|
73
|
-
{{#if _maxLength}}
|
|
74
|
-
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
75
|
-
{{/if~}}
|
|
76
|
-
</div>
|
|
77
|
-
<div class="hidden">
|
|
78
|
-
<b>DEBUGG</b>
|
|
79
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
80
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
81
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
-
<div>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
84
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
85
|
-
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
86
|
-
<div>input:<span x-text="input{{getRandom}} " class="font-bold" ></span></div>
|
|
87
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
88
|
-
</div>
|
|
89
|
-
<script>
|
|
90
|
-
function inputHandler() {
|
|
91
|
-
return {
|
|
92
|
-
input{{getRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' ,
|
|
93
|
-
valid: false,
|
|
94
|
-
wasFocused: false,
|
|
95
|
-
isFocused: false,
|
|
96
|
-
{{#if _isEmail}}
|
|
97
|
-
validEmail: false,
|
|
98
|
-
errorMessage(){ return !this.valid ? '{{_errorMandatory}}' : '{{_errorEmail}}'},
|
|
99
|
-
hideDescription() { return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))},
|
|
100
|
-
hideError() { return Boolean(!this.hideDescription())},
|
|
101
|
-
validateEmail(){
|
|
102
|
-
var email = this.input{{getRandom}}.trim();
|
|
103
|
-
// https://github.com/colinaut/alpinejs-plugin-simple-validate/blob/main/src/index.js slashes are double because webpack removes them
|
|
104
|
-
var emailRegexEscaped = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;
|
|
105
|
-
//https://emailregex.com/index.html slashes are double because webpack removes them
|
|
106
|
-
var emailRegexV2Escaped = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])/;
|
|
107
|
-
this.validEmail = emailRegexV2Escaped.test(email);
|
|
108
|
-
}
|
|
109
|
-
{{else}}
|
|
110
|
-
hideError() {return (this.valid || !this.wasFocused || this.isFocused)},
|
|
111
|
-
hideDescription() {return !this.valid && this.wasFocused && !this.isFocused},
|
|
112
|
-
errorMessage: "{{_errorMandatory}}"
|
|
113
|
-
{{/if}}
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
</script>
|
|
117
|
-
</div>
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
-
x-data="inputHandler">
|
|
3
|
-
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
4
|
-
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
5
|
-
x-model="input{{nextRandom}}"
|
|
6
|
-
id="input{{getRandom}}"
|
|
7
|
-
{{#if _required}}
|
|
8
|
-
@focus="isFocused = true"
|
|
9
|
-
@blur="wasFocused = true; isFocused=false"
|
|
10
|
-
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
11
|
-
{{/if}}
|
|
12
|
-
type="{{#if _type}}{{_type}}{{/if}}"
|
|
13
|
-
name="{{#if _name}}{{_name}}{{/if}}"
|
|
14
|
-
{{#if _locaKey}}
|
|
15
|
-
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
16
|
-
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
17
|
-
{{else}}
|
|
18
|
-
{{#if _label}}
|
|
19
|
-
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
20
|
-
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
21
|
-
{{/if}}
|
|
22
|
-
{{/if}}
|
|
23
|
-
{{#if _formField.forHtmlAttribute}}
|
|
24
|
-
value="{{_formField.forHtmlAttribute}}"
|
|
25
|
-
{{else}}
|
|
26
|
-
{{#if _value}}
|
|
27
|
-
value="{{_value}}"
|
|
28
|
-
{{else}}
|
|
29
|
-
value="{{_defaultValue}}"
|
|
30
|
-
{{/if}}
|
|
31
|
-
{{/if}}
|
|
32
|
-
{{#if _maxLength}}
|
|
33
|
-
maxlength="{{_maxLength}}"
|
|
34
|
-
{{/if~}}
|
|
35
|
-
{{#if _required}} required{{/if}}
|
|
36
|
-
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
37
|
-
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
38
|
-
{{#if _autoSuggestFeature}}
|
|
39
|
-
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
40
|
-
>
|
|
41
|
-
|
|
42
|
-
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
43
|
-
|
|
44
|
-
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
45
|
-
|
|
46
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
47
|
-
{{#if _hasBody}}
|
|
48
|
-
{{decorator_body}}
|
|
49
|
-
{{else}}
|
|
50
|
-
{{#if _locaKey}}
|
|
51
|
-
{{loca _locaKey}}
|
|
52
|
-
{{else}}
|
|
53
|
-
{{#if _label}}
|
|
54
|
-
{{{_label}}}{{#if _required}}*{{/if}}
|
|
55
|
-
{{/if}}
|
|
56
|
-
{{/if}}
|
|
57
|
-
{{/if}}
|
|
58
|
-
</label>
|
|
59
|
-
{{#if _required}}
|
|
60
|
-
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
61
|
-
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
62
|
-
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
{{/if}}
|
|
66
|
-
<div class="flex items-end justify-between h-5 font-heading">
|
|
67
|
-
{{#if _description}}
|
|
68
|
-
<div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
69
|
-
{{/if}}
|
|
70
|
-
{{#if _required}}
|
|
71
|
-
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
72
|
-
{{/if}}
|
|
73
|
-
{{#if _maxLength}}
|
|
74
|
-
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
75
|
-
{{/if~}}
|
|
76
|
-
</div>
|
|
77
|
-
<div class="hidden">
|
|
78
|
-
<b>DEBUGG</b>
|
|
79
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
80
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
81
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
-
<div>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
84
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
85
|
-
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
86
|
-
<div>input:<span x-text="input{{getRandom}} " class="font-bold" ></span></div>
|
|
87
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
88
|
-
</div>
|
|
89
|
-
<script>
|
|
90
|
-
function inputHandler() {
|
|
91
|
-
return {
|
|
92
|
-
input{{getRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' ,
|
|
93
|
-
valid: false,
|
|
94
|
-
wasFocused: false,
|
|
95
|
-
isFocused: false,
|
|
96
|
-
{{#if _isEmail}}
|
|
97
|
-
validEmail: false,
|
|
98
|
-
errorMessage(){ return !this.valid ? '{{_errorMandatory}}' : '{{_errorEmail}}'},
|
|
99
|
-
hideDescription() { return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))},
|
|
100
|
-
hideError() { return Boolean(!this.hideDescription())},
|
|
101
|
-
validateEmail(){
|
|
102
|
-
var email = this.input{{getRandom}}.trim();
|
|
103
|
-
// https://github.com/colinaut/alpinejs-plugin-simple-validate/blob/main/src/index.js slashes are double because webpack removes them
|
|
104
|
-
var emailRegexEscaped = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;
|
|
105
|
-
//https://emailregex.com/index.html slashes are double because webpack removes them
|
|
106
|
-
var emailRegexV2Escaped = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])/;
|
|
107
|
-
this.validEmail = emailRegexV2Escaped.test(email);
|
|
108
|
-
}
|
|
109
|
-
{{else}}
|
|
110
|
-
hideError() {return (this.valid || !this.wasFocused || this.isFocused)},
|
|
111
|
-
hideDescription() {return !this.valid && this.wasFocused && !this.isFocused},
|
|
112
|
-
errorMessage: "{{_errorMandatory}}"
|
|
113
|
-
{{/if}}
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
</script>
|
|
117
|
-
</div>
|