comand-component-library 3.1.54 → 3.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.54",
+  "version": "3.1.57",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.39",
+    "comand-frontend-framework": "^3.2.44",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "vue": "^3.2.31",
@@ -44,4 +44,4 @@
     "typescript": "~3.9.3",
     "vue-jest": "^5.0.0-0"
   }
-}
+}

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/CmdBox.vue

@@ -61,7 +61,7 @@
         </div>
         <div class="box-body">
             <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{ product.articleNumber }}</p>
-            <p v-if="product.price" class="price">{{ product.price }}</p>
+            <p v-if="product.price" class="price"><span>{{ product.price }}</span><span :title="globalCurrency.name">{{ globalCurrency.symbol }}</span></p>
             <p v-if="product.description">{{ product.description }}</p>
         </div>
     </a>
@@ -94,6 +94,7 @@
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
+import GlobalCurrency from "../mixins/GlobalCurrency"
 
 // import components
 import CmdCustomHeadline from "./CmdCustomHeadline"
@@ -106,7 +107,9 @@ export default {
         CmdListOfLinks,
     },
     mixins: [
-        I18n, DefaultMessageProperties
+        I18n,
+        DefaultMessageProperties,
+        GlobalCurrency
     ],
     data() {
         return {
@@ -114,7 +117,7 @@ export default {
             active: true
         }
     },
-    emits: ['click'],
+    emits: ["click"],
     props: {
         collapsingBoxesOpen: {
             type: Boolean,

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"
@@ -199,7 +202,7 @@ export default {
          * set default v-model (must be named modelValue in Vue3)
          */
         modelValue: {
-            type: [String, Array],
+            type: [String, Number, Array],
             default: ""
         },
         /**
@@ -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

package/src/components/CmdUploadForm.vue

@@ -857,6 +857,11 @@ export default {
 <style lang="scss">
 /* begin cmd-upload-form -------------------------------------------------------------------------------------------- */
 .cmd-upload-form {
+
+    .cmd-custom-headline {
+        margin: 0;
+    }
+
     .box {
         background: var(--pure-white-reduced-opacity);
 

package/src/main.js

@@ -5,6 +5,9 @@ import 'comand-frontend-framework/src/assets/css/normalize.css'
 /* import framework-styles */
 import 'comand-frontend-framework/src/assets/css/framework.css'
 
+/* import breakpoints */
+import 'comand-frontend-framework/src/assets/css/breakpoints.css'
+
 /* import framework-iconfont */
 import 'comand-frontend-framework/src/assets/css/framework-iconfont.css'
 /* end imports css from comand-frontend-framework ---------------------------------------------------------------------------------------- */

package/src/mixins/GlobalCurrency.js

@@ -0,0 +1,16 @@
+export default {
+    props: {
+        /**
+         * globalCurrency used in multiple components
+         */
+        globalCurrency: {
+            type: Object,
+            default() {
+                return {
+                    symbol: "€",
+                    name: "Euro"
+                }
+            }
+        }
+    }
+}