comand-component-library 3.1.91 → 3.1.92

package/package.json

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

package/src/App.vue

@@ -36,26 +36,27 @@
                         <li><a href="#section-boxes">Boxes</a></li>
                         <li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
                         <li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
+                        <li><a href="#section-custom-headline">Custom Headline</a></li>
                     </ul>
                     <ul>
-                        <li><a href="#section-custom-headline">Custom Headline</a></li>
                         <li><a href="#section-fancybox">Fancybox</a></li>
                         <li><a href="#section-google-maps-integration">Google-Maps&trade;-Integration</a></li>
                         <li><a href="#section-image-gallery">Image Gallery</a></li>
                         <li><a href="#section-image-zoom">Image-Zoom</a></li>
                         <li><a href="#section-login-form">Login Form</a></li>
-                    </ul>
-                    <ul>
                         <li><a href="#section-main-navigation">Main-Navigation</a></li>
                         <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
+                    </ul>
+                    <ul>
                         <li><a href="#section-pager">Pager</a></li>
                         <li><a href="#section-share-buttons">Share Buttons</a></li>
+                        <li><a href="#section-site-search">Site Search</a></li>
                         <li><a href="#section-slideshow">Slideshow</a></li>
                         <li><a href="#section-system-message">System-Message</a></li>
-                    </ul>
-                    <ul>
                         <li><a href="#section-tables">Tables</a></li>
                         <li><a href="#section-tabs">Tabs</a></li>
+                    </ul>
+                    <ul>
                         <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>
@@ -840,7 +841,7 @@
                         </CmdBox>
                     </div>
                     <div class="grid-small-item">
-                        <CmdBox :cmdHeadline="{headlineText: 'nase', headlineLevel: 4}" :collapsible="true" :stretchVertically="false">
+                        <CmdBox :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true" :stretchVertically="false">
                             <template v-slot:header>
                                 <h3>
                                     Collapsible box with image
@@ -885,25 +886,6 @@
                         <CmdBox boxType="user" :user="user" :cmdHeadline="{headlineLevel: 4}"/>
                     </div>
                 </div>
-                <h3>Box Site Search</h3>
-                <CmdBoxSiteSearch
-                    v-model:modelValueInput1="siteSearchInput1"
-                    v-model:modelValueInput2="siteSearchInput2"
-                    v-model:modelValueRadius="radius"
-                    v-model:modelValueSearchFilters="filters"
-                    @search="siteSearchOutput"
-                    textLegend="Search"
-                    :cmdFakeSelect="siteSearchFilters"/>
-                <dl>
-                    <dt>siteSearchInput1:</dt>
-                    <dd>{{ siteSearchInput1 }}</dd>
-                    <dt>siteSearchInput2:</dt>
-                    <dd>{{ siteSearchInput2 }}</dd>
-                    <dt>Radius:</dt>
-                    <dd>{{ radius }}</dd>
-                    <dt>Filters:</dt>
-                    <dd>{{ filters }}</dd>
-                </dl>
             </CmdWidthLimitationWrapper>
             <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -973,7 +955,9 @@
             <a id="section-login-form"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Login Form</h2>
-                <CmdLoginForm v-model="loginData" v-focus/>
+                <CmdForm :use-validation="true" :use-fieldset="false">
+                    <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in" />
+                </CmdForm>
                 <p>LoginData: {{ loginData }}</p>
             </CmdWidthLimitationWrapper>
 
@@ -1019,7 +1003,7 @@
             <a id="section-newsletter-subscription"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Newsletter Subscription</h2>
-                <CmdForm textLegend="Stay-up-to-date">
+                <CmdForm textLegend="Stay-up-to-date" :use-fieldset="false">
                     <CmdNewsletterSubscription v-model="newsletter" buttonType="submit" @buttonClick="submitNewsletterRegistration" />
                 </CmdForm>
             </CmdWidthLimitationWrapper>
