comand-component-library 4.0.7 → 4.0.8

package/src/components/CmdSwitchLanguage.vue

@@ -95,8 +95,10 @@ export default {
             a:not([class*="active"]) {
                 filter: contrast(.5);
 
-                &:hover, &:focus, &:active {
+                &:hover, &:focus-visible, &:active, &.active {
                     filter: none;
+                    padding: 0; /* overwrite default settings from frontend-framework for .active */
+                    background: none; /* overwrite default settings from frontend-framework for .active */
                 }
             }
         }

package/src/components/CmdTextImageBlock.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="cmd-text-image-block flex-container vertical">
+    <div :class="['cmd-text-image-block flex-container', orientation]">
         <!-- begin cmdHeadline -->
         <CmdHeadline
-            v-if="(cmdHeadline?.headlineText || editModeContext) && headlinePosition === 'aboveImage'"
+            v-if="(cmdHeadline?.headlineText || editModeContext) && (headlinePosition === 'aboveImage' && orientation === 'vertical')"
             v-bind="cmdHeadline"
         />
         <!-- end cmdHeadline -->
@@ -16,14 +16,19 @@
         />
         <!-- end cmdImage -->
 
-        <!-- begin cmdHeadline -->
-        <CmdHeadline
-            v-if="(cmdHeadline?.headlineText || editModeContext) && headlinePosition === 'belowImage'"
-            v-bind="cmdHeadline"
-        />
-        <!-- end cmdHeadline -->
+        <div class="flex-container vertical">
+            <!-- begin cmdHeadline -->
+            <CmdHeadline
+                v-if="(cmdHeadline?.headlineText || editModeContext) && (headlinePosition === 'belowImage' || orientation === 'horizontal')"
+                v-bind="cmdHeadline"
+            />
+            <!-- end cmdHeadline -->
+
+            <!-- begin continuous text -->
+            <div v-if="htmlContent" v-html="htmlContent" :class="textAlign"></div>
+            <!-- end continuous text -->
+        </div>
 
-        <!-- begin continuous text -->
         <!-- begin edit-mode -->
         <EditComponentWrapper
             v-if="editModeContext"
@@ -47,14 +52,14 @@
             </template>
         </EditComponentWrapper>
         <!-- end edit-mode -->
-
-        <div v-else-if="htmlContent" v-html="htmlContent" :class="textAlign"></div>
-        <!-- end continuous text -->
     </div>
 </template>
 
 <script>
+// import mixins (editMode only)
 import EditMode from "../mixins/EditMode.vue"
+
+// import utils (editMode only)
 import {updateHandlerProvider} from "../utils/editmode.js"
 
 export default {
@@ -66,8 +71,18 @@ export default {
         }
     },
     props: {
-        editModeContextData: {
-            type: Object
+        /**
+         * orientation for entire component
+         *
+         * @allowedValues: "vertical", "horizontal"
+         */
+        orientation: {
+            type: String,
+            default: "vertical",
+            validator(value) {
+                return value === "vertical" ||
+                value === "horizontal"
+            }
         },
         /**
          * content for continuous text (can contain html-tags)
@@ -104,7 +119,7 @@ export default {
             }
         },
         /**
-         * properties for CmdHeadline-component
+         * property for CmdHeadline-component
          */
         cmdHeadline: {
             type: Object,
@@ -116,6 +131,12 @@ export default {
         cmdImage: {
             type: Object,
             required: false
+        },
+        /**
+         * editMode only
+         */
+        editModeContextData: {
+            type: Object
         }
     },
     computed: {
@@ -163,7 +184,15 @@ export default {
 </script>
 
 <style>
+/* begin cmd-text-image-block ---------------------------------------------------------------------------------------- */
+.cmd-text-image-block {
+    > .flex-container {
+        gap: calc(var(--default-gap) / 2);
+    }
+}
+
 .edit-mode .cmd-text-image-block textarea {
     width: 100%;
 }
+/* end cmd-text-image-block ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
         <!-- begin slot-content in section -->
-        <section v-if="innerWrapper" :class="setInnerClass" :id="anchorId">
+        <section v-if="useInnerSection" :class="setInnerClass" :id="anchorId">
             <!-- begin cmd-headline -->
             <CmdHeadline
                 v-if="cmdHeadline"
@@ -11,9 +11,19 @@
             />
             <!-- end cmd-headline -->
 
-            <!-- begin slot-content -->
-            <slot></slot>
-            <!-- end slot-content -->
+            <!-- begin slot-content (one column only) -->
+            <slot v-if="numberOfColumns === 1" ></slot>
+            <!-- end slot-content (one column only) -->
+
+            <!-- begin grid-/flex-container to wrap multiple columns/items -->
+            <div v-else :class="useGrid ? 'grid-container-create-columns' : 'flex-container'">
+                <div v-for="index in numberOfColumns" :key="`i${index}`" :class="useGrid ? 'grid-item' : 'flex-item'">
+                    <!-- begin slot-content (multiple columns only) -->
+                    <slot></slot>
+                    <!-- end slot-content (multiple columns only) -->
+                </div>
+            </div>
+            <!-- end grid-/flex-container to wrap multiple columns/items -->
         </section>
         <!-- end slot-content in section -->
 
@@ -32,6 +42,17 @@
 export default {
     name: "CmdWidthLimitationWrapper",
     props: {
+        numberOfColumns: {
+            type: Number,
+            default: 1,
+            validator(value) {
+                return value >= 0
+            }
+        },
+        useGrid: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set a html-tag as inner tag
          *
@@ -41,7 +62,7 @@ export default {
             type: String,
             default: "section",
             validator(value) {
-                return value;
+                return value
             }
         },
         /**
@@ -50,7 +71,7 @@ export default {
          * (if deactivated, content will be directly placed inside cmd-width-limitation-wrapper)
          *
          */
-        innerWrapper: {
+        useInnerSection: {
             type: Boolean,
             default: true
         },

package/src/components/EditComponentWrapper.vue

@@ -530,6 +530,10 @@ function buildComponentPath(component) {
                 }
             }
         }
+
+        &.active {
+            background: hsla(0, 0%, 100%, .2);
+        }
     }
 
     &.active {

package/src/index.js

@@ -26,7 +26,8 @@ export { default as CmdLoginForm } from '@/components/CmdLoginForm.vue'
 export { default as CmdMainNavigation } from '@/components/CmdMainNavigation.vue'
 export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultistepFormProgressBar.vue'
 export { default as CmdOpeningHours } from '@/components/CmdOpeningHours.vue'
-export { default as CmdPager } from '@/components/CmdPagination.vue'
+export { default as CmdPagination } from '@/components/CmdPagination.vue'
+export { default as CmdPageFooter } from '@/components/CmdPageFooter.vue'
 export { default as CmdProgressBar } from '@/components/CmdProgressBar.vue'
 export { default as CmdSidebar } from '@/components/CmdSidebar.vue'
 export { default as CmdSiteFooter } from '@/components/CmdSiteFooter.vue'

package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js

@@ -7,7 +7,6 @@ export default {
         "cmdfakeselect.linktext.select_all_options": "Select all options",
         "cmdfakeselect.headline.an_option_is_selected": "An option is selected",
         "cmdfakeselect.option.options_selected": "{0} options selected"
-
       }
     }
   }

package/src/mixins/pages/BasicForm/DefaultMessageProperties.js

@@ -0,0 +1,28 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "basic_form.legend": "Basic Form",
+        "basic_form.labeltext.salutation_male": "Mr.",
+        "basic_form.labeltext.salutation_female": "Mrs.",
+        "basic_form.labeltext.last_name": "Last name:",
+        "basic_form.placeholder.last_name": "Last name:",
+        "basic_form.labeltext.first_name": "First name:",
+        "basic_form.placeholder.first_name": "First name:",
+        "basic_form.labeltext.email": "Email:",
+        "basic_form.placeholder.email": "Email:",
+        "basic_form.labeltext.phone": "Phone:",
+        "basic_form.placeholder.phone": "Phone:",
+        "basic_form.labeltext.street_no": "Street/No.:",
+        "basic_form.placeholder.street_no": "Street/No.:",
+        "basic_form.labeltext.zip": "Zip:",
+        "basic_form.placeholder.zip": "Zip:",
+        "basic_form.labeltext.city": "City:",
+        "basic_form.placeholder.city": "City:",
+        "basic_form.labeltext.additional_address_info": "Additional address information",
+        "basic_form.placeholder.additional_address_info": "Additional address information",
+        "basic_form.labeltext.data_privacy": "I accept handling and saving of my personal data a mentioned in the <a href='/content/data-privacy-en.html' class='fancybox'>private policy</a>."
+      }
+    }
+  }
+}

