comand-component-library 3.1.56 → 3.1.57

package/package.json

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

package/src/App.vue

@@ -125,7 +125,6 @@
                                        v-model="fakeSelectCheckbox"
                                        defaultOptionName="Options:"
                                        :required="true"
-                                       :showLabel="false"
                                        id="selectbox-with-checkboxes"
                                        type="checkboxOptions"
                                        :useCustomTooltip="true"

package/src/components/CmdFakeSelect.vue

@@ -8,9 +8,9 @@
                 'has-state': validationStatus && validationStatus !== 'none'
             }
         ]"
-         :aria-labelledby="labelText"
-         :aria-required="$attrs.required !== undefined"
-         ref="fakeselect"
+        :aria-labelledby="labelText"
+        :aria-required="$attrs.required !== undefined"
+        ref="fakeselect"
     >
         <span v-if="showLabel">
             <!-- begin label -->
@@ -19,14 +19,14 @@
             </span>
             <!-- end label -->
             <a v-if="$attrs.required || inputRequirements.length"
-                href="#"
-                @click.prevent
-                :class="getStatusIconClass"
-                :title="!useCustomTooltip ? getValidationMessage : ''"
-                :aria-errormessage="getValidationMessage"
-                aria-live="assertive"
-                :id="tooltipId"
-                :role="validationStatus === 'error' ? 'alert' : 'dialog'">
+               href="#"
+               @click.prevent
+               :class="getStatusIconClass"
+               :title="!useCustomTooltip ? getValidationMessage : ''"
+               :aria-errormessage="getValidationMessage"
+               aria-live="assertive"
+               :id="tooltipId"
+               :role="validationStatus === 'error' ? 'alert' : 'dialog'">
             </a>
         </span>
         <ul :class="{'open': showOptions}" @clickout="closeOptions">
@@ -66,7 +66,7 @@
                     <li v-for="(option, index) in selectData" :key="index">
                         <label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : modelValue.includes(`${option.value}`)}">
                             <input type="checkbox" :value="option.value" @change="optionSelect"
-                                   :checked="modelValue.includes(option.value)" :id="'option-' + (index + 1)"/>
+                                   :checked="compareValues(option.value)" :id="'option-' + (index + 1)"/>
                             <span>{{ option.text }}</span>
                         </label>
 
@@ -82,12 +82,14 @@
                             <span>{{ option.text }}</span>
                         </a>
                     </li>
+                    <!-- begin (de)select all options -->
                     <li v-if="showSelectAllOptions && type === 'checkboxOptions'" class="select-all-options">
                         <a href="#" @click.prevent="toggleAllOptions">
                             <span :class="selectAllOptionsIcon"></span>
                             <span>{{ selectAllOptionsText }}</span>
                         </a>
                     </li>
+                    <!-- end (de)select all options -->
                 </ul>
                 <!-- end dropdown with checkboxes -->
 
@@ -112,12 +114,13 @@
 
         <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
             <!-- begin list of requirements -->
-            <h6>{{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br />"{{labelText}}"</h6>
+            <h6>{{ getMessage("cmdfakeselect.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>
+                    <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) ? 'icon-check-circle' : 'icon-error-circle'" :title="requirement.valid(modelValue, $attrs) ? 'success' : 'error'"></span>
+                        <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'icon-check-circle' : 'icon-error-circle'"
+                              :title="requirement.valid(modelValue, $attrs) ? 'success' : 'error'"></span>
                     </dd>
                 </template>
             </dl>
@@ -125,7 +128,7 @@
 
             <!-- begin helplink -->
             <template v-if="helplink">
-                <hr v-if="helplink.show" />
+                <hr v-if="helplink.show"/>
                 <a v-if="helplink.show && helplink.url"
                    :href="helplink.url"
                    :target="helplink.target"
@@ -289,9 +292,7 @@ export default {
                 } else if (this.modelValue.length > 1) {
                     return this.modelValue.length + " options selected"
                 }
-            }
-
-            else if (this.selectData?.length) {
+            } else if (this.selectData?.length) {
                 return this.selectData[0].text
             }
 
@@ -319,7 +320,7 @@ export default {
             return null
         },
         selectAllOptionsText() {
-            if(Array.isArray(this.modelValue) && this.modelValue.length === this.selectData.length) {
+            if (Array.isArray(this.modelValue) && this.modelValue.length === this.selectData.length) {
                 return "Deselect all options"
             }
             return "Select all options"
@@ -342,20 +343,20 @@ export default {
         toggleAllOptions() {
             this.validationStatus = "success"
             const checkboxValues = []
-            if(this.modelValue.length === this.selectData.length) {
-                if(this.$attrs.required) {
+            if (this.modelValue.length === this.selectData.length) {
+                if (this.$attrs.required) {
                     this.validationStatus = "error"
                 }
             } else {
                 for (let i = 0; i < this.selectData.length; i++) {
-                    checkboxValues.push(this.selectData[i].value)
+                    checkboxValues.push(String(this.selectData[i].value))
                 }
             }
 
             this.$emit("update:modelValue", checkboxValues)
         },
         limitWidth() {
-            if(this.$refs.fakeselect) {
+            if (this.$refs.fakeselect) {
                 const outerWidth = this.$refs.fakeselect.offsetWidth
                 this.limitWidthStyle = {width: outerWidth / 100 * 90 + "px"}
             }
@@ -365,11 +366,17 @@ export default {
                 this.showOptions = !this.showOptions
             }
         },
-        // check is an option is selected for default-selectbox
+        // check if array of selected options includes number or string version of value
+        compareValues(option) {
+            return this.modelValue.some((item) => {
+                return item === option || item === String(option)
+            })
+        },
+        // check if an option is selected for default-selectbox
         selectOption(optionValue) {
             this.validationStatus = "success"
-            if(this.$attrs.required !== undefined) {
-                if(!optionValue) {
+            if (this.$attrs.required !== undefined) {
+                if (!optionValue) {
                     this.validationStatus = "error"
                 }
             }
@@ -387,7 +394,7 @@ export default {
             } else {
                 value = value.filter(v => v !== event.target.value);
             }
-            if(this.$attrs.required !== undefined && !value.length) {
+            if (this.$attrs.required !== undefined && !value.length) {
                 this.validationStatus = "error"
             }
 
@@ -420,10 +427,10 @@ export default {
         },
         selectData: {
             handler() {
-              // check if given value by modelValue exists (else pre-select first option)
-              if(this.type === "default" && this.selectData?.length && !this.selectData.some((option) => option.value === this.modelValue)) {
-                  this.$emit("update:modelValue", this.selectData[0].value)
-              }
+                // check if given value by modelValue exists (else pre-select first option)
+                if (this.type === "default" && this.selectData?.length && !this.selectData.some((option) => option.value === this.modelValue)) {
+                    this.$emit("update:modelValue", this.selectData[0].value)
+                }
             },
             immediate: true,
             deep: true