@@ -1048,6 +1032,22 @@
             </CmdWidthLimitationWrapper>
             <!-- end share-buttons ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-site-search"></a>
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage">Site Search</h2>
+                <CmdSiteSearch
+                    v-model:modelValueInput1="siteSearchInput1"
+                    v-model:modelValueInput2="siteSearchInput2"
+                    v-model:modelValueRadius="radius"
+                    v-model:modelValueSearchFilters="filters"
+                    @search="siteSearchOutput"
+                    textLegend="Search"
+                    :cmdFakeSelect="siteSearchFilters"
+                />
+            </CmdWidthLimitationWrapper>
+            <!-- end site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
             <!-- begin slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-slideshow"></a>
             <CmdWidthLimitationWrapper>
@@ -1281,7 +1281,6 @@ import CmdAddressData from "@/components/CmdAddressData"
 import CmdBackToTopButton from "@/components/CmdBackToTopButton.vue"
 import CmdBankAccountData from "./components/CmdBankAccountData"
 import CmdBox from "@/components/CmdBox.vue"
-import CmdBoxSiteSearch from "@/components/CmdBoxSiteSearch.vue"
 import CmdBreadcrumbs from "@/components/CmdBreadcrumbs.vue"
 import CmdCompanyLogo from "@/components/CmdCompanyLogo.vue"
 import CmdCopyrightInformation from "@/components/CmdCopyrightInformation.vue"
@@ -1307,6 +1306,7 @@ import CmdProgressBar from "@/components/CmdProgressBar.vue"
 import CmdShareButtons from "@/components/CmdShareButtons.vue"
 import CmdSiteFooter from "./components/CmdSiteFooter"
 import CmdSiteHeader from "./components/CmdSiteHeader"
+import CmdSiteSearch from "@/components/CmdSiteSearch.vue"
 import CmdSlideshow from "@/components/CmdSlideshow.vue"
 import CmdSwitchLanguage from "@/components/CmdSwitchLanguage.vue"
 import CmdSystemMessage from "@/components/CmdSystemMessage.vue"
