comand-component-library 4.3.26 → 4.3.28

package/src/components/CmdTextImageBlock.vue

@@ -1,39 +1,30 @@
 <template>
     <!-- begin CmdTextImageBlock ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-text-image-block flex-container', orientation]">
-        <!-- begin cmdHeadline -->
-        <CmdHeadline
-            v-if="(cmdHeadline?.headlineText || editModeContext) && (headlinePosition === 'aboveImage' && orientation === 'vertical')"
-            v-bind="cmdHeadline"
-        />
-        <!-- end cmdHeadline -->
-
-        <!-- begin cmdImage -->
-        <CmdImage
-            v-if="cmdImage"
-            :image="cmdImage?.image"
-            :figcaption="cmdImage?.figcaption"
-            :editModeConfig="{allowAddItem: false}"
-        />
-        <!-- end cmdImage -->
-
-        <div v-if="!editModeContext" class="flex-container vertical" :class="setInnerClass">
-            <!-- begin cmdHeadline -->
+        <slot>
             <CmdHeadline
-                v-if="(cmdHeadline?.headlineText || editModeContext) && (headlinePosition === 'belowImage' || orientation === 'horizontal')"
-                v-bind="cmdHeadline"
+                v-if="((cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText) || editModeContext) && (headlinePosition === 'aboveImage' && orientation === 'vertical')"
+                v-bind="cmdHeadlineProperties"
             />
-            <!-- end cmdHeadline -->
 
-            <!-- begin continuous text -->
-            <div v-if="htmlContent" v-html="htmlContent"></div>
-            <!-- end continuous text -->
+            <CmdImage
+                v-if="cmdImageProperties.show"
+                v-bind="cmdImageProperties"
+                :editModeConfig="{allowAddItem: false}"
+            />
 
-            <!-- begin slot-content -->
-            <slot></slot>
-            <!-- end slot-content -->
-        </div>
+            <div v-if="!editModeContext" class="flex-container vertical" :class="setInnerClass">
+                <CmdHeadline
+                    v-if="((cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText) || editModeContext) && (headlinePosition === 'belowImage' && orientation === 'horizontal')"
+                    v-bind="cmdHeadlineProperties"
+                />
 
+                <!-- begin continuous text -->
+                <CmdParagraph v-if="cmdParagraphProperties.show" v-bind="cmdParagraphProperties" />
+                <!-- end continuous text -->
+            </div>
+        </slot>
+        
         <!-- begin edit-mode -->
         <EditComponentWrapper
             v-if="editModeContext"
