comand-component-library 4.0.39 → 4.0.41

package/src/components/CmdContainer.vue

@@ -3,9 +3,7 @@
         <!-- begin cmd-headline -->
         <CmdHeadline
             v-if="cmdHeadline"
-            :pre-headline-text="cmdHeadline.preHeadlineText"
-            :headline-text="cmdHeadline.headlineText"
-            :headline-level="cmdHeadline.headlineLevel"
+            v-bind="cmdHeadline"
         />
         <!-- end cmd-headline -->
 
@@ -73,8 +71,6 @@ export default {
         },
         /**
          * properties for CmdHeadline-component
-         *
-         * @requiredForAccessibilty
          */
         cmdHeadline: {
             type: Object,

package/src/components/CmdFancyBox.vue

@@ -9,9 +9,8 @@
             <header class="flex-container">
                 <!-- begin CmdHeadline -->
                 <CmdHeadline
-                    v-if="cmdHeadline?.show"
-                    :headlineText="cmdHeadline?.headlineText"
-                    :headlineLevel="cmdHeadline?.headlineLevel"
+                    v-if="cmdHeadline?.headlineText"
+                    v-bind="cmdHeadline"
                     :id="htmlId"
                 />
                 <!-- end CmdHeadline -->

package/src/components/CmdHeadline.vue

@@ -1,11 +1,12 @@
 <template>
     <!-- begin default-view -->
     <div v-if="!editModeContext || settingsContext || mainSidebarContext || headlineText"
-         :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
+         :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
+        <!-- begin headline with pre-headline-text -->
         <template v-if="preHeadlineText">
             <component v-if="headlineText" :is="headlineTag">
                 <!-- begin CmdIcon -->
-                <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+                <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
                 <!-- end CmdIcon -->
 
                 <span class="pre-headline-text-wrapper">
@@ -21,9 +22,12 @@
                 </span>
             </component>
         </template>
+        <!-- end headline with pre-headline-text -->
+
+        <!-- begin headline without pre-headline-text -->
         <component v-else :is="headlineTag">
             <!-- begin CmdIcon -->
-            <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+            <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
             <!-- end CmdIcon -->
 
             <span>
@@ -32,6 +36,7 @@
                 <!-- end slot -->
             </span>
         </component>
+        <!-- end headline without pre-headline-text -->
     </div>
     <!-- end default-view -->
 
@@ -48,26 +53,29 @@
         :allowDeleteComponent="!!headlineText"
     >
         <template v-slot="slotProps">
+            <!-- begin CmdFormElement -->
             <CmdFormElement
                 v-if="slotProps.editing"
                 element="input"
                 type="text"
-                :class="['edit-mode', 'headline', 'h'+ headlineLevel, getTextAlign]"
+                :class="['edit-mode', 'headline', 'h'+ headlineLevel, headlineTextAlign]"
                 labelText="Headline"
                 :showLabel="false"
                 placeholder="Headline"
                 v-model="editableHeadlineText"
             />
+            <!-- end CmdFormElement -->
+
             <template v-else-if="headlineText"
-                 :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
+                 :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
                 <!-- begin CmdIcon -->
-                <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+                <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
                 <!-- end CmdIcon -->
 
                 <template v-if="preHeadlineText">
                     <component v-if="headlineText" :is="headlineTag">
                         <!-- begin CmdIcon -->
-                        <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+                        <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
                         <!-- end CmdIcon -->
 
                         <!-- begin pre-headline-text -->
@@ -85,6 +93,7 @@
                     <!-- end slot -->
                 </component>
             </template>
+
             <!-- begin show placeholder if no image exists (and component is not edited) -->
             <button v-else-if="componentActive" type="button" class="button confirm" @click="onAddItem">
                 <span class="icon-plus"></span>
@@ -131,13 +140,6 @@ export default {
             type: String,
             required: false
         },
-        /**
-         * icon-class for icon shown left/before headline
-         */
-        headlineIcon: {
-            type: Object,
-            required: false
-        },
         /**
          * text-alignment (has no effect if icon is used)
          *
@@ -151,6 +153,13 @@ export default {
                     value === "center" ||
                     value === "right"
             }
+        },
+        /**
+         * properties for CmdIcon-component to show icon left/before headline
+         */
+        cmdIcon: {
+            type: Object,
+            required: false
         }
     },
     computed: {
@@ -166,7 +175,7 @@ export default {
             }
             return ""
         },
