comand-component-library 4.1.7 → 4.1.8
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/package.json
CHANGED
@@ -20,6 +20,7 @@
|
|
20
20
|
- input-wrapper (for .select)
|
21
21
|
|
22
22
|
P ------------------------
|
23
|
+
- print-preview
|
23
24
|
- product-listing
|
24
25
|
|
25
26
|
T ------------------------
|
@@ -127,6 +128,14 @@ body.avoid-scrolling {
|
|
127
128
|
|
128
129
|
/* end input-wrapper for .select --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
129
130
|
|
131
|
+
/* begin print-preview --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
132
|
+
#print-preview {
|
133
|
+
.cmd-page-footer {
|
134
|
+
display: none;
|
135
|
+
}
|
136
|
+
}
|
137
|
+
/* end print-preview --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
138
|
+
|
130
139
|
/* begin product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
131
140
|
#product-listing-wrapper {
|
132
141
|
> a {
|
@@ -10,53 +10,52 @@
|
|
10
10
|
<CmdHeadline
|
11
11
|
v-if="cmdHeadline?.headlineText"
|
12
12
|
v-bind="cmdHeadline"
|
13
|
-
:id="htmlId"
|
14
13
|
/>
|
15
14
|
<!-- end CmdHeadline -->
|
16
15
|
|
17
16
|
<!-- begin button-wrapper -->
|
18
17
|
<div
|
19
|
-
v-if="(
|
18
|
+
v-if="(fancyboxOptionsProperties.printButtons?.color || fancyboxOptionsProperties.printButtons?.grayscale) || fancyboxOptionsProperties.closeIcon"
|
20
19
|
class="button-wrapper no-flex"
|
21
20
|
> <!-- begin print buttons -->
|
22
|
-
<a v-if="showPrintButtons &&
|
21
|
+
<a v-if="showPrintButtons && fancyboxOptionsProperties.printButtons?.color"
|
23
22
|
href="#"
|
24
23
|
class="button print-color"
|
25
|
-
:title="
|
24
|
+
:title="fancyboxOptionsProperties.printButtons.color?.tooltip"
|
26
25
|
@click.prevent="printInGrayscale = false">
|
27
26
|
<!-- begin CmdIcon -->
|
28
27
|
<CmdIcon
|
29
|
-
:iconClass="
|
30
|
-
:type="
|
28
|
+
:iconClass="fancyboxOptionsProperties.printButtons.color?.iconClass"
|
29
|
+
:type="fancyboxOptionsProperties.printButtons.color?.iconType"
|
31
30
|
/>
|
32
31
|
<!-- end CmdIcon -->
|
33
32
|
</a>
|
34
|
-
<a v-if="showPrintButtons &&
|
33
|
+
<a v-if="showPrintButtons && fancyboxOptionsProperties.printButtons?.grayscale"
|
35
34
|
href="#"
|
36
35
|
class="button print-grayscale"
|
37
|
-
:title="
|
36
|
+
:title="fancyboxOptionsProperties.printButtons.grayscale?.tooltip"
|
38
37
|
@click.prevent="printInGrayscale = true">
|
39
38
|
<!-- begin CmdIcon -->
|
40
39
|
<CmdIcon
|
41
|
-
:iconClass="
|
42
|
-
:type="
|
40
|
+
:iconClass="fancyboxOptionsProperties.printButtons.grayscale?.iconClass"
|
41
|
+
:type="fancyboxOptionsProperties.printButtons.grayscale?.iconType"
|
43
42
|
/>
|
44
43
|
<!-- end CmdIcon -->
|
45
44
|
</a>
|
46
45
|
<!-- end print buttons -->
|
47
46
|
|
48
47
|
<!-- begin close-icon -->
|
49
|
-
<a v-if="
|
48
|
+
<a v-if="fancyboxOptionsProperties.closeIcon"
|
50
49
|
href="#"
|
51
50
|
class="button"
|
52
51
|
id="close-dialog"
|
53
|
-
:title="
|
52
|
+
:title="fancyboxOptionsProperties.closeIcon.tooltip"
|
54
53
|
ref="close-dialog"
|
55
54
|
@click.prevent="close">
|
56
55
|
<!-- begin CmdIcon -->
|
57
56
|
<CmdIcon
|
58
|
-
:iconClass="
|
59
|
-
:type="
|
57
|
+
:iconClass="fancyboxOptionsProperties.closeIcon.iconClass"
|
58
|
+
:type="fancyboxOptionsProperties.closeIcon.iconType"
|
60
59
|
/>
|
61
60
|
<!-- end CmdIcon -->
|
62
61
|
</a>
|
@@ -94,34 +93,34 @@
|
|
94
93
|
</div>
|
95
94
|
</div>
|
96
95
|
|
97
|
-
<footer v-if="showSubmitButtons &&
|
96
|
+
<footer v-if="showSubmitButtons && fancyboxOptionsProperties.submitButtons" class="flex-container no-flex">
|
98
97
|
<!-- begin cancel-button -->
|
99
98
|
<button
|
100
|
-
v-if="
|
99
|
+
v-if="fancyboxOptionsProperties.submitButtons?.cancel"
|
101
100
|
@click="cancel"
|
102
|
-
:title="
|
101
|
+
:title="fancyboxOptionsProperties.submitButtons.cancel?.tooltip">
|
103
102
|
<CmdIcon
|
104
|
-
v-if="
|
105
|
-
:iconClass="
|
106
|
-
:type="
|
103
|
+
v-if="fancyboxOptionsProperties.submitButtons.cancel?.iconClass"
|
104
|
+
:iconClass="fancyboxOptionsProperties.submitButtons.cancel?.iconClass"
|
105
|
+
:type="fancyboxOptionsProperties.submitButtons.cancel?.iconType"
|
107
106
|
/>
|
108
107
|
<span
|
109
|
-
v-if="
|
108
|
+
v-if="fancyboxOptionsProperties.submitButtons.cancel?.buttonText">{{ fancyboxOptionsProperties.submitButtons.cancel?.buttonText }}</span>
|
110
109
|
</button>
|
111
110
|
<!-- end cancel-button -->
|
112
111
|
|
113
112
|
<!-- begin confirm-button -->
|
114
113
|
<button
|
115
|
-
v-if="
|
114
|
+
v-if="fancyboxOptionsProperties.submitButtons?.confirm"
|
116
115
|
@click="confirm"
|
117
|
-
:title="
|
116
|
+
:title="fancyboxOptionsProperties.submitButtons.cancel?.tooltip">
|
118
117
|
<CmdIcon
|
119
|
-
v-if="
|
120
|
-
:iconClass="
|
121
|
-
:type="
|
118
|
+
v-if="fancyboxOptionsProperties.submitButtons.confirm?.iconClass"
|
119
|
+
:iconClass="fancyboxOptionsProperties.submitButtons.confirm?.iconClass"
|
120
|
+
:type="fancyboxOptionsProperties.submitButtons.confirm?.iconType"
|
122
121
|
/>
|
123
122
|
<span
|
124
|
-
v-if="
|
123
|
+
v-if="fancyboxOptionsProperties.submitButtons.confirm?.buttonText">{{ fancyboxOptionsProperties.submitButtons.confirm?.buttonText }}</span>
|
125
124
|
</button>
|
126
125
|
<!-- end confirm-button -->
|
127
126
|
</footer>
|
@@ -141,9 +140,6 @@
|
|
141
140
|
<script>
|
142
141
|
import {defineComponent, createApp} from "vue"
|
143
142
|
|
144
|
-
// import mixins
|
145
|
-
import Identifier from "../mixins/Identifier"
|
146
|
-
|
147
143
|
const openFancyBox = (config) => {
|
148
144
|
const node = document.createElement("div");
|
149
145
|
document.querySelector("body").appendChild(node);
|
@@ -156,9 +152,6 @@ const openFancyBox = (config) => {
|
|
156
152
|
|
157
153
|
const FancyBox = defineComponent({
|
158
154
|
name: "CmdFancyBox",
|
159
|
-
mixins: [
|
160
|
-
Identifier
|
161
|
-
],
|
162
155
|
emits: ['cancel', 'confirm'],
|
163
156
|
data() {
|
164
157
|
return {
|
@@ -206,42 +199,7 @@ const FancyBox = defineComponent({
|
|
206
199
|
*/
|
207
200
|
fancyboxOptions: {
|
208
201
|
type: Object,
|
209
|
-
|
210
|
-
return {
|
211
|
-
closeIcon: {
|
212
|
-
iconClass: "icon-cancel",
|
213
|
-
iconType: "auto",
|
214
|
-
tooltip: "Close"
|
215
|
-
},
|
216
|
-
printButtons: {
|
217
|
-
color: {
|
218
|
-
iconClass: "icon-print",
|
219
|
-
iconType: "auto",
|
220
|
-
tooltip: "print in color"
|
221
|
-
},
|
222
|
-
grayscale: {
|
223
|
-
iconClass: "icon-print",
|
224
|
-
iconType: "auto",
|
225
|
-
tooltip: "print in grayscale"
|
226
|
-
}
|
227
|
-
},
|
228
|
-
submitButtons: {
|
229
|
-
cancel: {
|
230
|
-
iconClass: "icon-cancel",
|
231
|
-
iconType: "auto",
|
232
|
-
tooltip: "Cancel",
|
233
|
-
buttonText: "Cancel"
|
234
|
-
},
|
235
|
-
confirm: {
|
236
|
-
iconClass: "icon-check",
|
237
|
-
iconType: "auto",
|
238
|
-
buttonText: "Confirm",
|
239
|
-
tooltip: "Confirm",
|
240
|
-
buttonType: "primary"
|
241
|
-
}
|
242
|
-
}
|
243
|
-
}
|
244
|
-
}
|
202
|
+
required: false
|
245
203
|
},
|
246
204
|
/**
|
247
205
|
* allow closing fancybox by escape-key
|
@@ -333,6 +291,47 @@ const FancyBox = defineComponent({
|
|
333
291
|
}
|
334
292
|
},
|
335
293
|
computed: {
|
294
|
+
fancyboxOptionsProperties() {
|
295
|
+
return {
|
296
|
+
closeIcon: {
|
297
|
+
iconClass: "icon-cancel",
|
298
|
+
iconType: "auto",
|
299
|
+
tooltip: "Close",
|
300
|
+
...this.fancyboxOptions?.closeIcon
|
301
|
+
},
|
302
|
+
printButtons: {
|
303
|
+
color: {
|
304
|
+
iconClass: "icon-print",
|
305
|
+
iconType: "auto",
|
306
|
+
tooltip: "print in color",
|
307
|
+
...this.fancyboxOptions?.printButtons?.color
|
308
|
+
},
|
309
|
+
grayscale: {
|
310
|
+
iconClass: "icon-print",
|
311
|
+
iconType: "auto",
|
312
|
+
tooltip: "print in grayscale",
|
313
|
+
...this.fancyboxOptions?.printButtons?.grayscale
|
314
|
+
}
|
315
|
+
},
|
316
|
+
submitButtons: {
|
317
|
+
cancel: {
|
318
|
+
iconClass: "icon-cancel",
|
319
|
+
iconType: "auto",
|
320
|
+
tooltip: "Cancel",
|
321
|
+
buttonText: "Cancel",
|
322
|
+
...this.fancyboxOptions?.submitButtons?.cancel
|
323
|
+
},
|
324
|
+
confirm: {
|
325
|
+
iconClass: "icon-check",
|
326
|
+
iconType: "auto",
|
327
|
+
buttonText: "Confirm",
|
328
|
+
tooltip: "Confirm",
|
329
|
+
buttonType: "primary",
|
330
|
+
...this.fancyboxOptions?.submitButtons?.confirm
|
331
|
+
}
|
332
|
+
}
|
333
|
+
}
|
334
|
+
},
|
336
335
|
largeGalleryImage() {
|
337
336
|
// change src-key for a single item/image in gallery to fit CmdImage-properties
|
338
337
|
const fancyBoxItem = {...this.fancyBoxGallery[this.index].image}
|
@@ -111,7 +111,8 @@ export default {
|
|
111
111
|
cmdHeadline: this.cmdFancyBox.cmdHeadline,
|
112
112
|
showOverlay: this.cmdFancyBox.showOverlay,
|
113
113
|
showSubmitButtons: this.cmdFancyBox.showSubmitButtons,
|
114
|
-
allowEscapeKey: this.cmdFancyBox.allowEscapeKey
|
114
|
+
allowEscapeKey: this.cmdFancyBox.allowEscapeKey,
|
115
|
+
id: this.cmdFancyBox.id || "print-preview"
|
115
116
|
})
|
116
117
|
}
|
117
118
|
}
|