comand-component-library 4.0.14 → 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/CmdFancyBox.vue

@@ -484,6 +484,7 @@ export default FancyBox
     border-radius: var(--default-border-radius);
     overflow: hidden;
     gap: calc(var(--default-gap) / 2);
+    max-width: var(--max-width);
 
     &.image-gallery {
         margin-top: calc(var(--default-margin) * 2)
@@ -601,7 +602,7 @@ export default FancyBox
     .outer-content-wrapper {
         max-height: 85vh;
         overflow-x: hidden;
-        max-width: var(--max-width);
+        flex: none;
 
         .content {
             > img, > video {

package/src/components/CmdForm.vue

@@ -33,13 +33,22 @@
                 <!-- end loop for formElements -->
 
                 <!-- begin submit-button -->
-                <button v-if="submitButton" :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
+                <button v-if="submitButton && submitButton.position === 'insideFieldset'" :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
                     <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
                     <span v-if="submitButton.text">{{ submitButton.text }}</span>
                 </button>
                 <!-- end submit-button -->
             </fieldset>
 
+            <div v-if="submitButton && submitButton.position === 'belowFieldset'" class="button-wrapper">
+                <!-- begin submit-button -->
+                <button :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
+                    <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
+                    <span v-if="submitButton.text">{{ submitButton.text }}</span>
+                </button>
+                <!-- end submit-button -->
+            </div>
+
             <!-- begin button-row-slot-content -->
             <slot name="button-row"></slot>
             <!-- end button-row-slot-content -->
@@ -124,7 +133,7 @@ export default {
             required: false
         },
         /**
-         * submitbutton to submit all formdata
+         * submit-button to submit all form-data
          */
         submitButton: {
             type: Object,
@@ -133,6 +142,7 @@ export default {
                     iconClass: "icon-check",
                     text: "Submit",
                     type: "submit",
+                    position: "insideFieldset",
                     primary: true
                 }
             }
@@ -214,6 +224,10 @@ export default {
     .button, .button:last-child {
         margin-left: auto;
     }
+
+    fieldset + .button-wrapper {
+        margin-top: var(--default-margin);
+    }
 }
 /* end cmd-form ---------------------------------------------------------------------------------------- */
 </style>

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>
 
@@ -423,13 +423,6 @@ export default {
                 }
             }
         },
-        /**
-         * set text for tooltip
-         */
-        tooltipText: {
-            type: String,
-            required: false
-        },
         /**
          * set class for inner icon (icon placed 'inside' input/ left of input-text)
          *

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/CmdMainNavigation.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         :class="[
-            'cmd-main-navigation',
+            'cmd-main-navigation main-navigation-wrapper',
             {
                 'hide-sub-navigation' : !showSubNavigations,
                 'open-off-canvas': showOffcanvas,
@@ -9,7 +9,7 @@
                 'show-content-overlay': showContentOverlay,
                 'off-canvas-right': offcanvasPosition === 'right'
             }
-        ]" id="main-navigation-wrapper">
+        ]">
         <nav>
             <!-- begin main-level -->
             <ul :class="{'stretch-items' : stretchMainItems}">
@@ -393,7 +393,7 @@ export default {
 @import '../assets/styles/variables';
 
 @media only screen and (max-width: $medium-max-width) {
-    .cmd-main-navigation#main-navigation-wrapper {
+    .cmd-main-navigation.main-navigation-wrapper {
         --nav-transition: all .5s linear;
 
         display: flex;

package/src/components/CmdOpeningHours.vue

@@ -62,32 +62,35 @@
         <!-- end default view -->
 
         <!-- begin edit-mode -->
-        <button v-if="openingHoursFormatted.length === 0" type="button" class="button confirm small" @click="onAddItem">
-            <span class="icon-plus"></span>
-            <span>Add new entry</span>
-        </button>
-
-        <EditComponentWrapper
-            v-else
-            v-for="(day, index) in openingHoursFormatted"
-            :key="'x' + index"
-            class="edit-items"
-            :showComponentName="false"
-            componentName="CmdOpeningHoursItem"
-            :componentProps="day"
-            :allowedComponentTypes="[]"
-            :componentPath="['props', 'openingHours', index]"
-            :itemProvider="itemProvider"
-        >
-            <dl class="edit-mode-opening-hours-item">
-                <CmdOpeningHoursItem
-                    :day="day"
-                    :separator="separator"
-                    :abbreviationTextAm="abbreviationTextAm"
-                    :abbreviationTextPm="abbreviationTextPm"
-                />
-            </dl>
-        </EditComponentWrapper>
+        <template v-else>
+            <button v-if="openingHoursFormatted.length === 0" type="button" class="button confirm small"
+                    @click="onAddItem">
+                <span class="icon-plus"></span>
+                <span>Add new entry</span>
+            </button>
+
+            <EditComponentWrapper
+                v-else
+                v-for="(day, index) in openingHoursFormatted"
+                :key="'x' + index"
+                class="edit-items"
+                :showComponentName="false"
+                componentName="CmdOpeningHoursItem"
+                :componentProps="day"
+                :allowedComponentTypes="[]"
+                :componentPath="['props', 'openingHours', index]"
+                :itemProvider="itemProvider"
+            >
+                <dl class="edit-mode-opening-hours-item">
+                    <CmdOpeningHoursItem
+                        :day="day"
+                        :separator="separator"
+                        :abbreviationTextAm="abbreviationTextAm"
+                        :abbreviationTextPm="abbreviationTextPm"
+                    />
+                </dl>
+            </EditComponentWrapper>
+        </template>
         <!-- end edit-mode -->
 
         <!-- begin holiday-closes-text and miscellaneous information -->

package/src/components/CmdPageHeader.vue

@@ -6,7 +6,7 @@
             <!-- end CmdBreadcrumbs -->
 
             <!-- begin CmdHeadline -->
-            <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
+            <CmdHeadline v-if="cmdHeadline.headlineText" v-bind="cmdHeadline" />
             <!-- end CmdHeadline -->
         </div>