@@ -1332,7 +1332,6 @@ export default {
         CmdBackToTopButton,
         CmdBankAccountData,
         CmdBox,
-        CmdBoxSiteSearch,
         CmdBreadcrumbs,
         CmdCompanyLogo,
         CmdCopyrightInformation,
@@ -1357,6 +1356,7 @@ export default {
         CmdShareButtons,
         CmdSiteFooter,
         CmdSiteHeader,
+        CmdSiteSearch,
         CmdSlideshow,
         CmdSwitchLanguage,
         CmdSystemMessage,
@@ -1375,6 +1375,10 @@ export default {
             showTooltip: false,
             disabledStatus: undefined,
             validationStatus: "",
+            loginData: {
+              username: "",
+              password: ""
+            },
             newsletter: {
                 subscription: "",
                 email: ""
@@ -1423,7 +1427,6 @@ export default {
             selectedCountry: "de",
             selectedColor: "",
             rangeValue: 50,
-            loginData: {},
             siteSearchFilters: {
                 show: true,
                 selectData: fakeSelectFilterOptionsData,
@@ -1433,7 +1436,7 @@ export default {
             },
             siteSearchInput1: "Doctor",
             siteSearchInput2: "New York",
-            radius: 10,
+            radius: 5,
             filters: ["2"],
             switchButtonRadio: "radio1",
             switchButtonCheckboxToggleSwitch: false,
@@ -1517,10 +1520,9 @@ export default {
             this.disabledStatus = disabledStatus
         },
         siteSearchOutput(event) {
-            console.log(event)
+            alert(JSON.stringify(event))
         },
-        showError(event) {
-            console.log("EventMessages", event.messages)
+        showError() {
             alert("Error")
         },
         showFancyBox(type, content, altText) {

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

@@ -52,7 +52,6 @@
 }
 
 #component-library {
-  border: 1px solid red;
   scroll-padding-top: unset !important;
   scroll-snap-type: unset !important;
 }

package/src/components/CmdBox.vue

@@ -343,13 +343,14 @@ export default {
 
             > .toggle-icon, .toggle-icon > [class*="icon"] {
                 font-size: 1rem;
-                margin-left: auto;
             }
+        }
 
+        .box-header {
             &:hover, &:active, &:focus {
                 background: var(--pure-white);
 
-                > * {
+                * {
                     color: var(--primary-color);
                 }
             }

package/src/components/CmdCookieDisclaimer.vue

@@ -295,9 +295,25 @@ export default {
 
     .cmd-box {
         .box-header {
-            label.disabled {
-                .label-text span {
-                    color: var(--pure-white) !important;
+            justify-content: unset; /* overwrite setting for collapsible boxes */
+
+            label {
+                &.disabled {
+                    .label-text span {
+                        color: var(--pure-white) !important; /* required to set label-text in header to white */
+                    }
+                }
+
+                & + .toggle-icon {
+                    width: 100%;
+                    justify-content: flex-end;
+                    text-align: right;
+                }
+            }
+
+            &:hover, &:active, &:focus {
+                label.disabled .label-text span {
+                    color: var(--disabled-color) !important; /* required to set label-text on hover back to disabled-color */
                 }
             }
         }

package/src/components/CmdFormElement.vue

@@ -687,6 +687,17 @@ export default {
         }
     },
     methods: {
+        additionalStandardRequirements() {
+            const requirements = []
+            // check if field is type "email"
+            if(this.$attrs.type === "email") {
+                requirements.push({
+                    message: this.getMessage("cmdformelement.validationTooltip.is_valid_email"),
+                    valid: () => this.$refs.input.checkValidity()
+                })
+            }
+            return requirements
+        },
         getDomElement() {
             return this.$refs.label
         },
@@ -706,8 +717,6 @@ export default {
             const useValidation = event.target.closest("form")?.dataset.useValidation === "true"
 
             if (useValidation) {
-                this.validationStatus = ""
-
                 // if input is filled, set status to success (expect for checkboxes and radiobuttons)
                 if (!["checkbox", "radio"].includes(this.$attrs.type) && this.modelValue) {
                     this.validationStatus = "success"
@@ -792,7 +801,7 @@ export default {
     watch: {
         status: {
             handler() {
-                this.validationStatus = this.status
+                this.validationStatus = this.status || ""
             },
             immediate: true
         }

package/src/components/CmdLoginForm.vue

@@ -1,10 +1,12 @@
 <template>
     <!-- begin login-form -->
-    <fieldset v-if="!sendLogin" class="cmd-login-form flex-container">
-        <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
+    <fieldset v-show="!sendLogin" class="cmd-login-form flex-container">
+        <legend :class="{hidden : !showLegend}">{{ textLegendLoginForm }}</legend>
         <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="cmdHeadlineLoginForm"
-                     v-bind="cmdHeadlineLoginForm"/>
+        <CmdHeadline
+            v-if="cmdHeadlineLoginForm"
+            v-bind="cmdHeadlineLoginForm"
+        />
         <!-- end CmdHeadline -->
 
         <!-- being form elements -->
@@ -19,6 +21,8 @@
                 :fieldIconClass="cmdFormElementUsername.innerIconClass"
                 :labelText="cmdFormElementUsername.labelText"
                 :placeholder="cmdFormElementUsername.placeholder"
+                :required="cmdFormElementUsername.required"
+                @validationStatusChange="checkValidationStatus($event, 'username')"
             />
             <!-- end CmdFormElement -->
 
@@ -32,6 +36,8 @@
                 v-model="password"
                 :labelText="cmdFormElementPassword.labelText"
                 :placeholder="cmdFormElementPassword.placeholder"
+                :required="cmdFormElementPassword.required"
+                @validationStatusChange="checkValidationStatus($event, 'password')"
             />
             <!-- end CmdFormElement -->
         </div>
@@ -39,6 +45,7 @@
 
         <div class="option-wrapper flex-container" v-focus>
             <template v-if="options.forgotPassword || options.createAccount">
+                <!-- begin link for 'forgot password' -->
                 <a v-if="options.forgotPassword" href="#" @click.prevent="sendLogin = true">
                     <span v-if="options.forgotPassword.icon && options.forgotPassword.icon.show && options.forgotPassword.icon.iconClass"
                           :class="options.forgotPassword.icon.iconClass"
@@ -46,7 +53,9 @@
                     </span>
                     <span v-if="options.forgotPassword.text">{{ options.forgotPassword.text }}</span>
                 </a>
-                <!-- begin link-type 'href' -->
+                <!-- end link for 'forgot password' -->
+
+                <!-- begin link-type 'href' for 'create account' -->
                 <a v-if="options.createAccount && options.createAccount.linkType === 'href'" :href="options.createAccount.path">
                     <span v-if="options.createAccount.icon && options.createAccount.icon.show && options.createAccount.icon.iconClass"
                           :class="options.createAccount.icon.iconClass"
@@ -54,9 +63,9 @@
                     </span>
                     <span v-if="options.createAccount.text">{{ options.createAccount.text }}</span>
                 </a>
-                <!-- end link-type 'href' -->
+                <!-- end link-type 'href' for 'create account' -->
 
-                <!-- begin link-type 'router' -->
+                <!-- begin link-type 'router' for 'create account' -->
                 <router-link v-else-if="options.createAccount && options.createAccount.linkType === 'router'" :to="options.createAccount.path">
                     <span v-if="options.createAccount.icon && options.createAccount.icon.show && options.createAccount.icon.iconClass"
                           :class="options.createAccount.icon.iconClass"
@@ -64,47 +73,16 @@
                     </span>
                     <span v-if="options.createAccount.text">{{ options.createAccount.text }}</span>
                 </router-link>
-                <!-- end link-type 'router -->
+                <!-- end link-type 'router' for 'create account' -->
             </template>
 
-            <!-- begin link-type 'href' -->
-            <a
-                v-if="buttons.login.linkType === 'href'"
-                :class="['button', { primary: buttons.login.primary }]"
-                :href="buttons.login.path"
-                @click.prevent="onClick"
-            >
-                  <span
-                      v-if="buttons.login.icon.iconClass"
-                      :class="buttons.login.icon.iconClass"
-                      :title="buttons.login.icon.tooltip"
-                  ></span>
-                <span v-if="buttons.login.text">{{ buttons.login.text }}</span>
-            </a>
-            <!-- begin link-type 'href' -->
-
-            <!-- begin link-type 'router' -->
-            <router-link
-                v-if="buttons.login.linkType === 'router'"
-                :class="['button', { primary: buttons.login.primary }]"
-                :to="buttons.login.path"
-                @click.prevent="onClick"
-            >
-                  <span
-                      v-if="buttons.login.icon.iconClass"
-                      :class="buttons.login.icon.iconClass"
-                      :title="buttons.login.icon.tooltip"
-                  ></span>
-                <span v-if="buttons.login.text">{{ buttons.login.text }}</span>
-            </router-link>
-            <!-- begin link-type 'router' -->
-
             <!-- begin link-type 'button' -->
             <button
                 v-if="buttons.login.linkType === 'button'"
                 :type="buttons.login.type === 'submit' ? 'submit' : 'button'"
                 :class="['button', { primary: buttons.login.primary }]"
                 @click="onClick"
+                :disabled="buttonLoginDisabled"
             >
                   <span
                       v-if="buttons.login.icon.iconClass"
@@ -119,14 +97,13 @@
     <!-- end login-form -->
 
     <!-- begin send-login-form -->
-    <fieldset v-else class="cmd-login-form flex-container">
-        <legend :class="{'hidden' : !legendSendLoginForm.show}">{{ legendSendLoginForm.text }}</legend>
+    <fieldset v-show="sendLogin" class="cmd-login-form flex-container">
+        <legend :class="{'hidden' : !showLegend}">{{ textLegendForgotLoginForm }}</legend>
         <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="cmdHeadlineSendLoginForm"
-                           :iconClass="cmdHeadlineSendLoginForm.iconClass"
-                           :preHeadline="cmdHeadlineSendLoginForm.preHeadline"
-                           :headlineLevel="cmdHeadlineSendLoginForm.preHeadline"
-                           :headlineText="cmdHeadlineSendLoginForm.headlineText"/>
+        <CmdHeadline
+            v-if="cmdHeadlineSendLoginForm"
+           v-bind="cmdHeadlineSendLoginForm"
+        />
         <!-- end CmdHeadline -->
 
         <!-- begin CmdFormElement -->
@@ -137,8 +114,10 @@
             :labelText="cmdFormElementSendLogin.labelText"
             :placeholder="cmdFormElementSendLogin.placeholder"
             :name="cmdFormElementSendLogin.name"
+            :required="cmdFormElementSendLogin.required"
             :id="cmdFormElementSendLogin.id"
-            v-model:value="sendLoginMail"
+            @validationStatusChange="checkValidationStatus($event, 'email')"
+            v-model="sendLoginMail"
         />
         <!-- end CmdFormElement -->
 
@@ -153,43 +132,12 @@
                 </span>
             </a>
 
-            <!-- begin link-type 'href' -->
-            <a
-                v-if="buttons.sendLogin.linkType === 'href'"
-                :class="['button', { primary: buttons.sendLogin.primary }]"
-                :href="buttons.sendLogin.path"
-                @click.prevent="sendLogin"
-            >
-                  <span
-                      v-if="buttons.sendLogin.icon.iconClass"
-                      :class="buttons.sendLogin.icon.iconClass"
-                      :title="buttons.sendLogin.icon.tooltip"
-                  ></span>
-                <span v-if="buttons.sendLogin.text">{{ buttons.sendLogin.text }}</span>
-            </a>
-            <!-- end link-type 'href' -->
-
-            <!-- begin link-type 'router' -->
-            <router-link
-                v-if="buttons.sendLogin.linkType === 'router'"
-                :class="['button', { primary: buttons.sendLogin.primary }]"
-                :to="buttons.sendLogin.path"
-                @click.prevent="sendLogin"
-            >
-                  <span
-                      v-if="buttons.sendLogin.icon.iconClass"
-                      :class="buttons.sendLogin.icon.iconClass"
-                      :title="buttons.sendLogin.icon.tooltip"
-                  ></span>
-                <span v-if="buttons.sendLogin.text">{{ buttons.sendLogin.text }}</span>
-            </router-link>
-            <!-- end link-type 'router' -->
-
             <!-- begin link-type 'button' -->
             <button
                 v-if="buttons.sendLogin.linkType === 'button'"
                 :type="buttons.sendLogin.type === 'submit' ? 'submit' : 'button'"
                 :class="['button', { primary: buttons.sendLogin.primary }]"
+                :disabled="buttonSendLoginDisabled"
             >
                   <span
                       v-if="buttons.sendLogin.icon?.iconClass"
@@ -216,8 +164,9 @@ export default {
     name: "CmdLoginForm",
     data() {
         return {
-            username: "",
-            password: "",
+            usernameValidationStatus: false,
+            passwordValidationStatus: false,
+            emailValidationStatus: false,
             sendLoginMail: "",
             sendLogin: false
         }
@@ -244,7 +193,7 @@ export default {
          *
          * @requiredForAccessibility: true
          */
-        textLegend: {
+        textLegendLoginForm: {
             type: String,
             default: "Login form"
         },
@@ -256,18 +205,13 @@ export default {
             default: true
         },
         /**
-         * legend for send-login-fieldset
+         * legend for forgot-login-fieldset
          *
          * @requiredForAccessibility: true
-         */
-        legendSendLoginForm: {
-            type: Object,
-            default() {
-                return {
-                    show: false,
-                    text: "Forgot login form"
-                }
-            }
+        */
+        textLegendForgotLoginForm: {
+            type: String,
+            default: "Forgot login form"
         },
         /**
          * properties for CmdHeadline-component for login-form
@@ -281,13 +225,7 @@ export default {
          */
         cmdHeadlineSendLoginForm: {
             type: Object,
-            default() {
-                return {
-                    show: true,
-                    headlineText: "Send Login",
-                    headlineLevel: 2
-                }
-            }
+            required: false
         },
         /**
          * properties for CmdFormElement-component for username-field
@@ -302,7 +240,8 @@ export default {
                     placeholder: "Type in username",
                     innerIconClass: "icon-user-profile",
                     name: "login-username",
-                    id: "login-username"
+                    id: "login-username",
+                    required: true
                 }
             }
         },
@@ -319,7 +258,8 @@ export default {
                     placeholder: "Type in password",
                     innerIconClass: "icon-security-settings",
                     name: "login-password",
-                    id: "login-password"
+                    id: "login-password",
+                    required: true
                 }
             }
         },
@@ -336,7 +276,8 @@ export default {
                     placeholder: "Type in email-address you are registered with",
                     innerIconClass: "icon-mail",
                     name: "login-send-login",
-                    id: "login-send-login"
+                    id: "login-send-login",
+                    required: true
                 }
             }
         },
@@ -416,6 +357,30 @@ export default {
             }
         }
     },
+    computed: {
+        buttonLoginDisabled() {
+            return !(this.usernameValidationStatus && this.passwordValidationStatus)
+        },
+        buttonSendLoginDisabled() {
+            return !this.emailValidationStatus
+        },
+        username: {
+            get() {
+                return this.modelValue.username
+            },
+            set(value) {
+                this.$emit("update:modelValue", {username: value, password: this.password})
+            }
+        },
+        password: {
+            get() {
+                return this.modelValue.password
+            },
+            set(value) {
+                this.$emit("update:modelValue", {username: this.username, password: value})
+            }
+        }
+    },
     methods: {
         modelChange() {
             this.$emit("update:modelValue", { "username": this.username, "password": this.password })
@@ -425,6 +390,18 @@ export default {
         },
         getRoute(language) {
             return getRoute(language)
+        },
+        checkValidationStatus(event, fieldType) {
+            if (event == null) {
+                return
+            }
+            if(fieldType === "username") {
+                this.usernameValidationStatus = event === "success";
+            } else if(fieldType === "password") {
+                this.passwordValidationStatus = event === "success";
+            } else {
+                this.emailValidationStatus = event === "success";
+            }
         }
     },
     watch: {

package/src/components/CmdNewsletterSubscription.vue

@@ -1,4 +1,9 @@
 <template>
+    <fieldset class="cmd-newsletter-subscription flex-container">
+        <!-- begin legend -->
+        <legend :class="{'hidden' : !showLegend}">{{ textLegend }}</legend>
+        <!-- end legend -->
+
         <!-- begin cmd-input-group -->
         <CmdInputGroup
             inputTypes="radio"
@@ -34,6 +39,7 @@
             />
             <!-- end cmd-form-element -->
         </div>
+    </fieldset>
 </template>
 
 <script>
@@ -67,8 +73,8 @@ export default {
             }
         },
         buttonType: {
-          type: String,
-          default: "button",
+            type: String,
+            default: "button",
             validator(value) {
                 return value === "submit" || value === "button"
             }