comand-component-library 3.1.59 → 3.1.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.59",
+  "version": "3.1.60",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.44",
+    "comand-frontend-framework": "^3.2.46",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "vue": "^3.2.31",

package/src/App.vue

@@ -414,6 +414,15 @@
                                     id="inputfield-date"
                                     v-model="inputDate"
                                     :status="formElementStatus"/>
+                    <CmdFormElement element="input"
+                                    labelText="Label (inline) for inputfield (search) without search-button:"
+                                    :displayLabelInline="true"
+                                    type="search"
+                                    id="inputfield-search"
+                                    placeholder="Keyword(s)"
+                                    v-model="inputSearch"
+                                    :showSearchButton="false"
+                                    :status="formElementStatus"/>
                     <CmdFormElement element="input"
                                     labelText="Label (inline) for inputfield (search):"
                                     :displayLabelInline="true"
@@ -835,8 +844,10 @@
         <a id="section-tables"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Tables</h2>
-            <h3>Table as wide as its content</h3>
-            <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
+            <h3>Table as wide as its content (with caption)</h3>
+            <CmdTable :collapsible="true" :fullWidthOnDefault="false"  :userCanToggleWidth="true" :table-data="tableDataSmall"/>
+            <h3>Table as wide as its content (without caption)</h3>
+            <CmdTable :collapsible="true" :fullWidthOnDefault="false"  :userCanToggleWidth="true" :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
             <h3>Table as wide as possible</h3>
             <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
         </CmdWidthLimitationWrapper>

package/src/assets/data/table-small.json

