comand-component-library 4.2.56 → 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.
- package/dist/comand-component-library.js +3882 -3541
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +103 -7
- package/src/assets/data/form-elements.json +29 -0
- package/src/assets/data/listOfComponents.json +1 -0
- package/src/componentSettingsDataAndControls.vue +1 -2
- package/src/components/CmdFancyBox.vue +7 -3
- package/src/components/CmdForm.vue +30 -23
- package/src/components/CmdMultistepFormProgressBar.vue +38 -6
- package/src/components/CmdMultistepFormWrapper.vue +190 -0
- package/src/components/CmdPagination.vue +62 -55
|
@@ -2,46 +2,48 @@
|
|
|
2
2
|
<!-- begin CmdPagination ---------------------------------------------------------------------------------------- -->
|
|
3
3
|
<div class="cmd-pagination">
|
|
4
4
|
<!-- begin button/link to previous page -->
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<div class="
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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: [
|
|
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
|
-
*
|
|
70
|
+
* set the active page/step
|
|
69
71
|
*/
|
|
70
|
-
|
|
72
|
+
activePage: {
|
|
71
73
|
type: Number,
|
|
72
|
-
|
|
74
|
+
default: 1
|
|
73
75
|
},
|
|
74
76
|
/**
|
|
75
|
-
* number of
|
|
77
|
+
* number of pages displayed
|
|
76
78
|
*/
|
|
77
|
-
|
|
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>
|