@mozaic-ds/vue 0.40.1-beta.1 → 0.42.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.40.1-beta.1",
+  "version": "0.42.0-beta.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/datatable/MDataTable.vue

@@ -307,7 +307,7 @@ export default {
 
     /**
      * Get or set paging informations.
-     * @type {{ enabled: boolean, text: string, index: number }}
+     * @type {{ enabled: boolean, text: string, index: number, totalPage?: number }}
      */
     paging: {
       type: Object,
@@ -428,7 +428,9 @@ export default {
     getPagingSize() {
       let size = 1;
 
-      if (this.total) {
+      if(this.paging.totalPage) {
+        size = this.paging.totalPage;
+      } else if (this.total) {
         size = Math.ceil(this.total / this.pagerOptions.value);
       } else {
         size = parseInt(this.pagingOptions.index);
@@ -659,11 +661,12 @@ export default {
     },
 
     async onPageSizeChanged(value) {
-      this.pagerOptions.value = +value;
+      const newPageSize = +value;
+      this.pagerOptions.value = newPageSize;
 
       await this.load();
 
-      this.$emit('page-size-changed', value);
+      this.$emit('page-size-changed', newPageSize);
     },
 
     onRowClick(e) {

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;
     },
   },

package/src/components/radio/MRadio.vue

@@ -9,7 +9,11 @@
       :checked="checked"
       @change="$emit('change', $event.target.checked)"
     />
-    <label :for="id" class="mc-radio__label">{{ label }}</label>
+    <label :for="id" class="mc-radio__label">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </label>
   </div>
 </template>
 

package/src/components/radio/MRadioGroup.vue

@@ -18,16 +18,21 @@
       :class="{ 'mc-field__container--inline': inline }"
     >
       <m-radio
-        v-for="option in options"
+        v-for="(option, index) in options"
         :id="option.id ? option.id : option.value"
         :key="option.id ? option.id : option.value"
         :is-invalid="isInvalid"
-        :label="option.label"
         :name="option.name"
         root-class="mc-field__item"
         :checked="value === option.value"
         @change="(v) => (v ? $emit('input', option.value) : null)"
-      />
+      >
+        <template #label>
+          <slot :name="`label${index + 1}`">
+            {{ option.label }}
+          </slot>
+        </template>
+      </m-radio>
     </div>
     <span v-if="isInvalid" :id="errorId" class="mc-field__error-message">
       {{ errorMessage }}