comand-component-library 3.1.44 → 3.1.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.44",
+  "version": "3.1.45",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

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

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
@@ -33,6 +32,10 @@
         </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">
@@ -53,9 +56,9 @@
                    :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 -->
@@ -300,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>