comand-component-library 3.1.70 → 3.1.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/comand-component-library.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +2 -2
- package/src/App.vue +356 -225
- package/src/assets/data/list-of-links.json +0 -1
- package/src/assets/styles/global-styles.scss +26 -0
- package/src/components/CmdBox.vue +12 -6
- package/src/components/CmdCompanyLogo.vue +3 -3
- package/src/components/CmdCookieDisclaimer.vue +20 -4
- package/src/components/CmdFakeSelect.vue +17 -12
- package/src/components/CmdFormElement.vue +85 -81
- package/src/components/CmdInputGroup.vue +31 -7
- package/src/components/CmdProgressBar.vue +2 -2
- package/src/components/CmdTable.vue +1 -1
- package/src/components/CmdToggleDarkMode.vue +30 -10
- package/src/components/CmdTooltip.vue +1 -1
- package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json +32 -0
- package/src/documentation/generated/CmdBackToTopButtonPropertyDescriptions.json +12 -0
- package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json +34 -0
- package/src/documentation/generated/CmdBoxPropertyDescriptions.json +96 -0
- package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.json +79 -0
- package/src/documentation/generated/CmdBoxWrapperPropertyDescriptions.json +47 -0
- package/src/documentation/generated/CmdBreadcrumbsPropertyDescriptions.json +17 -0
- package/src/documentation/generated/CmdCompanyLogoPropertyDescriptions.json +27 -0
- package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json +32 -0
- package/src/documentation/generated/CmdCustomHeadlinePropertyDescriptions.json +22 -0
- package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json +84 -0
- package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +62 -0
- package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +253 -0
- package/src/documentation/generated/CmdFormFiltersPropertyDescriptions.json +32 -0
- package/src/documentation/generated/CmdFormPropertyDescriptions.json +40 -0
- package/src/documentation/generated/CmdGoogleMapsPropertyDescriptions.json +7 -0
- package/src/documentation/generated/CmdImageGalleryPropertyDescriptions.json +22 -0
- package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json +12 -0
- package/src/documentation/generated/CmdInputGroupPropertyDescriptions.json +86 -0
- package/src/documentation/generated/CmdListOfLinksPropertyDescriptions.json +60 -0
- package/src/documentation/generated/CmdLoginFormPropertyDescriptions.json +90 -0
- package/src/documentation/generated/CmdMainNavigationPropertyDescriptions.json +62 -0
- package/src/documentation/generated/CmdMultistepFormProgressBarPropertyDescriptions.json +17 -0
- package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json +42 -0
- package/src/documentation/generated/CmdPagerPropertyDescriptions.json +37 -0
- package/src/documentation/generated/CmdProgressBarPropertyDescriptions.json +32 -0
- package/src/documentation/generated/CmdShareButtonsPropertyDescriptions.json +34 -0
- package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json +27 -0
- package/src/documentation/generated/CmdSlideButtonPropertyDescriptions.json +25 -0
- package/src/documentation/generated/CmdSlideshowPropertyDescriptions.json +42 -0
- package/src/documentation/generated/CmdSwitchLanguagePropertyDescriptions.json +7 -0
- package/src/documentation/generated/CmdSystemMessagePropertyDescriptions.json +40 -0
- package/src/documentation/generated/CmdTablePropertyDescriptions.json +72 -0
- package/src/documentation/generated/CmdTabsPropertyDescriptions.json +27 -0
- package/src/documentation/generated/CmdThumbnailScrollerPropertyDescriptions.json +32 -0
- package/src/documentation/generated/CmdTooltipPropertyDescriptions.json +17 -0
- package/src/documentation/generated/CmdUploadFormPropertyDescriptions.json +175 -0
- package/src/documentation/generated/CmdWidthLimitationWrapperPropertyDescriptions.json +41 -0
- package/src/index.js +1 -1
- package/src/mixins/CmdFormElement/DefaultMessageProperties.js +1 -1
- package/src/mixins/FieldValidation.js +1 -1
- package/src/mixins/GlobalDefaultMessageProperties.js +1 -2
- package/src/mixins/I18n.js +12 -2
@@ -174,6 +174,32 @@ body.avoid-scrolling {
|
|
174
174
|
|
175
175
|
/* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
|
176
176
|
.cmd-form-element, .cmd-fake-select {
|
177
|
+
|
178
|
+
&.has-state, & + .cmd-tooltip {
|
179
|
+
.label-text {
|
180
|
+
span, sup {
|
181
|
+
color: var(--status-color);
|
182
|
+
}
|
183
|
+
}
|
184
|
+
|
185
|
+
&.error {
|
186
|
+
--status-color: var(--error-color);
|
187
|
+
}
|
188
|
+
|
189
|
+
&.warning {
|
190
|
+
--status-color: var(--warning-color);
|
191
|
+
}
|
192
|
+
|
193
|
+
|
194
|
+
&.success {
|
195
|
+
--status-color: var(--success-color);
|
196
|
+
}
|
197
|
+
|
198
|
+
&.info {
|
199
|
+
--status-color: var(--info-color);
|
200
|
+
}
|
201
|
+
}
|
202
|
+
|
177
203
|
& + .cmd-tooltip {
|
178
204
|
border-color: var(--status-color);
|
179
205
|
|
@@ -3,12 +3,17 @@
|
|
3
3
|
<div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically}]">
|
4
4
|
<template v-if="useSlots?.includes('header')">
|
5
5
|
<!-- begin collapsible header with slot -->
|
6
|
-
<
|
6
|
+
<div v-if="collapsible" class="box-header">
|
7
7
|
<!-- begin slot 'header' -->
|
8
8
|
<slot name="header"></slot>
|
9
9
|
<!-- end slot 'header' -->
|
10
|
-
<
|
11
|
-
|
10
|
+
<a href="#"
|
11
|
+
class="toggle-icon"
|
12
|
+
:title="open ? iconOpen.tooltip : iconClosed.tooltip"
|
13
|
+
@click.prevent="toggleContentVisibility">
|
14
|
+
<span :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
|
15
|
+
</a>
|
16
|
+
</div>
|
12
17
|
<!-- end collapsible header with slot -->
|
13
18
|
|
14
19
|
<!-- begin default header with slot -->
|
@@ -309,8 +314,8 @@ export default {
|
|
309
314
|
margin-bottom: 0;
|
310
315
|
}
|
311
316
|
|
312
|
-
&:
|
313
|
-
|
317
|
+
&:not(.open) {
|
318
|
+
justify-content: flex-start;
|
314
319
|
}
|
315
320
|
}
|
316
321
|
|
@@ -330,9 +335,10 @@ export default {
|
|
330
335
|
|
331
336
|
* {
|
332
337
|
color: var(--pure-white);
|
338
|
+
margin-bottom: 0;
|
333
339
|
}
|
334
340
|
|
335
|
-
> [class*="icon"]
|
341
|
+
> .toggle-icon, .toggle-icon > [class*="icon"] {
|
336
342
|
font-size: 1rem;
|
337
343
|
margin-left: auto;
|
338
344
|
}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
<template>
|
2
2
|
<div class="cmd-company-logo">
|
3
|
-
<router-link v-if="link.type === 'router'" :
|
3
|
+
<router-link v-if="link.type === 'router'" :to="link.path" :title="link.tooltip">
|
4
4
|
<img :src="pathCurrentLogo" :alt="altText"/>
|
5
5
|
</router-link>
|
6
|
-
<a v-else :
|
7
|
-
<img :src="pathCurrentLogo" :alt="altText"/>
|
6
|
+
<a v-else :href="link.path" :title="link.tooltip">
|
7
|
+
<img :src="pathCurrentLogo" :alt="altText" />
|
8
8
|
</a>
|
9
9
|
</div>
|
10
10
|
</template>
|
@@ -21,8 +21,15 @@
|
|
21
21
|
:key="index"
|
22
22
|
>
|
23
23
|
<template v-slot:header>
|
24
|
-
<!-- begin
|
25
|
-
|
24
|
+
<!-- begin CmdFormElement -->
|
25
|
+
<CmdFormElement
|
26
|
+
element="input"
|
27
|
+
type="checkbox"
|
28
|
+
labelText="Google Analytics"
|
29
|
+
id="google-analytics"
|
30
|
+
:toggleSwitch="true"
|
31
|
+
/>
|
32
|
+
<!-- end CmdFormElement -->
|
26
33
|
</template>
|
27
34
|
<template v-slot:body>
|
28
35
|
<p v-if="cookie.description">{{ cookie.description }}</p>
|
@@ -49,8 +56,15 @@
|
|
49
56
|
:key="index"
|
50
57
|
>
|
51
58
|
<template v-slot:header>
|
52
|
-
<!-- begin
|
53
|
-
|
59
|
+
<!-- begin CmdFormElement -->
|
60
|
+
<CmdFormElement
|
61
|
+
element="input"
|
62
|
+
type="checkbox"
|
63
|
+
labelText="Google Analytics"
|
64
|
+
id="google-analytics"
|
65
|
+
:toggleSwitch="true"
|
66
|
+
/>
|
67
|
+
<!-- end CmdFormElement -->
|
54
68
|
</template>
|
55
69
|
<template v-slot:body>
|
56
70
|
<p v-if="cookie.description">{{ cookie.description }}</p>
|
@@ -92,12 +106,14 @@
|
|
92
106
|
// import components
|
93
107
|
import CmdBox from "./CmdBox"
|
94
108
|
import CmdCustomHeadline from "./CmdCustomHeadline"
|
109
|
+
import CmdFormElement from "./CmdFormElement"
|
95
110
|
|
96
111
|
export default {
|
97
112
|
name: "CmdCookieDisclaimer",
|
98
113
|
components: {
|
99
114
|
CmdBox,
|
100
115
|
CmdCustomHeadline,
|
116
|
+
CmdFormElement
|
101
117
|
},
|
102
118
|
data() {
|
103
119
|
return {
|
@@ -5,7 +5,8 @@
|
|
5
5
|
'cmd-fake-select label',
|
6
6
|
{
|
7
7
|
color: type === 'color',
|
8
|
-
'has-state': validationStatus && validationStatus !== 'none'
|
8
|
+
'has-state': validationStatus && validationStatus !== 'none',
|
9
|
+
disabled: $attrs.disabled
|
9
10
|
}
|
10
11
|
]"
|
11
12
|
:aria-labelledby="labelId"
|
@@ -229,7 +230,7 @@ export default {
|
|
229
230
|
/**
|
230
231
|
* status (i.e. for validation)
|
231
232
|
*
|
232
|
-
* @allowedValues: error, success,
|
233
|
+
* @allowedValues: error, warning, success, info
|
233
234
|
* @affectsStyling: true
|
234
235
|
*/
|
235
236
|
status: {
|
@@ -372,7 +373,7 @@ export default {
|
|
372
373
|
}
|
373
374
|
},
|
374
375
|
toggleOptions() {
|
375
|
-
if (this.
|
376
|
+
if (this.$attrs.disabled !== 'disabled') {
|
376
377
|
this.showOptions = !this.showOptions
|
377
378
|
}
|
378
379
|
},
|
@@ -460,10 +461,6 @@ export default {
|
|
460
461
|
.cmd-fake-select {
|
461
462
|
align-self: flex-end;
|
462
463
|
|
463
|
-
& + .cmd-tooltip {
|
464
|
-
border-color: var(--status-color);
|
465
|
-
}
|
466
|
-
|
467
464
|
> span:first-child {
|
468
465
|
a {
|
469
466
|
align-self: flex-end;
|
@@ -550,8 +547,16 @@ export default {
|
|
550
547
|
&.active {
|
551
548
|
background: var(--light-gray);
|
552
549
|
|
550
|
+
span {
|
551
|
+
color: var(--text-color);
|
552
|
+
}
|
553
|
+
|
553
554
|
&:hover, &:active, &:focus {
|
554
555
|
background: var(--primary-color);
|
556
|
+
|
557
|
+
span {
|
558
|
+
color: var(--pure-white);
|
559
|
+
}
|
555
560
|
}
|
556
561
|
}
|
557
562
|
}
|
@@ -604,21 +609,21 @@ export default {
|
|
604
609
|
}
|
605
610
|
}
|
606
611
|
|
607
|
-
&.
|
612
|
+
&.has-state {
|
608
613
|
> ul {
|
609
614
|
> li {
|
610
615
|
> a {
|
611
|
-
border-color: var(--
|
616
|
+
border-color: var(--status-color);
|
612
617
|
|
613
618
|
> span, span[class*="icon-"] {
|
614
|
-
color: var(--
|
619
|
+
color: var(--status-color);
|
615
620
|
}
|
616
621
|
|
617
622
|
&:hover, &:active, &:focus {
|
618
623
|
background: var(--pure-white);
|
619
624
|
|
620
625
|
span {
|
621
|
-
color: var(--
|
626
|
+
color: var(--status-color);
|
622
627
|
}
|
623
628
|
}
|
624
629
|
}
|
@@ -668,7 +673,7 @@ export default {
|
|
668
673
|
|
669
674
|
> span:first-child {
|
670
675
|
width: 1.5rem;
|
671
|
-
aspect-ratio: 1;
|
676
|
+
aspect-ratio: 1/1;
|
672
677
|
border: var(--default-border);
|
673
678
|
|
674
679
|
&[style=""] {
|
@@ -21,6 +21,46 @@
|
|
21
21
|
<span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
|
22
22
|
:class="['label-text', !showLabel ? 'hidden' : undefined]">
|
23
23
|
<span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
|
24
|
+
|
25
|
+
<!-- begin CmdTooltip -->
|
26
|
+
<CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
|
27
|
+
<!-- begin CmdSystemMessage -->
|
28
|
+
<CmdSystemMessage
|
29
|
+
v-if="getValidationMessage"
|
30
|
+
:message="getValidationMessage"
|
31
|
+
:validation-status="validationStatus"
|
32
|
+
:iconClose="{show: false}"
|
33
|
+
/>
|
34
|
+
<!-- end CmdSystemMessage -->
|
35
|
+
|
36
|
+
<template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
|
37
|
+
<!-- begin list of requirements -->
|
38
|
+
<h6>
|
39
|
+
{{ getMessage("cmdformelement.headline.requirements_for_input") }}<br/>
|
40
|
+
"{{ labelText }}"
|
41
|
+
</h6>
|
42
|
+
<dl class="list-of-requirements">
|
43
|
+
<template v-for="(requirement, index) in inputRequirements" :key="index">
|
44
|
+
<dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
|
45
|
+
<dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
|
46
|
+
<span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
|
47
|
+
:title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></span>
|
48
|
+
</dd>
|
49
|
+
</template>
|
50
|
+
</dl>
|
51
|
+
<!-- end list of requirements -->
|
52
|
+
|
53
|
+
<!-- begin helplink -->
|
54
|
+
<hr v-if="helplink?.show"/>
|
55
|
+
<a v-if="helplink?.show && helplink?.url" :href="helplink.url" :target="helplink.target" @click.prevent>
|
56
|
+
<span v-if="helplink.icon?.iconClass" :class="helplink.icon?.iconClass" :title="helplink.icon?.tooltip"></span>
|
57
|
+
<span v-if="helplink.text">{{ helplink.text }}</span>
|
58
|
+
</a>
|
59
|
+
<!-- end helplink -->
|
60
|
+
</template>
|
61
|
+
</CmdTooltip>
|
62
|
+
<!-- end CmdTooltip -->
|
63
|
+
|
24
64
|
<a v-if="$attrs.required || inputRequirements.length"
|
25
65
|
href="#"
|
26
66
|
@click.prevent
|
@@ -89,6 +129,7 @@
|
|
89
129
|
:value="inputValue"
|
90
130
|
:class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
|
91
131
|
:id="labelId"
|
132
|
+
:disabled="$attrs.disabled"
|
92
133
|
:aria-invalid="validationStatus === 'error'"
|
93
134
|
/>
|
94
135
|
<span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
|
@@ -103,6 +144,7 @@
|
|
103
144
|
:value="inputValue"
|
104
145
|
:class="{inputClass, validationStatus}"
|
105
146
|
:id="labelId"
|
147
|
+
:disabled="$attrs.disabled"
|
106
148
|
:aria-invalid="validationStatus === 'error'"
|
107
149
|
/>
|
108
150
|
<span class="label-text">{{ onLabel }}</span>
|
@@ -144,19 +186,19 @@
|
|
144
186
|
|
145
187
|
<!-- begin searchfield -->
|
146
188
|
<template v-else-if="element === 'input' && $attrs.type === 'search'">
|
147
|
-
<
|
189
|
+
<span class="search-field-wrapper flex-container no-gap">
|
148
190
|
<input
|
149
191
|
v-bind="elementAttributes"
|
150
192
|
:id="labelId"
|
151
193
|
@input="onInput"
|
152
|
-
:maxlength="
|
194
|
+
:maxlength="getMaxLength()"
|
153
195
|
:value="modelValue"
|
154
196
|
/>
|
155
|
-
<a v-if="showSearchButton" href="#" class="button no-flex" :title="iconSearch.tooltip" @click.prevent="executeSearch">
|
197
|
+
<a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]" :title="iconSearch.tooltip" @click.prevent="executeSearch">
|
156
198
|
<span :class="iconSearch.iconClass"></span>
|
157
199
|
</a>
|
158
200
|
<a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :class="iconDelete.iconClass" :title="iconDelete.tooltip"></a>
|
159
|
-
</
|
201
|
+
</span>
|
160
202
|
</template>
|
161
203
|
</label>
|
162
204
|
<!-- end searchfield -->
|
@@ -171,45 +213,6 @@
|
|
171
213
|
<span v-if="nativeButton?.icon?.show && nativeButton?.icon?.position === 'after'" :class="nativeButton?.icon?.iconClass"></span>
|
172
214
|
</button>
|
173
215
|
<!-- end button -->
|
174
|
-
|
175
|
-
<!-- begin CmdTooltip -->
|
176
|
-
<CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
|
177
|
-
<!-- begin CmdSystemMessage -->
|
178
|
-
<CmdSystemMessage
|
179
|
-
v-if="getValidationMessage"
|
180
|
-
:message="getValidationMessage"
|
181
|
-
:validation-status="validationStatus"
|
182
|
-
:iconClose="{show: false}"
|
183
|
-
/>
|
184
|
-
<!-- end CmdSystemMessage -->
|
185
|
-
|
186
|
-
<template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
|
187
|
-
<!-- begin list of requirements -->
|
188
|
-
<h6>
|
189
|
-
{{ getMessage("cmdformelement.headline.requirements_for_input") }}<br/>
|
190
|
-
"{{ labelText }}"
|
191
|
-
</h6>
|
192
|
-
<dl class="list-of-requirements">
|
193
|
-
<template v-for="(requirement, index) in inputRequirements" :key="index">
|
194
|
-
<dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
|
195
|
-
<dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
|
196
|
-
<span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
|
197
|
-
:title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></span>
|
198
|
-
</dd>
|
199
|
-
</template>
|
200
|
-
</dl>
|
201
|
-
<!-- end list of requirements -->
|
202
|
-
|
203
|
-
<!-- begin helplink -->
|
204
|
-
<hr v-if="helplink?.show"/>
|
205
|
-
<a v-if="helplink?.show && helplink?.url" :href="helplink.url" :target="helplink.target" @click.prevent>
|
206
|
-
<span v-if="helplink.icon?.iconClass" :class="helplink.icon?.iconClass" :title="helplink.icon?.tooltip"></span>
|
207
|
-
<span v-if="helplink.text">{{ helplink.text }}</span>
|
208
|
-
</a>
|
209
|
-
<!-- end helplink -->
|
210
|
-
</template>
|
211
|
-
</CmdTooltip>
|
212
|
-
<!-- end CmdTooltip -->
|
213
216
|
</template>
|
214
217
|
|
215
218
|
<script>
|
@@ -218,7 +221,7 @@ import {createUuid} from "../utils/common.js"
|
|
218
221
|
|
219
222
|
// import mixins
|
220
223
|
import I18n from "../mixins/I18n"
|
221
|
-
import DefaultMessageProperties from "../mixins/
|
224
|
+
import DefaultMessageProperties from "../mixins/CmdFormElement/DefaultMessageProperties"
|
222
225
|
import FieldValidation from "../mixins/FieldValidation.js"
|
223
226
|
import Tooltip from "../mixins/Tooltip.js"
|
224
227
|
|
@@ -548,14 +551,33 @@ export default {
|
|
548
551
|
}
|
549
552
|
}
|
550
553
|
},
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
+
/**
|
555
|
+
* toggle if toggle-switch shows icons for checked/unchecked-status
|
556
|
+
*/
|
557
|
+
useIconsForToggleSwitch: {
|
558
|
+
type: Boolean,
|
559
|
+
default: false
|
554
560
|
},
|
561
|
+
/**
|
562
|
+
* icon for toggle-switch checked
|
563
|
+
*
|
564
|
+
* toggle-switch-property must be activated
|
565
|
+
* use-icons-for-toggle-switch-property must be activated
|
566
|
+
*/
|
555
567
|
toggleSwitchCheckedIconClass: {
|
556
568
|
type: String,
|
557
569
|
default: "icon-check-circle"
|
558
570
|
},
|
571
|
+
/**
|
572
|
+
* icon for toggle-switch unchecked
|
573
|
+
*
|
574
|
+
* toggle-switch-property must be activated
|
575
|
+
* use-icons-for-toggle-switch-property must be activated
|
576
|
+
*/
|
577
|
+
toggleSwitchUncheckedIconClass: {
|
578
|
+
type: String,
|
579
|
+
default: "icon-cancel-circle"
|
580
|
+
},
|
559
581
|
/**
|
560
582
|
* icon to toggle password-visibility
|
561
583
|
*
|
@@ -622,8 +644,6 @@ export default {
|
|
622
644
|
}
|
623
645
|
},
|
624
646
|
isChecked() {
|
625
|
-
console.log("this.modelValue", this.modelValue)
|
626
|
-
console.log("typeof this.modelValue", typeof this.modelValue)
|
627
647
|
if (typeof this.modelValue === "boolean") {
|
628
648
|
return this.modelValue
|
629
649
|
}
|
@@ -669,8 +689,9 @@ export default {
|
|
669
689
|
}
|
670
690
|
return "label-" + createUuid()
|
671
691
|
},
|
692
|
+
// toggle icons for toggle-switch
|
672
693
|
toggleSwitchIconClass() {
|
673
|
-
if(this.toggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
|
694
|
+
if(this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
|
674
695
|
if(this.isChecked) {
|
675
696
|
return this.toggleSwitchCheckedIconClass
|
676
697
|
}
|
@@ -683,15 +704,15 @@ export default {
|
|
683
704
|
getDomElement() {
|
684
705
|
return this.$refs.label
|
685
706
|
},
|
707
|
+
// define max-length for different input-types
|
686
708
|
getMaxLength() {
|
687
709
|
if (this.$attrs.element === 'textarea') {
|
688
710
|
return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 5000
|
689
711
|
}
|
690
712
|
|
691
|
-
if (this.$attrs.type !== 'file') {
|
713
|
+
if (this.$attrs.type !== 'file' && this.$attrs.type !== 'number' && this.$attrs.type !== 'date') {
|
692
714
|
return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 255
|
693
715
|
}
|
694
|
-
|
695
716
|
return null
|
696
717
|
},
|
697
718
|
onBlur(event) {
|
@@ -782,35 +803,22 @@ export default {
|
|
782
803
|
</script>
|
783
804
|
|
784
805
|
<style lang="scss">
|
806
|
+
/* begin cmd-form-element ------------------------------------------------------------------------------------------ */
|
785
807
|
.cmd-form-element {
|
786
|
-
|
787
|
-
|
788
|
-
|
789
|
-
|
790
|
-
|
791
|
-
|
792
808
|
input + .place-inside[class*="icon"] {
|
793
809
|
left: auto;
|
794
810
|
right: .5rem
|
795
811
|
}
|
796
812
|
|
797
|
-
|
798
|
-
|
799
|
-
|
800
|
-
|
801
|
-
|
802
|
-
|
803
|
-
|
804
|
-
}
|
805
|
-
|
806
|
-
&.success {
|
807
|
-
--status-color: var(--success-color);
|
808
|
-
}
|
809
|
-
|
810
|
-
&.info {
|
811
|
-
--status-color: var(--info-color);
|
812
|
-
}
|
813
|
+
.cmd-tooltip {
|
814
|
+
position: absolute;
|
815
|
+
right: 0;
|
816
|
+
transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
|
817
|
+
left: auto !important;
|
818
|
+
top: 0 !important;
|
819
|
+
}
|
813
820
|
|
821
|
+
&.has-state, & + .cmd-tooltip {
|
814
822
|
::placeholder {
|
815
823
|
color: var(--status-color);
|
816
824
|
}
|
@@ -824,13 +832,9 @@ export default {
|
|
824
832
|
}
|
825
833
|
}
|
826
834
|
|
827
|
-
& + .cmd-tooltip {
|
828
|
-
border-color: var(--status-color);
|
829
|
-
}
|
830
|
-
|
831
835
|
&.inline {
|
832
836
|
& > span {
|
833
|
-
& > a {
|
837
|
+
& > a:not(.button) {
|
834
838
|
margin-left: calc(var(--default-margin) / 2);
|
835
839
|
}
|
836
840
|
}
|
@@ -856,7 +860,6 @@ export default {
|
|
856
860
|
|
857
861
|
.place-inside {
|
858
862
|
+ .search-field-wrapper {
|
859
|
-
|
860
863
|
input {
|
861
864
|
padding-left: calc(var(--default-padding) * 3);
|
862
865
|
}
|
@@ -902,6 +905,7 @@ export default {
|
|
902
905
|
}
|
903
906
|
}
|
904
907
|
}
|
905
|
-
/* end toggle-switch
|
908
|
+
/* end toggle-switch */
|
906
909
|
}
|
910
|
+
/* end cmd-form-element------------------------------------------------------------------------------------------ */
|
907
911
|
</style>
|
@@ -1,18 +1,24 @@
|
|
1
1
|
<template>
|
2
|
-
<div :class="['cmd-input-group', {inline: labelInline, 'multiple-switch': multipleSwitch}]">
|
3
|
-
<span :class="['label', { hidden: !showLabel}]" :id="labelId" :aria-labelledby="labelId">
|
2
|
+
<div :class="['cmd-input-group label', {inline: labelInline, 'multiple-switch': multipleSwitch, disabled: disabled}]">
|
3
|
+
<span :class="['label-text', { hidden: !showLabel}]" :id="labelId" :aria-labelledby="labelId">
|
4
|
+
<span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
|
5
|
+
</span>
|
4
6
|
<span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
|
5
7
|
<label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id">
|
6
|
-
<input
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
8
|
+
<input
|
9
|
+
:type="inputTypes"
|
10
|
+
:id="inputElement.id"
|
11
|
+
:name="inputElement.name"
|
12
|
+
:value="inputElement.value"
|
13
|
+
v-model="inputValue"
|
14
|
+
:disabled="disabled"
|
15
|
+
:class="{'replace-input-type': replaceInputType}"
|
11
16
|
/>
|
12
17
|
<span v-if="multipleSwitch && inputElement.iconClass" :class="inputElement.iconClass"></span>
|
13
18
|
<span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
|
14
19
|
</label>
|
15
20
|
</span>
|
21
|
+
|
16
22
|
<!-- begin useSlot -->
|
17
23
|
<div v-else class="flex-container no-flex">
|
18
24
|
<!-- begin slot -->
|
@@ -58,6 +64,15 @@ export default {
|
|
58
64
|
type: String,
|
59
65
|
default: "radio"
|
60
66
|
},
|
67
|
+
/**
|
68
|
+
* for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)
|
69
|
+
*
|
70
|
+
* @affectsStyling: true
|
71
|
+
*/
|
72
|
+
replaceInputType: {
|
73
|
+
type: Boolean,
|
74
|
+
default: false
|
75
|
+
},
|
61
76
|
/**
|
62
77
|
* activate if input-elements should be given by slot
|
63
78
|
*/
|
@@ -105,6 +120,15 @@ export default {
|
|
105
120
|
stretchHorizontally: {
|
106
121
|
type: Boolean,
|
107
122
|
default: false
|
123
|
+
},
|
124
|
+
/**
|
125
|
+
* define disabled-property to set disabled-style
|
126
|
+
*
|
127
|
+
* component cannot handle native disabled-attribute, because it is no native form-element
|
128
|
+
*/
|
129
|
+
disabled: {
|
130
|
+
type: Boolean,
|
131
|
+
default: false
|
108
132
|
}
|
109
133
|
},
|
110
134
|
computed: {
|
@@ -1,8 +1,8 @@
|
|
1
1
|
<template>
|
2
2
|
<label class="cmd-progressbar" :for="id">
|
3
|
-
<span :class="{hidden: !showLabel}">{{ labelText }}</span>
|
3
|
+
<span :class="['label-text', {hidden: !showLabel}]">{{ labelText }}</span>
|
4
4
|
<span class="progressbar">
|
5
|
-
<span v-if="showLoadingStatus">{{ loadingStatus }}%</span><!-- do not place inside progress-tag (will not be displayed then) -->
|
5
|
+
<span v-if="showLoadingStatus">{{ loadingStatus }} %</span><!-- do not place inside progress-tag (will not be displayed then) -->
|
6
6
|
<progress v-bind="$attrs" :id="id" :value="loadingStatus"></progress>
|
7
7
|
</span>
|
8
8
|
</label>
|