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.
Files changed (59) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +2 -2
  4. package/src/App.vue +356 -225
  5. package/src/assets/data/list-of-links.json +0 -1
  6. package/src/assets/styles/global-styles.scss +26 -0
  7. package/src/components/CmdBox.vue +12 -6
  8. package/src/components/CmdCompanyLogo.vue +3 -3
  9. package/src/components/CmdCookieDisclaimer.vue +20 -4
  10. package/src/components/CmdFakeSelect.vue +17 -12
  11. package/src/components/CmdFormElement.vue +85 -81
  12. package/src/components/CmdInputGroup.vue +31 -7
  13. package/src/components/CmdProgressBar.vue +2 -2
  14. package/src/components/CmdTable.vue +1 -1
  15. package/src/components/CmdToggleDarkMode.vue +30 -10
  16. package/src/components/CmdTooltip.vue +1 -1
  17. package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json +32 -0
  18. package/src/documentation/generated/CmdBackToTopButtonPropertyDescriptions.json +12 -0
  19. package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json +34 -0
  20. package/src/documentation/generated/CmdBoxPropertyDescriptions.json +96 -0
  21. package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.json +79 -0
  22. package/src/documentation/generated/CmdBoxWrapperPropertyDescriptions.json +47 -0
  23. package/src/documentation/generated/CmdBreadcrumbsPropertyDescriptions.json +17 -0
  24. package/src/documentation/generated/CmdCompanyLogoPropertyDescriptions.json +27 -0
  25. package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json +32 -0
  26. package/src/documentation/generated/CmdCustomHeadlinePropertyDescriptions.json +22 -0
  27. package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json +84 -0
  28. package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +62 -0
  29. package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +253 -0
  30. package/src/documentation/generated/CmdFormFiltersPropertyDescriptions.json +32 -0
  31. package/src/documentation/generated/CmdFormPropertyDescriptions.json +40 -0
  32. package/src/documentation/generated/CmdGoogleMapsPropertyDescriptions.json +7 -0
  33. package/src/documentation/generated/CmdImageGalleryPropertyDescriptions.json +22 -0
  34. package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json +12 -0
  35. package/src/documentation/generated/CmdInputGroupPropertyDescriptions.json +86 -0
  36. package/src/documentation/generated/CmdListOfLinksPropertyDescriptions.json +60 -0
  37. package/src/documentation/generated/CmdLoginFormPropertyDescriptions.json +90 -0
  38. package/src/documentation/generated/CmdMainNavigationPropertyDescriptions.json +62 -0
  39. package/src/documentation/generated/CmdMultistepFormProgressBarPropertyDescriptions.json +17 -0
  40. package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json +42 -0
  41. package/src/documentation/generated/CmdPagerPropertyDescriptions.json +37 -0
  42. package/src/documentation/generated/CmdProgressBarPropertyDescriptions.json +32 -0
  43. package/src/documentation/generated/CmdShareButtonsPropertyDescriptions.json +34 -0
  44. package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json +27 -0
  45. package/src/documentation/generated/CmdSlideButtonPropertyDescriptions.json +25 -0
  46. package/src/documentation/generated/CmdSlideshowPropertyDescriptions.json +42 -0
  47. package/src/documentation/generated/CmdSwitchLanguagePropertyDescriptions.json +7 -0
  48. package/src/documentation/generated/CmdSystemMessagePropertyDescriptions.json +40 -0
  49. package/src/documentation/generated/CmdTablePropertyDescriptions.json +72 -0
  50. package/src/documentation/generated/CmdTabsPropertyDescriptions.json +27 -0
  51. package/src/documentation/generated/CmdThumbnailScrollerPropertyDescriptions.json +32 -0
  52. package/src/documentation/generated/CmdTooltipPropertyDescriptions.json +17 -0
  53. package/src/documentation/generated/CmdUploadFormPropertyDescriptions.json +175 -0
  54. package/src/documentation/generated/CmdWidthLimitationWrapperPropertyDescriptions.json +41 -0
  55. package/src/index.js +1 -1
  56. package/src/mixins/CmdFormElement/DefaultMessageProperties.js +1 -1
  57. package/src/mixins/FieldValidation.js +1 -1
  58. package/src/mixins/GlobalDefaultMessageProperties.js +1 -2
  59. package/src/mixins/I18n.js +12 -2
@@ -4,7 +4,6 @@
4
4
  "type": "href",
5
5
  "text": "",
6
6
  "path": "#",
7
- "target": "",
8
7
  "tooltip": "Link without text, but tooltip"
9
8
  },
10
9
  {
@@ -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
- <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
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
- <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
11
- </a>
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
- &:last-child {
313
- margin-top: auto;
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"]:last-child {
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'" :href="link.path" :title="link.tooltip">
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 :to="link.path" :title="link.tooltip">
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 CmdSwitchButton -->
25
- <!-- end CmdSwitchButton -->
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 CmdSwitchButton -->
53
- <!-- end CmdSwitchButton -->
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, disabled
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.status !== 'disabled') {
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
- &.error {
612
+ &.has-state {
608
613
  > ul {
609
614
  > li {
610
615
  > a {
611
- border-color: var(--error-color);
616
+ border-color: var(--status-color);
612
617
 
613
618
  > span, span[class*="icon-"] {
614
- color: var(--error-color);
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(--error-color);
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
- <div class="search-field-wrapper flex-container no-gap">
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="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
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
- </div>
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/CmdBox/DefaultMessageProperties"
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
- toggleSwitchUncheckedIconClass: {
552
- type: String,
553
- default: "icon-cancel-circle"
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
- &.has-state, & + .cmd-tooltip {
798
- &.error {
799
- --status-color: var(--error-color);
800
- }
801
-
802
- &.warning {
803
- --status-color: var(--warning-color);
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">{{ labelText }}</span>
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 :type="inputTypes"
7
- :id="inputElement.id"
8
- :name="inputElement.name"
9
- :value="inputElement.value"
10
- v-model="inputValue"
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>
@@ -133,7 +133,7 @@ export default {
133
133
  type: Object,
134
134
  default: function () {
135
135
  return {
136
- iconClass: "icon-table",
136
+ iconClass: "icon-toggle-table-width",
137
137
  tooltip: "Toggle table width"
138
138
  }
139
139
  }