@mozaic-ds/vue 0.8.2-beta.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.8.2-beta.0",
+  "version": "0.11.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
@@ -15,8 +15,8 @@
   "dependencies": {
     "@mozaic-ds/css-dev-tools": "^1.20.0",
     "@mozaic-ds/icons": "^1.20.0",
-    "@mozaic-ds/styles": "^1.20.1",
-    "@mozaic-ds/web-fonts": "^1.18.0",
+    "@mozaic-ds/styles": "^1.23.0",
+    "@mozaic-ds/web-fonts": "^1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "^1.9.37",
     "postcss-scss": "^4.0.1",

package/src/components/button/MButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <a v-if="href" :href="href" class="mc-button" :class="setClasses">
+  <a v-if="href" :href="href" class="mc-button" :class="setClasses" :aria-label="ariaLabel">
     <m-icon
       v-if="icon && iconPosition === 'left'"
       :id="`mc-button__${iconPosition}-icon-${id}`"
@@ -21,6 +21,7 @@
     class="mc-button"
     :disabled="disabled"
     :class="setClasses"
+    :aria-label="ariaLabel"
     @click="$emit('click', $event)"
   >
     <m-icon
@@ -120,6 +121,10 @@ export default {
       default: 'left',
       validator: (value) => ['left', 'right'].includes(value),
     },
+    ariaLabel: {
+      type: String,
+      default: null,
+    },
   },
 
   data() {

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/fileuploader/MFileResult.vue

@@ -15,6 +15,7 @@
       <button
         type="button"
         class="mc-fileuploader__delete"
+        :aria-label="removeLabel"
         @click="deleteFile(file)"
       ></button>
       <div
@@ -48,6 +49,10 @@ export default {
       type: Number,
       default: null,
     },
+    removeLabel: {
+      type: String,
+      default: '',
+    },
   },
   watch: {
     files: {

package/src/components/fileuploader/MFileUploader.vue

@@ -2,10 +2,12 @@
   <div class="mc-fileuploader">
     <input
       :id="id"
+      ref="fileUpload"
       type="file"
       class="mc-fileuploader__input"
       :accept="accept"
       :multiple="multiple"
+      :disabled="disabled"
       @change="onChange"
     />
     <label :for="id" class="mc-fileuploader__label">
@@ -18,6 +20,7 @@
       :files="files"
       :allowed-extensions="allowedExtensions"
       :max-size="maxSize"
+      :remove-label="removeLabel"
       @file-removed="deleteFile"
       @has-invalid-files="hasInvalidFiles"
     >
@@ -29,6 +32,7 @@
       v-if="uploadedFiles.length > 0"
       :files="uploadedFiles"
       :allowed-extensions="allowedExtensions"
+      :remove-label="removeLabel"
       @file-removed="deleteRemoteFile"
     />
   </div>
@@ -79,6 +83,14 @@ export default {
         return [];
       },
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    removeLabel: {
+      type: String,
+      default: 'Remove',
+    },
   },
   data() {
     return {
@@ -87,8 +99,9 @@ export default {
   },
   methods: {
     onChange(e) {
-      this.files = e.target.files;
-      this.$emit('file-added', e.target.files);
+      this.files = [...e.target.files];
+      this.$emit('file-added', this.files);
+      e.target.value = '';
     },
     removeFromArray(fileList, value) {
       const array = Array.from(fileList);
@@ -108,6 +121,11 @@ export default {
     hasInvalidFiles(payload) {
       this.$emit('has-invalid-files', payload);
     },
+    reset() {
+      this.$emit('file-removed', [...this.files]);
+      this.files = [];
+      this.$refs.fileUpload.value = '';
+    },
   },
 };
 </script>

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/quantityselector/MQuantitySelector.vue

@@ -5,10 +5,12 @@
       theme="bordered"
       icon="ControlLess32"
       icon-position="left"
-      aria-label="Decrement"
+      :aria-label="decrementAriaLabel"
       :aria-controls="id"
       :disabled="currentValue === valuemin"
       :size="small ? 's' : null"
+      tabindex="-1"
+      aria-hidden="true"
       @click="decrement()"
     />
 
@@ -18,13 +20,15 @@
       type="number"
       class="mc-quantity-selector__input"
       name="quantity-selector-input"
-      aria-label="QuantitySelector"
-      aria-valuenow="0"
+      :aria-label="inputAriaLabel"
+      :aria-valuenow="currentValue"
       :aria-valuemin="valuemin"
       :aria-valuemax="valuemax"
       :placeholder="placeholder"
       :size="small ? 's' : null"
+      role="spinbutton"
       @input="handle"
+      @keypress="integerOnly && formatValue($event)"
     />
 
     <m-button
@@ -32,10 +36,12 @@
       theme="bordered"
       icon="ControlMore32"
       icon-position="right"
-      aria-label="Increment"
+      :aria-label="incrementAriaLabel"
       :aria-controls="id"
       :disabled="currentValue === valuemax"
       :size="small ? 's' : null"
+      tabindex="-1"
+      aria-hidden="true"
       @click="increment()"
     />
   </div>
@@ -62,6 +68,18 @@ export default {
       type: Number,
       default: 0,
     },
+    inputAriaLabel: {
+      type: String,
+      default: 'Quantity Selector',
+    },
+    decrementAriaLabel: {
+      type: String,
+      default: 'Decrement',
+    },
+    incrementAriaLabel: {
+      type: String,
+      default: 'Increment',
+    },
     valuemin: {
       type: Number,
       default: 1,
@@ -78,6 +96,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    integerOnly: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -113,6 +135,12 @@ export default {
         this.$emit('decrement', this.currentValue);
       }
     },
+    formatValue(e) {
+      const INTEGER_ONLY_REGEX = /[0-9/]+/;
+      if (!INTEGER_ONLY_REGEX.test(e.key)) {
+        e.preventDefault();
+      }
+    },
   },
 };
 </script>

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>