comand-component-library 4.2.51 → 4.2.53

package/src/components/CmdList.vue

@@ -1,103 +1,121 @@
 <template>
-    <div :class="['cmd-list',
-        {
-            box: styleAsBox,
-            'section-anchors': sectionAnchors,
-            'large-icons': largeIcons,
-            'show-list-style-items': showListStyleItems,
-        },
-        'list-type-' + listType
-    ]">
-        <!-- begin cmd-headline -->
-        <CmdHeadline
-            v-if="cmdHeadline?.headlineText || editModeContext"
-            v-bind="cmdHeadline"
-        />
-        <!-- end cmd-headline -->
-
-        <!-- begin list of links -->
-        <ul :class="['flex-container', {'no-gap': !useGap}, 'align-' + align, setStretchClass, {horizontal: orientation === 'horizontal'}]">
-            <template v-if="listType === 'links'">
-                <!-- begin CmdListOfLinksItem-->
-                <CmdListOfLinksItem
-                    v-if="!editModeContext"
-                    v-for="(link, index) in items"
-                    :key="index"
-                    :class="{'active': sectionAnchors && activeSection === index}"
-                    :link="link"
-                    @click="emitClick($event, linkType)"
-                />
-                <!-- end CmdListOfLinksItem-->
+    <!-- begin CmdList ---------------------------------------------------------------------------------------- -->
+    <transition :name="transition">
+        <div :class="['cmd-list',
+            {
+                box: styleAsBox,
+                'section-anchors': sectionAnchors,
+                'large-icons': largeIcons,
+                'show-list-style-items': showListStyleItems,
+            },
+            'list-content-type-' + listContentType
+        ]">
+            <!-- begin cmd-headline -->
+            <CmdHeadline v-if="cmdHeadline?.headlineText || editModeContext" v-bind="cmdHeadline" />
+            <!-- end cmd-headline -->
 
-                <!-- begin edit-mode -->
-                <li v-else>
-                    <EditComponentWrapper
-                        v-for="(link, index) in links"
-                        :key="'x' + index"
-                        class="edit-items"
-                        :showComponentName="false"
-                        componentTag="ul"
-                        componentName="CmdLinkItem"
-                        :componentProps="link"
-                        :allowedComponentTypes="[]"
-                        :componentPath="['props', 'links', index]"
-                        :itemProvider="itemProvider"
-                    >
+            <!-- begin list of links ordered/unordered -->
+            <component v-if="listType !== 'description'" :is="listTag"
+                :class="['flex-container', { 'no-gap': !useGap }, 'align-' + align, setStretchClass, { horizontal: orientation === 'horizontal' }]">
+                <template v-if="listContentType === 'links'">
+                    <slot>
                         <!-- begin CmdListOfLinksItem-->
-                        <CmdListOfLinksItem
-                            :class="{'active': sectionAnchors && activeSection === index}"
-                            :link="link"
-                        />
+                        <CmdListOfLinksItem v-if="!editModeContext" v-for="(link, index) in items" :key="index"
+                            :class="{ 'active': sectionAnchors && activeSection === index }" :link="link"
+                            @click="emitClick($event, linkType)" />
                         <!-- end CmdListOfLinksItem-->
-                    </EditComponentWrapper>
 
-                    <button v-if="links.length === 0" type="button" class="button confirm small" @click="onAddItem">
-                        <span class="icon-plus"></span>
-                        <span>Add new entry</span>
-                    </button>
-                </li>
-                <!-- end edit-mode -->
-            </template>
+                        <!-- begin edit-mode -->
+                        <li v-else>
+                            <EditComponentWrapper v-for="(link, index) in links" :key="'x' + index" class="edit-items"
+                                :showComponentName="false" componentTag="ul" componentName="CmdLinkItem"
+                                :componentProps="link" :allowedComponentTypes="[]"
+                                :componentPath="['props', 'links', index]" :itemProvider="itemProvider">
+                                <!-- begin CmdListOfLinksItem-->
+                                <CmdListOfLinksItem :class="{ 'active': sectionAnchors && activeSection === index }"
+                                    :link="link" />
+                                <!-- end CmdListOfLinksItem-->
+                            </EditComponentWrapper>
 
