comand-component-library 3.1.44 → 3.1.47

package/src/components/CmdBox.vue

@@ -1,37 +1,82 @@
 <template>
-    <div v-if="boxType === 'content'" class="cmd-box box content">
-        <div>
+    <!-- begin boxType 'content' -->
+    <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible}]">
+        <header v-if="useSlots?.includes('header')">
+            <!-- begin slot 'header' -->
             <slot name="header"></slot>
+            <!-- end slot 'header' -->
+        </header>
+        <template v-else>
+            <!-- begin header for collapsible -->
+            <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
+                <!-- begin CmdCustomHeadline -->
+                <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText"
+                                   v-bind="cmdCustomHeadline"/>
+                <!-- end CmdCustomHeadline -->
+                <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+            </a>
+            <!-- end header for collapsible -->
+
+            <!-- begin CmdCustomHeadline -->
+            <CmdCustomHeadline v-else-if="!collapsible && cmdCustomHeadline?.headlineText"
+                               v-bind="cmdCustomHeadline"/>
+            <!-- end CmdCustomHeadline -->
+        </template>
+
+        <!-- begin box-body -->
+        <div v-if="open" class="box-body" aria-expanded="true">
+            <!-- begin slot 'body' -->
+            <slot name="body">
+                <transition :name="toggleTransition">
+                    <p class="padding">{{ textBody }}</p>
+                </transition>
+            </slot>
+            <!-- end slot 'body' -->
         </div>
-        <div class="box-body">
-            <slot name="body"></slot>
-        </div>
-        <footer>
+        <!-- end box-body -->
+
+        <footer v-if="useSlots?.includes('footer')">
+            <!-- begin slot 'footer' -->
             <slot name="footer"></slot>
+            <!-- end slot 'footer' -->
         </footer>
     </div>
-    <a v-else-if="boxType === 'product'" class="cmd-box box product" href="#" @click.prevent="">
+    <!-- end boxType 'content' -->
+
+    <!-- begin boxType 'product' -->
+    <a v-else-if="boxType === 'product' && product" class="cmd-box box product" href="#" @click.prevent="clickOnProduct(product)">
         <div>
-            <img v-if="product.img" :src="product.img.src" :alt="product.img.alt"/>
+            <img v-if="product.image" :src="product.image.src" :alt="product.image.alt"/>
             <div class="ribbon-new" v-if="product.new">
-                <span>New</span>
+                <span>{{ getMessage("cmdbox.productbox.new") }}</span>
             </div>
-            <div class="ribbon-discount" v-if="product.discount">
+            <div v-if="product.discount" class="ribbon-discount">
                 <span>{{ product.discount }}</span>
             </div>
+            <!-- begin CmdCustomHeadline -->
+            <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText || product.name"
+                               v-bind="cmdCustomHeadline || {}"
+                               :headlineText="cmdCustomHeadline?.headlineText ? cmdCustomHeadline?.headlineText : product.name"/>
+            <!-- end CmdCustomHeadline -->
         </div>
         <div class="box-body">
-            <h3>{{ product.name }}</h3>
-            <p v-if="product.articleNumber">Article No.: {{ product.articleNumber }}</p>
+            <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{ product.articleNumber }}</p>
             <p v-if="product.price" class="price">{{ product.price }}</p>
             <p v-if="product.description">{{ product.description }}</p>
         </div>
     </a>
-    <div v-else-if="boxType === 'user'" class="cmd-box box user">
+    <!-- end boxType 'product' -->
+
+    <!-- begin boxType 'user' -->
+    <div v-else-if="boxType === 'user' && user" class="cmd-box box user">
         <div>
-            <img v-if="user.image" src="" alt=""/>
-            <div v-else class="icon-user-profile"></div>
-            <h3 v-if="user.name">{{ user.name }}</h3>
+            <img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
+            <div v-else :class="defaultProfileIconClass" :title="user.name"></div>
+            <!-- begin CmdCustomHeadline -->
+            <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText || user.name"
+                               v-bind="cmdCustomHeadline || {}"
+                               :headlineText="cmdCustomHeadline?.headlineText ? cmdCustomHeadline?.headlineText : user.name"/>
+            <!-- end CmdCustomHeadline -->
         </div>
         <div class="box-body">
             <p v-if="user.profession">{{ user.profession }}</p>
