comand-component-library 4.2.51 → 4.2.53

package/src/components/CmdParagraph.vue

@@ -0,0 +1,50 @@
+<template>
+    <!-- begin CmdParagraph ---------------------------------------------------------------------------------------- -->
+    <p 
+        :class="['cmd-paragraph', 'text-align-' + textAlign, 'column-count-' + numberOfColumns]" 
+        v-html="content"
+    >
+    </p>
+    <!-- end CmdParagraph ---------------------------------------------------------------------------------------- -->
+</template>
+
+<script>
+export default {
+    name: "CmdParagraph",
+    props: {
+        /**
+         * provide (html-)content
+         */
+        content: {
+            type: String,
+            required: true
+        },
+        /**
+         * set the number of columns
+         *
+         * @affectStyling: true
+         * @allowedValues: 1/"1", 2/"2", 3/"3",
+         */
+        numberOfColumns: {
+            type: [String, Number],
+            default: 1
+        },
+        /**
+         * set text-align
+         * 
+         * @affectStyling: partially
+         * @allowedValues: "left", "center", "right", "justify"
+         */
+        textAlign: {
+            type: String,
+            default: "left",
+            validator(value) {
+                return value === "left" ||
+                    value === "center" ||
+                    value === "right" ||
+                    value === "justify"
+            }
+        }
+    }
+}
+</script>

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

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSection ---------------------------------------------------------------------------------------- -->
     <section :class="['cmd-section flex-container', {box: styleAsBox, 'vertical': orientation === 'vertical'}]">
         <!-- begin CmdHeadline -->
         <CmdHeadline
@@ -15,6 +16,7 @@
         <slot v-else></slot>
         <!-- end slot -->
     </section>
+    <!-- end CmdSection ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSidebar.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSidebar ---------------------------------------------------------------------------------------- -->
     <aside :class="['cmd-sidebar', wrapperClass, {'box': styledAsBox, 'collapse-to-right': !collapseToLeft}]">
         <!-- begin inner-sidebar-wrapper -->
         <div class="inner-sidebar-wrapper">
@@ -34,6 +35,7 @@
         </a>
         <!-- end column to toggle sidebar open-closed-status -->
     </aside>
+    <!-- end CmdSidebar ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSiteFooter.vue

@@ -1,9 +1,11 @@
 <template>
+    <!-- begin CmdSiteFooter ---------------------------------------------------------------------------------------- -->
     <div class="cmd-site-footer site-footer">
         <footer :class="['flex-container', {vertical: orientation === 'vertical'}]">
             <slot></slot>
         </footer>
     </div>
+    <!-- end CmdSiteFooter ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSiteHeader.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSiteHeader ---------------------------------------------------------------------------------------- -->
     <div
         ref="site-header"
         :class="[
@@ -62,6 +63,7 @@
         />
         <!-- end CmdMainNavigation -->
     </div>
+    <!-- end CmdSiteHeader ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSiteSearch.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdBoxSiteSearch ---------------------------------------------------------------------------------------- -->
     <fieldset class="cmd-box-site-search flex-container">
         <!-- begin legend -->
         <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
@@ -77,7 +78,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
@@ -98,6 +99,7 @@
     <!-- begin CmdFormFilters -->
     <CmdFormFilters v-if="useFilters" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
     <!-- end CmdFormFilters -->
+     <!-- end CmdBoxSiteSearch ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -121,6 +123,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

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSlideButton ---------------------------------------------------------------------------------------- -->
     <a href="#"
        @click.prevent
        :class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
@@ -7,6 +8,7 @@
         <CmdIcon :type="getDirection.iconType || 'auto'" :iconClass="getDirection.iconClass || 'right'" />
         <!-- end CmdIcon -->
     </a>
+    <!-- end CmdSlideButton ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -75,14 +77,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 +98,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
         }
     }
 }

package/src/components/CmdSocialNetworks.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSocialNetworks ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-social-networks', {'stretch': stretchButtons}, alignment]">
         <!-- begin CmdHeadline -->
         <CmdHeadline
