comand-component-library 3.1.45 → 3.1.48

package/src/components/CmdMainNavigation.vue

@@ -1,54 +1,142 @@
 <template>
     <div
-        :class="['cmd-main-navigation main-navigation-wrapper', {'hide-sub-navigation' : !showSubNavigations, 'open': showOffcanvas, 'persist-on-mobile': persistOnMobile, 'show-content-overlay': showContentOverlay}]">
+        :class="[
+            'cmd-main-navigation main-navigation-wrapper',
+            {
+                'hide-sub-navigation' : !showSubNavigations,
+                'open-off-canvas': showOffcanvas,
+                'persist-on-mobile': persistOnMobile,
+                'show-content-overlay': showContentOverlay
+            }
+        ]">
         <nav>
+            <!-- begin main-level -->
             <ul :class="{'stretch-items' : stretchMainItems}">
                 <li class="close-nav" v-if="showOffcanvas">
                     <a href="#" @click.prevent="showOffcanvas = false">
                         <span v-if="closeOffcanvas.iconClass" :class="closeOffcanvas.iconClass"></span>
-                        <span :class="{'hidden': closeOffcanvas.hideText}">{{ closeOffcanvas.text }}</span>
+                        <span :class="{'hidden': !closeOffcanvas.showText}">{{ closeOffcanvas.text }}</span>
                     </a>
                 </li>
                 <li v-for="(navigationEntry, index) in navigationEntries" :key="index"
                     :class="{'open' : navigationEntry.open}">
-                    <a :href="navigationEntry.href" :target="navigationEntry.target"
-                       @click="clickLink($event, navigationEntry)">
-                        <span :class="navigationEntry.iconClass" v-if="navigationEntry.iconClass"></span>
-                        <span>{{ navigationEntry.name }}</span>
+                    <!-- begin type === href -->
+                    <a
+                       v-if="navigationEntry.type === 'href'"
+                       :href="navigationEntry.path"
+                       :title="navigationEntry.tooltip"
+                       :target="navigationEntry.target"
+                       @click="executeLink($event, navigationEntry)"
+                    >
+                        <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
+                        <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
                         <span v-if="navigationEntry.subentries && navigationEntry.subentries.length > 0"
-                              :class="subentriesIconClass"></span>
+                              :class="subentriesIconClass"
+                        ></span>
                     </a>
+                    <!-- end type === href -->
+
+                    <!-- begin type === router -->
+                    <router-link
+                        v-if="navigationEntry.type === 'router'"
+                        :to="getRoute(navigationEntry)"
+                        :title="navigationEntry.tooltip"
+                        :target="navigationEntry.target"
+                        @click="executeLink($event, navigationEntry)"
+                    >
+                        <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
+                        <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
+                        <span v-if="navigationEntry.subentries && navigationEntry.subentries.length > 0"
+                              :class="subentriesIconClass"></span>
+                    </router-link>
+                    <!-- end type === router -->
+
+                    <!-- begin sub-level 1 -->
                     <ul v-if="navigationEntry.subentries" aria-expanded="true">
                         <li v-for="(navigationSubEntry, subindex) in navigationEntry.subentries" :key="subindex"
                             :class="{'open' : navigationSubEntry.open}">
-                            <a :href="navigationSubEntry.href" :target="navigationSubEntry.target"
-                               @click="clickLink($event, navigationSubEntry)">
-                                <span>{{ navigationSubEntry.name }}</span>
-                                <span :class="subSubentriesIconClass" v-if="navigationSubEntry.subentries"></span>
+                            <!-- begin type === href -->
+                            <a v-if="navigationSubEntry.type === 'href'"
+                               :href="navigationSubEntry.path"
+                               :title="navigationSubEntry.tooltip"
+                               :target="navigationSubEntry.target"
+                               @click="executeLink($event, navigationSubEntry)">
+                                <span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
+                                <span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
+                                <span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
+                                      :class="subentriesIconClass"
+                                ></span>
                             </a>
