comand-component-library 3.1.82 → 3.1.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.82",
+  "version": "3.1.85",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -50,6 +50,7 @@
                     <li><a href="#section-tabs">Tabs</a></li>
                     <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
                     <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
+                    <li><a href="#section-tooltip">Tooltip</a></li>
                     <li><a href="#section-upload-form">Upload-Form</a></li>
                 </ul>
             </div>
@@ -137,7 +138,6 @@
                     <h2>Inputfields in Columns</h2>
                     <div class="flex-container">
                         <CmdFormElement element="input"
-                                        labelText="Label for inputfield (with tooltip):"
                                         type="text"
                                         minlength="5"
                                         id="inputfield1"
@@ -145,10 +145,13 @@
                                         v-model="inputField1"
                                         tooltipText="This is a tooltip!"
                                         :status="validationStatus"
-                                        :disabled="disabledStatus"
-                        />
+                                        :disabled="disabledStatus">
+                            <template v-slot:labeltext>
+                                <span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
+                            </template>
+                        </CmdFormElement>
                         <CmdFormElement element="input"
-                                        labelText="Label for inputfield (required):"
+                                        labelText="Label for inputfield (required, with tooltip):"
                                         type="text"
                                         required="required"
                                         minlength="5"
@@ -457,10 +460,14 @@
                         checkbox with boolean: {{ checkboxValue }}<br/>
                         checkboxes with values: {{ checkboxValues }}
                     </p>
+
                     <h3>Toggle Dark-Mode</h3>
                     <a id="section-toggle-darkmode"></a>
+                    <h4>Toggle Dark-Mode (with label, not styled)</h4>
                     <CmdToggleDarkMode :showLabel="true"/>
+                    <h4>Toggle Dark-Mode (without label, styled)</h4>
                     <CmdToggleDarkMode :showLabel="false" :use-styled-layout="true" />
+
                     <h2>Checkboxes and Radiobuttons</h2>
                     <h3>Checkboxes [native]</h3>
                     <div class="label inline">
@@ -1079,7 +1086,10 @@
         <a id="section-thumbnail-scroller"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Thumbnail-Scroller</h2>
+            <h3>Thumbnail-Scroller as wide as content</h3>
             <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
+            <h3>Thumbnail-Scroller stretched to full width</h3>
+            <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData" :fullWidth="true" />
         </CmdWidthLimitationWrapper>
 
         <a id="section-tooltip"></a>
@@ -1134,7 +1144,7 @@
                              textMiscInfo="Miscellaneous information"
             />
             <CmdAddressData :addressData="addressData"
-                            :linkGoogleMaps="true"
+                            :linkGoogleMaps="false"
                             :cmdHeadline="{headlineText: 'Address data', headlineLevel: 6}"
             />
         </div>
@@ -1226,8 +1236,8 @@ import CmdSiteHeader from "./components/CmdSiteHeader"
 import CmdSlideshow from "@/components/CmdSlideshow.vue"
 import CmdSwitchLanguage from "@/components/CmdSwitchLanguage.vue"
 import CmdSystemMessage from "@/components/CmdSystemMessage.vue"
-import CmdTabs from "@/components/CmdTabs.vue"
 import CmdTable from "@/components/CmdTable.vue"
+import CmdTabs from "@/components/CmdTabs.vue"
 import CmdThumbnailScroller from "@/components/CmdThumbnailScroller.vue"
 import CmdToggleDarkMode from "@/components/CmdToggleDarkMode.vue"
 import CmdTooltip from "@/components/CmdTooltip.vue"

package/src/assets/data/address-data.json

@@ -1,6 +1,6 @@
 {
       "company": {
-            "iconClass": "icon-home",
+            "iconClass": "icon-company",
             "value": "Your company name"
       },
       "address": {
@@ -8,6 +8,7 @@
             "streetNo": "Your Street/No",
             "zip": "Your zip",
             "city": "Your city",
+            "miscInfo": "",
             "country": "Your country",
             "longitude": "0.0",
             "latitude": "0.0",

package/src/components/CmdAddressData.vue

@@ -17,25 +17,28 @@
                 <!-- end company -->
 
                 <!-- begin address -->
-                <dt v-if="addressData.address && addressData.address.length">
-                    <span v-if="addressData.address.iconClass && showLabelIcons" :class="addressData.address.iconClass" :title="getMessage('cmdaddressdata.labeltext.address')"></span>
-                    <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.address')}}</span>
-                </dt>
-                <dd v-if="addressData.address">
-                    <a  v-if="linkGoogleMaps" :href="locateAddress" target="google-maps"
-                       :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
-                        <span v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
-                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
-                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
-                        <span  v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
-                    </a>
-                    <template v-else>
-                        <span v-if="addressData.address.streetNo" class="street-address">{{addressData.address.streetNo }}</span><br/>
-                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }} </span>
-                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
-                        <span  v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
-                    </template>
-                </dd>
+                <template v-if="addressData.address && addressData.address !== undefined">
+                    <dt class="address">
+                        <span v-if="addressData.address.iconClass && showLabelIcons" :class="addressData.address.iconClass" :title="getMessage('cmdaddressdata.labeltext.address')"></span>
+                        <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.address')}}</span>
+                    </dt>
+                    <dd v-if="addressData.address">
+                        <a v-if="linkGoogleMaps" :href="locateAddress" target="google-maps" :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
+                            <span v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
+                            <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
+                            <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
+                            <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                            <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
+                        </a>
+                        <template v-else>
+                            <span v-if="addressData.address.streetNo" class="street-address">{{addressData.address.streetNo }}</span><br/>
+                            <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
+                            <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
+                            <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                            <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
+                        </template>
+                    </dd>
+                </template>
                 <!-- end address -->
 
                 <!-- begin telephone -->
