comand-component-library 4.2.55 → 4.2.57

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 (14) hide show
  1. package/dist/comand-component-library.js +3882 -3541
  2. package/dist/style.css +1 -1
  3. package/package.json +2 -2
  4. package/src/ComponentLibrary.vue +103 -7
  5. package/src/assets/data/form-elements.json +29 -0
  6. package/src/assets/data/listOfComponents.json +1 -0
  7. package/src/componentSettingsDataAndControls.vue +1 -2
  8. package/src/components/CmdFancyBox.vue +7 -3
  9. package/src/components/CmdForm.vue +30 -23
  10. package/src/components/CmdList.vue +2 -6
  11. package/src/components/CmdMultistepFormProgressBar.vue +38 -6
  12. package/src/components/CmdMultistepFormWrapper.vue +190 -0
  13. package/src/components/CmdPagination.vue +62 -55
  14. package/src/components/CmdTag.vue +4 -0
package/src/components/CmdPagination.vue CHANGED
@@ -2,46 +2,48 @@
2
2
  <!-- begin CmdPagination ---------------------------------------------------------------------------------------- -->
3
3
  <div class="cmd-pagination">
4
4
  <!-- begin button/link to previous page -->
5
- <a
6
- :href="getPreviousHref"
7
- :class="['page-change', {'disabled': currentPage === 1, 'button': linkType === 'button'}]"
8
- @click.prevent="previousPage"
9
- :title="!prevLink.showText ? prevLink.text : null"
10
- >
11
- <!-- begin CmdIcon -->
12
- <CmdIcon :iconClass="prevLink.iconClass" :type="prevLink.iconType"/>
13
- <!-- end CmdIcon -->
14
- <span v-if="prevLink.showText">{{ prevLink.text }}</span>
15
- </a>
16
- <!-- end button/link to previous page -->
17
-
18
- <!-- begin buttons/link with page numbers -->
19
- <div class="page-index">
20
- <div class="flex-container">
21
- <a :href="getHref(page)"
22
- :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button', 'hidden': !showPageNumbers}"
23
- :title="currentPage !== index + 1 ? getMessage('pagination.tooltip.go_to_page', index + 1) : getMessage('pagination.tooltip.not_possible')"
24
- v-for="(page, index) in pages"
25
- :key="index"
26
- @click.stop.prevent="showPage(page)" aria-live="polite">
27
- <span>{{ index + 1 }}</span>
28
- </a>
5
+ <slot>
6
+ <a
7
+ :href="getPreviousHref"
8
+ :class="['page-change', {'disabled': currentPage === 1, 'button': linkType === 'button'}]"
9
+ @click.stop.prevent="previousPage"
10
+ :title="!prevLink.showText ? prevLink.text : null"
11
+ >
12
+ <!-- begin CmdIcon -->
13
+ <CmdIcon :iconClass="prevLink.iconClass" :type="prevLink.iconType"/>
14
+ <!-- end CmdIcon -->
15
+ <span v-if="prevLink.showText">{{ prevLink.text }}</span>
16
+ </a>
17
+ <!-- end button/link to previous page -->
18
+
19
+ <!-- begin buttons/link with page numbers -->
20
+ <div class="page-index">
21
+ <div class="flex-container">
22
+ <a :href="getHref(page)"
23
+ :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button', 'hidden': !showPageNumbers}"
24
+ :title="currentPage !== index + 1 ? getMessage('pagination.tooltip.go_to_page', index + 1) : getMessage('pagination.tooltip.not_possible')"
25
+ v-for="(page, index) in numberOfPages"
26
+ :key="index"
27
+ @click.stop.prevent="showPage($event, page)" aria-live="polite">
28
+ <span>{{ index + 1 }}</span>
29
+ </a>
30
+ </div>
29
31
  </div>
