comand-component-library 4.0.0 → 4.0.2

package/src/components/CmdLoginForm.vue

@@ -119,6 +119,7 @@
 
         <!-- begin CmdFormElement -->
         <CmdFormElement
+            ref="sendPassword"
             element="input"
             type="email"
             :fieldIconClass="cmdFormElementSendLogin.innerIconClass"

package/src/components/CmdMainNavigation.vue

@@ -181,6 +181,15 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * toggle if overlay over content should be shown if off-canvas is open
+         *
+         * @affectsStyling: true
+         */
+        showContentOverlay: {
+            type: Boolean,
+            default: true
+        },
         /**
          * list of all navigation-entries (incl. sub-entries)
          */
@@ -203,6 +212,11 @@ export default {
                 }
             }
         },
+        /**
+         * position for offcanvas-navigation
+         *
+         * @allowedValues: "right", "left"
+         */
         offcanvasPosition: {
             type: String,
             default: "right"
@@ -210,6 +224,8 @@ export default {
         /**
          * button to open off-canvas-navigation
          *
+         * (persistOnMobile-property must be false)
+         *
          * @requiredForAccessibility: partial
          */
         buttonOffcanvas: {
@@ -235,15 +251,6 @@ export default {
         subSubentriesIconClass: {
             type: String,
             default: "icon-single-arrow-right"
-        },
-        /**
-         * toggle if overlay over content should be shown if off-canvas is open
-         *
-         * @affectsStyling: true
-         */
-        showContentOverlay: {
-            type: Boolean,
-            default: true
         }
     },
     methods: {
@@ -384,6 +391,7 @@ export default {
 @media only screen and (max-width: $medium-max-width) {
     .cmd-main-navigation#main-navigation-wrapper {
         --nav-transition: all .5s linear;
+
         display: flex;
         background: none; /* overwrite framework-css */
         border: 0; /* overwrite framework-css */
@@ -401,11 +409,14 @@ export default {
 
             &.open-off-canvas {
                 nav {
+                    height: 100%;
+                    background: var(--default-background);
                     left: 0;
                     opacity: 1;
                     padding: 0 !important;
                     transition: var(--nav-transition);
                     border-right: var(--default-border);
+                    display: block;
                 }
 
                 &.show-content-overlay {

package/src/components/CmdMultistepFormProgressBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <ol class="cmd-multistep-form-progress-bar">
+    <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap}]">
         <li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
             <!-- begin type === href -->
             <a v-if="step.type === 'href'"
@@ -86,6 +86,10 @@ export default {
             default() {
                 return "icon-single-arrow-right"
             }
+        },
+        useGap: {
+            type: Boolean,
+            default: true
         }
     },
     methods: {
@@ -108,6 +112,34 @@ export default {
     justify-content: space-around;
     border: var(--default-border);
     margin: 0;
+    border-radius: var(--default-border-radius);
+
+    &.use-gap {
+        border: 0;
+        gap: var(--default-gap);
+
+        li {
+            border: var(--default-border) !important;
+            border-radius: var(--default-border-radius);;
+
+            a, a.active {
+                border: 0;
+                border-radius: inherit;
+
+                :is(span, [class*="icon-"]) + [class*="icon-"]:last-child {
+                    border: 0;
+                    right: -1rem;
+                    background: none;
+                }
+            }
+
+            a {
+                :is(span, [class*="icon-"]) + [class*="icon-"]:last-child {
+                    color: var(--default-text-color) !important;
+                }
+            }
+        }
+    }
 
     li {
         display: flex;
@@ -115,6 +147,16 @@ export default {
         list-style-type: none;
         margin: 0;
 
+        &:first-child, &:first-child > a {
+            border-top-left-radius: inherit;
+            border-bottom-left-radius: inherit;
+        }
+
+        &:last-child, &:last-child > a {
+            border-top-right-radius: inherit;
+            border-bottom-right-radius: inherit;
+        }
+
         a {
             display: flex;
             text-decoration: none;

package/src/components/CmdNewsletterSubscription.vue

@@ -71,6 +71,13 @@ export default {
                 return value === "submit" || value === "button"
             }
         },
+        /**
+         * toggle legend visibility
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
         /**
          * text used as legend for login-fieldset
          *
@@ -80,13 +87,6 @@ export default {
             type: String,
             default: "Stay up-to-date"
         },
-        /**
-         * toggle legend visibility
-         */
-        showLegend: {
-            type: Boolean,
-            default: true
-        },
         /**
          * properties for CmdInputGroup-component
          */

package/src/components/CmdOpeningHours.vue

@@ -55,7 +55,8 @@
                 :key="index"
                 :day="day"
                 :separator="separator"
-                :abbreviationText="abbreviationText"
+                :abbreviationTextAm="abbreviationTextAm"
+                :abbreviationTextPm="abbreviationTextPm"
             />
         </dl>
         <!-- end default view -->
@@ -82,7 +83,8 @@
                 <CmdOpeningHoursItem
                     :day="day"
                     :separator="separator"
-                    :abbreviationText="abbreviationText"
+                    :abbreviationTextAm="abbreviationTextAm"
+                    :abbreviationTextPm="abbreviationTextPm"
                 />
             </dl>
         </EditComponentWrapper>
@@ -168,13 +170,6 @@ export default {
         }
     },
     props: {
-        /**
-         * set a link to a detail page
-         */
-        link: {
-            type: Object,
-            required: false
-        },
         /**
          * toggles if "closed"-text will be shown
          *
@@ -184,6 +179,13 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * set a link to a detail page
+         */
+        link: {
+            type: Object,
+            required: false
+        },
         /**
          * text for 'open'-information
          */
@@ -198,13 +200,26 @@ export default {
             type: String,
             default: "Closed right now!"
         },
+        /**
+         * separator between time-spans
+         */
         separator: {
             type: String,
             default: "–"
         },
-        abbreviationText: {
+        /**
+         * abbreviation (behind time) for morning
+         */
+        abbreviationTextAm: {
+            type: String,
+            default: "am"
+        },
+        /**
+         * abbreviation (behind time) for afternoon
+         */
+        abbreviationTextPm: {
             type: String,
-            default: "h"
+            default: "pm"
         },
         /**
          * list of opening-hours
@@ -227,13 +242,6 @@ export default {
             type: String,
             required: false
         },
-        /**
-         * properties for CmdHeadline-component
-         */
-        cmdHeadline: {
-            type: Object,
-            required: false
-        },
         /**
          * option to set custom time format by function
          */
@@ -254,6 +262,13 @@ export default {
         checkInterval: {
             type: Number,
             default: 5000
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
         }
     },
     mounted() {

package/src/components/CmdOpeningHoursItem.vue

@@ -5,17 +5,11 @@
         <dd>
             <span v-if="day.am" class="am">
                 <template v-if="day.am.displayText">{{ day.am.displayText }}</template>
-                <template
-                    v-else>{{ getTime(day.am.fromTime) }} {{ separator }} {{
-                        getTime(day.am.tillTime)
-                    }}</template>
+                <template v-else>{{ getTime(day.am.fromTime, abbreviationTextAm) }} {{ separator }} {{getTime(day.am.tillTime)}}</template>
             </span>
             <span v-if="day.pm" class="pm">
                 <template v-if="day.pm.displayText">{{ day.pm.displayText }}</template>
-                <template
-                    v-else>{{ getTime(day.pm.fromTime) }} {{ separator }} {{
-                        getTime(day.pm.tillTime)
-                    }}</template>
+                <template v-else>{{ getTime(day.pm.fromTime, abbreviationTextPm) }} {{ separator }} {{getTime(day.pm.tillTime)}}</template>
             </span>
         </dd>
     </template>
@@ -178,11 +172,18 @@ export default {
             default: "–"
         },
         /**
-         *  abbreviation text for 'hours' (as a unit after displayed times)
+         * abbreviation (behind time) for morning
          */
-        abbreviationText: {
+        abbreviationTextAm: {
             type: String,
-            default: "h"
+            default: "am"
+        },
+        /**
+         * abbreviation (behind time) for afternoon
+         */
+        abbreviationTextPm: {
+            type: String,
+            default: "pm"
         },
         /**
          * option to set custom time format by function
@@ -196,11 +197,14 @@ export default {
         toggleClosedStatus(period) {
             period  === 'am' ? this.editableDay.amClosed = !this.editableDay.amClosed : this.editableDay.pmClosed = !this.editableDay.pmClosed
         },
-        getTime(time) {
+        getTime(time, suffix) {
             if (this.timeFormatter) {
                 return this.timeFormatter(time.hours, time.mins)
             }
-            return timeFormatting(":", " " + this.abbreviationText, "", false)(time.hours, time.mins)
+
+            console.log("suffix", suffix)
+
+            return timeFormatting(":", " " + this.abbreviationTextAm, " " + this.abbreviationTextPm, false)(time.hours, time.mins)
         },
         updateHandlerProvider() {
             const data = this.editableDay
@@ -248,6 +252,10 @@ export default {
 
 <style>
 .edit-mode-opening-hours-item {
+    dt {
+        min-width: 3ch;
+    }
+
     .am-wrapper, .pm-wrapper {
         align-items: center;
         gap: calc(var(--default-gap) / 2);

package/src/components/CmdPagination.vue

@@ -18,12 +18,12 @@
         <div class="page-index">
             <div class="flex-container">
                 <a :href="getHref(page)"
-                   :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button'}"
+                   :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button', 'hidden': !showPageNumbers}"
                    :title="currentPage !== index + 1 ? getMessage('cmdpager.tooltip.go_to_page', index + 1) : getMessage('cmdpager.tooltip.not_possible')"
                    v-for="(page, index) in pages"
                    :key="index"
                    @click.stop.prevent="showPage(page)" aria-live="polite">
-                    <span :class="{hidden: !showPageNumbers}">{{ index + 1 }}</span>
+                    <span>{{ index + 1 }}</span>
                 </a>
             </div>
         </div>

package/src/components/CmdSidebar.vue

@@ -136,6 +136,11 @@ export default {
         grid-template-columns: repeat(1, minmax(0, 1fr));
     }
 
+    .cmd-box {
+        border-left: 0;
+        border-right: 0;
+    }
+
     .inner-sidebar-wrapper {
         flex: 1;
         display: flex;
@@ -162,9 +167,9 @@ export default {
 
     &.collapse-to-right {
         flex-direction: row-reverse;
+        border-right: 0;
 
         > a {
-            border-left: 0;
             border-right: var(--default-border);
         }
     }

package/src/components/CmdSiteHeader.vue

@@ -35,6 +35,7 @@
                     v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
                     :navigationEntries="cmdMainNavigation.navigationEntries"
                     :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
+                    :stretchMainItems="cmdMainNavigation.stretchMainItems"
                     :closeOffcanvas="closeOffcanvas"
                     @offcanvas="emitOffcanvasStatus"
                 />
@@ -49,6 +50,7 @@
             :navigationEntries="cmdMainNavigation.navigationEntries"
             :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
             :closeOffcanvas="closeOffcanvas"
+            :stretchMainItems="cmdMainNavigation.stretchMainItems"
             @offcanvas="emitOffcanvasStatus"
         />
         <!-- end CmdMainNavigation -->
@@ -160,6 +162,7 @@ export default {
     header {
         padding-top: calc(var(--default-padding) * 2);
         padding-bottom: calc(var(--default-padding) * 2);
+        row-gap: 0;
 
         &.has-navigation {
             grid-template-rows: 1fr min-content;

package/src/components/CmdSiteSearch.vue

@@ -69,7 +69,7 @@
         <!-- end form-elements -->
 
         <!-- begin filters -->
-        <template v-if="cmdFakeSelect?.show">
+        <template v-if="useFilters">
             <a href="#" @click.prevent="showFilters = !showFilters">
                 <!-- begin CmdIcon -->
                 <CmdIcon
@@ -97,8 +97,9 @@
         </template>
         <!-- end filters -->
     </fieldset>
+
     <!-- begin CmdFormFilters -->
-    <CmdFormFilters v-if="cmdFakeSelect?.show" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
+    <CmdFormFilters v-if="useFilters" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
     <!-- end CmdFormFilters -->
 </template>
 
@@ -158,15 +159,6 @@ export default {
             type: Boolean,
             default: true
         },
-        /**
-         * text for legend
-         *
-         * @requiredForAccessibility: true
-         */
-        textLegend: {
-            type: String,
-            required: false
-        },
         /**
          * toggle legend visibility
          *
@@ -176,6 +168,15 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * text for legend
+         *
+         * @requiredForAccessibility: true
+         */
+        textLegend: {
+            type: String,
+            required: false
+        },
         /**
          * send search result from outside to display inside this component
          */

package/src/components/CmdSystemMessage.vue

@@ -133,6 +133,7 @@ export default {
 <style>
 /* begin cmd-system-message ---------------------------------------------------------------------------------------- */
 .cmd-system-message {
+    display: inline-flex;
     margin: var(--default-margin) 0;
     align-items: center;
 

package/src/components/CmdTable.vue

@@ -83,7 +83,7 @@ export default {
     data() {
         return {
             showTableData: true,
-            fullWidth: this.fullWidthOnDefault,
+            fullWidth: false,
             hasOverflow: false
         }
     },
@@ -258,6 +258,14 @@ export default {
             // this.$refs.table.previousElementSibling.style.right = `${newLeft}px`;
         }
 
+    },
+    watch: {
+        fullWidthOnDefault: {
+            handler() {
+                this.fullWidth = this.fullWidthOnDefault
+            },
+            immediate: true
+        }
     }
 }
 </script>

package/src/components/CmdTextImageBlock.vue

@@ -78,6 +78,8 @@ export default {
         },
         /**
          * text-alignment for paragraph/continuous text
+         *
+         * @allowedValues: "left", "center", "right"
          */
         paragraphTextAlign: {
             type: String,

package/src/components/CmdThumbnailScroller.vue

@@ -27,10 +27,10 @@
 
             <!-- begin list of images to slide -->
             <transition-group name="slide" tag="ul">
-                <li v-for="(item, index) in items" :key="index"
-                    :class="[{'active' : activeItemIndex === index}, item.id ? 'item-' + item.id : '']">
+                <li v-for="(item, index) in items" :key="index">
                     <a v-if="!editModeContext" :href="executeOnClick === 'url' ? item.url : '#'"
                        @click="executeLink(index, $event)"
+                       :class="[{'active' : activeItemIndex === index}, item.id ? 'item-' + item.id : '']"
                        :title="tooltip"
                        :target="executeOnClick === 'url' ? '_blank' : null"
                     >
@@ -117,6 +117,11 @@ export default {
         }
     },
     props: {
+        /**
+         * orientation for scroller
+         *
+         * @allewedValues: "horizontal", "vertical"
+         */
         orientation: {
             type: String,
             default: "horizontal"
@@ -397,22 +402,39 @@ export default {
                 margin-top: 2rem;
                 flex: none; /* avoids items to shrink to small on small screens */
 
-                a {
-                    text-align: center;
-                }
-
                 img {
                     border-radius: var(--border-radius);
                     min-width: 15rem;
                     max-height: 10rem;
                 }
 
-                &.active {
-                    a {
+                a {
+                    display: block;
+                    text-align: center;
+
+                    &.active {
+                        color: var(--pure-white);
+
+                        span, span[class*="icon"] {
+                            color: inherit
+                        }
+
                         figcaption {
                             opacity: 1;
                         }
                     }
+
+                    &:has(img) {
+                        padding: 0;
+                    }
+
+                    &:hover, &:active, &:focus {
+                        &.active {
+                            figcaption {
+                                color: var(--hyperlink-color);
+                            }
+                        }
+                    }
                 }
 
                 .image-wrapper {
@@ -468,38 +490,36 @@ export default {
             a {
                 color: var(--color-scheme-text-color);
                 text-decoration: none;
-            }
 
-            &.active {
-                img {
-                    border-color: var(--primary-color);
-                }
+                &.active {
+                    img {
+                        border-color: var(--primary-color);
+                    }
 
-                figcaption {
-                    color: var(--primary-color);
+                    figcaption {
+                        color: var(--primary-color);
+                    }
                 }
-            }
 
-            &:not(.active) {
-                img {
-                    border: var(--default-border);
-                    opacity: var(--reduced-opacity);
-                }
+                &:not(.active) {
+                    img {
+                        border: var(--default-border);
+                        opacity: var(--reduced-opacity);
+                    }
 
-                figcaption {
-                    text-decoration: none;
+                    figcaption {
+                        text-decoration: none;
+                    }
                 }
 
-                a {
-                    &:hover, &:active, &:focus {
-                        figcaption {
-                            color: var(--primary-color);
-                        }
+                &:hover, &:active, &:focus {
+                    figcaption {
+                        color: var(--primary-color);
+                    }
 
-                        img {
-                            border-color: var(--primary-color);
-                            opacity: 1;
-                        }
+                    img {
+                        border-color: var(--primary-color);
+                        opacity: 1;
                     }
                 }
             }

package/src/components/CmdTooltip.vue

@@ -101,6 +101,8 @@ export default {
         }
     },
     mounted() {
+        window.addEventListener('scroll', this.hideOnScroll);
+
         if(this.relatedId) {
             const relatedElement = document.getElementById(this.relatedId)
 
@@ -118,6 +120,9 @@ export default {
         }
     },
     methods: {
+        hideOnScroll() {
+            this.tooltipVisibility = true
+        },
         toggleTooltipVisibility(event) {
             this.getPointerPosition(event)
             this.tooltipVisibility = !this.tooltipVisibility