comand-component-library 3.1.22 → 3.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.22",
+  "version": "3.1.26",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -16,10 +16,9 @@
     "src"
   ],
   "dependencies": {
-    "clickout-event": "^1.1.1",
-    "comand-frontend-framework": "^3.2.9",
+    "clickout-event": "^1.1.2",
+    "comand-frontend-framework": "^3.2.12",
     "core-js": "^3.16.1",
-    "v-click-outside": "^3.1.2",
     "vue": "^3.2.1",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2"

package/src/App.vue

@@ -41,7 +41,6 @@
           <li><a href="#section-upload-form">Upload-Form</a></li>
         </ul>
       </div>
-
       <hr/>
     </CmdWidthLimitationWrapper>
 
@@ -49,11 +48,13 @@
     <CmdWidthLimitationWrapper>
       <h2 class="headline-demopage">Accordion</h2>
       <h3>Single mode (only one can be opened)</h3>
+        <a href="#" @click.prevent="toggleAllAccordions()">Toggle all accordions</a>
       <CmdAccordion :accordionData="accordionData.accordionData1"
                     toggleMode="single"
                     tooltip="Click to toggle content"
                     openIconClass="icon-single-arrow-up"
                     closeIconClass="icon-single-arrow-down"
+                    ref="accordionGroup1"
       />
       <h3>Multiple mode (all can be opened)</h3>
       <CmdAccordion :accordionData="accordionData.accordionData2"
@@ -61,14 +62,16 @@
                     tooltip="Click to toggle content"
                     openIconClass="icon-single-arrow-up"
                     closeIconClass="icon-single-arrow-down"
+                    ref="accordionGroup2"
       />
-      <h3>Customized headline-level</h3>
+      <h3>Customized headline-level (without transition of content)</h3>
       <CmdAccordion :accordionData="accordionData.accordionData2"
                     toggleMode="multiple"
                     tooltip="Click to toggle content"
                     openIconClass="icon-single-arrow-up"
                     closeIconClass="icon-single-arrow-down"
                     accordion-headline-level="h4"
+                    :use-transition="false"
       />
       <h3>Data given by slots</h3>
       <CmdAccordion :accordionData="1">
@@ -81,6 +84,16 @@
           </p>
         </template>
       </CmdAccordion>
+        <CmdAccordion :accordionData="1" :useCustomHeader="true">
+            <template v-slot:customHeadline0>
+                <h4>Some headline</h4>
+            </template>
+            <template v-slot:accordionContent0>
+                <p>
+                    Content
+                </p>
+            </template>
+        </CmdAccordion>
     </CmdWidthLimitationWrapper>
 
     <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -409,6 +422,7 @@
               <CmdFormElement element="input"
                               labelText="Label for replaced radiobutton"
                               type="radio"
+                              class="replace-input-type"
                               id="inputfield13"
                               name="replaced-radiogroup"
                               inputValue="radiobuttonValue1"
@@ -417,6 +431,7 @@
               <CmdFormElement element="input"
                               labelText="Label for replaced radiobutton"
                               type="radio"
+                              class="replace-input-type"
                               id="inputfield14"
                               name="replaced-radiogroup"
                               inputValue="radiobuttonValue2"
@@ -647,9 +662,6 @@
           :items="pagerData.length"
           :itemsPerPage="1"
           @click="showPagePager = $event"
-          :showLinksAsButtons="true"
-          :prevButton="{'iconClass': 'icon-single-arrow-left', 'buttonText': 'prev' }"
-          :nextButton="{'iconClass': 'icon-single-arrow-right', 'buttonText': 'next' }"
       />
     </CmdWidthLimitationWrapper>
 
@@ -668,7 +680,7 @@
     <a id="section-system-message"></a>
     <CmdWidthLimitationWrapper>
       <h2 class="headline-demopage">System Message</h2>
-      <CmdSystemMessage messageStatus="error" :fullWidth="true" systemMessage="This is an error message!"
+      <CmdSystemMessage status="error" :fullWidth="true" message="This is an error message!"
                         iconClass="icon-cancel">
         <ul>
           <li>Error #1</li>
@@ -676,14 +688,14 @@
           <li>Error #3</li>
         </ul>
       </CmdSystemMessage>
-      <CmdSystemMessage messageStatus="warning" :fullWidth="true" systemMessage="This is a warning message!">
+      <CmdSystemMessage status="warning" :fullWidth="true" message="This is a warning message!">
         <p>This is additional text!</p>
       </CmdSystemMessage>
-      <CmdSystemMessage messageStatus="success" :fullWidth="true" systemMessage="This is a success message!"
+      <CmdSystemMessage status="success" :fullWidth="true" message="This is a success message!"
                         iconClass="icon-check">
         <p>This is additional text!</p>
       </CmdSystemMessage>
-      <CmdSystemMessage messageStatus="info" :fullWidth="true" systemMessage="This is an info message!"
+      <CmdSystemMessage status="info" :fullWidth="true" message="This is an info message!"
                         iconClass="icon-info">
         <p>This is additional text!</p>
       </CmdSystemMessage>
@@ -872,6 +884,7 @@ export default {
 
   data() {
     return {
+      accordionGroupOpen: false,
       showPageMultistep: 1,
       showPagePager: 1,
       selectedOptions: [],
@@ -964,6 +977,14 @@ export default {
     },
     executeSearch() {
       return Math.floor(Math.random() * 100)
+    },
+    toggleAllAccordions() {
+        if(this.accordionGroupOpen) {
+            this.$refs.accordionGroup1.closeAll()
+        } else{
+            this.$refs.accordionGroup1.openAll()
+        }
+        this.accordionGroupOpen = !this.accordionGroupOpen
     }
   }
 }

package/src/assets/data/accordion.json

@@ -2,19 +2,28 @@
   "accordionData1": [
     {
       "headline": "First",
-      "iconClass": "icon-globe",
+      "icon": {
+        "iconClass": "icon-globe",
+        "tooltip": "Globe"
+      },
       "content": "Text 1",
       "status": false
     },
     {
       "headline": "Second",
-      "iconClass": "icon-user-profile",
+      "icon": {
+        "iconClass": "icon-user-profile",
+        "tooltip": "User profile"
+      },
       "content": "Text 2",
-      "status": false
+      "status": true
     },
     {
       "headline": "Third",
-      "iconClass": "icon-home",
+      "icon": {
+        "iconClass": "icon-home",
+        "tooltip": "Home"
+      },
       "content": "Text 3",
       "status": false
     }

package/src/components/CmdAccordion.vue

@@ -1,16 +1,20 @@
 <template>
     <div :class="['cmd-accordion flex-container vertical', {'no-gap' : !gapBetween, 'active' : active}]">
         <div v-for="(accordionContent, index) in accordion" :key="index">
-            <a href="#" :title="tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
+            <a v-if="!useCustomHeader" href="#" :title="accordionContent.status ? iconOpen.icon.tooltip : iconClosed.icon.tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
                 <slot :name="'accordionHeadline' + index">
                     <component :is="accordionHeadlineLevel">
-                        <span v-if="accordionContent.iconClass" :class="accordionContent.iconClass"></span>
+                        <span v-if="accordionContent.icon && accordionContent.icon.iconClass" :class="accordionContent.icon.iconClass" :title="accordionContent.icon.tooltip"></span>
                         <span v-if="accordionContent.headline">{{ accordionContent.headline }}</span>
                     </component>
                 </slot>
+                <span class="toggle-icon" :class="[accordionContent.status ? iconOpen.icon.iconClass : iconClosed.icon.iconClass]"></span>
+            </a>
+            <a v-else href="#" :title="tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
+                <slot :name="'customHeadline' + index"><p>{{ accordionContent.headline }}</p></slot>
                 <span class="toggle-icon" :class="[accordionContent.status ? openIconClass : closeIconClass]"></span>
             </a>
-            <transition name="fade">
+            <transition :name="toggleTransition">
                 <div class="accordion-content" v-if="accordionContent.status" aria-expanded="true">
                     <slot :name="'accordionContent' + index">
                         <p>{{ accordionContent.content }}</p>
@@ -31,14 +35,39 @@ export default {
         }
     },
     props: {
+        /**
+         * use transition to expand accordion-content
+         */
+        useTransition: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * toggle if mode if only one accordion can be opened (or multiple ones)
+         *
+         * values: single, multiple
+         */
         toggleMode: {
             type: String,
             default: "single"
         },
+        /**
+         * activate if you want to use a customized header
+         */
+        useCustomHeader: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * set if a gap is shown between multiple accordions
+         */
         gapBetween: {
             type: Boolean,
             default: true
         },
+        /**
+         * headline for accordion-box that is also visible is accordion is collapsed
+         */
         accordionHeadlineLevel: {
             type: String,
             default: "h3",
@@ -53,21 +82,45 @@ export default {
                 return true
             }
         },
+        /**
+         * all information about the contents in all shown accordions
+         */
         accordionData: {
             type: [Array, Number],
             required: true
         },
-        openIconClass: {
-            type: String,
-            default: "icon-single-arrow-up"
-        },
-        closeIconClass: {
-            type: String,
-            default: "icon-single-arrow-down"
+        /**
+         * icon to expand an accordion
+         */
+        iconOpen: {
+            type: Object,
+            default: function() {
+                return {
+                    icon: {
+                        iconClass: "icon-single-arrow-up",
+                        tooltip: "Close content"
+                    }
+                }
+            },
         },
-        tooltip: {
-            type: String,
-            required: false
+        /**
+         * icon to collapse an accordion
+         */
+        iconClosed: {
+            type: Object,
+            default: function() {
+                return {
+                    icon: {
+                        iconClass: "icon-single-arrow-down",
+                        tooltip: "Show content"
+                    }
+                }
+            }
+        }
+    },
+    computed: {
+        toggleTransition() {
+            return this.useTransition && 'fade'
         }
     },
     methods: {
@@ -82,6 +135,22 @@ export default {
                     }
                 }
             }
+        },
+        /**
+         * method will be called from outside by $refs
+         */
+        openAll() {
+            for (let i = 0; i < this.accordion.length; i++) {
+                    this.accordion[i].status = true;
+            }
+        },
+        /**
+         * method will be called from outside by $refs
+         */
+        closeAll() {
+            for (let i = 0; i < this.accordion.length; i++) {
+                this.accordion[i].status = false;
+            }
         }
     },
     watch: {
@@ -109,7 +178,7 @@ export default {
     margin-bottom: var(--default-margin);
 
     > div {
-        > a {
+        > a, > div:first-child {
             display: flex;
             align-items: center;
             gap: var(--grid-gap);
@@ -150,7 +219,7 @@ export default {
                 border-top: 0;
             }
 
-            > span {
+            > span, > a {
                 font-size: inherit;
 
                 &[class*="icon-"] {

package/src/components/CmdAddressData.vue

@@ -76,18 +76,30 @@
 export default {
     name: "CmdAddressData",
     props: {
+        /**
+         * headline shown above address-data
+         */
         headline: {
             type: String,
             required: false
         },
+        /**
+         * option to toggle labels (i.e. telephone, email etc.) in front/left of data
+         */
         showLabels: {
             type: Boolean,
             default: true
         },
+        /**
+         * all address-data (incl. lables) that will be shown
+         */
         addressData: {
             type: Object,
             required: true
         },
+        /**
+         * link physical address (street, no, zip and city) with Google Maps
+         */
         linkGoogleMaps: {
             type: Boolean,
             default: false

package/src/components/CmdBackToTopButton.vue

@@ -19,6 +19,9 @@ export default {
         }
     },
     props: {
+        /**
+         * icon-class (and shown tooltip on hover) for back to top button
+         */
         iconBackToTop: {
             type: Object,
             default: function () {

package/src/components/CmdBox.vue

@@ -52,17 +52,32 @@
 export default {
     name: "CmdBox",
     props: {
+        /**
+         * set boxtype to show different types of boxes/contents
+         *
+         * values: "content, product, user"
+         */
         boxType: {
             type: String,
             default: "content"
         },
+        /**
+         * the shown product (incl. name, price, image, description)
+         *
+         * limitations: only available for boxtype===product
+         */
         product: {
             type: Object,
             required: false
         },
+        /**
+         * the shown user-profile (incl. name, image, contact-data)
+         *
+         * limitations: only available for boxtype===user
+         */
         user: {
             type: Object,
-            required: true
+            required: false
         }
     }
 }

package/src/components/CmdBoxSiteSearch.vue

@@ -52,6 +52,9 @@ export default {
         }
     },
     props: {
+        /**
+         * send search result from outside to display inside this component
+         */
         results: {
             type: [Function, Number],
             required: false

package/src/components/CmdBreadcrumbs.vue

@@ -23,14 +23,23 @@
 export default {
     name: "CmdBreadcrumbs",
     props: {
+        /**
+         * list of breadcrumb-links (incl. path, icon and text)
+         */
         breadcrumbLinks: {
             type: Array,
             required: false
         },
+        /**
+         * label in front/left of breadcrumbs
+         */
         breadcrumbLabel: {
             type: String,
             required: false
         },
+        /**
+         * separator sign between entries
+         */
         breadcrumbSeparator: {
             type: String,
             default: ">"

package/src/components/CmdCompanyLogo.vue

@@ -20,18 +20,30 @@ export default {
         }
     },
     props: {
+        /**
+         * link for company logo (i.e. to homepage)
+         */
         link: {
             type: Object,
             required: false
         },
+        /**
+         * path to (default) logo-file
+         */
         pathDefaultLogo: {
             type: String,
             required: true
         },
+        /**
+         * path to dark-mode logo-file
+         */
         pathDarkmodeLogo: {
             type: String,
             required: false
         },
+        /**
+         * alternative text for image
+         */
         altText: {
             type: String,
             required: true /* w3c requirements */

package/src/components/CmdCookieDisclaimer.vue

@@ -3,9 +3,8 @@
         <div class="cmd-cookie-disclaimer">
             <h2 v-if="headline">{{ headline }}</h2>
             <slot name="cookie-options">
-                <div class="grid-container-two-fractions">
                     <div v-if="cookieOptions.required">
-                        <h2>{{ cookieOptions.required.headline }}</h2>
+                        <h3>{{ cookieOptions.required.headline }}</h3>
                         <CmdAccordion :accordion-data="cookieOptions.required.cookies.length" :accordionData="2">
                             <template v-for="(cookie, index) in cookieOptions.required.cookies"
                                       v-slot:[`accordionHeadline${index}`]
@@ -35,8 +34,9 @@
                             </template>
                         </CmdAccordion>
                     </div>
+                <hr />
                     <div v-if="cookieOptions.optional">
-                        <h2>{{ cookieOptions.optional.headline }}</h2>
+                        <h3>{{ cookieOptions.optional.headline }}</h3>
                         <CmdAccordion :accordion-data="cookieOptions.optional.cookies.length" :accordionData="2">
                             <template v-for="(cookie, index) in cookieOptions.optional.cookies"
                                       v-slot:[`accordionHeadline${index}`]
@@ -62,7 +62,6 @@
                             </template>
                         </CmdAccordion>
                     </div>
-                </div>
             </slot>
             <slot name="privacy-text">
             </slot>
@@ -96,18 +95,30 @@ export default {
         }
     },
     props: {
+        /**
+         * headline show above content
+         */
         headline: {
             type: String,
             required: false
         },
+        /**
+         * list of cookie-options
+         */
         cookieOptions: {
             type: Object,
             required: false
         },
+        /**
+         * label for button to accepting all cookies
+         */
         buttonLabelAcceptAllCookies: {
             type: String,
             default: "Accept all cookies!"
         },
+        /**
+         * label for button for accepting current settings
+         */
         buttonLabelAcceptCurrentSettings: {
             type: String,
             default: "Proceed with current settings!"

package/src/components/CmdCopyrightInformation.vue

@@ -1,18 +1,12 @@
 <template>
-    <div :class="['cmd-widget', 'cmd-copyright-information', htmlClass]">
+    <div class="cmd-copyright-information">
         <a href="http://www.comand-cms.com" target="_blank" lang="en" title="CoManD-Website">&copy; CoManD</a>
     </div>
 </template>
 
 <script>
 export default {
-    name: "CmdCopyrightWrapper",
-    props: {
-        htmlClass: {
-            type: String,
-            required: false
-        }
-    }
+    name: "CmdCopyrightWrapper"
 }
 </script>
 

package/src/components/CmdFakeSelect.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="[status, 'cmd-select label']">
-        <span>Label for FakeSelect:</span>
+        <span>{{ labelText }}</span>
         <ul :class="{'open': showOptions}" @clickout="closeOptions">
             <li>
                 <a href="#" @click.prevent="toggleOptions">
@@ -8,7 +8,7 @@
                     <span v-else-if="type === 'color' && miscInfo" class="color"
                           :style="'background: ' + miscInfo"></span>
                     <span>{{ optionName }}</span>
-                    <span :class="iconClass"></span>
+                    <span :class="dropdownIconClass"></span>
                 </a>
                 <ul v-if="type === 'filterList' && showOptions" class="filter-list">
                     <li v-for="(option, index) in selectData" :key="index">
@@ -46,34 +46,61 @@
 </template>
 
 <script>
-import "clickout-event"
-
 export default {
     name: 'CmdFakeSelect',
     props: {
+        /**
+         * set different default selectbox-types for
+         *
+         * values: "(none), color, country, filterlist"
+         */
         type: {
             type: String,
             required: false
         },
+        /**
+         * set default value
+         */
         value: {
             type: [String, Array],
             required: false
         },
+        /**
+         * set default option name
+         */
         defaultOptionName: {
             type: String,
             required: false
         },
+        /**
+         * list of options to select (incl. displayed names and values)
+         */
         selectData: {
             type: Array,
             required: false
         },
+        /**
+         * status (i.e. for validation)
+         *
+         * values: "error, success, disabled"
+         */
         status: {
             type: String,
             required: false
         },
-        iconClass: {
+        /**
+         * icon-class for dropdown icon (i.e. an angle/arrow)
+         */
+        dropdownIconClass: {
+            type: String,
+            default: "icon-single-arrow-down"
+        },
+        /**
+         * label-text for fake-select
+         */
+        labelText: {
             type: String,
-            required: true
+            required: false
         }
     },
     methods: {