comand-component-library 4.2.56 → 4.2.57

package/src/ComponentLibrary.vue

@@ -508,12 +508,6 @@
                         <CmdInputGroup ref="CmdInputGroup" v-bind="cmdInputGroupSettingsData"
                             labelText="Grouplabel for radio-group given by property:"
                             :inputElements="idForReplacedInputsInInputGroup('radio-group')" v-model="inputGroup">
-                            <CmdFormElement element="input" labelText="Label for radiobutton" type="radio"
-                                id="input-group-radiobutton" name="radiogroup2" inputValue="radiobuttonValue1"
-                                v-model="inputGroup" :status="validationStatus" :disabled="disabledStatus" />
-                            <CmdFormElement element="input" labelText="Label for radiobutton" type="radio"
-                                id="input-group-radiobutton" name="radiogroup2" inputValue="radiobuttonValue2"
-                                v-model="inputGroup" :status="validationStatus" :disabled="disabledStatus" />
                         </CmdInputGroup>
                         <dl>
                             <dt>Selected value:</dt>
@@ -1266,6 +1260,107 @@
             </CmdWidthLimitationWrapper>
             <!-- end main-navigation --------------------------------------------------------------------------------------------------->
 
+            <!-- begin multistep-form-wrapper --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-multistep-form-wrapper">
+                    <span>Multistepform-Wrapper</span>
+                    <a href="#" class="button small icon-cog" title="Open Component Settings"
+                        @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')">
+                    </a>
+                </h2>
+                <h3>Data provided by property</h3>
+                <CmdMultistepFormWrapper>
+                    <template v-slot:page-1="props">
+                        Content Page 1<br />
+                        <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a><br />
+                        <a href="#" @click.prevent="props.removeErrorOnPage">Remove Error</a>
+                    </template>
+                    <template v-slot:page-2="props">
+                        Content Page 2<br />
+                        <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
+                    </template>
+                    <template v-slot:page-3>
+                        Content Page 3
+                    </template>
+                    <template v-slot:page-4>
+                        Content Page 4
+                    </template>
+                    <template v-slot:page-5>
+                        Content Page 5
+                    </template>
+                </CmdMultistepFormWrapper>
+                <h3>Data provided by slot</h3>
+                <CmdMultistepFormWrapper>
+                    <template v-slot:progress-bar="props">
+                        <ul class="flex-container">
+                            <li v-for="index of props.numberOfPages" :key="index">
+                                <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">{{ index }}</a>
+                            </li>
+                        </ul>
+                    </template>
+                    <template v-slot:page-1="props">
+                        Content Page 1
+                        <span v-if="props.hasError">Error</span>
+                        <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
+                    </template>
+                    <template v-slot:page-2="props">
+                        Content Page 2
+                        <span v-if="props.hasError">Error</span>
+                        <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
+                    </template>
+                    <template v-slot:page-3="props">
+                        Content Page 3
+                        <span v-if="props.hasError">Error</span>
+                    </template>
+                    <template v-slot:page-4="props">
+                        Content Page 4
+                        <span v-if="props.hasError">Error</span>
+                    </template>
+                    <template v-slot:page-5="props">
+                        Content Page 5
+                        <span v-if="props.hasError">Error</span>
+                    </template>
+                    <template v-slot:pagination="props">
+                        <div class="button-wrapper reverse justify-content-space-between">
+                            <CmdLink
+                                linkType="button" 
+                                highlightLevel="none"    
+                                :icon='{
+                                    iconClass: "icon-chevron-one-stripe-right",
+                                    tooltip: "To next page",
+                                    position: "right"
+                                }'
+                                text="Next"
+                                :disabled="props.disabledNextLink"
+                                @click="props.setNextPage"
+                            />
+                            <CmdLink 
+                                linkType="button"
+                                class="cancel"
+                                highlightLevel="none"
+                                :icon='{
+                                    iconClass: "icon-cancel-circle",
+                                }'
+                                text="Cancel"
+                            />
+                            <CmdLink 
+                                linkType="button"
+                                highlightLevel="none"
+                                :icon='{
+                                    iconClass: "icon-chevron-one-stripe-left",
+                                    tooltip: "To previous page"
+                                }'
+                                text="Back"
+                                @click="props.setPrevPage"
+                                :disabled="props.disabledPrevLink"
+                            />
+                            props.disabledPrevLink: {{ props.disabledPrevLink }}
+                        </div>
+                    </template>
+                </CmdMultistepFormWrapper>
+            </CmdWidthLimitationWrapper>
+            <!-- end multistep-form-wrapper --------------------------------------------------------------------------------------------------->
+
             <!-- begin multistep-form-progress-bar --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-multistep-form-progress-bar">
