comand-component-library 3.1.77 → 3.1.80

package/package.json

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

package/src/App.vue

@@ -49,6 +49,7 @@
                     <li><a href="#section-tables">Tables</a></li>
                     <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-upload-form">Upload-Form</a></li>
                 </ul>
             </div>
@@ -86,7 +87,6 @@
                 <fieldset class="grid-container-create-columns">
                     <legend>Legend</legend>
                     <h2>Form Element-Component</h2>
-                    <CmdToggleDarkMode :showLabel="true"/>
                     <div class="flex-container">
                         <CmdFormElement labelText="Input (type text):"
                                         element="input"
@@ -457,6 +457,10 @@
                         checkbox with boolean: {{ checkboxValue }}<br/>
                         checkboxes with values: {{ checkboxValues }}
                     </p>
+                    <h3>Toggle Dark-Mode</h3>
+                    <a id="section-toggle-darkmode"></a>
+                    <CmdToggleDarkMode :showLabel="true"/>
+                    <CmdToggleDarkMode :showLabel="false" :use-styled-layout="true" />
                     <h2>Checkboxes and Radiobuttons</h2>
                     <h3>Checkboxes [native]</h3>
                     <div class="label inline">
@@ -844,13 +848,13 @@
             <h3>Product boxes</h3>
             <div class="grid-container-create-columns">
                 <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
-                    <CmdBox boxType="product" :product="product" :CmdHeadline="{headlineLevel: 4}"/>
+                    <CmdBox boxType="product" :product="product" :cmdHeadline="{headlineLevel: 4}"/>
                 </div>
             </div>
             <h3>User boxes</h3>
             <div class="grid-container-create-columns">
                 <div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
-                    <CmdBox boxType="user" :user="user" :CmdHeadline="{headlineLevel: 4}"/>
+                    <CmdBox boxType="user" :user="user" :cmdHeadline="{headlineLevel: 4}"/>
                 </div>
             </div>
             <h3>Box Site Search</h3>
@@ -896,7 +900,7 @@
         <!-- begin custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
         <a id="section-custom-headline"></a>
         <CmdWidthLimitationWrapper>
-            <h2 class="headline-demopage">Custom Headline</h2>
+            <h2 class="headline-demopage">Headline</h2>
             <CmdHeadline icon-class="icon-home" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
             <CmdHeadline headlineText="Headline level 2" :headlineLevel="2"/>
             <CmdHeadline headlineText="Headline level 3" :headlineLevel="3"/>
@@ -1106,7 +1110,7 @@
                            :uploadOptions="{url: 'http://localhost:8888'}"
             />
             <h3>Advanced mode</h3>
-            <CmdUploadForm :CmdHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
+            <CmdUploadForm :cmdHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
                            :enableDragAndDrop="true"
                            :allowedFileExtensions="['jpg', 'png']"
                            :allowMultipleFileUploads="true"
@@ -1120,18 +1124,18 @@
         <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
         <div class="flex-container">
             <CmdListOfLinks :links="listOfLinksData"
-                            :CmdHeadline="{headlineText: 'List of links', headlineLevel: 6}"
+                            :cmdHeadline="{headlineText: 'List of links', headlineLevel: 6}"
             />
             <CmdOpeningHours :openingHours="openingHoursData"
                              :closed="true"
-                             :CmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
+                             :cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
                              textOpenClosed="Closed right now!"
                              textHolidaysClosed="Closed on holidays"
                              textMiscInfo="Miscellaneous information"
             />
             <CmdAddressData :addressData="addressData"
                             :linkGoogleMaps="true"
-                            :CmdHeadline="{headlineText: 'Address data', headlineLevel: 6}"
+                            :cmdHeadline="{headlineText: 'Address data', headlineLevel: 6}"
             />
         </div>
     </CmdSiteFooter>

package/src/components/CmdAddressData.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-address-data vcard">
         <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="CmdHeadline" v-bind="CmdHeadline" />
+        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
         <!-- end CmdHeadline -->
 
         <!-- begin address-data in vCard microformat -->

package/src/components/CmdBankAccountData.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-bank-account-data">
         <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="CmdHeadline" v-bind="CmdHeadline"/>
+        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
         <!-- end CmdHeadline -->
 
         <!-- begin account data -->
