comand-component-library 4.2.50 → 4.2.52

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

@@ -1,5 +1,5 @@
 <template>
-    <transition :name="useTransition ? 'fade' : null">
+    <transition :name="transition">
         <div
             v-if="showSystemMessage"
             :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
@@ -51,11 +51,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 +158,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

@@ -48,7 +48,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 +60,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>
@@ -98,11 +98,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,9 @@
 <template>
-    <div class="cmd-tabs">
+    <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 -->
@@ -88,6 +88,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 +217,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/CmdThumbnailScroller.vue

@@ -25,8 +25,8 @@
             />
             <!-- end CmdSlideButton -->
 
-            <!-- begin list of images to slide -->
-            <transition-group name="slide" tag="ul">
+            <!-- begin list of images -->
+            <transition-group :name="transition" tag="ul">
                 <li v-for="(item, index) in items" :key="index">
                     <a v-if="!editModeContext" :href="executeOnClick === 'url' ? item.url : '#'"
                        @click="executeLink(index, $event)"
@@ -78,7 +78,7 @@
                     <!-- end show placeholder if no image exists (and component is not edited) -->
                 </li>
             </transition-group>
-            <!-- end list of images to slide -->
+            <!-- end list of images -->
 
             <!-- begin CmdSlideButton -->
             <CmdSlideButton
@@ -117,6 +117,15 @@ export default {
         }
     },
     props: {
+        /**
+         * define the transition when thumbnails should change
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+         transition: {
+            type: String,
+            default: "scroll"
+        },
         /**
          * orientation for scroller
          *

package/src/components/CmdUploadForm.vue

@@ -190,7 +190,8 @@
                             />
                             <!-- end CmdIcon -->
                         </a>
-                        <transition :name="useTransition ? 'fade' : null">
+                        <!-- begin list of file extensions -->
+                        <transition :name="transitionListOfFileExtensions">
                             <ul v-if="showListOfFileExtensions" class="list-of-file-extensions">
                                 <li
                                     v-for="(fileExtension, index) in allowedFileExtensions"
@@ -201,6 +202,7 @@
                                 </li>
                             </ul>
                         </transition>
+                        <!-- end list of file extensions -->
                     </dd>
                 </dl>
             </div>
@@ -381,6 +383,15 @@ export default {
         this.resetForm.systemMessageStatus = this.systemMessageStatus
     },
     props: {
+         /**
+         * define the transition when the list of file extensions is toggled
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+         transitionListOfFileExtensions: {
+            type: String,
+            default: "fade"
+        },
         /**
          * activate if transition for hiding list of file extensions
          */

package/src/components/CmdFlexContainer.vue

@@ -1,109 +0,0 @@
-<template>
-    <div :class="['cmd-flex-container', 'flex-container', htmlClasses]">
-        <!-- begin slot-content -->
-        <slot></slot>
-        <!-- end slot-content -->
-    </div>
-</template>
-
-<script>
-export default {
-    name: "CmdFlexContainer",
-    props: {
-        /**
-         * activate if content should be aligned vertically
-         *
-         * @affectsStyling: true
-         */
-        alignContentVertical: {
-            type: String,
-            required: false
-        },
-        /**
-         * activate if no gap between items should be used
-         *
-         * @affectsStyling: true
-         */
-        noGap: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * activate if items should not behave like flex-items (they are now shrunk to their content)
-         *
-         * @affectsStyling: true
-         */
-        noFlex: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * define how the items will be aligned vertically
-         *
-         * attention: if alignContentVertical is activated, this property defines the horizontal alignment
-         *
-         * @allowedValues: top, flex-start, center, flex-end, bottom
-         * @affectsStyling: true
-         */
-        alignItems: {
-            type: String,
-            required: false,
-            validator(value) {
-                return value === "top" ||
-                    value === "flex-start" ||
-                    value === "center" ||
-                    value === "flex-end" ||
-                    value === "bottom"
-            }
-        },
-        /**
-         * define how the items will be aligned/justified horizontally.
-         *
-         * attention: if alignContentVertical is activated, this property defines the vertical alignment/justification
-         *
-         * @allowedValues: top, flex-start, center, flex-end, bottom, space-between, space-around
-         * @affectsStyling: true
-         */
-        justifyContent: {
-            type: String,
-            required: false,
-            validator(value) {
-                return value === "top" ||
-                    value === "flex-start" ||
-                    value === "center" ||
-                    value === "flex-end" ||
-                    value === "bottom" ||
-                    value === "space-between" ||
-                    value === "space-around"
-            }
-        }
-    },
-    computed: {
-        htmlClasses() {
-            const htmlClasses = []
-
-            if (this.alignContentVertical) {
-                htmlClasses.push("vertical")
-            }
-            if (this.useGap) {
-                htmlClasses.push("no-gap")
-            }
-            if (this.noFlex) {
-                htmlClasses.push("flex-none")
-            }
-            if (this.alignItems) {
-                htmlClasses.push("align-items-" + this.alignItems)
-            }
-            if (this.justifyContent) {
-                htmlClasses.push("justify-content-" + this.justifyContent)
-            }
-
-            return htmlClasses.join(" ")
-        }
-    }
-}
-</script>
-
-<style>
-
-</style>