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.
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
  }