@@ -71,6 +62,11 @@ import {updateHandlerProvider} from "../utils/editmode.js"
 export default {
     name: "CmdTextImageBlock",
     mixins: [EditMode],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     data() {
         return {
             editableHtmlContent: null
@@ -91,27 +87,11 @@ export default {
             }
         },
         /**
-         * content for continuous text (can contain html-tags)
-         *
-         * @canContainHtml: true
-         */
-        htmlContent: {
-            type: String,
-            required: true
-        },
-        /**
-         * specify class for inner content
-         */
-        innerClass: {
-            type: String,
-            required: false
-        },
-        /**
-         * text-alignment for paragraph/continuous text
-         *
+         * set text-align for content
+         * 
          * @allowedValues: "left", "center", "right"
          */
-        paragraphTextAlign: {
+         textAlign: {
             type: String,
             default: "left",
             validator(value) {
@@ -119,6 +99,13 @@ export default {
                 value === "center" ||
                 value === "right"
             }
+         },
+        /**
+         * specify class for inner content
+         */
+        innerClass: {
+            type: String,
+            required: false
         },
         /**
          * position for headline
@@ -147,6 +134,15 @@ export default {
             type: Object,
             required: false
         },
+        /**
+         * properties for CmdParagraph-component
+         *
+         * @canContainHtml: true
+         */
+         cmdParagraph: {
+            type: Object,
+            required: false
+        },
         /**
          * editMode only
          */
@@ -155,18 +151,31 @@ export default {
         }
     },
     computed: {
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 2,
+                ...this.cmdHeadline
+            }
+        },
+        cmdImageProperties() {
+            return {
+                show: true,
+                ...this.cmdImage
+            }
+        },
+        cmdParagraphProperties() {
+            return {
+                show: true,
+                ...this.cmdParagraph
+            }
+        },
         paragraphComponentPath() {
             /*  because paragraph is no component on its own, besides the componentPath (for the property),
              an additional flag (here $isComponent-key) is used to let the store identify this edge case.
              the '$'-prefix is set to ensure that the flag is not a generic name, that potentially is used as a property-name in any component */
             return  [{componentPath: ["props", "htmlContent"], $isComponent: false}]
         },
-        textAlign() {
-            if (this.paragraphTextAlign) {
-                return "text-align-" + this.paragraphTextAlign
-            }
-            return ""
-        },
         setInnerClass() {
             return "inner-text-wrapper " + this.textAlign + " " + (this.innerClass || "")
         }

package/src/components/CmdThumbnailScroller.vue

@@ -10,12 +10,11 @@
         fullWidthClass
         ]"
          ref="thumbnail-scroller">
-        <!-- begin cmd-headline -->
+
         <CmdHeadline
-            v-if="cmdHeadline?.headlineText || editModeContext"
-            v-bind="cmdHeadline"
+            v-if="(cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText) || editModeContext"
+            v-bind="cmdHeadlineProperties"
         />
-        <!-- end cmd-headline -->
 
         <div :class="['inner-thumbnail-wrapper', {box: styleAsBox}]">
             <!-- begin CmdSlideButton -->
@@ -112,6 +111,11 @@ export default {
         DefaultMessageProperties,
         EditMode
     ],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     data() {
         return {
             items: [],
@@ -272,6 +276,13 @@ export default {
         resizeObserver.observe(thumbnailScrollerWrapper)
     },
     computed: {
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 2,
+                ...this.cmdHeadline
+            }
+        },
         tooltip() {
             if (this.contentType === "image") {
                 return this.getMessage("thumbnail_scroller.tooltip.open_large_image")
@@ -440,6 +451,7 @@ export default {
                 img {
                     min-width: 5rem;
                     max-height: 10rem;
+                    margin: 0 auto;
                 }
 
                 a {
@@ -462,9 +474,9 @@ export default {
                         }
 
                         figcaption {
-                            background: var(--primary-color);
+                            background: none;
                             opacity: 1;
-                            color: var(--color-white);
+                            color: var(--hyperlink-color);
                         }
                     }
 

package/src/components/CmdToast.vue

@@ -1,14 +1,14 @@
 <template>
     <!-- begin CmdToast ---------------------------------------------------------------------------------------- -->
-    <div v-if="showToast" class="cmd-toast box" role="status" aria-live="assertive" aria-atomic="true">
+    <div v-if="showToast" class="cmd-toast box flex-container flex-direction-column" role="status" :aria-live="ariaLive" aria-atomic="true">
+        <header>
+            <CmdHeadline v-if="(cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText) || editModeContext"
+                v-bind="cmdHeadlineProperties" />
+            <CmdLink @click="close" :aria-label="cmdLinkCloseIconProperties?.icon?.tooltip"
+                v-bind="cmdLinkCloseIconProperties" />
+        </header>
         <slot>
-            <header>
-                <CmdHeadline v-if="cmdHeadlineProps" v-bind="cmdHeadlineProps" />
-                <a href="#" @click.prevent="close" :aria-label="cmdIconProps.tooltip">
-                    <CmdIcon v-bind="cmdIconProps" />
-                </a>
-            </header>
-            <p>{{ message }}</p>
+            <CmdParagraph v-bind="cmdParagraphProperties" />
         </slot>
     </div>
     <!-- end CmdToast ---------------------------------------------------------------------------------------- -->
@@ -17,12 +17,31 @@
 <script>
 export default {
     name: 'CmdToast',
+    emits: ["status-changed"],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     data() {
         return {
             showToast: false
         }
     },
     props: {
+        /**
+         * set aria-live-value for accessibility
+         * 
+         * @requiredForAccessibility
+         */
+        ariaLive: {
+            tpye: String,
+            default: "assertive",
+            validator(value) {
+                return value === "assertive" ||
+                value === "alert"
+            }
+        },
         /**
          * message shown inside the toast
          */
@@ -38,26 +57,44 @@ export default {
             required: false
         },
         /**
-         * properties for CmdIcon-component
+         * properties for CmdLink-component
          */
-        cmdIcon: {
+        cmdLinkCloseIcon: {
+            type: Object,
+            required: false
+        },
+                /**
+         * properties for CmdParagraph-component
+         * 
+         * content will be set by "message"-property
+         */
+         cmdParagraph: {
             type: Object,
             required: false
         }
     },
     computed: {
-        cmdHeadlineProps() {
+        cmdHeadlineProperties() {
             return {
+                show: true,
                 headlineLevel: 6,
                 headlineText: "Information",
-                ...this?.cmdHeadline
+                ...this.cmdHeadline
             }
         },
-        cmdIconProps() {
+        cmdLinkCloseIconProperties() {
             return {
-                iconClass: "icon-cancel",
-                tooltip: "Close Toast",
-                ...this?.cmdIcon
+                icon: {
+                    iconClass: "icon-cancel-circle",
+                    tooltip: "Close Toast",
+                },
+                ...this.cmdLinkCloseIcon
+            }
+        },
+        cmdParagraphProperties() {
+            return {
+                content: this.message,
+                ...this.cmdParagraph
             }
         }
     },
@@ -89,11 +126,17 @@ export default {
     top: auto;
     bottom: 7rem;
     z-index: 1000;
+    gap: var(--gap-small);
 
     header {
         display: flex;
+        align-items: center;
+
+        .cmd-headline {
+            margin: 0;
+        }
 
-        a {
+        .cmd-link {
             margin-left: auto;
         }
     }

package/src/components/CmdToggleDarkMode.vue

@@ -2,40 +2,40 @@
     <!-- begin CmdToggleDarkMode ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-toggle-dark-mode', {'styled-layout': useStyledLayout, 'dark-mode': darkMode}]">
         <template v-if="!editing">
-        <!-- begin button-style -->
-        <a v-if="styledAsButton"
-           href="#"
-           :class="['button', {'dark-mode': darkMode}]"
-           @click.prevent="toggleColorScheme"
-        >
-            <span v-if="showLabel">{{ labelText }}</span>
-            <!-- begin CmdIcon -->
-            <CmdIcon
-                :iconClass="iconClass"
-                :type="iconType"
-                :tooltip="!showLabel ? labelText: ''"
-            />
-            <!-- end CmdIcon -->
-        </a>
-        <!-- end button-style -->
+            <!-- begin button-style -->
+            <a v-if="styledAsButton"
+            href="#"
+            :class="['button', {'dark-mode': darkMode}]"
+            @click.prevent="toggleColorScheme"
+            >
+                <span v-if="showLabel">{{ labelText }}</span>
+                <!-- begin CmdIcon -->
+                <CmdIcon
+                    :iconClass="iconClass"
+                    :type="iconType"
+                    :tooltip="!showLabel ? labelText: ''"
+                />
+                <!-- end CmdIcon -->
+            </a>
+            <!-- end button-style -->
 
-        <!-- begin CmdFormElement -->
-        <CmdFormElement
-            v-else
-            element="input"
-            type="checkbox"
-            :labelText="labelText"
-            :showLabel="showLabel"
-            v-model="darkMode"
-            :toggle-switch="true"
-            :title="!showLabel ? labelText: ''"
-            @update:modelValue="setColorScheme"
-        />
-        <!-- end CmdFormElement -->
+            <!-- begin CmdFormElement -->
+            <CmdFormElement
+                v-else
+                element="input"
+                type="checkbox"
+                :labelText="labelText"
+                :showLabel="showLabel"
+                v-model="darkMode"
+                :toggle-switch="true"
+                :title="!showLabel ? labelText: ''"
+                @update:modelValue="setColorScheme"
+            />
+            <!-- end CmdFormElement -->
         </template>
 
+        <!-- begin edit-mode -->
         <template v-else>
-            <!-- begin edit-mode -->
             <CmdFormElement
                 element="input"
                 type="text"
@@ -43,7 +43,6 @@
                 placeholder="Label for Light Mode"
                 v-model="labelTextLightModeModel"
             />
-
             <CmdFormElement
                 element="input"
                 type="text"
@@ -51,8 +50,8 @@
                 placeholder="Label for Dark Mode"
                 v-model="labelTextDarkModeModel"
             />
-            <!-- end edit-mode -->
         </template>
+        <!-- end edit-mode -->
     </div>
     <!-- end CmdToggleDarkMode ---------------------------------------------------------------------------------------- -->
 </template>

package/src/components/CmdTooltip.vue

@@ -5,17 +5,18 @@
         :style="'position-anchor:' + positionAnchor"
     >
         <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
+        <CmdHeadline v-if="cmdHeadlineProperties.show && cmdHeadlineProperties.headlineText" v-bind="cmdHeadlineProperties" />
         <!-- end CmdHeadline -->
 
-        <!-- begin icon to close tooltip -->
-        <button v-if="showCloseIcon" type="button" class="close-tooltip no-style"
-            popovertargetaction="hide" :popovertarget="popoverTargetName" :title="iconClose.tooltip">
-            <!-- begin CmdIcon -->
-            <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType" />
-            <!-- end CmdIcon -->
-        </button>
-        <!-- end icon to close tooltip -->
+        <!-- begin button to close tooltip -->
+        <CmdLink 
+            v-if="cmdLinkCloseButtonProperties.show"
+            v-bind="cmdLinkCloseButtonProperties" 
+            class="close-tooltip no-style" 
+            popovertargetaction="hide" 
+            :popovertarget="popoverTargetName"
+        />
+        <!-- end button to close tooltip -->
 
         <!-- begin slot-content -->
         <slot>
@@ -119,19 +120,11 @@ export default {
             default: ".site-wrapper"
         },
         /**
-         * icon 'close'
-         *
-         * @requiredForAccessibility: partial
+         * properties for CmdLink-compoentnfor close-button
          */
-        iconClose: {
+        cmdLinkCloseButton: {
             type: Object,
-            default() {
-                return {
-                    show: true,
-                    iconClass: "icon-cancel-circle",
-                    tooltip: "Close this tooltip!"
-                }
-            }
+            required: false
         },
         /**
          * enable toggling tooltip-visibility by click
@@ -148,6 +141,26 @@ export default {
             requiured: false
         }
     },
+    computed: {
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 6,
+                ...this.cmdHeadline
+            }
+        },
+        cmdLinkCloseButtonProperties() {
+            return {
+                show: true,
+                linkType: "button",
+                icon: {
+                    iconClass: "icon-cancel-circle",
+                    tooltip: "Close this tooltip!"
+                },
+                ...this.cmdLinkCloseButton
+            }
+        }
+    },
     mounted() {
         // provide the container the tooltip scrolls in (and should react to)
         const scrollContainerSelector = this.injectScrollContainer || this.scrollContainer