@mozaic-ds/vue 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",

package/src/components/datatable/MDataTable.vue

@@ -35,7 +35,7 @@
         </thead>
         <tbody>
           <tr
-            v-for="item in getSource"
+            v-for="(item, rowIndex) in getSource"
             :key="item[dataKeyExpr]"
             :class="rowClasses(item)"
           >
@@ -49,7 +49,7 @@
                 allowRowClick && onRowClick({ event: $event, item: item })
               "
             >
-              <slot :name="`item.${header.dataFieldExpr}`" :item="item">
+              <slot :name="`item.${header.dataFieldExpr}`" :item="item" :index="rowIndex">
                 {{ getItemValue(item, header.dataFieldExpr) }}
               </slot>
             </td>
@@ -62,7 +62,7 @@
         </tbody>
       </table>
     </div>
-    <div v-if="pagingOptions.enabled" class="mc-data-table__footer">
+    <div v-if="pagingOptions.enabled && total != null" class="mc-data-table__footer">
       <div class="mc-data-table__footer__item-per-page">
         <m-select
           :id="'itemPerPage'"
@@ -70,7 +70,13 @@
           :options="getPageSizes"
           :value="getPageValue"
           @change="onPageSizeChanged"
-        />
+        >
+          <template #text="{ option }">
+            <slot name="pager.text" :pager="option">
+              {{ option.text }}
+            </slot>
+          </template>
+        </m-select>
       </div>
       <div
         v-if="pagingOptions.displayTotal"
@@ -86,7 +92,13 @@
           :page-label="pagingOptions.pageLabel"
           :value="pagingOptions.index"
           @on-update-page="onUpdatePage"
-        />
+        >
+          <template #text="{ option }">
+            <slot name="paging.text" :paging="option">
+              {{ option.text }}
+            </slot>
+          </template>
+        </m-pagination>
       </div>
     </div>
   </div>
@@ -165,7 +177,7 @@ const Pager = {
 const Paging = {
   defaultOptions: {
     enabled: false,
-    pageLabel: 'sur',
+    text: 'sur',
     index: 1,
   },
 };
@@ -200,7 +212,10 @@ export default {
       default: 'id',
     },
 
-    /** Get or set the headers informations.  */
+    /**
+     * Get or set the headers informations.
+     * @type {{ caption: string, dataFieldExpr: string, sortFieldExpr: string, allowSorting: boolean, sortOrder: 'asc' | 'desc' | null }[] }
+     */
     headers: {
       type: Array,
       default: () => [],
@@ -221,13 +236,19 @@ export default {
       default: () => [],
     },
 
-    /** Get or set pager informations. */
+    /**
+     * Get or set pager informations.
+     * @type {{ sizes: number[], text: string, value: number }}
+     */
     pager: {
       type: Object,
       default: () => ({}),
     },
 
-    /** Get or set paging informations. */
+    /**
+     * Get or set paging informations.
+     * @type {{ enabled: boolean, text: string, index: number }}
+     */
     paging: {
       type: Object,
       default: () => ({}),
@@ -245,7 +266,10 @@ export default {
       default: false,
     },
 
-    /** Get or set the sorting informations. */
+    /**
+     * Get or set the sorting informations.
+     * @type {{ mode:'none' | 'single' | 'multiple'}}
+     */
     sorting: {
       type: Object,
       default: () => ({}),

package/src/components/pagination/MPagination.vue

@@ -21,7 +21,13 @@
         :disabled="disabled"
         class="mc-pagination__select"
         @change="changePage(Number($event))"
-      />
+      >
+        <template #text="{ option }">
+          <slot name="text" :option="{ ...option, length }">
+            {{ option.text }}
+          </slot>
+        </template>
+      </m-select>
     </div>
 
     <component
@@ -130,6 +136,7 @@ export default {
     },
     changePage(newPage) {
       this.$emit('on-update-page', newPage);
+      this.$emit('update:value',newPage);
     },
     previousPage(newPage) {
       if (this.hasPreviousPageListener()) {

package/src/components/radio/MRadio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mc-radio">
+  <div class="mc-radio" :class="rootClass">
     <input
       :id="id"
       type="radio"
@@ -41,6 +41,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    rootClass: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>

package/src/components/radio/MRadioGroup.vue

@@ -23,7 +23,7 @@
         :key="option.id ? option.id : option.value"
         :is-invalid="isInvalid"
         :label="option.label"
-        class="mc-field__item"
+        root-class="mc-field__item"
         :checked="value === option.value"
         @change="(v) => (v ? $emit('input', option.value) : null)"
       />

package/src/components/select/MSelect.vue

@@ -17,7 +17,9 @@
       v-bind="option.attributes"
       :disabled="option.disabled"
     >
-      {{ option.text }}
+      <slot name="text" :option="option">
+        {{ option.text }}
+      </slot>
     </option>
   </select>
 </template>

package/src/components/textinput/MTextInput.vue

@@ -1,20 +1,12 @@
 <template>
-  <div v-if="icon" key="icon-input" class="mc-left-icon-input">
-    <m-text-input-icon :icon="icon" />
+  <div key="icon-input" :class="{ 'mc-left-icon-input': icon }">
+    <m-text-input-icon v-if="icon" :icon="icon" />
     <m-text-input-field
       ref="mField"
       v-bind="[$attrs, $props]"
       v-on="$listeners"
     />
   </div>
-
-  <m-text-input-field
-    v-else
-    key="input-only"
-    ref="mField"
-    v-bind="[$attrs, $props]"
-    v-on="$listeners"
-  />
 </template>
 
 <script>