@@ -84,18 +87,19 @@
                     <span class="org">{{ addressData.company.value }}</span>
                 </li>
                 <li>
-                    <a :href="locateAddress" target="google-maps" v-if="linkGoogleMaps"
-                       :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
-                        <span class="street-address" v-if="addressData.address.streetNo">{{ addressData.address.streetNo }}</span><br/>
-                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }} </span>
-                        <span class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span><br/>
-                        <span class="country-name" v-if="addressData.address.country">{{ addressData.address.country }}</span>
+                    <a v-if="linkGoogleMaps" :href="locateAddress" target="google-maps" :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
+                        <span v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
+                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
+                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
+                        <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                        <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
                     </a>
                     <template v-else>
-                        <span class="street-address" v-if="addressData.address.streetNo">{{ addressData.address.streetNo }}</span><br/>
-                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }} </span>
-                        <span class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span><br/>
-                        <span class="country-name" v-if="addressData.address.country">{{ addressData.address.country }}</span>
+                        <span  v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
+                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
+                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
+                        <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                        <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
                     </template>
                 </li>
                 <li v-if="addressData.telephone?.value">
@@ -137,19 +141,12 @@ export default {
             default: true
         },
         /**
-         * show a label-text
+         * show a label-text for each entry
          */
         showLabelTexts: {
             type: Boolean,
             default: true
         },
-        /**
-         * properties for CmdHeadline-component
-         */
-        cmdHeadline: {
-            type: Object,
-            required: false
-        },
         /**
          * option to toggle labels (i.e. telephone, email etc.) in front/left of data
          */
