comand-component-library 3.1.70 → 3.1.73

package/src/assets/data/list-of-links.json

@@ -4,7 +4,6 @@
     "type": "href",
     "text": "",
     "path": "#",
-    "target": "",
     "tooltip": "Link without text, but tooltip"
   },
   {

package/src/assets/styles/global-styles.scss

@@ -174,6 +174,32 @@ body.avoid-scrolling {
 
 /* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
 .cmd-form-element, .cmd-fake-select {
+
+  &.has-state, & + .cmd-tooltip {
+    .label-text {
+      span, sup {
+        color: var(--status-color);
+      }
+    }
+
+    &.error {
+      --status-color: var(--error-color);
+    }
+
+    &.warning {
+      --status-color: var(--warning-color);
+    }
+
+
+    &.success {
+      --status-color: var(--success-color);
+    }
+
+    &.info {
+      --status-color: var(--info-color);
+    }
+  }
+
   & + .cmd-tooltip {
     border-color: var(--status-color);
 

package/src/components/CmdBox.vue

@@ -3,12 +3,17 @@
     <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically}]">
         <template v-if="useSlots?.includes('header')">
             <!-- begin collapsible header with slot -->
-            <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
+            <div v-if="collapsible" class="box-header">
                 <!-- begin slot 'header' -->
                 <slot name="header"></slot>
                 <!-- end slot 'header' -->
-                <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
-            </a>
+                <a href="#"
+                   class="toggle-icon"
+                   :title="open ? iconOpen.tooltip : iconClosed.tooltip"
+                   @click.prevent="toggleContentVisibility">
+                    <span :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+                </a>
+            </div>
             <!-- end collapsible header with slot -->
 
             <!-- begin default header with slot -->
@@ -309,8 +314,8 @@ export default {
                 margin-bottom: 0;
             }
 
-            &:last-child {
-                margin-top: auto;
+            &:not(.open) {
+                justify-content: flex-start;
             }
         }
 
@@ -330,9 +335,10 @@ export default {
 
             * {
                 color: var(--pure-white);
+                margin-bottom: 0;
             }
 
-            > [class*="icon"]:last-child {
+            > .toggle-icon, .toggle-icon > [class*="icon"] {
                 font-size: 1rem;
                 margin-left: auto;
             }

package/src/components/CmdCompanyLogo.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="cmd-company-logo">
-        <router-link v-if="link.type === 'router'" :href="link.path" :title="link.tooltip">
+        <router-link v-if="link.type === 'router'" :to="link.path" :title="link.tooltip">
             <img :src="pathCurrentLogo" :alt="altText"/>
         </router-link>
-        <a v-else :to="link.path" :title="link.tooltip">
-            <img :src="pathCurrentLogo" :alt="altText"/>
+        <a v-else :href="link.path" :title="link.tooltip">
+            <img :src="pathCurrentLogo" :alt="altText" />
         </a>
     </div>
 </template>

package/src/components/CmdCookieDisclaimer.vue

@@ -21,8 +21,15 @@
                             :key="index"
                     >
                         <template v-slot:header>
-                            <!-- begin CmdSwitchButton -->
-                            <!-- end CmdSwitchButton -->
+                            <!-- begin CmdFormElement -->
+                            <CmdFormElement
+                                element="input"
+                                type="checkbox"
+                                labelText="Google Analytics"
+                                id="google-analytics"
+                                :toggleSwitch="true"
+                            />
+                            <!-- end CmdFormElement -->
                         </template>
                         <template v-slot:body>
                             <p v-if="cookie.description">{{ cookie.description }}</p>
@@ -49,8 +56,15 @@
                             :key="index"
                     >
                         <template v-slot:header>
-                            <!-- begin CmdSwitchButton -->
-                            <!-- end CmdSwitchButton -->
+                            <!-- begin CmdFormElement -->
+                            <CmdFormElement
+                                element="input"
+                                type="checkbox"
+                                labelText="Google Analytics"
+                                id="google-analytics"
+                                :toggleSwitch="true"
+                            />
+                            <!-- end CmdFormElement -->
                         </template>
                         <template v-slot:body>
                             <p v-if="cookie.description">{{ cookie.description }}</p>
@@ -92,12 +106,14 @@
 // import components
 import CmdBox from "./CmdBox"
 import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdFormElement from "./CmdFormElement"
 
 export default {
     name: "CmdCookieDisclaimer",
     components: {
         CmdBox,
         CmdCustomHeadline,
+        CmdFormElement
     },
     data() {
         return {

package/src/components/CmdFakeSelect.vue

@@ -5,7 +5,8 @@
             'cmd-fake-select label',
             {
                 color: type === 'color',
-                'has-state': validationStatus && validationStatus !== 'none'
+                'has-state': validationStatus && validationStatus !== 'none',
+                disabled: $attrs.disabled
             }
         ]"
         :aria-labelledby="labelId"
@@ -229,7 +230,7 @@ export default {
         /**
          * status (i.e. for validation)
          *
-         * @allowedValues: error, success, disabled
+         * @allowedValues: error, warning, success, info
          * @affectsStyling: true
          */
         status: {
@@ -372,7 +373,7 @@ export default {
             }
         },
         toggleOptions() {
-            if (this.status !== 'disabled') {
+            if (this.$attrs.disabled !== 'disabled') {
                 this.showOptions = !this.showOptions
             }
         },
@@ -460,10 +461,6 @@ export default {
 .cmd-fake-select {
     align-self: flex-end;
 
-    & + .cmd-tooltip {
-        border-color: var(--status-color);
-    }
-
     > span:first-child {
         a {
             align-self: flex-end;
@@ -550,8 +547,16 @@ export default {
             &.active {
                 background: var(--light-gray);
 
+                span {
+                    color: var(--text-color);
+                }
+
                 &:hover, &:active, &:focus {
                     background: var(--primary-color);
+
+                    span {
+                        color: var(--pure-white);
+                    }
                 }
             }
         }
@@ -604,21 +609,21 @@ export default {
         }
     }
 
-    &.error {
+    &.has-state {
         > ul {
             > li {
                 > a {
-                    border-color: var(--error-color);
+                    border-color: var(--status-color);
 
                     > span, span[class*="icon-"] {
-                        color: var(--error-color);
+                        color: var(--status-color);
                     }
 
                     &:hover, &:active, &:focus {
                         background: var(--pure-white);
 
                         span {
-                            color: var(--error-color);
+                            color: var(--status-color);
                         }
                     }
                 }
@@ -668,7 +673,7 @@ export default {
 
                 > span:first-child {
                     width: 1.5rem;
-                    aspect-ratio: 1;
+                    aspect-ratio: 1/1;
                     border: var(--default-border);
 
                     &[style=""] {

package/src/components/CmdFormElement.vue

@@ -21,6 +21,46 @@
         <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
               :class="['label-text', !showLabel ? 'hidden' : undefined]">
             <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+
+            <!-- begin CmdTooltip -->
+    <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
+        <!-- begin CmdSystemMessage -->
+        <CmdSystemMessage
+            v-if="getValidationMessage"
+            :message="getValidationMessage"
+            :validation-status="validationStatus"
+            :iconClose="{show: false}"
+        />
+        <!-- end CmdSystemMessage -->
+
+        <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
+            <!-- begin list of requirements -->
+            <h6>
+                {{ getMessage("cmdformelement.headline.requirements_for_input") }}<br/>
+                "{{ labelText }}"
+            </h6>
+            <dl class="list-of-requirements">
+                <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) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
+                              :title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></span>
+                    </dd>
+                </template>
+            </dl>
+            <!-- end list of requirements -->
+
+            <!-- begin helplink -->
+            <hr v-if="helplink?.show"/>
+            <a v-if="helplink?.show && helplink?.url" :href="helplink.url" :target="helplink.target" @click.prevent>
+                <span v-if="helplink.icon?.iconClass" :class="helplink.icon?.iconClass" :title="helplink.icon?.tooltip"></span>
+                <span v-if="helplink.text">{{ helplink.text }}</span>
+            </a>
+            <!-- end helplink -->
+        </template>
+    </CmdTooltip>
+            <!-- end CmdTooltip -->
+
             <a v-if="$attrs.required || inputRequirements.length"
                 href="#"
                 @click.prevent
@@ -89,6 +129,7 @@
                         :value="inputValue"
                         :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
                         :id="labelId"
+                        :disabled="$attrs.disabled"
                         :aria-invalid="validationStatus === 'error'"
                     />
                     <span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
@@ -103,6 +144,7 @@
                            :value="inputValue"
                            :class="{inputClass, validationStatus}"
                            :id="labelId"
+                           :disabled="$attrs.disabled"
                            :aria-invalid="validationStatus === 'error'"
                     />
                     <span class="label-text">{{ onLabel }}</span>
@@ -144,19 +186,19 @@
 
         <!-- begin searchfield -->
         <template v-else-if="element === 'input' && $attrs.type === 'search'">
-            <div class="search-field-wrapper flex-container no-gap">
+            <span class="search-field-wrapper flex-container no-gap">
                 <input
                     v-bind="elementAttributes"
                     :id="labelId"
                     @input="onInput"
-                    :maxlength="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
+                    :maxlength="getMaxLength()"
                     :value="modelValue"
                 />
-                <a v-if="showSearchButton" href="#" class="button no-flex" :title="iconSearch.tooltip" @click.prevent="executeSearch">
+                <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]" :title="iconSearch.tooltip" @click.prevent="executeSearch">
                     <span :class="iconSearch.iconClass"></span>
                 </a>
                 <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :class="iconDelete.iconClass" :title="iconDelete.tooltip"></a>
-            </div>
+            </span>
         </template>
     </label>
     <!-- end searchfield -->
@@ -171,45 +213,6 @@
         <span v-if="nativeButton?.icon?.show && nativeButton?.icon?.position === 'after'" :class="nativeButton?.icon?.iconClass"></span>
     </button>
     <!-- end button -->
-
-    <!-- begin CmdTooltip -->
-    <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
-        <!-- begin CmdSystemMessage -->
-        <CmdSystemMessage
-            v-if="getValidationMessage"
-            :message="getValidationMessage"
-            :validation-status="validationStatus"
-            :iconClose="{show: false}"
-        />
-        <!-- end CmdSystemMessage -->
-
-        <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
-            <!-- begin list of requirements -->
-            <h6>
-                {{ getMessage("cmdformelement.headline.requirements_for_input") }}<br/>
-                "{{ labelText }}"
-            </h6>
-            <dl class="list-of-requirements">
-                <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) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
-                              :title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></span>
-                    </dd>
-                </template>
-            </dl>
-            <!-- end list of requirements -->
-
-            <!-- begin helplink -->
-            <hr v-if="helplink?.show"/>
-            <a v-if="helplink?.show && helplink?.url" :href="helplink.url" :target="helplink.target" @click.prevent>
-                <span v-if="helplink.icon?.iconClass" :class="helplink.icon?.iconClass" :title="helplink.icon?.tooltip"></span>
-                <span v-if="helplink.text">{{ helplink.text }}</span>
-            </a>
-            <!-- end helplink -->
-        </template>
-    </CmdTooltip>
-    <!-- end CmdTooltip -->
 </template>
 
 <script>
@@ -218,7 +221,7 @@ import {createUuid} from "../utils/common.js"
 
 // import mixins
 import I18n from "../mixins/I18n"
-import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
+import DefaultMessageProperties from "../mixins/CmdFormElement/DefaultMessageProperties"
 import FieldValidation from "../mixins/FieldValidation.js"
 import Tooltip from "../mixins/Tooltip.js"
 
@@ -548,14 +551,33 @@ export default {
                 }
             }
         },
-        toggleSwitchUncheckedIconClass: {
-            type: String,
-            default: "icon-cancel-circle"
+        /**
+         * toggle if toggle-switch shows icons for checked/unchecked-status
+         */
+        useIconsForToggleSwitch: {
+            type: Boolean,
+            default: false
         },
+        /**
+         * icon for toggle-switch checked
+         *
+         * toggle-switch-property must be activated
+         * use-icons-for-toggle-switch-property must be activated
+         */
         toggleSwitchCheckedIconClass: {
             type: String,
             default: "icon-check-circle"
         },
+        /**
+         * icon for toggle-switch unchecked
+         *
+         * toggle-switch-property must be activated
+         * use-icons-for-toggle-switch-property must be activated
+         */
+        toggleSwitchUncheckedIconClass: {
+            type: String,
+            default: "icon-cancel-circle"
+        },
         /**
          * icon to toggle password-visibility
          *
@@ -622,8 +644,6 @@ export default {
             }
         },
         isChecked() {
-            console.log("this.modelValue", this.modelValue)
-            console.log("typeof this.modelValue", typeof this.modelValue)
             if (typeof this.modelValue === "boolean") {
                 return this.modelValue
             }
@@ -669,8 +689,9 @@ export default {
             }
             return "label-" + createUuid()
         },
+        // toggle icons for toggle-switch
         toggleSwitchIconClass() {
-            if(this.toggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
+            if(this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
                 if(this.isChecked) {
                     return this.toggleSwitchCheckedIconClass
                 }
@@ -683,15 +704,15 @@ export default {
         getDomElement() {
             return this.$refs.label
         },
+        // define max-length for different input-types
         getMaxLength() {
             if (this.$attrs.element === 'textarea') {
                 return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 5000
             }
 
-            if (this.$attrs.type !== 'file') {
+            if (this.$attrs.type !== 'file' && this.$attrs.type !== 'number' && this.$attrs.type !== 'date') {
                 return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 255
             }
-
             return null
         },
         onBlur(event) {
@@ -782,35 +803,22 @@ export default {
 </script>
 
 <style lang="scss">
+/* begin cmd-form-element ------------------------------------------------------------------------------------------ */
 .cmd-form-element {
-
-
-
-
-
-
     input + .place-inside[class*="icon"] {
         left: auto;
         right: .5rem
     }
 
-    &.has-state, & + .cmd-tooltip {
-        &.error {
-            --status-color: var(--error-color);
-        }
-
-        &.warning {
-            --status-color: var(--warning-color);
-        }
-
-        &.success {
-            --status-color: var(--success-color);
-        }
-
-        &.info {
-            --status-color: var(--info-color);
-        }
+    .cmd-tooltip {
+        position: absolute;
+        right: 0;
+        transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
+        left: auto !important;
+        top: 0 !important;
+    }
 
+    &.has-state, & + .cmd-tooltip {
         ::placeholder {
             color: var(--status-color);
         }
@@ -824,13 +832,9 @@ export default {
         }
     }
 
-    & + .cmd-tooltip {
-        border-color: var(--status-color);
-    }
-
     &.inline {
         & > span {
-            & > a {
+            & > a:not(.button) {
                 margin-left: calc(var(--default-margin) / 2);
             }
         }
@@ -856,7 +860,6 @@ export default {
 
     .place-inside {
         + .search-field-wrapper {
-
             input {
                 padding-left: calc(var(--default-padding) * 3);
             }
@@ -902,6 +905,7 @@ export default {
             }
         }
     }
-    /* end toggle-switch ------------------------------------------------------------------------------------------ */
+    /* end toggle-switch */
 }
+/* end cmd-form-element------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdInputGroup.vue

@@ -1,18 +1,24 @@
 <template>
-    <div :class="['cmd-input-group', {inline: labelInline, 'multiple-switch': multipleSwitch}]">
-        <span :class="['label', { hidden: !showLabel}]" :id="labelId" :aria-labelledby="labelId">{{ labelText }}</span>
+    <div :class="['cmd-input-group label', {inline: labelInline, 'multiple-switch': multipleSwitch, disabled: disabled}]">
+        <span :class="['label-text', { hidden: !showLabel}]" :id="labelId" :aria-labelledby="labelId">
+             <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+        </span>
         <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
             <label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id">
-                <input :type="inputTypes"
-                       :id="inputElement.id"
-                       :name="inputElement.name"
-                       :value="inputElement.value"
-                       v-model="inputValue"
+                <input
+                    :type="inputTypes"
+                   :id="inputElement.id"
+                   :name="inputElement.name"
+                   :value="inputElement.value"
+                   v-model="inputValue"
+                   :disabled="disabled"
+                   :class="{'replace-input-type': replaceInputType}"
                 />
                 <span v-if="multipleSwitch && inputElement.iconClass" :class="inputElement.iconClass"></span>
                 <span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
             </label>
         </span>
+
         <!-- begin useSlot -->
         <div v-else class="flex-container no-flex">
             <!-- begin slot -->
@@ -58,6 +64,15 @@ export default {
             type: String,
             default: "radio"
         },
+        /**
+         * for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)
+         *
+         * @affectsStyling: true
+         */
+        replaceInputType: {
+            type: Boolean,
+            default: false
+        },
         /**
          * activate if input-elements should be given by slot
          */
@@ -105,6 +120,15 @@ export default {
         stretchHorizontally: {
             type: Boolean,
             default: false
+        },
+        /**
+         * define disabled-property to set disabled-style
+         *
+         * component cannot handle native disabled-attribute, because it is no native form-element
+         */
+        disabled: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {

package/src/components/CmdProgressBar.vue

@@ -1,8 +1,8 @@
 <template>
     <label class="cmd-progressbar" :for="id">
-        <span :class="{hidden: !showLabel}">{{ labelText }}</span>
+        <span :class="['label-text', {hidden: !showLabel}]">{{ labelText }}</span>
         <span class="progressbar">
-            <span v-if="showLoadingStatus">{{ loadingStatus }}%</span><!-- do not place inside progress-tag (will not be displayed then) -->
+            <span v-if="showLoadingStatus">{{ loadingStatus }} %</span><!-- do not place inside progress-tag (will not be displayed then) -->
             <progress v-bind="$attrs" :id="id" :value="loadingStatus"></progress>
         </span>
     </label>

package/src/components/CmdTable.vue

@@ -133,7 +133,7 @@ export default {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-table",
+                    iconClass: "icon-toggle-table-width",
                     tooltip: "Toggle table width"
                 }
             }