comand-component-library 4.0.15 → 4.0.17
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/comand-component-library.js +2845 -2632
- package/dist/comand-component-library.umd.cjs +3 -3
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/ComponentLibrary.vue +71 -101
- package/src/assets/data/address-data.json +2 -0
- package/src/assets/data/listOfComponents.json +39 -0
- package/src/assets/data/main-navigation.json +3 -3
- package/src/componentSettingsDataAndControls.vue +7 -1
- package/src/components/CmdAddressData.vue +40 -11
- package/src/components/CmdAddressDataItem.vue +20 -13
- package/src/components/CmdBox.vue +2 -3
- package/src/components/CmdCompanyLogo.vue +6 -3
- package/src/components/CmdFormElement.vue +7 -2
- package/src/components/CmdHeadline.vue +4 -4
- package/src/components/CmdImage.vue +4 -1
- package/src/components/CmdLoginForm.vue +1 -1
- package/src/components/CmdMainNavigation.vue +1 -1
- package/src/components/CmdSiteHeader.vue +93 -2
- package/src/components/CmdSlideButton.vue +1 -1
- package/src/components/ComponentSettings.vue +0 -1
- package/src/mixins/pages/BasicForm/DefaultMessageProperties.js +5 -2
- package/src/pages/BasicForm.vue +108 -20
- package/src/App.vue +0 -2117
package/src/ComponentLibrary.vue
CHANGED
|
@@ -19,10 +19,11 @@
|
|
|
19
19
|
:useGap="false"
|
|
20
20
|
>
|
|
21
21
|
<template v-slot="slotProps">
|
|
22
|
+
<!-- begin box template selection -->
|
|
22
23
|
<CmdBox
|
|
23
24
|
:use-slots="['body']"
|
|
24
25
|
:collapsible="true"
|
|
25
|
-
:cmdHeadline="{headlineText: 'Template
|
|
26
|
+
:cmdHeadline="{headlineText: 'Template Selection', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
|
|
26
27
|
:openCollapsedBox="slotProps.boxIsOpen(0)"
|
|
27
28
|
@toggleCollapse="slotProps.boxToggled(0, $event)"
|
|
28
29
|
>
|
|
@@ -39,6 +40,9 @@
|
|
|
39
40
|
</label>
|
|
40
41
|
</template>
|
|
41
42
|
</CmdBox>
|
|
43
|
+
<!-- end box template selection -->
|
|
44
|
+
|
|
45
|
+
<!-- begin box list of components-->
|
|
42
46
|
<CmdBox
|
|
43
47
|
:use-slots="['body']"
|
|
44
48
|
:collapsible="true"
|
|
@@ -48,92 +52,21 @@
|
|
|
48
52
|
>
|
|
49
53
|
<template v-slot:body>
|
|
50
54
|
<ul>
|
|
51
|
-
<li :class="'active'
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
</li>
|
|
60
|
-
<li><a href="#section-breadcrumbs"
|
|
61
|
-
@click="updateSettingsSidebar('CmdBreadcrumbs')">Breadcrumbs</a></li>
|
|
62
|
-
<li><a href="#section-cookie-disclaimer" @click="hideSettingsSidebar">Cookie-Disclaimer</a>
|
|
63
|
-
</li>
|
|
64
|
-
<li><a href="#section-fancybox" @click="hideSettingsSidebar">Fancybox</a></li>
|
|
65
|
-
<li><a href="#section-forms" @click="hideSettingsSidebar">Forms</a></li>
|
|
66
|
-
<li><a href="#section-google-maps" @click="hideSettingsSidebar">Google-Maps™</a>
|
|
67
|
-
</li>
|
|
68
|
-
<li><a href="#section-headlines" @click="updateSettingsSidebar('CmdHeadline')">Headlines</a>
|
|
69
|
-
</li>
|
|
70
|
-
<li><a href="#section-icons" @click="hideSettingsSidebar">Icons</a></li>
|
|
71
|
-
<li><a href="#section-input-group"
|
|
72
|
-
@click="updateSettingsSidebar('CmdInputGroup')">Input-Group</a></li>
|
|
73
|
-
<li><a href="#section-image" @click="hideSettingsSidebar">Image</a></li>
|
|
74
|
-
<li><a href="#section-image-gallery" @click="hideSettingsSidebar">Image
|
|
75
|
-
Gallery</a></li>
|
|
76
|
-
<li><a href="#section-image-zoom" @click="hideSettingsSidebar">Image-Zoom</a>
|
|
77
|
-
</li>
|
|
78
|
-
<li><a href="#section-list-of-links"
|
|
79
|
-
@click="updateSettingsSidebar('CmdLinkOfLists')">List Of Links</a></li>
|
|
80
|
-
<li><a href="#section-login-form"
|
|
81
|
-
@click="updateSettingsSidebar('CmdLoginForm')">Login Form</a></li>
|
|
82
|
-
<li><a href="#section-main-navigation"
|
|
83
|
-
@click="updateSettingsSidebar('CmdMainNavigation')">Main-Navigation</a>
|
|
84
|
-
</li>
|
|
85
|
-
<li><a href="#section-multistep-form-progress-bar"
|
|
86
|
-
@click="updateSettingsSidebar('CmdMultistepFormProgressBar')">Multistepform-Progressbar</a>
|
|
87
|
-
</li>
|
|
88
|
-
<li><a href="#section-newsletter-subscription"
|
|
89
|
-
@click="updateSettingsSidebar('CmdNewsletterSubscription')">Newsletter
|
|
90
|
-
Subscription</a></li>
|
|
91
|
-
<li><a href="#section-opening-hours"
|
|
92
|
-
@click="updateSettingsSidebar('CmdOpeningHours')">Opening Hours</a></li>
|
|
93
|
-
<li><a href="#section-page-footer"
|
|
94
|
-
@click="updateSettingsSidebar('CmdPageFooter')">Page Footer</a></li>
|
|
95
|
-
<li><a href="#section-page-header"
|
|
96
|
-
@click="updateSettingsSidebar('CmdPageHeader')">Page Header</a></li>
|
|
97
|
-
<li><a href="#section-pagination"
|
|
98
|
-
@click="updateSettingsSidebar('CmdPagination')">Pagination</a></li>
|
|
99
|
-
<li><a href="#section-site-footer" @click="hideSettingsSidebar">Site Footer</a>
|
|
100
|
-
</li>
|
|
101
|
-
<li><a href="#section-site-header"
|
|
102
|
-
@click="updateSettingsSidebar('CmdSiteHeader')">Site Header</a></li>
|
|
103
|
-
<li><a href="#section-site-search"
|
|
104
|
-
@click="updateSettingsSidebar('CmdSiteSearch')">Site Search</a></li>
|
|
105
|
-
<li><a href="#section-slideshow" @click="updateSettingsSidebar('CmdSlideshow')">Slideshow</a>
|
|
106
|
-
</li>
|
|
107
|
-
<li><a href="#section-social-networks"
|
|
108
|
-
@click="updateSettingsSidebar('CmdSocialNetworks')">Social Networks</a>
|
|
109
|
-
</li>
|
|
110
|
-
<li><a href="#section-switch-language" @click="hideSettingsSidebar">Switch Language</a>
|
|
111
|
-
</li>
|
|
112
|
-
<li><a href="#section-system-message"
|
|
113
|
-
@click="updateSettingsSidebar('CmdSystemMessage')">System-Message</a>
|
|
114
|
-
</li>
|
|
115
|
-
<li><a href="#section-tables"
|
|
116
|
-
@click="updateSettingsSidebar('CmdSystemMeCmdTablesssage')">Tables</a>
|
|
117
|
-
</li>
|
|
118
|
-
<li><a href="#section-tabs" @click="updateSettingsSidebar('CmdTabs')">Tabs</a>
|
|
119
|
-
</li>
|
|
120
|
-
<li><a href="#section-text-image-block"
|
|
121
|
-
@click="updateSettingsSidebar('CmdTextImageBlock')">Text Image Block</a>
|
|
122
|
-
</li>
|
|
123
|
-
<li><a href="#section-thumbnail-scroller"
|
|
124
|
-
@click="updateSettingsSidebar('CmdThumbnailScroller')">Thumbnail-Scroller</a>
|
|
125
|
-
</li>
|
|
126
|
-
<li><a href="#section-toggle-darkmode"
|
|
127
|
-
@click="updateSettingsSidebar('CmdToggleDarkMode')">ToggleDarkMode</a>
|
|
128
|
-
</li>
|
|
129
|
-
<li><a href="#section-tooltip" @click="updateSettingsSidebar('CmdTooltip')">Tooltip</a>
|
|
130
|
-
</li>
|
|
131
|
-
<li><a href="#section-upload-form"
|
|
132
|
-
@click="updateSettingsSidebar('CmdUploadForm')">Upload-Form</a>
|
|
55
|
+
<li v-for="(componentName, index) in listOfComponents" :key="index" :class="{'active' : activeEntry === 'Cmd' + componentName}">
|
|
56
|
+
<a
|
|
57
|
+
:href="sectionName(componentName)"
|
|
58
|
+
@click="updateSettingsSidebar(componentNameWithPrefix(componentName))"
|
|
59
|
+
title="Go to component"
|
|
60
|
+
>
|
|
61
|
+
{{ readableComponentName(componentName)}}
|
|
62
|
+
</a>
|
|
133
63
|
</li>
|
|
134
64
|
</ul>
|
|
135
65
|
</template>
|
|
136
66
|
</CmdBox>
|
|
67
|
+
<!-- end box list of components-->
|
|
68
|
+
|
|
69
|
+
<!-- begin box page-templates -->
|
|
137
70
|
<CmdBox
|
|
138
71
|
:use-slots="['body']"
|
|
139
72
|
:collapsible="true"
|
|
@@ -186,18 +119,22 @@
|
|
|
186
119
|
</ul>
|
|
187
120
|
</template>
|
|
188
121
|
</CmdBox>
|
|
122
|
+
<!-- end box page-templates -->
|
|
189
123
|
</template>
|
|
190
124
|
</CmdBoxWrapper>
|
|
125
|
+
|
|
126
|
+
<!-- begin list comand-versions -->
|
|
191
127
|
<dl class="box-footer comand-versions">
|
|
192
128
|
<dt>Frontend-Framework Version:</dt>
|
|
193
129
|
<dd>{{ packageJson.dependencies['comand-frontend-framework'].replace("^", "") }}</dd>
|
|
194
130
|
<dt>Component-Library Version:</dt>
|
|
195
131
|
<dd>{{ packageJson.version }}</dd>
|
|
196
132
|
</dl>
|
|
133
|
+
<!-- end list comand-versions -->
|
|
197
134
|
</template>
|
|
198
135
|
<template #closed>
|
|
199
136
|
<div class="closed-sidebar">
|
|
200
|
-
<a href="#" class="button primary" title="Open Template
|
|
137
|
+
<a href="#" class="button primary" title="Open Template Selection" @click.prevent="openBox(0)">
|
|
201
138
|
<span class="icon-settings-template"></span>
|
|
202
139
|
</a>
|
|
203
140
|
<a href="#" class="button primary" title="Open Components Overview" @click.prevent="openBox(1)">
|
|
@@ -226,10 +163,7 @@
|
|
|
226
163
|
<template v-slot:logo>
|
|
227
164
|
<!-- begin company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
228
165
|
<CmdCompanyLogo
|
|
229
|
-
|
|
230
|
-
altText="CoManD Logo"
|
|
231
|
-
:pathDefaultLogo="companyLogoData.pathDefaultLogo"
|
|
232
|
-
:pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
|
|
166
|
+
v-bind="companyLogoData"
|
|
233
167
|
/>
|
|
234
168
|
<!-- end company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
235
169
|
</template>
|
|
@@ -1236,13 +1170,30 @@
|
|
|
1236
1170
|
<a href="#" class="icon-cog" title="Open Component Settings"
|
|
1237
1171
|
@click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
|
|
1238
1172
|
</h2>
|
|
1239
|
-
<CmdBreadcrumbs
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1173
|
+
<CmdBreadcrumbs
|
|
1174
|
+
ref="CmdBreadcrumbs"
|
|
1175
|
+
:breadcrumbLabel="breadcrumbsData.breadcrumbLabel"
|
|
1176
|
+
:breadcrumbLinks="breadcrumbsData.breadcrumbLinks"
|
|
1177
|
+
v-bind="cmdBreadcrumbsSettingsData"
|
|
1178
|
+
/>
|
|
1243
1179
|
</CmdWidthLimitationWrapper>
|
|
1244
1180
|
<!-- end breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1245
1181
|
|
|
1182
|
+
<!-- begin company-logo ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1183
|
+
<CmdWidthLimitationWrapper>
|
|
1184
|
+
<h2 class="headline-demopage" id="section-company-logo">
|
|
1185
|
+
<span>Company Logo</span>
|
|
1186
|
+
<a href="#" class="icon-cog" title="Open Component Settings"
|
|
1187
|
+
@click.prevent="openSettingsSidebar('CmdCompanyLogo')"></a>
|
|
1188
|
+
</h2>
|
|
1189
|
+
<CmdCompanyLogo
|
|
1190
|
+
ref="CmdCompanyLogo"
|
|
1191
|
+
:link="companyLogoData.link"
|
|
1192
|
+
v-bind="cmdCompanyLogoSettingsData"
|
|
1193
|
+
/>
|
|
1194
|
+
</CmdWidthLimitationWrapper>
|
|
1195
|
+
<!-- end company-logo ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1196
|
+
|
|
1246
1197
|
<!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1247
1198
|
<CmdWidthLimitationWrapper>
|
|
1248
1199
|
<h2 class="headline-demopage" id="section-cookie-disclaimer">Cookie Disclaimer</h2>
|
|
@@ -1815,7 +1766,7 @@
|
|
|
1815
1766
|
<CmdThumbnailScroller
|
|
1816
1767
|
ref="CmdThumbnailScroller"
|
|
1817
1768
|
v-bind="cmdThumbnailScrollerSettingsData"
|
|
1818
|
-
:
|
|
1769
|
+
:thumbnailScrollerItems="thumbnailScrollerData"
|
|
1819
1770
|
/>
|
|
1820
1771
|
</div>
|
|
1821
1772
|
</CmdWidthLimitationWrapper>
|
|
@@ -1871,16 +1822,19 @@
|
|
|
1871
1822
|
<!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1872
1823
|
</main>
|
|
1873
1824
|
|
|
1825
|
+
<!-- begin page view -->
|
|
1874
1826
|
<main v-else id="content">
|
|
1875
1827
|
<CmdWidthLimitationWrapper>
|
|
1876
1828
|
<h1 class="headline-demopage">Page Overview</h1>
|
|
1877
1829
|
</CmdWidthLimitationWrapper>
|
|
1878
1830
|
|
|
1879
|
-
<!--
|
|
1831
|
+
<!-- begin page-overview -->
|
|
1880
1832
|
<PageOverview />
|
|
1881
1833
|
<!-- end page-overview -->
|
|
1882
1834
|
</main>
|
|
1835
|
+
<!-- end page view -->
|
|
1883
1836
|
|
|
1837
|
+
<!-- begin cmd-site-footer -->
|
|
1884
1838
|
<CmdSiteFooter>
|
|
1885
1839
|
<!-- begin slot-content -->
|
|
1886
1840
|
Slot-Content for Site-Footer
|
|
@@ -1978,6 +1932,8 @@ import thumbnailScrollerTextData from '@/assets/data/thumbnail-scroller-text.jso
|
|
|
1978
1932
|
|
|
1979
1933
|
import packageJson from '../package.json'
|
|
1980
1934
|
|
|
1935
|
+
import listOfComponents from "@/assets/data/listOfComponents.json"
|
|
1936
|
+
|
|
1981
1937
|
import PageOverview from "@/pages/PageOverview.vue"
|
|
1982
1938
|
|
|
1983
1939
|
// import external functions
|
|
@@ -1996,6 +1952,7 @@ export default {
|
|
|
1996
1952
|
},
|
|
1997
1953
|
data() {
|
|
1998
1954
|
return {
|
|
1955
|
+
listOfComponents,
|
|
1999
1956
|
activeEntry: "CmdAddressData",
|
|
2000
1957
|
componentControls: {},
|
|
2001
1958
|
componentView: true,
|
|
@@ -2159,17 +2116,27 @@ export default {
|
|
|
2159
2116
|
}
|
|
2160
2117
|
},
|
|
2161
2118
|
methods: {
|
|
2162
|
-
|
|
2163
|
-
|
|
2119
|
+
sectionName(componentName) {
|
|
2120
|
+
let componentNameWithHyphens = componentName.replace(/([A-Z])/g, '-$1');
|
|
2121
|
+
return "#section" + componentNameWithHyphens.toLowerCase();
|
|
2122
|
+
},
|
|
2123
|
+
readableComponentName(componentName) {
|
|
2124
|
+
return componentName.replace(/(?!^)([A-Z])/g, ' $1');
|
|
2125
|
+
},
|
|
2126
|
+
componentNameWithPrefix(componentName) {
|
|
2127
|
+
return "Cmd" + componentName
|
|
2164
2128
|
},
|
|
2165
|
-
|
|
2166
|
-
this.
|
|
2129
|
+
setActiveEntry(componentName) {
|
|
2130
|
+
this.activeEntry = componentName
|
|
2131
|
+
},
|
|
2132
|
+
updateSettingsSidebar(componentName, type) {
|
|
2133
|
+
this.setActiveEntry(componentName)
|
|
2167
2134
|
|
|
2168
2135
|
if(type !== 'page') {
|
|
2169
2136
|
this.componentView = true
|
|
2170
2137
|
|
|
2171
2138
|
if (this.openRightSidebar) {
|
|
2172
|
-
this.openSettingsSidebar(
|
|
2139
|
+
this.openSettingsSidebar(componentName)
|
|
2173
2140
|
}
|
|
2174
2141
|
} else {
|
|
2175
2142
|
this.componentView = false
|
|
@@ -2190,8 +2157,6 @@ export default {
|
|
|
2190
2157
|
if (this[controlsName]) {
|
|
2191
2158
|
this.componentControls = this[controlsName]
|
|
2192
2159
|
}
|
|
2193
|
-
|
|
2194
|
-
console.log("this.componentProps", this.componentProps)
|
|
2195
2160
|
},
|
|
2196
2161
|
setOpenStatusLeftSidebar(event) {
|
|
2197
2162
|
this.openLeftSidebar = event
|
|
@@ -2387,6 +2352,11 @@ export default {
|
|
|
2387
2352
|
&:not(:last-child) {
|
|
2388
2353
|
border-bottom: 0;
|
|
2389
2354
|
}
|
|
2355
|
+
|
|
2356
|
+
li.active a {
|
|
2357
|
+
padding: 0.1rem 0.3rem;
|
|
2358
|
+
text-decoration: none;
|
|
2359
|
+
}
|
|
2390
2360
|
}
|
|
2391
2361
|
|
|
2392
2362
|
.open-slot-wrapper {
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
[
|
|
2
|
+
"AddressData",
|
|
3
|
+
"AdvancedFormElements",
|
|
4
|
+
"BankAccountData",
|
|
5
|
+
"Boxes",
|
|
6
|
+
"Breadcrumbs",
|
|
7
|
+
"CompanyLogo",
|
|
8
|
+
"CookieDisclaimer",
|
|
9
|
+
"Forms",
|
|
10
|
+
"Fancybox",
|
|
11
|
+
"GoogleMaps",
|
|
12
|
+
"Headlines",
|
|
13
|
+
"Icons",
|
|
14
|
+
"Image",
|
|
15
|
+
"ImageGallery",
|
|
16
|
+
"ImageZoom",
|
|
17
|
+
"ListOfLinks",
|
|
18
|
+
"LoginForm",
|
|
19
|
+
"MainNavigation",
|
|
20
|
+
"MultistepFormProgressBar",
|
|
21
|
+
"NewsletterSubscription",
|
|
22
|
+
"OpeningHours",
|
|
23
|
+
"PageFooter",
|
|
24
|
+
"PageHeader",
|
|
25
|
+
"Pagination",
|
|
26
|
+
"SiteFooter",
|
|
27
|
+
"SiteHeader",
|
|
28
|
+
"SiteSearch",
|
|
29
|
+
"Slideshow",
|
|
30
|
+
"SocialNetworks",
|
|
31
|
+
"SwitchLanguage",
|
|
32
|
+
"SystemMessage",
|
|
33
|
+
"Tables",
|
|
34
|
+
"Tabs",
|
|
35
|
+
"TextImageBlock",
|
|
36
|
+
"ThumbnailScroller",
|
|
37
|
+
"Tooltip",
|
|
38
|
+
"UploadForm"
|
|
39
|
+
]
|
|
@@ -7,8 +7,7 @@
|
|
|
7
7
|
"type": "href",
|
|
8
8
|
"text": "Entry 1",
|
|
9
9
|
"path": "#",
|
|
10
|
-
"iconClass": "icon-home"
|
|
11
|
-
"subentries": []
|
|
10
|
+
"iconClass": "icon-home"
|
|
12
11
|
},
|
|
13
12
|
{
|
|
14
13
|
"type": "href",
|
|
@@ -40,7 +39,8 @@
|
|
|
40
39
|
{
|
|
41
40
|
"type": "href",
|
|
42
41
|
"text": "Entry 2.2",
|
|
43
|
-
"path": "#"
|
|
42
|
+
"path": "#",
|
|
43
|
+
"subentries": []
|
|
44
44
|
}
|
|
45
45
|
]
|
|
46
46
|
},
|
|
@@ -13,7 +13,8 @@ data() {
|
|
|
13
13
|
showLabelIcons: true,
|
|
14
14
|
showLabelTexts: false,
|
|
15
15
|
showIconsOnly: false,
|
|
16
|
-
showLabels: true
|
|
16
|
+
showLabels: true,
|
|
17
|
+
showCityBeforeZip: false
|
|
17
18
|
},
|
|
18
19
|
cmdBankAccountDataSettingsData: {
|
|
19
20
|
cmdHeadline: {
|
|
@@ -92,6 +93,11 @@ data() {
|
|
|
92
93
|
}
|
|
93
94
|
]
|
|
94
95
|
},
|
|
96
|
+
cmdCompanyLogoSettingsData: {
|
|
97
|
+
pathDefaultLogo: "/media/images/logos/logo.svg",
|
|
98
|
+
pathDarkmodeLogo: "/media/images/logos/logo-darkmode.svg",
|
|
99
|
+
altText: "Company Logo"
|
|
100
|
+
},
|
|
95
101
|
cmdFakeSelectSettingsData: {
|
|
96
102
|
showSelectAllOptions: true,
|
|
97
103
|
status: "",
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
:key="index" :addressEntry="entry"
|
|
26
26
|
:showLabelIcons="showLabelIcons"
|
|
27
27
|
:showLabelTexts="showLabelTexts"
|
|
28
|
+
:showCityBeforeZip="showCityBeforeZip"
|
|
28
29
|
/>
|
|
29
30
|
<!-- end cmd-address-data-item -->
|
|
30
31
|
</dl>
|
|
@@ -93,12 +94,18 @@
|
|
|
93
94
|
</template>
|
|
94
95
|
<!-- end street/number -->
|
|
95
96
|
|
|
96
|
-
<!-- begin zip/city -->
|
|
97
|
-
<
|
|
98
|
-
<span class="postal-code">{{ entry.zip }} </span>
|
|
99
|
-
<span class="locality">{{ entry.city }}</span><br/>
|
|
97
|
+
<!-- begin zip/city (state) -->
|
|
98
|
+
<span v-if="entry.zip || entry.city" :class="showCityBeforeZip ? 'order-city-zip' : 'order-zip-city'">
|
|
99
|
+
<span v-if="entry.zip" class="postal-code">{{ entry.zip }} </span>
|
|
100
|
+
<span v-if="entry.city" class="locality">{{ entry.city }}<template v-if="entry.state"> {{entry.state}}</template></span><br/>
|
|
101
|
+
</span>
|
|
102
|
+
<!-- end zip/city (state) -->
|
|
103
|
+
|
|
104
|
+
<!-- begin po box -->
|
|
105
|
+
<template v-if="entry.pobox">
|
|
106
|
+
<span>{{ entry.pobox }}</span><br/>
|
|
100
107
|
</template>
|
|
101
|
-
<!-- end
|
|
108
|
+
<!-- end po box -->
|
|
102
109
|
|
|
103
110
|
<!-- begin miscInfo -->
|
|
104
111
|
<template v-if="entry.miscInfo">
|
|
@@ -121,12 +128,18 @@
|
|
|
121
128
|
</template>
|
|
122
129
|
<!-- end street/number -->
|
|
123
130
|
|
|
124
|
-
<!-- begin zip/city -->
|
|
125
|
-
<
|
|
126
|
-
<span class="postal-code">{{ entry.zip }} </span>
|
|
127
|
-
<span class="locality">{{ entry.city }}</span><br/>
|
|
131
|
+
<!-- begin zip/city (state) -->
|
|
132
|
+
<span v-if="entry.zip || entry.city" :class="showCityBeforeZip ? 'order-city-zip' : 'order-zip-city'">
|
|
133
|
+
<span v-if="entry.zip" class="postal-code">{{ entry.zip }} </span>
|
|
134
|
+
<span v-if="entry.city" class="locality">{{ entry.city }}<template v-if="entry.state"> {{entry.state}}</template></span><br/>
|
|
135
|
+
</span>
|
|
136
|
+
<!-- end zip/city (state) -->
|
|
137
|
+
|
|
138
|
+
<!-- begin po box -->
|
|
139
|
+
<template v-if="entry.pobox">
|
|
140
|
+
<span>{{ entry.pobox }}</span><br/>
|
|
128
141
|
</template>
|
|
129
|
-
<!-- end
|
|
142
|
+
<!-- end po box -->
|
|
130
143
|
|
|
131
144
|
<!-- begin miscInfo -->
|
|
132
145
|
<template v-if="entry.miscInfo">
|
|
@@ -207,6 +220,13 @@ export default {
|
|
|
207
220
|
type: Array,
|
|
208
221
|
required: true
|
|
209
222
|
},
|
|
223
|
+
/**
|
|
224
|
+
* activate to show city first/left then zip next/right
|
|
225
|
+
*/
|
|
226
|
+
showCityBeforeZip: {
|
|
227
|
+
type: Boolean,
|
|
228
|
+
default: false
|
|
229
|
+
},
|
|
210
230
|
/**
|
|
211
231
|
* properties for CmdHeadline-component
|
|
212
232
|
*/
|
|
@@ -285,10 +305,19 @@ export default {
|
|
|
285
305
|
align-self: flex-start;
|
|
286
306
|
|
|
287
307
|
[class*="icon"]:only-child {
|
|
288
|
-
line-height: var(--line-height);
|
|
308
|
+
line-height: var(--default-line-height);
|
|
289
309
|
}
|
|
290
310
|
}
|
|
291
311
|
}
|
|
312
|
+
|
|
313
|
+
.order-city-zip, .order-zip-city {
|
|
314
|
+
display: inline-flex;
|
|
315
|
+
gap: .5rem;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.order-city-zip {
|
|
319
|
+
flex-direction: row-reverse;
|
|
320
|
+
}
|
|
292
321
|
}
|
|
293
322
|
|
|
294
323
|
ul {
|
|
@@ -55,12 +55,12 @@
|
|
|
55
55
|
</template>
|
|
56
56
|
<!-- end street/number -->
|
|
57
57
|
|
|
58
|
-
<!-- begin zip/city -->
|
|
59
|
-
<span v-if="addressEntry.zip" class="
|
|
60
|
-
|
|
61
|
-
<span class="locality">{{ addressEntry.city }}</span
|
|
62
|
-
</
|
|
63
|
-
<!-- end zip/city -->
|
|
58
|
+
<!-- begin zip/city (state) -->
|
|
59
|
+
<span v-if="addressEntry.zip || addressEntry.city" :class="showCityBeforeZip ? 'city-zip' : 'zip-city'">
|
|
60
|
+
<span v-if="addressEntry.zip" class="postal-code">{{ addressEntry.zip }} </span>
|
|
61
|
+
<span v-if="addressEntry.city" class="locality">{{ addressEntry.city }}<template v-if="addressEntry.state"> {{addressEntry.state}}</template></span>
|
|
62
|
+
</span><br/>
|
|
63
|
+
<!-- end zip/city (state) -->
|
|
64
64
|
|
|
65
65
|
<!-- begin miscInfo -->
|
|
66
66
|
<template v-if="addressEntry.miscInfo">
|
|
@@ -83,12 +83,12 @@
|
|
|
83
83
|
</template>
|
|
84
84
|
<!-- end street/number -->
|
|
85
85
|
|
|
86
|
-
<!-- begin zip/city -->
|
|
87
|
-
<span v-if="addressEntry.zip" class="
|
|
88
|
-
|
|
89
|
-
<span class="locality">{{ addressEntry.city }}</span
|
|
90
|
-
</
|
|
91
|
-
<!-- end zip/city -->
|
|
86
|
+
<!-- begin zip/city (state) -->
|
|
87
|
+
<span v-if="addressEntry.zip || addressEntry.city" :class="showCityBeforeZip ? 'city-zip' : 'zip-city'">
|
|
88
|
+
<span v-if="addressEntry.zip" class="postal-code">{{ addressEntry.zip }}</span>
|
|
89
|
+
<span v-if="addressEntry.city" class="locality">{{ addressEntry.city }}<template v-if="addressEntry.state"> {{addressEntry.state}}</template></span>
|
|
90
|
+
</span><br/>
|
|
91
|
+
<!-- end zip/city (state) -->
|
|
92
92
|
|
|
93
93
|
<!-- begin miscInfo -->
|
|
94
94
|
<template v-if="addressEntry.miscInfo">
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
<!-- end street/number -->
|
|
117
117
|
|
|
118
118
|
<!-- begin zip/city -->
|
|
119
|
-
<div class="input-wrapper">
|
|
119
|
+
<div :class="showCityBeforeZip ? 'city-zip' : 'zip-city'" class="input-wrapper">
|
|
120
120
|
<CmdFormElement
|
|
121
121
|
element="input"
|
|
122
122
|
type="text"
|
|
@@ -209,6 +209,13 @@ export default {
|
|
|
209
209
|
linkGoogleMaps: {
|
|
210
210
|
type: Boolean,
|
|
211
211
|
default: false
|
|
212
|
+
},
|
|
213
|
+
/**
|
|
214
|
+
* activate to show city first/left then zip next/right
|
|
215
|
+
*/
|
|
216
|
+
showCityBeforeZip: {
|
|
217
|
+
type: Boolean,
|
|
218
|
+
default: false
|
|
212
219
|
}
|
|
213
220
|
},
|
|
214
221
|
methods: {
|
|
@@ -257,11 +257,11 @@ export default {
|
|
|
257
257
|
default: false
|
|
258
258
|
},
|
|
259
259
|
/**
|
|
260
|
-
* set max-height for body (should only be used
|
|
260
|
+
* set max-height for body (should only be used if allowContentToScroll-property is active)
|
|
261
261
|
*/
|
|
262
262
|
maxBoxBodyHeight: {
|
|
263
263
|
type: String,
|
|
264
|
-
default: "
|
|
264
|
+
default: "20rem"
|
|
265
265
|
},
|
|
266
266
|
/**
|
|
267
267
|
* activate if box should be collapsible
|
|
@@ -440,7 +440,6 @@ export default {
|
|
|
440
440
|
},
|
|
441
441
|
/*
|
|
442
442
|
mounted() {
|
|
443
|
-
|
|
444
443
|
if (this.allowContentToScroll && this.$refs.boxBody) {
|
|
445
444
|
const topPosition = this.$refs.boxBody.getBoundingClientRect().top
|
|
446
445
|
this.calculatedBodyHeight = (document.documentElement.clientHeight - topPosition) + "px"
|
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
<div class="cmd-company-logo company-logo">
|
|
3
3
|
<router-link v-if="link?.type === 'router'" :to="link?.path" :title="link?.tooltip">
|
|
4
4
|
<!-- begin CmdImage -->
|
|
5
|
-
<CmdImage :image="image"/>
|
|
5
|
+
<CmdImage :image="image" @image-loaded="onImageLoaded" />
|
|
6
6
|
<!-- end CmdImage -->
|
|
7
7
|
</router-link>
|
|
8
8
|
<a v-else-if="link?.type === 'href'" :href="link?.path" :title="link?.tooltip">
|
|
9
9
|
<!-- begin CmdImage -->
|
|
10
|
-
<CmdImage :image="image"/>
|
|
10
|
+
<CmdImage :image="image" @image-loaded="onImageLoaded" />
|
|
11
11
|
<!-- end CmdImage -->
|
|
12
12
|
</a>
|
|
13
13
|
<!-- begin CmdImage -->
|
|
14
|
-
<CmdImage v-else :image="image"/>
|
|
14
|
+
<CmdImage v-else :image="image" @image-loaded="onImageLoaded" />
|
|
15
15
|
<!-- end CmdImage -->
|
|
16
16
|
</div>
|
|
17
17
|
</template>
|
|
@@ -88,6 +88,9 @@ export default {
|
|
|
88
88
|
this.$_observer.disconnect()
|
|
89
89
|
},
|
|
90
90
|
methods: {
|
|
91
|
+
onImageLoaded(event) {
|
|
92
|
+
this.$emit("image-loaded", event)
|
|
93
|
+
},
|
|
91
94
|
onColorSchemeChange(event) {
|
|
92
95
|
this.prefersColorScheme = event.matches ? "light" : "dark"
|
|
93
96
|
},
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
<!-- end slot 'labeltext' -->
|
|
29
29
|
|
|
30
30
|
<!-- begin required asterisk -->
|
|
31
|
-
<sup v-if="$attrs.required !==
|
|
31
|
+
<sup v-if="$attrs.required != null && $attrs.required !== false" aria-hidden="true">*</sup>
|
|
32
32
|
<!-- end required asterisk -->
|
|
33
33
|
</span>
|
|
34
34
|
|
|
@@ -874,7 +874,6 @@ export default {
|
|
|
874
874
|
}
|
|
875
875
|
|
|
876
876
|
&.has-state, & + .cmd-tooltip {
|
|
877
|
-
|
|
878
877
|
&.error {
|
|
879
878
|
* {
|
|
880
879
|
--status-color: var(--error-color);
|
|
@@ -902,6 +901,12 @@ export default {
|
|
|
902
901
|
~ .label-text span {
|
|
903
902
|
color: var(--hyperlink-color);
|
|
904
903
|
}
|
|
904
|
+
|
|
905
|
+
&:hover, &:active, &:focus {
|
|
906
|
+
~ .label-text span {
|
|
907
|
+
color: var(--hyperlink-color-highlighted);
|
|
908
|
+
}
|
|
909
|
+
}
|
|
905
910
|
}
|
|
906
911
|
|
|
907
912
|
&.inline {
|