comand-component-library 4.0.9 → 4.0.11

package/src/pages/BasicForm.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="cmd-pages-basic-form">
+        <!-- being CmdForm -->
         <CmdForm :action="formAction"
                  @submit="onSubmit"
                  novalidate="novalidate"
@@ -12,9 +13,9 @@
                     element="input"
                     type="radio"
                     :labelText="getMessage('basic_form.labeltext.salutation_male')"
-                    name="salutation"
-                    inputValue="M"
-                    :replace-input-type="true"
+                    :name="configuration.salutation?.name || salutation"
+                    inputValue="m"
+                    :replaceInputType="configuration.salutation?.replaceInputType"
                     v-model="formData.salutation"
                     @validate="onValidate"
                 />
@@ -25,52 +26,65 @@
                     element="input"
                     type="radio"
                     :labelText="getMessage('basic_form.labeltext.salutation_female')"
-                    name="salutation"
-                    :replace-input-type="true"
+                    :name="configuration.salutation?.name || salutation"
+                    inputValue="f"
+                    :replaceInputType="configuration.salutation?.replaceInputType"
                     v-model="formData.salutation"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
             </div>
+
+            <!-- begin slot (top) -->
+            <slot name="top"></slot>
+            <!-- end slot (top) -->
+
             <div class="flex-container">
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
+                    v-if="configuration.lastName"
                     element="input"
-                    type="text"
+                    :type="configuration.lastName?.type || 'text'"
                     iconClass="icon-user-profile"
                     :labelText="getMessage('basic_form.labeltext.last_name')"
-                    :tooltipText="formData.last_name.error ? formData.last_name.errorMessage :  'Type your surname!'"
-                    required="required"
+                    :tooltipText="formData.lastName.error ? formData.lastName.errorMessage :  'Type your surname!'"
+                    :required="configuration.lastName?.required"
+                    :name="configuration.lastName?.name || 'last-name'"
                     :placeholder="getMessage('basic_form.placeholder.last_name')"
-                    v-model="formData.last_name.value"
-                    :status="formData.last_name.error ? 'error' : ''"
+                    v-model="formData.lastName.value"
+                    :status="formData.lastName.error ? 'error' : ''"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
 
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
+                    v-if="configuration.firstName"
                     element="input"
-                    type="text"
+                    :type="configuration.firstName?.type || 'text'"
                     iconClass="icon-user-profile"
                     :labelText="getMessage('basic_form.labeltext.first_name')"
-                    :tooltipText="formData.first_name.error ? formData.first_name.errorMessage :  'Type your first name!'"
+                    :tooltipText="formData.firstName.error ? formData.firstName.errorMessage :  'Type your first name!'"
                     :placeholder="getMessage('basic_form.placeholder.first_name')"
-                    v-model="formData.first_name.value"
-                    :status="formData.first_name.error ? 'error' : ''"
+                    :required="configuration.firstName?.required"
+                    :name="configuration.firstName?.name || 'first-name'"
+                    v-model="formData.firstName.value"
+                    :status="formData.firstName.error ? 'error' : ''"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
             </div>
-            <div class="flex-container">
+            <div v-if="configuration.email || configuration.phone" class="flex-container">
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
+                    v-if="configuration.email"
                     element="input"
-                    type="email"
+                    :type="configuration.email?.type || 'email'"
                     iconClass="icon-mail"
                     :labelText="getMessage('basic_form.labeltext.email')"
                     :placeholder="getMessage('basic_form.placeholder.email')"
-                    required="required"
+                    :required="configuration.email?.required"
+                    :name="configuration.email?.name || 'email'"
                     v-model="formData.email.value"
                     :status="formData.email.error ? 'error' : ''"
                     :tooltipText="formData.email.error ? formData.email.errorMessage :  'Type your email!'"
@@ -80,12 +94,15 @@
 
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
+                    v-if="configuration.phone"
                     element="input"
-                    type="phone"
+                    :type="configuration.phone?.type || 'tel'"
                     iconClass="icon-phone"
                     :labelText="getMessage('basic_form.labeltext.phone')"
                     :placeholder="getMessage('basic_form.placeholder.phone')"
                     v-model="formData.phone.value"
