comand-component-library 4.2.41 → 4.2.42

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.
Files changed (7) hide show
  1. package/dist/comand-component-library.js +806 -758
  2. package/dist/style.css +1 -1
  3. package/package.json +2 -2
  4. package/src/ComponentLibrary.vue +7 -0
  5. package/src/assets/data/multistep-form-progress-bar.json +29 -0
  6. package/src/components/CmdLink.vue +38 -6
  7. package/src/components/CmdMultistepFormProgressBar.vue +1 -0
package/src/components/CmdLink.vue CHANGED
@@ -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'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" @click="emitClick($event, 'router')" :title="icon?.tooltip">
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'" :class="['cmd-link button', {'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" type="submit" @click="emitClick($event, 'button')" :title="icon?.tooltip">
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 {
package/src/components/CmdMultistepFormProgressBar.vue CHANGED
@@ -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>