comand-component-library 3.1.40 → 3.1.44

package/src/assets/data/fake-select-colors.json

@@ -1,22 +1,22 @@
 [
   {
-    "hexCode": "#ffffff",
-    "colorName": "White"
+    "value": "#ffffff",
+    "text": "White"
   },
   {
-    "hexCode": "#ff0000",
-    "colorName": "Red"
+    "value": "#ff0000",
+    "text": "Red"
   },
   {
-    "hexCode": "#00ff00",
-    "colorName": "Green"
+    "value": "#00ff00",
+    "text": "Green"
   },
   {
-    "hexCode": "#0000ff",
-    "colorName": "Blue"
+    "value": "#0000ff",
+    "text": "Blue"
   },
   {
-    "hexCode": "#000000",
-    "colorName": "Black"
+    "value": "#000000",
+    "text": "Black"
   }
 ]

package/src/assets/data/fake-select-countries.json

@@ -1,37 +1,30 @@
 [
   {
-    "isoCode": "cn",
-    "countryName": "China",
-    "flagPath": "/media/images/flags/flag-cn.svg"
+    "value": "cn",
+    "text": "China"
   },
   {
-    "isoCode": "de",
-    "countryName": "Germany",
-    "flagPath": "/media/images/flags/flag-de.svg"
+    "value": "de",
+    "text": "Germany"
   },
   {
-    "isoCode": "en",
-    "countryName": "United Kingdom",
-    "flagPath": "/media/images/flags/flag-en.svg"
+    "value": "en",
+    "text": "United Kingdom"
   },
   {
-    "isoCode": "es",
-    "countryName": "Spain",
-    "flagPath": "/media/images/flags/flag-es.svg"
+    "value": "es",
+    "text": "Spain"
   },
   {
-    "isoCode": "fr",
-    "countryName": "France",
-    "flagPath": "/media/images/flags/flag-fr.svg"
+    "value": "fr",
+    "text": "France"
   },
   {
-    "isoCode": "it",
-    "countryName": "Italy",
-    "flagPath": "/media/images/flags/flag-it.svg"
+    "value": "it",
+    "text": "Italy"
   },
   {
-    "isoCode": "ru",
-    "countryName": "Russia",
-    "flagPath": "/media/images/flags/flag-ru.svg"
+    "value": "ru",
+    "text": "Russia"
   }
 ]

package/src/assets/data/fake-select-options-with-icons.json

@@ -0,0 +1,23 @@
+[
+  {
+    "text": "Optionname 1",
+    "value": "1",
+    "icon": {
+      "iconClass": "icon-home"
+    }
+  },
+  {
+    "text": "Optionname 2",
+    "value": "2",
+    "icon": {
+      "iconClass": "icon-globe"
+    }
+  },
+  {
+    "text": "Optionname 3",
+    "value": "3",
+    "icon": {
+      "iconClass": "icon-user-profile"
+    }
+  }
+]

package/src/assets/data/fake-select-options.json

@@ -1,14 +1,14 @@
 [
   {
-    "optionName": "Optionname 1",
-    "optionValue": "Option 1"
+    "text": "Optionname 1",
+    "value": "1"
   },
   {
-    "optionName": "Optionname 2",
-    "optionValue": "Option 2"
+    "text": "Optionname 2",
+    "value": "2"
   },
   {
-    "optionName": "Optionname 3",
-    "optionValue": "Option 3"
+    "text": "Optionname 3",
+    "value": "3"
   }
 ]

package/src/assets/data/select-options.json

@@ -0,0 +1,14 @@
+[
+  {
+    "text": "Optionname 1",
+    "value": "1"
+  },
+  {
+    "text": "Optionname 2",
+    "value": "2"
+  },
+  {
+    "text": "Optionname 3",
+    "value": "3"
+  }
+]

package/src/components/CmdFakeSelect.vue

@@ -4,42 +4,56 @@
         <ul :class="{'open': showOptions}" @clickout="closeOptions">
             <li>
                 <a href="#" @click.prevent="toggleOptions">
