comand-component-library 3.1.83 → 3.1.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.83",
+  "version": "3.1.86",
   "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>
@@ -459,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">

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">
@@ -189,6 +193,10 @@ export default {
         dt {
             display: flex;
             align-items: center;
+
+            &.address {
+                align-items: flex-start;
+            }
         }
     }
 

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

@@ -29,16 +29,11 @@
             <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 -->
 
@@ -102,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 -->
@@ -479,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: {
@@ -496,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: {
@@ -513,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: {
@@ -530,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: {
@@ -602,9 +597,33 @@ export default {
                     iconClass: "icon-not-visible",
                 }
             }
+        },
+        /**
+         * 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 = {

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 -->
@@ -121,6 +121,13 @@ export default {
                 }
             }
         },
+        /**
+        * toggle headline-visibility
+        */
+        showHeadline: {
+            type: Boolean,
+            default: true
+        },
         /**
          * properties of CmdHeadline-component
          */

package/src/components/CmdMainNavigation.vue

@@ -19,7 +19,7 @@
                     </a>
                 </li>
                 <li v-for="(navigationEntry, index) in navigationEntries" :key="index"
-                    :class="{'open' : navigationEntry.open, 'has-subentries': navigationEntry.subentries}">
+                    :class="{'open' : navigationEntry.open, 'has-subentries': navigationEntry?.subentries?.length}">
                     <!-- begin type === href -->
                     <a
                        v-if="navigationEntry.type === 'href'"
@@ -30,7 +30,7 @@
                     >
                         <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
                         <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
-                        <span v-if="navigationEntry.subentries && navigationEntry.subentries.length > 0"
+                        <span v-if="navigationEntry?.subentries?.length"
                               :class="subentriesIconClass"
                         ></span>
                     </a>
@@ -52,7 +52,7 @@
                     <!-- end type === router -->
 
                     <!-- begin sub-level 1 -->
-                    <ul v-if="navigationEntry.subentries" aria-expanded="true">
+                    <ul v-if="navigationEntry?.subentries?.length" aria-expanded="true">
                         <li v-for="(navigationSubEntry, subindex) in navigationEntry.subentries" :key="subindex"
                             :class="{'open' : navigationSubEntry.open}">
                             <!-- begin type === href -->
@@ -297,7 +297,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 +339,7 @@ export default {
             }
 
             nav {
-                --nav-width: 30%;
+                --nav-width: 33%;
 
                 position: fixed;
                 top: 0;
@@ -439,7 +438,7 @@ export default {
                                     > a {
                                         span {
                                             + span[class*="icon"]::before {
-                                                transform: rotate(90deg);
+
                                             }
                                         }
                                     }
@@ -448,7 +447,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/CmdSiteHeader.vue

@@ -32,13 +32,6 @@ export default {
         CmdMainNavigation
     },
     props: {
-        /**
-         * properties for CmdMainNavigation-component
-         */
-        cmdMainNavigation: {
-            type: Object,
-            required: true
-        },
         /**
          * use only if default-button of inner navigation-component should not be used
          */
@@ -61,6 +54,13 @@ export default {
         useGrid: {
             type: Boolean,
             default: true
+        },
+        /**
+         * properties for CmdMainNavigation-component
+         */
+        cmdMainNavigation: {
+            type: Object,
+            required: true
         }
     }
 }

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/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);
-                }
             }
         }
     }

package/src/components/CmdTooltip.vue

