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.
- package/dist/comand-component-library.js +2497 -2562
- package/dist/comand-component-library.umd.cjs +7 -7
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/ComponentLibrary.vue +6 -10
- package/src/componentSettingsDataAndControls.vue +16 -7
- package/src/components/CmdBackToTopButton.vue +3 -3
- package/src/components/CmdBankAccountData.vue +3 -3
- package/src/components/CmdBox.vue +1 -1
- package/src/components/CmdContainer.vue +1 -5
- package/src/components/CmdFancyBox.vue +2 -3
- package/src/components/CmdHeadline.vue +24 -15
- package/src/components/CmdImageZoom.vue +8 -6
- package/src/components/CmdLink.vue +3 -0
- package/src/components/CmdMultistepFormProgressBar.vue +16 -0
- package/src/components/CmdNewsletterSubscription.vue +18 -13
- package/src/components/CmdOpeningHours.vue +9 -17
- package/src/components/CmdSidebar.vue +1 -2
- package/src/components/CmdSiteFooter.vue +1 -1
- package/src/components/CmdSiteHeader.vue +2 -6
- package/src/components/CmdSlideButton.vue +1 -1
- package/src/components/CmdSwitchLanguage.vue +1 -1
- package/src/components/CmdSystemMessage.vue +1 -1
- package/src/components/CmdToggleDarkMode.vue +10 -10
- package/src/components/CmdTooltip.vue +1 -4
- package/src/components/CmdTooltipForFormElements.vue +2 -7
- package/src/components/CmdTooltipForInputElements.vue +1 -7
- package/src/components/CmdUploadForm.vue +17 -17
- package/src/components/CmdWidthLimitationWrapper.vue +1 -3
- package/src/components/ComponentSettings.vue +1 -1
- 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
|
-
|
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?.
|
13
|
-
|
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':
|
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="
|
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="
|
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,
|
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':
|
70
|
+
:class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
|
63
71
|
<!-- begin CmdIcon -->
|
64
|
-
<CmdIcon v-if="
|
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="
|
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
|
-
|
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-
|
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
|
-
|
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
|
-
|
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-
|
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="{
|
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
|
-
*
|
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
|
-
*
|
82
|
+
* useFieldset-property must be activated
|
83
|
+
*
|
84
|
+
* @requiredForAccessiblity: true
|
85
85
|
*/
|
86
|
-
|
87
|
-
|
88
|
-
|
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="
|
13
|
-
<
|
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
|
-
|
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 -->
|
@@ -43,9 +43,7 @@
|
|
43
43
|
<!-- begin CmdMainNavigation -->
|
44
44
|
<CmdMainNavigation
|
45
45
|
v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
|
46
|
-
|
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
|
-
|
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
|
-
|
10
|
+
<img :src="imageSources[index]" :alt="language.name" />
|
11
11
|
</a>
|
12
12
|
<!-- end link-type 'href' -->
|
13
13
|
|
@@ -36,19 +36,19 @@
|
|
36
36
|
<template v-else>
|
37
37
|
<!-- begin edit-mode -->
|
38
38
|
<CmdFormElement
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
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
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
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
|
-
|
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="
|
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
|
-
|
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
|
-
|
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 : !
|
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
|
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
|
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
|
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
|
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
|
-
*
|
485
|
-
|
486
|
-
|
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
|
-
* @
|
488
|
+
* @requiredForAccessiblity: true
|
494
489
|
*/
|
495
|
-
|
496
|
-
|
497
|
-
|
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
|
-
|
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,
|
5
|
+
:cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, cmdIcon: {iconClass: 'icon-settings-template'}}"
|
6
6
|
:openCollapsedBox="true"
|
7
7
|
boxBodyClass="settings-body"
|
8
8
|
>
|