comand-component-library 4.0.15 → 4.0.16

package/src/ComponentLibrary.vue

@@ -19,10 +19,11 @@
                         :useGap="false"
                     >
                         <template v-slot="slotProps">
+                            <!-- begin box template selection -->
                             <CmdBox
                                 :use-slots="['body']"
                                 :collapsible="true"
-                                :cmdHeadline="{headlineText: 'Template Settings', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
+                                :cmdHeadline="{headlineText: 'Template Selection', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
                                 :openCollapsedBox="slotProps.boxIsOpen(0)"
                                 @toggleCollapse="slotProps.boxToggled(0, $event)"
                             >
@@ -39,6 +40,9 @@
                                     </label>
                                 </template>
                             </CmdBox>
+                            <!-- end box template selection -->
+
+                            <!-- begin box list of components-->
                             <CmdBox
                                 :use-slots="['body']"
                                 :collapsible="true"
@@ -48,92 +52,21 @@
                             >
                                 <template v-slot:body>
                                     <ul>
-                                        <li :class="'active' ? activeEntry === 'CmdAddressData' : null"><a
-                                            href="#section-address-data"
-                                            @click="updateSettingsSidebar('CmdAddressData')">Address Data</a></li>
-                                        <li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
-                                        <li><a href="#section-bank-account-data"
-                                               @click="updateSettingsSidebar('CmdBankAccountData')">Bank Account
-                                            Data</a></li>
-                                        <li><a href="#section-boxes" @click="updateSettingsSidebar('CmdBox')">Boxes</a>
-                                        </li>
-                                        <li><a href="#section-breadcrumbs"
-                                               @click="updateSettingsSidebar('CmdBreadcrumbs')">Breadcrumbs</a></li>
-                                        <li><a href="#section-cookie-disclaimer" @click="hideSettingsSidebar">Cookie-Disclaimer</a>
-                                        </li>
-                                        <li><a href="#section-fancybox" @click="hideSettingsSidebar">Fancybox</a></li>
-                                        <li><a href="#section-forms" @click="hideSettingsSidebar">Forms</a></li>
-                                        <li><a href="#section-google-maps" @click="hideSettingsSidebar">Google-Maps&trade;</a>
-                                        </li>
-                                        <li><a href="#section-headlines" @click="updateSettingsSidebar('CmdHeadline')">Headlines</a>
-                                        </li>
-                                        <li><a href="#section-icons" @click="hideSettingsSidebar">Icons</a></li>
-                                        <li><a href="#section-input-group"
-                                               @click="updateSettingsSidebar('CmdInputGroup')">Input-Group</a></li>
-                                        <li><a href="#section-image" @click="hideSettingsSidebar">Image</a></li>
-                                        <li><a href="#section-image-gallery" @click="hideSettingsSidebar">Image
-                                            Gallery</a></li>
-                                        <li><a href="#section-image-zoom" @click="hideSettingsSidebar">Image-Zoom</a>
-                                        </li>
-                                        <li><a href="#section-list-of-links"
-                                               @click="updateSettingsSidebar('CmdLinkOfLists')">List Of Links</a></li>
-                                        <li><a href="#section-login-form"
-                                               @click="updateSettingsSidebar('CmdLoginForm')">Login Form</a></li>
-                                        <li><a href="#section-main-navigation"
-                                               @click="updateSettingsSidebar('CmdMainNavigation')">Main-Navigation</a>
-                                        </li>
-                                        <li><a href="#section-multistep-form-progress-bar"
-                                               @click="updateSettingsSidebar('CmdMultistepFormProgressBar')">Multistepform-Progressbar</a>
-                                        </li>
-                                        <li><a href="#section-newsletter-subscription"
-                                               @click="updateSettingsSidebar('CmdNewsletterSubscription')">Newsletter
-                                            Subscription</a></li>
-                                        <li><a href="#section-opening-hours"
-                                               @click="updateSettingsSidebar('CmdOpeningHours')">Opening Hours</a></li>
-                                        <li><a href="#section-page-footer"
-                                               @click="updateSettingsSidebar('CmdPageFooter')">Page Footer</a></li>
-                                        <li><a href="#section-page-header"
-                                               @click="updateSettingsSidebar('CmdPageHeader')">Page Header</a></li>
-                                        <li><a href="#section-pagination"
-                                               @click="updateSettingsSidebar('CmdPagination')">Pagination</a></li>
-                                        <li><a href="#section-site-footer" @click="hideSettingsSidebar">Site Footer</a>
-                                        </li>
-                                        <li><a href="#section-site-header"
-                                               @click="updateSettingsSidebar('CmdSiteHeader')">Site Header</a></li>
-                                        <li><a href="#section-site-search"
-                                               @click="updateSettingsSidebar('CmdSiteSearch')">Site Search</a></li>
-                                        <li><a href="#section-slideshow" @click="updateSettingsSidebar('CmdSlideshow')">Slideshow</a>
-                                        </li>
-                                        <li><a href="#section-social-networks"
-                                               @click="updateSettingsSidebar('CmdSocialNetworks')">Social Networks</a>
-                                        </li>
-                                        <li><a href="#section-switch-language" @click="hideSettingsSidebar">Switch Language</a>
-                                        </li>
-                                        <li><a href="#section-system-message"
-                                               @click="updateSettingsSidebar('CmdSystemMessage')">System-Message</a>
-                                        </li>
-                                        <li><a href="#section-tables"
-                                               @click="updateSettingsSidebar('CmdSystemMeCmdTablesssage')">Tables</a>
-                                        </li>
-                                        <li><a href="#section-tabs" @click="updateSettingsSidebar('CmdTabs')">Tabs</a>
-                                        </li>
-                                        <li><a href="#section-text-image-block"
-                                               @click="updateSettingsSidebar('CmdTextImageBlock')">Text Image Block</a>
-                                        </li>
-                                        <li><a href="#section-thumbnail-scroller"
-                                               @click="updateSettingsSidebar('CmdThumbnailScroller')">Thumbnail-Scroller</a>
-                                        </li>
-                                        <li><a href="#section-toggle-darkmode"
-                                               @click="updateSettingsSidebar('CmdToggleDarkMode')">ToggleDarkMode</a>
-                                        </li>
-                                        <li><a href="#section-tooltip" @click="updateSettingsSidebar('CmdTooltip')">Tooltip</a>
-                                        </li>
-                                        <li><a href="#section-upload-form"
-                                               @click="updateSettingsSidebar('CmdUploadForm')">Upload-Form</a>
+                                        <li v-for="(componentName, index) in listOfComponents" :key="index" :class="{'active' : activeEntry === 'Cmd' + componentName}">
+                                            <a
+                                                :href="sectionName(componentName)"
+                                                @click="updateSettingsSidebar(componentNameWithPrefix(componentName))"
+                                                title="Go to component"
+                                            >
+                                                {{ readableComponentName(componentName)}}
+                                            </a>
                                         </li>
                                     </ul>
                                 </template>
                             </CmdBox>