@@ -2117,7 +2212,8 @@ export default {
                         show: true,
                         headlineText: "Fancybox with text", headlineLevel: 3
                     },
-                    ariaLabelText: ariaLabelText
+                    ariaLabelText: ariaLabelText,
+                    showPrintButtons: true
                 })
             } else if (type === "url") {
                 openFancyBox({

package/src/assets/data/form-elements.json

@@ -148,5 +148,34 @@
     "required": false,
     "disabled": false,
     "maxlength": 500
+  },
+  {
+    "component": "CmdInputGroup",
+    "labelText": "Input Group (Radio):",
+    "toggleSwitches": true,
+    "value": "website",
+    "inputElements": [
+      {
+        "labelText": "Website",
+        "id": "radio-id-1",
+        "name": "input-group-radio",
+        "iconClass": "icon-globe",
+        "value": "website"
+      },
+      {
+        "labelText": "E-Mail",
+        "id": "radio-id-2",
+        "name": "input-group-radio",
+        "iconClass": "icon-mail",
+        "value": "email"
+      },
+      {
+        "labelText": "Phone",
+        "id": "radio-id-3",
+        "name": "input-group-radio",
+        "iconClass": "icon-phone",
+        "value": "phone"
+      }
+    ]
   }
 ]

package/src/assets/data/listOfComponents.json

@@ -23,6 +23,7 @@
   "LoginForm",
   "MailTool",
   "MainNavigation",
+  "MultistepFormWrapper",
   "MultistepFormProgressBar",
   "NewsletterSubscription",
   "OpeningHours",

package/src/componentSettingsDataAndControls.vue

@@ -634,8 +634,7 @@ data() {
             }
         },
         cmdPaginationSettingsData: {
-            pages: 3,
-            itemsPerPage: 1,
+            numberOfPages: 3,
             showPageNumbers: true,
             linkType: "button"
         },

package/src/components/CmdFancyBox.vue

@@ -48,7 +48,6 @@
                 <!-- begin close-icon -->
                 <a v-if="fancyBoxOptionsProperties.closeIcon?.show"
                    href="#"
-                   class="button"
                    id="close-dialog"
                    :title="fancyBoxOptionsProperties.closeIcon?.tooltip"
                    ref="close-dialog"
@@ -676,6 +675,13 @@ export default FancyBox
 <style lang="scss">
 @import "../assets/styles/variables";
 