+                            <!-- end type === href -->
+
+                            <!-- begin type === router -->
+                            <router-link v-if="navigationSubEntry.type === 'router'"
+                                         :to="getRoute(navigationSubEntry)"
+                                         :title="navigationSubEntry.tooltip"
+                                         :target="navigationSubEntry.target"
+                                         @click="executeLink($event, navigationSubEntry)">
+                                <span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
+                                <span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
+                                <span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
+                                      :class="subentriesIconClass"></span>
+                            </router-link>
+                            <!-- end type === router -->
+
+                            <!-- begin sub-level 2 -->
                             <ul v-if="navigationSubEntry.subentries">
                                 <li v-for="(navigationSubSubEntry, subsubindex) in navigationSubEntry.subentries"
                                     :key="subsubindex">
-                                    <a :href="navigationSubSubEntry.href" :target="navigationSubSubEntry.target"
-                                       @click="clickLink($event, navigationSubSubEntry)">
-                                        <span>{{ navigationSubSubEntry.name }}</span>
+                                    <!-- begin type === href -->
+                                    <a v-if="navigationEntry.type === 'href'"
+                                       :href="navigationSubSubEntry.path"
+                                       :title="navigationSubSubEntry.tooltip"
+                                       :target="navigationSubSubEntry.target"
+                                       @click="executeLink($event, navigationSubSubEntry)">
+                                        <span v-if="navigationSubSubEntry.iconClass" :class="navigationSubSubEntry.iconClass"></span>
+                                        <span v-if="navigationSubSubEntry.text">{{ navigationSubSubEntry.text }}</span>
+                                        <span v-if="navigationSubSubEntry.subentries && navigationSubSubEntry.subentries.length > 0"
+                                              :class="subentriesIconClass"
+                                        ></span>
                                     </a>
+                                    <!-- end type === href -->
+
+                                    <!-- begin type === router -->
+                                    <router-link v-if="navigationEntry.type === 'router'"
+                                                 :to="getRoute(navigationSubSubEntry)"
+                                                 :target="navigationSubSubEntry.target"
+                                                 :title="navigationSubSubEntry.tooltip"
+                                                 @click="executeLink($event, navigationSubSubEntry)">
+                                        <span v-if="navigationSubSubEntry.iconClass" :class="navigationSubSubEntry.iconClass"></span>
+                                        <span v-if="navigationSubSubEntry.text">{{ navigationSubSubEntry.text }}</span>
+                                        <span v-if="navigationSubSubEntry.subentries && navigationSubSubEntry.subentries.length > 0"
+                                              :class="subentriesIconClass"></span>
+                                    </router-link>
+                                    <!-- end type === router -->
                                 </li>
                             </ul>
+                            <!-- end sub-level 2 -->
                         </li>
                     </ul>
+                    <!-- begin sub-level 1 -->
                 </li>
             </ul>
+            <!-- end main-level -->
         </nav>
+
+        <!-- begin offCanvasButton -->
         <a href="#" class="button" id="toggle-offcanvas" @click.prevent="showOffcanvas = !showOffcanvas"
            v-if="persistOnMobile === false">
             <span :class="buttonOffcanvas.iconClass"></span>
-            <span :class="{'hidden' : buttonOffcanvas.hideText}">{{ buttonOffcanvas.text }}</span>
+            <span :class="{'hidden' : !buttonOffcanvas.showText}">{{ buttonOffcanvas.text }}</span>
         </a>
+        <!-- end offCanvasButton -->
     </div>
 </template>
 
 <script>
