comand-component-library 4.2.67 → 4.2.69
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 +2176 -2139
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +6 -6
- package/src/componentSettingsDataAndControls.vue +1004 -988
- package/src/components/CmdAddressData.vue +18 -1
- package/src/components/CmdBasicForm.vue +1 -1
- package/src/components/CmdCompanyLogo.vue +1 -0
- package/src/components/CmdContainer.vue +13 -1
- package/src/components/CmdFancyBox.vue +1 -1
- package/src/components/CmdMainNavigation.vue +2 -1
- package/src/components/CmdOpeningHoursItem.vue +39 -39
- package/src/components/CmdSiteHeader.vue +0 -1
- package/src/components/CmdUploadForm.vue +2 -2
- package/src/components/EditComponentWrapper.vue +2 -2
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<!-- begin list with labels -->
|
|
20
20
|
<template v-if="showLabels && (showLabelTexts|| showLabelIcons) && !showIconsOnly">
|
|
21
21
|
<!-- begin default view -->
|
|
22
|
-
<dl v-if="!editModeContext">
|
|
22
|
+
<dl v-if="!editModeContext" :class="{'auto-columns': contentOrientation === 'horizontal'}">
|
|
23
23
|
<!-- begin cmd-address-data-item -->
|
|
24
24
|
<CmdAddressDataItem
|
|
25
25
|
v-for="(entry, index) in addressData"
|
|
@@ -191,6 +191,17 @@ export default {
|
|
|
191
191
|
type: Boolean,
|
|
192
192
|
default: false
|
|
193
193
|
},
|
|
194
|
+
/**
|
|
195
|
+
*
|
|
196
|
+
*/
|
|
197
|
+
contentOrientation: {
|
|
198
|
+
type: String,
|
|
199
|
+
default: "vertical",
|
|
200
|
+
validator(value) {
|
|
201
|
+
return value === "vertical" ||
|
|
202
|
+
value === "horizontal"
|
|
203
|
+
}
|
|
204
|
+
},
|
|
194
205
|
/**
|
|
195
206
|
* show an icon (if exists) in front of label-text
|
|
196
207
|
*/
|
|
@@ -314,6 +325,12 @@ export default {
|
|
|
314
325
|
dl {
|
|
315
326
|
grid-row-gap: calc(var(--default-gap) / 2);
|
|
316
327
|
|
|
328
|
+
&.auto-columns {
|
|
329
|
+
dt:has([class*="icon-"]) {
|
|
330
|
+
align-items: baseline;
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
|
|
317
334
|
dt {
|
|
318
335
|
display: flex;
|
|
319
336
|
align-items: center;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
ref="form"
|
|
18
18
|
class="flex-container flex-direction-column"
|
|
19
19
|
>
|
|
20
|
-
<div v-if="configuration.salutation" class="flex-container flex-none row-for-small order-male-female">
|
|
20
|
+
<div v-if="configuration.salutation" class="flex-container flex-items-flex-none row-for-small order-male-female">
|
|
21
21
|
<!-- begin cmd-form-element -->
|
|
22
22
|
<CmdFormElement
|
|
23
23
|
element="input"
|
|
@@ -58,12 +58,21 @@ export default {
|
|
|
58
58
|
type: Boolean,
|
|
59
59
|
default: true
|
|
60
60
|
},
|
|
61
|
+
/**
|
|
62
|
+
* activate if container itself should not be handled as a flex-item by its parent
|
|
63
|
+
*
|
|
64
|
+
* @affectsStyling: true
|
|
65
|
+
*/
|
|
66
|
+
flexNone: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
default: false
|
|
69
|
+
},
|
|
61
70
|
/**
|
|
62
71
|
* activate if items should not behave like flex-items (they are now shrunk to their content)
|
|
63
72
|
*
|
|
64
73
|
* @affectsStyling: true
|
|
65
74
|
*/
|
|
66
|
-
|
|
75
|
+
flexItemsFlexNone: {
|
|
67
76
|
type: Boolean,
|
|
68
77
|
default: false
|
|
69
78
|
},
|
|
@@ -132,6 +141,9 @@ export default {
|
|
|
132
141
|
if (this.flexNone) {
|
|
133
142
|
htmlClasses.push("flex-none")
|
|
134
143
|
}
|
|
144
|
+
if (this.flexItemsFlexNone) {
|
|
145
|
+
htmlClasses.push("flex-items-flex-none")
|
|
146
|
+
}
|
|
135
147
|
if (this.alignItems) {
|
|
136
148
|
htmlClasses.push("align-items-" + this.alignItems)
|
|
137
149
|
}
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
<!-- end slot-content -->
|
|
93
93
|
</div>
|
|
94
94
|
</div>
|
|
95
|
-
<footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container flex-none">
|
|
95
|
+
<footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container flex-items-flex-none">
|
|
96
96
|
<!-- begin cancel-button -->
|
|
97
97
|
<button
|
|
98
98
|
v-if="fancyBoxOptionsProperties.submitButtons?.cancel"
|
|
@@ -394,6 +394,7 @@ export default {
|
|
|
394
394
|
#toggle-offcanvas {
|
|
395
395
|
margin-left: 0;
|
|
396
396
|
display: none;
|
|
397
|
+
aspect-ratio: 1/1;
|
|
397
398
|
}
|
|
398
399
|
</style>
|
|
399
400
|
|
|
@@ -446,7 +447,7 @@ export default {
|
|
|
446
447
|
ul {
|
|
447
448
|
z-index: 1000; /* keep ul above overlay */
|
|
448
449
|
height: 100%;
|
|
449
|
-
background: var(--
|
|
450
|
+
background: var(--main-navigation-background);
|
|
450
451
|
}
|
|
451
452
|
}
|
|
452
453
|
}
|
|
@@ -35,49 +35,49 @@
|
|
|
35
35
|
<!-- begin hours -->
|
|
36
36
|
<dd class="flex-container flex-none">
|
|
37
37
|
<!-- begin AM -->
|
|
38
|
-
<div class="flex-container flex-none am-wrapper">
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
38
|
+
<div class="flex-container flex-items-flex-none am-wrapper">
|
|
39
|
+
<template v-if="editableDay.amClosed">
|
|
40
|
+
<CmdFormElement
|
|
41
|
+
element="input"
|
|
42
|
+
type="text"
|
|
43
|
+
class="edit-mode"
|
|
44
|
+
:showLabel="false"
|
|
45
|
+
labelText="Text for 'closed'"
|
|
46
|
+
placeholder="Text for 'closed'"
|
|
47
|
+
v-model="editableDay.amDisplayText"
|
|
48
|
+
/>
|
|
49
|
+
</template>
|
|
50
|
+
<div v-if="!editableDay.amClosed" class="input-wrapper">
|
|
51
|
+
<CmdFormElement
|
|
52
|
+
element="input"
|
|
53
|
+
type="time"
|
|
54
|
+
class="edit-mode"
|
|
55
|
+
:showLabel="false"
|
|
56
|
+
labelText="Text for AM from"
|
|
57
|
+
placeholder="Text for AM from"
|
|
58
|
+
v-model="editableDay.amFrom"
|
|
59
|
+
/>
|
|
60
|
+
<CmdFormElement
|
|
61
|
+
element="input"
|
|
62
|
+
type="time"
|
|
63
|
+
:showLabel="false"
|
|
64
|
+
class="edit-mode"
|
|
65
|
+
:min="editableDay.amFrom"
|
|
66
|
+
labelText="Text for AM till"
|
|
67
|
+
placeholder="Text for AM till"
|
|
68
|
+
v-model="editableDay.amTill"
|
|
69
|
+
/>
|
|
70
|
+
</div>
|
|
71
|
+
<a href="#"
|
|
72
|
+
@click.prevent="toggleClosedStatus('am')"
|
|
73
|
+
:title="editableDay.amClosed ? 'Set to open' : 'Set to closed'"
|
|
74
|
+
:class="editableDay.amClosed ? 'icon-clock' : 'icon-blocked'"
|
|
75
|
+
></a>
|
|
76
76
|
</div>
|
|
77
77
|
<!-- end AM -->
|
|
78
78
|
|
|
79
79
|
<!-- begin PM -->
|
|
80
|
-
<div class="flex-container flex-none pm-wrapper">
|
|
80
|
+
<div class="flex-container flex-items-flex-none pm-wrapper">
|
|
81
81
|
<template v-if="editableDay.pmClosed">
|
|
82
82
|
<CmdFormElement
|
|
83
83
|
element="input"
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
<!-- end CmdHeadline -->
|
|
47
47
|
|
|
48
48
|
<ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
|
|
49
|
-
<li class="flex-container flex-none">
|
|
49
|
+
<li class="flex-container flex-items-flex-none">
|
|
50
50
|
<a
|
|
51
51
|
href="#"
|
|
52
52
|
:title="getMessage('upload_form.labeltext.remove_all_files_from_list')"
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
<li
|
|
99
99
|
v-for="(uploadFile, index) in listOfFiles"
|
|
100
100
|
:key="index"
|
|
101
|
-
class="flex-container flex-none"
|
|
101
|
+
class="flex-container flex-items-flex-none"
|
|
102
102
|
>
|
|
103
103
|
<a
|
|
104
104
|
href="#"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
:data-identifier="componentIdentifier">
|
|
10
10
|
<li v-if="componentTag === 'ul'" class="action-buttons-wrapper">
|
|
11
11
|
<!-- begin action-buttons -->
|
|
12
|
-
<ul v-show="active" class="flex-container flex-none action-buttons" :data-component="componentName">
|
|
12
|
+
<ul v-show="active" class="flex-container flex-items-flex-none action-buttons" :data-component="componentName">
|
|
13
13
|
<!-- begin add -->
|
|
14
14
|
<li>
|
|
15
15
|
<a :class="['icon-hexagon button confirm', {disabled: !addHandlerProvider && !itemProvider && !allowAddComponent}]"
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
<!-- begin action-buttons -->
|
|
80
80
|
<p v-if="isOuterComponent" class="component-name">{{ componentName }}</p>
|
|
81
81
|
<ul v-show="active"
|
|
82
|
-
class="flex-container flex-none action-buttons"
|
|
82
|
+
class="flex-container flex-items-flex-none action-buttons"
|
|
83
83
|
:data-component="componentName"
|
|
84
84
|
@mouseenter="addHighlightRelatedComponent"
|
|
85
85
|
@mouseleave="removeHighlightRelatedComponent">
|