comand-component-library 3.1.41 → 3.1.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.41",
+  "version": "3.1.45",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -17,7 +17,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.23",
+    "comand-frontend-framework": "^3.2.27",
     "core-js": "^3.16.1",
     "vue": "^3.2.1",
     "vue-router": "^4.0.11",
@@ -30,6 +30,7 @@
     "@vue/cli-plugin-vuex": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
     "@vue/compiler-sfc": "^3.1.5",
+    "axios": "^0.24.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.14.0",

package/src/App.vue

@@ -329,7 +329,7 @@
                                         element="input"
                                         type="text"
                                         id="inputfield2"
-                                        iconClass="icon-user-profile"
+                                        innerIconClass="icon-user-profile"
                                         placeholder="Type in username"
                                         tooltipText="This is a tooltip!"
                                         :status="formElementStatus"/>
@@ -337,7 +337,7 @@
                                         labelText="Label for inputfield (with icon):"
                                         type="password"
                                         id="inputfield3"
-                                        iconClass="icon-security-settings"
+                                        innerIconClass="icon-security-settings"
                                         placeholder="Type in password"
                                         tooltipText="This is a tooltip!"
                                         :status="formElementStatus"/>
@@ -637,7 +637,8 @@
         <a id="section-login-form"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Login Form</h2>
-            <CmdLoginForm/>
+            <CmdLoginForm v-model="loginData" />
+            <p>LoginData: {{loginData}}</p>
         </CmdWidthLimitationWrapper>
 
         <a id="section-main-headline"></a>
@@ -757,7 +758,12 @@
         <a id="section-upload-form"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Upload-Form</h2>
-            <CmdUploadForm headline="Select files to upload" :enableDragAndDrop="true" :allowedFileTypes="['image/jpeg']"/>
+            <CmdUploadForm headline="Select files to upload"
+                           :enableDragAndDrop="true"
+                           :allowedFileExtensions="['jpg']"
+                           :allowMultipleFileUploads="true"
+                           :uploadOptions="{url: 'http://localhost:8888'}"
+            />
         </CmdWidthLimitationWrapper>
     </main>
 
@@ -913,6 +919,7 @@ export default {
             selectedCountry: "de",
             selectedColor: "",
             rangeValue: 50,
+            loginData: {},
             formElementStatus: "",
             switchButtonRadio: "radio1",
             switchButtonCheckbox: ["checkbox1"],

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

@@ -3,22 +3,14 @@
     "value": "cn",
     "text": "China"
   },
-  {
-    "value": "de",
-    "text": "Germany"
-  },
-  {
-    "value": "en",
-    "text": "United Kingdom"
-  },
-  {
-    "value": "es",
-    "text": "Spain"
-  },
   {
     "value": "fr",
     "text": "France"
   },
+  {
+    "value": "de",
+    "text": "Germany"
+  },
   {
     "value": "it",
     "text": "Italy"
@@ -26,5 +18,13 @@
   {
     "value": "ru",
     "text": "Russia"
+  },
+  {
+    "value": "es",
+    "text": "Spain"
+  },
+  {
+    "value": "en",
+    "text": "United Kingdom"
   }
 ]

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

@@ -4,7 +4,7 @@
     "value": "1"
   },
   {
-    "text": "Optionname 2",
+    "text": "Optionname 2 with very multiple words",
     "value": "2"
   },
   {

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

@@ -52,7 +52,6 @@ label, .label {
 /* begin flags --------------------------------------------------------------------------------------------------------------------------------------------------- */
 .flag {
   width: 3rem;
-  height: 2rem;
   background-size: 100% 100%;
   display: block;
 }

package/src/components/CmdFakeSelect.vue

@@ -1,16 +1,17 @@
 <template>
-    <div :class="[status, 'cmd-fake-select label']">
+    <div :class="[status, 'cmd-fake-select label', {color: type === 'color'}]">
         <span>{{ labelText }}</span>
         <ul :class="{'open': showOptions}" @clickout="closeOptions">
             <li>
+                <!-- begin default/selected-option -->
                 <a href="#" @click.prevent="toggleOptions">
-                    <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>
+                    <img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry" :class="['flag', optionCountry]"/>
+                    <span v-else-if="type === 'color'" :style="'background: ' + optionColor"></span>
                     <span v-if="optionIcon" :class="optionIcon"></span>
                     <span>{{ optionName }}</span>
-                    <span :class="dropdownIconClass"></span>
+                    <span :class="dropdownIconClass" title="Toggle dropdown visibility"></span>
                 </a>
+                <!-- end default/selected-option-->
 
                 <!-- begin default dropdown (incl. optional icon) -->
                 <ul v-if="type === 'default' && showOptions">
@@ -24,7 +25,7 @@
                 <!-- end default dropdown (incl. optional icon) -->
 
                 <!-- begin dropdown with checkboxes -->
-                <ul v-else-if="type !== 'default' && type !== 'content' && showOptions" class="checkbox-options">
+                <ul v-else-if="type !== 'default' && type !== 'content' && showOptions" :class="{'checkbox-options': type === 'checkboxOptions'}">
                     <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"
@@ -42,8 +43,8 @@
                         <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>
+                                    option.text
+                                }}</span>
                         </a>
                     </li>
                 </ul>
