comand-component-library 3.1.25 → 3.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.25",
+  "version": "3.1.26",
   "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>
 
@@ -65,13 +64,14 @@
                     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">

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": true
     },
     {
       "headline": "Third",
-      "iconClass": "icon-home",
+      "icon": {
+        "iconClass": "icon-home",
+        "tooltip": "Home"
+      },
       "content": "Text 3",
       "status": false
     }

package/src/components/CmdAccordion.vue

@@ -1,20 +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 v-if="!useCustomHeader" 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 ? openIconClass : closeIconClass]"></span>
+                <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>
@@ -36,9 +36,12 @@ 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)
          *
@@ -87,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: {