comand-component-library 3.3.21 → 3.3.23
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 +3902 -3998
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/media/images/demo-images/landscape-2x.jpg +0 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/App.vue +63 -23
- package/src/assets/data/address-data.json +42 -18
- package/src/assets/data/company-logo.json +1 -1
- package/src/assets/data/image.json +27 -1
- package/src/components/CmdAddressData.vue +137 -261
- package/src/components/CmdBox.vue +7 -17
- package/src/components/CmdFakeSelect.vue +24 -8
- package/src/components/CmdFancyBox.vue +15 -6
- package/src/components/CmdHeadline.vue +2 -2
- package/src/components/CmdIcon.vue +0 -1
- package/src/components/CmdImage.vue +1 -2
- package/src/components/CmdImageZoom.vue +13 -26
- package/src/components/CmdMainNavigation.vue +1 -1
- package/src/components/CmdMultistepFormProgressBar.vue +1 -1
- package/src/components/CmdSiteHeader.vue +13 -1
- package/src/components/CmdSlideButton.vue +9 -1
- package/src/components/CmdSlideshow.vue +39 -23
- package/src/components/CmdSocialNetworks.vue +36 -14
- package/src/components/CmdTabs.vue +1 -1
- package/src/components/CmdThumbnailScroller.vue +0 -8
- package/src/components/CmdToggleDarkMode.vue +65 -0
- package/src/components/CmdWidthLimitationWrapper.vue +1 -6
- package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +2 -1
|
@@ -1,67 +1,69 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="cmd-address-data vcard">
|
|
3
3
|
<!-- begin CmdHeadline -->
|
|
4
|
-
<CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline"
|
|
4
|
+
<CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline"/>
|
|
5
5
|
<!-- end CmdHeadline -->
|
|
6
6
|
|
|
7
7
|
<!-- begin address-data in vCard microformat -->
|
|
8
8
|
<address class="adr">
|
|
9
9
|
<!-- begin list with labels -->
|
|
10
|
-
<dl v-if="showLabels">
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<CmdIcon
|
|
15
|
-
v-if="addressData.company.iconClass && showLabelIcons"
|
|
16
|
-
:iconClass="addressData.company.iconClass"
|
|
17
|
-
:type="addressData.company.iconType"
|
|
18
|
-
:tooltip="getMessage('cmdaddressdata.labeltext.company')"
|
|
19
|
-
/>
|
|
20
|
-
<!-- end CmdIcon -->
|
|
21
|
-
|
|
22
|
-
<span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.company')}}</span>
|
|
23
|
-
</dt>
|
|
24
|
-
<dd v-if="addressData.company?.text" class="org">{{ addressData.company.text }}</dd>
|
|
25
|
-
<!-- end company (name) -->
|
|
26
|
-
|
|
27
|
-
<!-- begin address -->
|
|
28
|
-
<template v-if="addressData.address && addressData.address !== undefined">
|
|
29
|
-
<dt class="address">
|
|
10
|
+
<dl v-if="showLabels && !showIconsOnly">
|
|
11
|
+
<template v-for="(entry, index) in addressData" :key="index">
|
|
12
|
+
<!-- begin labels -->
|
|
13
|
+
<dt :class="{'address': entry.name === 'address'}">
|
|
30
14
|
<!-- begin CmdIcon -->
|
|
31
15
|
<CmdIcon
|
|
32
|
-
v-if="
|
|
33
|
-
:iconClass="
|
|
34
|
-
:type="
|
|
35
|
-
:tooltip="
|
|
16
|
+
v-if="entry.iconClass && showLabelIcons"
|
|
17
|
+
:iconClass="entry.iconClass"
|
|
18
|
+
:type="entry.iconType"
|
|
19
|
+
:tooltip="entry.labelText"
|
|
36
20
|
/>
|
|
37
21
|
<!-- end CmdIcon -->
|
|
38
|
-
|
|
39
|
-
<span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.address')}}</span>
|
|
22
|
+
<span v-if="showLabelTexts">{{ entry.labelText }}</span>
|
|
40
23
|
</dt>
|
|
41
|
-
|
|
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
|
+
<template v-else>{{ entry.data }}</template>
|
|
36
|
+
</dd>
|
|
37
|
+
<!-- end data (except for address) -->
|
|
38
|
+
|
|
39
|
+
<!-- begin data for address -->
|
|
40
|
+
<dd v-else>
|
|
42
41
|
<!-- begin linked address -->
|
|
43
|
-
<a v-if="linkGoogleMaps"
|
|
42
|
+
<a v-if="linkGoogleMaps"
|
|
43
|
+
:href="locateAddress"
|
|
44
|
+
target="google-maps"
|
|
45
|
+
:title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
|
|
44
46
|
<!-- begin street/number -->
|
|
45
|
-
<template v-if="
|
|
46
|
-
<span class="street-address">{{
|
|
47
|
+
<template v-if="entry.streetNo">
|
|
48
|
+
<span class="street-address">{{ entry.streetNo }}</span><br/>
|
|
47
49
|
</template>
|
|
48
50
|
<!-- end street/number -->
|
|
49
51
|
|
|
50
52
|
<!-- begin zip/city -->
|
|
51
|
-
<span v-if="
|
|
52
|
-
<template v-if="
|
|
53
|
-
<span class="locality">{{
|
|
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/>
|
|
54
56
|
</template>
|
|
55
57
|
<!-- end zip/city -->
|
|
56
58
|
|
|
57
59
|
<!-- begin miscInfo -->
|
|
58
|
-
<template v-if="
|
|
59
|
-
<span>{{
|
|
60
|
+
<template v-if="entry.miscInfo">
|
|
61
|
+
<span>{{ entry.miscInfo }}</span><br/>
|
|
60
62
|
</template>
|
|
61
63
|
<!-- end miscInfo -->
|
|
62
64
|
|
|
63
65
|
<!-- begin country -->
|
|
64
|
-
<span v-if="
|
|
66
|
+
<span v-if="entry.country" class="country-name">{{ entry.country }}</span>
|
|
65
67
|
<!-- end country -->
|
|
66
68
|
</a>
|
|
67
69
|
<!-- end linked address -->
|
|
@@ -69,249 +71,87 @@
|
|
|
69
71
|
<!-- begin unlinked address -->
|
|
70
72
|
<template v-else>
|
|
71
73
|
<!-- begin street/number -->
|
|
72
|
-
<template v-if="
|
|
73
|
-
<span class="street-address">{{
|
|
74
|
+
<template v-if="entry.streetNo">
|
|
75
|
+
<span class="street-address">{{ entry.streetNo }}</span><br/>
|
|
74
76
|
</template>
|
|
75
77
|
<!-- end street/number -->
|
|
76
78
|
|
|
77
79
|
<!-- begin zip/city -->
|
|
78
|
-
<span v-if="
|
|
79
|
-
<template v-if="
|
|
80
|
-
<span class="locality">{{
|
|
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/>
|
|
81
83
|
</template>
|
|
82
84
|
<!-- end zip/city -->
|
|
83
85
|
|
|
84
86
|
<!-- begin miscInfo -->
|
|
85
|
-
<template v-if="
|
|
86
|
-
<span>{{
|
|
87
|
+
<template v-if="entry.miscInfo">
|
|
88
|
+
<span>{{ entry.miscInfo }}</span><br/>
|
|
87
89
|
</template>
|
|
88
90
|
<!-- end miscInfo -->
|
|
89
91
|
|
|
90
92
|
<!-- begin country -->
|
|
91
|
-
<span v-if="
|
|
93
|
+
<span v-if="entry.country" class="country-name">{{ entry.country }}</span>
|
|
92
94
|
<!-- end country -->
|
|
93
95
|
</template>
|
|
94
96
|
<!-- end unlinked address -->
|
|
95
97
|
</dd>
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<!-- begin telephone -->
|
|
100
|
-
<dt v-if="addressData.telephone?.text">
|
|
101
|
-
<!-- begin CmdIcon -->
|
|
102
|
-
<CmdIcon
|
|
103
|
-
v-if="addressData.telephone.iconClass && showLabelIcons"
|
|
104
|
-
:iconClass="addressData.telephone.iconClass"
|
|
105
|
-
:type="addressData.telephone.iconType"
|
|
106
|
-
:tooltip="getMessage('cmdaddressdata.labeltext.telephone')"
|
|
107
|
-
/>
|
|
108
|
-
<!-- end CmdIcon -->
|
|
109
|
-
|
|
110
|
-
<span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.telephone')}}</span>
|
|
111
|
-
</dt>
|
|
112
|
-
<dd v-if="addressData.telephone?.text">
|
|
113
|
-
<a :href="'tel:' + addressData.telephone" title="Call number" class="tel" v-telephone="addressData.telephone.text">{{ addressData.telephone.text }}</a>
|
|
114
|
-
</dd>
|
|
115
|
-
<!-- end telephone -->
|
|
116
|
-
|
|
117
|
-
<!-- begin mobile phone -->
|
|
118
|
-
<dt v-if="addressData.mobilephone?.text">
|
|
119
|
-
<!-- begin CmdIcon -->
|
|
120
|
-
<CmdIcon
|
|
121
|
-
v-if="addressData.mobilephone.iconClass && showLabelIcons"
|
|
122
|
-
:iconClass="addressData.mobilephone.iconClass"
|
|
123
|
-
:type="addressData.mobilephone.iconType"
|
|
124
|
-
:tooltip="getMessage('cmdaddressdata.labeltext.mobile_phone')"
|
|
125
|
-
/>
|
|
126
|
-
<!-- end CmdIcon -->
|
|
127
|
-
|
|
128
|
-
<span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.mobile_phone')}}</span>
|
|
129
|
-
</dt>
|
|
130
|
-
<dd v-if="addressData.mobilephone?.text">
|
|
131
|
-
<a :href="'tel:' + addressData.mobilephone" title="Call number" class="tel" v-telephone="addressData.mobilephone.text">{{ addressData.mobilephone.text }}</a>
|
|
132
|
-
</dd>
|
|
133
|
-
<!-- end mobile phone -->
|
|
134
|
-
|
|
135
|
-
<!-- begin fax -->
|
|
136
|
-
<dt v-if="addressData.fax?.text">
|
|
137
|
-
<!-- begin CmdIcon -->
|
|
138
|
-
<CmdIcon
|
|
139
|
-
v-if="addressData.fax.iconClass && showLabelIcons"
|
|
140
|
-
:iconClass="addressData.fax.iconClass"
|
|
141
|
-
:type="addressData.fax.iconType"
|
|
142
|
-
:tooltip="getMessage('cmdaddressdata.labeltext.fax')"
|
|
143
|
-
/>
|
|
144
|
-
<!-- end CmdIcon -->
|
|
145
|
-
|
|
146
|
-
<span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.fax')}}</span>
|
|
147
|
-
</dt>
|
|
148
|
-
<dd v-if="addressData.fax?.text" class="fax">{{ addressData.fax.text }}</dd>
|
|
149
|
-
<!-- end fax -->
|
|
150
|
-
|
|
151
|
-
<!-- begin email -->
|
|
152
|
-
<dt v-if="addressData.email?.text">
|
|
153
|
-
<!-- begin CmdIcon -->
|
|
154
|
-
<CmdIcon
|
|
155
|
-
v-if="addressData.email.iconClass && showLabelIcons"
|
|
156
|
-
:iconClass="addressData.email.iconClass"
|
|
157
|
-
:type="addressData.email.iconType"
|
|
158
|
-
:tooltip="getMessage('cmdaddressdata.labeltext.email')"
|
|
159
|
-
/>
|
|
160
|
-
<!-- end CmdIcon -->
|
|
161
|
-
|
|
162
|
-
<span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.email')}}</span>
|
|
163
|
-
</dt>
|
|
164
|
-
<dd v-if="addressData.email?.text" class="email" >
|
|
165
|
-
<a :href="'mailto:' + addressData.email?.text" class="email">{{ addressData.email.text }}</a>
|
|
166
|
-
</dd>
|
|
167
|
-
<!-- end email -->
|
|
168
|
-
|
|
169
|
-
<!-- begin web site -->
|
|
170
|
-
<dt v-if="addressData.website?.text">
|
|
171
|
-
<!-- begin CmdIcon -->
|
|
172
|
-
<CmdIcon
|
|
173
|
-
v-if="addressData.website.iconClass && showLabelIcons"
|
|
174
|
-
:iconClass="addressData.website.iconClass"
|
|
175
|
-
:type="addressData.website.iconType"
|
|
176
|
-
/>
|
|
177
|
-
<!-- end CmdIcon -->
|
|
178
|
-
|
|
179
|
-
<span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.website')}}</span>
|
|
180
|
-
</dt>
|
|
181
|
-
<dd v-if="addressData.website?.text" >
|
|
182
|
-
<a :href="addressData.website.text" target="_blank" :title="getMessage('cmdaddressdata.title.visit_website')">{{ websiteUrlText }}</a>
|
|
183
|
-
</dd>
|
|
184
|
-
<!-- end web site -->
|
|
185
|
-
|
|
186
|
-
<!-- begin custom data -->
|
|
187
|
-
<dt v-if="addressData.custom?.text">
|
|
188
|
-
<!-- begin CmdIcon -->
|
|
189
|
-
<CmdIcon
|
|
190
|
-
v-if="addressData.custom.iconClass && showLabelIcons"
|
|
191
|
-
:iconClass="addressData.custom.iconClass"
|
|
192
|
-
:type="addressData.custom.iconType"
|
|
193
|
-
/>
|
|
194
|
-
<!-- end CmdIcon -->
|
|
195
|
-
|
|
196
|
-
<span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.custom')}}</span>
|
|
197
|
-
</dt>
|
|
198
|
-
<dd v-if="addressData.custom?.text" >
|
|
199
|
-
{{ addressData.custom.text }}
|
|
200
|
-
</dd>
|
|
201
|
-
<!-- end custom data -->
|
|
98
|
+
<!-- end data for address -->
|
|
99
|
+
</template><!-- end v-for -->
|
|
100
|
+
<!-- end data -->
|
|
202
101
|
</dl>
|
|
203
102
|
<!-- end list with labels -->
|
|
204
103
|
|
|
205
104
|
<!-- begin list without labels -->
|
|
206
|
-
<ul v-else class="flex-container">
|
|
207
|
-
|
|
208
|
-
<
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
<!-- begin miscInfo -->
|
|
229
|
-
<template v-if="addressData.address.miscInfo">
|
|
230
|
-
<span>{{ addressData.address.miscInfo }}</span><br/>
|
|
231
|
-
</template>
|
|
232
|
-
<!-- end miscInfo -->
|
|
233
|
-
|
|
234
|
-
<!-- begin country -->
|
|
235
|
-
<span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
|
|
236
|
-
<!-- end country -->
|
|
237
|
-
</a>
|
|
238
|
-
<!-- end linked address -->
|
|
239
|
-
|
|
240
|
-
<!-- begin unlinked address -->
|
|
241
|
-
<template v-else>
|
|
242
|
-
<!-- begin street/number -->
|
|
243
|
-
<template v-if="addressData.address.streetNo">
|
|
244
|
-
<span class="street-address">{{ addressData.address.streetNo }}</span><br/>
|
|
245
|
-
</template>
|
|
246
|
-
<!-- end street/number -->
|
|
247
|
-
|
|
248
|
-
<!-- begin zip/city -->
|
|
249
|
-
<template v-if="addressData.address.zip || addressData.address.city">
|
|
250
|
-
<span class="postal-code">{{ addressData.address.zip }} </span>
|
|
251
|
-
<span class="locality">{{ addressData.address.city }}</span><br/>
|
|
252
|
-
</template>
|
|
253
|
-
<!-- end zip/city -->
|
|
254
|
-
|
|
255
|
-
<!-- begin miscInfo -->
|
|
256
|
-
<template v-if="addressData.address.miscInfo">
|
|
257
|
-
<span>{{ addressData.address.miscInfo }}</span><br/>
|
|
258
|
-
</template>
|
|
259
|
-
<!-- end miscInfo -->
|
|
260
|
-
|
|
261
|
-
<!-- begin country -->
|
|
262
|
-
<span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
|
|
263
|
-
<!-- end country -->
|
|
105
|
+
<ul v-else :class="['flex-container', {'vertical': !showIconsOnly}]">
|
|
106
|
+
|
|
107
|
+
<template v-for="(entry, index) in addressData" :key="index">
|
|
108
|
+
<!-- begin all entries except address -->
|
|
109
|
+
<template v-if="entry.name !== 'address'">
|
|
110
|
+
<li v-if="entry.href || !showIconsOnly">
|
|
111
|
+
<a v-if="entry.href" :href="getHref(entry)"
|
|
112
|
+
:target="{'_blank' : entry.name === 'website'}"
|
|
113
|
+
:title="entry.tooltip">
|
|
114
|
+
<template v-if="showIconsOnly">
|
|
115
|
+
<!-- begin CmdIcon -->
|
|
116
|
+
<CmdIcon
|
|
117
|
+
v-if="entry.iconClass"
|
|
118
|
+
:iconClass="entry.iconClass"
|
|
119
|
+
:type="entry.iconType"
|
|
120
|
+
/>
|
|
121
|
+
<!-- end CmdIcon -->
|
|
122
|
+
</template>
|
|
123
|
+
<template v-else>{{ entry.href }}</template>
|
|
124
|
+
</a>
|
|
125
|
+
<template v-else-if="!showIconsOnly">{{ entry.data }}</template>
|
|
126
|
+
</li>
|
|
264
127
|
</template>
|
|
265
|
-
<!-- end
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
<
|
|
269
|
-
</li>
|
|
270
|
-
<li v-if="addressData.fax?.text">
|
|
271
|
-
<span class="fax">{{ addressData.fax.text }}</span>
|
|
272
|
-
</li>
|
|
273
|
-
<li v-if="addressData.email?.text" :title="getMessage('cmdaddressdata.title.send_email')">
|
|
274
|
-
<a :href="'mailto:' + addressData.email.text" class="email">{{ addressData.email.text }}</a>
|
|
275
|
-
</li>
|
|
276
|
-
<li v-if="addressData.website?.text" :title="getMessage('cmdaddressdata.title.visit_website')">
|
|
277
|
-
<a :href="addressData.website.text" target="_blank">{{ websiteUrlText }}</a>
|
|
278
|
-
</li>
|
|
279
|
-
<li v-if="addressData.custom?.text">
|
|
280
|
-
{{ addressData.custom.text }}
|
|
281
|
-
</li>
|
|
282
|
-
</ul>
|
|
283
|
-
<!-- end list without labels -->
|
|
284
|
-
<ul v-if="showIconsOnly">
|
|
285
|
-
<template v-if="addressData.company || addressData.address">
|
|
286
|
-
<!-- begin company (name) -->
|
|
287
|
-
<li v-if="addressData.company">
|
|
288
|
-
<span class="org">{{ addressData.company.text }}</span>
|
|
289
|
-
</li>
|
|
290
|
-
<!-- end company (name) -->
|
|
291
|
-
<li v-if="addressData.address">
|
|
128
|
+
<!-- end all entries except address -->
|
|
129
|
+
|
|
130
|
+
<!-- begin address -->
|
|
131
|
+
<li v-else-if="entry.name === 'address' && !showIconsOnly">
|
|
292
132
|
<!-- begin linked address -->
|
|
293
133
|
<a v-if="linkGoogleMaps" :href="locateAddress" target="google-maps" :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
|
|
294
134
|
<!-- begin street/number -->
|
|
295
|
-
<template v-if="
|
|
296
|
-
<span
|
|
135
|
+
<template v-if="entry.streetNo">
|
|
136
|
+
<span class="street-address">{{ entry.streetNo }}</span><br/>
|
|
297
137
|
</template>
|
|
298
138
|
<!-- end street/number -->
|
|
299
139
|
|
|
300
140
|
<!-- begin zip/city -->
|
|
301
|
-
<template v-if="
|
|
302
|
-
<span class="postal-code">{{
|
|
303
|
-
<span class="locality">{{
|
|
141
|
+
<template v-if="entry.zip || entry.city">
|
|
142
|
+
<span class="postal-code">{{ entry.zip }} </span>
|
|
143
|
+
<span class="locality">{{ entry.city }}</span><br/>
|
|
304
144
|
</template>
|
|
305
145
|
<!-- end zip/city -->
|
|
306
146
|
|
|
307
147
|
<!-- begin miscInfo -->
|
|
308
|
-
<template v-if="
|
|
309
|
-
<span>{{
|
|
148
|
+
<template v-if="entry.miscInfo">
|
|
149
|
+
<span>{{ entry.miscInfo }}</span><br/>
|
|
310
150
|
</template>
|
|
311
151
|
<!-- end miscInfo -->
|
|
312
152
|
|
|
313
153
|
<!-- begin country -->
|
|
314
|
-
<span v-if="
|
|
154
|
+
<span v-if="entry.country" class="country-name">{{ entry.country }}</span>
|
|
315
155
|
<!-- end country -->
|
|
316
156
|
</a>
|
|
317
157
|
<!-- end linked address -->
|
|
@@ -319,35 +159,35 @@
|
|
|
319
159
|
<!-- begin unlinked address -->
|
|
320
160
|
<template v-else>
|
|
321
161
|
<!-- begin street/number -->
|
|
322
|
-
<template v-if="
|
|
323
|
-
<span class="street-address">{{
|
|
162
|
+
<template v-if="entry.streetNo">
|
|
163
|
+
<span class="street-address">{{ entry.streetNo }}</span><br/>
|
|
324
164
|
</template>
|
|
325
165
|
<!-- end street/number -->
|
|
326
166
|
|
|
327
167
|
<!-- begin zip/city -->
|
|
328
|
-
<template v-if="
|
|
329
|
-
<span class="postal-code">{{
|
|
330
|
-
<span class="locality">{{
|
|
168
|
+
<template v-if="entry.zip || entry.city">
|
|
169
|
+
<span class="postal-code">{{ entry.zip }} </span>
|
|
170
|
+
<span class="locality">{{ entry.city }}</span><br/>
|
|
331
171
|
</template>
|
|
332
172
|
<!-- end zip/city -->
|
|
333
173
|
|
|
334
174
|
<!-- begin miscInfo -->
|
|
335
|
-
<template v-if="
|
|
336
|
-
<span>{{
|
|
175
|
+
<template v-if="entry.miscInfo">
|
|
176
|
+
<span>{{ entry.miscInfo }}</span><br/>
|
|
337
177
|
</template>
|
|
338
178
|
<!-- end miscInfo -->
|
|
339
179
|
|
|
340
180
|
<!-- begin country -->
|
|
341
|
-
<span v-if="
|
|
181
|
+
<span v-if="entry.country" class="country-name">{{ entry.country }}</span>
|
|
342
182
|
<!-- end country -->
|
|
343
183
|
</template>
|
|
344
184
|
<!-- end unlinked address -->
|
|
345
185
|
</li>
|
|
186
|
+
<!-- end address -->
|
|
346
187
|
</template>
|
|
347
|
-
|
|
348
|
-
<!-- <CmdListOfLinks :links="modifiedAddressData" />-->
|
|
349
|
-
</template>
|
|
188
|
+
<!-- end v-for -->
|
|
350
189
|
</ul>
|
|
190
|
+
<!-- end list without labels -->
|
|
351
191
|
</address>
|
|
352
192
|
<!-- end address-data in vCard microformat -->
|
|
353
193
|
</div>
|
|
@@ -362,6 +202,9 @@ export default {
|
|
|
362
202
|
name: "CmdAddressData",
|
|
363
203
|
mixins: [I18n, DefaultMessageProperties],
|
|
364
204
|
props: {
|
|
205
|
+
/**
|
|
206
|
+
* activate if only icons (without any text) should be displayed
|
|
207
|
+
*/
|
|
365
208
|
showIconsOnly: {
|
|
366
209
|
type: Boolean,
|
|
367
210
|
default: false
|
|
@@ -416,11 +259,41 @@ export default {
|
|
|
416
259
|
websiteUrlText() {
|
|
417
260
|
return this.addressData.website?.text.replace("https://", "")
|
|
418
261
|
}
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
262
|
+
},
|
|
263
|
+
methods: {
|
|
264
|
+
vCardClass(entry) {
|
|
265
|
+
if (entry.name === 'company') {
|
|
266
|
+
return "org"
|
|
267
|
+
}
|
|
268
|
+
if (entry.name === "address") {
|
|
269
|
+
if (entry.streetNo) {
|
|
270
|
+
return "street-address"
|
|
271
|
+
}
|
|
272
|
+
if (entry.zip) {
|
|
273
|
+
return "postal-code"
|
|
274
|
+
}
|
|
275
|
+
if (entry.city) {
|
|
276
|
+
return "locality"
|
|
277
|
+
}
|
|
278
|
+
if (entry.country) {
|
|
279
|
+
return "country-name"
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
return null
|
|
283
|
+
},
|
|
284
|
+
getHref(entry) {
|
|
285
|
+
if (entry.name === "telephone" || entry.name === "mobilephone") {
|
|
286
|
+
return "tel:" + entry.href
|
|
287
|
+
}
|
|
288
|
+
if (entry.name === "email") {
|
|
289
|
+
return "mailto:" + entry.href
|
|
290
|
+
}
|
|
291
|
+
if (entry.name === "website") {
|
|
292
|
+
return entry.href
|
|
293
|
+
}
|
|
294
|
+
return null
|
|
295
|
+
}
|
|
296
|
+
|
|
424
297
|
}
|
|
425
298
|
}
|
|
426
299
|
</script>
|
|
@@ -437,12 +310,15 @@ export default {
|
|
|
437
310
|
|
|
438
311
|
&.address {
|
|
439
312
|
align-self: flex-start;
|
|
313
|
+
|
|
314
|
+
[class*="icon"]:only-child {
|
|
315
|
+
line-height: var(--line-height);
|
|
316
|
+
}
|
|
440
317
|
}
|
|
441
318
|
}
|
|
442
319
|
}
|
|
443
320
|
|
|
444
321
|
ul {
|
|
445
|
-
flex-direction: column;
|
|
446
322
|
gap: calc(var(--default-gap) / 2);
|
|
447
323
|
|
|
448
324
|
li {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
open : open, collapsible: collapsible,
|
|
8
8
|
'stretch-vertically': stretchVertically && !collapsible,
|
|
9
9
|
'stretch-horizontally': stretchHorizontally,
|
|
10
|
-
'row-view':
|
|
10
|
+
'row-view': rowView
|
|
11
11
|
},
|
|
12
12
|
]"
|
|
13
13
|
>
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
|
|
98
98
|
<!-- begin boxType 'product' -->
|
|
99
99
|
<a v-else-if="boxType === 'product' && product"
|
|
100
|
-
:class="['cmd-box box product', {'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally, 'row-view':
|
|
100
|
+
:class="['cmd-box box product', {'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally, 'row-view': rowView}]"
|
|
101
101
|
href="#"
|
|
102
102
|
@click.prevent="clickOnProduct(product)">
|
|
103
103
|
<div class="box-header flex-container vertical">
|
|
@@ -134,12 +134,9 @@
|
|
|
134
134
|
{
|
|
135
135
|
'stretch-vertically': stretchVertically,
|
|
136
136
|
'stretch-horizontally': stretchHorizontally,
|
|
137
|
-
'row-view':
|
|
138
|
-
}
|
|
139
|
-
'row-view'
|
|
137
|
+
'row-view': rowView
|
|
138
|
+
}
|
|
140
139
|
]">
|
|
141
|
-
isRowView {{isRowView}}<br />
|
|
142
|
-
rowView {{rowView}}
|
|
143
140
|
<div class="box-header flex-container vertical">
|
|
144
141
|
<figure v-if="user.image">
|
|
145
142
|
<img :src="user.image.src" :alt="user.image.alt"/>
|
|
@@ -147,11 +144,11 @@
|
|
|
147
144
|
</figure>
|
|
148
145
|
<div v-else>
|
|
149
146
|
<span :class="defaultProfileIconClass" :title="user.name"></span>
|
|
150
|
-
<p v-if="!
|
|
147
|
+
<p v-if="!rowView">{{ user.name }}</p>
|
|
151
148
|
</div>
|
|
152
149
|
</div>
|
|
153
150
|
<div class="box-body">
|
|
154
|
-
<p v-if="
|
|
151
|
+
<p v-if="rowView">{{ user.name }}</p>
|
|
155
152
|
<p v-if="user.profession">{{ user.profession }}</p>
|
|
156
153
|
<p v-if="user.position">{{ user.position }}</p>
|
|
157
154
|
<p v-if="user.description" class="description">{{ user.description }}</p>
|
|
@@ -186,8 +183,7 @@ export default {
|
|
|
186
183
|
return {
|
|
187
184
|
open: this.collapsible ? this.collapsingBoxesOpen : true,
|
|
188
185
|
active: true,
|
|
189
|
-
showCutOffText: false
|
|
190
|
-
isRowView: false
|
|
186
|
+
showCutOffText: false
|
|
191
187
|
}
|
|
192
188
|
},
|
|
193
189
|
props: {
|
|
@@ -393,12 +389,6 @@ export default {
|
|
|
393
389
|
if (this.collapsible) {
|
|
394
390
|
this.open = this.collapsingBoxesOpen
|
|
395
391
|
}
|
|
396
|
-
},
|
|
397
|
-
rowView: {
|
|
398
|
-
handler() {
|
|
399
|
-
this.isRowView = this.rowView
|
|
400
|
-
},
|
|
401
|
-
immediate: true
|
|
402
392
|
}
|
|
403
393
|
}
|
|
404
394
|
}
|