comand-component-library 3.3.84 → 3.3.86
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 +5623 -3929
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/App.vue +215 -112
- package/src/assets/data/component-structure.json +228 -0
- package/src/assets/data/form-elements.json +156 -0
- package/src/assets/data/opening-hours.json +79 -37
- package/src/components/CmdAddressData.vue +187 -201
- package/src/components/CmdAddressDataItem.vue +306 -0
- package/src/components/CmdBox.vue +1 -0
- package/src/components/CmdBoxWrapper.vue +53 -5
- package/src/components/CmdFancyBox.vue +31 -4
- package/src/components/CmdForm.vue +98 -4
- package/src/components/CmdFormElement.vue +5 -1
- package/src/components/CmdHeadline.vue +179 -52
- package/src/components/CmdImage.vue +205 -76
- package/src/components/CmdImageGallery.vue +88 -85
- package/src/components/CmdListOfLinks.vue +63 -43
- package/src/components/CmdListOfLinksItem.vue +97 -0
- package/src/components/CmdLoginForm.vue +3 -6
- package/src/components/CmdMultistepFormProgressBar.vue +37 -8
- package/src/components/CmdOpeningHours.vue +280 -63
- package/src/components/CmdOpeningHoursItem.vue +264 -0
- package/src/components/{CmdPager.vue → CmdPagination.vue} +2 -2
- package/src/components/CmdSlideshow.vue +137 -10
- package/src/components/CmdSocialNetworks.vue +115 -28
- package/src/components/CmdSocialNetworksItem.vue +184 -0
- package/src/components/CmdTable.vue +0 -1
- package/src/components/CmdTextImageBlock.vue +158 -0
- package/src/components/CmdThumbnailScroller.vue +132 -12
- package/src/components/CmdToggleDarkMode.vue +58 -1
- package/src/components/EditComponentWrapper.vue +553 -0
- package/src/index.js +2 -2
- package/src/mixins/EditMode.vue +28 -9
- package/src/utils/editmode.js +30 -5
- package/src/components/CmdTextBlock.vue +0 -73
- package/src/editmode/editModeContext.js +0 -50
|
@@ -1,133 +1,70 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="cmd-address-data vcard">
|
|
3
|
-
<!-- begin
|
|
4
|
-
<
|
|
5
|
-
|
|
3
|
+
<!-- begin slot -->
|
|
4
|
+
<template v-if="useSlot">
|
|
5
|
+
<slot></slot>
|
|
6
|
+
</template>
|
|
7
|
+
<!-- end slot -->
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<!-- begin CmdIcon -->
|
|
15
|
-
<CmdIcon
|
|
16
|
-
v-if="entry.iconClass && showLabelIcons"
|
|
17
|
-
:iconClass="entry.iconClass"
|
|
18
|
-
:type="entry.iconType"
|
|
19
|
-
:tooltip="entry.labelText"
|
|
20
|
-
/>
|
|
21
|
-
<!-- end CmdIcon -->
|
|
22
|
-
<span v-if="showLabelTexts">{{ entry.labelText }}</span>
|
|
23
|
-
</dt>
|
|
24
|
-
<!-- end labels -->
|
|
25
|
-
|
|
26
|
-
<!-- begin data (except for address) -->
|
|
27
|
-
<dd v-if="entry.name !== 'address' && entry.data" :class="vCardClass(entry)">
|
|
28
|
-
<a v-if="entry.href"
|
|
29
|
-
:href="getHref(entry)"
|
|
30
|
-
:target="entry.name === 'website' ? '_blank' : null"
|
|
31
|
-
:title="entry.tooltip"
|
|
32
|
-
v-telephone="entry.href">
|
|
33
|
-
{{ entry.href }}
|
|
34
|
-
</a>
|
|
35
|
-
<span v-else v-html="entry.data"></span>
|
|
36
|
-
</dd>
|
|
37
|
-
<!-- end data (except for address) -->
|
|
38
|
-
|
|
39
|
-
<!-- begin data for address -->
|
|
40
|
-
<dd v-else>
|
|
41
|
-
<!-- begin linked address -->
|
|
42
|
-
<a v-if="linkGoogleMaps"
|
|
43
|
-
:href="locateAddress(entry)"
|
|
44
|
-
target="google-maps"
|
|
45
|
-
:title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
|
|
46
|
-
<!-- begin street/number -->
|
|
47
|
-
<template v-if="entry.streetNo">
|
|
48
|
-
<span class="street-address">{{ entry.streetNo }}</span><br/>
|
|
49
|
-
</template>
|
|
50
|
-
<!-- end street/number -->
|
|
51
|
-
|
|
52
|
-
<!-- begin zip/city -->
|
|
53
|
-
<span v-if="entry.zip" class="postal-code">{{ entry.zip }}</span>
|
|
54
|
-
<template v-if="entry.city">
|
|
55
|
-
<span class="locality">{{ entry.city }}</span><br/>
|
|
56
|
-
</template>
|
|
57
|
-
<!-- end zip/city -->
|
|
58
|
-
|
|
59
|
-
<!-- begin miscInfo -->
|
|
60
|
-
<template v-if="entry.miscInfo">
|
|
61
|
-
<span>{{ entry.miscInfo }}</span><br/>
|
|
62
|
-
</template>
|
|
63
|
-
<!-- end miscInfo -->
|
|
9
|
+
<template v-else>
|
|
10
|
+
<!-- begin cmd-headline -->
|
|
11
|
+
<CmdHeadline
|
|
12
|
+
v-if="cmdHeadline?.headlineText || editModeContext"
|
|
13
|
+
v-bind="cmdHeadline"
|
|
14
|
+
/>
|
|
15
|
+
<!-- end cmd-headline -->
|
|
64
16
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<!-- begin zip/city -->
|
|
80
|
-
<span v-if="entry.zip" class="postal-code">{{ entry.zip }} </span>
|
|
81
|
-
<template v-if="entry.city">
|
|
82
|
-
<span class="locality">{{ entry.city }}</span><br/>
|
|
83
|
-
</template>
|
|
84
|
-
<!-- end zip/city -->
|
|
85
|
-
|
|
86
|
-
<!-- begin miscInfo -->
|
|
87
|
-
<template v-if="entry.miscInfo">
|
|
88
|
-
<span>{{ entry.miscInfo }}</span><br/>
|
|
89
|
-
</template>
|
|
90
|
-
<!-- end miscInfo -->
|
|
91
|
-
|
|
92
|
-
<!-- begin country -->
|
|
93
|
-
<span v-if="entry.country" class="country-name">{{ entry.country }}</span>
|
|
94
|
-
<!-- end country -->
|
|
95
|
-
</template>
|
|
96
|
-
<!-- end unlinked address -->
|
|
97
|
-
</dd>
|
|
98
|
-
<!-- end data for address -->
|
|
99
|
-
</template><!-- end v-for -->
|
|
100
|
-
<!-- end data -->
|
|
101
|
-
</dl>
|
|
102
|
-
<!-- end list with labels -->
|
|
17
|
+
<!-- begin address-data in vCard microformat -->
|
|
18
|
+
<address class="adr">
|
|
19
|
+
<!-- begin list with labels -->
|
|
20
|
+
<template v-if="showLabels && !showIconsOnly">
|
|
21
|
+
<!-- begin default view -->
|
|
22
|
+
<dl v-if="!editModeContext">
|
|
23
|
+
<CmdAddressDataItem
|
|
24
|
+
v-for="(entry, index) in addressData"
|
|
25
|
+
:key="index"
|
|
26
|
+
:addressEntry="entry"
|
|
27
|
+
/>
|
|
28
|
+
</dl>
|
|
29
|
+
<!-- end default view -->
|
|
103
30
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
31
|
+
<!-- begin edit-mode -->
|
|
32
|
+
<button v-if="addressData.length === 0" type="button" class="button confirm small"
|
|
33
|
+
@click="onAddItem">
|
|
34
|
+
<span class="icon-plus"></span>
|
|
35
|
+
<span>Add new entry</span>
|
|
36
|
+
</button>
|
|
37
|
+
<EditComponentWrapper
|
|
38
|
+
v-else
|
|
39
|
+
v-for="(entry, index) in addressData"
|
|
40
|
+
:key="'x' + index"
|
|
41
|
+
class="edit-items"
|
|
42
|
+
:showComponentName="false"
|
|
43
|
+
:allowedComponentTypes="[]"
|
|
44
|
+
componentName="CmdAddressDataItem"
|
|
45
|
+
:componentProps="entry"
|
|
46
|
+
:componentPath="['props', 'addressData', index]"
|
|
47
|
+
>
|
|
48
|
+
<dl>
|
|
49
|
+
<CmdAddressDataItem
|
|
50
|
+
:addressEntry="entry"
|
|
51
|
+
:showLabelIcons="showLabelIcons"
|
|
52
|
+
:showLabelTexts="showLabelTexts"
|
|
53
|
+
/>
|
|
54
|
+
</dl>
|
|
55
|
+
</EditComponentWrapper>
|
|
56
|
+
</template>
|
|
57
|
+
<!-- end list with labels -->
|
|
126
58
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
59
|
+
<!-- begin list without labels -->
|
|
60
|
+
<ul v-else :class="['flex-container', {'vertical': !showIconsOnly}]">
|
|
61
|
+
<template v-for="(entry, index) in addressData" :key="index">
|
|
62
|
+
<template v-if="entry.href || entry.type === 'address' || !showIconsOnly">
|
|
63
|
+
<li :class="{'no-flex' : showIconsOnly}">
|
|
64
|
+
<!-- begin all entries except address (which has no href) -->
|
|
65
|
+
<a v-if="entry.href" :href="getHref(entry)"
|
|
66
|
+
:target="{'_blank' : entry.type === 'url'}"
|
|
67
|
+
:title="entry.tooltip">
|
|
131
68
|
<template v-if="showIconsOnly">
|
|
132
69
|
<!-- begin CmdIcon -->
|
|
133
70
|
<CmdIcon
|
|
@@ -137,7 +74,54 @@
|
|
|
137
74
|
/>
|
|
138
75
|
<!-- end CmdIcon -->
|
|
139
76
|
</template>
|
|
140
|
-
<template v-else>
|
|
77
|
+
<template v-else>{{ entry.href }}</template>
|
|
78
|
+
</a>
|
|
79
|
+
<span v-else-if="!showIconsOnly" v-html="entry.data"></span>
|
|
80
|
+
<!-- end all entries except address -->
|
|
81
|
+
|
|
82
|
+
<!-- begin address -->
|
|
83
|
+
<template v-if="entry.type === 'address'">
|
|
84
|
+
<!-- begin linked address -->
|
|
85
|
+
<a v-if="entry.linkGoogleMaps" :href="locateAddress(entry)" target="google-maps"
|
|
86
|
+
:title="entry.tooltip">
|
|
87
|
+
<template v-if="showIconsOnly">
|
|
88
|
+
<!-- begin CmdIcon -->
|
|
89
|
+
<CmdIcon
|
|
90
|
+
v-if="entry.iconClass"
|
|
91
|
+
:iconClass="entry.iconClass"
|
|
92
|
+
:type="entry.iconType"
|
|
93
|
+
/>
|
|
94
|
+
<!-- end CmdIcon -->
|
|
95
|
+
</template>
|
|
96
|
+
<template v-else>
|
|
97
|
+
<!-- begin street/number -->
|
|
98
|
+
<template v-if="entry.streetNo">
|
|
99
|
+
<span class="street-address">{{ entry.streetNo }}</span><br/>
|
|
100
|
+
</template>
|
|
101
|
+
<!-- end street/number -->
|
|
102
|
+
|
|
103
|
+
<!-- begin zip/city -->
|
|
104
|
+
<template v-if="entry.zip || entry.city">
|
|
105
|
+
<span class="postal-code">{{ entry.zip }} </span>
|
|
106
|
+
<span class="locality">{{ entry.city }}</span><br/>
|
|
107
|
+
</template>
|
|
108
|
+
<!-- end zip/city -->
|
|
109
|
+
|
|
110
|
+
<!-- begin miscInfo -->
|
|
111
|
+
<template v-if="entry.miscInfo">
|
|
112
|
+
<span>{{ entry.miscInfo }}</span><br/>
|
|
113
|
+
</template>
|
|
114
|
+
<!-- end miscInfo -->
|
|
115
|
+
|
|
116
|
+
<!-- begin country -->
|
|
117
|
+
<span v-if="entry.country" class="country-name">{{ entry.country }}</span>
|
|
118
|
+
<!-- end country -->
|
|
119
|
+
</template>
|
|
120
|
+
</a>
|
|
121
|
+
<!-- end linked address -->
|
|
122
|
+
|
|
123
|
+
<!-- begin unlinked address -->
|
|
124
|
+
<template v-if="!entry.linkGoogleMaps && !showIconsOnly">
|
|
141
125
|
<!-- begin street/number -->
|
|
142
126
|
<template v-if="entry.streetNo">
|
|
143
127
|
<span class="street-address">{{ entry.streetNo }}</span><br/>
|
|
@@ -161,67 +145,43 @@
|
|
|
161
145
|
<span v-if="entry.country" class="country-name">{{ entry.country }}</span>
|
|
162
146
|
<!-- end country -->
|
|
163
147
|
</template>
|
|
164
|
-
|
|
165
|
-
<!-- end linked address -->
|
|
166
|
-
|
|
167
|
-
<!-- begin unlinked address -->
|
|
168
|
-
<template v-if="!linkGoogleMaps && !showIconsOnly">
|
|
169
|
-
<!-- begin street/number -->
|
|
170
|
-
<template v-if="entry.streetNo">
|
|
171
|
-
<span class="street-address">{{ entry.streetNo }}</span><br/>
|
|
172
|
-
</template>
|
|
173
|
-
<!-- end street/number -->
|
|
174
|
-
|
|
175
|
-
<!-- begin zip/city -->
|
|
176
|
-
<template v-if="entry.zip || entry.city">
|
|
177
|
-
<span class="postal-code">{{ entry.zip }} </span>
|
|
178
|
-
<span class="locality">{{ entry.city }}</span><br/>
|
|
179
|
-
</template>
|
|
180
|
-
<!-- end zip/city -->
|
|
181
|
-
|
|
182
|
-
<!-- begin miscInfo -->
|
|
183
|
-
<template v-if="entry.miscInfo">
|
|
184
|
-
<span>{{ entry.miscInfo }}</span><br/>
|
|
185
|
-
</template>
|
|
186
|
-
<!-- end miscInfo -->
|
|
187
|
-
|
|
188
|
-
<!-- begin country -->
|
|
189
|
-
<span v-if="entry.country" class="country-name">{{ entry.country }}</span>
|
|
190
|
-
<!-- end country -->
|
|
148
|
+
<!-- end unlinked address -->
|
|
191
149
|
</template>
|
|
192
|
-
<!-- end
|
|
193
|
-
</
|
|
194
|
-
|
|
195
|
-
|
|
150
|
+
<!-- end address -->
|
|
151
|
+
</li>
|
|
152
|
+
</template>
|
|
153
|
+
<!-- end all entries except address -->
|
|
196
154
|
</template>
|
|
197
|
-
<!-- end
|
|
198
|
-
</
|
|
199
|
-
<!-- end
|
|
200
|
-
</
|
|
201
|
-
<!-- end
|
|
202
|
-
</
|
|
203
|
-
<!-- end address-data in vCard microformat -->
|
|
155
|
+
<!-- end v-for -->
|
|
156
|
+
</ul>
|
|
157
|
+
<!-- end list without labels -->
|
|
158
|
+
</address>
|
|
159
|
+
<!-- end address-data in vCard microformat -->
|
|
160
|
+
</template>
|
|
204
161
|
</div>
|
|
205
162
|
</template>
|
|
206
163
|
|
|
207
164
|
<script>
|
|
165
|
+
import EditMode from "../mixins/EditMode.vue"
|
|
166
|
+
import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js";
|
|
167
|
+
|
|
208
168
|
// import mixins
|
|
209
169
|
import I18n from "../mixins/I18n"
|
|
210
170
|
import DefaultMessageProperties from "../mixins/CmdAddressData/DefaultMessageProperties"
|
|
211
171
|
|
|
212
172
|
export default {
|
|
213
173
|
name: "CmdAddressData",
|
|
214
|
-
mixins: [I18n, DefaultMessageProperties],
|
|
174
|
+
mixins: [EditMode, I18n, DefaultMessageProperties],
|
|
215
175
|
props: {
|
|
216
176
|
/**
|
|
217
|
-
* activate if
|
|
177
|
+
* activate if you want to use slot instead for given structure
|
|
218
178
|
*/
|
|
219
|
-
|
|
179
|
+
useSlot: {
|
|
220
180
|
type: Boolean,
|
|
221
181
|
default: false
|
|
222
182
|
},
|
|
223
183
|
/**
|
|
224
|
-
* show
|
|
184
|
+
* show an icon (if exists) in front of label-text
|
|
225
185
|
*/
|
|
226
186
|
showLabelIcons: {
|
|
227
187
|
type: Boolean,
|
|
@@ -232,7 +192,14 @@ export default {
|
|
|
232
192
|
*/
|
|
233
193
|
showLabelTexts: {
|
|
234
194
|
type: Boolean,
|
|
235
|
-
default:
|
|
195
|
+
default: false
|
|
196
|
+
},
|
|
197
|
+
/**
|
|
198
|
+
* activate if only icons (without any text) should be displayed
|
|
199
|
+
*/
|
|
200
|
+
showIconsOnly: {
|
|
201
|
+
type: Boolean,
|
|
202
|
+
default: false
|
|
236
203
|
},
|
|
237
204
|
/**
|
|
238
205
|
* option to toggle labels (i.e. telephone, email etc.) in front/left of data
|
|
@@ -245,16 +212,9 @@ export default {
|
|
|
245
212
|
* all address-data (incl. labels) that will be shown
|
|
246
213
|
*/
|
|
247
214
|
addressData: {
|
|
248
|
-
type:
|
|
215
|
+
type: Array,
|
|
249
216
|
required: true
|
|
250
217
|
},
|
|
251
|
-
/**
|
|
252
|
-
* link physical address (street, no, zip and city) with Google Maps
|
|
253
|
-
*/
|
|
254
|
-
linkGoogleMaps: {
|
|
255
|
-
type: Boolean,
|
|
256
|
-
default: false
|
|
257
|
-
},
|
|
258
218
|
/**
|
|
259
219
|
* properties for CmdHeadline-component
|
|
260
220
|
*/
|
|
@@ -263,49 +223,59 @@ export default {
|
|
|
263
223
|
required: false
|
|
264
224
|
}
|
|
265
225
|
},
|
|
226
|
+
data() {
|
|
227
|
+
return {
|
|
228
|
+
editableAddressData: []
|
|
229
|
+
}
|
|
230
|
+
},
|
|
266
231
|
computed: {
|
|
267
232
|
websiteUrlText() {
|
|
268
233
|
return this.addressData.website?.text.replace("https://", "")
|
|
269
234
|
}
|
|
270
235
|
},
|
|
271
236
|
methods: {
|
|
272
|
-
|
|
273
|
-
|
|
237
|
+
onAddItem() {
|
|
238
|
+
this.editModeContext.content.addContent(
|
|
239
|
+
buildComponentPath(this, 'props', 'addressData', -1),
|
|
240
|
+
this.itemProvider)
|
|
274
241
|
},
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
242
|
+
itemProvider() {
|
|
243
|
+
return {
|
|
244
|
+
"name": "name",
|
|
245
|
+
"iconClass": "icon-company",
|
|
246
|
+
"data": "Your data",
|
|
247
|
+
"labelText": "Label"
|
|
278
248
|
}
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
}
|
|
283
|
-
if (entry.zip) {
|
|
284
|
-
return "postal-code"
|
|
285
|
-
}
|
|
286
|
-
if (entry.city) {
|
|
287
|
-
return "locality"
|
|
288
|
-
}
|
|
289
|
-
if (entry.country) {
|
|
290
|
-
return "country-name"
|
|
291
|
-
}
|
|
292
|
-
}
|
|
293
|
-
return null
|
|
249
|
+
},
|
|
250
|
+
locateAddress(entry) {
|
|
251
|
+
return "https://www.google.com/maps/place/" + entry.streetNo + ", " + entry.zip + " " + entry.city
|
|
294
252
|
},
|
|
295
253
|
getHref(entry) {
|
|
296
|
-
if (entry.
|
|
254
|
+
if (entry.type === "phone") {
|
|
297
255
|
return "tel:" + entry.href
|
|
298
256
|
}
|
|
299
|
-
if (entry.
|
|
257
|
+
if (entry.type === "email") {
|
|
300
258
|
return "mailto:" + entry.href
|
|
301
259
|
}
|
|
302
|
-
if (entry.
|
|
260
|
+
if (entry.type === "url") {
|
|
303
261
|
return entry.href
|
|
304
262
|
}
|
|
305
263
|
return null
|
|
306
|
-
}
|
|
264
|
+
},
|
|
265
|
+
updateHandlerProvider() {
|
|
266
|
+
return updateHandlerProvider(this, {
|
|
267
|
+
update(props, childUpdateHandlers) {
|
|
268
|
+
const cmdHeadlineUpdateHandler = childUpdateHandlers?.find(handler => handler.name === "CmdHeadline")
|
|
269
|
+
if (cmdHeadlineUpdateHandler) {
|
|
270
|
+
props.cmdHeadline = props.cmdHeadline || {}
|
|
271
|
+
cmdHeadlineUpdateHandler.update(props.cmdHeadline)
|
|
272
|
+
}
|
|
307
273
|
|
|
308
|
-
|
|
274
|
+
}
|
|
275
|
+
})
|
|
276
|
+
}
|
|
277
|
+
},
|
|
278
|
+
watch: {}
|
|
309
279
|
}
|
|
310
280
|
</script>
|
|
311
281
|
|
|
@@ -337,6 +307,22 @@ export default {
|
|
|
337
307
|
list-style: none;
|
|
338
308
|
}
|
|
339
309
|
}
|
|
310
|
+
|
|
311
|
+
.edit-component-wrapper {
|
|
312
|
+
dl {
|
|
313
|
+
margin-bottom: 0;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.edit-component-wrapper .cmd-address-data address {
|
|
319
|
+
display: flex;
|
|
320
|
+
flex-direction: column;
|
|
321
|
+
gap: calc(var(--default-gap) / 2);
|
|
322
|
+
|
|
323
|
+
dt {
|
|
324
|
+
min-width: 2.5rem;
|
|
325
|
+
}
|
|
340
326
|
}
|
|
341
327
|
|
|
342
328
|
/* end cmd-address-data ------------------------------------------------------------------------------------------ */
|