+                    :required="configuration.phone?.required"
+                    :name="configuration.phone?.name || 'phone'"
                     :status="formData.phone.error ? 'error' : ''"
                     :tooltipText="formData.phone.error ? formData.phone.errorMessage :  'Type your phone number!'"
                     @validate="onValidate"
@@ -97,13 +114,14 @@
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
                     element="input"
-                    type="text"
+                    :type="configuration.streetNo?.type || 'text'"
                     :labelText="getMessage('basic_form.labeltext.street_no')"
                     :placeholder="getMessage('basic_form.placeholder.street_no')"
-                    required="required"
-                    v-model="formData.street_no.value"
-                    :status="formData.street_no.error ? 'error' : ''"
-                    :tooltipText="formData.street_no.error ? formData.street_no.errorMessage :  'Type your street and number!'"
+                    :required="configuration.streetNo?.required"
+                    :name="configuration.streetNo?.name || 'street-no'"
+                    v-model="formData.streetNo.value"
+                    :status="formData.streetNo.error ? 'error' : ''"
+                    :tooltipText="formData.streetNo.error ? formData.streetNo.errorMessage :  'Type your street and number!'"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -112,9 +130,11 @@
                     <!-- begin cmd-form-element -->
                     <CmdFormElement
                         element="input"
-                        type="number"
+                        :type="configuration.zip?.type || 'number'"
                         :labelText="getMessage('basic_form.labeltext.zip')"
                         :placeholder="getMessage('basic_form.placeholder.zip')"
+                        :required="configuration.zip?.required"
+                        :name="configuration.zip?.name || 'zip'"
                         v-model="formData.zip.value"
                         :status="formData.zip.error ? 'error' : ''"
                         :tooltipText="formData.zip.error ? formData.zip.errorMessage :  'Type your zip/postal code!'"
@@ -124,9 +144,11 @@
                     <!-- begin cmd-form-element -->
                     <CmdFormElement
                         element="input"
-                        type="text"
+                        :type="configuration.city?.type || 'text'"
                         :labelText="getMessage('basic_form.labeltext.city')"
                         :placeholder="getMessage('basic_form.placeholder.city')"
+                        :required="configuration.city?.required"
+                        :name="configuration.city?.name || 'zip'"
                         v-model="formData.city.value"
                         :status="formData.city.error ? 'error' : ''"
                         :tooltipText="formData.city.error ? formData.city.errorMessage :  'Type your city!'"
@@ -138,25 +160,45 @@
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
                     element="input"
-                    type="text"
+                    :type="configuration.additionalAddressInfo?.type || 'text'"
                     :labelText="getMessage('basic_form.labeltext.additional_address_info')"
                     :placeholder="getMessage('basic_form.placeholder.additional_address_info')"
-                    required="required"
-                    v-model="formData.additional_address_info.value"
-                    :status="formData.additional_address_info.error ? 'error' : ''"
-                    :tooltipText="formData.additional_address_info.error ? formData.additional_address_info.errorMessage :  'Type additional address information!'"
+                    :required="configuration.additionalAddressInfo?.required"
+                    :name="configuration.additionalAddressInfo?.name || 'additional-address-info'"
+                    v-model="formData.additionalAddressInfo.value"
+                    :status="formData.additionalAddressInfo.error ? 'error' : ''"
+                    :tooltipText="formData.additionalAddressInfo.error ? formData.additionalAddressInfo.errorMessage :  'Type additional address information!'"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
             </div>
 
+            <!-- begin cmd-form-element -->
+            <CmdFormElement
+                :type="configuration.additionalText?.type || 'textarea'"
+                :labelText="getMessage('basic_form.labeltext.additional_text')"
+                :placeholder="getMessage('basic_form.placeholder.additional_text')"
+                :required="configuration.additionalText?.required"
+                :name="configuration.additionalText?.name || 'additional-text'"
+                v-model="formData.additionalText.value"
+                :status="formData.additionalText.error ? 'error' : ''"
+                @validate="onValidate"
+            />
+            <!-- end cmd-form-element -->
+
+            <!-- begin slot (bottom) -->
+            <slot name="bottom"></slot>
+            <!-- end slot (bottom) -->
+
             <!-- begin cmd-form-element -->
             <CmdFormElement
                 element="input"
                 type="checkbox"
