comand-component-library 3.1.92 → 3.1.93
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.umd.min.js +1 -1
- package/package.json +2 -2
- package/src/App.vue +3 -4
- package/src/components/CmdBox.vue +4 -1
- package/src/components/CmdFormElement.vue +20 -19
- package/src/components/CmdLoginForm.vue +1 -1
- package/src/components/CmdSiteHeader.vue +35 -7
- package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json +15 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "comand-component-library",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.93",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"serve": "vue-cli-service serve",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"clickout-event": "^1.1.2",
|
|
21
|
-
"comand-frontend-framework": "^3.2.
|
|
21
|
+
"comand-frontend-framework": "^3.2.77",
|
|
22
22
|
"core-js": "^3.20.1",
|
|
23
23
|
"prismjs": "^1.27.0",
|
|
24
24
|
"sass": "^1.54.9",
|
package/src/App.vue
CHANGED
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
<CmdWidthLimitationWrapper>
|
|
31
31
|
<div class="flex-container">
|
|
32
32
|
<ul>
|
|
33
|
-
<li><a href="#section-accordion">Accordion</a></li>
|
|
34
33
|
<li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
|
|
35
34
|
<li><a href="#section-bank-account-data">Bank Account Data</a></li>
|
|
36
35
|
<li><a href="#section-boxes">Boxes</a></li>
|
|
@@ -45,18 +44,18 @@
|
|
|
45
44
|
<li><a href="#section-image-zoom">Image-Zoom</a></li>
|
|
46
45
|
<li><a href="#section-login-form">Login Form</a></li>
|
|
47
46
|
<li><a href="#section-main-navigation">Main-Navigation</a></li>
|
|
48
|
-
<li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
|
|
49
47
|
</ul>
|
|
50
48
|
<ul>
|
|
49
|
+
<li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
|
|
51
50
|
<li><a href="#section-pager">Pager</a></li>
|
|
52
51
|
<li><a href="#section-share-buttons">Share Buttons</a></li>
|
|
53
52
|
<li><a href="#section-site-search">Site Search</a></li>
|
|
54
53
|
<li><a href="#section-slideshow">Slideshow</a></li>
|
|
55
54
|
<li><a href="#section-system-message">System-Message</a></li>
|
|
56
|
-
<li><a href="#section-tables">Tables</a></li>
|
|
57
|
-
<li><a href="#section-tabs">Tabs</a></li>
|
|
58
55
|
</ul>
|
|
59
56
|
<ul>
|
|
57
|
+
<li><a href="#section-tables">Tables</a></li>
|
|
58
|
+
<li><a href="#section-tabs">Tabs</a></li>
|
|
60
59
|
<li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
|
|
61
60
|
<li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
|
|
62
61
|
<li><a href="#section-tooltip">Tooltip</a></li>
|
|
@@ -26,7 +26,10 @@
|
|
|
26
26
|
<!-- begin header for collapsible -->
|
|
27
27
|
<a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
|
|
28
28
|
<!-- begin CmdHeadline -->
|
|
29
|
-
<CmdHeadline
|
|
29
|
+
<CmdHeadline
|
|
30
|
+
v-if="cmdHeadline?.headlineText"
|
|
31
|
+
v-bind="cmdHeadline"
|
|
32
|
+
/>
|
|
30
33
|
<!-- end CmdHeadline -->
|
|
31
34
|
<span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
|
|
32
35
|
</a>
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<label
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
2
|
+
<label
|
|
3
|
+
v-if="(element === 'input' || element === 'select' || element === 'textarea')"
|
|
4
|
+
:class="[
|
|
5
|
+
'cmd-form-element',
|
|
6
|
+
validationStatus,
|
|
7
|
+
$attrs.class,
|
|
8
|
+
{
|
|
9
|
+
disabled: $attrs.disabled,
|
|
10
|
+
inline : displayLabelInline,
|
|
11
|
+
checked: isChecked,
|
|
12
|
+
'toggle-switch': toggleSwitch,
|
|
13
|
+
colored: colored,
|
|
14
|
+
on: colored && isChecked,
|
|
15
|
+
off: colored && !isChecked,
|
|
16
|
+
'has-state': validationStatus
|
|
17
|
+
}
|
|
18
|
+
]"
|
|
19
|
+
:for="htmlId"
|
|
20
|
+
:title="$attrs.title"
|
|
21
|
+
ref="label">
|
|
21
22
|
|
|
22
23
|
<!-- begin label-text (+ required asterisk) -->
|
|
23
24
|
<span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :class="['cmd-site-header', { sticky: sticky }]" role="banner">
|
|
2
|
+
<div :class="['cmd-site-header', { sticky: sticky, 'navigation-inline': navigationInline }]" role="banner">
|
|
3
3
|
<!-- begin slot for elements above header -->
|
|
4
4
|
<div class="top-header">
|
|
5
5
|
<slot name="top-header"></slot>
|
|
@@ -13,22 +13,34 @@
|
|
|
13
13
|
</header>
|
|
14
14
|
<!-- end header-wrapper with slots for logo and other header elements -->
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
16
|
+
<header v-if="cmdCompanyLogo || cmdMainNavigation?.navigationEntries?.length" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
|
|
17
|
+
<!-- begin CmdCompanyLogo -->
|
|
18
|
+
<CmdCompanyLogo
|
|
19
|
+
v-if="cmdCompanyLogo"
|
|
20
|
+
v-bind="cmdCompanyLogo"
|
|
21
|
+
/>
|
|
22
|
+
<!-- end CmdCompanyLogo -->
|
|
23
|
+
|
|
24
|
+
<!-- begin CmdMainNavigation -->
|
|
25
|
+
<CmdMainNavigation
|
|
26
|
+
v-if="cmdMainNavigation?.navigationEntries?.length"
|
|
27
|
+
v-bind="cmdMainNavigation"
|
|
28
|
+
:closeOffcanvas="closeOffcanvas"
|
|
29
|
+
/>
|
|
30
|
+
<!-- end CmdMainNavigation -->
|
|
31
|
+
</header>
|
|
22
32
|
</div>
|
|
23
33
|
</template>
|
|
24
34
|
|
|
25
35
|
<script>
|
|
26
36
|
// import components
|
|
37
|
+
import CmdCompanyLogo from "./CmdCompanyLogo"
|
|
27
38
|
import CmdMainNavigation from "./CmdMainNavigation"
|
|
28
39
|
|
|
29
40
|
export default {
|
|
30
41
|
name: "CmdSiteHeader",
|
|
31
42
|
components: {
|
|
43
|
+
CmdCompanyLogo,
|
|
32
44
|
CmdMainNavigation
|
|
33
45
|
},
|
|
34
46
|
props: {
|
|
@@ -46,6 +58,15 @@ export default {
|
|
|
46
58
|
type: Boolean,
|
|
47
59
|
default: true
|
|
48
60
|
},
|
|
61
|
+
/**
|
|
62
|
+
* activate if navigation should be displayed inline to logo (otherwise it will be displayed below)
|
|
63
|
+
*
|
|
64
|
+
* @affectsStyling: true
|
|
65
|
+
*/
|
|
66
|
+
navigationInline: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
default: false
|
|
69
|
+
},
|
|
49
70
|
/**
|
|
50
71
|
* use a grid for positioning of inner-elements (else a flex-container will be used)
|
|
51
72
|
*
|
|
@@ -55,6 +76,13 @@ export default {
|
|
|
55
76
|
type: Boolean,
|
|
56
77
|
default: true
|
|
57
78
|
},
|
|
79
|
+
/**
|
|
80
|
+
* properties for cmdCompanyLogo-component
|
|
81
|
+
*/
|
|
82
|
+
cmdCompanyLogo: {
|
|
83
|
+
type: Object,
|
|
84
|
+
required: true
|
|
85
|
+
},
|
|
58
86
|
/**
|
|
59
87
|
* properties for CmdMainNavigation-component
|
|
60
88
|
*/
|
|
@@ -9,6 +9,16 @@
|
|
|
9
9
|
"activated sticky-header (stays on top if page is scrolled)"
|
|
10
10
|
]
|
|
11
11
|
},
|
|
12
|
+
"navigationInline": {
|
|
13
|
+
"comments": [
|
|
14
|
+
"activate if navigation should be displayed inline to logo (otherwise it will be displayed below)"
|
|
15
|
+
],
|
|
16
|
+
"annotations": {
|
|
17
|
+
"affectsStyling": [
|
|
18
|
+
"true"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
12
22
|
"useGrid": {
|
|
13
23
|
"comments": [
|
|
14
24
|
"use a grid for positioning of inner-elements (else a flex-container will be used)"
|
|
@@ -19,6 +29,11 @@
|
|
|
19
29
|
]
|
|
20
30
|
}
|
|
21
31
|
},
|
|
32
|
+
"cmdCompanyLogo": {
|
|
33
|
+
"comments": [
|
|
34
|
+
"properties for cmdCompanyLogo-component"
|
|
35
|
+
]
|
|
36
|
+
},
|
|
22
37
|
"cmdMainNavigation": {
|
|
23
38
|
"comments": [
|
|
24
39
|
"properties for CmdMainNavigation-component"
|