-                    <img v-if="type === 'country' && miscInfo" :src="pathFlag(miscInfo)" :alt="miscInfo" class="flag" :class="miscInfo"/>
-                    <span v-else-if="type === 'color' && miscInfo" class="color"
-                          :style="'background: ' + miscInfo"></span>
+                    <img v-if="type === 'country'" :src="pathFlag(optionCountry)" :alt="optionCountry" class="flag" :class="optionCountry"/>
+                    <span v-else-if="type === 'color'" class="color"
+                          :style="'background: ' + optionColor"></span>
+                    <span v-if="optionIcon" :class="optionIcon"></span>
                     <span>{{ optionName }}</span>
                     <span :class="dropdownIconClass"></span>
                 </a>
-                <ul v-if="type === 'filterList' && showOptions" class="filter-list">
+
+                <!-- begin default dropdown (incl. optional icon) -->
+                <ul v-if="type === 'default' && showOptions">
                     <li v-for="(option, index) in selectData" :key="index">
-                        <label :for="'option-' + (index + 1)">
-                            <input type="checkbox" :value="option.optionValue" @change="optionSelect"
-                                   :checked="value.includes(`${option.optionValue}`)" :id="'option-' + (index + 1)"/>
-                            <span>{{ option.optionName }}</span>
-                        </label>
-                    </li>
-                </ul>
-                <ul v-else-if="type === 'country' && showOptions">
-                    <li v-for="(country, index) in selectData" :key="index">
-                        <a href="#"
-                           @click.prevent="selectOption(country.countryName, country.isoCode)">
-                            <img class="flag" :src="pathFlag(country.isoCode)"
-                                 :alt="country.countryName"/><span>{{ country.countryName }}</span>
+                        <a href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
+                            <span v-if="option.icon?.iconClass" :class="option.icon.iconClass"></span>
+                            <span>{{ option.text }}</span>
                         </a>
                     </li>
                 </ul>
