comand-component-library 3.1.45 → 3.1.48

package/src/components/CmdProgressBar.vue

@@ -1,8 +1,8 @@
 <template>
     <label class="cmd-progressbar" :for="id">
-        <span v-if="labelText">{{ labelText }}</span>
+        <span :class="{hidden: !showLabel}">{{ labelText }}</span>
         <span class="progressbar">
-            <span>{{ loadingStatus }}%</span><!-- do not place inside progress-tag (will not be displayed then) -->
+            <span v-if="showLoadingStatus">{{ loadingStatus }}%</span><!-- do not place inside progress-tag (will not be displayed then) -->
             <progress v-bind="$attrs" :id="id" :value="loadingStatus"></progress>
         </span>
     </label>
@@ -19,13 +19,31 @@ export default {
     props: {
         /**
          * label-text for progress-bar
+         *
+         * @requiredForAccessibility: true
          */
         labelText: {
             type: String,
             required: false
         },
+        /**
+         * toggle visibility for label-text
+         */
+        showLabel: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * toggle visibility for loading-status
+         */
+        showLoadingStatus: {
+            type: Boolean,
+            default: true
+        },
         /**
          * id for progress-bar
+         *
+         * @requiredForAccessibility: true
          */
         id: {
             type: String,
@@ -49,6 +67,5 @@ export default {
         }
     }
 }
-
 /* end cmd-progressbar ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdShareButtons.vue

@@ -1,23 +1,36 @@
 <template>
-    <div :class="['cmd-share-buttons',{'stretch': stretchButtons}]">
-        <a class="button" v-for="(shareButton, index) in shareButtons" :key="index" :id="shareButton.id"
-           :href="shareButton.path" :title="shareButton.tooltip">
+    <div :class="['cmd-share-buttons',{'stretch': stretchButtons, 'align-right': align === 'right'}]">
+        <a v-for="shareButton in validShareButtons"
+           :key="shareButton.path" class="button"
+           :id="shareButton.id"
+           :href="getUrl(shareButton)"
+           target="_blank"
+           :title="shareButton.tooltip">
             <span v-if="shareButton.iconClass" :class="shareButton.iconClass"></span>
-            <span v-if="shareButton.linkName">{{ shareButton.linkName }}</span>
+            <span v-if="shareButton.linkText">{{ shareButton.linkText }}</span>
         </a>
     </div>
 </template>
 
 <script>
 export default {
-    name: "CmdContentFooter",
+    name: "CmdShareButtons",
     props: {
+        /**
+         * set horizontal alignment
+         *
+         * @allowedValues: left, right
+         */
+        align: {
+            type: String,
+            required: false
+        },
         /**
          * stretch-buttons to share horizontal space vertically
          */
         stretchButtons: {
             type: Boolean,
-            default: true
+            default: false
         },
         /**
          * list of share-buttons (i.e. facebook, twitter etc.)
@@ -25,21 +38,63 @@ export default {
         shareButtons: {
             type: Array,
             required: true
+        },
+        /**
+         * page to share (appended to social-bookmark-url)
+         *
+         * appendPage-property must be activated
+         */
+        page: {
+            type: String,
+            required: false
+        },
+        /**
+         * activate if page to share is not given by json-data)
+         */
+        appendPage: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        validShareButtons() {
+            return this.shareButtons.filter(item => item.path)
+        }
+    },
+    methods: {
+        getUrl(shareButton) {
+            // if path is not given completely by json-data
+            if(this.appendPage) {
+                // if page to share is given by property
+                if (this.page) {
+                    return shareButton.path + encodeURIComponent(this.page)
+                }
+
+                // if current page should be append to url
+                return shareButton.path + encodeURIComponent(location.href)
+            }
+
+            // if path is given completely by json-data
+            return shareButton.path
         }
     }
 }
 </script>
 
 <style lang="scss">
-@import '../assets/styles/variables';
 /* begin cmd-share-buttons -------------------------------------------------------------------------------------------- */