+                            <!-- end box list of components-->
+
+                            <!-- begin box page-templates -->
                             <CmdBox
                                 :use-slots="['body']"
                                 :collapsible="true"
@@ -186,18 +119,22 @@
                                     </ul>
                                 </template>
                             </CmdBox>
+                            <!-- end box page-templates -->
                         </template>
                     </CmdBoxWrapper>
+
+                    <!-- begin list comand-versions -->
                     <dl class="box-footer comand-versions">
                         <dt>Frontend-Framework Version:</dt>
                         <dd>{{ packageJson.dependencies['comand-frontend-framework'].replace("^", "") }}</dd>
                         <dt>Component-Library Version:</dt>
                         <dd>{{ packageJson.version }}</dd>
                     </dl>
+                    <!-- end list comand-versions -->
                 </template>
                 <template #closed>
                     <div class="closed-sidebar">
-                        <a href="#" class="button primary" title="Open Template Settings" @click.prevent="openBox(0)">
+                        <a href="#" class="button primary" title="Open Template Selection" @click.prevent="openBox(0)">
                             <span class="icon-settings-template"></span>
                         </a>
                         <a href="#" class="button primary" title="Open Components Overview" @click.prevent="openBox(1)">
@@ -226,10 +163,7 @@
                 <template v-slot:logo>
                     <!-- begin company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
                     <CmdCompanyLogo
-                        :link="companyLogoData.link"
-                        altText="CoManD Logo"
-                        :pathDefaultLogo="companyLogoData.pathDefaultLogo"
-                        :pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
+                        v-bind="companyLogoData"
                     />
                     <!-- end company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
                 </template>
@@ -1236,13 +1170,30 @@
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
                     </h2>