@@ -64,6 +65,7 @@
         </button>
         <!-- end list of networks -->
     </div>
+    <!-- end CmdSocialNetworks ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSocialNetworksItem.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSocialNetworksItem ---------------------------------------------------------------------------------------- -->
     <li class="cmd-social-networks-item">
         <a
             :key="network.path"
@@ -15,6 +16,7 @@
             <span v-if="network.linkText">{{ network.linkText }}</span>
         </a>
     </li>
+    <!-- end CmdSocialNetworksItem ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSwitchLanguage.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSwitchLanguage ---------------------------------------------------------------------------------------- -->
     <div class="cmd-switch-language">
         <ul>
             <li v-for="(language, index) in languages" :key="index">
@@ -25,6 +26,7 @@
             </li>
         </ul>
     </div>
+    <!-- end CmdSwitchLanguage ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSystemMessage.vue

@@ -1,5 +1,6 @@
 <template>
-    <transition :name="useTransition ? 'fade' : null">
+    <!-- begin CmdSystemMessage ---------------------------------------------------------------------------------------- -->
+    <transition :name="transition">
         <div
             v-if="showSystemMessage"
             :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
@@ -35,6 +36,7 @@
             <!-- end slot-content -->
         </div>
     </transition>
+    <!-- end CmdSystemMessage ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -51,11 +53,13 @@ export default {
     },
     props: {
         /**
-         * activate if transition for hiding message-box should be used
+         * define the transition when system message disappears
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
          */
-        useTransition: {
-            type: Boolean,
-            default: true
+         transition: {
+            type: String,
+            default: "fade"
         },
         /**
          * validation-status for the message-box
@@ -156,6 +160,7 @@ export default {
     display: inline-flex;
     margin: var(--default-margin) 0;
     align-items: center;
+    align-self: flex-start; /* if used in flex-container component should not be stretched */
 
     > :last-child {
         margin-bottom: 0;

package/src/components/CmdTable.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTableWrapper ---------------------------------------------------------------------------------------- -->
     <div
         :class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption, 'has-overflow': hasOverflow}]">
         <div v-if="collapsible || userCanToggleWidth" class="button-wrapper">
@@ -48,7 +49,7 @@
                         </tr>
                     </thead>
                 </slot>
-                <transition :name="useTransition ? 'fade' : null">
+                <transition :name="transition">
                     <slot name="table-body">
                         <tbody v-show="showTableData" aria-expanded="true">
                             <tr :class="{'active' : tableData.rowIndexHighlighted === indexRows}"
@@ -60,7 +61,7 @@
                         </tbody>
                     </slot>
                 </transition>
-                <transition :name="useTransition ? 'fade' : null">
+                <transition :name="transition">
                     <slot name="table-foot">
                         <tfoot v-if="tableData.tfoot && tableData.tfoot.length && showTableData" aria-expanded="true">
                             <tr>
@@ -82,6 +83,7 @@
             <!-- end CmdSlideButton -->
         </div>
     </div>
+    <!-- end CmdTableWrapper ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -98,11 +100,13 @@ export default {
     },
     props: {
         /**
-         * activate if transition for hiding collapsible table-data should be used
+         * define the transition for table-body and -footer when collapsible table-data is used
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
          */
-        useTransition: {
-            type: Boolean,
-            default: true
+         transition: {
+            type: String,
+            default: "fade"
         },
         /**
          * table data (incl. caption, thead, tbody)

package/src/components/CmdTabs.vue

@@ -1,9 +1,10 @@
 <template>
-    <div class="cmd-tabs">
+    <!-- begin CmdTabs ---------------------------------------------------------------------------------------- -->
+    <div :class="['cmd-tabs', highlightLevel]">
         <!-- 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.text ? tab.tooltip : undefined">
+                <a href="#" :class="highlightLevel" @click.prevent="setActiveTab(index)" :title="!tab.text ? tab.tooltip : undefined">
                     <!-- begin CmdIcon -->
                     <CmdIcon v-if="tab.iconClass" :iconClass="tab.iconClass" :type="tab.iconType" />
                     <!-- end CmdIcon -->
@@ -40,6 +41,7 @@
         </div>
         <!-- end tab-content -->
     </div>
+    <!-- end CmdTabs ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -88,6 +90,21 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * set highlight-level for tabs
+         * 
+         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         */
+         highlightLevel: {
+            type: Boolean,
+            default: "primary",
+            validator(value) {
+                return value === "none" ||
+                    value === "primary" ||
+                    value === "secondary" ||
+                    value === "tertiary"
+            }
+        },
         /**
          * set default active/shown tab
          */
@@ -202,17 +219,36 @@ export default {
 
     > div {
         padding: var(--default-padding);
-        border: var(--primary-border);
+        border: var(--default-border);
         border-radius: var(--default-border-radius);
         background: var(--color-scheme-background);
         border-top-left-radius: 0;
 
+
         > div {
             *:last-child {
                 margin-bottom: 0;
             }
         }
     }
+
+    &.primary {
+        & > div {
+            border-color: var(--primary-color);
+        }
+    }
+
+    &.secondary {
+        & > div {
+            border-color: var(--secondary-color);
+        }
+    }
+
+    &.tertiary {
+        & > div {
+            border-color: var(--tertiary-color);
+        }
+    }
 }
 
 /* end cmd-tabs ------------------------------------------------------------------------------------------ */

package/src/components/CmdTag.vue

@@ -0,0 +1,101 @@
+<template>
+    <!-- begin CmdTag ---------------------------------------------------------------------------------------- -->
+    <small v-if="showTag" :class="['cmd-tag tag', highlightLevel]" ref="tag">
+        <slot>
+            <span>{{ tagText }}</span>
+            <a v-if="removeTagByClick" href="#" @click.prevent="removeTag">
+                <!-- begin CmdIcon -->
+                <CmdIcon v-bind="cmdIcon" />
+                <!-- end CmdIcon -->
+            </a>
+        </slot>
+    </small>
+    <!-- end CmdTag ---------------------------------------------------------------------------------------- -->
+</template>
+
+<script>
+export default {
+    name: "CmdTag",
+    emits: ["click"],
+    data() {
+        return {
+            showTag: true
+        }
+    },
+    props: {
+        /**
+         * the displayed text of the tag
+         */
+         tagText: {
+            type: String,
+            required: true
+        },
+        /**
+         * enable removing the tag by click
+         */
+         removeTagByClick: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * set highlight-level for tag
+         * 
+         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         */
+         highlightLevel: {
+            type: Boolean,
+            default: "none",
+            validator(value) {
+                return value === "none" ||
+                    value === "primary" ||
+                    value === "secondary" ||
+                    value === "tertiary"
+            }
+        },
+        /**
+         * properties for CmdIcon-component
+         */
+         cmdIcon: {
+            type: Object,
+            default: function () {
+                return {
+                    iconClass: "icon-cancel-circle",
+                    tooltip: "Back to top",
+                    iconType: "auto"
+                }
+            }
+        }
+    },
+    methods: {
+        removeTag() {
+            const event = {
+                prevented: false,
+                preventDefault() {
+                    this.prevented = true
+                }
+            }
+
+            this.$emit("click", event)
+            
+            if (!event.prevented) {
+                this.showTag = false
+            }
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-tag ------------------------------------------------------------------------------------------ */
+.cmd-tag {
+    align-self: start; /* if used in vertical flex-container */
+    gap: var(--default-gap-half);
+
+    .primary, .secondary, .tertiary {
+        span[class*="icon-"] {
+            color: var(--color-white);
+        }
+    }
+}
+/* end cmd-tag ------------------------------------------------------------------------------------------ */
+</style>

package/src/components/CmdTextImageBlock.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTextImageBlock ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-text-image-block flex-container', orientation]">
         <!-- begin cmdHeadline -->
         <CmdHeadline
@@ -57,6 +58,7 @@
         </EditComponentWrapper>
         <!-- end edit-mode -->
     </div>
+    <!-- end CmdTextImageBlock ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>