@@ -1,6 +1,6 @@
 {
   "caption": {
-    "show": false,
+    "show": true,
     "text": "This is a caption for a small table"
   },
   "thead": [

package/src/components/CmdFakeSelect.vue

@@ -107,7 +107,7 @@
         <CmdSystemMessage
             v-if="getValidationMessage"
             :message="getValidationMessage"
-            :validatioStatus="validationStatus"
+            :validationStatus="validationStatus"
             :iconClose="{show: false}"
         />
         <!-- end CmdSystemMessage -->

package/src/components/CmdFormElement.vue

@@ -69,12 +69,12 @@
         <!-- begin show-password-icon -->
         <a v-if="$attrs.type === 'password'"
            href="#"
-           class="place-inside icon-visible"
+           :class="['place-inside', iconPasswordVisible.iconClass]"
            @mousedown.prevent="showPassword"
            @mouseup.prevent="hidePassword"
            @mouseleave.prevent="hidePassword"
            @click.prevent
-           title="Toggle password visibility">
+           :title="iconPasswordVisible.tooltip">
         </a>
         <!-- end show-password-icon -->
 
@@ -145,21 +145,23 @@
         <!-- end textarea -->
 
         <!-- begin searchfield -->
-        <span v-else-if="element === 'input' && $attrs.type === 'search'" class="search-field-wrapper flex-container no-gap">
-            <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :class="iconDelete.iconClass" :title="iconDelete.tooltip"/>
-            <input
-                v-bind="$attrs"
-                :id="id"
-                @input="onInput"
-                :maxlength="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
-                :value="modelValue"
-            />
+        <template v-else-if="element === 'input' && $attrs.type === 'search'">
+            <div class="search-field-wrapper flex-container no-gap">
+                <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :class="iconDelete.iconClass" :title="iconDelete.tooltip"/>
+                <input
+                    v-bind="$attrs"
+                    :id="id"
+                    @input="onInput"
+                    :maxlength="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
+                    :value="modelValue"
+                />
+            </div>
             <button v-if="showSearchButton" class="no-flex" type="button" :title="iconSearch.tooltip">
                 <span :class="iconSearch.iconClass"></span>
             </button>
-        </span>
-        <!-- end searchfield -->
+        </template>
     </label>
+    <!-- end searchfield -->
 
     <!-- begin button -->
     <button v-else class="button" v-bind="buttonAttrs">
@@ -193,8 +195,8 @@
                 <template v-for="(requirement, index) in inputRequirements" :key="index">
                     <dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
                     <dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
-                        <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'icon-check-circle' : 'icon-error-circle'"
-                              :title="requirement.valid(modelValue, $attrs) ? 'success' : 'error'"></span>
+                        <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
+                              :title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></span>
                     </dd>
                 </template>
             </dl>
@@ -243,7 +245,7 @@ export default {
     },
     props: {
         /**
-         * set value for v-model (must be names modelValue in vue3)
+         * set value for v-model (must be named modelValue in vue3 if default v-model should be used)
          */
         modelValue: {
             type: [String, Boolean, Array, Number],
@@ -521,13 +523,13 @@ export default {
 
             // set default-tooltip if customTooltip is not set
             if (this.validationStatus === 'error') {
-                return "An error occurred!"
+                return this.getMessage("cmdformelement.validationTooltip.an_error_occurred")
             } else if (this.validationStatus === 'success') {
-                return "This information is filled correctly!"
+                return this.getMessage("cmdformelement.validationTooltip.information_is_filled_correctly")
             } else if (this.capsLockActivated) {
-                return "Attention: Caps lock is activated!"
+                return this.getMessage("cmdformelement.validationTooltip.caps_lock_is_activated")
             }
-            return "Open field requirements!"
+            return this.getMessage("cmdformelement.validationTooltip.open_field_requirements")
         }
     },
     methods: {
@@ -599,14 +601,14 @@ export default {
             const password = passwordField.value
 
             // toggle input-type to make password visible
-            passwordField.nextElementSibling.classList.replace("icon-visible", "icon-not-visible")
+            passwordField.nextElementSibling.classList.replace(this.iconPasswordVisible.iconClass, this.iconPasswordInvisible.iconClass)
             passwordField.setAttribute("type", "text")
 
             // assign saved password back to field
             passwordField.setAttribute("value", password)
         },
         hidePassword() {
-            this.$refs.input.nextElementSibling.classList.replace("icon-not-visible", "icon-visible")
+            this.$refs.input.nextElementSibling.classList.replace(this.iconPasswordInvisible.iconClass, this.iconPasswordVisible.iconClass)
             this.$refs.input.setAttribute("type", "password")
         }
     },

package/src/components/CmdGoogleMaps.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cmd-google-maps responsive-wrapper">
+    <div class="cmd-google-maps">
         <iframe :src="locateAddress"></iframe>
     </div>
 </template>
@@ -34,6 +34,14 @@ export default {
 /* begin cmd-google-maps ---------------------------------------------------------------------------------------- */
 .cmd-google-maps {
     border: var(--default-border);
+
+    aspect-ratio: 16/9;
+
+    iframe {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 /* end cmd-google-maps ------------------------------------------------------------------------------------------ */

package/src/components/CmdLoginForm.vue

@@ -274,13 +274,7 @@ export default {
          */
         cmdCustomHeadlineLoginForm: {
             type: Object,
-            default() {
-                return {
-                    show: true,
-                    headlineText: "Login",
-                    headlineLevel: 2
-                }
-            }
+            required: false
         },
         /**
          * properties for CmdCustomHeadline-component for send-login-form

package/src/components/CmdTable.vue

@@ -1,11 +1,11 @@
 <template>
-    <div :class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth}]">
+    <div :class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption}]">
         <div v-if="collapsible || userCanToggleWidth" class="button-wrapper">
             <a v-if="userCanToggleWidth" class="button"
                href="#" @click.prevent="fullWidth = !fullWidth"
-               :title="fullWidth ? iconStretch.tooltip : iconShrink.tooltip"
+               :title="iconToggleWidth.tooltip"
             >
-                <span :class="fullWidth ? iconStretch.iconClass : iconShrink.iconClass"></span>
+                <span :class="iconToggleWidth.iconClass"></span>
             </a>
             <a v-if="collapsible" class="button"
                href="#" @click.prevent="showTableData = !showTableData"
@@ -14,34 +14,38 @@
                 <span :class="showTableData ? iconCollapse.iconClass : iconExpand.iconClass"></span>
             </a>
         </div>
-        <table :class="{'full-width': fullWidth}">
-            <caption :class="{hidden: !tableData.caption.show}">{{ tableData.caption.text }}</caption>
-            <thead>
+        <div class="inner-wrapper">
+            <table :class="{'full-width': fullWidth}">
+                <caption v-if="tableData.caption?.text || caption?.text" :class="{ hidden: hideCaption }">
+                    {{ caption?.text || tableData.caption?.text }}
+                </caption>
+                <thead>
                 <tr>
                     <th v-for="(tablehead, indexHead) in tableData.thead" :key="indexHead">
                         {{ tablehead }}
                     </th>
                 </tr>
-            </thead>
-            <transition name="fade">
-                <tbody v-show="showTableData" aria-expanded="true">
+                </thead>
+                <transition name="fade">
+                    <tbody v-show="showTableData" aria-expanded="true">
                     <tr :class="{'highlighted' : tableData.rowIndexHighlighted === indexRows}" v-for="(tablerows, indexRows) in tableData.tbody" :key="indexRows">
                         <td :class="{'highlighted' : tableData.columnIndexHighlighted === indexData}" v-for="(tabledata, indexData) in tablerows" :key="indexData">
                             {{ tabledata }}
                         </td>
                     </tr>
-                </tbody>
-            </transition>
-            <transition name="fade">
-                <tfoot v-if="tableData.tfoot && tableData.tfoot.length && showTableData" aria-expanded="true">
+                    </tbody>
+                </transition>
+                <transition name="fade">
+                    <tfoot v-if="tableData.tfoot && tableData.tfoot.length && showTableData" aria-expanded="true">
                     <tr>
                         <td :class="{'highlighted' : tableData.columnIndexHighlighted === indexFoot}" v-for="(tablefoot, indexFoot) in tableData.tfoot" :key="indexFoot">
                             {{ tablefoot }}
                         </td>
                     </tr>
-                </tfoot>
-            </transition>
-        </table>
+                    </tfoot>
+                </transition>
+            </table>
+        </div>
     </div>
 </template>
 
@@ -62,6 +66,15 @@ export default {
             type: Object,
             required: true
         },
+        /**
+         * caption for table (shown above table)
+         *
+         * @requiredForAccessibility: true
+         */
+        caption: {
+            type: Object,
+            required: false
+        },
         /**
          * activate if table should be collapsible
          */
@@ -116,12 +129,12 @@ export default {
          *
          * @requiredForAccessibility: partial
          */
-        iconShrink: {
+        iconToggleWidth: {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-single-arrow-left",
-                    tooltip: "Shrink table"
+                    iconClass: "icon-table",
+                    tooltip: "Toggle table width"
                 }
             }
         },
@@ -139,6 +152,19 @@ export default {
                 }
             }
         }
+    },
+    computed: {
+        hasCaption() {
+            if (this.hideCaption) {
+                return false
+            }
+
+            // check is a caption-text is defined
+            return this.tableData.caption?.text || this.caption?.text
+        },
+        hideCaption() {
+            return this.caption?.show === false || (this.caption?.show !== true && !this.tableData.caption?.show)
+        }
     }
 }
 </script>
@@ -147,9 +173,10 @@ export default {
 /* begin cmd-table-wrapper ---------------------------------------------------------------------------------------- */
 .cmd-table-wrapper {
     display: inline-flex;
+    flex-direction: column;
     max-width: 100%;
-    overflow-x: auto;
     margin-bottom: var(--default-margin);
+    gap: calc(var(--default-margin) / 2);
 
     &.collapsed, &.full-width {
         overflow: hidden;
@@ -162,7 +189,6 @@ export default {
     }
 
     > .button-wrapper {
-        position: absolute;
         right: 0;
         z-index: 100;
         gap: calc(var(--default-gap) / 2);
@@ -172,6 +198,7 @@ export default {
             padding: 0;
             min-width: 2rem;
             min-height: 2rem;
+            background: var(--pure-white);
 
             span[class*="icon"] {
                 color: var(--primary-color);
@@ -182,25 +209,39 @@ export default {
                 }
             }
         }
-
-        & + table {
-            margin-top: calc(var(--default-margin) / 2);
-        }
     }
 
-    table {
-        table-layout: fixed;
-        margin: 0;
+    .inner-wrapper {
+        overflow-x: auto;
+        width: 100%;
+
+        table {
+            table-layout: fixed;
+            margin: 0;
 
-        th {
-            a[class*='icon-'] {
-                &, &:hover, &:active, &:focus {
-                    font-size: 1rem;
-                    color: var(--pure-white);
+            th {
+                a[class*='icon-'] {
+                    &, &:hover, &:active, &:focus {
+                        font-size: 1rem;
+                        color: var(--pure-white);
+                    }
                 }
             }
         }
     }
+
+    &.has-caption {
+        flex-direction: row;
+
+        .button-wrapper {
+            position: absolute;
+        }
+
+        table {
+            margin-top: calc(var(--default-margin) / 2);
+        }
+    }
+
 }
 
 /* end cmd-table-wrapper ------------------------------------------------------------------------------------------ */

package/src/components/CmdTabs.vue

@@ -9,7 +9,7 @@
             </li>
         </ul>
         <template v-if="useSlot">
-            <div v-show="showTab === index" v-for="(tab, index) in tabs" :key="index" aria-live="assertive">
+            <div v-show="showTab === index" v-for="index in tabs.length" :key="index" aria-live="assertive">
                 <!-- begin slot-content -->
                 <slot :name="'tab-content-' + index"></slot>
                 <!-- end slot-content -->
@@ -23,7 +23,6 @@
                :headlineLevel="tabs[showTab].headlineLevel"
             />
             <!-- end CmdCustomHeadline -->
-
             <div v-html="tabs[showTab].htmlContent"></div>
         </div>
     </div>

package/src/components/CmdUploadForm.vue

@@ -1,11 +1,11 @@
 <template>
     <!-- begin advanced mode -->
     <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
-        <!-- begin CmdCustomHeadline -->
-        <CmdCustomHeadline v-if="cmdCustomHeadline"
-                           v-bind="cmdCustomHeadline"
+        <!-- begin CmdCustomHeadlineFieldset -->
+        <CmdCustomHeadline v-if="cmdCustomHeadlineFieldset"
+                           v-bind="cmdCustomHeadlineFieldset"
         />
-        <!-- end CmdCustomHeadline -->
+        <!-- end CmdCustomHeadlineFieldset -->
 
         <!-- begin CmdSystemMessage -->
         <CmdSystemMessage
@@ -24,12 +24,12 @@
 
         <div :class="['box drop-area', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
             <template v-if="!listOfFiles.length">
-                <h4 v-if="allowMultipleFileUploads">
+                <CmdCustomHeadline v-if="allowMultipleFileUploads" v-bind="cmdCustomHeadline">
                     {{ getMessage("cmduploadform.no_files_to_upload") }}
-                </h4>
-                <h4 v-else>
+                </CmdCustomHeadline>
+                <CmdCustomHeadline v-else v-bind="cmdCustomHeadline">
                     {{ getMessage("cmduploadform.no_file_to_upload") }}
-                </h4>
+                </CmdCustomHeadline>
             </template>
 
             <!-- begin total-upload information -->
@@ -150,7 +150,7 @@
                 </dt>
                 <dd>
                     <a
-                        :class="showListOfFileExtensions ? 'icon-not-visible' : 'icon-visible'"
+                        :class="showListOfFileExtensions ? 'invisibleIconClass' : 'visibleIconClass'"
                         href="#"
                         @click.prevent="showListOfFileExtensions = !showListOfFileExtensions"
                         :title="getMessage('cmduploadform.tooltip.toggle_list_of_allowed_file_types')"
@@ -175,7 +175,7 @@
                 :disabled="uploadInitiated"
                 @click="selectFiles()"
             >
-                <span class="icon-file-upload"></span>
+                <span :class="fileUploadIconClass"></span>
                 <span v-if="allowMultipleFileUploads">{{
                         getMessage("cmduploadform.labeltext.select_files")
                     }}</span>
@@ -226,14 +226,14 @@
                 "
                 @click="uploadFiles"
             >
-                <span class="icon-upload"></span>
+                <span :class="uploadIconClass"></span>
                 <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="icon-cancel"></span>
+                <span :class="cancelIconClass"></span>
                 <span>{{ getMessage("cmduploadform.buttontext.cancel") }}</span>
             </button>
         </div>
@@ -256,16 +256,16 @@
             <template v-if="enableDragAndDrop">
                 <template v-if="fileTypeImage">
                     <span>{{ getMessage("cmduploadform.select_image") }}</span>
-                    <span class="icon-image"></span>
+                    <span :class="imageIconClass"></span>
                 </template>
                 <template v-else>
                     <span>{{ getMessage("cmduploadform.select_file") }}</span>
-                    <span class="icon-file"></span>
+                    <span :class="fileUploadIconClass"></span>
                 </template>
             </template>
             <template v-else>
                 <span>{{ getMessage("cmduploadform.drag_and_drop_file_here") }}</span>
-                <span class="icon-drag-and-drop"></span>
+                <span :class="dragAndDropIconClass"></span>
             </template>
             <small>{{ getMessage("cmduploadform.max_upload_size") }} {{ formatSize(maxFileUploadSize) }}</small>
             <small>{{ getMessage("cmduploadform.allowed_file_types") }} {{ allowedFileExtensions }}</small>
@@ -331,13 +331,6 @@ export default {
         this.resetForm.systemMessageStatus = this.systemMessageStatus
     },
     props: {
-        /**
-         * set icon class for delete-icons
-         */
-        deleteIconClass: {
-            type: String,
-            default: "icon-delete"
-        },
         /**
          * toggle visibility of total upload (number of files, total size, total progress
          */
@@ -380,7 +373,7 @@ export default {
         /**
          * properties for CmdCustomHeadline-component
          */
-        cmdCustomHeadline: {
+        cmdCustomHeadlineFieldset: {
             type: Object,
             required: false
         },
@@ -445,6 +438,69 @@ export default {
         advancedMode: {
             type: Boolean,
             default: true
+        },
+        /**
+         * set icon class for delete-icons
+         */
+        deleteIconClass: {
+            type: String,
+            default: "icon-delete"
+        },
+        /**
+         * set icon class for file-upload-icon
+         */
+        fileUploadIconClass: {
+            type: String,
+            default: "icon-file-upload"
+        },
+        /**
+         * set icon class for file-icon
+         */
+        fileIconClass: {
+            type: String,
+            default: "icon-file"
+        },
+        /**
+         * set icon class for invisible-icon
+         */
+        invisibleIconClass: {
+            type: String,
+            default: "icon-not-visible"
+        },
+        /**
+         * set icon class for visible-icon
+         */
+        visibleIconClass: {
+            type: String,
+            default: "icon-visible"
+        },
+        /**
+         * set icon class for image-icon
+         */
+        imageIconClass: {
+            type: String,
+            default: "icon-image"
+        },
+        /**
+         * set icon class for upload-icon
+         */
+        uploadIconClass: {
+            type: String,
+            default: "icon-upload"
+        },
+        /**
+         * set icon class for drag-and-drop-icon
+         */
+        dragAndDropIconClass: {
+            type: String,
+            default: "icon-drag-and-drop"
+        },
+        /**
+         * set icon class for cancel-icon
+         */
+        cancelIconClass: {
+            type: String,
+            default: "icon-cancel"
         }
     },
     computed: {

package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js

@@ -2,7 +2,11 @@ export default {
   data() {
     return {
       defaultMessageProperties: {
-        "cmdfakeselect.headline.requirement_for_input": "Requirement for input"
+        "cmdfakeselect.headline.requirement_for_input": "Requirement for input",
+        "cmdfakeselect.linktext.deselect_all_options": "Deselect all options",
+        "cmdfakeselect.linktext.select_all_options": "Select all options",
+        "cmdfakeselect.headline.": "An option is selected",
+
       }
     }
   }

package/src/mixins/CmdFormElement/DefaultMessageProperties.js

@@ -2,7 +2,11 @@ export default {
   data() {
     return {
       defaultMessageProperties: {
-        "cmdformelement.headline.requirement_for_input": "Requirement for input"
+        "cmdformelement.headline.requirement_for_input": "Requirement for input",
+        "cmdformelement.validationTooltip.an_error_occurred": "An error occurred!",
+        "cmdformelement.validationTooltip.information_is_filled_correctly": "This information is filled correctly!",
+        "cmdformelement.validationTooltip.caps_lock_is_activated": "Attention: Caps lock is activated!",
+        "cmdformelement.validationTooltip.open_field_requirements": "Open field requirements!"
       }
     }
   }