comand-component-library 3.1.68 → 3.1.71

package/src/components/CmdBox.vue

@@ -1,27 +1,31 @@
 <template>
     <!-- begin boxType 'content' -->
-    <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible}]">
+    <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically}]">
         <template v-if="useSlots?.includes('header')">
             <!-- begin collapsible header with slot -->
-            <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
+            <div v-if="collapsible" class="box-header">
                 <!-- begin slot 'header' -->
                 <slot name="header"></slot>
                 <!-- end slot 'header' -->
-                <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
-            </a>
+                <a href="#"
+                   :title="open ? iconOpen.tooltip : iconClosed.tooltip"
+                   @click.prevent="toggleContentVisibility">
+                    <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+                </a>
+            </div>
             <!-- end collapsible header with slot -->
 
             <!-- begin default header with slot -->
-            <header v-else>
+            <div v-else class="box-header">
                 <!-- begin slot 'header' -->
                 <slot name="header"></slot>
                 <!-- end slot 'header' -->
-            </header>
+            </div>
             <!-- end default header with slot -->
         </template>
         <template v-else>
             <!-- begin header for collapsible -->
-            <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
+            <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
                 <!-- begin CmdCustomHeadline -->
                 <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText"
                                    v-bind="cmdCustomHeadline"/>
@@ -32,7 +36,9 @@
 
             <!-- begin CmdCustomHeadline -->
             <CmdCustomHeadline v-else-if="!collapsible && cmdCustomHeadline?.headlineText"
-                               v-bind="cmdCustomHeadline"/>
+                               class="box-header"
+                               v-bind="cmdCustomHeadline"
+            />
             <!-- end CmdCustomHeadline -->
         </template>
 
@@ -48,17 +54,17 @@
         </div>
         <!-- end box-body -->
 
-        <footer v-if="useSlots?.includes('footer')">
+        <div v-if="useSlots?.includes('footer')" class="box-footer">
             <!-- begin slot 'footer' -->
             <slot name="footer"></slot>
             <!-- end slot 'footer' -->
-        </footer>
+        </div>
     </div>
     <!-- end boxType 'content' -->
 
     <!-- begin boxType 'product' -->
-    <a v-else-if="boxType === 'product' && product" class="cmd-box box product" href="#" @click.prevent="clickOnProduct(product)">
-        <div>
+    <a v-else-if="boxType === 'product' && product" :class="['cmd-box box product', {'stretch-vertically': stretchVertically}]" href="#" @click.prevent="clickOnProduct(product)">
+        <div class="box-header flex-container vertical">
             <img v-if="product.image" :src="product.image.src" :alt="product.image.alt"/>
             <div class="ribbon-new" v-if="product.new">
                 <span>{{ getMessage("cmdbox.productbox.new") }}</span>
@@ -74,15 +80,17 @@
         </div>
         <div class="box-body">
             <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{ product.articleNumber }}</p>
-            <p v-if="product.price" class="price"><span>{{ product.price }}</span><span :title="globalCurrency.name">{{ globalCurrency.symbol }}</span></p>
+            <p v-if="product.price" class="price">
+                <span>{{ product.price }}</span><span :title="globalCurrency.name">{{ globalCurrency.symbol }}</span>
+            </p>
             <p v-if="product.description">{{ product.description }}</p>
         </div>
     </a>
     <!-- end boxType 'product' -->
 
     <!-- begin boxType 'user' -->
-    <div v-else-if="boxType === 'user' && user" class="cmd-box box user">
-        <div>
+    <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically}]">
+        <div class="box-header">
             <img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
             <div v-else :class="defaultProfileIconClass" :title="user.name"></div>
             <!-- begin CmdCustomHeadline -->
@@ -96,9 +104,9 @@
             <p v-if="user.position">{{ user.position }}</p>
             <p v-if="user.description" class="description">{{ user.description }}</p>
         </div>
-        <footer v-if="user.links">
+        <div v-if="user.links" class="box-footer">
             <CmdListOfLinks :links="user.links" orientation="horizontal" :useGap="false"/>
