comand-component-library 4.0.2 → 4.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. package/README.md +32 -32
  2. package/dist/comand-component-library.js +3315 -1486
  3. package/dist/comand-component-library.umd.cjs +3 -4
  4. package/dist/index.html +16 -16
  5. package/dist/style.css +1 -1
  6. package/dist/styles/demopage-only.css +4 -0
  7. package/dist/styles/templates/casual.css +3 -0
  8. package/package.json +4 -4
  9. package/src/App.vue +2117 -0
  10. package/src/ComponentLibrary.vue +275 -610
  11. package/src/assets/data/fake-select-options.json +3 -2
  12. package/src/assets/data/form-elements.json +1 -1
  13. package/src/assets/styles/{global-styles.scss → component-library-global-styles.scss} +27 -14
  14. package/src/componentSettingsDataAndControls.vue +705 -0
  15. package/src/components/CmdAddressData.vue +1 -2
  16. package/src/components/CmdBox.vue +106 -52
  17. package/src/components/CmdCopyrightInformation.vue +5 -3
  18. package/src/components/CmdFakeSelect.vue +149 -78
  19. package/src/components/CmdFancyBox.vue +2 -2
  20. package/src/components/CmdFormElement.vue +62 -36
  21. package/src/components/CmdGoogleMaps.vue +5 -0
  22. package/src/components/CmdHeadline.vue +13 -5
  23. package/src/components/CmdIcon.vue +6 -2
  24. package/src/components/CmdImage.vue +6 -1
  25. package/src/components/CmdImageGallery.vue +15 -4
  26. package/src/components/CmdInputGroup.vue +87 -35
  27. package/src/components/CmdListOfLinks.vue +20 -7
  28. package/src/components/CmdListOfRequirements.vue +10 -18
  29. package/src/components/CmdLoginForm.vue +14 -2
  30. package/src/components/CmdMainNavigation.vue +5 -1
  31. package/src/components/CmdMultistepFormProgressBar.vue +13 -8
  32. package/src/components/CmdNewsletterSubscription.vue +18 -1
  33. package/src/components/CmdOpeningHoursItem.vue +1 -3
  34. package/src/components/CmdPagination.vue +5 -1
  35. package/src/components/CmdSiteFooter.vue +12 -2
  36. package/src/components/CmdSiteHeader.vue +2 -1
  37. package/src/components/CmdSlideButton.vue +7 -1
  38. package/src/components/CmdSlideshow.vue +33 -5
  39. package/src/components/CmdSocialNetworks.vue +18 -13
  40. package/src/components/CmdSocialNetworksItem.vue +5 -1
  41. package/src/components/CmdSystemMessage.vue +7 -1
  42. package/src/components/CmdTabs.vue +7 -7
  43. package/src/components/CmdTextImageBlock.vue +11 -2
  44. package/src/components/CmdThumbnailScroller.vue +23 -5
  45. package/src/components/CmdToggleDarkMode.vue +2 -2
  46. package/src/components/CmdTooltip.vue +50 -15
  47. package/src/components/CmdTooltipForFormElements.vue +96 -0
  48. package/src/components/CmdUploadForm.vue +29 -24
  49. package/src/components/CmdWidthLimitationWrapper.vue +1 -1
  50. package/src/components/ComponentSettings.vue +1 -1
  51. package/src/components/EditComponentWrapper.vue +1 -1
  52. package/src/main.js +2 -2
  53. package/src/assets/data/accordion.json +0 -45
