comand-component-library 4.0.39 → 4.0.41

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 (31) hide show
  1. package/dist/comand-component-library.js +2497 -2562
  2. package/dist/comand-component-library.umd.cjs +7 -7
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/ComponentLibrary.vue +6 -10
  6. package/src/componentSettingsDataAndControls.vue +16 -7
  7. package/src/components/CmdBackToTopButton.vue +3 -3
  8. package/src/components/CmdBankAccountData.vue +3 -3
  9. package/src/components/CmdBox.vue +1 -1
  10. package/src/components/CmdContainer.vue +1 -5
  11. package/src/components/CmdFancyBox.vue +2 -3
  12. package/src/components/CmdHeadline.vue +24 -15
  13. package/src/components/CmdImageZoom.vue +8 -6
  14. package/src/components/CmdLink.vue +3 -0
  15. package/src/components/CmdMultistepFormProgressBar.vue +16 -0
  16. package/src/components/CmdNewsletterSubscription.vue +18 -13
  17. package/src/components/CmdOpeningHours.vue +9 -17
  18. package/src/components/CmdSidebar.vue +1 -2
  19. package/src/components/CmdSiteFooter.vue +1 -1
  20. package/src/components/CmdSiteHeader.vue +2 -6
  21. package/src/components/CmdSlideButton.vue +1 -1
  22. package/src/components/CmdSwitchLanguage.vue +1 -1
  23. package/src/components/CmdSystemMessage.vue +1 -1
  24. package/src/components/CmdToggleDarkMode.vue +10 -10
  25. package/src/components/CmdTooltip.vue +1 -4
  26. package/src/components/CmdTooltipForFormElements.vue +2 -7
  27. package/src/components/CmdTooltipForInputElements.vue +1 -7
  28. package/src/components/CmdUploadForm.vue +17 -17
  29. package/src/components/CmdWidthLimitationWrapper.vue +1 -3
  30. package/src/components/ComponentSettings.vue +1 -1
  31. package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json +1 -1
@@ -3,9 +3,7 @@
3
3
  <!-- begin cmd-headline -->
4
4
  <CmdHeadline
5
5
  v-if="cmdHeadline"
6
- :pre-headline-text="cmdHeadline.preHeadlineText"
7
- :headline-text="cmdHeadline.headlineText"
8
- :headline-level="cmdHeadline.headlineLevel"
6
+ v-bind="cmdHeadline"
9
7
  />
10
8
  <!-- end cmd-headline -->
11
9
 
@@ -73,8 +71,6 @@ export default {
73
71
  },
74
72
  /**
75
73
  * properties for CmdHeadline-component
76
- *
77
- * @requiredForAccessibilty
78
74
  */
