comand-component-library 4.2.41 → 4.2.43
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 +807 -758
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +7 -0
- package/src/assets/data/multistep-form-progress-bar.json +29 -0
- package/src/components/CmdLink.vue +38 -6
- package/src/components/CmdMultistepFormProgressBar.vue +2 -0
|
@@ -2,31 +2,53 @@
|
|
|
2
2
|
<!-- begin CmdLink -->
|
|
3
3
|
<!-- begin href -->
|
|
4
4
|
<a v-if="linkType === 'href'"
|
|
5
|
-
:href="path"
|
|
5
|
+
:href="!disabled ? path : null"
|
|
6
6
|
:target="target"
|
|
7
|
-
:class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]"
|
|
7
|
+
:class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]"
|
|
8
8
|
@click.prevent="emitClick($event, 'href')"
|
|
9
9
|
:title="icon?.tooltip"
|
|
10
10
|
>
|
|
11
|
+
<!-- begin CmdInnterLink -->
|
|
11
12
|
<CmdInnerLink :text="text" :icon="icon" :image="image">
|
|
13
|
+
<!-- begin slot-content of CmdInnterLink -->
|
|
12
14
|
<slot></slot>
|
|
15
|
+
<!-- end slot-content of CmdInnterLink -->
|
|
13
16
|
</CmdInnerLink>
|
|
17
|
+
<!-- end CmdInnterLink -->
|
|
14
18
|
</a>
|
|
15
19
|
<!-- end href -->
|
|
16
20
|
|
|
17
21
|
<!-- begin router-link -->
|
|
18
|
-
<router-link v-else-if="linkType === 'router'"
|
|
22
|
+
<router-link v-else-if="linkType === 'router'"
|
|
23
|
+
:to="!disabled ? path : {}"
|
|
24
|
+
:class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]"
|
|
25
|
+
@click="emitClick($event, 'router')"
|
|
26
|
+
:title="icon?.tooltip">
|
|
27
|
+
<!-- begin CmdInnterLink -->
|
|
19
28
|
<CmdInnerLink :text="text" :icon="icon" :image="image">
|
|
29
|
+
<!-- begin slot-content of CmdInnterLink -->
|
|
20
30
|
<slot></slot>
|
|
31
|
+
<!-- end slot-content of CmdInnterLink -->
|
|
21
32
|
</CmdInnerLink>
|
|
33
|
+
<!-- end CmdInnterLink -->
|
|
22
34
|
</router-link>
|
|
23
35
|
<!-- end router-link -->
|
|
24
36
|
|
|
25
37
|
<!-- begin button -->
|
|
26
|
-
<button v-else-if="linkType === 'button' || linkType === 'submit'"
|
|
38
|
+
<button v-else-if="linkType === 'button' || linkType === 'submit'"
|
|
39
|
+
:class="['cmd-link button', {'primary': primaryButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]"
|
|
40
|
+
type="submit"
|
|
41
|
+
:disabled="disabled"
|
|
42
|
+
@click="emitClick($event, 'button')"
|
|
43
|
+
:title="icon?.tooltip"
|
|
44
|
+
>
|
|
45
|
+
<!-- begin CmdInnterLink -->
|
|
27
46
|
<CmdInnerLink :text="text" :icon="icon" :image="image">
|
|
47
|
+
<!-- begin slot-content of CmdInnterLink -->
|
|
28
48
|
<slot></slot>
|
|
49
|
+
<!-- end slot-content of CmdInnterLink -->
|
|
29
50
|
</CmdInnerLink>
|
|
51
|
+
<!-- end CmdInnterLink -->
|
|
30
52
|
</button>
|
|
31
53
|
<!-- end button -->
|
|
32
54
|
<!-- end CmdLink -->
|
|
@@ -64,7 +86,7 @@ export default {
|
|
|
64
86
|
/**
|
|
65
87
|
* set target
|
|
66
88
|
*
|
|
67
|
-
* linkType must be 'href'
|
|
89
|
+
* linkType-property must be set to 'href'
|
|
68
90
|
*/
|
|
69
91
|
target: {
|
|
70
92
|
type: String,
|
|
@@ -109,6 +131,13 @@ export default {
|
|
|
109
131
|
type: Boolean,
|
|
110
132
|
default: false
|
|
111
133
|
},
|
|
134
|
+
/**
|
|
135
|
+
* activate if link/button should be disabled
|
|
136
|
+
*/
|
|
137
|
+
disabled: {
|
|
138
|
+
type: Boolean,
|
|
139
|
+
default: false
|
|
140
|
+
},
|
|
112
141
|
/**
|
|
113
142
|
* set if path should be opened in fancybox
|
|
114
143
|
*/
|
|
@@ -116,6 +145,9 @@ export default {
|
|
|
116
145
|
type: Boolean,
|
|
117
146
|
default: false
|
|
118
147
|
},
|
|
148
|
+
/**
|
|
149
|
+
* set image for inner link
|
|
150
|
+
*/
|
|
119
151
|
image: {
|
|
120
152
|
type: Object,
|
|
121
153
|
required: false
|
|
@@ -136,7 +168,7 @@ export default {
|
|
|
136
168
|
gap: var(--icon-and-text-gap);
|
|
137
169
|
align-items: center;
|
|
138
170
|
|
|
139
|
-
&.active, &.router-link-active {
|
|
171
|
+
&.active, &.router-link-active:not(.button) {
|
|
140
172
|
background: var(--button-primary-background-highlighted); /* overwrite background for active links/buttons */
|
|
141
173
|
|
|
142
174
|
&.button {
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
:primaryButton="usePrimaryButtons"
|
|
10
10
|
:path="step.path"
|
|
11
11
|
:title="step.tooltip"
|
|
12
|
+
:disabled="step.disabled"
|
|
12
13
|
@click="clickedStep($event, index)"
|
|
13
14
|
>
|
|
14
15
|
<span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
|
|
@@ -28,6 +29,7 @@
|
|
|
28
29
|
import {getRoute} from "../utilities.js"
|
|
29
30
|
|
|
30
31
|
export default {
|
|
32
|
+
emits: ["click"],
|
|
31
33
|
name: "CmdMultistepFormProgressBar",
|
|
32
34
|
data() {
|
|
33
35
|
return {
|