+@import '../assets/styles/variables';
+
 .cmd-share-buttons {
     display: flex;
-    margin: calc(var(--default-margin) * 2) 0 0 0;
+    gap: var(--default-gap);
+
+    &.align-right {
+        justify-content: flex-end;
+    }
 
     .button {
         padding: calc(var(--default-padding) / 2) var(--default-padding);
-        margin-left: var(--default-margin);
 
         &:first-of-type {
             margin: 0;

package/src/components/CmdSiteHeader.vue

@@ -1,16 +1,27 @@
 <template>
     <div :class="['cmd-site-header', { sticky: sticky }]" role="banner">
+        <!-- begin slot for elements above header -->
         <slot name="top-header"></slot>
-        <header :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
+        <!-- end for elements above header -->
+
+        <!-- begin header-wrapper with slots for logo and other header elements -->
+        <header v-if="$slots.logo || $slots.header" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
             <slot name="logo"></slot>
             <slot name="header"></slot>
         </header>
-        <CmdMainNavigation :navigationEntries="mainNavigationEntries" v-if="mainNavigationEntries"
-                           :closeOffcanvas="closeOffcanvas"/>
+        <!-- end header-wrapper with slots for logo and other header elements -->
+
+        <!-- begin CmdMainNavigation -->
+        <CmdMainNavigation
+            v-if="cmdMainNavigation?.navigationEntries?.length"
+            v-bind="cmdMainNavigation"
+            :closeOffcanvas="closeOffcanvas"/>
+        <!-- end CmdMainNavigation -->
     </div>
 </template>
 
 <script>
+// import components
 import CmdMainNavigation from "./CmdMainNavigation"
 
 export default {
@@ -20,14 +31,21 @@ export default {
     },
     props: {
         /**
-         * list of main-navigation-entries (incl. sub-entries) given to inner navigationcomponent
+         * properties for CmdMainNavigation-component
          */
-        mainNavigationEntries: {
-            type: Array,
+        cmdMainNavigation: {
+            type: Object,
             required: true
         },
         /**
-         * activated sticky-header (stays on top if page is scrolled
+         * use only if default-button of inner navigation-component should not be used
+         */
+        closeOffcanvas: {
+            type: Object,
+            required: false
+        },
+        /**
+         * activated sticky-header (stays on top if page is scrolled)
          */
         sticky: {
             type: Boolean,
@@ -35,17 +53,12 @@ export default {
         },
         /**
          * use a grid for positioning of inner-elements (else a flex-container will be used)
+         *
+         * @affectsStyling: true
          */
         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

@@ -14,7 +14,8 @@ export default {
         /**
          * set slide-button-type
          *
-         * possible default-values: next, prev, up, down
+         * @allowedValues: next, prev, up, down
+         * @affectsStyling: true
          */
         slideButtonType: {
           type: String,
@@ -22,6 +23,8 @@ export default {
         },
         /**
          * default slide-buttons
+         *
+         * @requiredForAccessibility: partial
          */
         slideButtons: {
             type: Object,
@@ -52,7 +55,7 @@ export default {
             if(this.slideButtons[this.slideButtonType]) {
                 return this.slideButtons[this.slideButtonType]
             }
-            console.log("Property 'slideButtonType' does not match slideButtons-key")
+            console.warn("Property 'slideButtonType' does not match slideButtons-key")
             return {}
         }
     }

package/src/components/CmdSlideshow.vue

@@ -1,7 +1,14 @@
 <template>
     <div class="cmd-slideshow" :class="{'full-width': fullWidth}">
         <div class="inner-slideshow-wrapper" @mouseenter="pause = true" @mouseleave="pause = false">
-            <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev" />
+            <!-- begin CmdSlideButton -->
+            <CmdSlideButton
+                @click.prevent="showPrevItem"
+                slideButtonType="prev"
+            />
+            <!-- end CmdSlideButton -->
+
+            <!-- begin area to slide -->
             <transition name="fade">
                 <a v-if="currentItem.href" :href="currentItem.href" :key="index" :title="currentItem.title">
                     <figure v-if="currentItem && !useSlot" class="slideshow-item">
@@ -22,7 +29,14 @@
                     <slot :name="'item' + currentSlotItem"></slot>
                 </div>
             </transition>
-            <CmdSlideButton @click.prevent="showNextItem" />
+            <!-- end area to slide -->
+
+            <!-- begin CmdSlideButton -->
+            <CmdSlideButton
+                @click.prevent="showNextItem"
+            />
+            <!-- end CmdSlideButton -->
+
             <ol v-if="showQuickLinkIcons">
                 <li v-for="(item, i) in slideshowItems" :key="i" :class="{active: i === index }">
                     <a href="#" @click.prevent="index = i" :aria-label="index"></a>
@@ -34,7 +48,8 @@
 </template>
 
 <script>
-import CmdSlideButton from "./CmdSlideButton.vue"
+// import components
+import CmdSlideButton from "./CmdSlideButton"
 
 const NOT_YET_PRELOADED_IMAGE = image => !image.loaded
 const NOT_YET_PRELOADED_IMAGES = item => item.images && item.images.find(NOT_YET_PRELOADED_IMAGE)
@@ -91,16 +106,18 @@ export default {
             default: false
         },
         /**
-         * list of images to display (use slot smust be set to false)
+         * list of images to display (use slot must be set to false)
          */
         slideshowItems: {
             type: Array,
             required: true
         },
         /**
-         * slide-buttons (next/previous) to switch images
+         * properties for CmdSlideButtons-component
+         *
+         * @requiredForAccessibility: partial
          */
-        slideButtons: {
+        cmdSlideButtons: {
             type: Object,
             default() {
                 return {
@@ -127,7 +144,6 @@ export default {
             this.hnd = null;
         }
     },
-
     methods: {
         showPrevItem() {
             if (this.useSlot) {

package/src/components/CmdSwitchButton.vue

@@ -33,8 +33,7 @@ export default {
         /**
          * set id for input
          *
-         * required for accessibility
-         *
+         * @requiredForAccessibility: true
          */
         id: {
             type: String,
@@ -43,7 +42,7 @@ export default {
         /**
          * set name for input
          *
-         * require for radio-buttons (and form-submit by browser)
+         * required for radio-buttons (and form-submit by browser)
          */
         name: {
             type: String,
@@ -67,6 +66,8 @@ export default {
          * text for label
          *
          * required if onLabel/offLabel are not set
+         *
+         * @requiredForAccessibility: true
          */
         labelText: {
             type: String,
@@ -76,6 +77,8 @@ export default {
          * text for on-label
          *
          * set to activate switch-label (=label is placed on toggle-switch (not behind))
+         *
+         * @requiredForAccessibility: true
          */
         onLabel: {
             type: String,
@@ -85,6 +88,8 @@ export default {
          * text for off-label
          *
          * set to activate switch-label (=label is placed on toggle-switch (not behind))
+         *
+         * @requiredForAccessibility: true
          */
         offLabel: {
             type: String,
@@ -92,6 +97,8 @@ export default {
         },
         /**
          * set to true, if checkbox/radio-buttons should have green/checked and red/unchecked color-coding
+         *
+         * @affectsStyling: true
          */
         colored: {
             type: Boolean,

package/src/components/CmdSwitchLanguage.vue

@@ -2,15 +2,23 @@
     <div class="cmd-switch-language">
         <ul>
             <li v-for="(language, index) in languages" :key="index">
-                <router-link v-if="language.link.type === 'router'" :class="['flag', language.iso2]"
+                <!-- begin link-type 'href' -->
+                <a v-if="language.link.type === 'href'" :href="language.link.path"
+                   :class="['flag', language.iso2, {'active': language.active}]"
+                   :title="language.tooltip"
+                   @click="$emit('click', { originalEvent:  $event, language} )">
+                    <img :src="getFlagURL(language.iso2)" :alt="language.name" />
+                </a>
+                <!-- end link-type 'href -->
+
+                <!-- begin link-type 'router' -->
+                <router-link v-else
+                             :class="['flag', language.iso2]"
                              :to="getRoute(language)" :title="language.tooltip"
-                             @click="$emit('click', $event, language)">
-                    <img :src="getFlagURL(language.iso2)" :alt="language.name"/>
+                             @click="$emit('click', { originalEvent:  $event, language})">
+                    <img :src="getFlagURL(language.iso2)" :alt="language.name" />
                 </router-link>
-                <a v-else :href="language.link.path" :class="['flag', language.iso2, {'active': language.active}]"
-                   :title="language.tooltip" @click="$emit('click', $event, language)">
-                    <img :src="getFlagURL(language.iso2)" :alt="language.name"/>
-                </a>
+                <!-- end link-type 'router' -->
             </li>
         </ul>
     </div>
@@ -23,6 +31,9 @@ export default {
     name: "CmdSwitchLanguage",
     emits: ["click"],
     props: {
+        /**
+         * list of languages
+         */
         languages: {
             type: Array,
             required: true
@@ -32,9 +43,6 @@ export default {
         getRoute(language) {
             return getRoute(language)
         },
-        switchLanguage(iso2) {
-            alert("Switch to " + iso2)
-        },
         getFlagURL(isoCode) {
             return require("../assets/images/flags/flag-" + isoCode + ".svg")
         }

package/src/components/CmdSystemMessage.vue

@@ -2,21 +2,23 @@
     <transition name="fade">
         <div
             v-if="showSystemMessage"
-            :class="['cmd-system-message', 'system-message', { 'full-width': fullWidth }, status]"
-            role="alert"
+            :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
+            :role="status === 'error' ? 'alert' : 'dialog'"
         >
             <a
-                v-if="iconClose.iconClass"
+                v-if="iconClose.show && iconClose.iconClass"
                 :class="iconClose.iconClass"
                 href="#"
                 @click.prevent="showSystemMessage = false"
                 :title="iconClose.tooltip"
             ></a>
             <h6>
-                <span v-if="iconMessage && iconMessage.iconClass && iconMessage.show" :class="iconMessage.iconClass"></span>
-                <strong v-if="message">{{ message }}</strong>
+                <span v-if="iconMessage && iconMessage.iconClass" :class="iconMessage.iconClass"></span>
+                <strong v-if="systemMessage">{{ systemMessage }}</strong>
             </h6>
+            <!-- begin slot-content -->
             <slot></slot>
+            <!-- end slot-content -->
         </div>
     </transition>
 </template>
@@ -31,49 +33,53 @@ export default {
     },
     props: {
         /**
-         * status of message
+         * validation-status for the message-box
          *
-         * values: error (red), warning (yellow), success (green), info (blue)
+         * @allowedValues: error, warning, success, info
+         * @affectsStyling: true
          */
-        status: {
+        validationStatus: {
             type: String,
             required: true
         },
         /**
-         * activate to stretch message-box as wide as parent container (else message-box is as wide as message)
+         * activate to stretch message-box as wide as parent container (else message-box is as wide as message (+padding))
          */
         fullWidth: {
             type: Boolean,
             default: true
         },
         /**
-         * set icon-class for message (will be displayed left from
+         * set icon-class for message (will be displayed left from message)
          */
         iconMessage: {
             type: Object,
             default: function() {
                 return {
-                    iconClass: "icon-warning",
-                    show: true
+                    show: true,
+                    iconClass: "icon-warning"
                 }
             }
         },
         /**
          * the system-message-text
          */
-        message: {
+        systemMessage: {
             type: String,
             required: false
         },
         /**
          * icon to close system-message
+         *
+         * @requiredForAccessibility: partial
          */
         iconClose: {
             type: Object,
             default: function () {
                 return {
+                    show: true,
                     iconClass: "icon-cancel",
-                    tooltip: "Close"
+                    tooltip: "Close this message"
                 }
             }
         }
@@ -90,11 +96,9 @@ export default {
 /* begin cmd-system-message ---------------------------------------------------------------------------------------- */
 .cmd-system-message {
     margin: var(--default-margin) 0;
+    align-items: center;
 
     h6 {
-        display: table;
-        margin: 0 auto var(--default-margin) auto;
-
         strong {
             margin-left: calc(var(--default-margin) / 2);
         }
@@ -104,6 +108,15 @@ export default {
         margin-bottom: 0;
     }
 
+    ul {
+        display: flex;
+        flex-direction: column;
+
+        li {
+            margin-left: 0;
+        }
+    }
+
     > a[class*="icon-"]:not(.button) {
         font-size: 1rem;
         color: var(--pure-white) !important;

package/src/components/CmdTable.vue

@@ -15,13 +15,13 @@
             </a>
         </div>
         <table :class="{'full-width': fullWidth}">
-            <caption :class="{hidden: tableData.caption.hide}">{{ tableData.caption.text }}</caption>
+            <caption :class="{hidden: !tableData.caption.show}">{{ tableData.caption.text }}</caption>
             <thead>
-            <tr>
-                <th v-for="(tablehead, indexHead) in tableData.thead" :key="indexHead">
-                    {{ tablehead }}
-                </th>
-            </tr>
+                <tr>
+                    <th v-for="(tablehead, indexHead) in tableData.thead" :key="indexHead">
+                        {{ tablehead }}
+                    </th>
+                </tr>
             </thead>
             <transition name="fade">
                 <tbody v-show="showTableData" aria-expanded="true">
@@ -47,7 +47,7 @@
 
 <script>
 export default {
-    name: "CmdTableWrapper",
+    name: "CmdTable",
     data() {
         return {
             showTableData: true,
@@ -85,6 +85,8 @@ export default {
         },
         /**
          * icon to expand table (vertically)
+         *
+         * @requiredForAccessibility: partial
          */
         iconExpand: {
             type: Object,
@@ -97,6 +99,8 @@ export default {
         },
         /**
          * icon to collapse table (vertically)
+         *
+         * @requiredForAccessibility: partial
          */
         iconCollapse: {
             type: Object,
@@ -109,6 +113,8 @@ export default {
         },
         /**
          * icon to shrink table (horizontally)
+         *
+         * @requiredForAccessibility: partial
          */
         iconShrink: {
             type: Object,
@@ -121,6 +127,8 @@ export default {
         },
         /**
          * icon to stretch table (horizontally)
+         *
+         * @requiredForAccessibility: partial
          */
         iconStretch: {
             type: Object,