@mozaic-ds/vue 0.40.1-beta.1 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.40.1-beta.1",
+  "version": "0.41.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -25,29 +25,29 @@
   "dependencies": {
     "@linusborg/vue-simple-portal": "^0.1.5",
     "@mozaic-ds/css-dev-tools": "1.54.0",
-    "@mozaic-ds/icons": "1.54.0",
+    "@mozaic-ds/icons": "1.57.0",
     "@mozaic-ds/styles": "1.56.0",
     "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.29.1",
-    "libphonenumber-js": "^1.10.21",
+    "libphonenumber-js": "^1.10.24",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/core": "^7.21.4",
+    "@babel/eslint-parser": "^7.21.3",
     "@rushstack/eslint-patch": "^1.2.0",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
     "@vue/compiler-sfc": "^3.2.47",
     "@vue/eslint-config-prettier": "^7.1.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.7.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "prettier": "^2.8.4",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-vue": "^9.10.0",
+    "prettier": "^2.8.7",
     "sass": "^1.60.0",
-    "sass-loader": "^13.2.1",
+    "sass-loader": "^13.2.2",
     "vue-template-compiler": "^2.7.14"
   },
   "bugs": {

package/src/components/dropdown/MDropdown.vue

@@ -25,7 +25,7 @@
         :disabled="disabled"
         @click="openState = !openState"
       >
-        {{ buttonValue }}
+        {{ getButtonLabel }}
       </button>
       <button
         v-if="isClearable"
@@ -174,7 +174,6 @@ export default {
       openState: this.open,
       tagWidth: '0px',
       tagValue: null,
-      buttonValue: this.placeholder,
       localItems: null,
       sortedListItems: null,
       listboxValue: null,
@@ -210,6 +209,25 @@ export default {
         'mc-select--s': this.size === 's',
       };
     },
+    getButtonLabel() {
+      let label = this.placeholder;
+
+      if (this.modelValue && !this.items.length) {
+        return label;
+      }
+
+      const value = this.listboxValue;
+      const selectedItems = this.getSelectedItems(value);
+      const selectedLabels = selectedItems.map(
+        (item) => item[this.dataTextExpr]
+      );
+
+      label =
+        ((!value || value.length === 0) && this.placeholder) ||
+        selectedLabels.join(', ');
+
+      return label;
+    },
   },
 
   watch: {
@@ -231,15 +249,6 @@ export default {
     },
     listboxValue: {
       handler: function (val) {
-        const selectedItems = this.getSelectedItems(val);
-        const seletedLabels = selectedItems.map(
-          (item) => item[this.dataTextExpr]
-        );
-
-        this.buttonValue =
-          ((!val || val.length === 0) && this.placeholder) ||
-          seletedLabels.join(', ');
-
         if (this.multiple) {
           this.tagValue = val;
         }
@@ -258,7 +267,6 @@ export default {
       this.$emit('update:open', val);
     },
   },
-
   methods: {
     setTagWidth() {
       this.$nextTick(() => {

package/src/components/passwordinput/MPasswordInput.vue

@@ -14,7 +14,7 @@
       type="button"
       class="mc-password-input__button"
       role="switch"
-      :aria-pressed="setAriaPressed"
+      :aria-checked="setAriaChecked"
       @click="onClick"
     >
       {{ setButtonLabel }}
@@ -73,7 +73,7 @@ export default {
         'is-invalid': this.isInvalid,
       };
     },
-    setAriaPressed() {
+    setAriaChecked() {
       return this.isVisible ? 'true' : 'false';
     },
     setButtonLabel() {
@@ -83,7 +83,7 @@ export default {
 
   methods: {
     onClick() {
-      const aria = this.$refs.button.getAttribute('aria-pressed') === 'false';
+      const aria = this.$refs.button.getAttribute('aria-checked') === 'false';
       this.isVisible = aria;
     },
   },