comand-component-library 3.1.45 → 3.1.48

package/src/components/CmdBoxWrapper.vue

@@ -0,0 +1,206 @@
+<template>
+    <div class="cmd-box-wrapper">
+        <div v-if="allowUserToToggleView || allowTogglingCollapsingBoxes" class="flex-container no-flex toggle-view">
+            <a v-if="allowTogglingCollapsingBoxes" href="#" @click.prevent="toggleCollapsingBoxes" :title="collapsingBoxesOpen ? collapseBoxesIcon.tooltip : expandBoxesIcon.tooltip">
+                <span :class="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass"></span>
+            </a>
+            <a v-if="allowUserToToggleView" href="#" @click.prevent="oneBoxPerRow = !oneBoxPerRow" :title="oneBoxPerRow ? iconRowView.tooltip : iconGridView.tooltip">
+                <span :class="oneBoxPerRow ? iconGridView.iconClass : iconRowView.iconClass"></span>
+            </a>
+        </div>
+        <div :class="[useFlexbox ? 'flex-container' : 'grid-container-create-columns', {'one-box-per-row': oneBoxPerRow}]">
+            <slot :collapsingBoxesOpen="collapsingBoxesOpen" :boxToggled="boxToggled" :currentOpenBox="currentOpenBox"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CmdBoxWrapper",
+    data() {
+        return {
+            oneBoxPerRow: this.useRowViewAsDefault,
+            collapsingBoxesOpen: true,
+            currentOpenBox: 0
+        }
+    },
+    props: {
+        /**
+         * activate if boxes should be arranged vertically (each box is a row) by default
+         */
+        useRowViewAsDefault: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * activate if user can toggle grid- and row-view by himself
+         */
+        allowUserToToggleView: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * activate if user can toggle grid- and row-view by himself
+         */
+        allowTogglingCollapsingBoxes: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * icon for collapsed box
+         */
+        collapseBoxesIcon: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-double-arrow-down",
+                    tooltip: "Collapse all boxes"
+                }
+            }
+        },
+        /**
+         * icon for expanded box
+         */
+        expandBoxesIcon: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-double-arrow-up",
+                    tooltip: "Expand all boxes"
+                }
+            }
+        },
+        /**
+         * activate if you want to use a flex-container instead of a css-grid-container
+         */
+        useFlexbox: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * define the number of boxes per row (if view is grid-view)
+         */
+        boxesPerRow: {
+            type: [Number, Array],
+            default: 4
+        },
+        /**
+         * define icon for grid-view
+         */
+        iconGridView: {
+            type: Object,
+            default
+                () {
+                return {
+                    iconClass: 'icon-blocks-small',
+                    tooltip: 'Toggle to row view'
+                }
+            }
+        }
+        ,
+        /**
+         * define icon for row-view
+         */
+        iconRowView: {
+            type: Object,
+            default () {
+                return {
+                    iconClass: 'icon-rows',
+                    tooltip: 'Toggle to grid view'
+                }
+            }
+        }
+    },
+    computed: {
+        // if a custom grid is used, the number of boxes per row (in grid-view) can be customized
+        boxesPerRowLarge() {
+            return this.boxesPerRowResponsive(0, 4)
+        }
+        ,
+        boxesPerRowMedium() {
+            return this.boxesPerRowResponsive(1, 3)
+        }
+        ,
+        boxesPerRowSmall() {
+            return this.boxesPerRowResponsive(2, 1)
+        }
+    }
+    ,
+    methods: {
+        boxesPerRowResponsive(index, defaultBoxesPerRow) {
+            // show only one box per row in row-view
+            if (this.allowUserToToggleView && this.oneBoxPerRow) {
+                return 1
+            }
+
+            // if a boxes per row is defined
+            if (typeof this.boxesPerRow === 'number') {
+                if (index === 0) {
+                    return this.boxesPerRow
+                }
+                return Math.min(this.boxesPerRow, defaultBoxesPerRow)
+            }
+
+            if (this.boxesPerRow.length > index) {
+                return this.boxesPerRow[index]
+            }
+
+            return defaultBoxesPerRow
+        },
+        toggleCollapsingBoxes() {
+            this.collapsingBoxesOpen = !this.collapsingBoxesOpen
+        },
+        boxToggled(boxIndex, open) {
+            this.currentOpenBox = open ? boxIndex : 0
+        }
+    },
+    watch: {
+        useRowViewAsDefault() {
+            this.oneBoxPerRow = this.useRowViewAsDefault
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+/* begin cmd-box-wrapper ---------------------------------------------------------------------------------------- */
+@import '../assets/styles/variables';
+
+.cmd-box-wrapper {
+    > .toggle-view {
+        justify-content: flex-end;
+    }
+
+    > .flex-container {
+        &.one-box-per-row {
+            flex-direction: column;
+        }
+    }
+
+    > .grid-container-create-columns {
+        grid-template-columns: repeat(v-bind(boxesPerRowLarge), minmax(0, 1fr));
+    }
+
+    .cmd-box {
+        &.content {
+            &.collapsible {
+                align-self: flex-start;
+            }
+        }
+    }
+
+    @media only screen and (max-width: $medium-max-width) {
+        > .grid-container-create-columns {
+            grid-template-columns: repeat(v-bind(boxesPerRowMedium), minmax(0, 1fr));
+        }
+    }
+
+    @media only screen and (max-width: $small-max-width) {
+        > .grid-container-create-columns {
+            grid-template-columns: repeat(v-bind(boxesPerRowSmall), minmax(0, 1fr));
+        }
+    }
+}
+
+/* end cmd-box-wrapper ---------------------------------------------------------------------------------------- */
+</style>

package/src/components/CmdBreadcrumbs.vue

@@ -1,40 +1,49 @@
 <template>
     <ul class="cmd-breadcrumbs">
         <li v-if="breadcrumbLabel">{{ breadcrumbLabel }}</li>
-        <li v-for="(link, index) in breadcrumbLinks" :key="index">
-            <a :href="link.path" v-if="link.type === 'href'">
+        <li v-for="(link, index) in breadcrumbLinks || []" :key="index">
+            <!-- begin type 'href' -->
+            <a  v-if="link.type === 'href'" :href="link.path">
                 <span v-if="link.iconClass" :class="link.iconClass"></span>
                 <span v-if="link.text">{{ link.text }}</span>
             </a>
-            <router-link v-else-if="link.type === 'router'" :to="link.to">
+            <!-- end type 'href' -->
+
+            <!-- begin type 'router' -->
+            <router-link v-else-if="link.type === 'router'" :to="getRoute(link)">
                 <span v-if="link.iconClass" :class="link.iconClass"></span>
                 <span v-if="link.text">{{ link.text }}</span>
             </router-link>
+            <!-- end type 'router' -->
+
             <span v-else>
-        <span v-if="link.iconClass" :class="link.iconClass"></span>
-        <span v-if="link.text">{{ link.text }}</span>
-      </span>
+                <span v-if="link.iconClass" :class="link.iconClass"></span>
+                <span v-if="link.text">{{ link.text }}</span>
+            </span>
             <span v-if="index < breadcrumbLinks.length - 1">{{ breadcrumbSeparator }}</span>
         </li>
     </ul>
 </template>
 
 <script>
+// import functions
+import {getRoute} from "../utilities.js"
+
 export default {
     name: "CmdBreadcrumbs",
     props: {
         /**
-         * list of breadcrumb-links (incl. path, icon and text)
+         * label in front/left of breadcrumbs
          */
-        breadcrumbLinks: {
-            type: Array,
+        breadcrumbLabel: {
+            type: String,
             required: false
         },
         /**
-         * label in front/left of breadcrumbs
+         * list of breadcrumb-links (incl. path, icon and text)
          */
-        breadcrumbLabel: {
-            type: String,
+        breadcrumbLinks: {
+            type: Array,
             required: false
         },
         /**
@@ -44,6 +53,11 @@ export default {
             type: String,
             default: ">"
         }
+    },
+    methods: {
+        getRoute(link) {
+            return getRoute(link)
+        }
     }
 }
 </script>
@@ -55,7 +69,7 @@ export default {
     margin: 0;
 
     li {
-        display: flex;
+        display: inherit;
         align-items: center;
         list-style-type: none;
         margin: 0;
@@ -75,6 +89,8 @@ export default {
         }
 
         a {
+            display: inherit;
+            align-items: inherit;
             text-decoration: none;
 
             &:hover, &:active, &:focus {

package/src/components/CmdCompanyLogo.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="cmd-company-logo">
-        <router-link v-if="link.type === 'router'" to="./" :title="link.tooltip">
-            <img :src="pathCurrentLogo" :alt="altText"/>
-        </router-link>
-        <a v-else href="./" :title="link.tooltip">
+        <a v-if="link.type === 'router'"  href="./" :title="link.tooltip">
             <img :src="pathCurrentLogo" :alt="altText"/>
         </a>
+        <router-link v-else to="./" :title="link.tooltip">
+            <img :src="pathCurrentLogo" :alt="altText"/>
+        </router-link>
     </div>
 </template>
 
@@ -43,6 +43,8 @@ export default {
         },
         /**
          * alternative text for image
+         *
+         * @requiredForAccessibility: true
          */
         altText: {
             type: String,

package/src/components/CmdCookieDisclaimer.vue

@@ -1,91 +1,115 @@
 <template>
     <transition name="fade">
-        <div class="cmd-cookie-disclaimer">
-            <h2 v-if="headline">{{ headline }}</h2>
+        <div class="cmd-cookie-disclaimer flex-container vertical">
+            <!-- begin CmdCustomHeadline -->
+            <CmdCustomHeadline
+                v-if="cmdCustomHeadline"
+                v-bind="cmdCustomHeadline"
+            />
+            <!-- end CmdCustomHeadline -->
+
+            <!-- begin slot for cookie-options -->
             <slot name="cookie-options">
-                    <div v-if="cookieOptions.required">
-                        <h3>{{ cookieOptions.required.headline }}</h3>
-                        <CmdAccordion :accordion-data="cookieOptions.required.cookies.length" :accordionData="2">
-                            <template v-for="(cookie, index) in cookieOptions.required.cookies"
-                                      v-slot:[`accordionHeadline${index}`]
-                                      :key="index">
-                                <CmdSwitchButton
-                                    type="checkbox"
-                                    :id="cookie.id"
-                                    :labelText="cookie.labelText"
-                                    v-model="cookie.checked"
-                                    :status="cookie.status"
-                                    disabled="disabled"
-                                />
-                            </template>
-                            <template v-for="(cookie, index) in cookieOptions.required.cookies"
-                                      v-slot:[`accordionContent${index}`]
-                                      :key="index">
-                                <p v-if="cookie.description">{{ cookie.description }}</p>
-                                <p v-if="cookie.linkDataPrivacy">
-                                    {{ cookie.linkDataPrivacy.label }}
-                                    <a @click="openDataPrivacy"
-                                       :href="cookie.linkDataPrivacy.link"
-                                       :target="cookie.linkDataPrivacy.target">
-                                        {{ cookie.linkDataPrivacy.linkText }}
-                                    </a>
-                                </p>
-                                <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
-                            </template>
-                        </CmdAccordion>
-                    </div>
+                <div v-if="cookieOptions.required">
+                    <h3>{{ cookieOptions.required.headline }}</h3>
+
+                    <!-- begin CmdAccordion -->
+                    <CmdAccordion :accordion-data="cookieOptions.required.cookies.length" :accordionData="2">
+                        <template v-for="(cookie, index) in cookieOptions.required.cookies"
+                                  v-slot:[`accordionHeadline${index}`]
+                                  :key="index">
+                            <!-- begin CmdSwitchButton -->
+                            <CmdSwitchButton
+                                type="checkbox"
+                                :id="cookie.id"
+                                :labelText="cookie.labelText"
+                                v-model="cookie.checked"
+                                :status="cookie.status"
+                                disabled="disabled"
+                            />
+                            <!-- end CmdSwitchButton -->
+                        </template>
+                        <template v-for="(cookie, index) in cookieOptions.required.cookies"
+                                  v-slot:[`accordionContent${index}`]
+                                  :key="index">
+                            <p v-if="cookie.description">{{ cookie.description }}</p>
+                            <p v-if="cookie.linkDataPrivacy">
+                                {{ cookie.linkDataPrivacy.label }}
+                                <a @click="openDataPrivacy"
+                                   :href="cookie.linkDataPrivacy.link"
+                                   :target="cookie.linkDataPrivacy.target">
+                                    {{ cookie.linkDataPrivacy.linkText }}
+                                </a>
+                            </p>
+                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
+                        </template>
+                    </CmdAccordion>
+                    <!-- end CmdAccordion -->
+                </div>
                 <hr />
-                    <div v-if="cookieOptions.optional">
-                        <h3>{{ cookieOptions.optional.headline }}</h3>
-                        <CmdAccordion :accordion-data="cookieOptions.optional.cookies.length" :accordionData="2">
-                            <template v-for="(cookie, index) in cookieOptions.optional.cookies"
-                                      v-slot:[`accordionHeadline${index}`]
-                                      :key="index">
-                                <CmdSwitchButton
-                                    type="checkbox"
-                                    :id="cookie.id"
-                                    :labelText="cookie.labelText"
-                                    v-model="cookie.checked"
-                                    :status="cookie.status"
-                                />
-                            </template>
-                            <template v-for="(cookie, index) in cookieOptions.optional.cookies"
-                                      v-slot:[`accordionContent${index}`]
-                                      :key="index">
-                                <p>{{ cookie.description }}</p>
-                                <p v-if="cookie.linkDataPrivacy">
-                                    {{ cookie.linkDataPrivacy.label }}
-                                    <a @click="openDataPrivacy" :href="cookie.linkDataPrivacy.link"
-                                       :target="cookie.linkDataPrivacy.target">{{ cookie.linkDataPrivacy.linkText }}</a>
-                                </p>
-                                <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
-                            </template>
-                        </CmdAccordion>
-                    </div>
-            </slot>
-            <slot name="privacy-text">
+                <div v-if="cookieOptions.optional">
+                    <h3>{{ cookieOptions.optional.headline }}</h3>
+                    <!-- begin CmdAccordion -->
+                    <CmdAccordion :accordion-data="cookieOptions.optional.cookies.length" :accordionData="2">
+                        <template v-for="(cookie, index) in cookieOptions.optional.cookies"
+                                  v-slot:[`accordionHeadline${index}`]
+                                  :key="index">
+                            <!-- begin CmdSwitchButton -->
+                            <CmdSwitchButton
+                                type="checkbox"
+                                :id="cookie.id"
+                                :labelText="cookie.labelText"
+                                v-model="cookie.checked"
+                                :status="cookie.status"
+                            />
+                            <!-- end CmdSwitchButton -->
+                        </template>
+                        <template v-for="(cookie, index) in cookieOptions.optional.cookies"
+                                  v-slot:[`accordionContent${index}`]
+                                  :key="index">
+                            <p>{{ cookie.description }}</p>
+                            <p v-if="cookie.linkDataPrivacy">
+                                {{ cookie.linkDataPrivacy.label }}
+                                <a @click="openDataPrivacy" :href="cookie.linkDataPrivacy.link"
+                                   :target="cookie.linkDataPrivacy.target">{{ cookie.linkDataPrivacy.linkText }}</a>
+                            </p>
+                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
+                        </template>
+                    </CmdAccordion>
+                    <!-- end CmdAccordion -->
+                </div>
             </slot>
+            <!-- end slot for cookie-options -->
+
+            <!-- begin slot for privacy-text -->
+            <slot name="privacy-text"></slot>
+            <!-- end slot for privacy-text -->
+
+            <!-- begin button-wrapper for 'accept'-buttons -->
             <div class="button-wrapper align-center">
-                <button type="button" @click="acceptCookies('currentSettings')" v-if="buttonLabelAcceptCurrentSettings">
-                    {{ buttonLabelAcceptCurrentSettings }}
+                <button  v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCookies('currentSettings')">
+                    <span>{{ buttonLabelAcceptCurrentSettings }}</span>
                 </button>
-                <button type="button" class="primary" @click="acceptCookies('allCookies')"
-                        v-if="buttonLabelAcceptAllCookies">
-                    {{ buttonLabelAcceptAllCookies }}
+                <button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptCookies('allCookies')">
+                    <span>{{ buttonLabelAcceptAllCookies }}</span>
                 </button>
             </div>
+            <!-- end button-wrapper for 'accept'-buttons -->
         </div>
     </transition>
 </template>
 
 <script>
-import CmdAccordion from "./CmdAccordion";
-import CmdSwitchButton from "./CmdSwitchButton";
+// import components
+import CmdAccordion from "./CmdAccordion"
+import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdSwitchButton from "./CmdSwitchButton"
 
 export default {
     name: "CmdCookieDisclaimer",
     components: {
         CmdAccordion,
+        CmdCustomHeadline,
         CmdSwitchButton
     },
     data() {
@@ -96,10 +120,10 @@ export default {
     },
     props: {
         /**
-         * headline show above content
+         * properties for CmdCustomHeadline-component
          */
-        headline: {
-            type: String,
+        cmdCustomHeadline: {
+            type: Object,
             required: false
         },
         /**
@@ -178,10 +202,10 @@ export default {
                     }
                 }
             }
+        }
 
-            .toggle-switch {
-                display: flex;
-            }
+        .toggle-switch {
+            display: flex;
         }
     }
 

package/src/components/CmdCopyrightInformation.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cmd-copyright-information">
+    <div class="cmd-copyright-information" role="contentinfo">
         <a href="http://www.comand-cms.com" target="_blank" lang="en" title="CoManD-Website">&copy; CoManD</a>
     </div>
 </template>

package/src/components/CmdCustomHeadline.vue

@@ -0,0 +1,93 @@
+<template>
+    <header :class="['cmd-custom-headline', { 'has-pre-headline-text': preHeadlineText}]">
+        <span v-if="iconClass" :class="iconClass"></span>
+        <div v-if="preHeadlineText">
+            <span class="pre-headline-text">{{ preHeadlineText }}</span>
+            <component :is="getHeadlineTag">
+                <slot>{{ headlineText }}</slot>
+            </component>
+        </div>
+        <component v-else :is="getHeadlineTag">
+            <slot>{{ headlineText }}</slot>
+        </component>
+    </header>
+</template>
+
+<script>
+export default {
+    name: "CmdCustomHeadline",
+    props: {
+        /**
+         * text for headline
+         */
+        headlineText: {
+            type: String,
+            required: true
+        },
+        /**
+         * level for headline
+         */
+        headlineLevel: {
+            type: [String, Number],
+            required: true
+        },
+        /**
+         * small pre-headline-text above main-headline
+         */
+        preHeadlineText: {
+            type: String,
+            required: false
+        },
+        /**
+         * icon-class for icon shown left/before headline
+         */
+        iconClass: {
+            type: String,
+            required: false
+        }
+    },
+    computed: {
+        getHeadlineTag() {
+            return "h" + this.headlineLevel
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../assets/styles/variables';
+
+/* begin cmd-custom-headline ------------------------------------------------------------------------------------------ */
+.cmd-custom-headline {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--default-margin);
+    gap: calc(var(--default-gap) / 2);
+
+    &.has-pre-headline-text {
+        [class*="icon"] {
+            font-size: 5rem;
+        }
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+
+    h1, h2, h3, h4, h5 ,h6 {
+        margin: 0;
+        display: flex;
+        align-items: center;
+    }
+
+    @media only screen and ($small-max-width) {
+        flex-direction: column;
+
+        h1 {
+            margin-bottom: calc(var(--default-margin) * 2);
+        }
+    }
+}
+
+/* end cmd-custom-headline ------------------------------------------------------------------------------------------ */
+</style>