comand-component-library 4.0.40 → 4.0.42

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

@@ -1,35 +1,62 @@
 <template>
     <!-- begin CmdLink -->
     <!-- begin href -->
-    <a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click.prevent="emitClick($event, 'href')">
-        <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>
+    <a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click="emitClick($event, 'href')">
+        <InnerLink :text="text" :icon="icon">
+            <slot></slot>
+        </InnerLink>
     </a>
     <!-- end href -->
 
     <!-- begin router -->
-    <router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click.prevent="emitClick($event, 'router')">
-        <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>
+    <router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click="emitClick($event, 'router')">
+        <InnerLink :text="text" :icon="icon">
+            <slot></slot>
+        </InnerLink>
     </router-link>
     <!-- end router -->
 
     <!-- begin button -->
-    <button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton}]" type="submit" @click.prevent="emitClick($event, 'button')">
-        <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>
+    <button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton}]" type="submit" @click="emitClick($event, 'button')">
+        <InnerLink :text="text" :icon="icon">
+            <slot></slot>
+        </InnerLink>
     </button>
     <!-- end button -->
     <!-- end CmdLink -->
 </template>
 
 <script>
+import { defineComponent } from "vue"
+const InnerLink = defineComponent({
+    template: `<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>`,
+    props: {
+        /**
+         * icon to display
+         */
+        icon: {
+            type: Object,
+            default: {}
+        },
+        /**
+         * displayed text
+         */
+        text: {
+            type: String,
+            default: ""
+        }
+    }
+})
+
 export default {
     name: "CmdLink",
     emits: ["click"],
+    components: {
+        InnerLink
+    },
     props: {
         /**
          * set type of link
@@ -51,7 +78,7 @@ export default {
          * linkType-property must be 'href', 'router'
          */
         path: {
-            type: String,
+            type: [String, Object],
             default: "#"
         },
         /**

package/src/components/CmdListOfLinksItem.vue

@@ -12,6 +12,7 @@
             <!-- end CmdIcon -->
             <span v-if="link.text">{{ link.text }}</span>
         </a>
+        <!--CmdLink @click="executeLink()" /-->
         <!-- end use href --->
 
         <!-- begin use router-link -->
@@ -24,6 +25,7 @@
             <!-- end CmdIcon -->
             <span v-if="link.text">{{ link.text }}</span>
         </router-link>
+        <!--CmdLink :path="getRoute(link)" /-->
         <!-- end use router-link -->
 
         <!-- begin CmdListOfLinksItem for nested children -->

package/src/components/CmdMultistepFormProgressBar.vue

@@ -1,43 +1,11 @@
 <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 type === href -->
-            <a v-if="step.type === 'href'"
-               :href="step.path" @click.stop.prevent="clickedStep($event, index)"
-               :title="step.tooltip"
-            >
-                <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>
-            </a>
-            <!-- end type === href -->
-
-            <!-- begin type === router -->
-            <router-link
-                v-if="step.type === 'router'"
-                :to="getRoute(step)"
-                :title="step.tooltip"
-            >
-                <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>
-            </router-link>
-            <!-- end type === router -->
-
-            <!-- begin type === button/submit -->
-            <button
-                v-if="step.type === 'button' || step.type === 'submit'"
-                class="button"
-                :type="step.type"
-                :name="step.name"
+            <!-- begin CmdLink -->
+            <CmdLink
+                :linkType="step.type"
+                :path="step.path"
                 :title="step.tooltip"
-                :formaction="step.formaction"
                 @click.stop.prevent="clickedStep($event, index)"
             >
                 <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
@@ -46,8 +14,8 @@
                 <!-- end CmdIcon -->
                 <span v-if="step.text">{{ step.text }}</span>
                 <span :class="separatorIconClass"></span>
-            </button>
-            <!-- end type === button/submit -->
+            </CmdLink>
+            <!-- end CmdLink -->
         </li>
     </ol>
 </template>

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

@@ -1,5 +1,6 @@
 <template>
     <div class="cmd-tabs">
+        <!-- being tab-list -->
         <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
             <li v-for="(tab, index) in tabs" :class="{active : showTab === index}" :key="index" role="tab">
                 <a href="#" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : undefined">
@@ -10,7 +11,9 @@
                 </a>
             </li>
         </ul>
+        <!-- end tab-list -->
 
+        <!-- being tab-content -->
         <!-- begin slot -->
         <template v-if="useSlot">
             <div v-show="showTab === index - 1" v-for="index in tabs.length" :key="index" aria-live="assertive">
@@ -32,6 +35,7 @@
             <!-- end CmdHeadline -->
             <div v-html="tabs[showTab].htmlContent"></div>
         </div>
+        <!-- end tab-content -->
     </div>
 </template>
 

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