comand-component-library 3.1.25 → 3.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.25",
+  "version": "3.1.29",
   "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">
@@ -137,6 +137,7 @@
             <CmdFormElement labelText="Input for selectbox:"
                             element="select"
                             :status="formElementStatus"
+                            v-model:value="selectedOption"
                             :selectOptions="selectOptions"
             />
             <CmdFormElement labelText="Input for datalist:"
@@ -904,6 +905,7 @@ export default {
       multipleSwitchCheckbox: ['b'],
       multipleSwitchRadio: 'c',
       fancyBoxCookieDisclaimer: false,
+      selectedOption: "2",
       selectOptions: [
           {
               text: "Option 1",
@@ -911,8 +913,7 @@ export default {
           },
           {
               text: "Option 2",
-              value: "2",
-              selected: true
+              value: "2"
           },
           {
               text: "Option 3",

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/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,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>
+                <span class="toggle-icon" :class="[accordionContent.status ?  iconOpen.icon.iconClass : iconClosed.icon.iconClass]"></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
+         * icon to expand an accordion
          */
-        openIconClass: {
-            type: String,
-            default: "icon-single-arrow-up"
-        },
-        /**
-         * iconClass for icon to collapse 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: {

package/src/components/CmdFormElement.vue

@@ -1,18 +1,19 @@
 <template>
     <label v-if="(element === 'input' || element === 'select' || element === 'textarea')"
            :for="id"
-           :class="['cmd-form-element', status, {'inline' : displayinline, 'checked': isChecked}]"
+           :class="['cmd-form-element', status, {'inline' : displayLabelInline, 'checked': isChecked}]"
            ref="label">
         <!-- begin label (+ required) -->
         <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
-              :class="{'hidden': hideLabelText}">
-      <span>{{ labelText }}</span><sup v-if="$attrs.required && !hideLabel">*</sup>
-    </span>
+              :class="{'hidden': hideLabel}">
+          <span>{{ labelText }}</span>
+          <sup v-if="$attrs.required">*</sup>
+        </span>
         <!-- end label (+ required) -->
 
         <!-- begin icon -->
-        <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && iconClass" class="place-inside"
-              :class="[status, iconClass]"></span>
+        <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && innerIconClass" class="place-inside"
+              :class="[status, innerIconClass]"></span>
         <!-- end icon -->
 
         <!-- begin inputfield -->
@@ -69,7 +70,7 @@
                 @change="$emit('input', $event.target.value)"
         >
             <option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
-                    :selected="option.selected">{{ option.text }}
+                    :selected="option.value === value">{{ option.text }}
             </option>
         </select>
         <!-- end selectbox -->
@@ -127,11 +128,18 @@ export default {
         }
     },
     props: {
+        /**
+         * set value for v-model
+         */
         value: {
             type: [String, Boolean, Array, Number],
-            required: false,
             default: ""
         },
+        /**
+         * set type of native form-element
+         *
+         * values: input, select, textarea, button
+         */
         element: {
             type: String,
             validator(value) {
@@ -142,67 +150,114 @@ export default {
             },
             required: true
         },
+        /**
+         * hide label (and asterisk if mandatory)
+         *
+         * label may not be removed, because it is required for accessibility
+         */
         hideLabel: {
             type: Boolean,
             default: false
         },
+        /**
+         * text for label
+         */
         labelText: {
             type: String,
             required: false
         },
-        hideLabelText: {
-            type: Boolean,
-            default: false
-        },
+        /**
+         * allow checkbox/radio-buttons to get value from outside
+         */
         inputValue: {
-            /* allow checkbox/radiobuttons to get value from outside */
             type: String,
             required: false
         },
-        /* for replacing native checkboxes/radiobuttons by custom ones */
+        /**
+         * for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)
+         */
         replaceInputType: {
             type: Boolean,
             default: false
         },
+        /**
+         * set an optional class on native form-element (use native class="" on component ot set class on outer-component-element)
+         *
+         * may not be named as 'class' because it is a reserved keyword in JavaScript
+         */
         htmlClass: {
-            /* may not be named as 'class' because it is a reserved keyword in JavaScript */
             type: String,
             required: false
         },
+        /**
+         * if for native form-element
+         */
         id: {
             type: String,
             required: false
         },
+        /**
+         * set if a native datalist should be used
+         */
         datalist: {
             type: Object,
             required: false
         },
+        /**
+         * list of options for selectbox
+         *
+         * element-property must be 'select'
+         */
         selectOptions: {
             type: Array,
             required: false
         },
+        /**
+         * text for native button
+         */
         buttonText: {
             type: String,
             required: false
         },
+        /**
+         * set icon for native button
+         */
         buttonIcon: {
             type: Object,
             default() {
                 return {}
             }
         },
+        /**
+         * set text for tooltip
+         */
         tooltipText: {
             type: String,
             required: false
         },
-        iconClass: {
+        /**
+         * set class for inner icon (icon placed 'inside' input/ left of input-text)
+         *
+         * element-property must be 'input' and type-property may not be checkbox or radio
+         */
+        innerIconClass: {
             type: String,
             required: false
         },
-        displayinline: {
+        /**
+         * activate if label-text should be place inline/left of form-element (and not above)
+         *
+         * type-property may not be checkbox or radio
+         */
+         displayLabelInline: {
             type: Boolean,
             required: false
         },
+        /**
+         * set status for label and form-element
+         *
+         * values: error (red-styling), success (green-styling)
+         */
         status: {
             type: String,
             required: false

package/src/components/CmdSlideButton.vue

@@ -1,10 +1,10 @@
 <template>
     <a href="#"
        @click.prevent
-       :class="['cmd-slide-button', 'button', slideButtonType.buttonType]"
-       :title="slideButtonType.buttonType === 'next' ? slideButtonType.tooltip : slideButtonType.tooltip">
+       :class="['cmd-slide-button', 'button', slideButtons.next ? 'next' : 'previous']"
+       :title="slideButtons.next ? slideButtons.next.tooltip : slideButtons.prev.tooltip">
         <span
-            :class="slideButtonType.buttonType === 'next' ? slideButtonType.iconClass : slideButtonType.iconClass"></span>
+            :class="slideButtons.next ? slideButtons.next.iconClass : slideButtons.prev.iconClass"></span>
     </a>
 </template>
 
@@ -15,9 +15,20 @@ export default {
         /**
          * set slide-button to "next" (= right), else it will be displayed as previous (=left) button
          */
-        slideButtonType: {
+        slideButtons: {
             type: Object,
-            required: true
+            default: function() {
+                return {
+                    prev: {
+                        iconClass: "icon-single-arrow-left",
+                        tooltip: "Previous"
+                    },
+                    next: {
+                        iconClass: "icon-single-arrow-right",
+                        tooltip: "Next"
+                    }
+                }
+            }
         }
     }
 }

package/src/components/CmdSlideshow.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-slideshow" :class="{'full-width': fullWidth}">
         <div class="inner-slideshow-wrapper" @mouseenter="pause = true" @mouseleave="pause = false">
-            <CmdSlideButton @click.prevent="showPrevItem" :slideButtonType="slideButtons.previous"/>
+            <CmdSlideButton @click.prevent="showPrevItem" :slideButtons="slideButtons.prev"/>
             <transition name="fade">
                 <a v-if="currentItem.href" :href="currentItem.href" :key="index" :title="currentItem.title">
                     <figure v-if="currentItem && !useSlot" class="slideshow-item">
@@ -22,7 +22,7 @@
                     <slot :name="'item' + currentSlotItem"></slot>
                 </div>
             </transition>
-            <CmdSlideButton @click.prevent="showNextItem" :slideButtonType="slideButtons.next"/>
+            <CmdSlideButton @click.prevent="showNextItem" :slideButtons="slideButtons.next"/>
             <ol v-if="showQuickLinkIcons">
                 <li v-for="(item, i) in slideshowItems" :key="i" :class="{active: i === index }">
                     <a href="#" @click.prevent="index = i" :aria-label="index"></a>
@@ -104,15 +104,18 @@ export default {
             type: Object,
             default() {
                 return {
-                    "next": {
-                        "buttonType": "next",
-                        "iconClass": "icon-single-arrow-right",
-                        "tooltip": "Next"
+                    next: {
+                        next: {
+                            "iconClass": "icon-single-arrow-right",
+                            "tooltip": "Next"
+                        }
                     },
-                    "previous": {
-                        "buttonType": "previous",
-                        "iconClass": "icon-single-arrow-left",
-                        "tooltip": "Previous"
+                    prev: {
+                        prev: {
+                            "type": "prev",
+                            "iconClass": "icon-single-arrow-left",
+                            "tooltip": "Previous"
+                        }
                     }
                 }
             }

package/src/components/CmdSwitchButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <label :class="['toggle-switch',
+    <label :class="['cmd-switch-button', 'toggle-switch',
                     {'switch-label': onLabel && offLabel && !labelText,
                     'colored' : colored, 'on' : colored && isChecked,
                     'off' : colored && !isChecked, 'disabled': $attrs.disabled
@@ -19,38 +19,78 @@ export default {
     name: "SwitchButton",
     emits: ["update:value"],
     props: {
+        /**
+         * set type for input
+         *
+         * values: checkbox, radio
+         */
         type: {
             type: String,
             required: true
         },
+        /**
+         * set id for input
+         *
+         * required for accessibility
+         *
+         */
         id: {
             type: String,
             required: true
         },
+        /**
+         * set name for input
+         *
+         * require for radio-buttons (and form-submit by browser)
+         */
         name: {
             type: String,
             required: false
         },
+        /**
+         * value for v-model
+         */
         value: {
             type: [String, Array, Boolean],
             required: false
         },
+        /**
+         * set value to pre-check toggle-switch
+         */
         inputValue: {
             type: String,
             required: false
         },
+        /**
+         * text for label
+         *
+         * required if onLabel/offLabel are not set
+         */
         labelText: {
             type: String,
             required: false
         },
+        /**
+         * text for on-label
+         *
+         * set to activate switch-label (=label is placed on toggle-switch (not behind))
+         */
         onLabel: {
             type: String,
             required: false
         },
+        /**
+         * text for off-label
+         *
+         * set to activate switch-label (=label is placed on toggle-switch (not behind))
+         */
         offLabel: {
             type: String,
             required: false
         },
+        /**
+         * set to true, if checkbox/radio-buttons should have green/checked and red/unchecked color-coding
+         */
         colored: {
             type: Boolean,
             required: false
@@ -88,6 +128,8 @@ export default {
 </script>
 
 <style lang="scss">
+/* begin cmd-switch-button ------------------------------------------------------------------------------------------ */
+/* no cmd-prefix-styling (class based on frontend-framework */
 .toggle-switch {
     &.switch-label {
         &.colored {
@@ -123,4 +165,5 @@ export default {
         }
     }
 }
+/* end cmd-switch-button ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdSystemMessage.vue

@@ -1,20 +1,19 @@
 <template>
     <transition name="fade">
         <div
-            class="cmd-system-message system-message"
-            :class="[{ 'full-width': fullWidth }, status]"
-            role="alert"
             v-if="showSystemMessage"
+            :class="['cmd-system-message', 'system-message', { 'full-width': fullWidth }, status]"
+            role="alert"
         >
             <a
-                :class="closeIcon.iconClass"
+                v-if="iconClose.iconClass"
+                :class="iconClose.iconClass"
                 href="#"
                 @click.prevent="showSystemMessage = false"
-                :title="closeIcon.tooltip"
-                v-if="closeIcon.iconClass"
+                :title="iconClose.tooltip"
             ></a>
             <h6>
-                <span :class="iconClass" v-if="iconClass"></span>
+                <span v-if="iconMessage && iconMessage.iconClass && iconMessage.show" :class="iconMessage.iconClass"></span>
                 <strong v-if="message">{{ message }}</strong>
             </h6>
             <slot></slot>
@@ -31,23 +30,45 @@ export default {
         }
     },
     props: {
+        /**
+         * status of message
+         *
+         * values: error (red), warning (yellow), success (grenn), info (blue)
+         */
         status: {
             type: String,
             required: true
         },
+        /**
+         * activate to stretch message-box as wide as parent container (else message-box is as wide as message)
+         */
         fullWidth: {
             type: Boolean,
             default: true
         },
-        iconClass: {
-            type: String,
-            default: "icon-warning"
+        /**
+         * set icon-class for message (will be displayed left from
+         */
+        iconMessage: {
+            type: Object,
+            default: function() {
+                return {
+                    iconClass: "icon-warning",
+                    show: true
+                }
+            }
         },
+        /**
+         * the system-message-text
+         */
         message: {
             type: String,
             required: false
         },
-        closeIcon: {
+        /**
+         * icon to close system-message
+         */
+        iconClose: {
             type: Object,
             default: function () {
                 return {