comand-component-library 4.0.40 → 4.0.41

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/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