-                :required="true"
-                v-model="formData.privacy.value"
-                :status="formData.privacy.error ? 'error' : ''"
+                :required="configuration.acceptPrivacy?.required"
+                :name="configuration.acceptPrivacy?.name || 'accept-privacy'"
+                :replaceInputType="configuration.acceptPrivacy?.replaceInputType"
+                v-model="formData.acceptPrivacy.value"
+                :status="formData.acceptPrivacy.error ? 'error' : ''"
                 @validate="onValidate">
                 <template v-slot:labeltext>
                     <span ref="dataPrivacy" v-html="getMessage('basic_form.labeltext.data_privacy')"></span>
@@ -164,12 +206,12 @@
             </CmdFormElement>
             <!-- end cmd-form-element -->
         </CmdForm>
+        <!-- end CmdForm -->
     </div>
 </template>
 
 <script>
 // import mixins
-// import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/pages/BasicForm/DefaultMessageProperties"
 import FieldValidation from "../mixins/FieldValidation"
@@ -189,16 +231,17 @@ export default {
         return {
             //validator: new ContactFormValidator(name => this.label(name)),
             formData: {
-                salutation: 'M',
-                last_name: {value: ''},
-                first_name: {value: ''},
+                salutation: this.configuration.salutation.default,
+                lastName: {value: ''},
+                firstName: {value: ''},
                 email: {value: ''},
                 phone: {value: ''},
-                street_no: {value: ''},
+                streetNo: {value: ''},
                 zip: {value: ''},
                 city: {value: ''},
-                additional_address_info: {value: ''},
-                privacy: {value: false}
+                additionalAddressInfo: {value: ''},
+                additionalText: {value: ''},
+                acceptPrivacy: {value: false}
             },
             nativeButton: {
                 icon: {
@@ -211,8 +254,58 @@ export default {
         }
     },
     props: {
-        hiddenFormElements: {
-            
+        configuration: {
+            type: Object,
+            default() {
+                return {
+                    salutation: {
+                        name: "salutation",
+                        default: "m",
+                        replaceInputType: true
+                    },
+                    lastName: {
+                        name: "surname",
+                        required: true,
+                        type: "text"
+                    },
+                    firstName: {
+                        required: false,
+                        type: "text"
+                    },
+                    email: {
+                        required: true,
+                        type: "email"
+                    },
+                    phone: {
+                        required: false,
+                        type: "phone"
+                    },
+                    streetNo: {
+                        required: false,
+                        type: "text"
+                    },
+                    zip: {
+                        required: false,
+                        type: "number"
+                    },
+                    city: {
+                        required: false,
+                        type: "text"
+                    },
+                    additionalAddressInfo: {
+                        required: false,
+                        type: "text"
+                    },
+                    additionalText: {
+                        required: false,
+                        type: "textarea"
+                    },
+                    acceptPrivacy: {
+                        required: true,
+                        replaceInputType: true
+                    }
+                }
+            }
         },
         receiverEmailAddress: {
             type: String,
@@ -234,18 +327,13 @@ export default {
             }
         }
     },
-    /*
     mounted() {
-        usePiniaStore().$subscribe(() => {
-            this.$nextTick(() => {
-                this.$refs.dataPrivacy?.querySelector('.fancybox')?.addEventListener('click', event => {
-                    event.preventDefault()
-                    openFancyBox({url: event.target.getAttribute('href')})
-                })
-            })
+        this.$refs.dataPrivacy?.querySelector('.fancybox')?.addEventListener('click', event => {
+            event.preventDefault()
+            openFancyBox({url: event.target.getAttribute('href')})
         })
     },
-    */
+
     methods: {
         onSubmit(event) {
             this.onValidate();
@@ -256,20 +344,6 @@ export default {
                 return;
             }
 
-            alert(`
-                Form submit:
-                salutation: ${this.formData.salutation}
-                last_name: ${this.formData.last_name.value}
-                first_name: ${this.formData.first_name.value}
-                email: ${this.formData.email.value}
-                phone: ${this.formData.phone.value}
-                street_no: ${this.formData.street_no.value}
-                zip: ${this.formData.zip.value}
-                city: ${this.formData.city.value}
-                additional_address_info: ${this.formData.additional_address_info.value}
-                privacy: ${this.formData.privacy.value}
-            `);
-
             event.preventDefault();
         },
         onValidate() {
@@ -281,54 +355,11 @@ export default {
                 openFancyBox({url: link})
             }
         },
-        // onPersist(data) {
-        //     return {
-        //         editModeContextData: {
-        //             ...(this.editModeContextData || {})
-        //         },
-        //         update(props) {
-        //             props.cmdHeadline = {
-        //                 ...(props.cmdHeadline || {}),
-        //             }
-        //             props.cmdHeadline.headlineText = data[0].headlineText
-        //         }
-        //     }
-        // },
-        // onDelete() {
-        //     console.log("ContactForm.onDelete()")
-        //     return {
-        //         editModeContextData: {
-        //             ...(this.editModeContextData || {})
-        //         }
-        //     }
-        // }
-        // openDataPrivacy(url) {
-        //     openFancyBox({url})
-        // }
+        openDataPrivacy(url) {
+            openFancyBox({url})
+        }
     }
 }
-
-// @Watch('$store.state.currentLanguage')
-// private languageChanged(): void {
-//     this.formData = Object.assign({}, {
-//       salutation: 'M',
-//       surname: {value: ''},
-//       email: {value: ''},
-//       message: {value: ''},
-//       privacy: {value: false}
-//     } as ContactFormData);
-//     this.labelsChanged()
-// }
-//
-// @Watch('$store.state.labels')
-// private labelsChanged(): void {
-//     this.$nextTick(() => {
-//         this.$el.querySelectorAll('.fancybox').forEach(link => link.addEventListener('click', e => {
-//             e.preventDefault()
-//             this.openDataPrivacy(link.getAttribute('href'))
-//         }))
-//     })
-// }
 </script>
 
 <style>

package/src/pages/ContactInformation.vue

@@ -0,0 +1,59 @@
+<template>
+    <!-- begin CmdBasicForm -->
+    <BasicForm v-if="contactFormOnly" v-bind="basicForm" />
+    <!-- end CmdBasicForm -->
+
+    <div v-else class="flex-container">
+        <!-- begin CmdBasicForm -->
+        <BasicForm v-bind="basicForm" />
+        <!-- end CmdBasicForm -->
+
+        <!-- begin additional-columns -->
+        <div class="flex-container vertical">
+            <!-- begin CmdAddressData -->
+            <CmdAddressData v-if="cmdAddressData" v-bind="cmdAddressData" />
+            <!-- end CmdAddressData -->
+
+            <!-- begin CmdGoogleMaps -->
+            <CmdGoogleMaps v-if="cmdGoogleMaps" v-bind="cmdGoogleMaps" />
+            <!-- end CmdGoogleMaps -->
+
+            <!-- begin slot-content -->
+            <slot name="additional-info"></slot>
+            <!-- end slot-content -->
+        </div>
+        <!-- end additional-columns -->
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ContactInformation",
+    props: {
+        basicForm: {
+            type: Object,
+            default: null
+        },
+        cmdAddressData: {
+            type: Object,
+            default: null
+        },
+        cmdGoogleMaps: {
+            type: Object,
+            default: null
+        }
+    },
+    computed: {
+        contactFormOnly() {
+            return !(this.cmdAddressData || this.cmdGoogleMaps || !this.isSlotEmpty)
+        },
+        isSlotEmpty() {
+            return !this.$scopedSlots['custom-info']
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

package/src/pages/MultipleBoxWrapper.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="cmd-page-multiple-box-wrapper flex-container vertical">
+        <template v-for="(segment, index) in segments" :key="index">
+            <!-- begin CmdBoxWrapper -->
+            <CmdBoxWrapper
+                :boxesPerRow="segment.boxesPerRow"
+                :useRowViewAsDefault="segment.useRowViewAsDefault"
+                :useGap="segment.useGap"
+                :cmdHeadline="segment.cmdHeadline"
+            >
+                <template v-slot="slotProps">
+                    <!-- begin CmdBox -->
+                    <CmdBox
+                        :use-slots="['box-body']"
+                        v-for="(box, index) in segment.boxes"
+                        :key="index"
+                        v-bind="box"
+                        :rowView="slotProps.rowView"
+                    >
+                        box {{box}}
+                    </CmdBox>
+                    <!-- end CmdBox -->
+                </template>
+            </CmdBoxWrapper>
+            <!-- end CmdBoxWrapper -->
+
+            <!-- begin slot-content -->
+            <slot name="multiple-box-wrapper-slot-${index}"></slot>
+            <!-- end slot-content -->
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MultipleBoxWrapper",
+    props: {
+        segments: {
+            type: Array,
+            default: null
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

package/src/pages/{SegmentedListsOfLinks.vue → MultipleListsOfLinks.vue}

@@ -1,5 +1,5 @@
 <template>
-    <div class="cmd-page-segmented-lists-of-links flex-container vertical">
+    <div class="cmd-page-multiple-lists-of-links flex-container vertical">
         <template v-for="(segment, index) in segments" :key="index">
             <!-- begin CmdListOfLinks -->
             <CmdListOfLinks
@@ -11,7 +11,7 @@
             <!-- end CmdListOfLinks -->
 
             <!-- begin slot-content -->
-            <slot name="segmented-lists-of-links-slot-${index}"></slot>
+            <slot name="multiple-lists-of-links-slot-${index}"></slot>
             <!-- end slot-content -->
         </template>
     </div>
@@ -19,7 +19,7 @@
 
 <script>
 export default {
-    name: "SegmentedListsOfLinks",
+    name: "MultipleListsOfLinks",
     props: {
         segments: {
             type: Array,

package/src/pages/PageOverview.vue

@@ -8,36 +8,63 @@
     </CmdWidthLimitationWrapper>
     <!-- end basic-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
-    <!-- begin segmented-lists-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+    <!-- begin basic-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
+    <CmdWidthLimitationWrapper>
+        <h2 class="headline-demopage" id="section-contact-information">
+            <span>Contact Information</span>
+        </h2>
+        <ContactInformation
+            :cmdBasicForm="{}"
+            :cmdAddressData="{}"
+            :cmdGoogleMaps="{}">
+            <template v-slot:additional-info>
+                Additional information given by slot
+            </template>
+        </ContactInformation>
+    </CmdWidthLimitationWrapper>
+    <!-- end basic-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+    <!-- begin multiple-lists-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
     <CmdWidthLimitationWrapper>
-        <h2 class="headline-demopage" id="section-segmented-lists-of-links-downloads">
-            <span>Segmented Lists of links</span>
+        <h2 class="headline-demopage" id="section-multiple-lists-of-links-downloads">
+            <span>Multiple Lists of links</span>
         </h2>
         <h3>Downloads</h3>
-        <SegmentedListsOfLinks :segments="listOfDownloadsData" />
+        <MultipleListsOfLinks :segments="listOfDownloadsData" />
         <hr />
         <h3>SiteMap</h3>
-        <SegmentedListsOfLinks :segments="listOfSiteLinksData" />
+        <MultipleListsOfLinks :segments="listOfSiteLinksData" />
     </CmdWidthLimitationWrapper>
-    <!-- end segmented-lists-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+    <!-- end multiple-lists-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+    <!-- begin multiple-box-wrapper ------------------------------------------------------------------------------------------------------------------------------------------------------->
+    <CmdWidthLimitationWrapper>
+        <h2 class="headline-demopage" id="section-multiple-box-wrapper">
+            <span>Multiple Box Wrapper</span>
+        </h2>
+        <h3>FAQs</h3>
+        <MultipleBoxWrapper :segments="faqsData" />
+        <hr />
+        <h3>Team Overview</h3>
+        <MultipleBoxWrapper :segments="boxesTeamOverviewData" />
+    </CmdWidthLimitationWrapper>
+    <!-- end multiple-box-wrapper ------------------------------------------------------------------------------------------------------------------------------------------------------->
 </template>
 
 <script>
-// import page-templates
-import BasicForm from "@/pages/BasicForm.vue"
-import SegmentedListsOfLinks from "@/pages/SegmentedListsOfLinks.vue"
-
 // import example data
+import addressData from "@/assets/data/address-data.json"
+import faqsData from "@/assets/data/pages/boxes-faqs.json"
+import boxesTeamOverviewData from "@/assets/data/pages/boxes-team-overview.json"
 import listOfDownloadsData from "@/assets/data/pages/list-of-downloads.json"
 import listOfSiteLinksData from "@/assets/data/pages/list-of-site-links.json"
 export default {
     name: "PageOverview",
-    components: {
-        BasicForm,
-        SegmentedListsOfLinks
-    },
     data() {
         return {
+            addressData,
+            faqsData,
+            boxesTeamOverviewData,
             listOfDownloadsData,
             listOfSiteLinksData,
             basicForm: {