comand-component-library 3.3.22 → 3.3.24
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/comand-component-library.js +3897 -3995
- 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 +17 -3
- package/src/components/CmdSocialNetworks.vue +35 -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
|
}
|