package/src/pages/BasicForm.vue

@@ -0,0 +1,341 @@
+<template>
+    <div class="cmd-pages-basic-form">
+        <CmdForm :action="formAction"
+                 @submit="onSubmit"
+                 novalidate="novalidate"
+                 :textLegend="getMessage('basic_form.legend')"
+                 :submitButton="submitButton"
+        >
+            <div class="flex-container no-flex">
+                <!-- begin cmd-form-element -->
+                <CmdFormElement
+                    element="input"
+                    type="radio"
+                    :labelText="getMessage('basic_form.labeltext.salutation_male')"
+                    name="salutation"
+                    inputValue="M"
+                    :replace-input-type="true"
+                    v-model="formData.salutation"
+                    @validate="onValidate"
+                />
+                <!-- end cmd-form-element -->
+
+                <!-- begin cmd-form-element -->
+                <CmdFormElement
+                    element="input"
+                    type="radio"
+                    :labelText="getMessage('basic_form.labeltext.salutation_female')"
+                    name="salutation"
+                    :replace-input-type="true"
+                    v-model="formData.salutation"
+                    @validate="onValidate"
+                />
+                <!-- end cmd-form-element -->
+            </div>
+            <div class="flex-container">
+                <!-- begin cmd-form-element -->
+                <CmdFormElement
+                    element="input"
+                    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"
+                    :placeholder="getMessage('basic_form.placeholder.last_name')"
+                    v-model="formData.last_name.value"
+                    :status="formData.last_name.error ? 'error' : ''"
+                    @validate="onValidate"
+                />
+                <!-- end cmd-form-element -->
+
+                <!-- begin cmd-form-element -->
+                <CmdFormElement
+                    element="input"
+                    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!'"
+                    :placeholder="getMessage('basic_form.placeholder.first_name')"
+                    v-model="formData.first_name.value"
+                    :status="formData.first_name.error ? 'error' : ''"
+                    @validate="onValidate"
+                />
+                <!-- end cmd-form-element -->
+            </div>
+            <div class="flex-container">
+                <!-- begin cmd-form-element -->
+                <CmdFormElement
+                    element="input"
+                    type="email"
+                    iconClass="icon-mail"
+                    :labelText="getMessage('basic_form.labeltext.email')"
+                    :placeholder="getMessage('basic_form.placeholder.email')"
+                    required="required"
+                    v-model="formData.email.value"
+                    :status="formData.email.error ? 'error' : ''"
+                    :tooltipText="formData.email.error ? formData.email.errorMessage :  'Type your email!'"
+                    @validate="onValidate"
+                />
+                <!-- end cmd-form-element -->
+
+                <!-- begin cmd-form-element -->
+                <CmdFormElement
+                    element="input"
+                    type="phone"
+                    iconClass="icon-phone"
+                    :labelText="getMessage('basic_form.labeltext.phone')"
+                    :placeholder="getMessage('basic_form.placeholder.phone')"
+                    v-model="formData.phone.value"
+                    :status="formData.phone.error ? 'error' : ''"
+                    :tooltipText="formData.phone.error ? formData.phone.errorMessage :  'Type your phone number!'"
+                    @validate="onValidate"
+                />
+                <!-- end cmd-form-element -->
+            </div>
+
+            <div class="flex-container">
+                <!-- begin cmd-form-element -->
+                <CmdFormElement
+                    element="input"
+                    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!'"
+                    @validate="onValidate"
+                />
+                <!-- end cmd-form-element -->
+
+                <div class="input-wrapper">
+                    <!-- begin cmd-form-element -->
+                    <CmdFormElement
+                        element="input"
+                        type="number"
+                        :labelText="getMessage('basic_form.labeltext.zip')"
+                        :placeholder="getMessage('basic_form.placeholder.zip')"
+                        v-model="formData.zip.value"
+                        :status="formData.zip.error ? 'error' : ''"
+                        :tooltipText="formData.zip.error ? formData.zip.errorMessage :  'Type your zip/postal code!'"
+                        @validate="onValidate"
+                    />
+                    <!-- end cmd-form-element -->
+                    <!-- begin cmd-form-element -->
+                    <CmdFormElement
+                        element="input"
+                        type="text"
+                        :labelText="getMessage('basic_form.labeltext.city')"
+                        :placeholder="getMessage('basic_form.placeholder.city')"
+                        v-model="formData.city.value"
+                        :status="formData.city.error ? 'error' : ''"
+                        :tooltipText="formData.city.error ? formData.city.errorMessage :  'Type your city!'"
+                        @validate="onValidate"
+                    />
+                    <!-- end cmd-form-element -->
+                </div>
+
+                <!-- begin cmd-form-element -->
+                <CmdFormElement
+                    element="input"
+                    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!'"
+                    @validate="onValidate"
+                />
+                <!-- end cmd-form-element -->
+            </div>
+
+            <!-- begin cmd-form-element -->
+            <CmdFormElement
+                element="input"
+                type="checkbox"
+                :required="true"
+                v-model="formData.privacy.value"
+                :status="formData.privacy.error ? 'error' : ''"
+                @validate="onValidate">
+                <template v-slot:labeltext>
+                    <span ref="dataPrivacy" v-html="getMessage('basic_form.labeltext.data_privacy')"></span>
+                </template>
+            </CmdFormElement>
+            <!-- end cmd-form-element -->
+        </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"
+
+export default {
+    mixins: [
+        I18n,
+        DefaultMessageProperties,
+        FieldValidation
+    ],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
+    data() {
+        return {
+            //validator: new ContactFormValidator(name => this.label(name)),
+            formData: {
+                salutation: 'M',
+                last_name: {value: ''},
+                first_name: {value: ''},
+                email: {value: ''},
+                phone: {value: ''},
+                street_no: {value: ''},
+                zip: {value: ''},
+                city: {value: ''},
+                additional_address_info: {value: ''},
+                privacy: {value: false}
+            },
+            nativeButton: {
+                icon: {
+                    show: true,
+                    iconClass: "icon-message-send",
+                    tooltip: "Send message"
+                },
+                text: "Send"
+            }
+        }
+    },
+    props: {
+        hiddenFormElements: {
+            
+        },
+        receiverEmailAddress: {
+            type: String,
+            default: ""
+        },
+        formAction: {
+            type: String,
+            required: true
+        },
+        submitButton: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-message-send",
+                    text: "Send mail",
+                    type: "submit",
+                    primary: true
+                }
+            }
+        }
+    },
+    /*
+    mounted() {
+        usePiniaStore().$subscribe(() => {
+            this.$nextTick(() => {
+                this.$refs.dataPrivacy?.querySelector('.fancybox')?.addEventListener('click', event => {
+                    event.preventDefault()
+                    openFancyBox({url: event.target.getAttribute('href')})
+                })
+            })
+        })
+    },
+    */
+    methods: {
+        onSubmit(event) {
+            this.onValidate();
+
+            this.formData = Object.assign({}, this.validator.validatePrivacy(this.formData));
+            if (this.formData.error) {
+                event.preventDefault();
+                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() {
+            this.formData = Object.assign({}, this.validator.validate(this.formData));
+        },
+        executeLink(link, event) {
+            if (link.fancybox) {
+                event.preventDefault()
+                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})
+        // }
+    }
+}
+
+// @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>
+.cmd-pages-basic-form {
+    fieldset {
+        margin: 0;
+    }
+}
+</style>
+

package/src/pages/PageOverview.vue

@@ -0,0 +1,53 @@
+<template>
+    <!-- begin basic-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
+    <CmdWidthLimitationWrapper>
+        <h2 class="headline-demopage" id="section-basic-form">
+            <span>Basic Form</span>
+        </h2>
+        <BasicForm :formAction="basicForm.formAction" />
+    </CmdWidthLimitationWrapper>
+    <!-- end basic-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+    <!-- begin segmented-lists-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+    <CmdWidthLimitationWrapper>
+        <h2 class="headline-demopage" id="section-segmented-lists-of-links-downloads">
+            <span>Segmented Lists of links</span>
+        </h2>
+        <h3>Downloads</h3>
+        <SegmentedListsOfLinks :segments="listOfDownloadsData" />
+        <hr />
+        <h3>SiteMap</h3>
+        <SegmentedListsOfLinks :segments="listOfSiteLinksData" />
+    </CmdWidthLimitationWrapper>
+    <!-- end segmented-lists-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+</template>
+
+<script>
+// import page-templates
+import BasicForm from "@/pages/BasicForm.vue"
+import SegmentedListsOfLinks from "@/pages/SegmentedListsOfLinks.vue"
+
+// import example data
+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 {
+            listOfDownloadsData,
+            listOfSiteLinksData,
+            basicForm: {
+                formAction: "POST"
+            }
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>