comand-component-library 3.1.98 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.98",
+  "version": "3.2.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.77",
+    "comand-frontend-framework": "^3.2.84",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "sass": "^1.54.9",

package/src/App.vue

@@ -960,7 +960,7 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Login Form</h2>
                 <CmdForm :use-validation="true" :use-fieldset="false">
-                    <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in"/>
+                    <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in" />
                 </CmdForm>
                 <p>LoginData: {{ loginData }}</p>
             </CmdWidthLimitationWrapper>

package/src/assets/styles/global-styles.scss

@@ -52,7 +52,7 @@
 }
 
 #component-library {
-  scroll-padding-top: unset !important;
+  /*scroll-padding-top: unset !important;*/
   scroll-snap-type: unset !important;
 }
 
@@ -298,5 +298,4 @@ html {
     }
   }
 }
-
-/* ---------------------------------------------- END COLORS-SCHEMES (LIGHT-/DARK-MODE)  -------------------------------------------------- */
+/* ---------------------------------------------- END COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */

package/src/components/CmdBox.vue

@@ -1,6 +1,7 @@
 <template>
     <!-- begin boxType 'content' -->
-    <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally}]">
+    <div v-if="boxType === 'content'"
+         :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally}]">
         <template v-if="useSlots?.includes('header')">
             <!-- begin collapsible header with slot -->
             <div v-if="collapsible" class="box-header">
@@ -67,7 +68,7 @@
     <!-- begin boxType 'product' -->
     <a v-else-if="boxType === 'product' && product" :class="['cmd-box box product', {'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally}]" href="#" @click.prevent="clickOnProduct(product)">
         <div class="box-header flex-container vertical">
-            <figure v-if="product.image">
+            <figure v-if="product.image !== undefined">
                 <img :src="product.image.src" :alt="product.image.alt"/>
                 <figcaption>{{ product.name }}</figcaption>
             </figure>
@@ -141,7 +142,7 @@ export default {
             active: true
         }
     },