@@ -90,6 +90,7 @@ export default {
 </script>
 
 <style lang="scss">
+/* begin cmd-bank-account-data ---------------------------------------------------------------------------------------- */
 .cmd-bank-account-data {
     dd.flex-container {
         gap: calc(var(--default-gap) / 2);
@@ -101,4 +102,5 @@ export default {
         }
     }
 }
+/* end cmd-bank-account-data ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdBox.vue

@@ -23,16 +23,17 @@
             <!-- begin header for collapsible -->
             <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
                 <!-- begin CmdHeadline -->
-                <CmdHeadline v-if="CmdHeadline?.headlineText" v-bind="CmdHeadline"/>
+                <CmdHeadline v-if="cmdHeadline?.headlineText" v-bind="cmdHeadline" />
                 <!-- end CmdHeadline -->
                 <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
             </a>
             <!-- end header for collapsible -->
 
             <!-- begin CmdHeadline -->
-            <CmdHeadline v-else-if="!collapsible && CmdHeadline?.headlineText"
-                               class="box-header"
-                               v-bind="CmdHeadline"
+            <CmdHeadline
+                v-else-if="!collapsible && cmdHeadline?.headlineText"
+                class="box-header"
+                v-bind="cmdHeadline"
             />
             <!-- end CmdHeadline -->
         </template>
@@ -68,9 +69,10 @@
                 <span>{{ product.discount }}</span>
             </div>
             <!-- begin CmdHeadline -->
-            <CmdHeadline v-if="CmdHeadline?.headlineText || product.name"
-                               v-bind="CmdHeadline || {}"
-                               :headlineText="CmdHeadline?.headlineText ? CmdHeadline?.headlineText : product.name"/>
+            <CmdHeadline
+                v-if="cmdHeadline?.headlineText || product.name"
+                v-bind="cmdHeadline || {}"
+                :headlineText="cmdHeadline?.headlineText ? cmdHeadline?.headlineText : product.name"/>
             <!-- end CmdHeadline -->
         </div>
         <div class="box-body">
@@ -85,13 +87,15 @@
 
     <!-- begin boxType 'user' -->
     <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically}]">
-        <div class="box-header">
+        <div class="box-header flex-container vertical">
             <img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
             <div v-else :class="defaultProfileIconClass" :title="user.name"></div>
             <!-- begin CmdHeadline -->
-            <CmdHeadline v-if="CmdHeadline?.headlineText || user.name"
-                               v-bind="CmdHeadline || {}"
-                               :headlineText="CmdHeadline?.headlineText ? CmdHeadline?.headlineText : user.name"/>
+            <CmdHeadline
+                v-if="cmdHeadline?.headlineText || user.name"
+                v-bind="cmdHeadline || {}"
+                :headlineText="cmdHeadline?.headlineText ? cmdHeadline?.headlineText : user.name"
+            />
             <!-- end CmdHeadline -->
         </div>
         <div class="box-body">
@@ -336,6 +340,14 @@ export default {
                 font-size: 1rem;
                 margin-left: auto;
             }
+
+            &:hover, &:active, &:focus {
+                background: var(--pure-white);
+
+                > * {
+                    color: var(--primary-color);
+                }
+            }
         }
 
         .box-body {
@@ -424,7 +436,6 @@ export default {
                 color: var(--pure-white);
                 text-transform: uppercase;
                 text-align: center;
-                box-shadow: var(--box-shadow);
             }
         }
 
@@ -445,6 +456,10 @@ export default {
                 display: table;
                 margin: 0 auto;
             }
+
+            > img {
+                border: 0;
+            }
         }
 
         .box-body {
@@ -473,6 +488,13 @@ export default {
         > .box-header {
             padding: var(--default-padding);
 
+            .cmd-headline  {
+                > * {
+                    display: block;
+                    text-align: center;
+                }
+            }
+
             > img, > div:first-child {
                 display: table;
                 margin: 0 auto;

package/src/components/CmdBoxSiteSearch.vue

@@ -6,8 +6,8 @@
 
         <!-- begin CmdHeadline -->
         <CmdHeadline
-            v-if="CmdHeadline"
-            v-bind="CmdHeadline"
+            v-if="cmdHeadline"
+            v-bind="cmdHeadline"
         />
         <!-- end CmdHeadline -->
 

package/src/components/CmdCookieDisclaimer.vue

@@ -3,10 +3,10 @@
         <div class="cmd-cookie-disclaimer flex-container vertical">
             <!-- begin CmdHeadline -->
             <CmdHeadline
-                v-if="CmdHeadlineCookieDisclaimer?.show && CmdHeadlineCookieDisclaimer?.headlineText && CmdHeadlineCookieDisclaimer?.headlineLevel"
-                v-bind="CmdHeadlineCookieDisclaimer"
-                :headlineText="CmdHeadlineCookieDisclaimer.headlineText"
-                :headlineLevel="CmdHeadlineCookieDisclaimer.headlineLevel"
+                v-if="cmdHeadlineCookieDisclaimer?.show && cmdHeadlineCookieDisclaimer?.headlineText && cmdHeadlineCookieDisclaimer?.headlineLevel"
+                v-bind="cmdHeadlineCookieDisclaimer"
+                :headlineText="cmdHeadlineCookieDisclaimer.headlineText"
+                :headlineLevel="cmdHeadlineCookieDisclaimer.headlineLevel"
             />
             <!-- end CmdHeadline -->
 
@@ -151,7 +151,7 @@ export default {
         /**
          * properties for CmdHeadline-component at top of cookie disclaimer
          */
-        CmdHeadlineCookieDisclaimer: {
+        cmdHeadlineCookieDisclaimer: {
             type: Object,
             default() {
                 return {
@@ -237,14 +237,20 @@ export default {
 
             // push all required cookies to array
             const requiredCookies = this.cookieOptions?.required?.cookies
-            for(let i = 0; i < requiredCookies.length ; i++) {
-                allCookies.push(requiredCookies[i].value)
+
+            if (requiredCookies) {
+                for (let i = 0; i < requiredCookies.length; i++) {
+                    allCookies.push(requiredCookies[i].value)
+                }
             }
 
             // push all optional cookies to array
             const optionalCookies = this.cookieOptions?.optional?.cookies
-            for(let i = 0; i < optionalCookies.length ; i++) {
-                allCookies.push(optionalCookies[i].value)
+
+            if (optionalCookies) {
+                for (let i = 0; i < optionalCookies.length; i++) {
+                    allCookies.push(optionalCookies[i].value)
+                }
             }
 
             this.$emit("close-cookie-disclaimer", allCookies)

package/src/components/CmdFakeSelect.vue

@@ -444,6 +444,7 @@ export default {
 
 .cmd-fake-select {
     align-self: flex-end;
+    border-radius: var(--border-radius);
 
     > span:first-child {
         a {
@@ -456,7 +457,6 @@ export default {
         margin: 0;
         display: block;
         min-width: 0;
-        background: var(--color-scheme-background-color);
         box-shadow: none;
         border-radius: var(--border-radius);
 
@@ -467,6 +467,7 @@ export default {
                 > a {
                     height: inherit;
                     border: var(--default-border);
+                    background: var(--color-scheme-background-color);
 
                     .option-name {
                         text-overflow: ellipsis;

package/src/components/CmdForm.vue

@@ -1,7 +1,7 @@
 <template>
-    <form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}">
+    <form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
         <template v-if="useFieldset">
-            <fieldset>
+            <fieldset class="flex-container">
                 <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
                 <!-- begin default-slot-content -->
                 <slot></slot>
@@ -29,6 +29,13 @@ export default {
         }
     },
     props: {
+        /**
+         * deactivate if browser-validation should be used
+         */
+        novalidate: {
+          type: Boolean,
+          default: true
+        },
         /**
          * if activated the entire form will be validated by pre-coded validation
          *

package/src/components/CmdFormElement.vue

@@ -37,6 +37,7 @@
                 :inputModelValue="modelValue"
                 :helplink="helplink"
                 :relatedId="tooltipId"
+                :labelText="labelText"
             />
             <!-- end CmdTooltipForInputElements -->
 
@@ -113,6 +114,7 @@
                     />
                     <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 -->
             <template v-else-if="onLabel && offLabel">
                 <span class="switch-label-wrapper">
@@ -830,6 +832,11 @@ export default {
             z-index: 100;
         }
 
+        input:not(:only-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
         a.button {
             & + a[class*="icon"] {
                 right: 5rem;

package/src/components/CmdHeadline.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-custom-headline', { 'has-pre-headline-text': preHeadlineText}]">
+    <div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText, 'has-icon': iconClass}]">
         <span v-if="iconClass" :class="iconClass"></span>
         <div v-if="preHeadlineText">
             <span class="pre-headline-text">{{ preHeadlineText }}</span>
@@ -48,22 +48,28 @@ export default {
     },
     computed: {
         getHeadlineTag() {
-            return "h" + this.headlineLevel
+            if(this.headlineLevel) {
+                return "h" + this.headlineLevel
+            }
+            return "h3"
         }
     }
 }
 </script>
 
 <style lang="scss">
+/* begin cmd--headline ------------------------------------------------------------------------------------------ */
 @import '../assets/styles/variables';
 
-/* begin cmd-custom-headline ------------------------------------------------------------------------------------------ */
-.cmd-custom-headline {
-    display: flex;
-    align-items: center;
+.cmd-headline {
     margin-bottom: var(--default-margin);
     gap: calc(var(--default-gap) / 2);
 
+    &.has-icon {
+        display: flex;
+        align-items: center;
+    }
+
     &.has-pre-headline-text {
         [class*="icon"] {
             font-size: 5rem;
@@ -76,8 +82,11 @@ export default {
 
     h1, h2, h3, h4, h5, h6 {
         margin: 0;
-        display: flex;
-        align-items: center;
+
+        &:only-child {
+            flex: none;
+            width: 100%;
+        }
     }
 
     @media only screen and ($small-max-width) {
@@ -88,6 +97,5 @@ export default {
         }
     }
 }
-
-/* end cmd-custom-headline ------------------------------------------------------------------------------------------ */
+/* end cmd-headline ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdListOfLinks.vue

@@ -1,8 +1,10 @@
 <template>
     <div :class="['cmd-list-of-links', 'align-' + align, {box: styleAsBox, horizontal: orientation === 'horizontal', 'section-anchors': sectionAnchors}]">
         <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="CmdHeadline"
-                           v-bind="CmdHeadline" />
+        <CmdHeadline
+            v-if="cmdHeadline"
+            v-bind="cmdHeadline"
+        />
         <!-- end CmdHeadline -->
 
         <!-- begin list of links -->

package/src/components/CmdListOfRequirements.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="cmd-list-of-requirements">
         <!-- begin cmd-custom-headline -->
-        <CmdHeadline :headline-level="CmdHeadline.headlineLevel">
-            <!-- {{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}" -->
+        <CmdHeadline :headline-level="cmdHeadline.headlineLevel">
+            {{ headlineRequirements }}<template v-if="labelText"><br/><em>{{ labelText }}</em></template>
         </CmdHeadline>
         <!-- end cmd-custom-headline -->
 
@@ -13,8 +13,8 @@
                 <dd :class="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'">
                     <span
                         aria-live="assertive"
-                        :class="requirement.valid(inputModelValue, inputAttributes) ? 'icon-check-circle' : 'icon-error-circle'"
-                        :title="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'"
+                        :class="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.iconClass : iconError.iconClass"
+                        :title="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.tooltip : iconError.tooltip"
                     >
                     </span>
                 </dd>
@@ -48,11 +48,19 @@
 // import components
 import CmdHeadline from "./CmdHeadline"
 
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdListOfRequirements/DefaultMessageProperties"
+
 export default {
     name: "CmdListOfRequirements",
     components: {
         CmdHeadline
     },
+    mixins: [
+        I18n,
+        DefaultMessageProperties
+    ],
     props: {
         /**
         * property to check validity of given modelValue
@@ -69,7 +77,7 @@ export default {
             required: true
         },
         /**
-         * text for label
+         * text for label (used in headline)
          */
         labelText: {
             type: String,
@@ -89,6 +97,30 @@ export default {
             type: String,
             required: false
         },
+        /**
+         * icon to show success-status
+         */
+        iconSuccess: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-check-circle",
+                    tooltip: "success"
+                }
+            }
+        },
+        /**
+         * icon to show error-status
+         */
+        iconError: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-error-circle",
+                    tooltip: "error"
+                }
+            }
+        },
         /**
          * properties of CmdHeadline-component
          */
@@ -100,6 +132,14 @@ export default {
                 }
             }
         }
+    },
+    computed: {
+        headlineRequirements() {
+            if (this.inputRequirements.length > 1) {
+                return this.getMessage("cmdlistofrequirements.headline.requirements_for_input")
+            }
+            return this.getMessage("cmdlistofrequirements.headline.requirement_for_input")
+        }
     }
 }
 </script>

package/src/components/CmdLoginForm.vue

@@ -3,8 +3,8 @@
     <fieldset v-if="!sendLogin" class="cmd-login-form flex-container">
         <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
         <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="CmdHeadlineLoginForm"
-                           v-bind="CmdHeadlineLoginForm"/>
+        <CmdHeadline v-if="cmdHeadlineLoginForm"
+                           v-bind="cmdHeadlineLoginForm"/>
         <!-- end CmdHeadline -->
 
         <!-- being form elements -->
@@ -122,11 +122,11 @@
     <fieldset v-else class="cmd-login-form flex-container">
         <legend :class="{'hidden' : !legendSendLoginForm.show}">{{ legendSendLoginForm.text }}</legend>
         <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="CmdHeadlineSendLoginForm"
-                           :iconClass="CmdHeadlineSendLoginForm.iconClass"
-                           :preHeadline="CmdHeadlineSendLoginForm.preHeadline"
-                           :headlineLevel="CmdHeadlineSendLoginForm.preHeadline"
-                           :headlineText="CmdHeadlineSendLoginForm.headlineText"/>
+        <CmdHeadline v-if="cmdHeadlineSendLoginForm"
+                           :iconClass="cmdHeadlineSendLoginForm.iconClass"
+                           :preHeadline="cmdHeadlineSendLoginForm.preHeadline"
+                           :headlineLevel="cmdHeadlineSendLoginForm.preHeadline"
+                           :headlineText="cmdHeadlineSendLoginForm.headlineText"/>
         <!-- end CmdHeadline -->
 
         <!-- begin CmdFormElement -->
@@ -272,14 +272,14 @@ export default {
         /**
          * properties for CmdHeadline-component for login-form
          */
-        CmdHeadlineLoginForm: {
+        cmdHeadlineLoginForm: {
             type: Object,
             required: false
         },
         /**
          * properties for CmdHeadline-component for send-login-form
          */
-        CmdHeadlineSendLoginForm: {
+        cmdHeadlineSendLoginForm: {
             type: Object,
             default() {
                 return {
@@ -439,6 +439,7 @@ export default {
 </script>
 
 <style lang="scss">
+/* begin cmd-login-form ---------------------------------------------------------------------------------------- */
 .cmd-login-form {
     .option-wrapper {
         align-items: center;
@@ -460,4 +461,5 @@ export default {
         }
     }
 }
+/* end cmd-login-form ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdMainNavigation.vue

@@ -19,7 +19,7 @@
                     </a>
                 </li>
                 <li v-for="(navigationEntry, index) in navigationEntries" :key="index"
-                    :class="{'open' : navigationEntry.open}">
+                    :class="{'open' : navigationEntry.open, 'has-subentries': navigationEntry.subentries}">
                     <!-- begin type === href -->
                     <a
                        v-if="navigationEntry.type === 'href'"

package/src/components/CmdOpeningHours.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-opening-hours">
         <!-- begin cmd-custom-headline -->
-        <CmdHeadline v-if="CmdHeadline" v-bind="CmdHeadline" />
+        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
         <!-- end cmd-custom-headline -->
 
         <!-- begin opening-status with link to detail-page -->

package/src/components/CmdSlideButton.vue

@@ -105,6 +105,7 @@ export default {
         &.up, &.down {
             width: 100%;
             height: auto;
+            height: auto;
             left: 0;
             top: 0;
         }

package/src/components/CmdTabs.vue

@@ -122,6 +122,8 @@ export default {
                 display: block;
                 padding: var(--default-padding);
                 color: var(--color-scheme-text-color);
+                border-top-left-radius: var(--border-radius);
+                border-top-right-radius: var(--border-radius);
 
                 &:hover, &:active, &:focus {
                     cursor: pointer;