@@ -170,6 +167,13 @@ export default {
         linkGoogleMaps: {
             type: Boolean,
             default: false
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
         }
     },
     computed: {
@@ -186,13 +190,16 @@ export default {
     dl {
         grid-row-gap: calc(var(--default-gap) / 2);
 
-        dt, dd {
+        dt {
             display: flex;
             align-items: center;
+
+            &.address {
+                align-items: flex-start;
+            }
         }
     }
 
-
     ul {
         flex-direction: column;
         gap: calc(var(--default-gap) / 2);

package/src/components/CmdCompanyLogo.vue

@@ -13,7 +13,7 @@
 import {getRoute} from "../utilities.js"
 
 export default {
-    name: "CmdLogo",
+    name: "CmdCompanyLogo",
     data() {
         return {
             prefersColorScheme: ""

package/src/components/CmdFakeSelect.vue

@@ -478,6 +478,10 @@ export default {
                         margin-left: auto;
                         font-size: 1rem;
                     }
+
+                    &:hover, &:active, &:focus {
+                        background: var(--primary-color);
+                    }
                 }
             }
         }
@@ -605,7 +609,7 @@ export default {
                     }
 
                     &:hover, &:active, &:focus {
-                        background: var(--pure-white);
+                        background: var(--color-scheme-background-color);
 
                         span {
                             color: var(--status-color);

package/src/components/CmdFormElement.vue

@@ -20,24 +20,20 @@
            ref="label">
 
         <!-- begin label-text (+ required asterisk) -->
-        <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
+        <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
               :class="['label-text', !showLabel ? 'hidden' : undefined]">
-            <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+            <span v-if="labelText">{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+            <slot name="labeltext" />
 
             <!-- begin CmdTooltipForInputElements -->
             <CmdTooltipForInputElements
                 v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
                 ref="tooltip"
-                :showRequirements="showRequirements"
-                :inputRequirements="inputRequirements"
                 :validationStatus="validationStatus"
                 :validationMessage="getValidationMessage"
                 :validationTooltip="validationTooltip"
-                :inputAttributes="$attrs"
-                :inputModelValue="modelValue"
-                :helplink="helplink"
                 :relatedId="tooltipId"
-                :labelText="labelText"
+                :cmdListOfRequirements="listOfRequirements"
             />
             <!-- end CmdTooltipForInputElements -->
 
@@ -101,18 +97,18 @@
         <!-- begin checkbox and radiobutton -->
         <template v-else-if="element === 'input' && ($attrs.type === 'checkbox' || $attrs.type === 'radio')">
             <template v-if="!(onLabel && offLabel)">
-                    <input
-                        v-bind="elementAttributes"
-                        @change="onChange"
-                        @blur="onBlur"
-                        :checked="isChecked"
-                        :value="inputValue"
-                        :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
-                        :id="labelId"
-                        :disabled="$attrs.disabled"
-                        :aria-invalid="validationStatus === 'error'"
-                    />
-                    <span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
+                <input
+                    v-bind="elementAttributes"
+                    @change="onChange"
+                    @blur="onBlur"
+                    :checked="isChecked"
+                    :value="inputValue"
+                    :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
+                    :id="labelId"
+                    :disabled="$attrs.disabled"
+                    :aria-invalid="validationStatus === 'error'"
+                />
+                <span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
             </template>
 
             <!-- begin labels for toggle-switch with switch-label -->
@@ -211,7 +207,7 @@ import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
 export default {
     inheritAttrs: false,
-    name: "FormElement",
+    name: "CmdFormElement",
     components: {
         CmdTooltipForInputElements
     },
@@ -423,6 +419,16 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * text shown in front of character-count below textarea
+         *
+         * type-property must be set to textarea
+         * showCharactersTextarea-property must be activated
+         */
+        textCharacters: {
+            type: String,
+            default: "Characters"
+        },
         /**
          * toggle visibility of search-button (next to search-field)
          */
@@ -468,7 +474,7 @@ export default {
          * icon for error-validated items in list-of-requirements
          *
          * element-property must me set to 'input'
-         * showRequirements-property must be set to 'true'
+         * showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'
          *
          */
         iconHasStateError: {
@@ -485,7 +491,7 @@ export default {
          * icon for warning-validated items in list-of-requirements
          *
          * element-property must me set to 'input'
-         * showRequirements-property must be set to 'true'
+         * showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'
          *
          */
         iconHasStateWarning: {
@@ -502,7 +508,7 @@ export default {
          * icon for success-validated items in list-of-requirements
          *
          * element-property must me set to 'input'
-         * showRequirements-property must be set to 'true'
+         * showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'
          *
          */
         iconHasStateSuccess: {
@@ -519,7 +525,7 @@ export default {
          * icon for info-validated items in list-of-requirements
          *
          * element-property must me set to 'input'
-         * showRequirements-property must be set to 'true'
+         * showRequirements-subproperty (of CmdListOfRequirements) must be set to 'true'
          *
          */
         iconHasStateInfo: {
@@ -592,8 +598,32 @@ export default {
                 }
             }
         },
+        /**
+         * properties for CmdListOfRequirements-component
+         */
+        cmdListOfRequirements: {
+            type: Object,
+            default() {
+                return {}
+            }
+        }
     },
     computed: {
+        listOfRequirements() {
+            if (this.cmdListOfRequirements === undefined) {
+                return {
+                    showRequirements: true,
+                    showHeadline: true,
+                    validationTooltip: this.validationTooltip,
+                    inputRequirements: [],
+                    inputAttributes: this.$attrs,
+                    inputModelValue: this.modelValue,
+                    helplink: {},
+                    labelText: this.labelText
+                }
+            }
+            return this.cmdListOfRequirements
+        },
         elementAttributes() {
             const commonAttributes = ["name", "required", "readonly", "disabled", "autofocus"]
             const attributes = {
@@ -640,7 +670,7 @@ export default {
             return false
         },
         charactersTextarea() {
-            return "Characters: " + this.modelValue.length + "/" + this.getMaxLength()
+            return this.textCharacters + " " + this.modelValue.length + "/" + this.getMaxLength()
         },
         validationTooltip() {
             if (!this.useCustomTooltip) {

package/src/components/CmdListOfRequirements.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-list-of-requirements">
         <!-- begin cmd-custom-headline -->
-        <CmdHeadline :headline-level="cmdHeadline.headlineLevel">
+        <CmdHeadline v-if="showHeadline" :headline-level="cmdHeadline.headlineLevel">
             {{ headlineRequirements }}<template v-if="labelText"><br/><em>{{ labelText }}</em></template>
         </CmdHeadline>
         <!-- end cmd-custom-headline -->
@@ -94,7 +94,7 @@ export default {
          * set a helplink to a different page for further support
          */
         helplink: {
-            type: String,
+            type: Object,
             required: false
         },
         /**
@@ -121,6 +121,13 @@ export default {
                 }
             }
         },
+        /**
+        * toggle headline-visibility
+        */
+        showHeadline: {
+            type: Boolean,
+            default: true
+        },
         /**
          * properties of CmdHeadline-component
          */

package/src/components/CmdMainNavigation.vue

@@ -1,5 +1,6 @@
 <template>
     <div
+        v-if="navigationEntries.length"
         :class="[
             'cmd-main-navigation main-navigation-wrapper',
             {
@@ -297,7 +298,6 @@ export default {
 @media only screen and (max-width: $medium-max-width) {
     .cmd-main-navigation {
         --nav-transition: all .5s linear;
-
         display: flex;
         background: none; /* overwrite framework-css */
         border: 0; /* overwrite framework-css */
@@ -340,7 +340,7 @@ export default {
             }
 
             nav {
-                --nav-width: 30%;
+                --nav-width: 33%;
 
                 position: fixed;
                 top: 0;
@@ -439,7 +439,7 @@ export default {
                                     > a {
                                         span {
                                             + span[class*="icon"]::before {
-                                                transform: rotate(90deg);
+
                                             }
                                         }
                                     }
@@ -448,7 +448,7 @@ export default {
                                         > a {
                                             span {
                                                 + span[class*="icon"]::before {
-                                                    transform: rotate(-90deg);
+
                                                 }
                                             }
                                         }

package/src/components/CmdOpeningHours.vue

@@ -42,15 +42,10 @@ import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdOpeningHours",
-    components: {CmdHeadline},
+    components: {
+        CmdHeadline
+    },
     props: {
-        /**
-         * properties for CmdHeadline-component
-         */
-        cmdHeadline: {
-            type: Object,
-            required: false
-        },
         /**
          * set a link to a detail page
          */
@@ -94,6 +89,13 @@ export default {
         textMiscInfo: {
             type: String,
             required: false
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
         }
     }
 }

package/src/components/CmdShareButtons.vue

@@ -49,7 +49,7 @@ export default {
             required: false
         },
         /**
-         * activate if page to share is not given by json-data)
+         * activate if page to share is not given by json-data
          */
         appendPage: {
             type: Boolean,

package/src/components/CmdSlideButton.vue

@@ -1,7 +1,7 @@
 <template>
     <a href="#"
        @click.prevent
-       :class="['cmd-slide-button', 'button', slideButtonType ? slideButtonType : 'next']"
+       :class="['cmd-slide-button', 'button', slideButtonType]"
        :title="getDirection.tooltip">
         <span :class="getDirection.iconClass || 'next'"></span>
     </a>

package/src/components/CmdSwitchLanguage.vue

@@ -4,18 +4,18 @@
             <li v-for="(language, index) in languages" :key="index">
                 <!-- begin link-type 'href' -->
                 <a v-if="language.link.type === 'href'" :href="language.link.path"
-                   :class="['flag', language.iso2, {'active': language.active}]"
+                   :class="['flag', language.iso2, {'active': activeLanguage(language)}]"
                    :title="language.tooltip"
                    @click="$emit('click', { originalEvent:  $event, language} )">
                     <img :src="getFlagURL(language.iso2)" :alt="language.name" />
                 </a>
-                <!-- end link-type 'href -->
+                <!-- 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', { originalEvent:  $event, language})">
+                     :class="['flag', language.iso2]"
+                     :to="getRoute(language)" :title="language.tooltip"
+                     @click="$emit('click', { originalEvent:  $event, language})">
                     <img :src="getFlagURL(language.iso2)" :alt="language.name" />
                 </router-link>
                 <!-- end link-type 'router' -->
@@ -45,6 +45,11 @@ export default {
         },
         getFlagURL(isoCode) {
             return require("../assets/images/flags/flag-" + isoCode + ".svg")
+        },
+        activeLanguage(language) {
+            if(language.active || language.iso2 === navigator.language) {
+                return true
+            }
         }
     }
 }
@@ -61,6 +66,14 @@ export default {
         li {
             list-style-type: none;
             margin: 0;
+
+            a:not(.active) {
+                filter: contrast(.5);
+
+                &:hover, &:focus, &:active {
+                    filter: none;
+                }
+            }
         }
     }
 }

package/src/components/CmdTable.vue

@@ -194,19 +194,12 @@ export default {
         gap: calc(var(--default-gap) / 2);
 
         .button {
-            background: none;
             padding: 0;
             min-width: 2rem;
             min-height: 2rem;
-            background: var(--pure-white);
 
             span[class*="icon"] {
-                color: var(--primary-color);
                 font-size: 1rem;
-
-                &:hover, &:active, &:focus {
-                    color: var(--hyperlink-color-highlighted);
-                }
             }
         }
     }