@@ -170,7 +171,7 @@ export default {
         },
         optionCountry() {
             if (this.type === "country") {
-               return this.value
+                return this.value
             }
             return null
         },
@@ -179,6 +180,10 @@ export default {
                 return this.value
             }
             return null
+        },
+        overflowWidth() {
+            let outerWidth = document.querySelector(".cmd-fake-select").outerWidth()
+            return "width: " + outerWidth + "px;"
         }
     },
     methods: {
@@ -236,7 +241,13 @@ export default {
                     height: inherit;
                     border: var(--default-border);
 
-                    > [class*='icon-']:last-child {
+                    > span:not([class*="icon"]) {
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                        width: 95%;
+                    }
+
+                    > [class*="icon-"]:last-child {
                         margin-left: auto;
                         font-size: 1rem;
                     }
@@ -245,6 +256,8 @@ export default {
         }
 
         &.open {
+            border-bottom: 0;
+
             > li {
                 &:first-child {
                     > a {
@@ -299,23 +312,23 @@ export default {
         }
 
         label {
-            &.active {
-                background: var(--light-gray);
-            }
+            display: flex;
+        }
+
+        span {
+            white-space: nowrap;
         }
 
         ul {
             position: absolute;
             list-style: none;
             z-index: 10;
-            width: 100%;
-            margin-left: 0;
-            border-top: 0;
+            min-width: 100%;
+            margin: 0;
             border-bottom-right-radius: var(--border-radius);
             border-bottom-left-radius: var(--border-radius);
             background: var(--pure-white);
             border: var(--primary-border);
-            border-top: 0;
 
             li {
                 &:last-child {
@@ -325,6 +338,14 @@ export default {
                 }
             }
 
+            &.custom-fake-select-content {
+                padding: var(--default-padding);
+
+                img {
+                    display: block;
+                }
+            }
+
             &.checkbox-options {
                 li {
                     padding: calc(var(--default-padding) / 2);
@@ -390,6 +411,24 @@ export default {
             }
         }
     }
+
+    &.color {
+        li {
+            a {
+                gap: calc(var(--default-gap) / 2);
+
+                > span:first-child {
+                    width: 1.5rem;
+                    aspect-ratio: 1;
+                    border: var(--default-border);
+
+                    &[style=""] {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
 }
 
 /* end cmd-fake-select ------------------------------------------------------------------------------------------ */

package/src/components/CmdFormElement.vue

@@ -3,18 +3,17 @@
            :for="id"
            :class="['cmd-form-element', status, {'inline' : displayLabelInline, 'checked': isChecked}]"
            ref="label">
-        <!-- begin label (+ required) -->
+        <!-- begin label (+ required asterisk) -->
         <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
               :class="{'hidden': hideLabel}">
           <span>{{ labelText }}</span>
           <sup v-if="$attrs.required">*</sup>
         </span>
-        <!-- end label (+ required) -->
+        <!-- end label (+ required asterisk) -->
 
-        <!-- begin icon -->
-        <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && innerIconClass" class="place-inside"
-              :class="[status, innerIconClass]"></span>
-        <!-- end icon -->
+        <!-- begin inner-icon -->
+        <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && innerIconClass" :class="['place-inside', status, innerIconClass]"></span>
+        <!-- end inner-icon -->
 
         <!-- begin inputfield -->
         <template
@@ -28,12 +27,15 @@
                    @change="$emit('change', $event)"
                    :autocomplete="datalist ? 'off' : 'on'"
                    :list="datalist ? datalist.id : false"
-                   :disabled="status === 'disabled'"
                    :value="value"
             />
         </template>
         <!-- end inputfield -->
 
+        <!-- begin show-password-icon -->
+        <a v-if="$attrs.type === 'password'" href="#" @click.prevent="showPassword" class="place-inside icon-visible" title="Toggle password visibility"></a>
+        <!-- end show-password-icon -->
+
         <!-- begin datalist -->
         <template v-if="datalist && datalist.options.length">
             <datalist :id="datalist.id">
@@ -50,14 +52,13 @@
                    :value="inputValue"
                    :class="[htmlClass, status, { 'replace-input-type': replaceInputType }]"
                    :id="id"
-                   :disabled="status === 'disabled'"
                    :aria-invalid="status === 'error'"
                    :aria-describedby="`status-message-${id}`"
             />
             <span v-if="labelText">
-        <span>{{ labelText }}</span>
-        <sup v-if="$attrs.required">*</sup>
-      </span>
+            <span>{{ labelText }}</span>
+                <sup v-if="$attrs.required">*</sup>
+            </span>
             <slot v-else></slot>
         </template>
         <!-- end checkbox and radiobutton -->
@@ -66,7 +67,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 +79,6 @@
         <textarea v-if="element === 'textarea'"
                   v-bind="$attrs"
                   :id="id"
-                  :disabled="status === 'disabled'"
                   :value="value"
                   @input="onInput"
                   @focus="tooltip = true"
@@ -94,7 +93,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 +101,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>
@@ -304,7 +303,19 @@ export default {
         },
         onInput(e) {
             this.$emit('update:value', e.target.value)
+        },
+        showPassword() {
+            alert(this.$el)
         }
     }
 }
 </script>
+
+<style lang="scss">
+.cmd-form-element {
+    input + .place-inside[class*="icon"] {
+        left: auto;
+        right: .5rem
+    }
+}
+</style>

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>