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

package/package.json

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

package/src/components/datatable/MDataTable.vue

@@ -203,6 +203,7 @@ function autoGenerateHeaders(data, headers) {
 /** Build options to manage request. */
 function buildOptions(
   pagingEnabled,
+  pagingTotalPage,
   pagerValue,
   pagingIndex,
   pagingSize,
@@ -220,7 +221,7 @@ function buildOptions(
 
   return {
     sort: columnSorters,
-    skip: pagingEnabled ? pagerValue * (index - 1) : null,
+    skip: (pagingEnabled || pagingTotalPage) ? pagerValue * (index - 1) : null,
     take: pagingEnabled ? pagerValue : null,
   };
 }
@@ -307,7 +308,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 +429,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 +662,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/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 }}