-            <!-- begin list of images -->
-            <template v-if="listType === 'images'">
-                <li v-for="(image, index) in items" :key="index">
-                    <!-- begin CmdImage with link-->
-                    <a v-if="image.image.url" :href="image.image.url">
-                        <CmdImage v-bind="image"/>
-                    </a>
-                    <!-- end CmdImage with link-->
+                            <button v-if="links.length === 0" type="button" class="button confirm small"
+                                @click="onAddItem">
+                                <span class="icon-plus"></span>
+                                <span>Add new entry</span>
+                            </button>
+                        </li>
+                        <!-- end edit-mode -->
+                    </slot>
+                </template>
 
-                    <!-- begin CmdImage without link-->
-                    <CmdImage v-else v-bind="image"/>
-                    <!-- end CmdImage without link-->
-                </li>
-            </template>
-            <!-- end list of images -->
+                <!-- begin list of images -->
+                <template v-if="listContentType === 'images'">
+                    <slot>
+                        <li v-for="(image, index) in items" :key="index">
+                            <!-- begin CmdImage with link-->
+                            <a v-if="image.image.url" :href="image.image.url">
+                                <CmdImage v-bind="image" />
+                            </a>
+                            <!-- end CmdImage with link-->
 
-            <!-- begin tags -->
-            <template v-if="listType === 'tags'">
-                <li v-for="(tag, index) in listOfTagItems" :key="index">
-                    <small class="tag flex-container">
-                       <span>{{ tag }}</span>
-                       <!-- begin icon 'remove tag' -->
-                        <a v-if="iconRemoveTag.show" 
-                           href="#" 
-                           @click.prevent="removeTag(index)" 
-                           :title="iconRemoveTag.tooltip"
-                           class="flex-none"
-                        >
-                                <span :class="iconRemoveTag.iconClass"></span>
-                        </a>
-                        <!-- end icon 'remove tag' -->
-                    </small>
+                            <!-- begin CmdImage without link-->
+                            <CmdImage v-else v-bind="image" />
+                            <!-- end CmdImage without link-->
+                        </li>
+                    </slot>
+                </template>
+                <!-- end list of images -->
 
-                </li>
-            </template>
-            <!-- end tags -->
-        </ul>
-        <!-- end list of links -->
-    </div>
+                <!-- begin tags -->
+                <template v-if="listContentType === 'tags'">
+                    <slot>
+                        <li v-for="(tag, index) in listOfTagItems" :key="index">
+                            <!-- begin CmdTag -->
+                            <CmdTag 
+                                :tagText="tag"
+                                :highlightLevel="highlightLevel" 
+                                :removeTagByClick="true" 
+                                @click.prevent="removeTag(event, index)" 
+                            />
+                            <!-- end CmdTag -->
+                        </li>
+                    </slot>
+                </template>
+                <!-- end tags -->
+            </component>
+            <!-- end list of links ordered/unordered -->
+
+            <!-- begin description list -->
+            <dl v-else>
+                <template v-for="(entry, index) in items" :key="index">
+                    <dt v-if="!alignDescriptionTermRight">
+                        <CmdIcon 
+                            v-if="entry.descriptionTerm?.cmdIcon?.iconClass" 
+                            v-bind="entry.descriptionTerm.cmdIcon"
+                        />
+                        <span v-if="entry.descriptionTerm?.text">{{ entry.descriptionTerm?.text }}</span>
+                    </dt>
+                    <dd>
+                        <CmdLink 
+                            v-if="entry.descriptionData.cmdLink !== undefined" 
+                            v-bind="entry.descriptionData.cmdLink">
+                        </CmdLink>
+                        <template v-else>
+                            {{ entry.descriptionData.text }}
+                        </template>
+                    </dd>
+                    <dt v-if="alignDescriptionTermRight">
+                        <CmdIcon 
+                            v-if="entry.descriptionTerm?.cmdIcon?.iconClass" 
+                            v-bind="entry.descriptionTerm.cmdIcon"
+                        />
+                        <span v-if="entry.descriptionTerm?.text">{{ entry.descriptionTerm?.text }}</span>
+                    </dt>
+                </template>
+            </dl>
+            <!-- end description list -->
+        </div>
+    </transition>
+    <!-- end CmdList ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -105,7 +123,7 @@
 import EditMode from "../mixins/EditMode.vue"
 
 // import utils (editMode only)