+// import functions
+import {getRoute} from "../utilities.js"
+
 export default {
     name: "CmdMainNavigation",
     data() {
@@ -59,7 +147,7 @@ export default {
     },
     props: {
         /**
-         * toggle if main-entries (on firt-level) should be (horizontally) stretched equally
+         * toggle if main-entries (on first-level) should be (horizontally) stretched equally
          */
         stretchMainItems: {
             type: Boolean,
@@ -67,6 +155,8 @@ export default {
         },
         /**
          * set if navigation should persist on mobile and not be collapsed to off-canvas
+         *
+         * @affectsStyling: true
          */
         persistOnMobile: {
             type: Boolean,
@@ -81,6 +171,8 @@ export default {
         },
         /**
          * link shown inside off-canvas-navigation to close itself
+         *
+         * @requiredForAccessibility: partial
          */
         closeOffcanvas: {
             type: Object,
@@ -88,12 +180,14 @@ export default {
                 return {
                     iconClass: "icon-cancel",
                     text: "Close navigation",
-                    hideText: false
+                    showText: true
                 }
             }
         },
         /**
          * button to open off-canvas-navigation
+         *
+         * @requiredForAccessibility: partial
          */
         buttonOffcanvas: {
             type: Object,
@@ -101,7 +195,7 @@ export default {
                 return {
                     iconClass: "icon-bars",
                     text: "Open navigation",
-                    hideText: true
+                    showText: false
                 }
             }
         },
@@ -110,17 +204,19 @@ export default {
          */
         subentriesIconClass: {
             type: String,
-            default: "icon-single-arrow-down"
+            default: "icon-single-arrow-right"
         },
         /**
          * icon to show if a sub-entry has further sub-entries
          */
         subSubentriesIconClass: {
             type: String,
-            default: "icon-single-arrow-right"
+            default: "icon-single-arrow-down"
         },
         /**
          * toggle if overlay over content should be shown if off-canvas is open
+         *
+         * @affectsStyling: true
          */
         showContentOverlay: {
             type: Boolean,
@@ -128,13 +224,13 @@ export default {
         }
     },
     methods: {
-        clickLink(event, navigationEntry) {
-            if (navigationEntry.target || (navigationEntry.href.length > 1)) {
+        executeLink(event, navigationEntry) {
+            if (navigationEntry.target || (navigationEntry.path.length > 1)) {
                 return true
             }
-            if (navigationEntry.href === '#' || navigationEntry.href === '') {
+            if (navigationEntry.path === '#' || navigationEntry.path === '') {
                 event.preventDefault()
-                this.$emit('click', navigationEntry.href)
+                this.$emit('click', navigationEntry.path)
 
             }
             if (!(navigationEntry.subentries && navigationEntry.subentries.length > 0)) {
@@ -143,6 +239,9 @@ export default {
                 // add entry "open" to navigationEntry-object (will be watched by vue3 automatically)
                 navigationEntry.open = !navigationEntry.open
             }
+        },
+        getRoute(navigationEntry) {
+            return getRoute(navigationEntry)
         }
     }
 }
@@ -214,7 +313,7 @@ export default {
                 width: auto;
             }
 
-            &.open {
+            &.open-off-canvas {
                 nav {
                     left: 0;
                     opacity: 1;
@@ -223,13 +322,27 @@ export default {
                     background: var(--default-background-color);
                     border-right: var(--default-border);
                 }
+
+                &.show-content-overlay {
+                    nav {
+                        &::after {
+                            content: "";
+                            position: fixed;
+                            width: calc(100% - var(--nav-width));
+                            top: 0;
+                            left: var(--nav-width);
+                            height: 100%;
+                            display: block;
+                            background: var(--pure-black-reduced-opacity);
+                        }
+                    }
+                }
             }
 
             nav {
                 --nav-width: 30%;
 
-                position: fixed;
-                top: 0;
+                position: absolute;
                 left: -100%;
                 width: var(--nav-width);
                 height: 100%;
@@ -346,21 +459,6 @@ export default {
                 }
             }
         }
-
-        &.show-content-overlay {
-            nav {
-                &::after {
-                    content: "";
-                    position: fixed;
-                    width: calc(100% - var(--nav-width));
-                    top: 0;
-                    left: var(--nav-width);
-                    height: 100%;
-                    display: block;
-                    background: var(--pure-black-reduced-opacity);
-                }
-            }
-        }
     }
 }
 

package/src/components/CmdMultipleSwitch.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="['label', 'multiple-switch', {disabled: status === 'disabled', error: status === 'error'}]">
-        <span v-if="labelText">{{ labelText }}</span>
+        <span :class="{hidden: !showLegend}">{{ labelText }}</span>
         <span class="flex-container no-gap no-flex">
             <label :class="{disabled: status === 'disabled'}" :for="multipleswitch.id"
                    v-for="(multipleswitch, index) in multipleSwitches" :key="index">
@@ -23,27 +23,58 @@
 export default {
     name: "CmdMultipleSwitch",
     props: {
-        value: { /* required for v-model */
+        /**
+         * value for v-model
+         */
+        value: {
             type: [String, Array],
             required: false,
             default: ""
         },
+        /**
+         * toggle label visibility
+         */
+        showLabel: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * text for label
+         *
+         * @requiredForAccessibility: true
+         */
         labelText: {
             type: String,
             required: false
         },
+        /**
+         * list of switches
+         */
         multipleSwitches: {
             type: Array,
             required: true
         },
+        /**
+         * set type for switches
+         *
+         * @allowedValues: checkbox, radio
+         */
         switchTypes: {
             type: String,
             required: true
         },
+        /**
+         * name-attribute for switches
+         */
         switchNames: {
             type: String,
             required: true
         },
+        /**
+         * status for all switches
+         *
+         * @allowedValues: error, disabled
+         */
         status: {
             type: String,
             required: false

package/src/components/CmdMultistepFormProgressBar.vue

@@ -1,26 +1,70 @@
 <template>
     <ol class="cmd-multistep-form-progress-bar">
         <li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
-            <a :href="step.path" @click.stop.prevent="clickedStep($event, index)">
-                <span class="number" v-if="showStepNumber">{{ index + 1 }}</span>
-                <span v-else :class="step.iconClass"></span>
-                <span>{{ step.name }}</span>
+            <!-- begin type === href -->
+            <a v-if="step.type === 'href'"
+               :href="step.path" @click.stop.prevent="clickedStep($event, index)"
+               :title="step.tooltip"
+            >
+                <span  v-if="showStepNumber" class="number">{{ index + 1 }}</span>
+                <span v-if="step.iconClass" :class="step.iconClass"></span>
+                <span v-if="step.text">{{ step.text }}</span>
                 <span :class="separatorIconClass"></span>
             </a>
+            <!-- end type === href -->
+
+            <!-- begin type === router -->
+            <router-link
+                v-if="step.type === 'router'"
+                :to="getRoute(step)"
+                :title="step.tooltip"
+            >
+                <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
+                <span v-if="step.iconClass" :class="step.iconClass"></span>
+                <span v-if="step.text">{{ step.text }}</span>
+                <span :class="separatorIconClass"></span>
+            </router-link>
+            <!-- end type === router -->
+
+            <!-- begin type === button/submit -->
+            <button
+                v-if="step.type === 'button' || step.type === 'submit'"
+                class="button"
+                :type="step.type"
+                :name="step.name"
+                :title="step.tooltip"
+                :formaction="step.formaction"
+                @click.stop.prevent="clickedStep($event, index)"
+            >
+                <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
+                <span v-if="step.iconClass" :class="step.iconClass"></span>
+                <span v-if="step.text">{{ step.text }}</span>
+                <span :class="separatorIconClass"></span>
+            </button>
+            <!-- end type === button/submit -->
         </li>
     </ol>
 </template>
 
 <script>
+// import functions
+import {getRoute} from "../utilities.js"
+
 export default {
     name: 'CmdMultistepFormProgressBar',
     data() {
         return {
-            activeLink: 0,
-            showStepNumber: true
+            activeLink: 0
         }
     },
     props: {
+        /**
+         * toggle visibility of step-number in front/left of link-icon and -name
+         */
+        showStepNumber: {
+            type: Boolean,
+            default: false
+        },
         /**
          * list of multisteps
          */
@@ -29,17 +73,22 @@ export default {
             required: true
         },
         /**
-         * icon-class for separator shown inbetween multisteps
+         * icon-class for separator shown between multisteps
          */
         separatorIconClass: {
             type: String,
-            required: true
+            default() {
+                return "icon-single-arrow-right"
+            }
         }
     },
     methods: {
         clickedStep(event, index) {
             this.activeLink = index;
             this.$emit('click', {event: event, index: index, stepPath: this.multisteps[index].path})
+        },
+        getRoute(step) {
+            return getRoute(step)
         }
     }
 }
@@ -165,7 +214,9 @@ export default {
 
                     &:hover, &:active, &:focus {
                         span, span[class*="icon"] {
-                            color: var(--primary-color);
+                            &:not(:last-child) {
+                                color: var(--primary-color);
+                            }
                         }
                     }
                 }
@@ -185,7 +236,6 @@ export default {
         li {
             &:not(:last-child) {
                 border-bottom: var(--default-border);
-                border-bottom-width: .2rem;
             }
 
             a {

package/src/components/CmdOpeningHours.vue

@@ -1,41 +1,67 @@
 <template>
     <div class="cmd-opening-hours">
-        <h4 v-if="headline">{{ headline }}</h4>
-        <a v-if="pathToDetails" :href="pathToDetails" :class="{'closed': closed}">{{ textOpenClosed }}</a>
+        <!-- begin cmd-custom-headline -->
+        <CmdCustomHeadline v-if="cmdCustomHeadline" :headline="cmdCustomHeadline" />
+        <!-- end cmd-custom-headline -->
+
+        <!-- begin opening-status with link to detail-page -->
+        <template v-if="link && link?.path && link?.show">
+            <a v-if="link.type === 'href'" :href="link.path" :class="{closed: closed}">{{ textOpenClosed }}</a>
+            <router-link v-if="link.type === 'router'"  :to="link.path" :class="{closed: closed}">{{ textOpenClosed }}</router-link>
+            <button v-if="link.type === 'button'" :class="['button', {closed: closed}]">{{ textOpenClosed }}</button>
+        </template>
+        <!-- end opening-status with link to detail-page -->
+
+        <!-- begin opening-status (without link) -->
         <span v-else :class="{'closed': closed}">{{ textOpenClosed }}</span>
+        <!-- end opening-status (without link) -->
+
+        <!-- begin opening-days and -hours -->
         <dl>
             <template v-for="day in openingHours" :key="day.day">
                 <dt>{{ day.day }}:</dt>
                 <dd>{{ day.fromTime }}&ndash;{{ day.tillTime }}</dd>
             </template>
         </dl>
-        <div>
-            <p v-if="textHolidaysClosed"><strong>{{ textHolidaysClosed }}</strong></p>
+        <!-- end opening-days and -hours -->
+
+        <!-- begin holiday-closes-text and miscellaneous information -->
+        <div v-if="textHolidaysClosed || textMiscInfo">
+            <p v-if="textHolidaysClosed">
+                <strong>{{ textHolidaysClosed }}</strong>
+            </p>
             <p v-if="textMiscInfo">{{ textMiscInfo }}</p>
         </div>
+        <!-- end holiday-closes-text and miscellaneous information -->
     </div>
 </template>
 
 <script>
+// import components
+import CmdCustomHeadline from "./CmdCustomHeadline"
+
 export default {
     name: "CmdOpeningHours",
+    components: {CmdCustomHeadline},
     props: {
         /**
-         * headline above displayed opening hours
+         * properties for CmdCustomHeadline-component
          */
-        headline: {
-            type: String,
+        cmdCustomHeadline: {
+            type: Object,
             required: false
         },
         /**
-         * set a path to a detail page
+         * set a link to a detail page
          */
-        pathToDetails: {
-            type: String,
+        link: {
+            type: Object,
             required: false
         },
         /**
          * toggles if "closed"-text will be shown
+         *
+         * @affectsStyling: true
          */
         closed: {
             type: Boolean,

package/src/components/CmdPager.vue

@@ -1,8 +1,5 @@
 <template>
     <div class="cmd-pager">
-        <p>
-            Content: {{ currentPage }} of {{ numberOfPages }}
-        </p>
         <div class="pager">
             <!-- begin button to previous page -->
             <a class="page-change" :class="{'disabled': currentPage === 1, 'button': showLinksAsButtons}"
@@ -69,7 +66,9 @@ export default {
             default: true
         },
         /**
+         * button to switch to previous page
          *
+         * @requiredForAccessibility: partial
          */
         prevButton: {
             type: Object,
@@ -80,6 +79,11 @@ export default {
                 }
             }
         },
+        /**
+         * button to switch to next page
+         *
+         * @requiredForAccessibility: partial
+         */
         nextButton: {
             type: Object,
             default: function() {
@@ -100,14 +104,12 @@ export default {
             this.currentPage = page
             this.$emit('click', page)
         },
-
         nextPage() {
             if (this.currentPage < this.numberOfPages) {
                 this.showPage(this.currentPage + 1)
             }
 
         },
-
         previousPage() {
             if (this.currentPage > 1) {
                 this.showPage(this.currentPage - 1)