comand-component-library 4.0.15 → 4.0.17
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 +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 {
|