+.cmd-fancybox {
+    > header {
+        flex-direction: row; /* avoid overwriting by global header styles */
+        align-items: center;
+    }
+}
+
 .cmd-fancybox {
     @media only screen and (max-width: $medium-max-width) {
         .outer-content-wrapper {
@@ -690,8 +696,6 @@ export default FancyBox
         }
 
         > header {
-            flex-direction: row;
-
             .button:not(#close-dialog) {
                 display: none;
             }

package/src/components/CmdForm.vue

@@ -13,29 +13,36 @@
                 <slot v-if="useSlot"></slot>
                 <!-- end default-slot-content -->
 
-                <!-- begin loop for formElements -->
-                <CmdFormElement
-                    v-else
-                    v-for="(item, index) in formElements"
-                    :key="index"
-                    :element="item.element || 'input'"
-                    :type="item.type || 'text'"
-                    :name="item.name"
-                    :class="item.htmlClass"
-                    :id="item.id || createHtmlId()"
-                    v-model="formValues[item.name]"
-                    :inputValue="item.inputValue"
-                    :fieldIconClass="item.innerIconClass"
-                    :selectOptions="item.selectOptions"
-                    :labelText="item.labelText"
-                    :placeholder="item.placeholder"
-                    :required="item.required"
-                    :disabled="item.disabled"
-                    :autocomplete="item.autocomplete"
-                    :minlength="item.minlength"
-                    :maxlength="item.maxlength"
-                    :nativeButton="item.nativeButton"
-                />
+                <template v-else v-for="(item, index) in formElements" :key="index">
+                    <!-- begin loop for formElements -->
+                    <CmdFormElement
+                        v-if="!item.component || item.component === 'CmdFormElement'"
+                        :key="index"
+                        :element="item.element || 'input'"
+                        :type="item.type || 'text'"
+                        :name="item.name"
+                        :class="item.htmlClass"
+                        :id="item.id || createHtmlId()"
+                        v-model="formValues[item.name]"
+                        :inputValue="item.inputValue"
+                        :fieldIconClass="item.innerIconClass"
+                        :selectOptions="item.selectOptions"
+                        :labelText="item.labelText"
+                        :placeholder="item.placeholder"
+                        :required="item.required"
+                        :disabled="item.disabled"
+                        :autocomplete="item.autocomplete"
+                        :minlength="item.minlength"
+                        :maxlength="item.maxlength"
+                        :nativeButton="item.nativeButton"
+                    />
+                    <CmdInputGroup
+                        v-else-if="item.component === 'CmdInputGroup'"
+                        v-model="formValues[item.name]"
+                        :labelText="item.labelText" 
+                        :inputElements="item.inputElements"
+                    />
+                </template>
                 <!-- end loop for formElements -->
 
                 <div v-if="submitButtonOptions && (submitButtonOptions.position === 'insideFieldset' || submitButtonOptions.position === null)" class="flex-container no-wrap-on-small-devices">

package/src/components/CmdMultistepFormProgressBar.vue

@@ -1,11 +1,11 @@
 <template>
     <!-- begin CmdMultistepFormProgressBar ---------------------------------------------------------------------------------------- -->
     <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap, 'full-width': fullWidth}]">
-        <li v-for="(step, index) in multisteps" :key="index">
+        <li v-for="(step, index) in multisteps" :key="index" :class="errorLinkClass(index)">
             <!-- begin CmdLink -->
             <CmdLink
                 :linkType="step.linkType"
-                :class="['stretch-on-small-devices', activeLinkClass(index)]"
+                :class="['stretch-on-small-devices', activeLinkClass(index), errorLinkClass(index)]"
                 :styleAsButton="styleAsButtons"
                 :highlightLevel="highlightLevel"
                 :path="step.path"
@@ -91,9 +91,18 @@ export default {
          * list of multisteps
          */
         multisteps: {
-            type: Array,
+            type: Array, 
             required: true
         },
+        /**
+         * provide a list of steps, that should be highlighted as "error"
+         * 
+         * @affectStyling: true
+         */
+         errorSteps: {
+            type: Array,
+            required: false
+         },
         /**
          * icon-class for separator shown between multisteps
          */
@@ -103,6 +112,11 @@ export default {
                 return "icon-chevron-one-stripe-right"
             }
         },
+        /**
+         * toggle if a gap between the steps should be displayes
+         * 
+         * @affectStyling: true
+         */
         useGap: {
             type: Boolean,
             default: true
@@ -113,11 +127,17 @@ export default {
             if(this.activeLink === index) {
                     return "active"
             }
-            return ""
+            return null
+        },
+        errorLinkClass(index) {
+            if(this.errorSteps?.includes(index + 1)) {
+                    return "error"
+            }
+            return null
         },
         clickedStep(event, index) {
             this.activeLink = index;
-            this.$emit("click", {event: event, index: index, stepPath: this.multisteps[index].path})
+            this.$emit("click", {originalEvent: event, index: index, stepPath: this.multisteps[index]?.path})
         },
         getRoute(step) {
             return getRoute(step)
@@ -152,7 +172,6 @@ export default {
         }
     }
 
-    
     .button {
         border-radius: 0;
     }
@@ -294,6 +313,19 @@ export default {
             }
         }
 
+        &.error {
+            .number {
+                border-color: var(--error-color);
+                color: var(--error-color);
+            }
+
+            .active {
+                .number {
+                    background: var(--error-color) !important;
+                }
+            }
+        }
+
         :is(.active, .router-link-exact-active):not(.disabled) {
             a {
                 background: var(--button-primary-background-highlighted);

package/src/components/CmdMultistepFormWrapper.vue

@@ -0,0 +1,190 @@
+<template>
+    <!-- begin CmdMultistepFormWrapper ---------------------------------------------------------------------------------------- -->
+    <div class="cmd-multistepform-wrapper">
+        <!-- begin slot for progress-bar -->
+        <slot name="progress-bar" :setCurrentPage="setCurrentPage" :numberOfPages="numberOfPages">
+            <CmdMultistepFormProgressBar 
+                v-if="cmdMultistepFormProgressBar.show" 
+                v-bind="cmdMultistepFormProgressBarProperties"
+                :multisteps="multisteps"
+                :activeStep="currentPage - 1"
+                :errorSteps="errorSteps"
+                @click="setCurrentPage($event.index + 1)"
+            />
+        </slot>
+        <!-- begin slot for progress-bar -->
+
+        <div v-show="page === currentPage" :class="'multistep-page-' + page" v-for="(page, index) in numberOfPages" :key="index">
+            <CmdSystemMessage v-if="pagesWithError.some(item => item.page === page)" :systemMessage="getSystemMessage(page)" validationStatus="error" />
+            page: {{ page }}<br />
+            index: {{ index }}<br />
+            currentPage: {{ currentPage }}<br />
+            errorSteps: {{ errorSteps }}
+
+            <!-- begin slot for page content -->
+            <slot :name="'page-' + page" :setErrorOnPage="(message) => setErrorOnPage(page, message)" :removeErrorOnPage="removeErrorOnPage">
+            </slot>
+            <!-- end slot for page content -->
+        </div>
+
+        <!-- begin slot for pagination -->
+        <slot name="pagination" 
+            :currentPage="currentPage" 
+            :setPrevPage="setPrevPage" 
+            :setNextPage="setNextPage" 
+            :disabledPrevLink="currentPage === 1" 
+            :disabledNextLink="currentPage === numberOfPages"
+        >
+            <CmdPagination 
+                v-if="cmdPagination.show" 
+                :activePage="currentPage"
+                :numberOfPages="numberOfPages"
+                v-bind="cmdPaginationProperties" 
+                @click="setCurrentPage($event.page)"
+            />
+        </slot>
+        <!-- end slot for pagination -->
+    </div>
+    <!-- end CmdMultistepFormWrapper ---------------------------------------------------------------------------------------- -->
+</template>
+
+<script>
+export default {
+    name: "CmdMultistepFormWrapper",
+    data () {
+        return {
+            currentPage: 1,
+            pagesWithError: []
+        }
+    },
+    props: {
+        /**
+         * properties for CmdMultistepFormProgressBar-component
+         */
+        cmdMultistepFormProgressBar: {
+            type: Object,
+            default() {
+                return {
+                    show: true
+                }
+            }
+        },
+         /**
+         * properties for CmdMultistepFormProgressBar-component
+         */
+        showButtonWrapper: {
+            type: Boolean,
+            default: true
+        },
+         /**
+         * properties for CmdLink-component
+         */
+        cmdLinkPrevious: {
+            type: Object,
+            required: false
+        },
+         /**
+         * properties for CmdLink-component
+         */
+        cmdLinkNext: {
+            type: Object,
+            required: false
+        },
+         /**
+         * properties for CmdPagination-component
+         */
+        cmdPagination: {
+            type: Object,
+            default() {
+                return {
+                    show: true
+                }
+            }
+        }
+    },
+    mounted() {
+        console.log("slots:", this.$slots)
+    },
+    methods: {
+        getSystemMessage(page) {
+            const pageEntry = this.pagesWithError.find(item => item.page === page);
+            return pageEntry.message
+        },
+        setErrorOnPage(page, message) {
+            const exists = this.pagesWithError.some(item => item.page === page);
+            
+            if (!exists) {
+                this.pagesWithError.push({ page: page, message: message });
+            }
+        },
+        removeErrorOnPage() {
+            this.pagesWithError = []
+        },
+        setCurrentPage(page) {
+            this.currentPage = page
+        },
+        setPrevPage() {
+            if (this.currentPage > 1) {
+                this.currentPage--
+            } 
+        },
+        setNextPage() {
+            if (this.currentPage < this.numberOfPages) {
+                this.currentPage++
+            } 
+        }
+    },
+    computed: {
+        errorSteps() {
+            const steps = []
+            this.pagesWithError.find((item) => {
+                steps.push(item.page)
+            })
+            console.log("steps", steps)
+
+            return steps
+        },
+        multisteps() {
+            const steps = []
+            
+            for (let i = 1; i <= this.numberOfPages; i++) {
+                steps.push(i);
+            }
+
+            return steps
+        },
+        numberOfPages() {
+            return Object.keys(this.$slots).filter(key => key.startsWith("page-")).length
+        },
+        cmdMultistepFormProgressBarProperties() {
+            return {
+                show: true,
+                showStepNumber: true,
+                ...this.cmdMultistepFormProgressBar
+            }
+        },
+        cmdPaginationProperties() {
+            return {
+                pages: null,
+                itemsPerPage: null,
+                showPageNumbers: true,
+                linkType: "href",
+                prevLink: {
+                    iconClass: "icon-chevron-one-stripe-left",
+                    text: "prev",
+                    showText: true
+                },
+                nextLink: {
+                    iconClass: "icon-chevron-one-stripe-right",
+                    text: "next",
+                    showText: true
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>