comand-component-library 3.3.4 → 3.3.6

package/src/components/CmdTabs.vue

@@ -3,7 +3,9 @@
         <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
             <li v-for="(tab, index) in tabs" :key="index" role="tab">
                 <a :class="{active : showTab === index}" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : undefined" href="#">
-                    <CmdIcon v-if="tab.iconClass" :iconClass="tab.iconClass"></CmdIcon>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="tab.iconClass" :iconClass="tab.iconClass" :type="tab.iconType" />
+                    <!-- end CmdIcon -->
                     <span v-if="tab.name">{{ tab.name }}</span>
                 </a>
             </li>
@@ -32,12 +34,18 @@
 </template>
 
 <script>
+// import functions
 import {addCollection} from "@iconify/vue"
+
+// import data
 import IconData from '@/assets/data/icon.json'
+
 // import components
 import CmdHeadline from "./CmdHeadline"
 import CmdIcon from "./CmdIcon"
+
 addCollection(IconData)
+
 export default {
     name: "CmdTabs",
     components: {

package/src/components/CmdTooltip.vue

@@ -13,7 +13,9 @@
 
             <!-- begin icon to close tooltip -->
             <a v-if="iconClose.show && toggleVisibilityByClick" href="#" @click.prevent="hideTooltip" :title="iconClose.tooltip">
-                <span :class="iconClose.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType" />
+                <!-- end CmdIcon -->
             </a>
             <!-- end icon to close tooltip -->
         </div>
@@ -28,11 +30,13 @@
 <script>
 // import components
 import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 
 export default {
     name: "CmdTooltip",
     components: {
-        CmdHeadline
+        CmdHeadline,
+        CmdIcon
     },
     data() {
         return {

package/src/components/CmdUploadForm.vue

@@ -47,7 +47,9 @@
                                 :title="getMessage('cmduploadform.labeltext.remove_all_files_from_list')"
                                 @click.prevent="cancelUpload"
                             >
-                                <span :class="deleteIconClass"></span>
+                                <!-- begin CmdIcon -->
+                                <CmdIcon :iconClass="deleteIcon.iconClass" :type="deleteIcon.iconClass" />
+                                <!-- end CmdIcon -->
                             </a>
                             <span>
                               {{ listOfFiles.length }}
@@ -94,7 +96,10 @@
                                 href="#"
                                 :title="getMessage('cmduploadform.labeltext.remove_file_from_list', uploadFile.file.name)"
                                 @click.prevent="removeFile(index)"
-                            ><span :class="deleteIconClass"></span>
+                            >
+                                <!-- begin CmdIcon -->
+                                <CmdIcon :iconClass="iconDelete.iconClass" :type="iconDelete.iconType" />
+                                <!-- end CmdIcon -->
                             </a>
                             <span
                                 :class="[
@@ -158,11 +163,16 @@
                 </dt>
                 <dd>
                     <a
-                        :class="showListOfFileExtensions ? invisibleIconClass : visibleIconClass"
                         href="#"
                         @click.prevent="showListOfFileExtensions = !showListOfFileExtensions"
-                        :title="getMessage('cmduploadform.tooltip.toggle_list_of_allowed_file_types')"
-                    ></a>
+                        :title="getMessage('cmduploadform.tooltip.toggle_list_of_allowed_file_types')">
+                        <!-- begin CmdIcon -->
+                        <CmdIcon
+                            :iconClass="showListOfFileExtensions ? iconInvisible.iconClass : iconVisible.iconClass"
+                            :type="showListOfFileExtensions ? iconInvisible.iconType : iconVisible.iconType"
+                        />
+                        <!-- end CmdIcon -->
+                    </a>
                     <transition name="fade">
                         <ul v-if="showListOfFileExtensions" class="list-of-file-extensions">
                             <li
@@ -185,7 +195,9 @@
                     :disabled="uploadInitiated"
                     @click="selectFiles()"
                 >
-                    <span :class="fileUploadIconClass"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon :iconClass="iconFileUpload.iconClass" :type="iconFileUpload.iconType" />
+                    <!-- end CmdIcon -->
                     <span v-if="allowMultipleFileUploads">{{
                             getMessage("cmduploadform.labeltext.select_files")
                         }}</span>
@@ -237,14 +249,18 @@
                 "
                 @click="uploadFiles"
             >
-                <span :class="uploadIconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="iconUpload.iconClass" :type="iconUpload.iconType" />
+                <!-- end CmdIcon -->
                 <span v-if="listOfFiles.length === 1 || !allowMultipleFileUploads">
                     {{ getMessage("cmduploadform.buttontext.upload_file") }}
                 </span>
                 <span v-else>{{ getMessage("cmduploadform.buttontext.upload_files") }}</span>
             </button>
             <button :class="['button', { disabled: listOfFiles.length === 0 }]" @click="cancel">
-                <span :class="cancelIconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="iconCancel.iconClass" :type="iconCancel.iconType" />
+                <!-- end CmdIcon -->
                 <span>{{ getMessage("cmduploadform.buttontext.cancel") }}</span>
             </button>
         </div>
@@ -267,16 +283,22 @@
             <template v-if="enableDragAndDrop">
                 <template v-if="fileTypeImage">
                     <span>{{ getMessage("cmduploadform.select_image") }}</span>
-                    <span :class="imageIconClass"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon :iconClass="iconImage.iconClass" :type="iconImage.iconType" />
+                    <!-- end CmdIcon -->
                 </template>
                 <template v-else>
                     <span>{{ getMessage("cmduploadform.select_file") }}</span>
-                    <span :class="fileUploadIconClass"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon :iconClass="iconFileUpload.iconClass" :type="iconFileUpload.iconType" />
+                    <!-- end CmdIcon -->
                 </template>
             </template>
             <template v-else>
                 <span>{{ getMessage("cmduploadform.drag_and_drop_file_here") }}</span>
-                <span :class="dragAndDropIconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="iconDragAndDrop.iconClass" :type="iconDragAndDrop.iconType" />
+                <!-- end CmdIcon -->
             </template>
             <small>{{ getMessage("cmduploadform.max_upload_size") }} {{ formatSize(maxFileUploadSize) }}</small>
             <small>{{ getMessage("cmduploadform.allowed_file_types") }} {{ allowedFileExtensions }}</small>
@@ -307,8 +329,9 @@ import {getFileExtension} from "../utils/getFileExtension.js"
 import axios from "axios"
 
 // import components
-import CmdHeadline from "./CmdHeadline"
 import CmdFormElement from "./CmdFormElement"
+import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 import CmdSystemMessage from "./CmdSystemMessage"
 
 export default {
@@ -316,8 +339,9 @@ export default {
     emits: ["click", "error", "upload-complete", "upload-file-success"],
     mixins: [I18n, DefaultMessageProperties],
     components: {
-        CmdHeadline,
         CmdFormElement,
+        CmdHeadline,
+        CmdIcon,
         CmdSystemMessage,
     },
     data() {
@@ -444,67 +468,112 @@ export default {
             default: true
         },
         /**
-         * set icon class for delete-icons
+         * set icon for delete-icons
          */
-        deleteIconClass: {
-            type: String,
-            default: "icon-delete"
+        deleteIcon: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-delete",
+                    iconType: "auto"
+                }
+            }
         },
         /**
-         * set icon class for file-upload-icon
+         * set icon for file-upload-icon
          */
-        fileUploadIconClass: {
-            type: String,
-            default: "icon-file-upload"
+        iconFileUpload: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-file-upload",
+                    iconType: "auto"
+                }
+            }
         },
         /**
-         * set icon class for file-icon
+         * set icon for file-icon
          */
-        fileIconClass: {
-            type: String,
-            default: "icon-file"
+        iconFile: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-file",
+                    iconType: "auto"
+                }
+            }
         },
         /**
-         * set icon class for invisible-icon
+         * set icon for invisible-icon
          */
-        invisibleIconClass: {
-            type: String,
-            default: "icon-not-visible"
+        iconInvisible: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-not-visible",
+                    iconType: "auto"
+                }
+            }
         },
         /**
          * set icon class for visible-icon
          */