@@ -0,0 +1,705 @@
1
+ <script>
2
+ import navigationData from "@/assets/data/main-navigation.json"
3
+
4
+ export default {
5
+ data() {
6
+ return {
7
+ cmdAddressDataSettingsData: {
8
+ useSlot: false,
9
+ showLabelIcons: true,
10
+ showLabelTexts: false,
11
+ showIconsOnly: false,
12
+ showLabels: true
13
+ },
14
+ cmdBankAccountDataSettingsData: {
15
+ allowCopyByClick: false,
16
+ additionalInformation: ""
17
+ },
18
+ cmdBreadcrumbsSettingsData: {
19
+ breadcrumbLabel: "You are here",
20
+ breadcrumbSeparator: ">"
21
+ },
22
+ cmdBoxSettingsData: {
23
+ openCollapsedBox: false,
24
+ rowView: false,
25
+ boxType: "content",
26
+ collapsible: false,
27
+ cutoffTextLines: 0,
28
+ useDefaultPadding: true,
29
+ repeatHeadlineInBoxBody: false,
30
+ fadeLastLine: true,
31
+ useTransition: false,
32
+ boxBodyClass: "",
33
+ profileType: "business",
34
+ textBody: "",
35
+ stretchHorizontally: true,
36
+ stretchVertically: true,
37
+ product: {
38
+ "name": "Product name 1",
39
+ "image": {
40
+ "src": "media/images/demo-images/medium/landscape-01.jpg",
41
+ "alt": "Alternative text"
42
+ },
43
+ "articleNumber": "AB12345",
44
+ "price": 123.45,
45
+ "description": "This is a short description text for the product",
46
+ "new": false,
47
+ "discount": ""
48
+ },
49
+ user: {
50
+ "name": "User name 1",
51
+ "age": 35,
52
+ "gender": "m",
53
+ "imageSrc": "/media/images/user-images/fake-user-1.jpg",
54
+ "profession": "User profession",
55
+ "position": "User position",
56
+ "description": "User profile with image",
57
+ "tag": [
58
+ "Tagname",
59
+ "Long tag",
60
+ "One more tag"
61
+ ],
62
+ "links": [
63
+ {
64
+ "path": "mailto:",
65
+ "iconClass": "icon-mail",
66
+ "tooltip": "Send mail"
67
+ }
68
+ ]
69
+ }
70
+ },
71
+ cmdBoxSettingsControls: {
72
+ "boxType": [
73
+ {
74
+ text: "Content (default)",
75
+ value: "content"
76
+ },
77
+ {
78
+ text: "Product",
79
+ value: "product"
80
+ },
81
+ {
82
+ text: "User",
83
+ value: "user"
84
+ }
85
+ ]
86
+ },
87
+ cmdFakeSelectSettingsData: {
88
+ showSelectAllOptions: true,
89
+ status: "",
90
+ labelText: "Fake selectbox:",
91
+ showLabel: true,
92
+ textPleaseSelect: "Please select\u2026",
93
+ title: "Title for FakeSelect",
94
+ defaultOptionName: "Select an option:",
95
+ showStatusIcon: true,
96
+ id: "cmd-fake-select-configurable",
97
+ useCustomTooltip: true,
98
+ type: "default",
99
+ required: true
100
+ },
101
+ cmdFakeSelectSettingsControls: {
102
+ type: [
103
+ {
104
+ text: "Default (default)",
105
+ value: "default"
106
+ },
107
+ {
108
+ text: "Color",
109
+ value: "color"
110
+ },
111
+ {
112
+ text: "Country",
113
+ value: "country"
114
+ },
115
+ {
116
+ text: "Content",
117
+ value: "content"
118
+ },
119
+ {
120
+ text: "Checkbox options",
121
+ value: "checkboxOptions"
122
+ }
123
+ ],
124
+ optionLinkType: [
125
+ {
126
+ text: "Href (default)",
127
+ value: "href"
128
+ },
129
+ {
130
+ text: "Router",
131
+ value: "router"
132
+ }
133
+ ],
134
+ status: [
135
+ {
136
+ text: "None (default)",
137
+ value: ""
138
+ },
139
+ {
140
+ text: "Error",
141
+ value: "error"
142
+ },
143
+ {
144
+ text: "Warning",
145
+ value: "warning"
146
+ },
147
+ {
148
+ text: "Success",
149
+ value: "success"
150
+ },
151
+ {
152
+ text: "Info",
153
+ value: "info"
154
+ }
155
+ ]
156
+ },
157
+ cmdFormElementSettingsData: {
158
+ element: "input",
159
+ type: "text",
160
+ labelText: "Inputfield:",
161
+ placeholder: "Placeholder text",
162
+ required: true,
163
+ showRequirements: true,
164
+ tooltipText: "This is a tooltip",
165
+ status: "",
166
+ showSearchButton: true,
167
+ selectOptions: [
168
+ {
169
+ text: "Please select...",
170
+ value: ""
171
+ },
172
+ {
173
+ text: "Option 1",
174
+ value: "option1"
175
+ },
176
+ {
177
+ text: "Option 2",
178
+ value: "option2"
179
+ },
180
+ {
181
+ text: "Option 3",
182
+ value: "option3"
183
+ }
184
+ ]
185
+ },
186
+ cmdFormElementSettingsControls: {
187
+ element: [
188
+ {
189
+ text: "Input (default)",
190
+ value: "input"
191
+ },
192
+ {
193
+ text: "Select",
194
+ value: "select"
195
+ },
196
+ {
197
+ text: "Textarea",
198
+ value: "textarea"
199
+ }
200
+ ],
201
+ type: [
202
+ {
203
+ text: "Text (default)",
204
+ value: "text"
205
+ },
206
+ {
207
+ text: "Number",
208
+ value: "number"
209
+ },
210
+ {
211
+ text: "Email",
212
+ value: "email"
213
+ },
214
+ {
215
+ text: "Telephone",
216
+ value: "tel"
217
+ },
218
+ {
219
+ text: "Date",
220
+ value: "date"
221
+ },
222
+ {
223
+ text: "Search",
224
+ value: "search"
225
+ },
226
+ {
227
+ text: "Password",
228
+ value: "password"
229
+ },
230
+ {
231
+ text: "Checkbox",
232
+ value: "checkbox"
233
+ },
234
+ {
235
+ text: "Radio(button)",
236
+ value: "radio"
237
+ }
238
+ ],
239
+ status: [
240
+ {
241
+ text: "None (default)",
242
+ value: ""
243
+ },
244
+ {
245
+ text: "Error",
246
+ value: "error"
247
+ },
248
+ {
249
+ text: "Warning",
250
+ value: "warning"
251
+ },
252
+ {
253
+ text: "Success",
254
+ value: "success"
255
+ },
256
+ {
257
+ text: "Info",
258
+ value: "info"
259
+ }
260
+ ]
261
+ },
262
+ cmdHeadlineSettingsData: {
263
+ preHeadlineText: "Pre-headline text",
264
+ headlineText: "Headline text",
265
+ headlineLevel: 1,
266
+ textAlign: "left"
267
+ },
268
+ cmdHeadlineSettingsControls: {
269
+ "textAlign": [
270
+ {
271
+ text: "Left (default)",
272
+ value: "left"
273
+ },
274
+ {
275
+ text: "Center",
276
+ value: "center"
277
+ },
278
+ {
279
+ text: "Right",
280
+ value: "right"
281
+ }
282
+ ]
283
+ },
284
+ cmdInputGroupSettingsData: {
285
+ required: false,
286
+ inputTypes: "radio",
287
+ status: "",
288
+ showStatusIcon: true,
289
+ replaceInputType: false,
290
+ toggleSwitch: false,
291
+ useSlot: false,
292
+ multipleSwitch: false,
293
+ showLabel: true,
294
+ labelText: "Group label for input-group:",
295
+ labelInline: false,
296
+ stretchHorizontally: false,
297
+ disabled: false
298
+ },
299
+ cmdInputGroupSettingsControls: {
300
+ "inputTypes": [
301
+ {
302
+ text: "Checkbox (default)",
303
+ value: "checkbox"
304
+ },
305
+ {
306
+ text: "Radio",
307
+ value: "radio"
308
+ }
309
+ ]
310
+ },
311
+ cmdImageSettingsData: {},
312
+ cmdImageGallerySettingsData: {
313
+ useFancyboxForLargeImages: true,
314
+ figcaptionPosition: "top"
315
+ },
316
+ cmdImageGallerySettingsControls: {
317
+ figcaptionPosition: [
318
+ {
319
+ text: "Top",
320
+ value: "top"
321
+ },
322
+ {
323
+ text: "Bottom (default)",
324
+ value: "bottom"
325
+ }
326
+ ]
327
+ },
328
+ cmdListOfLinksSettingsData: {
329
+ useGap: true,
330
+ styleAsBox: false,
331
+ largeIcons: false,
332
+ sectionAnchors: false,
333
+ orientation: "vertical",
334
+ align: "left"
335
+ },
336
+ cmdListOfLinksSettingsControls: {
337
+ align: [
338
+ {
339
+ text: "Left (default)",
340
+ value: "left"
341
+ },
342
+ {
343
+ text: "Center",
344
+ value: "center"
345
+ },
346
+ {
347
+ text: "Right",
348
+ value: "right"
349
+ },
350
+
351
+ ],
352
+ orientation: [
353
+ {
354
+ text: "Vertical (default)",
355
+ value: "vertical"
356
+ },
357
+ {
358
+ text: "Horizontal",
359
+ value: "horizontal"
360
+ }
361
+ ]
362
+ },
363
+ cmdLoginFormSettingsData: {
364
+ textLegendLoginForm: "Login form",
365
+ showLegend: true,
366
+ textLegendForgotLoginForm: "Forgot login form"
367
+ },
368
+ cmdMainNavigationSettingsData: {
369
+ offcanvasPosition: "right",
370
+ stretchMainItems: false,
371
+ persistOnMobile: false,
372
+ subentriesIconClass: "icon-single-arrow-down",
373
+ subSubentriesIconClass: "icon-single-arrow-right"
374
+ },
375
+ cmdMainNavigationSettingsControls: {
376
+ offcanvasPosition: [
377
+ {
378
+ text: "Right (default)",
379
+ value: "right"
380
+ },
381
+ {
382
+ text: "Left",
383
+ value: "left"
384
+ }
385
+ ]
386
+ },
387
+ cmdMultistepFormProgressBarSettingsData: {
388
+ showStepNumber: false,
389
+ separatorIconClass: "icon-single-arrow-right"
390
+ },
391
+ cmdMultistepFormProgressBarSettingsControls: {
392
+ separatorIconClass: [
393
+ {
394
+ text: "icon-single-arrow-right (default)",
395
+ value: "icon-single-arrow-right"
396
+ },
397
+ {
398
+ text: "icon-double-arrow-right",
399
+ value: "icon-double-arrow-right"
400
+ }
401
+ ]
402
+ },
403
+ cmdNewsletterSubscriptionSettingsData: {
404
+ buttonType: "submit",
405
+ showLegend: true,
406
+ textLegend: "Stay up-to-date",
407
+ cmdInputGroup: {
408
+ inputElements: [
409
+ {
410
+ labelText: "Subscribe",
411
+ id: "radio-subscribe",
412
+ name: "cmd-subscribe-group",
413
+ value: "subscribe"
414
+ },
415
+ {
416
+ labelText: "Unsubscribe",
417
+ id: "radio-unsubscribe",
418
+ name: "cmd-subscribe-group",
419
+ value: "unsubscribe"
420
+ }
421
+ ],
422
+ labelText: "Choose options:",
423
+ showLabel: false
424
+ }
425
+ },
426
+ cmdNewsletterSubscriptionSettingsControls: {
427
+ buttonType: [
428
+ {
429
+ text: "Button (default)",
430
+ value: "button"
431
+ },
432
+ {
433
+ text: "Submit",
434
+ value: "submit"
435
+ }
436
+ ]
437
+ },
438
+ cmdOpeningHoursSettingsData: {
439
+ closed: true,
440
+ separator: "-",
441
+ textOpen: "Open right now!",
442
+ textClosed: "Closed right now!",
443
+ textHolidays: "",
444
+ textMiscInfo: "",
445
+ abbreviationTextAm: "am",
446
+ abbreviationTextPm: "pm",
447
+ componentHandlesClosedStatus: false,
448
+ cmdHeadline: {
449
+ headlineText: "Opening Hours",
450
+ headlineLevel: 3
451
+ }
452
+ },
453
+ cmdPaginationSettingsData: {
454
+ pages: 3,
455
+ itemsPerPage: 1,
456
+ showPageNumbers: true,
457
+ linkType: "button"
458
+ },
459
+ cmdPaginationSettingsControls: {
460
+ linkType: [
461
+ {
462
+ text: "Href (default)",
463
+ value: "href"
464
+ },
465
+ {
466
+ text: "Button",
467
+ value: "button"
468
+ }
469
+ ]
470
+ },
471
+ cmdSiteHeaderSettingsData: {
472
+ sticky: false,
473
+ navigationInline: false,
474
+ useGrid: true,
475
+ cmdMainNavigation: {...navigationData}
476
+ },
477
+ cmdSiteHeaderSettingsControls: {
478
+ "cmdMainNavigation.offcanvasPosition": [
479
+ {
480
+ text: "Right (default)",
481
+ value: "right"
482
+ },
483
+ {
484
+ text: "Left",
485
+ value: "left"
486
+ }
487
+ ],
488
+ },
489
+ cmdSiteSearchSettingsData: {
490
+ useFilters: true,
491
+ textLegend: "Search",
492
+ showLegend: true
493
+ },
494
+ cmdSlideshowSettingsData: {
495
+ useSlot: false,
496
+ autoplay: true,
497
+ autoplayInterval: 5000,
498
+ showQuickLinkIcons: true,
499
+ showCounter: true
500
+ },
501
+ cmdSocialNetworksSettingsData: {
502
+ align: "left",
503
+ useGap: true,
504
+ stretchButtons: false,
505
+ userMustAcceptDataPrivacy: true,
506
+ tooltipAcceptDataPrivacy: "You must accept data privacy conditions!",
507
+ buttonTextAlign: "left"
508
+ },
509
+ cmdSocialNetworksSettingsControls: {
510
+ align: [
511
+ {
512
+ text: "Left (default)",
513
+ value: "left"
514
+ },
515
+ {
516
+ text: "Center",
517
+ value: "center"
518
+ },
519
+ {
520
+ text: "Right",
521
+ value: "right"
522
+ }
523
+ ],
524
+ buttonTextAlign: [
525
+ {
526
+ text: "Left (default)",
527
+ value: "left"
528
+ },
529
+ {
530
+ text: "Right",
531
+ value: "right"
532
+ }
533
+ ]
534
+ },
535
+ cmdSystemMessageSettingsData: {
536
+ validationStatus: "error",
537
+ fullWidth: true,
538
+ systemMessage: "This is an error message!",
539
+ messageHeadlineLevel: 4
540
+ },
541
+ cmdSystemMessageSettingsControls: {
542
+ validationStatus: [
543
+ {
544
+ text: "Error",
545
+ value: "error"
546
+ },
547
+ {
548
+ text: "Warning",
549
+ value: "warning"
550
+ },
551
+ {
552
+ text: "Success",
553
+ value: "success"
554
+ },
555
+ {
556
+ text: "Info",
557
+ value: "info"
558
+ }
559
+ ]
560
+ },
561
+ cmdTableSettingsData: {
562
+ collapsible: false,
563
+ fullWidthOnDefault: false,
564
+ userCanToggleWidth: true,
565
+ showSlideButtons: true
566
+ },
567
+ cmdTabsSettingsData: {
568
+ stretchTabs: false,
569
+ useSlot: false,
570
+ activeTab: 0
571
+ },
572
+ cmdTextImageBlockSettingsData: {
573
+ htmlContent: "Text given as html-content",
574
+ paragraphTextAlign: "left",
575
+ headlinePosition: "aboveImage"
576
+ },
577
+ cmdTextImageBlockSettingsControls: {
578
+ paragraphTextAlign: [
579
+ {
580
+ text: "Left (default)",
581
+ value: "left"
582
+ },
583
+ {
584
+ text: "Center",
585
+ value: "center"
586
+ },
587
+ {
588
+ text: "Right",
589
+ value: "right"
590
+ }
591
+ ],
592
+ headlinePosition: [
593
+ {
594
+ text: "Above Image (default)",
595
+ value: "aboveImage"
596
+ },
597
+ {
598
+ text: "Below Image",
599
+ value: "belowImage"
600
+ }
601
+ ]
602
+ },
603
+ cmdThumbnailScrollerSettingsData: {
604
+ orientation: "horizontal",
605
+ fullWidth: false,
606
+ largeIcons: false,
607
+ contentType: "image",
608
+ executeOnClick: "fancybox",
609
+ allowOpenFancyBox: true,
610
+ activeItemIndex: 0,
611
+ useGalleryScroller: false
612
+ },
613
+ cmdThumbnailScrollerSettingsControls: {
614
+ orientation: [
615
+ {
616
+ text: "Horizontal (default)",
617
+ value: "horizontal"
618
+ },
619
+ {
620
+ text: "Vertical",
621
+ value: "vertical"
622
+ }
623
+ ],
624
+ contentType: [
625
+ {
626
+ text: "Image (default)",
627
+ value: "image"
628
+ },
629
+ {
630
+ text: "Text",
631
+ value: "text"
632
+ }
633
+ ],
634
+ executeOnClick: [
635
+ {
636
+ text: "Fancybox (default)",
637
+ value: "fancybox"
638
+ },
639
+ {
640
+ text: "URL",
641
+ value: "url"
642
+ },
643
+ {
644
+ text: "Emit",
645
+ value: "emit"
646
+ }
647
+ ]
648
+ },
649
+ cmdToggleDarkModeSettingsData: {
650
+ styledAsButton: false,
651
+ showLabel: true,
652
+ useStyledLayout: false,
653
+ labelTextDarkMode: "Dark-mode enabled",
654
+ labelTextLightMode: "Light-mode enabled"
655
+ },
656
+ cmdTooltipSettingsData: {
657
+ tooltipText: "This is a tooltip!",
658
+ delayToShowTooltip: 0,
659
+ status: "",
660
+ toggleVisibilityByClick: false
661
+ },
662
+ cmdTooltipSettingsControls: {
663
+ status: [
664
+ {
665
+ text: "None (default)",
666
+ value: ""
667
+ },
668
+ {
669
+ text: "Error",
670
+ value: "error"
671
+ },
672
+ {
673
+ text: "Warning",
674
+ value: "warning"
675
+ },
676
+ {
677
+ text: "Success",
678
+ value: "success"
679
+ },
680
+ {
681
+ text: "Info",
682
+ value: "info"
683
+ }
684
+ ]
685
+ },
686
+ cmdUploadFormSettingsData: {
687
+ showTotalUpload: true,
688
+ componentHandlesUpload: true,
689
+ commentRequired: true,
690
+ commentStatusMessage: "",
691
+ enableDragAndDrop: false,
692
+ enableComment: true,
693
+ presetComment: "",
694
+ maxTotalUploadSize: 5242880,
695
+ maxFileUploadSize: 10485760,
696
+ allowMultipleFileUploads: false,
697
+ advancedMode: true,
698
+ showLegend: true,
699
+ textLegend: "Advanced upload form",
700
+ allowedFileExtensions: ["jpg", "eps"]
701
+ }
702
+ }
703
+ }
704
+ }
705
+ </script>
@@ -83,8 +83,7 @@
83
83
  <a v-if="entry.linkGoogleMaps" :href="locateAddress(entry)" target="google-maps" :title="entry.tooltip">
84
84
  <template v-if="showIconsOnly">
85
85
  <!-- begin CmdIcon -->
86
- <CmdIcon v-if="entry.iconClass" :iconClass="entry.iconClass"
87
- :type="entry.iconType"/>
86
+ <CmdIcon v-if="entry.iconClass" :iconClass="entry.iconClass" :type="entry.iconType"/>
88
87
  <!-- end CmdIcon -->
89
88
  </template>
90
89
  <template v-else>