@mozaic-ds/vue 0.43.0-beta.0 → 0.43.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.43.0-beta.0",
+  "version": "0.43.1",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {

package/src/components/autocomplete/MAutocomplete.vue

@@ -33,16 +33,20 @@
         @input="onInput"
         @click="openState = true"
       />
-      <MLoader v-if="loading" class="mc-autocomplete__loader" size="s" />
-      <button
-        v-if="isClearable"
-        type="button"
-        class="mc-autocomplete__clear"
-        @click="onClear"
-      >
-        <MIcon name="ControlTagCross24" class="mc-autocomplete__clear-icon" />
-        <span class="mc-autocomplete__clear-text">{{ labelClearButton }}</span>
-      </button>
+      <div class="mc-autocomplete__tools">
+        <MLoader v-if="loading" class="mc-autocomplete__loader" size="s" />
+        <button
+          v-if="isClearable"
+          type="button"
+          class="mc-autocomplete__clear"
+          @click="onClear"
+        >
+          <MIcon name="ControlTagCross24" class="mc-autocomplete__clear-icon" />
+          <span class="mc-autocomplete__clear-text">{{
+            labelClearButton
+          }}</span>
+        </button>
+      </div>
     </div>
     <MListBox
       v-if="!isFiltered"

package/src/components/button/MButton.vue

@@ -68,6 +68,7 @@ export default {
       default: null,
       validator: (value) =>
         [
+          null,
           'solid',
           'bordered',
           'solid-neutral',

package/src/components/checkbox/MCheckboxGroup.vue

@@ -28,7 +28,7 @@
       >
         <template #label>
           <!-- @slot Use this slot if you want to customise the label display of each MCheckbox element -->
-          <slot :name="`label${index + 1}`">
+          <slot :name="`label${index + 1}`" :option="option">
             {{ option.label }}
           </slot>
         </template>
@@ -139,12 +139,12 @@ export default {
   },
   data() {
     return {
-      checkboxesValues: [],
+      localValue: this.value ?? [],
     };
   },
   methods: {
     onChange(isChecked, value) {
-      let values = this.value;
+      let values = this.localValue;
 
       if (isChecked && !values.includes(value)) {
         values.push(value);
@@ -156,7 +156,7 @@ export default {
        * Triggered each time a checkbox is checked/unchecked. _(can be used with a v-model)_
        */
       this.$emit('change', values);
-      this.checkboxesValues = values;
+      this.localValue = values;
     },
   },
 };

package/src/components/datatable/MDataTable.vue

@@ -539,13 +539,9 @@ export default {
       },
     },
     paging: {
-      deep: true,
       immediate: true,
       async handler(newValue, oldValue) {
-        if (
-          deepEqual(newValue, oldValue) &&
-          !(this.source instanceof Function)
-        ) {
+        if (deepEqual(newValue, oldValue)) {
           return;
         }
 

package/src/components/dropdown/MDropdown.vue

@@ -27,15 +27,17 @@
       >
         {{ getButtonLabel }}
       </button>
-      <button
-        v-if="isClearable"
-        class="mc-dropdown__clear"
-        type="button"
-        @click="clearListbox"
-      >
-        <MIcon name="ControlTagCross24" class="mc-dropdown__clear-icon" />
-        <span class="mc-dropdown__clear-text">{{ labelClearButton }}</span>
-      </button>
+      <div class="mc-dropdown__tools">
+        <button
+          v-if="isClearable"
+          class="mc-dropdown__clear"
+          type="button"
+          @click="clearListbox"
+        >
+          <MIcon name="ControlTagCross24" class="mc-dropdown__clear-icon" />
+          <span class="mc-dropdown__clear-text">{{ labelClearButton }}</span>
+        </button>
+      </div>
     </div>
     <MListBox
       v-model="listboxValue"

package/src/components/modal/MModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <Portal :selector="appendTo">
     <div
       ref="modal"
       class="mc-modal"
@@ -54,18 +54,20 @@
         </div>
       </div>
     </div>
-    <keep-alive>
+    <KeepAlive>
       <div
         class="mc-modal-overlay"
         :class="{ 'is-visible': open }"
         tabindex="-1"
         role="dialog"
       />
-    </keep-alive>
-  </div>
+    </KeepAlive>
+  </Portal>
 </template>
 
 <script>
+import { Portal } from '@linusborg/vue-simple-portal';
+
 /**
  * > A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action. It must be used for single action only and must have a call to action button in the bottom.
  *
@@ -74,6 +76,9 @@
  */
 export default {
   name: 'MModal',
+  components: {
+    Portal,
+  },
   props: {
     /**
      * Allows to make the Modal visible or hide it. Can be used with `v-model`.
@@ -127,6 +132,13 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * A query selector that defines the target element to which to append the content of the Portal
+     */
+    appendTo: {
+      type: String,
+      default: undefined,
+    },
   },
   watch: {
     open: {

package/src/components/radio/MRadioGroup.vue

@@ -35,7 +35,7 @@
         @change="(v) => (v ? $emit('input', option.value) : null)"
       >
         <template #label>
-          <slot :name="`label${index + 1}`">
+          <slot :name="`label${index + 1}`" :option="option">
             {{ option.label }}
           </slot>
         </template>