comand-component-library 4.0.6 → 4.0.8

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>

package/src/pages/PageWrapper.vue

@@ -0,0 +1,260 @@
+<template>
+    <a id="anchor-back-to-top"></a>
+    <div :class="{'overflow-hidden': offCanvasOpen}" id="page-wrapper"
+         :style="{'scroll-padding-top': heightSiteHeader + 'px'}">
+        <!-- begin cmd-site-header -->
+        <CmdSiteHeader
+            v-if="cmdSiteHeader"
+            :cmdMainNavigation="{navigationEntries: mainNavigationEntries}"
+            :closeOffcanvas="{ iconClass: 'icon-cancel', text: label('main_navigation.close_navigation'), showText: true}"
+            :navigationInline="cmdSiteHeader.navigationInline"
+            @offcanvas="offcanvasToggled"
+        >
+            <template v-slot:top-header>
+                <!-- begin cmd-list-of-links (for top-header-navigation) -->
+                <CmdListOfLinks
+                    v-if="topHeaderNavigationEntries"
+                    :links="topHeaderNavigationEntries"
+                    orientation="horizontal"
+                    align="right"
+                />
+                <!-- end cmd-list-of-links (for top-header-navigation) -->
+            </template>
+            <template v-slot:logo>
+                <!-- begin cmd-company-logo -->
+                <CmdCompanyLogo
+                    v-if="cmdCompanyLogo.pathDefaultLogo"
+                    :altText="cmdCompanyLogo.altText"
+                    :pathDefaultLogo="cmdCompanyLogo.pathDefaultLogo"
+                    :pathDarkmodeLogo="cmdCompanyLogo.pathDarkmodeLogo"
+                />
+                <!-- end cmd-company-logo -->
+            </template>
+        </CmdSiteHeader>
+        <!-- end cmd-site-header -->
+
+        <!-- begin main-content -->
+        <main id="content">
+            <div class="inner-content-wrapper">
+                <!-- begin left column -->
+                <aside v-if="mainContent.leftColumn.show" class="left-column">
+                    <!-- begin slot left column -->
+                    <slot name="left-column"></slot>
+                    <!-- end slot left column -->
+                </aside>
+                <!-- end left column -->
+
+                <!-- begin center/main column -->
+                <div class="main-content-wrapper">
+                    <!-- begin CmdBreadcrumbs -->
+                    <CmdBreadcrumbs v-if="cmdBreadcrumbs" v-bind="cmdBreadcrumbs"/>
+                    <!-- end CmdBreadcrumbs -->
+
+                    <!-- begin CmdHeadline -->
+                    <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline"/>
+                    <!-- end CmdHeadline -->
+
+                    <slot></slot>
+
+                    <!-- begin CmdSocialNetworks -->
+                    <CmdSocialNetworks v-if="cmdSocialNetworks" v-bind="cmdSocialNetworks"/>
+                    <!-- end CmdSocialNetworks -->
+                </div>
+                <!-- end center/main column -->
+
+                <!-- begin right column -->
+                <aside v-if="mainContent.rightColumn.show" class="right-column">
+                    <!-- begin slot right column -->
+                    <slot name="left-column"></slot>
+                    <!-- end slot right column -->
+                </aside>
+                <!-- begin right column -->
+            </div>
+        </main>
+        <!-- end main-content -->
+
+        <!-- begin cmd-site-footer -->
+        <CmdSiteFooter v-if="cmdSiteFooter">
+            <!-- begin parent-component -->
+            <component
+                v-for="(component, index) in cmdSiteFooter.components || []" :key="index"
+                :is="component.name"
+                v-bind="component.props"
+                v-on="handlers(component)"
+            >
+                <!-- begin child-component -->
+                <component
+                    v-for="(childComponent, childComponentIndex) in component.components || []"
+                    :key="childComponentIndex" :is="childComponent.name"
+                    v-bind="childComponent.props"
+                    v-on="handlers(childComponent)"
+                    :editContent="childComponent.editContent"
+                />
+                <!-- end child-component -->
+            </component>
+            <!-- end parent-component -->
+        </CmdSiteFooter>
+        <!-- end cmd-site-footer -->
+
+        <!-- begin cmd-copyright-information DO NOT REMOVE -->
+        <CmdCopyrightInformation/>
+        <!-- end cmd-copyright-information DO NOT REMOVE -->
+
+        <!-- begin cmd-back-to-top-button -->
+        <CmdBackToTopButton
+            href="#anchor-back-to-top"
+            :iconBackToTop="iconBackToTop"
+            scroll-container="#page-wrapper"
+        />
+        <!-- end cmd-back-to-top-button -->
+
+        <!-- begin fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
+        <CmdFancyBox
+            v-if="cmdCookieDisclaimer"
+            :show="fancyBoxCookieDisclaimer"
+            :fancyboxOptions="{}"
+            :allowEscapeKey="false"
+            :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
+            ariaLabelText="Cookie Disclaimer"
+        >
+            <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <CmdCookieDisclaimer
+                :cookieOptions="cmdCookieDisclaimer.options"
+                buttonLabelAcceptAllCookies="Accept all cookies"
+                buttonLabelAcceptCurrentSettings="Accept current settings"
+                @closeCookieDisclaimer="closeCookieDisclaimer"
+                v-model="acceptedCookies"
+                :cmdHeadlineCookieDisclaimer="{ show: false }">
+                <template #privacy-text>
+                    <p>
+                        <strong>
+                            By browsing this web site you accept the usage and saving of anonymous data!
+                        </strong>
+                    </p>
+                </template>
+            </CmdCookieDisclaimer>
+            <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
+        </CmdFancyBox>
+        <!-- end fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+// import functions
+import {openFancyBox} from "@/components/CmdFancyBox.vue"
+
+export default {
+    name: "PageWrapper",
+    data() {
+        return {
+            offCanvasOpen: false,
+            heightSiteHeader: 150,
+            acceptedCookies: [],
+            fancyBoxCookieDisclaimer: true
+        }
+    },
+    props: {
+        topHeaderNavigationEntries: {
+            default: []
+        },
+        mainNavigationEntries: {
+            default: []
+        },
+        mainContent: {
+            leftColumn: {
+                show: true
+            },
+            rightColumn: {
+                show: true
+            }
+        },
+        cmdSiteHeader: {
+            default: null
+        },
+        cmdCompanyLogo: {
+            default: null
+        },
+        cmdBreadcrumbs: {
+            default: null
+        },
+        cmdHeadline: {
+            default: null
+        },
+        cmdSocialNetworks: {
+            default: null
+        },
+        cmdSiteFooter: {
+            default: null
+        },
+        cmdCookieDisclaimer: {
+            default: null
+        }
+    },
+    mounted() {
+        const siteHeader = document.getElementsByClassName("cmd-site-header")
+
+        if (siteHeader.length > 0) {
+            const resizeObserver = new ResizeObserver(entries => {
+                // get height of site-header to set scroll-padding on #page-wrapper
+                this.heightSiteHeader = entries[0].target.offsetHeight
+            })
+            resizeObserver.observe(siteHeader[0])
+        }
+    },
+    computed: {
+        iconBackToTop() {
+            return {
+                iconClass: "icon-single-arrow-up",
+                tooltip: this.label("back_to_top_button.tooltip")
+            }
+        }
+    },
+    methods: {
+        offcanvasToggled(event) {
+            this.offCanvasOpen = event.open
+        },
+        handlers(component) {
+            if (component.handlers === "toggleSection") {
+                return {
+                    "click": this.toggleSection
+                }
+            }
+            return {}
+        },
+        openFancybox(event) {
+            openFancyBox({url: event.target.href})
+        },
+        closeCookieDisclaimer() {
+            this.fancyBoxCookieDisclaimer = false
+            localStorage.setItem("onepagerPrivacySettingsAccepted", "true")
+        }
+    }
+}
+</script>
+
+<style>
+.inner-content-wrapper {
+    display: flex;
+
+    &:has(> aside) {
+        aside {
+            flex: 1;
+
+            &:first-child {
+                & + .main-content-wrapper {
+                    flex: 2;
+
+                    &:last-child {
+                        flex: 3;
+                    }
+                }
+            }
+        }
+    }
+
+    .main-content-wrapper {
+        width: 100%;
+    }
+
+}
+</style>

package/src/pages/SegmentedListsOfLinks.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="cmd-page-segmented-lists-of-links flex-container vertical">
+        <template v-for="(segment, index) in segments" :key="index">
+            <!-- begin CmdListOfLinks -->
+            <CmdListOfLinks
+                :links="segment.links"
+                :orientation="segment.orientation"
+                :largeIcons="segment.largeIcons"
+                :cmdHeadline="segment.headline"
+            />
+            <!-- end CmdListOfLinks -->
+
+            <!-- begin slot-content -->
+            <slot name="segmented-lists-of-links-slot-${index}"></slot>
+            <!-- end slot-content -->
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SegmentedListsOfLinks",
+    props: {
+        segments: {
+            type: Array,
+            default: null
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>