comand-component-library 3.1.57 → 3.1.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.57",
+  "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 -->
@@ -275,7 +275,7 @@ export default {
     computed: {
         // get the displayed option name
         optionName() {
-            // fake a normal checkbox
+            // fake a native selectbox
             if (this.type !== "checkboxOptions" && this.type !== "content" && this.modelValue) {
                 const result = this.selectData.find(option => option.value === this.modelValue)?.text
 
@@ -288,7 +288,7 @@ export default {
             // selectbox with checkbox-options
             else if (this.type === "checkboxOptions") {
                 if (this.modelValue.length === 1) {
-                    return this.selectData.find(option => option.value === this.modelValue[0])?.text
+                    return this.selectData.find(option => String(option.value) === String(this.modelValue[0]))?.text
                 } else if (this.modelValue.length > 1) {
                     return this.modelValue.length + " options selected"
                 }
@@ -382,7 +382,7 @@ export default {
             }
 
             this.showOptions = false
-            this.$emit('update:modelValue', optionValue);
+            this.$emit('update:modelValue', optionValue)
         },
         // check if a checkbox is changed for selectbox with checkboxes
         optionSelect(event) {
@@ -390,15 +390,15 @@ export default {
 
             let value = [...this.modelValue] // copy array from props
             if (event.target.checked) {
-                value.push(event.target.value); // attention: value will be transformed into string!
+                value.push(event.target.value) // attention: value will be transformed into string!
             } else {
-                value = value.filter(v => v !== event.target.value);
+                value = value.filter(item => item !== event.target.value && String(item) !== event.target.value)
             }
             if (this.$attrs.required !== undefined && !value.length) {
                 this.validationStatus = "error"
             }
 
-            this.$emit('update:modelValue', value);
+            this.$emit('update:modelValue', value)
         },
         closeOptions() {
             this.showOptions = false

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>
@@ -21,7 +21,7 @@ export default {
             if(this.address) {
                 const url = new URL("https://maps.google.de/maps?ie=UTF8&t=&z=17&iwloc=B&output=embed")
                 url.searchParams.set("hl", "de")
-                url.searchParams.set("q", [this.address.streetNo, this.address.zip, this.address.city, this.address.latitude, this.address.longitude, this.location].join(" ").trim())
+                url.searchParams.set("q", [this.address.streetNo, this.address.zip, this.address.city, this.address.latitude, this.address.longitude, this.address.location].join(" ").trim())
                 return url.href
             }
             return "https://maps.google.de/maps?ie=UTF8&t=&z=17&iwloc=B&output=embed"
@@ -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

@@ -15,7 +15,7 @@
                 type="text"
                 :name="cmdFormElementUsername.name"
                 :id="cmdFormElementUsername.id"
-                v-model:value="username"
+                v-model="username"
                 :inner-icon-class="cmdFormElementUsername.innerIconClass"
                 :labelText="cmdFormElementUsername.labelText"
                 :placeholder="cmdFormElementUsername.placeholder"
@@ -29,7 +29,7 @@
                 :name="cmdFormElementPassword.name"
                 :id="cmdFormElementPassword.id"
                 :inner-icon-class="cmdFormElementPassword.innerIconClass"
-                v-model:value="password"
+                v-model="password"
                 :labelText="cmdFormElementPassword.labelText"
                 :placeholder="cmdFormElementPassword.placeholder"
             />
@@ -274,13 +274,7 @@ export default {
          */
         cmdCustomHeadlineLoginForm: {
             type: Object,
-            default() {
-                return {
-                    show: true,
-                    text: "Login",
-                    level: 2
-                }
-            }
+            required: false
         },
         /**
          * properties for CmdCustomHeadline-component for send-login-form
@@ -290,8 +284,8 @@ export default {
             default() {
                 return {
                     show: true,
-                    text: "Send Login",
-                    level: 2
+                    headlineText: "Send Login",
+                    headlineLevel: 2
                 }
             }
         },

package/src/components/CmdOpeningHours.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-opening-hours">
         <!-- begin cmd-custom-headline -->
-        <CmdCustomHeadline v-if="cmdCustomHeadline" :headline="cmdCustomHeadline" />
+        <CmdCustomHeadline v-if="cmdCustomHeadline" v-bind="cmdCustomHeadline" />
         <!-- end cmd-custom-headline -->
 
         <!-- begin opening-status with link to detail-page -->

package/src/components/CmdSystemMessage.vue

@@ -3,7 +3,7 @@
         <div
             v-if="showSystemMessage"
             :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
-            :role="status === 'error' ? 'alert' : 'dialog'"
+            :role="validationStatus === 'error' ? 'alert' : 'dialog'"
         >
             <a
                 v-if="iconClose.show && iconClose.iconClass"

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 -->
@@ -19,10 +19,10 @@
             <!-- begin CmdCustomHeadline -->
             <CmdCustomHeadline
                v-bind="cmdCustomHeadline"
-               :headlineText="tabs[showTab].headline"
+               :headlineText="tabs[showTab].headlineText"
+               :headlineLevel="tabs[showTab].headlineLevel"
             />
             <!-- end CmdCustomHeadline -->
-
             <div v-html="tabs[showTab].htmlContent"></div>
         </div>
     </div>