comand-component-library 3.1.70 → 3.1.71

package/src/components/CmdFormElement.vue

@@ -144,19 +144,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">
                     <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 -->
@@ -218,7 +218,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 +548,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 +641,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 +686,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 +701,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 +800,14 @@ 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);
-        }
-
         ::placeholder {
             color: var(--status-color);
         }
@@ -824,13 +821,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 +849,6 @@ export default {
 
     .place-inside {
         + .search-field-wrapper {
-
             input {
                 padding-left: calc(var(--default-padding) * 3);
             }
@@ -902,6 +894,7 @@ export default {
             }
         }
     }
-    /* end toggle-switch ------------------------------------------------------------------------------------------ */
+    /* end toggle-switch */
 }
+/* end cmd-form-element------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdInputGroup.vue

@@ -1,6 +1,8 @@
 <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}]">
+        <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"
@@ -8,6 +10,7 @@
                        :name="inputElement.name"
                        :value="inputElement.value"
                        v-model="inputValue"
+                       :class="{'replace-input-type': replaceInputType}"
                 />
                 <span v-if="multipleSwitch && inputElement.iconClass" :class="inputElement.iconClass"></span>
                 <span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
@@ -58,6 +61,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
          */

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"
                 }
             }

package/src/index.js

@@ -20,10 +20,10 @@ export { default as CmdFormFilters } from '@/components/CmdFormFilters'
 export { default as CmdGoogleMaps } from '@/components/CmdGoogleMaps'
 export { default as CmdImageGallery } from '@/components/CmdImageGallery'
 export { default as CmdImageZoom } from '@/components/CmdImageZoom'
+export { default as CmdInputGroup } from '@/components/CmdInputGroup'
 export { default as CmdListOfLinks } from '@/components/CmdListOfLinks'
 export { default as CmdLoginForm } from '@/components/CmdLoginForm'
 export { default as CmdMainNavigation } from '@/components/CmdMainNavigation'
-export { default as CmdMultipleSwitch } from '@/components/CmdMultipleSwitch'
 export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultistepFormProgressBar'
 export { default as CmdOpeningHours } from '@/components/CmdOpeningHours'
 export { default as CmdPager } from '@/components/CmdPager'

package/src/mixins/CmdFormElement/DefaultMessageProperties.js

@@ -2,7 +2,7 @@ export default {
   data() {
     return {
       defaultMessageProperties: {
-        "cmdformelement.headline.requirement_for_input": "Requirement for input",
+        "cmdformelement.headline.requirements_for_input": "Requirements 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!",

package/src/mixins/FieldValidation.js

@@ -116,7 +116,7 @@ export default {
             type: Object,
             default() {
                 return {
-                    iconClass: "icon-caps-lock"
+                    iconClass: "icon-caps-lock-circle"
                 }
             }
         },

package/src/mixins/GlobalDefaultMessageProperties.js

@@ -1,9 +1,8 @@
 export default {
     data() {
         return {
-            defaultMessageProperties: {
+            fieldValidationDefaultMessageProperties: {
                 "cmdfieldvalidation.open_detailed_help": "Open detailed help!",
-
                 "cmdfieldvalidation.information_not_filled_correctly": "This information is not filled correctly!",
                 "cmdfieldvalidation.information_filled_correctly": "This information is filled correctly!",
                 "cmdfieldvalidation.caps_lock_is_activated": "Attention: Caps lock is activated!",

package/src/mixins/I18n.js

@@ -42,15 +42,25 @@ export default {
       }
       let message =
         messages[key] ||
-        (this.defaultMessageProperties && this.defaultMessageProperties[key]) ||
+        this.getDefaultMessageProperty(key) ||
         key
       if (typeof message === "function") {
-        return message.call(this, params || [])
+        return message.call(this, params || []);
       }
       if (Array.isArray(params) && params.length) {
         params.forEach((param, index) => (message = message.replace("{" + index + "}", param)))
       }
       return message
+    },
+    getDefaultMessageProperty(key) {
+      if (this.defaultMessageProperties && this.defaultMessageProperties[key]) {
+        return this.defaultMessageProperties[key]
+      }
+      const propertyKey = Object.keys(this).find(p => p.slice(-24) === "DefaultMessageProperties")
+      if (propertyKey && this[propertyKey]?.[key]) {
+        return this[propertyKey][key]
+      }
+      return null
     }
   }
 }