comand-component-library 4.1.95 → 4.1.97

package/src/components/CmdSmartSearch.vue

@@ -1,20 +1,20 @@
 <template>
-    <div class="cmd-smart-search">
+    <div :class="['cmd-smart-search', {open: showListOfRecommendations}]">
         <!--  begin CmdFormElement -->
         <CmdFormElement
             element="input"
             type="search"
             v-bind="cmdFormElementOptions"
             v-model="searchTerm"
-            @input="showRecommendations"
+            @update:modelValue="showRecommendations"
         />
         <!-- end CmdFormElement -->
 
         <!-- begin list-of-recommendations -->
-        <ul v-if="showListOfRecommmendations" class="list-of-recommendations no-list-items">
+        <ul v-if="showListOfRecommendations" class="list-of-recommendations no-list-items">
             <li v-for="(item, index) in listOfRecommendations" :key="index">
                 <!-- begin CmdLink -->
-                <CmdLink v-bind="item" @click="optionSelected" />
+                <CmdLink v-bind="linkItem(item)" @click="optionSelected(item)" />
                 <!-- end CmdLink -->
             </li>
         </ul>
@@ -27,8 +27,9 @@ export default {
     name: "CmdSmartSearch",
     data() {
         return {
-            showListOfRecommmendations: false,
-            searchTerm: ""
+            showListOfRecommendations: false,
+            searchTerm: "",
+            item: {}
         }
     },
     props: {
@@ -36,8 +37,8 @@ export default {
          * set default v-model (must be named modelValue in Vue3)
          */
         modelValue: {
-            type: [String, Number],
-            default: ""
+            type: Object,
+            required: false
         },
         /**
          * provide list for recommendations shown below search-field
@@ -66,22 +67,26 @@ export default {
     },
     methods: {
         showRecommendations() {
-            this.showListOfRecommmendations = true
+            this.item = {} // reset item
+            this.$emit("update:modelValue", {itemId: "", displayValue: ""})
+            this.showListOfRecommendations = true
         },
-        optionSelected(event) {
-            event.originalEvent.preventDefault()
-            this.showListOfRecommmendations = false
-            console.log("event", event)
-            this.searchTerm = event.target.value // set search-field to selected option
-            this.$emit("update:modelValue", this.searchTerm)
+        optionSelected(item) {
+            this.searchTerm = item.displayValue // set search-field to selected option
+            this.showListOfRecommendations = false
+            this.$emit("update:modelValue", {itemId: item.id, displayValue: item.displayValue})
+        },
+        linkItem(item) {
+            return {
+                ...item,
+                text: item.displayValue
+            }
         }
     },
     watch: {
         searchTerm() {
-            if(this.searchTerm.length) {
-                this.showRecommendations()
-            } else {
-                this.showListOfRecommmendations = false
+            if(!this.searchTerm.length) {
+                this.showListOfRecommendations = false
             }
         }
     }
@@ -90,7 +95,17 @@ export default {
 
 <style>
 .cmd-smart-search {
+    &.open {
+        input {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+
     .list-of-recommendations {
+        position: absolute;
+        width: 100%;
+        z-index: 10;
         display: flex;
         flex-direction: column;
         border: var(--default-border);
@@ -120,6 +135,7 @@ export default {
                 padding: var(--default-padding);
                 text-decoration: none;
                 width: 100%;
+                background: var(--default-background);
 
                 &:hover, &:active, &:focus {
                     background: var(--hyperlink-color);

package/src/components/CmdTabs.vue

@@ -55,7 +55,7 @@ export default {
     name: "CmdTabs",
     data() {
         return {
-            showTab: this.activeTab
+            showTab: this.defaultActiveTab
         }
     },
     emits: ["active-tab"],
@@ -91,7 +91,7 @@ export default {
         /**
          * set default active/shown tab
          */
-        activeTab: {
+        defaultActiveTab: {
             type: Number,
             default: 0
         },
@@ -110,8 +110,8 @@ export default {
       }
     },
     watch: {
-        activeTab() {
-            this.showTab = this.activeTab
+        defaultActiveTab() {
+            this.showTab = this.defaultActiveTab
         }
     }
 }

package/src/index.js

@@ -40,6 +40,7 @@ export { default as CmdSiteHeader } from '@/components/CmdSiteHeader.vue'
 export { default as CmdSiteSearch } from '@/components/CmdSiteSearch.vue'
 export { default as CmdSlideButton } from '@/components/CmdSlideButton.vue'
 export { default as CmdSlideshow } from '@/components/CmdSlideshow.vue'
+export { default as CmdSmartSearch } from '@/components/CmdSmartSearch.vue'
 export { default as CmdSocialNetworks } from '@/components/CmdSocialNetworks.vue'
 export { default as CmdSwitchLanguage } from '@/components/CmdSwitchLanguage.vue'
 export { default as CmdSystemMessage } from '@/components/CmdSystemMessage.vue'

package/src/utils/string.js

@@ -13,7 +13,7 @@ function lowercaseFirstLetter(string) {
 }
 
 function fullName(...names) {
-    return names.join(" ")
+    return (names.join(" ")).trim()
 }
 
 export {capitalizeFirstLetter, lowercaseFirstLetter, fullName}