-        visibleIconClass: {
-            type: String,
-            default: "icon-visible"
+        iconVisible: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-visible",
+                    iconType: "auto"
+                }
+            }
         },
         /**
-         * set icon class for image-icon
+         * set icon for image-icon
          */
-        imageIconClass: {
-            type: String,
-            default: "icon-image"
+        iconImage: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-image",
+                    iconType: "auto"
+                }
+            }
         },
         /**
-         * set icon class for upload-icon
+         * set icon for upload-icon
          */
-        uploadIconClass: {
-            type: String,
-            default: "icon-upload"
+        iconUpload: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-upload",
+                    iconType: "auto"
+                }
+            }
         },
         /**
-         * set icon class for drag-and-drop-icon
+         * set icon for drag-and-drop-icon
          */
-        dragAndDropIconClass: {
-            type: String,
-            default: "icon-drag-and-drop"
+        iconDragAndDrop: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-drag-and-drop",
+                    iconType: "auto"
+                }
+            }
         },
         /**
          * set icon class for cancel-icon
          */
-        cancelIconClass: {
-            type: String,
-            default: "icon-cancel"
+        iconCancel: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-cancel",
+                    iconType: "auto"
+                }
+            }
         },
         /**
          * properties for CmdHeadline-component at of the fieldset

package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json

@@ -51,7 +51,7 @@
             ]
         }
     },
-    "dropdownIcon": {
+    "iconDropdown": {
         "comments": [
             "icon for dropdown-icon (i.e. an angle/arrow)"
         ],
@@ -85,5 +85,10 @@
         "comments": [
             "default text if no option is selected (and first option is not used)"
         ]
+    },
+    "iconSelectAllOptions": {
+        "comments": [
+            "set icon for \"select all\"-option"
+        ]
     }
 }

package/src/documentation/generated/CmdFormFiltersPropertyDescriptions.json

@@ -14,7 +14,7 @@
             ]
         }
     },
-    "deleteFilter": {
+    "deleteFilterIcon": {
         "comments": [
             "icon for deleting (a single) filter"
         ],

package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json

@@ -14,7 +14,7 @@
             "small pre-headline-text above main-headline"
         ]
     },
-    "iconClass": {
+    "headlineIcon": {
         "comments": [
             "icon-class for icon shown left/before headline"
         ]

package/src/documentation/generated/CmdSiteSearchPropertyDescriptions.json

@@ -21,7 +21,7 @@
     },
     "useFilters": {
         "comments": [
-            "toggle use of filters (must configured)"
+            "toggle use of filters (must be configured)"
         ]
     },
     "textLegend": {
@@ -75,5 +75,10 @@
         "comments": [
             "properties for CmdFakeSelect-component for filters"
         ]
+    },
+    "cmdIcon": {
+        "comments": [
+            "properties for CmdIcon-component for filters"
+        ]
     }
 }

package/src/documentation/generated/CmdUploadFormPropertyDescriptions.json

@@ -77,47 +77,47 @@
             ]
         }
     },
-    "deleteIconClass": {
+    "deleteIcon": {
         "comments": [
-            "set icon class for delete-icons"
+            "set icon for delete-icons"
         ]
     },
-    "fileUploadIconClass": {
+    "iconFileUpload": {
         "comments": [
-            "set icon class for file-upload-icon"
+            "set icon for file-upload-icon"
         ]
     },
-    "fileIconClass": {
+    "iconFile": {
         "comments": [
-            "set icon class for file-icon"
+            "set icon for file-icon"
         ]
     },
-    "invisibleIconClass": {
+    "iconInvisible": {
         "comments": [
-            "set icon class for invisible-icon"
+            "set icon for invisible-icon"
         ]
     },
-    "visibleIconClass": {
+    "iconVisible": {
         "comments": [
             "set icon class for visible-icon"
         ]
     },
-    "imageIconClass": {
+    "iconImage": {
         "comments": [
-            "set icon class for image-icon"
+            "set icon for image-icon"
         ]
     },
-    "uploadIconClass": {
+    "iconUpload": {
         "comments": [
-            "set icon class for upload-icon"
+            "set icon for upload-icon"
         ]
     },
-    "dragAndDropIconClass": {
+    "iconDragAndDrop": {
         "comments": [
-            "set icon class for drag-and-drop-icon"
+            "set icon for drag-and-drop-icon"
         ]
     },
-    "cancelIconClass": {
+    "iconCancel": {
         "comments": [
             "set icon class for cancel-icon"
         ]

package/src/mixins/FieldValidation.js

@@ -34,7 +34,8 @@ export default {
                     text: "Open help",
                     icon: {
                         iconClass: "icon-questionmark-circle",
-                        tooltip: "Open help in new tab"
+                        tooltip: "Open help in new tab",
+                        iconType: "auto"
                     }
                 }
             }
@@ -65,7 +66,8 @@ export default {
             default() {
                 return {
                   iconClass: "icon-error-circle",
-                  tooltip: "Error"
+                  tooltip: "Error",
+                  iconType: "auto"
                 }
             }
         } ,
@@ -78,7 +80,8 @@ export default {
             default() {
                 return {
                     iconClass: "icon-exclamation-circle",
-                    tooltip: "Warning"
+                    tooltip: "Warning",
+                    iconType: "auto"
                 }
             }
         },
@@ -92,7 +95,8 @@ export default {
             default() {
                 return {
                     iconClass: "icon-check-circle",
-                    tooltip: "Success"
+                    tooltip: "Success",
+                    iconType: "auto"
                 }
             }
         },
@@ -105,7 +109,8 @@ export default {
             default() {
                 return {
                     iconClass: "icon-info-circle",
-                    tooltip: "Info"
+                    tooltip: "Info",
+                    iconType: "auto"
                 }
             }
         },
@@ -116,7 +121,8 @@ export default {
             type: Object,
             default() {
                 return {
-                    iconClass: "icon-caps-lock-circle"
+                    iconClass: "icon-caps-lock-circle",
+                    iconType: "auto"
                 }
             }
         },
@@ -128,7 +134,8 @@ export default {
             default() {
                 return {
                     iconClass: "icon-visible",
-                    tooltip: "Show password"
+                    tooltip: "Show password",
+                    iconType: "auto"
                 }
             }
         },
@@ -139,7 +146,8 @@ export default {
             type: Object,
             default() {
                 return {
-                    iconClass: "icon-not-visible"
+                    iconClass: "icon-not-visible",
+                    iconType: "auto"
                 }
             }
         },
@@ -207,6 +215,23 @@ export default {
             }
             return this.helplink.icon.iconClass
         },
+        getStatusIconType() {
+            if (this.validationStatus !== "") {
+                if (!this.capsLockActivated) {
+                    if (this.validationStatus === "error") {
+                        return this.iconHasStateError.iconType
+                    } else if (this.validationStatus === "warning") {
+                        return this.iconHasStateWarning.iconType
+                    } else if (this.validationStatus === "success") {
+                        return this.iconHasStateSuccess.iconType
+                    }
+                    return this.iconHasStateInfo.iconType
+                } else {
+                    return this.iconCapsLock.iconType
+                }
+            }
+            return this.helplink.icon.iconType
+        },
         inputRequirements() {
             const standardRequirements = []
             // check if field is required