-        getTextAlign() {
+        headlineTextAlign() {
             if (this.textAlign) {
                 return "text-" + this.textAlign
             }

package/src/components/CmdImageZoom.vue

@@ -1,21 +1,23 @@
 <template>
-    <div class="cmd-imagezoom flex-container">
-
+    <div class="cmd-image-zoom flex-container">
         <!-- begin small image -->
         <a href="#" class="no-flex thumbnails-imagezoom" :title="imageSmall.tooltip">
-            <img :src="imageSmall.src"
+            <!-- begin CmdImage for small image -->
+            <CmdImage :src="imageSmall.src"
                  :alt="imageSmall.alt"
                 @mouseover="onMouseOver"
                 @mousemove="onMouseMove"
                 @mouseout="onMouseOut"
             />
-            <!-- end CmdImage -->
+            <!-- end CmdImage for small image -->
         </a>
         <!-- end small image -->
 
         <!-- begin large image -->
         <div v-if="showLargeImage" class="zoom-container">
-            <img :src="imageLarge.src" :alt="imageLarge.alt"/>
+            <!-- begin CmdImage for large image -->
+            <CmdImage v-bind="imageLarge" />
+            <!-- end CmdImage for large image -->
         </div>
         <div v-if="showLargeImage" class="zoom-overlay"></div>
         <!-- end large image -->
@@ -111,7 +113,7 @@ function clamp(value, min, max) {
 
 <style>
 /* begin cmd-imagezoom ---------------------------------------------------------------------------------------- */
-.cmd-imagezoom {
+.cmd-image-zoom {
     overflow: hidden;
 
     .zoom-container {

package/src/components/CmdLink.vue

@@ -5,6 +5,7 @@
         <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
         <span v-if="text">{{ text }}</span>
         <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
+        <slot></slot>
     </a>
     <!-- end href -->
 
@@ -13,6 +14,7 @@
         <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
         <span v-if="text">{{ text }}</span>
         <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
+        <slot></slot>
     </router-link>
     <!-- end router -->
 
@@ -21,6 +23,7 @@
         <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
         <span v-if="text">{{ text }}</span>
         <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
+        <slot></slot>
     </button>
     <!-- end button -->
     <!-- end CmdLink -->

package/src/components/CmdMultistepFormProgressBar.vue

@@ -1,6 +1,22 @@
 <template>
     <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap}]">
         <li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
+            <!-- begin CmdLink -->
+            <CmdLink
+                :linkType="step.type"
+                :path="step.path"
+                :title="step.tooltip"
+                @click.stop.prevent="clickedStep($event, index)"
+            >
+                <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
+                <!-- end CmdIcon -->
+                <span v-if="step.text">{{ step.text }}</span>
+                <span :class="separatorIconClass"></span>
+            </CmdLink>
+            <!-- end CmdLink -->
+
             <!-- begin type === href -->
             <a v-if="step.type === 'href'"
                :href="step.path" @click.stop.prevent="clickedStep($event, index)"

package/src/components/CmdNewsletterSubscription.vue

@@ -1,7 +1,7 @@
 <template>
     <fieldset class="cmd-newsletter-subscription flex-container">
         <!-- begin legend -->
-        <legend :class="{'hidden' : !showLegend}">{{ textLegend }}</legend>
+        <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
         <!-- end legend -->
 
         <!-- begin cmd-input-group -->
@@ -64,6 +64,11 @@ export default {
                 }
             }
         },
+        /**
+         * set type for button
+         *
+         * @allowedValues: "submit", "button"
+         */
         buttonType: {
             type: String,
             default: "button",
@@ -72,20 +77,20 @@ export default {
             }
         },
         /**
-         * toggle legend visibility
-         */
-        showLegend: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * text used as legend for login-fieldset
+         * legend for form
          *
-         * @requiredForAccessibility: true
+         * useFieldset-property must be activated
+         *
+         * @requiredForAccessiblity: true
          */
-        textLegend: {
-            type: String,
-            default: "Stay up-to-date"
+        legend: {
+            default() {
+                return {
+                    show: true,
+                    align: "left",
+                    text: "Legend"
+                }
+            }
         },
         /**
          * properties for CmdInputGroup-component

package/src/components/CmdOpeningHours.vue

@@ -9,16 +9,8 @@
 
         <!-- begin opening-status with link to detail-page -->
         <template v-if="!editing">
-            <template v-if="link && link?.path && link?.show">
-                <a v-if="link.type === 'href'" :href="link.path" :class="{closed: isClosed}">{{ textOpenClosed }}</a>
-                <router-link v-if="link.type === 'router'" :to="link.path" :class="{closed: isClosed}">{{
-                        textOpenClosed
-                    }}
-                </router-link>
-                <button v-if="link.type === 'button'" :class="['button', {closed: isClosed}]">{{
-                        textOpenClosed
-                    }}
-                </button>
+            <template v-if="cmdLink?.path">
+                <CmdLink :linkType="cmdLink.type || 'href'" v-bind="cmdLink" :class="{closed: isClosed}">{{ textOpenClosed }}</CmdLink>
             </template>
             <!-- end opening-status with link to detail-page -->
 
@@ -182,13 +174,6 @@ export default {
             type: Boolean,
             default: false
         },
-        /**
-         * set a link to a detail page
-         */
-        link: {
-            type: Object,
-            required: false
-        },
         /**
          * text for 'open'-information
          */
@@ -266,6 +251,13 @@ export default {
             type: Number,
             default: 5000
         },
+        /**
+         * properties for CmdLink-component
+         */
+        cmdLink: {
+            type: Object,
+            required: false
+        },
         /**
          * properties for CmdHeadline-component
          */

package/src/components/CmdSidebar.vue

@@ -5,9 +5,8 @@
             <!-- begin CmdHeadline -->
             <CmdHeadline
                 v-if="cmdHeadline?.headlineText && open"
-                :headlineText="cmdHeadline.headlineText"
+                v-bind="cmdHeadline"
                 :headlineLevel="cmdHeadline.headlineLevel || 3"
-                :textAlign="cmdHeadline.textAlign"
                 class="sidebar-main-headline"
             />
             <!-- end CmdHeadline -->

package/src/components/CmdSiteFooter.vue

@@ -11,7 +11,7 @@ export default {
     name: "CmdSiteFooter",
     props: {
         /**
-         * set to vertical if items inside should be arranged vertically
+         * set to vertical if inner content should be arranged vertically
          *
          * @allowedValues: horizontal, vertical
          */

package/src/components/CmdSiteHeader.vue

@@ -43,9 +43,7 @@
                 <!-- begin CmdMainNavigation -->
                 <CmdMainNavigation
                     v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
-                    :navigationEntries="cmdMainNavigation.navigationEntries"
-                    :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
-                    :stretchMainItems="cmdMainNavigation.stretchMainItems"
+                    v-bind="cmdMainNavigation"
                     :closeOffcanvas="closeOffcanvas"
                     @offcanvas="emitOffcanvasStatus"
                 />
@@ -58,10 +56,8 @@
         <!-- begin CmdMainNavigation -->
         <CmdMainNavigation
             v-if="cmdMainNavigation?.navigationEntries?.length && !navigationInline"
-            :navigationEntries="cmdMainNavigation.navigationEntries"
-            :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
+            v-bind="cmdMainNavigation"
             :closeOffcanvas="closeOffcanvas"
-            :stretchMainItems="cmdMainNavigation.stretchMainItems"
             @offcanvas="emitOffcanvasStatus"
         />
         <!-- end CmdMainNavigation -->

package/src/components/CmdSlideButton.vue

@@ -4,7 +4,7 @@
        :class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
        :title="getDirection.tooltip">
         <!-- begin CmdIcon -->
-        <CmdIcon :iconClass="getDirection.iconClass || 'next'" />
+        <CmdIcon :type="getDirection.iconType || 'auto'" :iconClass="getDirection.iconClass || 'next'" />
         <!-- end CmdIcon -->
     </a>
 </template>

package/src/components/CmdSwitchLanguage.vue

@@ -7,7 +7,7 @@
                    :class="['flag', language.iso2, {'active': activeLanguage(language)}]"
                    :title="language.tooltip"
                    @click="$emit('click', { originalEvent: $event, language} )">
-                    <img :src="imageSources[index]" :alt="language.name" />
+                   <img :src="imageSources[index]" :alt="language.name" />
                 </a>
                 <!-- end link-type 'href' -->
 

package/src/components/CmdSystemMessage.vue

@@ -22,7 +22,7 @@
             <!-- begin CmdHeadline -->
             <CmdHeadline
                 class="message-headline"
-                :headlineIcon="headlineIcon"
+                :cmdIcon="headlineIcon"
                 :headlineText="systemMessage"
                 :headlineLevel="messageHeadlineLevel"
                 :id="htmlId"

package/src/components/CmdToggleDarkMode.vue

@@ -36,19 +36,19 @@
         <template v-else>
             <!-- begin edit-mode -->
             <CmdFormElement
-                    element="input"
-                    type="text"
-                    labelText="Label for Light Mode"
-                    placeholder="Label for Light Mode"
-                    v-model="labelTextLightModeModel"
+                element="input"
+                type="text"
+                labelText="Label for Light Mode"
+                placeholder="Label for Light Mode"
+                v-model="labelTextLightModeModel"
             />
 
             <CmdFormElement
-                    element="input"
-                    type="text"
-                    labelText="Label for Dark Mode"
-                    placeholder="Label for Dark Mode"
-                    v-model="labelTextDarkModeModel"
+                element="input"
+                type="text"
+                labelText="Label for Dark Mode"
+                placeholder="Label for Dark Mode"
+                v-model="labelTextDarkModeModel"
             />
             <!-- end edit-mode -->
         </template>

package/src/components/CmdTooltip.vue

@@ -4,10 +4,7 @@
             <!-- begin CmdHeadline -->
             <CmdHeadline
                 v-if="cmdHeadline"
-               :iconClass="cmdHeadline.iconClass"
-               :preHeadline="cmdHeadline.preHeadline"
-               :headlineLevel="cmdHeadline.headlineLevel"
-               :headlineText="cmdHeadline.headlineText"
+               v-bind="cmdHeadline"
             />
             <!-- end CmdHeadline -->
 

package/src/components/CmdTooltipForFormElements.vue

@@ -2,7 +2,7 @@
     <!-- begin CmdTooltip -->
     <CmdTooltip
         ref="tooltip"
-        class="box cmd-tooltip-for-form-elements"
+        class="cmd-tooltip-for-form-elements box"
         :class="validationStatus"
         :relatedId="relatedId"
         :toggle-visibility-by-click="true">
@@ -10,12 +10,7 @@
         <!-- begin CmdListOfRequirements -->
         <CmdListOfRequirements
             v-if="cmdListOfRequirements.showRequirements"
-            :showHeadline="cmdListOfRequirements.showHeadline"
-            :inputRequirements="cmdListOfRequirements.inputRequirements"
-            :helplink="cmdListOfRequirements.helplink"
-            :inputModelValue="cmdListOfRequirements.inputModelValue"
-            :inputAttributes="cmdListOfRequirements.inputAttributes"
-            :labelText="cmdListOfRequirements.labelText"
+            v-bind="cmdListOfRequirements"
         />
         <!-- end CmdListOfRequirements -->
     </CmdTooltip>

package/src/components/CmdTooltipForInputElements.vue

@@ -10,13 +10,7 @@
         <!-- begin CmdListOfRequirements -->
         <CmdListOfRequirements
             v-if="cmdListOfRequirements.showRequirements"
-            :showHeadline="cmdListOfRequirements.showHeadline"
-            :inputRequirements="cmdListOfRequirements.inputRequirements"
-            :helplink="cmdListOfRequirements.helplink"
-            :inputModelValue="cmdListOfRequirements.inputModelValue"
-            :inputAttributes="cmdListOfRequirements.inputAttributes"
-            :validationTooltip="cmdListOfRequirements.validationTooltip"
-            :labelText="cmdListOfRequirements.labelText"
+            v-bind="cmdListOfRequirements"
         />
         <!-- end CmdListOfRequirements -->
     </CmdTooltip>

package/src/components/CmdUploadForm.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- begin advanced mode -->
     <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
-        <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
+        <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
         <!-- begin CmdHeadlineFieldset -->
         <CmdHeadline
             v-if="cmdHeadlineFieldset"
@@ -52,7 +52,7 @@
                                 @click.prevent="cancelUpload"
                             >
                                 <!-- begin CmdIcon -->
-                                <CmdIcon :iconClass="deleteIcon.iconClass" :type="deleteIcon.iconClass"/>
+                                <CmdIcon v-bind="iconDelete" />
                                 <!-- end CmdIcon -->
                             </a>
                             <span>
@@ -105,7 +105,7 @@
                                 @click.prevent="removeFile(index)"
                             >
                                 <!-- begin CmdIcon -->
-                                <CmdIcon :iconClass="iconDelete.iconClass" :type="iconDelete.iconType"/>
+                                <CmdIcon v-bind="iconDelete" />
                                 <!-- end CmdIcon -->
                             </a>
                             <span
@@ -271,7 +271,7 @@
                 @click="uploadFiles"
             >
                 <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconUpload.iconClass" :type="iconUpload.iconType"/>
+                <CmdIcon v-bind="iconUpload" />
                 <!-- end CmdIcon -->
                 <span v-if="listOfFiles.length === 1 || !allowMultipleFileUploads">
                     {{ getMessage("cmduploadform.buttontext.upload_file") }}
@@ -280,7 +280,7 @@
             </button>
             <button :class="['button', { disabled: listOfFiles.length === 0 }]" @click="cancel">
                 <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconCancel.iconClass" :type="iconCancel.iconType"/>
+                <CmdIcon v-bind="iconCancel" />
                 <!-- end CmdIcon -->
                 <span>{{ getMessage("cmduploadform.buttontext.cancel") }}</span>
             </button>
@@ -481,20 +481,20 @@ export default {
             default: true
         },
         /**
-         * toggle visibility for legend-text
-         */
-        showLegend: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * text for legend
+         * legend for form
+         *
+         * useFieldset-property must be activated
          *
-         * @requiredForAccessibility: true
+         * @requiredForAccessiblity: true
          */
-        textLegend: {
-            type: String,
-            required: false
+        legend: {
+            default() {
+                return {
+                    show: true,
+                    align: "left",
+                    text: "Legend"
+                }
+            }
         },
         /**
          * set icon for delete-icons

package/src/components/CmdWidthLimitationWrapper.vue

@@ -5,9 +5,7 @@
             <!-- begin cmd-headline -->
             <CmdHeadline
                 v-if="cmdHeadline"
-                :pre-headline-text="cmdHeadline.preHeadlineText"
-                :headline-text="cmdHeadline.headlineText"
-                :headline-level="cmdHeadline.headlineLevel"
+                v-bind="cmdHeadline"
             />
             <!-- end cmd-headline -->
 

package/src/components/ComponentSettings.vue

@@ -2,7 +2,7 @@
     <CmdBox
         :use-slots="['body']"
         :collapsible="true"
-        :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
+        :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, cmdIcon: {iconClass: 'icon-settings-template'}}"
         :openCollapsedBox="true"
         boxBodyClass="settings-body"
     >

package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json

@@ -14,7 +14,7 @@
             "small pre-headline-text above main-headline"
         ]
     },
-    "headlineIcon": {
+    "cmdIcon": {
         "comments": [
             "icon-class for icon shown left/before headline"
         ]