-import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
+import { buildComponentPath, updateHandlerProvider } from "../utils/editmode.js"
 
 export default {
     name: "CmdListOfLinks",
@@ -117,12 +135,51 @@ export default {
         }
     },
     props: {
+        /**
+         * define the transition when the list appears/disappears
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+        transition: {
+            type: String,
+            default: "fade"
+        },
+        /**
+         * define the highlight-level
+         * 
+         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         */
+        highlightLevel: {
+            type: String,
+            default: "none",
+            validator(value) {
+                return value === "none" ||
+                    value === "primary" ||
+                    value === "secondary" ||
+                    value === "tertiary"
+            }
+        },
+        /**
+         * define the list type
+         * 
+         * @affectsStyling: true
+         * @allowedValues: "unordered", "ordered", "description"
+         */
+        listType: {
+            typ: String,
+            default: "unordered",
+            validator(value) {
+                return value === "unordered" ||
+                    value === "ordered" ||
+                    value === "description"
+            }
+        },
         /**
          * set list-type
          *
          * @allowedValues: links, images, tags
          */
-        listType: {
+        listContentType: {
             typ: String,
             default: "links",
             validator(value) {
@@ -181,6 +238,15 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * set if description term should be aligned right
+         * 
+         * @affectsStyling: true
+         */
+         alignDescriptionTermRight: {
+            type: Boolean,
+            default: false
+         },
         /**
          * set horizontal alignment
          *
@@ -238,23 +304,32 @@ export default {
             required: false
         }
     },
+    mounted() {
+        this.updateActiveClass()
+    },
     computed: {
         setStretchClass() {
             if (this.largeIcons && this.orientation === "horizontal") {
                 return "stretch"
             }
             return null
+        },
+        listTag() {
+            if(this.listType !== "description") {
+                return this.listType === "ordered" ? "ol" : "ul"
+            }
         }
     },
     methods: {
         removeTag(event, index) {
             this.listOfTagItems.splice(index, 1);
-            this.$emit("remove-tag", {originalEvent: event, tagIndex: index})
+            this.$emit("remove-tag", { originalEvent: event, tagIndex: index })
         },
         onAddItem() {
             this.editModeContext.content.addContent(
                 buildComponentPath(this, 'props', 'links', -1),
-                this.itemProvider)
+                this.itemProvider
+            )
         },
         itemProvider() {
             return {
@@ -278,9 +353,18 @@ export default {
             })
         },
         emitClick(event, linkType) {
-            this.$emit("click", {originalEvent: event, linkType: linkType})
+            this.$emit("click", { originalEvent: event, linkType: linkType })
+        },
+        updateActiveClass() {
+            // remove "active" from all links first
+            document.querySelectorAll(".router-link-exact-active").forEach(el => {
+                el.classList.add("active")
+            })
         }
-    }
+    },
+    watch: (() => route.fullPath, () => {
+        this.updateActiveClass();
+    })
 }
 </script>
 
@@ -294,11 +378,18 @@ export default {
 
         li {
             list-style: none;
-            margin-left: 0 !important; /* overwrite default-settings from frontend-framework */
+            margin-left: 0 !important;
+            /* overwrite default-settings from frontend-framework */
 
             &:has(.tag) {
                 .tag {
                     gap: var(--default-gap-half);
+
+                    &.primary, &.secondary, &.tertiary {
+                        [class*="icon-"] {
+                            color: var(--color-white);
+                        }
+                    }
                 }
 
                 [class*="icon-"] {
@@ -337,7 +428,8 @@ export default {
             flex: none;
             display: flex;
             flex-direction: column;
-            max-width: 100%; /* avoid li to be stretched by large content */
+            max-width: 100%;
+            /* avoid li to be stretched by large content */
         }
 
         &.align-right {

package/src/components/CmdListOfLinksItem.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdLinkOfLinksItem ---------------------------------------------------------------------------------------- -->
     <!-- begin default-view -->
     <li v-if="!editing" class="cmd-list-of-links-item">
             <!-- begin CmdLink -->
@@ -44,6 +45,7 @@
         </div>
     </template>
     <!-- end edit-mode -->
+    <!-- end CmdLinkOfLinksItem ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdListOfRequirements.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdListOfRequirements ---------------------------------------------------------------------------------------- -->
     <div class="cmd-list-of-requirements">
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="showHeadline" :headline-level="cmdHeadline.headlineLevel">
@@ -47,6 +48,7 @@
         </template>
         <!-- end helplink -->
     </div>
+    <!-- end CmdListOfRequirements ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdLoginForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- begin login-form -->
+    <!-- begin CmdLoginForm ---------------------------------------------------------------------------------------- -->
     <fieldset v-show="!sendLogin" class="cmd-login-form flex-container">
         <legend :class="{hidden : !legendLoginForm.show, 'align-left': legendLoginForm.align === 'left'}">
             {{ legendLoginForm.text }}
@@ -215,7 +215,7 @@
             <!-- end link-type 'button' -->
         </div>
     </fieldset>
-    <!-- end send-login-form -->
+    <!-- end CmdLoginForm ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdMailTool.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdMailTool ---------------------------------------------------------------------------------------- -->
     <CmdTabs class="cmd-mail-tool" v-bind="cmdTabs">
         <!-- begin tab "inbox" -->
         <template v-slot:tab-content-0>
@@ -24,6 +25,7 @@
         </template>
         <!-- end tab "outbox" -->
     </CmdTabs>
+    <!-- end CmdMailTool ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdMailToolEntry.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdMailToolEntry ---------------------------------------------------------------------------------------- -->
     <template v-if="mails.length"
               v-for="(mail, index) in mails"
               :key="index">
@@ -59,7 +60,7 @@
     <!-- begin CmdSystemMessage (if no mails exist) -->
     <CmdSystemMessage v-else v-bind="cmdSystemMessage"/>
     <!-- end CmdSystemMessage (if no mails exist) -->
-
+    <!-- end CmdMailToolEntry ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdMailToolFilter.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdMailToolFilter ---------------------------------------------------------------------------------------- -->
     <div class="cmd-mail-tool-filter">
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="headlineText" :headlineText="headlineText" :headlineLevel="headlineLevel"/>
@@ -60,6 +61,7 @@
             <!-- end link sort descending -->
         </div>
     </div>
+    <!-- end CmdMailToolFilter ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdMainNavigation.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdMainNavigationWrapper ---------------------------------------------------------------------------------------- -->
     <div
         :class="[
             'cmd-main-navigation main-navigation-wrapper',
@@ -151,6 +152,7 @@
         </a>
         <!-- end off-canvas-button -->
     </div>
+    <!-- end CmdMainNavigationWrapper ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdMultistepFormProgressBar.vue

@@ -1,12 +1,13 @@
 <template>
+    <!-- begin CmdMultistepFormProgressBar ---------------------------------------------------------------------------------------- -->
     <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap, 'full-width': fullWidth}]">
         <li v-for="(step, index) in multisteps" :key="index">
             <!-- begin CmdLink -->
             <CmdLink
                 :linkType="step.linkType"
-                :class="['stretch-on-small-devices', activeLinkClass(step.linkType, index)]"
+                :class="['stretch-on-small-devices', activeLinkClass(index)]"
                 :styleAsButton="styleAsButtons"
-                :primaryButton="usePrimaryButtons"
+                :highlightLevel="highlightLevel"
                 :path="step.path"
                 :title="step.tooltip"
                 :disabled="step.disabled"
@@ -25,6 +26,7 @@
             <!-- end separator -->
         </li>
     </ol>
+    <!-- end CmdMultistepFormProgressBar ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -40,6 +42,28 @@ export default {
         }
     },
     props: {
+         /**
+         * set highlight-level for steps
+         * 
+         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         */
+         highlightLevel: {
+            type: Boolean,
+            default: "primary",
+            validator(value) {
+                return value === "none" ||
+                    value === "primary" ||
+                    value === "secondary" ||
+                    value === "tertiary"
+            }
+        },
+        /**
+         * set active step
+         */
+        activeStep: {
+            type: Number,
+            default: 0
+        },
         /**
          * toggle if steps should be stretched to full-width of parent container (else steps will be centered)
          */
@@ -63,15 +87,6 @@ export default {
             type: Boolean,
             default: false
         },
-        /**
-         * activate if step-buttons should be primary-buttons (linkType for steps must be "button" or styleAsButton-property must be activated)
-         * 
-         * @affectsStyling: true
-         */
-        usePrimaryButtons: {
-            type: Boolean,
-            default: true
-        },
         /**
          * list of multisteps
          */
@@ -94,11 +109,9 @@ export default {
         }
     },
     methods: {
-        activeLinkClass(linkType, index) {
+        activeLinkClass(index) {
             if(this.activeLink === index) {
-                if(linkType !== "router") {
                     return "active"
-                }
             }
             return ""
         },
@@ -109,6 +122,14 @@ export default {
         getRoute(step) {
             return getRoute(step)
         }
+    },
+    watch: {
+        activeStep: {
+            handler() {
+                this.activeLink = this.activeStep
+            },
+            immediate: true
+        }
     }
 }
 </script>

package/src/components/CmdNewsletterSubscription.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdNewsletterSubscription ---------------------------------------------------------------------------------------- -->
     <fieldset class="cmd-newsletter-subscription flex-container">
         <!-- begin legend -->
         <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
@@ -41,6 +42,7 @@
             <!-- end cmd-form-element -->
         </div>
     </fieldset>
+    <!-- end CmdNewsletterSubscription ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdOpeningHours.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdOpeningHours ---------------------------------------------------------------------------------------- -->
     <div class="cmd-opening-hours">
         <!-- begin cmd-headline -->
         <CmdHeadline
@@ -116,6 +117,7 @@
         </div>
         <!-- end edit-mode -->
     </div>
+    <!-- end CmdOpeningHours ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdOpeningHoursItem.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdOpeningHoursItem ---------------------------------------------------------------------------------------- -->
     <!-- begin opening-days and -hours -->
     <template v-if="!editing">
         <dt class="cmd-opening-hours-item">{{ day.day }}</dt>
@@ -120,6 +121,7 @@
         <!-- end hours -->
     </template>
     <!-- end edit-mode -->
+    <!-- end CmdOpeningHoursItem ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdPageFooter.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdPageFooter ---------------------------------------------------------------------------------------- -->
     <footer :class="['cmd-page-footer flex-container', {'small-buttons': useSmallButtons}]">
         <!-- begin CmdSocialNetworks -->
         <CmdSocialNetworks v-if="cmdSocialNetworks" v-bind="cmdSocialNetworks">
@@ -26,6 +27,7 @@
             <!-- end button print-preview -->
         </div>
     </footer>
+    <!-- end CmdPageFooter ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdPageHeader.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdPageHeader ---------------------------------------------------------------------------------------- -->
     <header v-if="cmdBreadcrumbs || cmdHeadline || $slots.default" class="cmd-page-header flex-container">
         <div v-if="cmdBreadcrumbs || cmdHeadline" class="headline-wrapper flex-container vertical">
             <!-- begin CmdBreadcrumbs -->
@@ -14,6 +15,7 @@
         <slot v-if="$slots.default"></slot>
         <!-- end slot -->
     </header>
+    <!-- end CmdPageHeader ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdPagination.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdPagination ---------------------------------------------------------------------------------------- -->
     <div class="cmd-pagination">
         <!-- begin button/link to previous page -->
         <a
@@ -42,6 +43,7 @@
         </a>
         <!-- end button/link to next page -->
     </div>
+    <!-- end CmdPagination ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>