-    emits: ["click"],
+    emits: ["click", "toggle-collapse"],
     props: {
         collapsingBoxesOpen: {
             type: Boolean,
@@ -314,14 +315,15 @@ export default {
     }
 
     &.collapsible {
-        .box-header {
+        a.box-header {
             justify-content: space-between;
+            background: var(--primary-color);
 
             &:hover, &:active, &:focus {
                 background: var(--pure-white);
 
                 * {
-                    color: var(--text-color);
+                    color: var(--primary-color);
                 }
             }
         }

package/src/components/CmdFancyBox.vue

@@ -3,7 +3,7 @@
     <div v-if="showFancyBox"
          :class="['cmd-fancybox', {'show-overlay': showOverlay}]"
          role="dialog"
-         :aria-labelledby="htmlId">
+         :aria-labelledby="ariaLabelText">
       <div class="popup" :class="{'image' : fancyBoxImageUrl || fancyBoxGallery }">
         <!-- begin print buttons -->
         <div class="button-wrapper no-flex"
@@ -36,7 +36,7 @@
         <div :class="{'grayscale' : printInGrayscale}">
             <!-- begin CmdHeadline -->
             <CmdHeadline
-                v-show="cmdHeadline?.show"
+                v-if="cmdHeadline?.show"
                 :headlineText="cmdHeadline?.headlineText"
                 :headlineLevel="cmdHeadline?.headlineLevel"
                 :id="htmlId"
@@ -49,6 +49,7 @@
           <div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
           <div v-else-if="fancyBoxElements" class="content"></div>
           <div v-else-if="fancyBoxGallery" class="content">
+
             <!-- begin CmdSlideButton -->
             <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev" />
             <!-- end CmdSlideButton -->
@@ -126,6 +127,15 @@
             }
         },
         props: {
+            /**
+             * sets aria-label-text on component
+             *
+             * @requiredForAccessibility: true
+             */
+            ariaLabelText: {
+                type: String,
+                required: true
+            },
             /**
              * set if content should be loaded by url
              */

package/src/components/CmdFormElement.vue

@@ -218,6 +218,8 @@ import Tooltip from "../mixins/Tooltip.js"
 // import components
 import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
+const TYPES_WITHOUT_MAXLENGTH = ["color", "date", "datetime-local", "file", "number", "range"]
+
 export default {
     inheritAttrs: false,
     name: "CmdFormElement",
@@ -708,7 +710,7 @@ export default {
                 return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 5000
             }
 
-            if (this.$attrs.type !== 'file' && this.$attrs.type !== 'number' && this.$attrs.type !== 'date') {
+            if (!TYPES_WITHOUT_MAXLENGTH.includes(this.$attrs.type)) {
                 return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 255
             }
             return null

package/src/components/CmdFormFilters.vue

@@ -1,5 +1,5 @@
 <template>
-    <ul class="cmd-form-filters">
+    <ul v-if="options.length" class="cmd-form-filters">
         <li v-if="options.length > 1">
             <a href="#" @click.prevent="deleteAllFilters">
                 <span v-if="linkDeleteAllFilters.icon && linkDeleteAllFilters.icon.show" :class="linkDeleteAllFilters.icon.iconClass" :title="linkDeleteAllFilters.icon.tooltip"></span>

package/src/components/CmdInputGroup.vue

@@ -18,7 +18,7 @@
                 v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
                 ref="tooltip"
                 :showRequirements="showRequirements"
-                :inputRequirements="inputRequirements"
+                :cmdListOfRequirements="listOfRequirements"
                 :validationStatus="validationStatus"
                 :validationMessage="getValidationMessage"
                 :inputAttributes="$attrs"

package/src/components/CmdLoginForm.vue

@@ -43,7 +43,7 @@
         </div>
         <!-- end form elements -->
 
-        <div class="option-wrapper flex-container" v-focus>
+        <div class="option-wrapper flex-container">
             <template v-if="options.forgotPassword || options.createAccount">
                 <!-- begin link for 'forgot password' -->
                 <a v-if="options.forgotPassword" href="#" @click.prevent="sendLogin = true">

package/src/components/CmdShareButtons.vue

@@ -14,6 +14,7 @@
                :key="shareButton.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
                :id="shareButton.id"
                :href="getUrl(shareButton)"
+               @click="preventOnDisabled"
                target="_blank"
                :title="tooltip(shareButton.tooltip)">
                 <span v-if="shareButton.iconClass && shareButton.iconPosition !== 'right'" :class="shareButton.iconClass"></span>
@@ -139,7 +140,20 @@ export default {
                 // if path is given completely by json-data
                 return shareButton.path
             }
-            return null
+            return "#"
+        },
+        preventOnDisabled(event) {
+            let clickedElement = event.target
+
+            if(clickedElement.tagName !== "A") {
+                // get surrounding <a> if inner <span> is clicked
+                clickedElement = clickedElement.closest("a")
+            }
+
+            // href must be set due to html-validity, so click must be prevented if href contains "#" only (equals button is styled as disabled)
+            if(clickedElement.getAttribute("href") === "#") {
+                event.preventDefault()
+            }
         },
         tooltip(tooltip) {
             if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {

package/src/components/CmdSiteHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-site-header', { sticky: sticky, 'navigation-inline': navigationInline }]" role="banner">
+    <div :class="['cmd-site-header', {sticky: sticky, 'navigation-inline': navigationInline }]" role="banner">
         <!-- begin slot for elements above header -->
         <div v-if="$slots.topheader" class="top-header">
             <slot name="topheader"></slot>
@@ -7,14 +7,19 @@
         <!-- end for elements above header -->
 
         <!-- begin header-wrapper with slots for logo and other header elements -->
-        <header v-if="$slots.logo || $slots.header || $slots.navigation" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
+        <header
+            v-if="$slots.logo || $slots.header || $slots.navigation"
+            :class="[useGrid ? 'grid-container-create-columns': 'flex-container', {'has-navigation': cmdMainNavigation || $slots.navigation, 'one-child-only' : oneChildOnly},]">
             <slot name="logo"></slot>
             <slot name="header"></slot>
             <slot name="navigation"></slot>
         </header>
         <!-- end header-wrapper with slots for logo and other header elements -->
 
-        <header v-if="cmdCompanyLogo || cmdMainNavigation?.navigationEntries?.length" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
+        <header
+            v-if="cmdCompanyLogo || cmdMainNavigation?.navigationEntries?.length"
+            :class="[{'has-navigation': cmdMainNavigation, 'one-child-only' : oneChildOnly}, useGrid ? 'grid-container-create-columns': 'flex-container']">
+
             <!-- begin CmdCompanyLogo -->
             <CmdCompanyLogo
                 v-if="cmdCompanyLogo"
@@ -78,7 +83,7 @@ export default {
             default: true
         },
         /**
-         * properties for cmdCompanyLogo-component
+         * properties for CmdCompanyLogo-component
          */
         cmdCompanyLogo: {
             type: Object,
@@ -91,6 +96,12 @@ export default {
             type: Object,
             required: false
         }
+    },
+    computed: {
+        oneChildOnly() {
+            // check if sum of children equals "1" by turning objects into booleans, which will be converted to numbers by using "+".
+            return (!!this.cmdCompanyLogo + !!this.cmdMainNavigation + !!this.$slots.logo + !!this.$slots.header + !!this.$slots.navigation) === 1
+        }
     }
 }
 </script>
@@ -118,10 +129,6 @@ export default {
         padding: 0 var(--default-padding);
     }
 
-    &:not(.navigation-inline) header {
-        padding-bottom: 0;
-    }
-
     .cmd-main-navigation nav {
         width: auto;
     }
@@ -148,11 +155,21 @@ export default {
         border-bottom: 0;
     }
 
+
+
     header {
         padding-top: calc(var(--default-padding) * 2);
         padding-bottom: calc(var(--default-padding) * 2);
-        grid-template-rows: 1fr min-content;
-        grid-template-areas: "company-logo" "main-navigation";
+
+        &.has-navigation {
+            grid-template-rows: 1fr min-content;
+            grid-template-areas: "company-logo" "main-navigation";
+            padding-bottom: 0;
+        }
+
+        &.one-child-only {
+            gap: 0;
+        }
 
         &.flex-container {
             width: 100%;
@@ -175,12 +192,19 @@ export default {
         .cmd-company-logo {
             grid-column: span var(--grid-small-span);
         }
+
+         > *:only-child {
+             gap: 0;
+         }
     }
 
     &.navigation-inline {
         header {
-            grid-template-rows: 1fr;
-            grid-template-areas: "company-logo main-navigation";
+            &.has-navigation {
+                grid-template-rows: 1fr;
+                grid-template-areas: "company-logo main-navigation";
+                padding-bottom: calc(var(--default-padding) * 2);
+            }
 
             .cmd-company-logo {
                 grid-column: span var(--grid-small-span);
@@ -188,6 +212,7 @@ export default {
 
             #main-navigation-wrapper {
                 display: flex;
+                align-items: center;
                 border: 0;
                 grid-column: span var(--grid-large-span);
                 background: none;

package/src/components/CmdSystemMessage.vue

@@ -141,13 +141,35 @@ export default {
     }
 
     > a[class*="icon-"]:not(.button) {
-        font-size: 1rem;
-        color: var(--pure-white) !important;
-        padding: 0;
+        font-size: 0.8rem;
+        font-weight: bold;
+        color: var(--pure-white);
         position: absolute;
         right: 0.5rem;
         text-decoration: none;
         top: 0.5rem;
+        border: var(--default-border);
+        border-color: var(--pure-white);
+        border-radius: var(--full-circle);
+        padding: calc(var(--default-padding) / 2);
+
+        &:hover, &:active, &:focus {
+            color: var(--hyperlink-color);
+            border-color: var(--hyperlink-color);
+            background: var(--pure-white);
+        }
+    }
+
+    &.warning {
+        > a[class*="icon-"]:not(.button) {
+            color: var(--text-color);
+            border-color: var(--text-color);
+
+            &:hover, &:active, &:focus {
+                color: var(--hyperlink-color);
+                border-color: var(--hyperlink-color);
+            }
+        }
     }
 }
 

package/src/components/CmdTabs.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="cmd-tabs">
         <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
-            <li :class="{active : showTab === index}" v-for="(tab, index) in tabs" :key="index" role="tab">
-                <a @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : false">
+            <li v-for="(tab, index) in tabs" :key="index" role="tab">
+                <a :class="{active : showTab === index}" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : false" href="#">
                     <span v-if="tab.iconClass" :class="tab.iconClass"></span>
                     <span v-if="tab.name">{{ tab.name }}</span>
                 </a>
@@ -112,8 +112,6 @@ export default {
             border-top-right-radius: var(--border-radius);
             list-style-type: none;
             background: var(--color-scheme-background-color);
-            border: var(--default-border);
-            border-bottom: 0;
 
             &.active {
                 border-color: var(--primary-color);
@@ -125,12 +123,16 @@ export default {
                 justify-content: center;
                 padding: var(--default-padding);
                 color: var(--color-scheme-text-color);
+                border: var(--default-border);
+                border-bottom: 0;
                 border-top-left-radius: var(--border-radius);
                 border-top-right-radius: var(--border-radius);
+                text-decoration: none;
 
-                &:hover, &:active, &:focus {
+                &:hover, &:active, &:focus, &.active {
                     cursor: pointer;
-                    color: var(--primary-color);
+                    color: var(--hyperlink-color);
+                    border-color: var(--hyperlink-color);
                 }
             }
         }

package/src/components/CmdWidthLimitationWrapper.vue

@@ -2,6 +2,15 @@
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
         <section v-if="innerWrapper" :class="setInnerClass">
             <a v-if="anchorId" :id="anchorId"></a>
+            <!-- begin cmd-headline -->
+            <CmdHeadline
+                v-if="cmdHeadline"
+                :pre-headline-text="cmdHeadline.preHeadlineLevel"
+                :headline-text="cmdHeadline.headlineText"
+                :headline-level="cmdHeadline.headlineLevel"
+            />
+            <!-- end cmd-headline -->
+
             <!-- begin slot-content -->
             <slot></slot>
             <!-- end slot-content -->
@@ -16,8 +25,14 @@
 </template>
 
 <script>
+// import components
+import CmdHeadline from "./CmdHeadline"
+
 export default {
     name: "CmdWidthLimitationWrapper",
+    components: {
+        CmdHeadline
+    },
     props: {
         /**
          * set a html-tag as inner tag
@@ -67,7 +82,16 @@ export default {
         anchorId: {
             type: String,
             required: false
-        }
+        },
+        /**
+         * properties for CmdHeadline-component
+         *
+         * @requiredForAccessibilty
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
+        },
     },
     computed: {
         setInnerClass() {

package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json

@@ -1,4 +1,14 @@
 {
+    "ariaLabelText": {
+        "comments": [
+            "sets aria-label-text on component"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    },
     "url": {
         "comments": [
             "set if content should be loaded by url"

package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json

@@ -31,7 +31,7 @@
     },
     "cmdCompanyLogo": {
         "comments": [
-            "properties for cmdCompanyLogo-component"
+            "properties for CmdCompanyLogo-component"
         ]
     },
     "cmdMainNavigation": {

package/src/documentation/generated/CmdWidthLimitationWrapperPropertyDescriptions.json

@@ -37,5 +37,12 @@
         "comments": [
             "set id for (invisible) anchor to enable shortcuts"
         ]
+    },
+    "cmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component",
+            "",
+            "@requiredForAccessibilty"
+        ]
     }
 }

package/src/index.js

@@ -47,5 +47,8 @@ export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimit
 export { default as DirFocus } from '@/directives/focus'
 export { default as DirTelephone } from '@/directives/telephone'
 
+// export directives
+export { createUuid, createHtmlId } from '@/utils/common'
+
 // export composables
 export { useSequence } from '@/composables/sequence'

package/src/main.js

@@ -13,6 +13,7 @@ import 'comand-frontend-framework/src/assets/css/framework-iconfont.css'
 /* end imports css from comand-frontend-framework ---------------------------------------------------------------------------------------- */
 
 import { createApp } from 'vue'
+
 // import App from './App.vue'
 import App from './App'
 //import { createRouter, createWebHistory } from 'vue-router'
@@ -21,10 +22,9 @@ import "clickout-event"
 /* import directives */
 // directive to format telephone- and fax-number
 import directiveTelephone from "./directives/telephone"
+
 // directive to set focus on specific form-elements
 import directiveFocus from "./directives/focus"
-// directive to set scroll-padding to place anchors correctly below sticky header
-import directiveScrollPadding from "./directives/scrollPadding"
 
 /* begin imports css from comand-component-library ---------------------------------------------------------------------------------------- */
 /* import additional iconfont containing company-logos */
@@ -60,4 +60,4 @@ import router from "./router"
 // })
 
 // createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
-createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).directive('scrollPadding', directiveScrollPadding).mount('#app')
+createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')

package/src/utils/common.js

@@ -1,8 +1,3 @@
-function isFrameMode() {
-    const frameUrl = new URL(location)
-    return frameUrl.searchParams.has("frameMode")
-}
-
 function createUuid(){
     let dt = new Date().getTime()
     return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
@@ -16,4 +11,4 @@ function createHtmlId() {
    return "cmd-" + createUuid()
 }
 
-export {isFrameMode, createUuid, createHtmlId}
+export {createUuid, createHtmlId}

package/src/components/CmdMultipleSwitch.vue

@@ -1,118 +0,0 @@
-<template>
-    <div :class="['cmd-multiple-switch multiple-switch label', {disabled: status === 'disabled', error: status === 'error'}]" :aria-labelledby="labelId">
-        <span v-show="showLabel" :id="htmlId">{{ 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">
-                <input :type="switchTypes"
-                       :id="multipleswitch.id"
-                       :disabled="status === 'disabled'"
-                       :name="switchNames"
-                       :value="multipleswitch.value"
-                       :checked="isChecked(multipleswitch)"
-                       @change="onChange"
-                />
-                <span v-if="multipleswitch.iconClass" :class="multipleswitch.iconClass"></span>
-                <span v-if="multipleswitch.labelText">{{ multipleswitch.labelText }}</span>
-            </label>
-        </span>
-    </div>
-</template>
-
-<script>
-// import mixins
-import Identifier from "../mixins/Identifier"
-
-export default {
-    name: "CmdMultipleSwitch",
-    mixins: [Identifier],
-    props: {
-        /**
-         * 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
-        }
-    },
-    methods: {
-        onChange(e) {
-            if (typeof this.value === "string") {
-                this.$emit("update:value", e.target.value)
-            } else if (this.value !== undefined) {
-                let values = [...this.value]
-                if (e.target.checked) {
-                    values.push(e.target.value)
-                } else {
-                    values = values.filter(value => value !== e.target.value)
-                }
-                this.$emit("update:value", values)
-            }
-        },
-        isChecked(multipleswitch) {
-            if (typeof this.value === "string") {
-                return this.value === multipleswitch.value
-            }
-            if (this.value !== undefined) {
-                return this.value.includes(multipleswitch.value)
-            }
-            return false
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-/* begin cmd-multiple-switch ------------------------------------------------------------------------------------------ */
-
-/* end cmd-multiple-switch ------------------------------------------------------------------------------------------ */
-</style>

package/src/directives/scrollPadding.js

@@ -1,6 +0,0 @@
-export default {
-    mounted(el) {
-        const heightHeader = el.outerHeight
-        document.documentElement.style.scrollPaddingTop = (heightHeader / 10) + "rem"
-    }
-}