comand-component-library 3.1.24 → 3.1.28

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 {

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" :slideButtonType="cmdSlideButtons.previous"/>
         <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" :slideButtonType="cmdSlideButtons.next"/>
     </div>
 </template>
 
@@ -26,29 +27,47 @@ 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 {
@@ -66,7 +85,6 @@ export default {
             }
         }
     },
-
     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