comand-component-library 3.1.24 → 3.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.24",
+  "version": "3.1.28",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

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 --------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -124,6 +137,7 @@
             <CmdFormElement labelText="Input for selectbox:"
                             element="select"
                             :status="formElementStatus"
+                            v-model:value="selectedOption"
                             :selectOptions="selectOptions"
             />
             <CmdFormElement labelText="Input for datalist:"
@@ -409,6 +423,7 @@
               <CmdFormElement element="input"
                               labelText="Label for replaced radiobutton"
                               type="radio"
+                              class="replace-input-type"
                               id="inputfield13"
                               name="replaced-radiogroup"
                               inputValue="radiobuttonValue1"
@@ -417,6 +432,7 @@
               <CmdFormElement element="input"
                               labelText="Label for replaced radiobutton"
                               type="radio"
+                              class="replace-input-type"
                               id="inputfield14"
                               name="replaced-radiogroup"
                               inputValue="radiobuttonValue2"
@@ -647,9 +663,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>
 
@@ -872,6 +885,7 @@ export default {
 
   data() {
     return {
+      accordionGroupOpen: false,
       showPageMultistep: 1,
       showPagePager: 1,
       selectedOptions: [],
@@ -891,6 +905,7 @@ export default {
       multipleSwitchCheckbox: ['b'],
       multipleSwitchRadio: 'c',
       fancyBoxCookieDisclaimer: false,
+      selectedOption: "2",
       selectOptions: [
           {
               text: "Option 1",
@@ -898,8 +913,7 @@ export default {
           },
           {
               text: "Option 2",
-              value: "2",
-              selected: true
+              value: "2"
           },
           {
               text: "Option 3",
@@ -964,6 +978,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/assets/data/top-header-navigation.json

@@ -1,21 +1,27 @@
 [
   {
-    "type": "href",
+    "linkType": "href",
     "path": "http://www.comand-cms.com",
     "target": "_blank",
-    "iconClass": "icon-globe",
-    "linkName": "CoManD-CMS"
+    "icon": {
+      "iconClass": "icon-globe",
+      "tooltip": "CoManD-CMS"
+    }
   },
   {
-    "type": "href",
+    "linkType": "href",
     "path": "#anchor-section4",
-    "iconClass": "icon-mail",
-    "linkName": "Contact"
+    "icon": {
+      "iconClass": "icon-mail",
+      "tooltip": "Contact"
+    }
   },
   {
-    "type": "href",
+    "linkType": "href",
     "path": "#anchor-section3",
-    "iconClass": "icon-user-profile",
-    "tooltip": "Login"
+    "icon": {
+      "iconClass": "icon-user-profile",
+      "tooltip": "Login"
+    }
   }
 ]

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,29 @@ 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
          */
@@ -47,7 +66,7 @@ export default {
             default: true
         },
         /**
-         * headlien for accordion-box that is also visible is accordion is collapsed
+         * headline for accordion-box that is also visible is accordion is collapsed
          */
         accordionHeadlineLevel: {
             type: String,
@@ -71,25 +90,37 @@ export default {
             required: true
         },
         /**
-         * iconClass for icon to expand an accordion
-         */
-        openIconClass: {
-            type: String,
-            default: "icon-single-arrow-up"
-        },
-        /**
-         * iconClass for icon to collapse an accordion
+         * icon to expand an accordion
          */
-        closeIconClass: {
-            type: String,
-            default: "icon-single-arrow-down"
+        iconOpen: {
+            type: Object,
+            default: function() {
+                return {
+                    icon: {
+                        iconClass: "icon-single-arrow-up",
+                        tooltip: "Close content"
+                    }
+                }
+            },
         },
         /**
-         * tooltip shown on hover for open/close-icon
+         * icon to collapse an accordion
          */
-        tooltip: {
-            type: String,
-            required: false
+        iconClosed: {
+            type: Object,
+            default: function() {
+                return {
+                    icon: {
+                        iconClass: "icon-single-arrow-down",
+                        tooltip: "Show content"
+                    }
+                }
+            }
+        }
+    },
+    computed: {
+        toggleTransition() {
+            return this.useTransition && 'fade'
         }
     },
     methods: {
@@ -104,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: {
@@ -131,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);
@@ -172,7 +219,7 @@ export default {
                 border-top: 0;
             }
 
-            > span {
+            > span, > a {
                 font-size: inherit;
 
                 &[class*="icon-"] {

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>

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">
@@ -94,6 +94,13 @@ export default {
         dropdownIconClass: {
             type: String,
             default: "icon-single-arrow-down"
+        },
+        /**
+         * label-text for fake-select
+         */
+        labelText: {
+            type: String,
+            required: false
         }
     },
     methods: {

package/src/components/CmdFancyBox.vue

@@ -4,7 +4,7 @@
          aria-labelledby="fancybox">
       <div class="popup" :class="{'image' : fancyBoxImageUrl || fancyBoxGallery }">
         <div class="button-wrapper no-flex"
-             v-if="((fancyboxOptions.printButtons && (fancyboxOptions.printButtons.color || fancyboxOptions.printButtons.grayscale))) || fancyboxOptions.closeIcon">
+             v-if="(fancyboxOptions.printButtons && (fancyboxOptions.printButtons.color || fancyboxOptions.printButtons.grayscale)) || fancyboxOptions.closeIcon">
           <a href="#"
              v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.color"
              :class="['button', fancyboxOptions.printButtons.color.iconClass]"
@@ -69,10 +69,16 @@
     const FancyBox = defineComponent({
         name: "CmdFancyBox",
         props: {
+            /**
+             * set if content should be loaded by url
+             */
             url: {
                 type: String,
                 required: false
             },
+            /**
+             * options to show at top (closeIcon, printButtons)
+             */
             fancyboxOptions: {
                 type: Object,
                 default() {
@@ -94,34 +100,58 @@
                     }
                 }
             },
+            /**
+             * allow closing fancybox by escape-key
+             */
             allowEscapeKey: {
                 type: Boolean,
                 default: true
             },
+            /**
+             * the content shown in the main area
+             */
             content: {
                 type: String,
                 required: false
             },
+            /**
+             *
+             */
             elements: {
                 type: Array,
                 required: false
             },
+            /**
+             * use if a gallery of images should be opened (and navigated) inside fancybox
+             */
             fancyBoxGallery: {
                 type: Array,
                 required: false
             },
+            /**
+             * if gallery is used, you can set default index
+             */
             defaultGalleryIndex: {
                 type: Number,
                 required: false
             },
+            /**
+             * show/hide entire fancybox
+             */
             show: {
                 type: Boolean,
                 default: false
             },
+            /**
+             * show/hide overlay (around fancybox, above website)
+             */
             showOverlay: {
                 type: Boolean,
                 default: true
             },
+            /**
+             * show slide-buttons (left/previous and right/next)
+             */
             slideButtons: {
                 type: Object,
                 default() {

package/src/components/CmdFooterNavigation.vue

@@ -24,10 +24,16 @@ import {openFancyBox} from "./CmdFancyBox.vue"
 export default {
     name: "CmdFooterNavigation",
     props: {
+        /**
+         * headlien above links
+         */
         headline: {
             type: String,
             required: false
         },
+        /**
+         * list of links shown vertically
+         */
         footerNavigation: {
             type: Array,
             required: false