comand-component-library 3.1.22 → 3.1.26

package/src/components/CmdFancyBox.vue

@@ -4,7 +4,7 @@
          aria-labelledby="fancybox">
       <div class="popup" :class="{'image' : fancyBoxImageUrl || fancyBoxGallery }">
         <div class="button-wrapper no-flex"
-             v-if="((fancyboxOptions.printButtons && (fancyboxOptions.printButtons.color || fancyboxOptions.printButtons.grayscale))) || fancyboxOptions.closeIcon">
+             v-if="(fancyboxOptions.printButtons && (fancyboxOptions.printButtons.color || fancyboxOptions.printButtons.grayscale)) || fancyboxOptions.closeIcon">
           <a href="#"
              v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.color"
              :class="['button', fancyboxOptions.printButtons.color.iconClass]"
@@ -69,10 +69,16 @@
     const FancyBox = defineComponent({
         name: "CmdFancyBox",
         props: {
+            /**
+             * set if content should be loaded by url
+             */
             url: {
                 type: String,
                 required: false
             },
+            /**
+             * options to show at top (closeIcon, printButtons)
+             */
             fancyboxOptions: {
                 type: Object,
                 default() {
@@ -94,34 +100,58 @@
                     }
                 }
             },
+            /**
+             * allow closing fancybox by escape-key
+             */
             allowEscapeKey: {
                 type: Boolean,
                 default: true
             },
+            /**
+             * the content shown in the main area
+             */
             content: {
                 type: String,
                 required: false
             },
+            /**
+             *
+             */
             elements: {
                 type: Array,
                 required: false
             },
+            /**
+             * use if a gallery of images should be opened (and navigated) inside fancybox
+             */
             fancyBoxGallery: {
                 type: Array,
                 required: false
             },
+            /**
+             * if gallery is used, you can set default index
+             */
             defaultGalleryIndex: {
                 type: Number,
                 required: false
             },
+            /**
+             * show/hide entire fancybox
+             */
             show: {
                 type: Boolean,
                 default: false
             },
+            /**
+             * show/hide overlay (around fancybox, above website)
+             */
             showOverlay: {
                 type: Boolean,
                 default: true
             },
+            /**
+             * show slide-buttons (left/previous and right/next)
+             */
             slideButtons: {
                 type: Object,
                 default() {

package/src/components/CmdFooterNavigation.vue

@@ -24,10 +24,16 @@ import {openFancyBox} from "./CmdFancyBox.vue"
 export default {
     name: "CmdFooterNavigation",
     props: {
+        /**
+         * headlien above links
+         */
         headline: {
             type: String,
             required: false
         },
+        /**
+         * list of links shown vertically
+         */
         footerNavigation: {
             type: Array,
             required: false

package/src/components/CmdGoogleMaps.vue

@@ -8,6 +8,9 @@
 export default {
     name: "CmdGoogleMaps",
     props: {
+        /**
+         * address to show show on Google Maps™
+         */
         addressData: {
             type: Object,
             required: true

package/src/components/CmdImageGallery.vue

@@ -15,11 +15,12 @@ import {openFancyBox} from "./CmdFancyBox"
 
 export default {
     name: "CmdImageGallery",
-
     props: {
+        /**
+         * list of images (incl. captions)
+         */
         images: Array
     },
-
     methods: {
         showFancyBox(index) {
             openFancyBox({fancyBoxGallery: this.images, defaultGalleryIndex: index})

package/src/components/CmdImageZoom.vue

@@ -17,10 +17,16 @@
 export default {
     name: "CmdImageZoom",
     props: {
+        /**
+         * url for small images
+         */
         smallImageUrl: {
             type: String,
             required: true
         },
+        /**
+         * url for large image
+         */
         largeImageUrl: {
             type: String,
             required: true

package/src/components/CmdMainHeadline.vue

@@ -13,14 +13,23 @@
 export default {
     name: "CmdMainHeadline",
     props: {
+        /**
+         * main/h1-headline
+         */
         mainHeadline: {
             type: String,
             required: true
         },
+        /**
+         * small pre-headline above main-headline
+         */
         preHeadline: {
             type: String,
             required: false
         },
+        /**
+         * icon-class for icon shown left/before headline
+         */
         iconClass: {
             type: String,
             required: false

package/src/components/CmdMainNavigation.vue

@@ -58,18 +58,30 @@ export default {
         }
     },
     props: {
+        /**
+         * toggle if main-entries (on firt-level) should be (horizontally) stretched equally
+         */
         stretchMainItems: {
             type: Boolean,
             default: false
         },
+        /**
+         * set if navigation should persist on mobile and not be collapsed to off-canvas
+         */
         persistOnMobile: {
             type: Boolean,
             default: false
         },
+        /**
+         * list of all navigation-entries (incl. sub-entries)
+         */
         navigationEntries: {
             type: Array,
             required: true
         },
+        /**
+         * link shown inside off-canvas-navigation to close itself
+         */
         closeOffcanvas: {
             type: Object,
             default: function () {
@@ -80,6 +92,9 @@ export default {
                 }
             }
         },
+        /**
+         * button to open off-canvas-navigation
+         */
         buttonOffcanvas: {
             type: Object,
             default: function () {
@@ -90,14 +105,23 @@ export default {
                 }
             }
         },
+        /**
+         * icon to show if an navigation-entry has sub-entries
+         */
         subentriesIconClass: {
             type: String,
             default: "icon-single-arrow-down"
         },
+        /**
+         * icon to show if a sub-entry has further sub-entries
+         */
         subSubentriesIconClass: {
             type: String,
             default: "icon-single-arrow-right"
         },
+        /**
+         * toggle if overlay over content should be shown if off-canvas is open
+         */
         showContentOverlay: {
             type: Boolean,
             default: true

package/src/components/CmdMultipleSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['label', 'multiple-switch', htmlClass, {disabled: status === 'disabled', error: status === 'error'}]">
+    <div :class="['label', 'multiple-switch', {disabled: status === 'disabled', error: status === 'error'}]">
         <span v-if="labelText">{{ labelText }}</span>
         <span class="flex-container no-gap no-flex">
             <label :class="{disabled: status === 'disabled'}" :for="multipleswitch.id"
@@ -28,10 +28,6 @@ export default {
             required: false,
             default: ""
         },
-        htmlClass: {
-            type: String,
-            required: false
-        },
         labelText: {
             type: String,
             required: false

package/src/components/CmdMultistepFormProgressBar.vue

@@ -21,10 +21,16 @@ export default {
         }
     },
     props: {
+        /**
+         * list of multisteps
+         */
         multisteps: {
             type: Array,
             required: true
         },
+        /**
+         * icon-class for separator shown inbetween multisteps
+         */
         separatorIconClass: {
             type: String,
             required: true

package/src/components/CmdOpeningHours.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-opening-hours">
         <h4 v-if="headline">{{ headline }}</h4>
-        <a v-if="path" :href="path" :class="{'closed': closed}">{{ textOpenClosed }}</a>
+        <a v-if="pathToDetails" :href="pathToDetails" :class="{'closed': closed}">{{ textOpenClosed }}</a>
         <span v-else :class="{'closed': closed}">{{ textOpenClosed }}</span>
         <dl>
             <template v-for="day in openingHours" :key="day.day">
@@ -20,30 +20,51 @@
 export default {
     name: "CmdOpeningHours",
     props: {
+        /**
+         * headline above displayed opening hours
+         */
         headline: {
             type: String,
             required: false
         },
-        path: {
+        /**
+         * set a path to a detail page
+         */
+        pathToDetails: {
             type: String,
             required: false
         },
+        /**
+         * toggles if "closed"-text will be shown
+         */
         closed: {
             type: Boolean,
             default: false
         },
+        /**
+         * text for open/closed-information
+         */
         textOpenClosed: {
             type: String,
             required: true
         },
+        /**
+         * list of opening-hours
+         */
         openingHours: {
             type: Array,
             required: true
         },
+        /**
+         * text to show if holidays closed (shown below opening-hours)
+         */
         textHolidaysClosed: {
             type: String,
             required: false
         },
+        /**
+         * additional/miscellaneous text (shown below holiday-closed-text/opening hours)
+         */
         textMiscInfo: {
             type: String,
             required: false

package/src/components/CmdPager.vue

@@ -47,25 +47,47 @@ export default {
         }
     },
     props: {
+        /**
+         * number of items displayed
+         */
         items: {
             type: Number,
             required: true
         },
+        /**
+         * number of items shown per page
+         */
         itemsPerPage: {
             type: Number,
             required: true
         },
+        /**
+         * show links as buttons
+         */
         showLinksAsButtons: {
             type: Boolean,
             default: true
         },
+        /**
+         *
+         */
         prevButton: {
             type: Object,
-            required: false
+            default: function() {
+                return {
+                    iconClass: "icon-single-arrow-left",
+                    buttonText: "prev"
+                }
+            }
         },
         nextButton: {
             type: Object,
-            required: false
+            default: function() {
+                return {
+                    iconClass: "icon-single-arrow-right",
+                    buttonText: "next"
+                }
+            }
         }
     },
     computed: {

package/src/components/CmdProgressBar.vue

@@ -1,10 +1,10 @@
 <template>
     <label class="cmd-progressbar" :for="id">
-        <span>{{ labelText }}</span>
+        <span v-if="labelText">{{ labelText }}</span>
         <span class="progressbar">
-        <span>{{ loadingStatus }}%</span><!-- do not place inside progress-tag (will not be displayed then) -->
-        <progress v-bind="$attrs" :id="id" :value="loadingStatus"></progress>
-    </span>
+            <span>{{ loadingStatus }}%</span><!-- do not place inside progress-tag (will not be displayed then) -->
+            <progress v-bind="$attrs" :id="id" :value="loadingStatus"></progress>
+        </span>
     </label>
 </template>
 
@@ -17,10 +17,16 @@ export default {
         }
     },
     props: {
+        /**
+         * label-text for progress-bar
+         */
         labelText: {
             type: String,
             required: false
         },
+        /**
+         * id for progress-bar
+         */
         id: {
             type: String,
             required: true

package/src/components/CmdShareButtons.vue

@@ -12,10 +12,16 @@
 export default {
     name: "CmdContentFooter",
     props: {
+        /**
+         * stretch-buttons to share horizontal space vertically
+         */
         stretchButtons: {
             type: Boolean,
             default: true
         },
+        /**
+         * list of share-buttons (i.e. facebook, twitter etc.)
+         */
         shareButtons: {
             type: Array,
             required: true

package/src/components/CmdSiteHeader.vue

@@ -19,34 +19,30 @@ export default {
         CmdMainNavigation
     },
     props: {
-        showHeaderNavBar: {
-            type: Boolean,
-            default: true
-        },
+        /**
+         * list of main-navigation-entries (incl. sub-entries) given to inner navigationcomponent
+         */
         mainNavigationEntries: {
             type: Array,
             required: true
         },
-        headerWidthLimitation: {
-            type: Boolean,
-            default: false
-        },
-        linkLogo: {
-            type: Object,
-            required: false
-        },
-        logo: {
-            type: Object,
-            required: false
-        },
+        /**
+         * activated sticky-header (stays on top if page is scrolled
+         */
         sticky: {
             type: Boolean,
             default: true
         },
+        /**
+         * use a grid for positioning of inner-elements (else a flex-container will be used)
+         */
         useGrid: {
             type: Boolean,
             default: true
         },
+        /**
+         * use only if default-button of inner navigation-component should not be used
+         */
         closeOffcanvas: {
             type: Object,
             required: false

package/src/components/CmdSlideButton.vue

@@ -12,6 +12,9 @@
 export default {
     name: "CmdSlideButton",
     props: {
+        /**
+         * set slide-button to "next" (= right), else it will be displayed as previous (=left) button
+         */
         slideButtonType: {
             type: Object,
             required: true

package/src/components/CmdSlideshow.vue

@@ -10,10 +10,8 @@
                     </figure>
                 </a>
                 <figure v-else-if="!currentItem.href && currentItem && !useSlot" :key="index" class="slideshow-item">
-                    <template>
                         <img :src="currentItem.imgPath" :alt="currentItem.alt"/>
                         <figcaption>{{ currentItem.figcaption }}</figcaption>
-                    </template>
                 </figure>
                 <div
                     class="image-wrapper"
@@ -57,30 +55,51 @@ export default {
         CmdSlideButton
     },
     props: {
+        /**
+         * use slot for images
+         */
         useSlot: {
             type: Boolean,
             default: false
         },
+        /**
+         * activate if images should switch automatically
+         */
         autoplay: {
             type: Boolean,
             default: false
         },
+        /**
+         * set milliseconds to switch images (if autoplay is activated only)
+         */
+        autoplayInterval: {
+            type: Number,
+            default: 5000
+        },
+        /**
+         * shows buttons/icons to let user quick jump to each image
+         */
         showQuickLinkIcons: {
             type: Boolean,
             default: true
         },
+        /**
+         * activate if current number of each image should be displayed
+         */
         showCounter: {
             type: Boolean,
             default: false
         },
-        autoplayInterval: {
-            type: Number,
-            default: 5000
-        },
+        /**
+         * list of images to display (use slot smust be set to false)
+         */
         slideshowItems: {
             type: Array,
             required: true
         },
+        /**
+         * slide-buttons (next/previous) to switch images
+         */
         slideButtons: {
             type: Object,
             default() {

package/src/components/CmdUploadForm.vue

@@ -34,14 +34,14 @@
         </span>
             </li>
         </ul>
-        <CmdSystemMessage v-if="!listOfFiles.length" messageStatus="warning" :fullWidth="true"
-                          systemMessage="No files selected for upload!">
+        <CmdSystemMessage v-if="!listOfFiles.length" status="warning" :fullWidth="true"
+                          message="No files selected for upload!">
         </CmdSystemMessage>
-        <CmdSystemMessage v-else :messageStatus="messageStatusUploadSize()" :fullWidth="true">
+        <CmdSystemMessage v-else :status="messageStatusUploadSize()" :fullWidth="true">
             <p>Current upload size is {{ formatSize(uploadSize) }} (of max. {{ formatSize(maxUploadSize) }}).</p>
         </CmdSystemMessage>
-        <CmdSystemMessage v-if="uploadSize > maxUploadSize" messageStatus="error" :fullWidth="true"
-                          systemMessage="Total file size to large!">
+        <CmdSystemMessage v-if="uploadSize > maxUploadSize" status="error" :fullWidth="true"
+                          message="Total file size to large!">
         </CmdSystemMessage>
         <CmdFormElement
             v-if="enableComment"

package/src/index.js

@@ -1,3 +1,5 @@
+import "clickout-event"
+
 export { default as CmdAccordion } from '@/components/CmdAccordion'
 export { default as CmdAddressData } from '@/components/CmdAddressData'
 export { default as CmdBackToTopButton } from '@/components/CmdBackToTopButton'
@@ -31,4 +33,4 @@ export { default as CmdTabs } from '@/components/CmdTabs'
 export { default as CmdThumbnailScroller } from '@/components/CmdThumbnailScroller'
 export { default as CmdTooltip } from '@/components/CmdTooltip'
 export { default as CmdTopHeaderNavigation } from '@/components/CmdTopHeaderNavigation'
-export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimitationWrapper'
+export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimitationWrapper'

package/src/main.js

@@ -6,7 +6,7 @@ import 'comand-frontend-framework/src/assets/css/framework-iconfont.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import vClickOutside from 'v-click-outside'
+import "clickout-event"
 
 /* import additional iconfont containing company-logos */
 import '@/assets/styles/logos-iconfont.css'
@@ -34,4 +34,4 @@ const router = createRouter({
   ]
 })
 
-createApp(App).use(router).use(vClickOutside).mount('#app')
+createApp(App).use(router).mount('#app')