79
75
  cmdHeadline: {
80
76
  type: Object,
@@ -9,9 +9,8 @@
9
9
  <header class="flex-container">
10
10
  <!-- begin CmdHeadline -->
11
11
  <CmdHeadline
12
- v-if="cmdHeadline?.show"
13
- :headlineText="cmdHeadline?.headlineText"
14
- :headlineLevel="cmdHeadline?.headlineLevel"
12
+ v-if="cmdHeadline?.headlineText"
13
+ v-bind="cmdHeadline"
15
14
  :id="htmlId"
16
15
  />
17
16
  <!-- end CmdHeadline -->
@@ -1,11 +1,12 @@
1
1
  <template>
2
2
  <!-- begin default-view -->
3
3
  <div v-if="!editModeContext || settingsContext || mainSidebarContext || headlineText"
4
- :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
4
+ :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
5
+ <!-- begin headline with pre-headline-text -->
5
6
  <template v-if="preHeadlineText">
6
7
  <component v-if="headlineText" :is="headlineTag">
7
8
  <!-- begin CmdIcon -->
8
- <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
9
+ <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
9
10
  <!-- end CmdIcon -->
10
11
 
11
12
  <span class="pre-headline-text-wrapper">
@@ -21,9 +22,12 @@
21
22
  </span>
22
23
  </component>
23
24
  </template>
25
+ <!-- end headline with pre-headline-text -->
26
+
27
+ <!-- begin headline without pre-headline-text -->
24
28
  <component v-else :is="headlineTag">
25
29
  <!-- begin CmdIcon -->
26
- <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
30
+ <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
27
31
  <!-- end CmdIcon -->
28
32
 
29
33
  <span>
@@ -32,6 +36,7 @@
32
36
  <!-- end slot -->
33
37
  </span>
34
38
  </component>
39
+ <!-- end headline without pre-headline-text -->
35
40
  </div>
36
41
  <!-- end default-view -->
37
42
 
@@ -48,26 +53,29 @@
48
53
  :allowDeleteComponent="!!headlineText"
49
54
  >
50
55
  <template v-slot="slotProps">
56
+ <!-- begin CmdFormElement -->
51
57
  <CmdFormElement
52
58
  v-if="slotProps.editing"
53
59
  element="input"
54
60
  type="text"
55
- :class="['edit-mode', 'headline', 'h'+ headlineLevel, getTextAlign]"
61
+ :class="['edit-mode', 'headline', 'h'+ headlineLevel, headlineTextAlign]"
56
62
  labelText="Headline"
57
63
  :showLabel="false"
58
64
  placeholder="Headline"
59
65
  v-model="editableHeadlineText"
60
66
  />
67
+ <!-- end CmdFormElement -->
68
+
61
69
  <template v-else-if="headlineText"
62
- :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
70
+ :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
63
71
  <!-- begin CmdIcon -->
64
- <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
72
+ <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
65
73
  <!-- end CmdIcon -->
66
74
 
67
75
  <template v-if="preHeadlineText">
68
76
  <component v-if="headlineText" :is="headlineTag">
69
77
  <!-- begin CmdIcon -->
70
- <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
78
+ <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
71
79
  <!-- end CmdIcon -->
72
80
 
73
81
  <!-- begin pre-headline-text -->
@@ -85,6 +93,7 @@
85
93
  <!-- end slot -->
86
94
  </component>
87
95
  </template>
96
+
88
97
  <!-- begin show placeholder if no image exists (and component is not edited) -->
89
98
  <button v-else-if="componentActive" type="button" class="button confirm" @click="onAddItem">
90
99
  <span class="icon-plus"></span>
@@ -131,13 +140,6 @@ export default {
131
140
  type: String,
132
141
  required: false
133
142
  },
134
- /**
135
- * icon-class for icon shown left/before headline
136
- */
137
- headlineIcon: {
138
- type: Object,
139
- required: false
140
- },
141
143
  /**
142
144
  * text-alignment (has no effect if icon is used)
143
145
  *
@@ -151,6 +153,13 @@ export default {
151
153
  value === "center" ||
152
154
  value === "right"
153
155
  }
156
+ },
157
+ /**
158
+ * properties for CmdIcon-component to show icon left/before headline
159
+ */
160
+ cmdIcon: {
161
+ type: Object,
162
+ required: false
154
163
  }
155
164
  },
156
165
  computed: {
@@ -166,7 +175,7 @@ export default {
166
175
  }
167
176
  return ""
168
177
  },