-        </footer>
+        </div>
     </div>
     <!-- end boxType 'user' -->
 </template>
@@ -233,6 +241,13 @@ export default {
                 }
             }
         },
+        /**
+        * allow box to be stretched as high as parent-element
+        */
+        stretchVertically: {
+            type: Boolean,
+            default: true
+        },
         /**
          * properties for CmdCustomHeadline-component
          */
@@ -288,18 +303,22 @@ export default {
         padding: var(--default-padding);
     }
 
+    &.stretch-vertically {
+        height: 100%;
+    }
+
     &.content {
         > * {
             > *:last-child {
                 margin-bottom: 0;
             }
 
-            &:last-child {
+            &:not(.open):last-child {
                 margin-top: auto;
             }
         }
 
-        > header, > a {
+        > .box-header, > a {
             display: flex;
             align-items: center;
             border-top-left-radius: var(--border-radius);
@@ -324,7 +343,7 @@ export default {
         }
 
         .box-body {
-            height: 100%;
+            flex-grow: 1;
             padding: 0;
 
             .padding {
@@ -367,7 +386,7 @@ export default {
             }
         }
 
-        footer {
+        .box-footer {
             border-bottom-left-radius: var(--border-radius);
             border-bottom-right-radius: var(--border-radius);
             padding: var(--default-padding);
@@ -425,7 +444,7 @@ export default {
             }
         }
 
-        > div:first-child {
+        > .box-header {
             > img, > div {
                 display: table;
                 margin: 0 auto;
@@ -433,6 +452,8 @@ export default {
         }
 
         .box-body {
+            flex-grow: 1;
+
             > * {
                 text-align: center;
             }
@@ -440,6 +461,10 @@ export default {
             .price {
                 font-size: 2rem;
                 font-weight: bold;
+
+                span:last-child {
+                    margin-left: calc(var(--default-margin) / 2);
+                }
             }
         }
 
@@ -449,11 +474,10 @@ export default {
     }
 
     &.user {
-        > div:first-child {
+        > .box-header {
             padding: var(--default-padding);
-            background: var(--pure-white);
 
-            > img, > div {
+            > img, > div:first-child {
                 display: table;
                 margin: 0 auto;
                 padding: calc(var(--default-padding) * 3);
@@ -465,6 +489,8 @@ export default {
         }
 
         .box-body {
+            flex-grow: 1;
+
             p {
                 text-align: center;
                 font-weight: bold;
@@ -479,13 +505,13 @@ export default {
             }
         }
 
-        footer {
+        .box-footer {
             margin-top: auto;
             border-top: var(--default-border);
 
-
             .cmd-list-of-links {
                 ul {
+                    width: 100%;
                     margin-bottom: 0;
 
                     li {
@@ -495,7 +521,7 @@ export default {
                             flex: 1;
                             padding: var(--default-padding);
                             text-align: center;
-                            background: var(--pure-white);
+                            background: var(--color-scheme-background-color);
                             border-left: var(--default-border);
                         }
 

package/src/components/CmdBoxSiteSearch.vue

@@ -13,52 +13,72 @@
 
         <!-- begin form-elements -->
         <div class="flex-container">
-            <!-- begin CmdFormElement -->
+            <!-- begin CmdFormElement for first input -->
             <CmdFormElement
+                v-if="cmdFormElementInput1.show"
                 element="input"
-                type="text"
-                :labelText="getMessage('cmdsitesearch.labeltext.what_to_search')"
-                :placeholder="getMessage('cmdsitesearch.placeholder.what_to_search')"
+                :type="cmdFormElementInput1.type"
+                :show-label="cmdFormElementInput1.showLabel"
+                :labelText="cmdFormElementInput1.labelText"
+                :placeholder="cmdFormElementInput1.placeholder"
+                v-model="searchValue1"
             />
-            <!-- end CmdFormElement -->
+            <!-- end CmdFormElement for first input -->
 
-            <!-- begin CmdFormElement -->
-            <CmdFormElement
-                element="input"
-                type="text"
-                :labelText="getMessage('cmdsitesearch.labeltext.where_to_search')"
-                :placeholder="getMessage('cmdsitesearch.placeholder.where_to_search')"
-            />
-            <!-- end CmdFormElement -->
+            <div class="flex-container no-gap">
+                <!-- begin CmdFormElement for second input -->
+                <CmdFormElement
+                    v-if="cmdFormElementInput2.show"
+                    element="input"
+                    :type="cmdFormElementInput2.type"
+                    :show-label="cmdFormElementInput2.showLabel"
+                    :labelText="cmdFormElementInput2.labelText"
+                    :placeholder="cmdFormElementInput2.placeholder"
+                    v-model="searchValue2"
+                />
+                <!-- end CmdFormElement for second input -->
 
-            <!-- begin CmdFormElement -->
+                <!-- begin CmdFormElement for radius -->
+                <CmdFormElement
+                    v-if="cmdFormElementRadius.show"
+                    element="select"
+                    class="no-flex"
+                    v-model="radius"
+                    :show-label="cmdFormElementRadius.showLabel"
+                    :labelText="cmdFormElementRadius.labelText"
+                    :select-options="cmdFormElementRadius.selectOptions"
+                />
+                <!-- end CmdFormElement for radius -->
+            </div>
+
+            <!-- begin CmdFormElement for search-button -->
             <CmdFormElement
                 element="button"
-                :buttonText="buttonText"
-                :buttonIcon="{iconClass: 'icon-search', iconPosition: 'before'}"
-                @click="$emit('click', $event)"
+                :nativeButton="cmdFormElementSearchButton"
+                @click="onSearchButtonClick"
                 aria-live="assertive"
             />
-            <!-- end CmdFormElement -->
+            <!-- end CmdFormElement for search-button -->
+
         </div>
         <!-- end form-elements -->
 
         <!-- begin filters -->
-        <template v-if="useFilters">
+        <template v-if="cmdFakeSelect?.show">
             <a href="#" @click.prevent="showFilters = !showFilters">
                 <span :class="showFilters ? 'icon-single-arrow-up' : 'icon-single-arrow-down'"></span>
                 <span v-if="showFilters">{{ getMessage("cmdsitesearch.hide_filter_options") }}</span>
                 <span v-else>{{ getMessage("cmdsitesearch.show_filter_options") }}</span>
             </a>
             <transition name="fade">
-                <div v-if="showFilters && listOfFilters.length" class="flex-container no-flex" aria-expanded="true">
+                <div v-if="showFilters && cmdFakeSelect?.selectData.length" class="flex-container no-flex" aria-expanded="true">
                     <!-- begin CmdFakeSelect -->
                     <CmdFakeSelect
-                        :selectData="listOfFilters"
-                        v-model="fakeSelectFilters"
-                        defaultOptionName="Select filters:"
-                        type="checkboxOptions"
-                        labelText="Filters:"
+                        :selectData="cmdFakeSelect?.selectData"
+                        v-model="searchFilters"
+                        :defaultOptionName="cmdFakeSelect?.defaultOptionName"
+                        :type="cmdFakeSelect?.type"
+                        :labelText="cmdFakeSelect?.labelText"
                     />
                     <!-- end CmdFakeSelect -->
                 </div>
@@ -66,7 +86,7 @@
         </template>
         <!-- end filters -->
     </fieldset>
-    <CmdFormFilters v-if="useFilters" v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
+    <CmdFormFilters v-if="cmdFakeSelect?.show" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
 </template>
 
 <script>
@@ -81,6 +101,13 @@ import CmdFormElement from "./CmdFormElement"
 import CmdFormFilters from "./CmdFormFilters"
 
 export default {
+    emits: [
+        "search",
+        "update:modelValueInput1",
+        "update:modelValueInput2",
+        "update:modelValueRadius",
+        "update:modelValueSearchFilters"
+    ],
     name: "CmdBoxSiteSearch",
     mixins: [I18n, DefaultMessageProperties],
     components: {
@@ -91,34 +118,45 @@ export default {
     },
     data() {
         return {
-            showFilters: false,
-            fakeSelectFilters: []
+            showFilters: false
         }
     },
     props: {
         /**
-         * the native modelValue for v-model given from outside for pre-sets
+         * custom modelValue for first input-field
          */
-        modelValue: {
-            type: Array,
+        modelValueInput1: {
+            type: String,
             required: false
         },
         /**
-         * toggle use of filters (must configured)
+         * custom modelValue for second input-field
          */
-        useFilters: {
-            type: Boolean,
-            default: true
+        modelValueInput2: {
+            type: String,
+            required: false
         },
         /**
-         * set list of filters
-         *
-         * useFilters-property must be activated
+         * custom modelValue for radius
+         */
+        modelValueRadius: {
+            type: [String, Number],
+            required: false
+        },
+        /**
+         * custom modelValue for search-filters
          */
-        listOfFilters: {
+        modelValueSearchFilters: {
             type: Array,
             required: false
         },
+        /**
+         * toggle use of filters (must configured)
+         */
+        useFilters: {
+            type: Boolean,
+            default: true
+        },
         /**
          * text for legend
          *
@@ -150,31 +188,168 @@ export default {
         cmdCustomHeadline: {
             type: Object,
             required: false
+        },
+        /**
+         * properties for CmdFormElement-component first search-field
+         */
+        cmdFormElementInput1: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    type: "text",
+                    showLabel: true,
+                    labelText: "What do you like to search for?",
+                    placeholder: "Search"
+                }
+            }
+        },
+        /**
+         * properties for CmdFormElement-component for second search-field
+         */
+        cmdFormElementInput2: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    type: "text",
+                    showLabel: true,
+                    labelText: "Where do you like to search?",
+                    placeholder: "City, Zip"
+                }
+            }
+        },
+        /**
+         * properties for CmdFormElement-component for radius
+         */
+        cmdFormElementRadius: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    showLabel: true,
+                    labelText: "Radius",
+                    selectOptions: [
+                        {
+                            text: "5 Km",
+                            value: 5
+                        },
+                        {
+                            text: "10 Km",
+                            value: 10
+                        },
+                        {
+                            text: "15 Km",
+                            value: 15
+                        },
+                        {
+                            text: "50 Km",
+                            value: 50
+                        },
+                        {
+                            text: "100 Km",
+                            value: 100
+                        }
+                    ]
+                }
+            }
+        },
+        /**
+         * properties for CmdFormElement-component for search-button
+         */
+        cmdFormElementSearchButton: {
+            type: Object,
+            default() {
+                return {
+                    icon: {
+                        show: true,
+                        position: "before",
+                        iconClass: "icon-search"
+                    },
+                    text: "Search"
+                }
+            }
+        },
+        /**
+         * properties for CmdFakeSelect-component for filters
+         */
+        cmdFakeSelect: {
+            type: Object,
+            required: false
         }
     },
     computed: {
-        buttonText() {
-            if (this.results) {
-                return this.results + " Results"
+        searchValue1: {
+            get() {
+                return this.modelValueInput1
+            },
+            set(value) {
+                this.$emit("update:modelValueInput1", value)
+            }
+        },
+        searchValue2: {
+            get() {
+                return this.modelValueInput2
+            },
+            set(value) {
+                this.$emit("update:modelValueInput2", value)
+            }
+        },
+        radius: {
+            get() {
+                return this.modelValueRadius
+            },
+            set(value) {
+                this.$emit("update:modelValueRadius", value)
+            }
+        },
+        searchFilters: {
+            get() {
+                return this.modelValueSearchFilters
+            },
+            set(value) {
+                this.$emit("update:modelValueSearchFilters", value)
             }
-            return "Search"
         }
     },
     methods: {
+        onSearchButtonClick() {
+            this.$emit("search", {
+                searchValue1: this.searchValue1,
+                searchValue2: this.searchValue2,
+                searchFilters: this.searchFilters,
+                radius: this.radius
+            })
+        },
         getOptionName(option) {
-            for (let i = 0; i < this.listOfFilters.length; i++) {
-                if (option === this.listOfFilters[i].value) {
-                    return this.listOfFilters[i].text
+            for (let i = 0; i < this.cmdFakeSelect.selectData.length; i++) {
+                if (option === this.cmdFakeSelect.selectData[i].value) {
+                    return this.cmdFakeSelect.selectData[i].text
                 }
             }
             return null
         }
+    },
+    watch: {
+        cmdFormElementRadius: {
+            handler() {
+                if (this.cmdFormElementRadius?.selectOptions && this.cmdFormElementRadius?.selectOptions.length && this.modelValueRadius == null) {
+                    this.radius = this.cmdFormElementRadius.selectOptions[0].value
+                }
+            },
+            immediate: true,
+            deep: true
+        }
     }
 }
 </script>
 
 <style lang="scss">
+/* begin cmd-box-site-search ---------------------------------------------------------------------------------------- */
+@import '../assets/styles/variables';
 .cmd-box-site-search {
+    flex-wrap: nowrap;
+
     > a {
         [class*='icon'] {
             font-size: 1rem;
@@ -185,4 +360,11 @@ export default {
         align-self: flex-end;
     }
 }
+
+@media only screen and (max-width: $small-max-width) {
+    .cmd-box-site-search {
+        flex-wrap: nowrap;
+    }
+}
+/* end cmd-box-site-search ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdCompanyLogo.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="cmd-company-logo">
-        <router-link v-if="link.type === 'router'" :href="link.path" :title="link.tooltip">
+        <router-link v-if="link.type === 'router'" :to="link.path" :title="link.tooltip">
             <img :src="pathCurrentLogo" :alt="altText"/>
         </router-link>
-        <a v-else :to="link.path" :title="link.tooltip">
-            <img :src="pathCurrentLogo" :alt="altText"/>
+        <a v-else :href="link.path" :title="link.tooltip">
+            <img :src="pathCurrentLogo" :alt="altText" />
         </a>
     </div>
 </template>
@@ -53,26 +53,51 @@ export default {
     },
     computed: {
         pathCurrentLogo() {
-            if (this.prefersColorScheme === 'light' || !this.pathDarkmodeLogo) {
+            if (this.prefersColorScheme === "light" || !this.pathDarkmodeLogo) {
                 return this.pathDefaultLogo
             }
             return this.pathDarkmodeLogo
         }
     },
     created() {
-        if (matchMedia('(prefers-color-scheme: light)').matches) {
-            this.prefersColorScheme = "light"
-        } else {
-            this.prefersColorScheme = "dark"
-        }
+        this.toggleColorScheme()
+
+        window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", this.onColorSchemeChange)
 
-        window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', e => {
-            this.prefersColorScheme = e.matches ? "light" : "dark"
-        });
+        /* observe if class changes in html-tag */
+        const htmlTag = document.querySelector("html")
+        this.$_observer = new MutationObserver(this.observeDom)
+        this.$_observer.observe(htmlTag, {attributes: true})
+    },
+    beforeUnmount() {
+        window.matchMedia("(prefers-color-scheme: light)").removeEventListener("change", this.onColorSchemeChange)
+        this.$_observer.disconnect()
     },
     methods: {
+        onColorSchemeChange(event) {
+            this.prefersColorScheme = event.matches ? "light" : "dark"
+        },
+        observeDom(mutationList) {
+            for(let i = 0; i < mutationList.length; i++) {
+                if(mutationList[i].type === 'attributes') {
+                    this.toggleColorScheme()
+                    break
+                }
+            }
+        },
         getRoute(language) {
             return getRoute(language)
+        },
+        toggleColorScheme() {
+            if (document.querySelector("html").classList.contains("light-mode")) {
+                this.prefersColorScheme = "light"
+            } else if(document.querySelector("html").classList.contains("dark-mode")) {
+                this.prefersColorScheme = "dark"
+            } else if (matchMedia("(prefers-color-scheme: light)").matches) {
+                this.prefersColorScheme = "light"
+            } else {
+                this.prefersColorScheme = "dark"
+            }
         }
     }
 }