@@ -177,7 +177,7 @@ export default {
     line-height: 100%;
     font-size: 1.1rem;
     position: fixed;
-    background: var(--pure-white);
+    background: var(--color-scheme-background-color);
     z-index: 100;
     border: var(--default-border);
     border-color: hsl(220, 2%, 25%);

package/src/components/CmdTooltipForInputElements.vue

@@ -18,13 +18,14 @@
 
         <!-- begin CmdListOfRequirements -->
         <CmdListOfRequirements
-            v-if="showRequirements"
-            :inputRequirements="inputRequirements"
-            :helplink="helplink"
-            :inputModelValue="inputModelValue"
-            :inputAttributes="inputAttributes"
-            :validationTooltip="validationTooltip"
-            :labelText="labelText"
+            v-if="cmdListOfRequirements.showRequirements"
+            :showHeadline="cmdListOfRequirements.showHeadline"
+            :inputRequirements="cmdListOfRequirements.inputRequirements"
+            :helplink="cmdListOfRequirements.helplink"
+            :inputModelValue="cmdListOfRequirements.inputModelValue"
+            :inputAttributes="cmdListOfRequirements.inputAttributes"
+            :validationTooltip="cmdListOfRequirements.validationTooltip"
+            :labelText="cmdListOfRequirements.labelText"
         />
         <!-- end CmdListOfRequirements -->
     </CmdTooltip>
@@ -45,13 +46,6 @@ export default {
         CmdTooltip
     },
     props: {
-        /**
-         * text for label (used in headline)
-         */
-        labelText: {
-            type: String,
-            required: false
-        },
         /**
          * related-id for CmdTooltip-component
          */
@@ -74,50 +68,22 @@ export default {
             default: ""
         },
         /**
-         * toggle visibility for CmdListOfRequirements-component
-         */
-        showRequirements: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * validation-tooltip for CmdListOfRequirements-component
+         * properties for CmdListOfRequirements-component
          */
-        validationTooltip: {
-            type: String,
-            default: ""
-        },
-        /**
-         * list of input-requirements for CmdListOfRequirements-component
-         */
-        inputRequirements: {
-            type: Array,
-            default() {
-                return []
-            }
-        },
-        /**
-         * input-attributes for CmdListOfRequirements-component
-         */
-        inputAttributes: {
+        cmdListOfRequirements: {
             type: Object,
             default() {
-                return {}
+                return {
+                    showRequirements: true,
+                    validationTooltip: "",
+                    inputRequirements: [],
+                    inputAttributes: {},
+                    showHeadline: true,
+                    inputModelValue: "",
+                    helplink: {},
+                    labelText: ""
+                }
             }
-        },
-        /**
-         * input-model-value for CmdListOfRequirements-component
-         */
-        inputModelValue: {
-            type: [String, Boolean, Array, Number],
-            default: ""
-        },
-        /**
-         * helplink for CmdListOfRequirements-component
-         */
-        helplink: {
-            type: Object,
-            required: false
         }
     },
     methods: {

package/src/documentation/generated/CmdFormElementPropertyDescriptions.json

@@ -193,7 +193,7 @@
             "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'",
             ""
         ]
     },
@@ -202,7 +202,7 @@
             "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'",
             ""
         ]
     },
@@ -211,7 +211,7 @@
             "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'",
             ""
         ]
     },
@@ -220,7 +220,7 @@
             "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'",
             ""
         ]
     },
@@ -262,5 +262,10 @@
             "type-property must be set to 'password'",
             ""
         ]
+    },
+    "cmdListOfRequirements": {
+        "comments": [
+            "properties for CmdListOfRequirements-component"
+        ]
     }
 }

package/src/documentation/generated/CmdListOfRequirementsPropertyDescriptions.json

@@ -34,6 +34,11 @@
             "icon to show error-status"
         ]
     },
+    "showHeadline": {
+        "comments": [
+            "toggle headline-visibility"
+        ]
+    },
     "cmdHeadline": {
         "comments": [
             "properties of CmdHeadline-component"

package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json

@@ -1,9 +1,4 @@
 {
-    "cmdHeadline": {
-        "comments": [
-            "properties for CmdHeadline-component"
-        ]
-    },
     "link": {
         "comments": [
             "set a link to a detail page"
@@ -38,5 +33,10 @@
         "comments": [
             "additional/miscellaneous text (shown below holiday-closed-text/opening hours)"
         ]
+    },
+    "cmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ]
     }
 }