comand-component-library 3.1.25 → 3.1.29

package/src/components/CmdTable.vue

@@ -2,22 +2,24 @@
     <div class="cmd-table-wrapper">
         <table :class="{'full-width': fullWidth}">
             <thead>
-            <tr>
-                <th v-for="tablehead in 10" :key="tablehead">Table head {{ tablehead }}</th>
-                <th>Table head 11
-                    <a v-if="collapsible === true"
-                       href="#" @click.prevent="showTableData = !showTableData"
-                       :class="[showTableData ? closeIconClass : openIconClass]">
-                    </a>
-                </th>
-            </tr>
+                <tr>
+                    <th v-for="tablehead in 10" :key="tablehead">Table head {{ tablehead }}</th>
+                    <th>Table head 11
+                        <a v-if="collapsible"
+                           href="#" @click.prevent="showTableData = !showTableData"
+                           :class="showTableData ? iconCollapse.iconClass : iconExpand.iconClass"
+                           :title="showTableData ? iconExpand.tooltip : iconCollapse.tooltip"
+                        >
+                        </a>
+                    </th>
+                </tr>
             </thead>
             <transition name="fade">
-                <tbody v-show="showTableData === true">
-                <tr v-for="tablerows in 10" :key="tablerows">
-                    <td v-for="tabledata in 10" :key="tabledata">Table data {{ tabledata + 1 }}</td>
-                    <td>Table data 11</td>
-                </tr>
+                <tbody v-show="showTableData" aria-expanded="true">
+                    <tr v-for="tablerows in 10" :key="tablerows">
+                        <td v-for="tabledata in 10" :key="tabledata">Table data {{ tabledata + 1 }}</td>
+                        <td>Table data 11</td>
+                    </tr>
                 </tbody>
             </transition>
         </table>
@@ -33,21 +35,37 @@ export default {
         }
     },
     props: {
+        /**
+         * activate if table should be collapsible
+         */
         collapsible: {
             type: Boolean,
             default: false
         },
+        /**
+         * activate if table should be stretched to full width of its parent-container (else table will be as wide as its content)
+         */
         fullWidth: {
             type: Boolean,
             default: false
         },
-        openIconClass: {
-            type: String,
-            required: true
+        iconExpand: {
+            type: Object,
+            default: function() {
+                return {
+                    iconClass: "icon-single-arrow-down",
+                    tooltip: "Expand table"
+                }
+            }
         },
-        closeIconClass: {
-            type: String,
-            required: true
+        iconCollapse: {
+            type: Object,
+            default: function() {
+                return {
+                    iconClass: "icon-single-arrow-up",
+                    tooltip: "Collapse table"
+                }
+            }
         }
     }
 }

package/src/components/CmdTabs.vue

@@ -8,7 +8,7 @@
                 </a>
             </li>
         </ul>
-        <template v-if="useComponent">
+        <template v-if="useSlot">
             <div v-show="showTab === index" v-for="(tab, index) in tabs" :key="index" aria-live="assertive">
                 <slot :name="'tab-content-' + index"></slot>
             </div>
@@ -29,15 +29,24 @@ export default {
         }
     },
     props: {
+        /**
+         * activate if tabs should be (equally) stretched horizontally over full width of tab-content
+         */
         stretchTabs: {
             type: Boolean,
             default: false
         },
+        /**
+         * list of tabs (incl. tab-name and tab-content (optional))
+         */
         tabs: {
             type: Array,
-            required: true,
+            required: true
         },
-        useComponent: {
+        /**
+         * activate if content should be given by slot
+         */
+        useSlot: {
             type: Boolean,
             default: false
         }

package/src/components/CmdThumbnailScroller.vue

@@ -1,17 +1,18 @@
 <template>
     <div :class="['cmd-thumbnail-scroller', {'gallery-scroller' : !allowOpenFancyBox}]">
-        <CmdSlideButton @click.prevent="showPrevItem" :slideButtonType="slideButtons.previous"/>
+        <CmdSlideButton @click.prevent="showPrevItem" :slideButtons="cmdSlideButtons.prev"/>
         <transition-group name="slide" tag="ul">
             <li v-for="(image, index) in thumbnails" :key="image.imgId" :class="{'active' : imgIndex === index}">
                 <a href="#" @click.prevent="showFancyBox(index)">
                     <figure>
+                        <figcaption v-if="figcaption.show && figcaption.position === 'above-image' && image.figcaption.length">{{ image.figcaption }}</figcaption>
                         <img :src="image.srcImageSmall" :alt="image.alt"/>
-                        <figcaption v-if="showFigcaption">{{ image.figcaption }}</figcaption>
+                        <figcaption v-if="figcaption.show && figcaption.position === 'below-image' && image.figcaption.length">{{ image.figcaption }}</figcaption>
                     </figure>
                 </a>
             </li>
         </transition-group>
-        <CmdSlideButton @click.prevent="showNextItem" :slideButtonType="slideButtons.next"/>
+        <CmdSlideButton @click.prevent="showNextItem" :slideButtons="cmdSlideButtons.next"/>
     </div>
 </template>
 
@@ -26,47 +27,68 @@ export default {
             thumbnails: []
         }
     },
-
     components: {
         CmdSlideButton
     },
-
     props: {
+        /**
+         * list of thumbnail-scroller-items
+         */
         thumbnailScrollerItems: {
             type: Array,
             required: true
         },
+        /**
+         * allow large version of images to be opened in CmdFancyBox-component
+         */
         allowOpenFancyBox: {
             type: Boolean,
             default: true
         },
+        /**
+         * set a default index to activate/highlight a specific image/item
+         */
         imgIndex: {
             type: Number,
             required: false
         },
-        showFigcaption: {
-            type: Boolean,
-            default: true
+        /**
+         * set figcaption
+         */
+        figcaption: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    position: "below-image"
+                }
+            }
         },
