comand-component-library 3.1.24 → 3.1.28

package/src/components/CmdFormElement.vue

@@ -1,18 +1,19 @@
 <template>
     <label v-if="(element === 'input' || element === 'select' || element === 'textarea')"
            :for="id"
-           :class="['cmd-form-element', status, {'inline' : displayinline, 'checked': isChecked}]"
+           :class="['cmd-form-element', status, {'inline' : displayLabelInline, 'checked': isChecked}]"
            ref="label">
         <!-- begin label (+ required) -->
         <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
-              :class="{'hidden': hideLabelText}">
-      <span>{{ labelText }}</span><sup v-if="$attrs.required && !hideLabel">*</sup>
-    </span>
+              :class="{'hidden': hideLabel}">
+          <span>{{ labelText }}</span>
+          <sup v-if="$attrs.required">*</sup>
+        </span>
         <!-- end label (+ required) -->
 
         <!-- begin icon -->
-        <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && iconClass" class="place-inside"
-              :class="[status, iconClass]"></span>
+        <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && innerIconClass" class="place-inside"
+              :class="[status, innerIconClass]"></span>
         <!-- end icon -->
 
         <!-- begin inputfield -->
@@ -69,7 +70,7 @@
                 @change="$emit('input', $event.target.value)"
         >
             <option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
-                    :selected="option.selected">{{ option.text }}
+                    :selected="option.value === value">{{ option.text }}
             </option>
         </select>
         <!-- end selectbox -->
@@ -127,11 +128,18 @@ export default {
         }
     },
     props: {
+        /**
+         * set value for v-model
+         */
         value: {
             type: [String, Boolean, Array, Number],
-            required: false,
             default: ""
         },
+        /**
+         * set type of native form-element
+         *
+         * values: input, select, textarea, button
+         */
         element: {
             type: String,
             validator(value) {
@@ -142,67 +150,114 @@ export default {
             },
             required: true
         },
+        /**
+         * hide label (and asterisk if mandatory)
+         *
+         * label may not be removed, because it is required for accessibility
+         */
         hideLabel: {
             type: Boolean,
             default: false
         },
+        /**
+         * text for label
+         */
         labelText: {
             type: String,
             required: false
         },
-        hideLabelText: {
-            type: Boolean,
-            default: false
-        },
+        /**
+         * allow checkbox/radio-buttons to get value from outside
+         */
         inputValue: {
-            /* allow checkbox/radiobuttons to get value from outside */
             type: String,
             required: false
         },
-        /* for replacing native checkboxes/radiobuttons by custom ones */
+        /**
+         * for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)
+         */
         replaceInputType: {
             type: Boolean,
             default: false
         },
+        /**
+         * set an optional class on native form-element (use native class="" on component ot set class on outer-component-element)
+         *
+         * may not be named as 'class' because it is a reserved keyword in JavaScript
+         */
         htmlClass: {
-            /* may not be named as 'class' because it is a reserved keyword in JavaScript */
             type: String,
             required: false
         },
+        /**
+         * if for native form-element
+         */
         id: {
             type: String,
             required: false
         },
+        /**
+         * set if a native datalist should be used
+         */
         datalist: {
             type: Object,
             required: false
         },
+        /**
+         * list of options for selectbox
+         *
+         * element-property must be 'select'
+         */
         selectOptions: {
             type: Array,
             required: false
         },
+        /**
+         * text for native button
+         */
         buttonText: {
             type: String,
             required: false
         },
+        /**
+         * set icon for native button
+         */
         buttonIcon: {
             type: Object,
             default() {
                 return {}
             }
         },
+        /**
+         * set text for tooltip
+         */
         tooltipText: {
             type: String,
             required: false
         },
-        iconClass: {
+        /**
+         * set class for inner icon (icon placed 'inside' input/ left of input-text)
+         *
+         * element-property must be 'input' and type-property may not be checkbox or radio
+         */
+        innerIconClass: {
             type: String,
             required: false
         },
-        displayinline: {
+        /**
+         * activate if label-text should be place inline/left of form-element (and not above)
+         *
+         * type-property may not be checkbox or radio
+         */
+         displayLabelInline: {
             type: Boolean,
             required: false
         },
+        /**
+         * set status for label and form-element
+         *
+         * values: error (red-styling), success (green-styling)
+         */
         status: {
             type: String,
             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

@@ -55,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() {