comand-component-library 4.1.7 → 4.1.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. package/dist/comand-component-library.js +906 -901
  2. package/dist/comand-component-library.umd.cjs +26 -26
  3. package/package.json +1 -1
  4. package/src/assets/styles/component-library-global-styles.scss +9 -0
  5. package/src/components/CmdFancyBox.vue +68 -69
  6. package/src/components/CmdPageFooter.vue +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "4.1.7",
3
+ "version": "4.1.8",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "license": "GPL-3.0-only",
package/src/assets/styles/component-library-global-styles.scss 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 {
package/src/components/CmdFancyBox.vue CHANGED
@@ -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="(fancyboxOptions.printButtons?.color || fancyboxOptions.printButtons?.grayscale) || fancyboxOptions.closeIcon"
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 && fancyboxOptions.printButtons?.color"
21
+ <a v-if="showPrintButtons && fancyboxOptionsProperties.printButtons?.color"
23
22
  href="#"
24
23
  class="button print-color"
25
- :title="fancyboxOptions.printButtons.color?.tooltip"
24
+ :title="fancyboxOptionsProperties.printButtons.color?.tooltip"
26
25
  @click.prevent="printInGrayscale = false">
27
26
  <!-- begin CmdIcon -->
28
27
  <CmdIcon
29
- :iconClass="fancyboxOptions.printButtons.color?.iconClass"
30
- :type="fancyboxOptions.printButtons.color?.iconType"
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 && fancyboxOptions.printButtons?.grayscale"
33
+ <a v-if="showPrintButtons && fancyboxOptionsProperties.printButtons?.grayscale"
35
34
  href="#"
36
35
  class="button print-grayscale"
37
- :title="fancyboxOptions.printButtons.grayscale?.tooltip"
36
+ :title="fancyboxOptionsProperties.printButtons.grayscale?.tooltip"
38
37
  @click.prevent="printInGrayscale = true">
39
38
  <!-- begin CmdIcon -->
40
39
  <CmdIcon
41
- :iconClass="fancyboxOptions.printButtons.grayscale?.iconClass"
42
- :type="fancyboxOptions.printButtons.grayscale?.iconType"
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="fancyboxOptions.closeIcon"
48
+ <a v-if="fancyboxOptionsProperties.closeIcon"
50
49
  href="#"
51
50
  class="button"
52
51
  id="close-dialog"
53
- :title="fancyboxOptions.closeIcon.tooltip"
52
+ :title="fancyboxOptionsProperties.closeIcon.tooltip"
54
53
  ref="close-dialog"
55
54
  @click.prevent="close">
56
55
  <!-- begin CmdIcon -->
57
56
  <CmdIcon
58
- :iconClass="fancyboxOptions.closeIcon.iconClass"
59
- :type="fancyboxOptions.closeIcon.iconType"
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 && fancyboxOptions.submitButtons" class="flex-container no-flex">
96
+ <footer v-if="showSubmitButtons && fancyboxOptionsProperties.submitButtons" class="flex-container no-flex">
98
97
  <!-- begin cancel-button -->
99
98
  <button
100
- v-if="fancyboxOptions.submitButtons?.cancel"
99
+ v-if="fancyboxOptionsProperties.submitButtons?.cancel"
101
100
  @click="cancel"
102
- :title="fancyboxOptions.submitButtons.cancel?.tooltip">
101
+ :title="fancyboxOptionsProperties.submitButtons.cancel?.tooltip">
103
102
  <CmdIcon
104
- v-if="fancyboxOptions.submitButtons.cancel?.iconClass"
105
- :iconClass="fancyboxOptions.submitButtons.cancel?.iconClass"
106
- :type="fancyboxOptions.submitButtons.cancel?.iconType"
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="fancyboxOptions.submitButtons.cancel?.buttonText">{{ fancyboxOptions.submitButtons.cancel?.buttonText }}</span>
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="fancyboxOptions.submitButtons?.confirm"
114
+ v-if="fancyboxOptionsProperties.submitButtons?.confirm"
116
115
  @click="confirm"
117
- :title="fancyboxOptions.submitButtons.cancel?.tooltip">
116
+ :title="fancyboxOptionsProperties.submitButtons.cancel?.tooltip">
118
117
  <CmdIcon
119
- v-if="fancyboxOptions.submitButtons.confirm?.iconClass"
120
- :iconClass="fancyboxOptions.submitButtons.confirm?.iconClass"
121
- :type="fancyboxOptions.submitButtons.confirm?.iconType"
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="fancyboxOptions.submitButtons.confirm?.buttonText">{{ fancyboxOptions.submitButtons.confirm?.buttonText }}</span>
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
- default() {
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}
package/src/components/CmdPageFooter.vue CHANGED
@@ -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
  }