-        slideButtons: {
+        /**
+         * properties for cmdSlideButtons-component
+         */
+        cmdSlideButtons: {
             type: Object,
             default() {
                 return {
                     "next": {
-                        "buttonType": "next",
-                        "iconClass": "icon-single-arrow-right",
-                        "tooltip": "Next"
+                        "next": {
+                            type: "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"
+                        }
                     }
                 }
             }
         }
     },
-
     methods: {
         showNextItem() {
             const thumbnail = this.thumbnails.shift(); // remove first element of array

package/src/components/CmdTooltip.vue

@@ -6,6 +6,9 @@
 export default {
     name: "CmdTooltip",
     props: {
+        /**
+         * text for tooltip
+         */
         tooltipText: {
             type: String,
             required: true

package/src/components/CmdTopHeaderNavigation.vue

@@ -2,10 +2,14 @@
     <div class="cmd-top-header-navigation">
         <ul class="flex-container" role="navigation">
             <li v-for="(link, index) in topHeaderNavigationData" :key="index">
-                <a :href="link.path" :target="link.target" :title="!link.linkName ? link.tooltip : ''">
-                    <span v-if="link.iconClass" :class="link.iconClass"></span>
-                    <span v-if="link.linkName">{{ link.linkName }}</span>
+                <a v-if="link.linkType === 'href'" :href="link.path" :target="link.target" :title="link.icon.tooltip">
+                    <span v-if="link.iconClass" :class="link.icon.iconClass"></span>
+                    <span v-if="link.text">{{ link.text }}</span>
                 </a>
+                <router-link v-else-if="link.linkType === 'router'"  :to="link.path" :target="link.target" :title="link.icon.tooltip">
+                    <span v-if="link.iconClass" :class="link.icon.iconClass"></span>
+                    <span v-if="link.text">{{ link.text }}</span>
+                </router-link>
             </li>
         </ul>
     </div>
@@ -15,6 +19,9 @@
 export default {
     name: "CmdTopHeaderNavigation",
     props: {
+        /**
+         * list of navigation-entries
+         */
         topHeaderNavigationData: {
             type: Array,
             required: false

package/src/components/CmdUploadForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <fieldset ref="upload" class="grid-container-create-columns cmd-upload-form">
+    <fieldset ref="upload" class=" cmd-upload-form grid-container-create-columns">
         <legend>Upload form</legend>
         <h2 v-if="headline">{{ headline }}</h2>
         <CmdFormElement
@@ -64,6 +64,7 @@
 </template>
 
 <script>
+// import components
 import CmdFormElement from "./CmdFormElement"
 import CmdSystemMessage from "./CmdSystemMessage"
 
@@ -82,34 +83,58 @@ export default {
         CmdSystemMessage
     },
     props: {
+        /**
+         * headline for form
+         */
         headline: {
             type: String,
             required: false
         },
+        /**
+         * url to uplaod files
+         */
         uploadURL: {
             type: String,
             required: false
         },
+        /**
+         * activate if files for upload should be selected by native input (type="file")
+         */
         enableFileSelect: {
             type: Boolean,
             default: true
         },
+        /**
+         * activate if files should be dragged and dropped from os-file-explorer
+         */
         enableDragAndDrop: {
             type: Boolean,
             default: true
         },
+        /**
+         * enable textarea for additional comments
+         */
         enableComment: {
             type: Boolean,
             default: true
         },
+        /**
+         * set upload options
+         */
         uploadOptions: {
             type: Object,
             required: false
         },
+        /**
+         * list of allowed file types to upload (all can be selected)
+         */
         allowedFileTypes: {
             type: Array,
             required: true
         },
+        /**
+         * set maximum upload size (for all files combined)
+         */
         maxUploadSize: {
             type: Number,
             default: 10485760

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
-        <component :is="innerComponent" :class="setInnerClass" v-if="innerWrapper">
-            <a :id="anchorId" v-if="anchorId"></a>
+        <component v-if="innerWrapper" :is="innerComponent" :class="setInnerClass">
+            <a v-if="anchorId" :id="anchorId"></a>
             <slot></slot>
         </component>
         <template v-else>
-            <a :id="anchorId" v-if="anchorId"></a>
+            <a v-if="anchorId" :id="anchorId"></a>
             <slot></slot>
         </template>
     </div>
@@ -15,6 +15,9 @@
 export default {
     name: "CmdWidthLimitationWrapper",
     props: {
+        /**
+         * set a html-tag as inner tag
+         */
         innerComponent: {
             type: String,
             default: "section",
@@ -22,18 +25,38 @@ export default {
                 return value;
             }
         },
+        /**
+         * activate if the inner content should be wrapped in inner component tag
+         *
+         * (if deactivated, content will be directly placed inside cmd-width-limitation-wrapper)
+         */
         innerWrapper: {
             type: Boolean,
             default: true
         },
+        /**
+         * activate if wrapper (and its content) should be sticky (=postion remains the same if content below is scrolled)
+         *
+         * i.e. use for site-header
+         *
+         * keep attention that more than one sticky-element on same html-level can cause problems, if content below is scrolled
+         */
         sticky: {
             type: Boolean,
             default: false
         },
+        /**
+         * set class to inner component
+         *
+         * innerWrapper-property must be true
+         */
         innerClass: {
             type: String,
             required: false
         },
+        /**
+         * set id for (invisible) anchor to enable shortcuts
+         */
         anchorId: {
             type: String,
             required: false