-                    <CmdBreadcrumbs ref="CmdBreadcrumbs"
-                                    :breadcrumbLabel="breadcrumbsData.breadcrumbLabel"
-                                    :breadcrumbLinks="breadcrumbsData.breadcrumbLinks"
-                                    v-bind="cmdBreadcrumbsSettingsData"/>
+                    <CmdBreadcrumbs
+                        ref="CmdBreadcrumbs"
+                        :breadcrumbLabel="breadcrumbsData.breadcrumbLabel"
+                        :breadcrumbLinks="breadcrumbsData.breadcrumbLinks"
+                        v-bind="cmdBreadcrumbsSettingsData"
+                    />
                 </CmdWidthLimitationWrapper>
                 <!-- end breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+                <!-- begin company-logo ------------------------------------------------------------------------------------------------------------------------------------------------------->
+                <CmdWidthLimitationWrapper>
+                    <h2 class="headline-demopage" id="section-company-logo">
+                        <span>Company Logo</span>
+                        <a href="#" class="icon-cog" title="Open Component Settings"
+                           @click.prevent="openSettingsSidebar('CmdCompanyLogo')"></a>
+                    </h2>
+                    <CmdCompanyLogo
+                        ref="CmdCompanyLogo"
+                        :link="companyLogoData.link"
+                        v-bind="cmdCompanyLogoSettingsData"
+                    />
+                </CmdWidthLimitationWrapper>
+                <!-- end company-logo ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
                 <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-cookie-disclaimer">Cookie Disclaimer</h2>
@@ -1815,7 +1766,7 @@
                         <CmdThumbnailScroller
                             ref="CmdThumbnailScroller"
                             v-bind="cmdThumbnailScrollerSettingsData"
-                            :thumbnail-scroller-items="thumbnailScrollerData"
+                            :thumbnailScrollerItems="thumbnailScrollerData"
                         />
                     </div>
                 </CmdWidthLimitationWrapper>
@@ -1871,16 +1822,19 @@
                 <!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
             </main>
 
+            <!-- begin page view -->
             <main v-else id="content">
                 <CmdWidthLimitationWrapper>
                     <h1 class="headline-demopage">Page Overview</h1>
                 </CmdWidthLimitationWrapper>
 
-                <!-- being page-overview -->
+                <!-- begin page-overview -->
                 <PageOverview />
                 <!-- end page-overview -->
             </main>
+            <!-- end page view -->
 
+            <!-- begin cmd-site-footer -->
             <CmdSiteFooter>
                 <!-- begin slot-content -->
                 Slot-Content for Site-Footer
@@ -1978,6 +1932,8 @@ import thumbnailScrollerTextData from '@/assets/data/thumbnail-scroller-text.jso
 
 import packageJson from '../package.json'
 
+import listOfComponents from "@/assets/data/listOfComponents.json"
+
 import PageOverview from "@/pages/PageOverview.vue"
 
 // import external functions