@@ -39,32 +84,79 @@
             <p v-if="user.description" class="description">{{ user.description }}</p>
         </div>
         <footer v-if="user.links">
-            <ul class="flex-container no-gap">
-                <li v-for="(link, linkIndex) in user.links" :key="linkIndex">
-                    <a :href="link.href" :target="link.target" :title="link.title" :class="link.iconClass"></a>
-                </li>
-            </ul>
+            <CmdListOfLinks :links="user.links" orientation="horizontal" :useGap="false"/>
         </footer>
     </div>
+    <!-- end boxType 'user' -->
 </template>
 
 <script>
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
+
+// import components
+import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdListOfLinks from "./CmdListOfLinks"
+
 export default {
     name: "CmdBox",
+    components: {
+        CmdCustomHeadline,
+        CmdListOfLinks,
+    },
+    mixins: [
+        I18n, DefaultMessageProperties
+    ],
+    data() {
+        return {
+            open: this.collapsible ? this.collapsingBoxesOpen : true,
+            active: true
+        }
+    },
+    emits: ['click'],
     props: {
+        collapsingBoxesOpen: {
+            type: Boolean,
+            required: false
+        },
         /**
-         * set boxtype to show different types of boxes/contents
+         * set boyType to show different types of boxes/contents
          *
-         * values: "content, product, user"
+         * @allowedValues: content, product, user
+         * @affectsStyling: true
          */
         boxType: {
             type: String,
             default: "content"
         },
+        /**
+         * activate if box should be collapsible
+         */
+        collapsible: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * use transition to expand and collapse box-body
+         *
+         * boyType must be 'content' and 'collapsible' must be activated
+         */
+        useTransition: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * set default profile-icon (will eb shown if no user-image exists)
+         */
+        defaultProfileIconClass: {
+            type: String,
+            default: "icon-user-profile"
+        },
         /**
          * the shown product (incl. name, price, image, description)
          *
-         * limitations: only available for boxtype===product
+         * @required: only available for boxtype===product
          */
         product: {
             type: Object,
@@ -73,11 +165,93 @@ export default {
         /**
          * the shown user-profile (incl. name, image, contact-data)
          *
-         * limitations: only available for boxtype===user
+         * @required: only available for boxtype===user
          */
         user: {
             type: Object,
             required: false
+        },
+        /**
+         * activated if all content (incl. headline) is given by slot
+         *
+         * if false textBody-property must be set
+         */
+        useSlots: {
+            type: Array,
+            required: false
+        },
+        /**
+         * String used as content (placed in a paragraph-tag) for box-body
+         *
+         * should only be used, if no further html-structure is required for box-body
+         */
+        textBody: {
+            type: String,
+            default: ""
+        },
+        /**
+         * icon to expand an accordion
+         *
+         * @requiredForAccessibility: partial
+         */
+        iconOpen: {
+            type: Object,
+            default: function () {
+                return {
+                    iconClass: "icon-single-arrow-up",
+                    tooltip: "Close content"
+                }
+            },
+        },
+        /**
+         * icon to collapse an accordion
+         *
+         * @requiredForAccessibility: partial
+         */
+        iconClosed: {
+            type: Object,
+            default: function () {
+                return {
+                    iconClass: "icon-single-arrow-down",
+                    tooltip: "Show content"
+                }
+            }
+        },
+        /**
+         * properties for CmdCustomHeadline-component
+         */
+        cmdCustomHeadline: {
+            type: Object,
+            required: false
+        }
+    },
+    computed: {
+        toggleTransition() {
+            if (this.useTransition) {
+                return "fade"
+            }
+            return ""
+        }
+    },
+    methods: {
+        // for collapsible boxes of boxType === content
+        toggleContentVisibility() {
+            this.open = !this.open
+            this.active = !this.active
+
+            this.$emit('toggle-collapse', this.open)
+        },
+        // for boxType === product
+        clickOnProduct(product) {
+            this.$emit('click', product)
+        }
+    },
+    watch: {
+        collapsingBoxesOpen() {
+            // toggle collapse-status of all boxes if changed in outer component
+            if (this.collapsible) {
+                this.open = this.collapsingBoxesOpen
+            }
         }
     }
 }
@@ -88,9 +262,12 @@ export default {
 .cmd-box {
     display: flex;
     flex-direction: column;
-    height: 100%;
     padding: 0;
 
+    > .cmd-custom-headline {
+        margin-bottom: 0;
+    }
+
     .box-body {
         padding: var(--default-padding);
     }
@@ -106,15 +283,28 @@ export default {
             }
         }
 
-        > div:first-child {
+        > header, > a {
+            display: flex;
+            align-items: center;
             border-top-left-radius: var(--border-radius);
             border-top-right-radius: var(--border-radius);
             padding: calc(var(--default-padding) / 2) var(--default-padding);
             background: var(--primary-color);
+            color: var(--pure-white);
+            text-decoration: none;
 
-            > * {
+            > .cmd-custom-headline {
+                margin-bottom: 0;
+            }
+
+            * {
                 color: var(--pure-white);
             }
+
+            > [class*="icon"]:last-child {
+                font-size: 1rem;
+                margin-left: auto;
+            }
         }
 
         .box-body {
@@ -123,6 +313,7 @@ export default {
 
             .padding {
                 padding: var(--default-padding);
+                margin: 0;
             }
 
             img {
@@ -168,6 +359,15 @@ export default {
         }
     }
 
+    &.product, &.user {
+        > div {
+            > .cmd-custom-headline {
+                margin-top: var(--default-margin);
+                justify-content: center;
+            }
+        }
+    }
+
     &.product {
         text-decoration: none;
         overflow: hidden;
@@ -246,12 +446,6 @@ export default {
                 font-size: 6rem;
                 color: var(--pure-white);
             }
-
-            h3 {
-                margin-top: var(--default-margin);
-                margin-bottom: 0;
-                text-align: center;
-            }
         }
 
         .box-body {
@@ -273,34 +467,37 @@ export default {
             margin-top: auto;
             border-top: var(--default-border);
 
-            ul {
-                margin: 0;
-
-                li {
-                    flex: 1;
-                    margin: 0;
-                    list-style-type: none;
-
-                    a {
-                        display: block;
-                        padding: var(--default-padding);
-                        text-align: center;
-                        background: var(--pure-white);
-                        border-left: var(--default-border);
 
+            .cmd-list-of-links {
+                ul {
+                    margin-bottom: 0;
 
-                    }
+                    li {
+                        flex: 1;
 
-                    &:hover, &:active, &:focus {
                         a {
-                            background: var(--primary-color);
-                            color: var(--pure-white);
+                            flex: 1;
+                            padding: var(--default-padding);
+                            text-align: center;
+                            background: var(--pure-white);
+                            border-left: var(--default-border);
                         }
-                    }
 
-                    &:first-child {
-                        a {
-                            border: 0;
+                        &:hover, &:active, &:focus {
+                            a {
+                                background: var(--primary-color);
+                                color: var(--pure-white);
+
+                                span, span[class*="icon"] {
+                                    color: var(--pure-white);
+                                }
+                            }
+                        }
+
+                        &:first-child {
+                            a {
+                                border: 0;
+                            }
                         }
                     }
                 }

package/src/components/CmdBoxSiteSearch.vue

@@ -1,63 +1,152 @@
 <template>
-    <fieldset class="cmd-box-sitesearch flex-container">
-        <h3>Headline</h3>
+    <fieldset class="cmd-box-site-search flex-container">
+        <!-- begin legend -->
+        <legend v-if="showLegend">{{ textLegend }}</legend>
+        <!-- begin legend -->
+
+        <!-- begin CmdCustomHeadline -->
+        <CmdCustomHeadline
+            v-if="cmdCustomHeadline"
+            v-bind="cmdCustomHeadline"
+        />
+        <!-- end CmdCustomHeadline -->
+
+        <!-- begin form-elements -->
         <div class="flex-container">
-            <CmdFormElement element="input" type="text" labelText="What do you like to search for?"
-                            placeholder="Search"/>
-            <CmdFormElement element="input" type="text" labelText="Where do you want to search?"
-                            placeholder="Zip, City"/>
-            <CmdFormElement element="button" :buttonText="buttonText"
-                            :buttonIcon="{iconClass: 'icon-search', iconPosition: 'before'}"
-                            @click="$emit('click', $event)" aria-live="assertive"/>
+            <!-- begin CmdFormElement -->
+            <CmdFormElement
+                element="input"
+                type="text"
+                :labelText="getMessage('cmdsitesearch.labeltext.what_to_search')"
+                :placeholder="getMessage('cmdsitesearch.placeholder.what_to_search')"
+            />
+            <!-- end CmdFormElement -->
+
+            <!-- begin CmdFormElement -->
+            <CmdFormElement
+                element="input"
+                type="text"
+                :labelText="getMessage('cmdsitesearch.labeltext.where_to_search')"
+                :placeholder="getMessage('cmdsitesearch.placeholder.where_to_search')"
+            />
+            <!-- end CmdFormElement -->
+
+            <!-- begin CmdFormElement -->
+            <CmdFormElement
+                element="button"
+                :buttonText="buttonText"
+                :buttonIcon="{iconClass: 'icon-search', iconPosition: 'before'}"
+                @click="$emit('click', $event)"
+                aria-live="assertive"
+            />
+            <!-- end CmdFormElement -->
         </div>
-        <a href="#" @click.prevent="showFilter = !showFilter">
-            <span :class="showFilter ? 'icon-single-arrow-up' : 'icon-single-arrow-down'"></span>
-            <span v-if="showFilter">Hide filter options</span>
-            <span v-else>Show filter options</span>
-        </a>
-        <transition name="fade">
-            <div class="flex-container no-flex" v-if="showFilter" aria-expanded="true">
-                <CmdFormElement v-for="(filter, index) in filters" element="input" type="checkbox"
-                                :labelText="filter.labelText" :inputValue="filter.value" :key="index"/>
-            </div>
-        </transition>
+        <!-- end form-elements -->
+
+        <!-- begin filters -->
+        <template v-if="useFilters">
+            <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">
+                    <!-- begin CmdFakeSelect -->
+                    <CmdFakeSelect
+                        :selectData="listOfFilters"
+                        v-model="fakeSelectFilters"
+                        defaultOptionName="Select filters:"
+                        type="checkboxOptions"
+                        labelText="Filters:"
+                    />
+                    <!-- end CmdFakeSelect -->
+                </div>
+            </transition>
+        </template>
+        <!-- end filters -->
     </fieldset>
+    <CmdFormFilters v-if="useFilters" v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
 </template>
 
 <script>
-import CmdFormElement from "./CmdFormElement.vue"
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdSiteSearch/DefaultMessageProperties"
+
+// import files for components
+import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdFakeSelect from "./CmdFakeSelect"
+import CmdFormElement from "./CmdFormElement"
+import CmdFormFilters from "./CmdFormFilters"
 
 export default {
-    name: "CmdBoxSiteSearch.vue",
+    name: "CmdBoxSiteSearch",
+    mixins: [I18n, DefaultMessageProperties],
     components: {
-        CmdFormElement
+        CmdCustomHeadline,
+        CmdFakeSelect,
+        CmdFormElement,
+        CmdFormFilters
     },
     data() {
         return {
-            showFilter: false,
-            filters: [
-                {
-                    labelText: "Filter 1",
-                    value: "1"
-                },
-                {
-                    labelText: "Filter 2",
-                    value: "2"
-                },
-                {
-                    labelText: "Filter 3",
-                    value: "3"
-                }
-            ]
+            showFilters: false,
+            fakeSelectFilters: []
         }
     },
     props: {
+        modelValue: {
+            type: Array,
+            required: false
+        },
+        /**
+         * toggle use of filters (must configured)
+         */
+        useFilters: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * set list of filters
+         *
+         * useFilters-property must be activated
+         */
+        listOfFilters: {
+            type: Array,
+            required: false
+        },
+        /**
+         * text for legend
+         *
+         * @requiredForAccessibility: true
+         */
+        textLegend: {
+            type: String,
+            required: true
+        },
+        /**
+         * toggle legend visibility
+         *
+         * textLegend must be set
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
         /**
          * send search result from outside to display inside this component
          */
         results: {
             type: [Function, Number],
             required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component
+         */
+        cmdCustomHeadline: {
+            type: Object,
+            required: false
         }
     },
     computed: {
@@ -67,12 +156,22 @@ export default {
             }
             return "Search"
         }
+    },
+    methods: {
+        getOptionName(option) {
+            for (let i = 0; i < this.listOfFilters.length; i++) {
+                if (option === this.listOfFilters[i].value) {
+                    return this.listOfFilters[i].text
+                }
+            }
+            return null
+        }
     }
 }
 </script>
 
 <style lang="scss">
-.cmd-box-sitesearch {
+.cmd-box-site-search {
     > a {
         [class*='icon'] {
             font-size: 1rem;