169
- getTextAlign() {
178
+ headlineTextAlign() {
170
179
  if (this.textAlign) {
171
180
  return "text-" + this.textAlign
172
181
  }
@@ -1,21 +1,23 @@
1
1
  <template>
2
- <div class="cmd-imagezoom flex-container">
3
-
2
+ <div class="cmd-image-zoom flex-container">
4
3
  <!-- begin small image -->
5
4
  <a href="#" class="no-flex thumbnails-imagezoom" :title="imageSmall.tooltip">
6
- <img :src="imageSmall.src"
5
+ <!-- begin CmdImage for small image -->
6
+ <CmdImage :src="imageSmall.src"
7
7
  :alt="imageSmall.alt"
8
8
  @mouseover="onMouseOver"
9
9
  @mousemove="onMouseMove"
10
10
  @mouseout="onMouseOut"
11
11
  />
12
- <!-- end CmdImage -->
12
+ <!-- end CmdImage for small image -->
13
13
  </a>
14
14
  <!-- end small image -->
15
15
 
16
16
  <!-- begin large image -->
17
17
  <div v-if="showLargeImage" class="zoom-container">
18
- <img :src="imageLarge.src" :alt="imageLarge.alt"/>
18
+ <!-- begin CmdImage for large image -->
19
+ <CmdImage v-bind="imageLarge" />
20
+ <!-- end CmdImage for large image -->
19
21
  </div>
20
22
  <div v-if="showLargeImage" class="zoom-overlay"></div>
21
23
  <!-- end large image -->
@@ -111,7 +113,7 @@ function clamp(value, min, max) {
111
113
 
112
114
  <style>
113
115
  /* begin cmd-imagezoom ---------------------------------------------------------------------------------------- */
114
- .cmd-imagezoom {
116
+ .cmd-image-zoom {
115
117
  overflow: hidden;
116
118
 
117
119
  .zoom-container {
@@ -5,6 +5,7 @@
5
5
  <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
6
6
  <span v-if="text">{{ text }}</span>
7
7
  <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
8
+ <slot></slot>
8
9
  </a>
9
10
  <!-- end href -->
10
11
 
@@ -13,6 +14,7 @@
13
14
  <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
14
15
  <span v-if="text">{{ text }}</span>
15
16
  <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
17
+ <slot></slot>
16
18
  </router-link>
17
19
  <!-- end router -->
18
20
 
@@ -21,6 +23,7 @@
21
23
  <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
22
24
  <span v-if="text">{{ text }}</span>
23
25
  <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
26
+ <slot></slot>
24
27
  </button>
25
28
  <!-- end button -->
26
29
  <!-- end CmdLink -->
@@ -1,6 +1,22 @@
1
1
  <template>
2
2
  <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap}]">
3
3
  <li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
4
+ <!-- begin CmdLink -->
5
+ <CmdLink
6
+ :linkType="step.type"
7
+ :path="step.path"
8
+ :title="step.tooltip"
9
+ @click.stop.prevent="clickedStep($event, index)"
10
+ >
11
+ <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
12
+ <!-- begin CmdIcon -->
13
+ <CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
14
+ <!-- end CmdIcon -->
15
+ <span v-if="step.text">{{ step.text }}</span>
16
+ <span :class="separatorIconClass"></span>
17
+ </CmdLink>
18
+ <!-- end CmdLink -->
19
+
4
20
  <!-- begin type === href -->
5
21
  <a v-if="step.type === 'href'"
6
22
  :href="step.path" @click.stop.prevent="clickedStep($event, index)"
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <fieldset class="cmd-newsletter-subscription flex-container">
3
3
  <!-- begin legend -->
4
- <legend :class="{'hidden' : !showLegend}">{{ textLegend }}</legend>
4
+ <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
5
5
  <!-- end legend -->
6
6
 
7
7
  <!-- begin cmd-input-group -->
@@ -64,6 +64,11 @@ export default {
64
64
  }
65
65
  }
66
66
  },
67
+ /**
68
+ * set type for button
69
+ *
70
+ * @allowedValues: "submit", "button"
71
+ */
67
72
  buttonType: {
68
73
  type: String,
69
74
  default: "button",
@@ -72,20 +77,20 @@ export default {
72
77
  }
73
78
  },
74
79
  /**
75
- * toggle legend visibility
76
- */
77
- showLegend: {
78
- type: Boolean,
79
- default: true
80
- },
81
- /**
82
- * text used as legend for login-fieldset
80
+ * legend for form
83
81
  *
84
- * @requiredForAccessibility: true
82
+ * useFieldset-property must be activated
83
+ *
84
+ * @requiredForAccessiblity: true
85
85
  */
86
- textLegend: {
87
- type: String,
88
- default: "Stay up-to-date"
86
+ legend: {
87
+ default() {
88
+ return {
89
+ show: true,
90
+ align: "left",
91
+ text: "Legend"
92
+ }
93
+ }
89
94
  },
90
95
  /**
91
96
  * properties for CmdInputGroup-component
@@ -9,16 +9,8 @@
9
9
 
10
10
  <!-- begin opening-status with link to detail-page -->
11
11
  <template v-if="!editing">
12
- <template v-if="link && link?.path && link?.show">
13
- <a v-if="link.type === 'href'" :href="link.path" :class="{closed: isClosed}">{{ textOpenClosed }}</a>
14
- <router-link v-if="link.type === 'router'" :to="link.path" :class="{closed: isClosed}">{{
15
- textOpenClosed
16
- }}
17
- </router-link>
18
- <button v-if="link.type === 'button'" :class="['button', {closed: isClosed}]">{{
19
- textOpenClosed
20
- }}
21
- </button>
12
+ <template v-if="cmdLink?.path">
13
+ <CmdLink :linkType="cmdLink.type || 'href'" v-bind="cmdLink" :class="{closed: isClosed}">{{ textOpenClosed }}</CmdLink>
22
14
  </template>
23
15
  <!-- end opening-status with link to detail-page -->
24
16
 
@@ -182,13 +174,6 @@ export default {
182
174
  type: Boolean,
183
175
  default: false
184
176
  },
185
- /**
186
- * set a link to a detail page
187
- */
188
- link: {
189
- type: Object,
190
- required: false
191
- },
192
177
  /**
193
178
  * text for 'open'-information
194
179
  */
@@ -266,6 +251,13 @@ export default {
266
251
  type: Number,
267
252
  default: 5000
268
253
  },
254
+ /**
255
+ * properties for CmdLink-component
256
+ */
257
+ cmdLink: {
258
+ type: Object,
259
+ required: false
260
+ },
269
261
  /**
270
262
  * properties for CmdHeadline-component
271
263
  */
@@ -5,9 +5,8 @@
5
5
  <!-- begin CmdHeadline -->
6
6
  <CmdHeadline
7
7
  v-if="cmdHeadline?.headlineText && open"
8
- :headlineText="cmdHeadline.headlineText"
8
+ v-bind="cmdHeadline"
9
9
  :headlineLevel="cmdHeadline.headlineLevel || 3"
10
- :textAlign="cmdHeadline.textAlign"
11
10
  class="sidebar-main-headline"
12
11
  />
13
12
  <!-- end CmdHeadline -->
@@ -11,7 +11,7 @@ export default {
11
11
  name: "CmdSiteFooter",
12
12
  props: {
13
13
  /**
14
- * set to vertical if items inside should be arranged vertically
14
+ * set to vertical if inner content should be arranged vertically
15
15
  *
16
16
  * @allowedValues: horizontal, vertical
17
17
  */
@@ -43,9 +43,7 @@
43
43
  <!-- begin CmdMainNavigation -->
44
44
  <CmdMainNavigation
45
45
  v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
46
- :navigationEntries="cmdMainNavigation.navigationEntries"
47
- :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
48
- :stretchMainItems="cmdMainNavigation.stretchMainItems"
46
+ v-bind="cmdMainNavigation"
49
47
  :closeOffcanvas="closeOffcanvas"
50
48
  @offcanvas="emitOffcanvasStatus"
51
49
  />
@@ -58,10 +56,8 @@
58
56
  <!-- begin CmdMainNavigation -->
59
57
  <CmdMainNavigation
60
58
  v-if="cmdMainNavigation?.navigationEntries?.length && !navigationInline"
61
- :navigationEntries="cmdMainNavigation.navigationEntries"
62
- :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
59
+ v-bind="cmdMainNavigation"
63
60
  :closeOffcanvas="closeOffcanvas"
64
- :stretchMainItems="cmdMainNavigation.stretchMainItems"
65
61
  @offcanvas="emitOffcanvasStatus"
66
62
  />
67
63
  <!-- end CmdMainNavigation -->
@@ -4,7 +4,7 @@
4
4
  :class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
5
5
  :title="getDirection.tooltip">
6
6
  <!-- begin CmdIcon -->
7
- <CmdIcon :iconClass="getDirection.iconClass || 'next'" />
7
+ <CmdIcon :type="getDirection.iconType || 'auto'" :iconClass="getDirection.iconClass || 'next'" />
8
8
  <!-- end CmdIcon -->
9
9
  </a>
10
10
  </template>
@@ -7,7 +7,7 @@
7
7
  :class="['flag', language.iso2, {'active': activeLanguage(language)}]"
8
8
  :title="language.tooltip"
9
9
  @click="$emit('click', { originalEvent: $event, language} )">
10
- <img :src="imageSources[index]" :alt="language.name" />
10
+ <img :src="imageSources[index]" :alt="language.name" />
11
11
  </a>
12
12
  <!-- end link-type 'href' -->
13
13
 
@@ -22,7 +22,7 @@
22
22
  <!-- begin CmdHeadline -->
23
23
  <CmdHeadline
24
24
  class="message-headline"
25
- :headlineIcon="headlineIcon"
25
+ :cmdIcon="headlineIcon"
26
26
  :headlineText="systemMessage"
27
27
  :headlineLevel="messageHeadlineLevel"
28
28
  :id="htmlId"
@@ -36,19 +36,19 @@
36
36
  <template v-else>
37
37
  <!-- begin edit-mode -->
38
38
  <CmdFormElement
39
- element="input"
40
- type="text"
41
- labelText="Label for Light Mode"
42
- placeholder="Label for Light Mode"
43
- v-model="labelTextLightModeModel"
39
+ element="input"
40
+ type="text"
41
+ labelText="Label for Light Mode"
42
+ placeholder="Label for Light Mode"
43
+ v-model="labelTextLightModeModel"
44
44
  />
45
45
 
46
46
  <CmdFormElement
47
- element="input"
48
- type="text"
49
- labelText="Label for Dark Mode"
50
- placeholder="Label for Dark Mode"
51
- v-model="labelTextDarkModeModel"
47
+ element="input"
48
+ type="text"
49
+ labelText="Label for Dark Mode"
50
+ placeholder="Label for Dark Mode"
51
+ v-model="labelTextDarkModeModel"
52
52
  />
53
53
  <!-- end edit-mode -->
54
54
  </template>
@@ -4,10 +4,7 @@
4
4
  <!-- begin CmdHeadline -->
5
5
  <CmdHeadline
6
6
  v-if="cmdHeadline"
7
- :iconClass="cmdHeadline.iconClass"
8
- :preHeadline="cmdHeadline.preHeadline"
9
- :headlineLevel="cmdHeadline.headlineLevel"
10
- :headlineText="cmdHeadline.headlineText"
7
+ v-bind="cmdHeadline"
11
8
  />
12
9
  <!-- end CmdHeadline -->
13
10
 
@@ -2,7 +2,7 @@
2
2
  <!-- begin CmdTooltip -->
3
3
  <CmdTooltip
4
4
  ref="tooltip"
5
- class="box cmd-tooltip-for-form-elements"
5
+ class="cmd-tooltip-for-form-elements box"
6
6
  :class="validationStatus"
7
7
  :relatedId="relatedId"
8
8
  :toggle-visibility-by-click="true">
@@ -10,12 +10,7 @@
10
10
  <!-- begin CmdListOfRequirements -->
11
11
  <CmdListOfRequirements
12
12
  v-if="cmdListOfRequirements.showRequirements"
13
- :showHeadline="cmdListOfRequirements.showHeadline"
14
- :inputRequirements="cmdListOfRequirements.inputRequirements"
15
- :helplink="cmdListOfRequirements.helplink"
16
- :inputModelValue="cmdListOfRequirements.inputModelValue"
17
- :inputAttributes="cmdListOfRequirements.inputAttributes"
18
- :labelText="cmdListOfRequirements.labelText"
13
+ v-bind="cmdListOfRequirements"
19
14
  />
20
15
  <!-- end CmdListOfRequirements -->
21
16
  </CmdTooltip>
@@ -10,13 +10,7 @@
10
10
  <!-- begin CmdListOfRequirements -->
11
11
  <CmdListOfRequirements
12
12
  v-if="cmdListOfRequirements.showRequirements"
13
- :showHeadline="cmdListOfRequirements.showHeadline"
14
- :inputRequirements="cmdListOfRequirements.inputRequirements"
15
- :helplink="cmdListOfRequirements.helplink"
16
- :inputModelValue="cmdListOfRequirements.inputModelValue"
17
- :inputAttributes="cmdListOfRequirements.inputAttributes"
18
- :validationTooltip="cmdListOfRequirements.validationTooltip"
19
- :labelText="cmdListOfRequirements.labelText"
13
+ v-bind="cmdListOfRequirements"
20
14
  />
21
15
  <!-- end CmdListOfRequirements -->
22
16
  </CmdTooltip>
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <!-- begin advanced mode -->
3
3
  <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
4
- <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
4
+ <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
5
5
  <!-- begin CmdHeadlineFieldset -->
6
6
  <CmdHeadline
7
7
  v-if="cmdHeadlineFieldset"
@@ -52,7 +52,7 @@
52
52
  @click.prevent="cancelUpload"
53
53
  >
54
54
  <!-- begin CmdIcon -->
55
- <CmdIcon :iconClass="deleteIcon.iconClass" :type="deleteIcon.iconClass"/>
55
+ <CmdIcon v-bind="iconDelete" />
56
56
  <!-- end CmdIcon -->
57
57
  </a>
58
58
  <span>
@@ -105,7 +105,7 @@
105
105
  @click.prevent="removeFile(index)"
106
106
  >
107
107
  <!-- begin CmdIcon -->
108
- <CmdIcon :iconClass="iconDelete.iconClass" :type="iconDelete.iconType"/>
108
+ <CmdIcon v-bind="iconDelete" />
109
109
  <!-- end CmdIcon -->
110
110
  </a>
111
111
  <span
@@ -271,7 +271,7 @@
271
271
  @click="uploadFiles"
272
272
  >
273
273
  <!-- begin CmdIcon -->
274
- <CmdIcon :iconClass="iconUpload.iconClass" :type="iconUpload.iconType"/>
274
+ <CmdIcon v-bind="iconUpload" />
275
275
  <!-- end CmdIcon -->
276
276
  <span v-if="listOfFiles.length === 1 || !allowMultipleFileUploads">
277
277
  {{ getMessage("cmduploadform.buttontext.upload_file") }}
@@ -280,7 +280,7 @@
280
280
  </button>
281
281
  <button :class="['button', { disabled: listOfFiles.length === 0 }]" @click="cancel">
282
282
  <!-- begin CmdIcon -->
283
- <CmdIcon :iconClass="iconCancel.iconClass" :type="iconCancel.iconType"/>
283
+ <CmdIcon v-bind="iconCancel" />
284
284
  <!-- end CmdIcon -->
285
285
  <span>{{ getMessage("cmduploadform.buttontext.cancel") }}</span>
286
286
  </button>
@@ -481,20 +481,20 @@ export default {
481
481
  default: true
482
482
  },
483
483
  /**
484
- * toggle visibility for legend-text
485
- */
486
- showLegend: {
487
- type: Boolean,
488
- default: true
489
- },
490
- /**
491
- * text for legend
484
+ * legend for form
485
+ *
486
+ * useFieldset-property must be activated
492
487
  *
493
- * @requiredForAccessibility: true
488
+ * @requiredForAccessiblity: true
494
489
  */
495
- textLegend: {
496
- type: String,
497
- required: false
490
+ legend: {
491
+ default() {
492
+ return {
493
+ show: true,
494
+ align: "left",
495
+ text: "Legend"
496
+ }
497
+ }
498
498
  },
499
499
  /**
500
500
  * set icon for delete-icons
@@ -5,9 +5,7 @@
5
5
  <!-- begin cmd-headline -->
6
6
  <CmdHeadline
7
7
  v-if="cmdHeadline"
8
- :pre-headline-text="cmdHeadline.preHeadlineText"
9
- :headline-text="cmdHeadline.headlineText"
10
- :headline-level="cmdHeadline.headlineLevel"
8
+ v-bind="cmdHeadline"
11
9
  />
12
10
  <!-- end cmd-headline -->
13
11
 
@@ -2,7 +2,7 @@
2
2
  <CmdBox
3
3
  :use-slots="['body']"
4
4
  :collapsible="true"
5
- :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
5
+ :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, cmdIcon: {iconClass: 'icon-settings-template'}}"
6
6
  :openCollapsedBox="true"
7
7
  boxBodyClass="settings-body"
8
8
  >
@@ -14,7 +14,7 @@
14
14
  "small pre-headline-text above main-headline"
15
15
  ]
16
16
  },
17
- "headlineIcon": {
17
+ "cmdIcon": {
18
18
  "comments": [
19
19
  "icon-class for icon shown left/before headline"
20
20
  ]