-                <ul v-else-if="type === 'color' && showOptions">
-                    <li v-for="(color, index) in selectData" :key="index">
-                        <a href="#" @click.prevent="selectOption(color.colorName, color.hexCode)">
-                            <span class="color" :style="'background: ' + color.hexCode"></span><span>{{
-                                color.colorName
+                <!-- end default dropdown (incl. optional icon) -->
+
+                <!-- begin dropdown with checkboxes -->
+                <ul v-else-if="type !== 'default' && type !== 'content' && showOptions" class="checkbox-options">
+                    <li v-for="(option, index) in selectData" :key="index">
+                        <label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : value.includes(`${option.value}`)}">
+                            <input type="checkbox" :value="option.value" @change="optionSelect"
+                                   :checked="value.includes(`${option.value}`)" :id="'option-' + (index + 1)"/>
+                            <span>{{ option.text }}</span>
+                        </label>
+
+                        <a v-else-if="type === 'country'" href="#"
+                           @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
+                            <img class="flag" :src="pathFlag(option.value)"
+                                 :alt="option.text"/>
+                            <span>{{ option.text }}</span>
+                        </a>
+
+                        <a v-else href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
+                            <span class="color" :style="'background: ' + option.value"></span>
+                            <span>{{
+                                option.text
                             }}</span>
                         </a>
                     </li>
                 </ul>
-                <template v-else-if="!type && showOptions">
+                <!-- end dropdown with checkboxes -->
+
+                <!-- begin dropdown with slot -->
+                <template v-else-if="type === 'content' && showOptions">
                     <slot></slot>
                 </template>
+                <!-- end dropdown with slot -->
             </li>
         </ul>
     </div>
@@ -48,6 +62,11 @@
 <script>
 export default {
     name: 'CmdFakeSelect',
+    data() {
+        return {
+            showOptions: false
+        }
+    },
     props: {
         /**
          * set different default selectbox-types for
@@ -56,7 +75,7 @@ export default {
          */
         type: {
             type: String,
-            required: false
+            default: "default"
         },
         /**
          * set default value
@@ -110,6 +129,58 @@ export default {
             default: "/media/images/flags"
         }
     },
+    computed: {
+        // get the displayed option name
+        optionName() {
+            // fake a normal checkbox
+            if (this.type !== "checkboxOptions" && this.type !== "content" && this.value) {
+                const result = this.selectData.find(option => option.value === this.value)?.text
+
+                // if find() returns some data, return this data
+                if (result) {
+                    return result
+                }
+            }
+
+            // selectbox with checkbox-options
+            else if (this.type === "checkboxOptions") {
+                if (this.value.length === 1) {
+                    return this.selectData.find(option => option.value === this.value[0])?.text
+                } else if (this.value.length > 1) {
+                    return this.value.length + " options selected"
+                }
+            }
+
+            // if nothing is selected return the set default option name
+            if (this.defaultOptionName) {
+                return this.defaultOptionName
+            }
+
+            // if nothing is selected and no default option name is set, return default text (so selectbox is not empty)
+            return "Please select\u2026"
+        },
+        // get the displayed icon (only available for default selectbox)
+        optionIcon() {
+            if (this.type === "default") {
+                return this.selectData.find(option => {
+                    return option.value === this.value
+                })?.icon?.iconClass
+            }
+            return null
+        },
+        optionCountry() {
+            if (this.type === "country") {
+               return this.value
+            }
+            return null
+        },
+        optionColor() {
+            if (this.type === "color") {
+                return this.value
+            }
+            return null
+        }
+    },
     methods: {
         toggleOptions() {
             if (this.status !== 'disabled') {
@@ -125,11 +196,9 @@ export default {
             }
             this.$emit('update:value', value);
         },
-        selectOption(optionName, miscInfo) {
-            this.optionName = optionName
-            this.miscInfo = miscInfo
+        selectOption(optionValue) {
             this.showOptions = false
-            this.$emit('update:value', miscInfo);
+            this.$emit('update:value', optionValue);
         },
         closeOptions() {
             this.showOptions = false
@@ -137,32 +206,6 @@ export default {
         pathFlag(isoCode) {
             return this.pathFlags + "/flag-" + isoCode + ".svg"
         }
-    },
-    data() {
-        return {
-            showOptions: false,
-            optionName: this.defaultOptionName,
-            miscInfo: ""
-        }
-    },
-    watch: {
-        value: {
-            handler() {
-                if (this.selectData) {
-                    for (let i = 0; i < this.selectData.length; i++) {
-                        let currentEntry = this.selectData[i]
-                        if (this.type === 'country' && this.value === currentEntry.isoCode) {
-                            this.optionName = currentEntry.countryName
-                            this.miscInfo = currentEntry.isoCode
-                        } else if (this.type === 'color' && this.value === currentEntry.hexCode) {
-                            this.optionName = currentEntry.colorName
-                            this.miscInfo = currentEntry.hexCode
-                        }
-                    }
-                }
-            },
-            immediate: true
-        }
     }
 }
 </script>
@@ -193,7 +236,7 @@ export default {
                     height: inherit;
                     border: var(--default-border);
 
-                    [class*='icon-'] {
+                    > [class*='icon-']:last-child {
                         margin-left: auto;
                         font-size: 1rem;
                     }
@@ -245,6 +288,20 @@ export default {
                     margin: 0 calc(var(--default-margin) / 2) 0 0;
                 }
             }
+
+            &.active {
+                background: var(--light-gray);
+
+                &:hover, &:active, &:focus {
+                    background: var(--primary-color);
+                }
+            }
+        }
+
+        label {
+            &.active {
+                background: var(--light-gray);
+            }
         }
 
         ul {
@@ -268,7 +325,7 @@ export default {
                 }
             }
 
-            &.filter-list {
+            &.checkbox-options {
                 li {
                     padding: calc(var(--default-padding) / 2);
                 }

package/src/components/CmdFormElement.vue

@@ -28,7 +28,6 @@
                    @change="$emit('change', $event)"
                    :autocomplete="datalist ? 'off' : 'on'"
                    :list="datalist ? datalist.id : false"
-                   :disabled="status === 'disabled'"
                    :value="value"
             />
         </template>
@@ -50,7 +49,6 @@
                    :value="inputValue"
                    :class="[htmlClass, status, { 'replace-input-type': replaceInputType }]"
                    :id="id"
-                   :disabled="status === 'disabled'"
                    :aria-invalid="status === 'error'"
                    :aria-describedby="`status-message-${id}`"
             />
@@ -66,7 +64,6 @@
         <select v-if="element === 'select'"
                 v-bind="$attrs"
                 :id="id"
-                :disabled="status === 'disabled'"
                 @change="$emit('input', $event.target.value)"
         >
             <option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
@@ -79,7 +76,6 @@
         <textarea v-if="element === 'textarea'"
                   v-bind="$attrs"
                   :id="id"
-                  :disabled="status === 'disabled'"
                   :value="value"
                   @input="onInput"
                   @focus="tooltip = true"
@@ -94,7 +90,7 @@
         <!-- begin searchfield -->
         <span v-else-if="element === 'input' && $attrs.type === 'search'" class="flex-container no-gap">
       <input v-bind="$attrs" :id="id" @input="onInput" :value="value"/>
-      <button class="no-flex" type="button" :disabled="status === 'disabled'">
+      <button class="no-flex" type="button">
         <span class="icon-search"></span>
       </button>
     </span>
@@ -102,7 +98,7 @@
     </label>
 
     <!-- begin button -->
-    <button v-else class="button" v-bind="$attrs" :disabled="status === 'disabled'">
+    <button v-else class="button" v-bind="$attrs">
         <span v-if="buttonIcon.iconPosition === 'before'" :class="buttonIcon.iconClass"></span>
         <span v-if="buttonIcon.iconPosition">{{ buttonText }}</span>
         <template v-else>

package/src/components/CmdLoginForm.vue

@@ -78,7 +78,7 @@
                 v-if="buttons.login.linkType === 'button'"
                 :type="buttons.login.type === 'submit' ? 'submit' : 'button'"
                 :class="['button', { primary: buttons.login.primary }]"
-                @click.prevent="onClick"
+                @click="onClick"
             >
                   <span
                       v-if="buttons.login.icon.iconClass"
@@ -140,12 +140,11 @@
                 v-if="buttons.sendLogin.linkType === 'button'"
                 :type="buttons.sendLogin.type === 'submit' ? 'submit' : 'button'"
                 :class="['button', { primary: buttons.sendLogin.primary }]"
-                @click.prevent="sendLogin"
             >
                   <span
-                      v-if="buttons.sendLogin.icon.iconClass"
-                      :class="buttons.sendLogin.icon.iconClass"
-                      :title="buttons.sendLogin.icon.tooltip"
+                      v-if="buttons.sendLogin.icon?.iconClass"
+                      :class="buttons.sendLogin.icon?.iconClass"
+                      :title="buttons.sendLogin.icon?.tooltip"
                   ></span>
                 <span v-if="buttons.sendLogin.text">{{ buttons.sendLogin.text }}</span>
             </button>
@@ -174,6 +173,18 @@ export default {
         CmdFormElement
     },
     props: {
+        /**
+         * value for v-model (modelValue is default name in vue 3)
+         */
+        modelValue: {
+            type: Object,
+            default() {
+                return {
+                    username: "",
+                    password: ""
+                }
+            }
+        },
         /**
          * legend for login-fieldset (required for accessibility)
          */
@@ -332,12 +343,23 @@ export default {
         }
     },
     methods: {
-        onClick() {
-            this.$emit("click")
+        modelChange() {
+            this.$emit("update:modelValue", { "username": this.username, "password": this.password })
+        },
+        onClick(event) {
+            this.$emit("click", event)
         },
         getRoute(language) {
             return getRoute(language)
         }
+    },
+    watch: {
+        username() {
+          this.modelChange()
+        },
+        password() {
+          this.modelChange()
+        }
     }
 }
 </script>

package/src/components/CmdProgressBar.vue

@@ -13,7 +13,7 @@ export default {
     name: "CmdProgressBar",
     data() {
         return {
-            loadingStatus: 50
+            loadingStatus: 30
         }
     },
     props: {

package/src/components/CmdSwitchButton.vue

@@ -4,9 +4,11 @@
                     'colored' : colored, 'on' : colored && isChecked,
                     'off' : colored && !isChecked, 'disabled': $attrs.disabled
                     }
-                    ]" :for="id">
-        <input :type="type" :id="id" :name="name" :value="inputValue" :checked="isChecked" @change="onChange"
-               v-bind="$attrs"/>
+                    ]"
+           :for="id"
+           :title="$attrs.title"
+    >
+        <input :type="type" :id="id" :name="name" :value="inputValue" :checked="isChecked" @change="onChange" v-bind="$attrs"/>
         <span class="label" v-if="onLabel && offLabel && !labelText">{{ onLabel }}</span>
         <span class="label" v-if="onLabel && offLabel && !labelText">{{ offLabel }}</span>
         <span class="label" v-if="!onLabel && !offLabel && labelText">{{ labelText }}</span>