30
- </div>
31
- <!-- end buttons/link with page numbers -->
32
-
33
- <!-- begin button/link to next page -->
34
- <a :href="getNextHref"
35
- :class="['page-change', {'disabled': currentPage === numberOfPages, 'button': linkType === 'button'}]"
36
- @click.prevent="nextPage"
37
- :title="!nextLink.showText ? nextLink.text : null"
38
- >
39
- <span v-if="nextLink.showText">{{ nextLink.text }}</span>
40
- <!-- begin CmdIcon -->
41
- <CmdIcon :iconClass="nextLink.iconClass" :type="nextLink.iconType"/>
42
- <!-- end CmdIcon -->
43
- </a>
44
- <!-- end button/link to next page -->
32
+ <!-- end buttons/link with page numbers -->
33
+
34
+ <!-- begin button/link to next page -->
35
+ <a :href="getNextHref"
36
+ :class="['page-change', {'disabled': currentPage === numberOfPages, 'button': linkType === 'button'}]"
37
+ @click.stop.prevent="nextPage"
38
+ :title="!nextLink.showText ? nextLink.text : null"
39
+ >
40
+ <span v-if="nextLink.showText">{{ nextLink.text }}</span>
41
+ <!-- begin CmdIcon -->
42
+ <CmdIcon :iconClass="nextLink.iconClass" :type="nextLink.iconType"/>
43
+ <!-- end CmdIcon -->
44
+ </a>
45
+ <!-- end button/link to next page -->
46
+ </slot>
45
47
  </div>
46
48
  <!-- end CmdPagination ---------------------------------------------------------------------------------------- -->
47
49
  </template>
@@ -57,7 +59,7 @@ export default {
57
59
  I18n,
58
60
  DefaultMessageProperties
59
61
  ],
60
- emits: ['click'],
62
+ emits: ["click"],
61
63
  data() {
62
64
  return {
63
65
  currentPage: 1
@@ -65,16 +67,16 @@ export default {
65
67
  },
66
68
  props: {
67
69
  /**
68
- * number of pages displayed
70
+ * set the active page/step
69
71
  */
70
- pages: {
72
+ activePage: {
71
73
  type: Number,
72
- required: true
74
+ default: 1
73
75
  },
74
76
  /**
75
- * number of items shown per page
77
+ * number of pages displayed
76
78
  */
77
- itemsPerPage: {
79
+ numberOfPages: {
78
80
  type: Number,
79
81
  required: true
80
82
  },
@@ -130,9 +132,6 @@ export default {
130
132
  }
131
133
  },
132
134
  computed: {
133
- numberOfPages() {
134
- return Math.ceil(this.pages / this.itemsPerPage)
135
- },
136
135
  getPreviousHref() {
137
136
  if (this.currentPage === 1) {
138
137
  return null
@@ -153,21 +152,29 @@ export default {
153
152
  }
154
153
  return "#"
155
154
  },
156
- showPage(page) {
155
+ showPage(event, page) {
157
156
  this.currentPage = page
158
- this.$emit("click", page)
157
+ this.$emit("click", {orignalEvent: event, page: page})
159
158
  },
160
- nextPage() {
159
+ nextPage(event) {
161
160
  if (this.currentPage < this.numberOfPages) {
162
- this.showPage(this.currentPage + 1)
161
+ this.showPage(event, this.currentPage + 1)
163
162
  }
164
-
165
163
  },
166
- previousPage() {
164
+ previousPage(event) {
167
165
  if (this.currentPage > 1) {
168
- this.showPage(this.currentPage - 1)
166
+ this.showPage(event, this.currentPage - 1)
169
167
  }
170
168
  }
169
+ },
170
+ watch: {
171
+ activePage: {
172
+ handler() {
173
+
174
+ this.currentPage = this.activePage
175
+ },
176
+ immediate: true
177
+ }
171
178
  }
172
179
  }
173
180
  </script>
package/src/components/CmdTag.vue CHANGED
@@ -91,6 +91,10 @@ export default {
91
91
  align-self: start; /* if used in vertical flex-container */
92
92
  gap: var(--default-gap-half);
93
93
 
94
+ > span:only-child {
95
+ margin: 0 auto;
96
+ }
97
+
94
98
  .primary, .secondary, .tertiary {
95
99
  span[class*="icon-"] {
96
100
  color: var(--color-white);