comand-component-library 4.2.51 → 4.2.52

package/src/components/CmdList.vue

@@ -1,103 +1,90 @@
 <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-->
+    <transition :name="transition">
+        <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 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 -->
+            <component :is="listTag"
+                :class="['flex-container', { 'no-gap': !useGap }, 'align-' + align, setStretchClass, { horizontal: orientation === 'horizontal' }]">
+                <template v-if="listType === '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="listType === '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="listType === 'tags'">
+                    <slot>
+                        <li v-for="(tag, index) in listOfTagItems" :key="index">
+                            <small :class="['tag flex-container', highlightLevel]">
+                                <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>
+                        </li>
+                    </slot>
+                </template>
+                <!-- end tags -->
+            </component>
+            <!-- end list of links -->
+        </div>
+    </transition>
 </template>
 
 <script>
@@ -105,7 +92,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,6 +104,33 @@ 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() {
+                return "none"
+            }
+        },
+        /**
+         * define if an order-list should be used (else an unordered one will be used)
+         */
+        orderedList: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set list-type
          *
@@ -238,18 +252,24 @@ export default {
             required: false
         }
     },
+    mounted() {
+        this.updateActiveClass()
+    },
     computed: {
         setStretchClass() {
             if (this.largeIcons && this.orientation === "horizontal") {
                 return "stretch"
             }
             return null
+        },
+        listTag() {
+            return this.orderedList ? "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(
@@ -278,9 +298,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 +323,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 +373,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 {
@@ -379,11 +416,11 @@ export default {
 
 @media only screen and (max-width: $medium-max-width) {
     .cmd-list {
-        > ul {
+        >ul {
             ul {
                 gap: calc(var(--default-gap) / 2);
 
-                > li:first-child {
+                >li:first-child {
                     margin-top: calc(var(--default-gap) / 2);
                 }
             }

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

@@ -6,7 +6,7 @@
                 :linkType="step.linkType"
                 :class="['stretch-on-small-devices', activeLinkClass(step.linkType, index)]"
                 :styleAsButton="styleAsButtons"
-                :primaryButton="usePrimaryButtons"
+                :highlightLevel="highlightLevel"
                 :path="step.path"
                 :title="step.tooltip"
                 :disabled="step.disabled"
@@ -40,6 +40,21 @@ 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"
+            }
+        },
         /**
          * toggle if steps should be stretched to full-width of parent container (else steps will be centered)
          */
@@ -63,15 +78,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
          */

package/src/components/CmdProgressBar.vue

@@ -65,7 +65,7 @@ export default {
             left: 50%;
             transform: translateX(-50%);
             z-index: 1;
-            line-height: 1;
+            line-height: 1.2;
         }
     }
 }

package/src/components/CmdSiteSearch.vue

@@ -77,7 +77,7 @@
                 <span v-if="showFilters">{{ getMessage("site_search.hide_filter_options") }}</span>
                 <span v-else>{{ getMessage("site_search.show_filter_options") }}</span>
             </a>
-            <transition name="fade">
+            <transition :name="transitionFilters">
                 <div v-if="showFilters && cmdFakeSelect?.selectData.length" class="flex-container flex-none" role="listbox" aria-expanded="true">
                     <!-- begin CmdFakeSelect -->
                     <CmdFakeSelect
@@ -121,6 +121,15 @@ export default {
         }
     },
     props: {
+        /**
+         * define the transition when filters disappear
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+        transitionFilters: {
+            type: String,
+            default: "fade"
+        },
         /**
          * custom modelValue for first input-field
          */

package/src/components/CmdSlideButton.vue

@@ -75,14 +75,15 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-slide-button ---------------------------------------------------------------------------------------- */
 .cmd-slide-button {
     &.button {
         font-size: 2rem;
         z-index: 10;
-        height: 100%;
         position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
         display: flex;
         justify-content: center;
         text-decoration: none;
@@ -95,12 +96,10 @@ export default {
 
         &.left {
             left: 0;
-            top: 0;
         }
 
         &.right {
             right: 0;
-            top: 0;
         }
 
         &.up, &.down {

package/src/components/CmdSlideshow.vue

@@ -12,7 +12,7 @@
             <!-- end CmdSlideButton -->
 
             <!-- begin area to slide -->
-            <transition-group name="fade">
+            <transition-group :name="transition">
                 <template v-if="currentItem">
                     <template v-if="!useSlot">
                         <template v-if="!editModeContext">
@@ -103,6 +103,15 @@ export default {
         }
     },
     props: {
+         /**
+         * define the transition when images change
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+         transition: {
+            type: String,
+            default: "fade"
+        },
         /**
          * use slot for images
          */

package/src/components/CmdSmartSearch.vue

@@ -76,6 +76,13 @@ export default {
         openListToTop: {
             type: Boolean,
             default: false
+        },
+        /**
+         * allows user to enter a new term, that is not included in the listOfRecommendations-property
+         */
+        allowUserToEnterNewTerm: {
+            type: Boolean,
+            default: true
         }
     },
     computed: {
@@ -107,28 +114,36 @@ export default {
     methods: {
         showRecommendations() {
             this.item = {} // reset item
-            if(typeof this.modelValue === "string") {
-                this.$emit("update:modelValue", "")
-            } else {
-                this.$emit("update:modelValue", {itemId: "", displayValue: ""})
-            }
-
             this.showListOfRecommendations = true
         },
         optionSelected(item) {
             this.searchTerm = item.displayValue // set search-field to selected option
             this.showListOfRecommendations = false
-            if(typeof this.modelValue === "string") {
-                this.$emit("update:modelValue", item.displayValue)
-            } else {
-                this.$emit("update:modelValue", {itemId: item.id, displayValue: item.displayValue})
-            }
+            this.emitValue(item)
         },
         linkItem(item) {
             return {
                 ...item,
                 text: item.displayValue
             }
+        },
+        emitValue(item) {
+            let entryOfRecommendations = null
+
+            if(typeof item === "string") {
+                entryOfRecommendations = this.listOfRecommendations.find((entry) => {
+                    return entry.displayValue === item
+                })
+            }
+
+            const displayValue = typeof item === "string" ? item : item.displayValue
+
+            if(typeof this.modelValue === "string") {
+                this.$emit("update:modelValue", displayValue)
+            } else {
+                // modelValue is object, check if it exist as entry in listOfRecommendations and emit id and displayValue, if just a string is ented, emit id: 0 and the displayValue
+                this.$emit("update:modelValue", {id: entryOfRecommendations ? entryOfRecommendations.id : (typeof item === "string" ? 0 : item.id), displayValue})
+            }
         }
     },
     watch: {
@@ -136,6 +151,22 @@ export default {
             if(!this.searchTerm.length) {
                 this.showListOfRecommendations = false
             }
+            if(this.allowUserToEnterNewTerm) {
+                this.emitValue(this.searchTerm)
+            }
+        },
+        modelValue: {
+            handler() {
+                if(typeof this.modelValue === "string") {
+                    this.searchTerm = this.modelValue
+                } else {
+                    const idExists = this.listOfRecommendations.find((entry) => {
+                        return entry.id === this.modelValue?.id
+                    })
+                    this.searchTerm = idExists?.displayValue || this.modelValue?.displayValue || ""
+                }
+            },
+            immediate: true
         }
     }
 }