@@ -1996,6 +1952,7 @@ export default {
     },
     data() {
         return {
+            listOfComponents,
             activeEntry: "CmdAddressData",
             componentControls: {},
             componentView: true,
@@ -2159,17 +2116,27 @@ export default {
         }
     },
     methods: {
-        setActiveEntry(ComponentName) {
-            this.activeEntry = ComponentName
+        sectionName(componentName) {
+            let componentNameWithHyphens = componentName.replace(/([A-Z])/g, '-$1');
+            return "#section" + componentNameWithHyphens.toLowerCase();
+        },
+        readableComponentName(componentName) {
+           return componentName.replace(/(?!^)([A-Z])/g, ' $1');
         },
-        updateSettingsSidebar(ComponentName, type) {
-            this.setActiveEntry(ComponentName)
+        componentNameWithPrefix(componentName) {
+            return "Cmd" + componentName
+        },
+        setActiveEntry(componentName) {
+            this.activeEntry = componentName
+        },
+        updateSettingsSidebar(componentName, type) {
+            this.setActiveEntry(componentName)
 
             if(type !== 'page') {
                 this.componentView = true
 
                 if (this.openRightSidebar) {
-                    this.openSettingsSidebar(ComponentName)
+                    this.openSettingsSidebar(componentName)
                 }
             } else {
                 this.componentView = false
@@ -2187,6 +2154,8 @@ export default {
             this.componentSettings = this[lowerCaseComponentName + "SettingsData"]
 
             const controlsName = lowerCaseComponentName + "SettingsControls"
+            console.log("controlsName", controlsName)
+            console.log("this[controlsName]", this[controlsName])
             if (this[controlsName]) {
                 this.componentControls = this[controlsName]
             }
@@ -2387,6 +2356,11 @@ export default {
             &:not(:last-child) {
                 border-bottom: 0;
             }
+
+            li.active a {
+                padding: 0.1rem 0.3rem;
+                text-decoration: none;
+            }
         }
 
         .open-slot-wrapper {

package/src/assets/data/listOfComponents.json

@@ -0,0 +1,39 @@
+[
+  "AddressData",
+  "AdvancedFormElements",
+  "BankAccountData",
+  "Boxes",
+  "Breadcrumbs",
+  "CompanyLogo",
+  "CookieDisclaimer",
+  "Forms",
+  "Fancybox",
+  "GoogleMaps",
+  "Headlines",
+  "Icons",
+  "Image",
+  "ImageGallery",
+  "ImageZoom",
+  "ListOfLinks",
+  "LoginForm",
+  "MainNavigation",
+  "MultistepFormProgressBar",
+  "NewsletterSubscription",
+  "OpeningHours",
+  "PageFooter",
+  "PageHeader",
+  "Pagination",
+  "SiteFooter",
+  "SiteHeader",
+  "SiteSearch",
+  "Slideshow",
+  "SocialNetworks",
+  "SwitchLanguage",
+  "SystemMessage",
+  "Tables",
+  "Tabs",
+  "TextImageBlock",
+  "ThumbnailScroller",
+  "Tooltip",
+  "UploadForm"
+]

package/src/componentSettingsDataAndControls.vue

@@ -92,6 +92,11 @@ data() {
                 }
             ]
         },
+        cmdCompanyLogoSettingsData: {
+            pathDefaultLogo: "/media/images/logos/logo.svg",
+            pathDarkmodeLogo: "/media/images/logos/logo-darkmode.svg",
+            altText: "Company Logo"
+        },
         cmdFakeSelectSettingsData: {
             showSelectAllOptions: true,
             status: "",

package/src/components/CmdBox.vue

@@ -257,11 +257,11 @@ export default {
             default: false
         },
         /**
-         * set max-height for body (should only be used it allowContentToScroll-property is active)
+         * set max-height for body (should only be used if allowContentToScroll-property is active)
          */
         maxBoxBodyHeight: {
             type: String,
-            default: "10rem"
+            default: "20rem"
         },
         /**
          * activate if box should be collapsible
@@ -440,7 +440,6 @@ export default {
     },
     /*
     mounted() {
-
         if (this.allowContentToScroll && this.$refs.boxBody) {
             const topPosition = this.$refs.boxBody.getBoundingClientRect().top
             this.calculatedBodyHeight = (document.documentElement.clientHeight - topPosition) + "px"

package/src/components/CmdCompanyLogo.vue

@@ -2,16 +2,16 @@
     <div class="cmd-company-logo company-logo">
         <router-link v-if="link?.type === 'router'" :to="link?.path" :title="link?.tooltip">
             <!-- begin CmdImage -->
-            <CmdImage :image="image"/>
+            <CmdImage :image="image" @image-loaded="onImageLoaded" />
             <!-- end CmdImage -->
         </router-link>
         <a v-else-if="link?.type === 'href'" :href="link?.path" :title="link?.tooltip">
             <!-- begin CmdImage -->
-            <CmdImage :image="image"/>
+            <CmdImage :image="image" @image-loaded="onImageLoaded" />
             <!-- end CmdImage -->
         </a>
         <!-- begin CmdImage -->
-        <CmdImage v-else :image="image"/>
+        <CmdImage v-else :image="image" @image-loaded="onImageLoaded" />
         <!-- end CmdImage -->
     </div>
 </template>
@@ -88,6 +88,9 @@ export default {
         this.$_observer.disconnect()
     },
     methods: {
+        onImageLoaded(event) {
+            this.$emit("image-loaded", event)
+        },
         onColorSchemeChange(event) {
             this.prefersColorScheme = event.matches ? "light" : "dark"
         },

package/src/components/CmdFormElement.vue

@@ -28,7 +28,7 @@
                 <!-- end slot 'labeltext' -->
 
                 <!-- begin required asterisk -->
-                <sup v-if="$attrs.required !== undefined" aria-hidden="true">*</sup>
+                <sup v-if="$attrs.required != null && $attrs.required !== false" aria-hidden="true">*</sup>
                 <!-- end required asterisk -->
             </span>
 

package/src/components/CmdImage.vue

@@ -92,7 +92,7 @@
     <!-- begin default-view -->
     <figure v-else :class="['cmd-image', textAlign]">
         <figcaption v-if="figcaption?.show && figcaption?.position === 'top'">{{ figcaption?.text }}</figcaption>
-        <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
+        <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded" />
         <figcaption v-if="figcaption?.show && figcaption?.position !== 'top'">{{ figcaption?.text }}</figcaption>
     </figure>
     <!-- end default-view -->
@@ -248,6 +248,9 @@ export default {
         }
     },
     methods: {
+        onImageLoaded(event) {
+            this.$emit("image-loaded", event)
+        },
         itemProvider() {
             const editModeConfig = this.editModeConfig?.itemProviderOverwrite?.()
             return {

package/src/components/CmdSiteHeader.vue

@@ -1,6 +1,14 @@
 <template>
     <div
-        :class="['cmd-site-header site-header', {sticky: sticky, 'navigation-inline': navigationInline, 'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'}]"
+        ref="site-header"
+        :class="[
+            'cmd-site-header site-header',
+            {
+                sticky: sticky,
+                'navigation-inline': navigationInline,
+                'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'
+            }
+        ]"
         role="banner">
         <!-- begin slot for elements above header -->
         <div v-if="$slots.topheader" class="top-header">
@@ -8,6 +16,7 @@
         </div>
         <!-- end slot for elements above header -->
 
+        <!-- begin (inner) header -->
         <header
             :class="[
                 useGrid ? 'grid-container-create-columns': 'flex-container',
@@ -27,6 +36,7 @@
                 <CmdCompanyLogo
                     v-if="cmdCompanyLogo"
                     v-bind="cmdCompanyLogo"
+                    @image-loaded="onImageLoaded"
                 />
                 <!-- end CmdCompanyLogo -->
 
@@ -43,6 +53,7 @@
             </template>
             <!-- end content given by data -->
         </header>
+        <!-- end (inner) header -->
 
         <!-- begin CmdMainNavigation -->
         <CmdMainNavigation
@@ -61,6 +72,11 @@
 export default {
     name: "CmdSiteHeader",
     emits: ["offcanvas"],
+    data() {
+        return {
+            defaultLogoHeight: ""
+        }
+    },
     props: {
         /**
          * use only if default-button of inner navigation-component should not be used
@@ -85,6 +101,24 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * set if header (incl. logo) should be resized if user scrolls page
+         *
+         * scrollContainerToResizeHeader-property must be defined
+         */
+        resizeHeaderOnScroll: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * set selector the user scrolls to resize header
+         *
+         * resizeHeaderOnScroll-property must be activated
+         */
+        scrollContainerToResizeHeader: {
+            type: String,
+            default: "#page-wrapper"
+        },
         /**
          * use a grid for positioning of inner-elements (else a flex-container will be used)
          *
@@ -109,10 +143,34 @@ export default {
             required: false
         }
     },
+    mounted() {
+        if (this.resizeHeaderOnScroll) {
+            const scrollContainer = document.querySelector(this.scrollContainerToResizeHeader);
+
+            scrollContainer.addEventListener("scroll", function () {
+                const header = document.querySelector(".cmd-site-header > header");
+
+                if (scrollContainer.scrollTop > 0) {
+                    header.classList.add("resize-on-scroll");
+                } else {
+                    header.classList.remove("resize-on-scroll");
+                }
+            });
+        }
+    },
     methods: {
+        onImageLoaded(event) {
+            this.defaultLogoHeight = (event.target.height / 10) + "rem"
+        },
         emitOffcanvasStatus(event) {
             this.$emit("offcanvas", event)
         }
+    },
+    watch: {
+        defaultLogoHeight() {
+            const logo = this.$refs["site-header"].querySelector(".cmd-company-logo img")
+            logo.style.height = this.defaultLogoHeight
+        }
     }
 }
 </script>
@@ -130,6 +188,36 @@ export default {
     &.sticky {
         position: sticky;
         z-index: 300;
+
+        header {
+            --header-scroll-animation: var(--default-transition);
+            transition: var(--header-scroll-animation);
+
+            .cmd-company-logo {
+                figure {
+                    img {
+                        transform-origin: top left;
+                        transition: var(--header-scroll-animation);
+                        margin: 0;
+                    }
+                }
+            }
+
+            &.resize-on-scroll {
+                padding-top: var(--default-padding);
+                padding-bottom: var(--default-padding);
+                transition: var(--header-scroll-animation);
+
+                .cmd-company-logo {
+                    figure {
+                        img {
+                            transition: var(--header-scroll-animation);
+                            height: 5rem;
+                        }
+                    }
+                }
+            }
+        }
     }
 
     header, .cmd-main-navigation nav, .cmd-list-of-links {

package/src/components/ComponentSettings.vue

@@ -4,7 +4,6 @@
         :collapsible="true"
         :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
         :openCollapsedBox="true"
-        :allowContentToScroll="true"
         boxBodyClass="settings-body"
     >
         <template v-slot:body>