@mozaic-ds/vue 0.18.0 → 0.19.1

package/package.json

@@ -1,21 +1,31 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.18.0",
+  "version": "0.19.1",
+  "description": "Vue.js implementation of Mozaic Design System",
+  "author": "Adeo - Mozaic Design System",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
+    "lint": "vue-cli-service lint",
     "build:bundle": "vue-cli-service build --target lib --name mozaic-vue ./src/index.js",
     "build:bundleAdeo": "vue-cli-service build --target lib --formats umd --mode adeo --filename mozaic-vue.adeo ./src/index.js --no-clean",
-    "lint": "vue-cli-service lint",
+    "postinstall": "node postinstall.js",
     "prepublishOnly": "npm run-script build:bundle && npm run-script build:bundleAdeo",
     "publish:beta": "npm publish --access public --tag alpha",
-    "tokens:build": "mozaic-tokens-build",
-    "postinstall": "node postinstall.js"
+    "tokens:build": "mozaic-tokens-build"
   },
+  "main": "./dist/mozaic-vue.umd.min.js",
+  "files": [
+    "dist/*",
+    "src/*",
+    "types/*",
+    "*.d.ts",
+    "postinstall.js"
+  ],
   "dependencies": {
     "@mozaic-ds/css-dev-tools": "1.29.1",
-    "@mozaic-ds/icons": "^1.32.0",
-    "@mozaic-ds/styles": "1.31.0",
+    "@mozaic-ds/icons": "1.34.0",
+    "@mozaic-ds/styles": "1.33.0",
     "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "1.9.50",
@@ -26,8 +36,8 @@
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@babel/eslint-parser": "^7.15.8",
-    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-service": "^4.5.15",
+    "@vue/cli-plugin-babel": "~5.0.4",
+    "@vue/cli-service": "~5.0.4",
     "@vue/compiler-sfc": "^3.2.20",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
@@ -41,7 +51,10 @@
     "sass-loader": "^10.2.0",
     "vue-template-compiler": "^2.6.14"
   },
-  "description": "Vue.js implementation of Mozaic Design System",
+  "bugs": {
+    "url": "https://github.com/adeo/mozaic-vue/issues"
+  },
+  "homepage": "https://github.com/adeo/mozaic-vue#readme",
   "keywords": [
     "design system",
     "mozaic design system",
@@ -51,23 +64,10 @@
     "scss",
     "adeo"
   ],
-  "author": "Adeo - Mozaic Design System",
-  "homepage": "https://github.com/adeo/mozaic-vue#readme",
   "license": "ISC",
-  "main": "./dist/mozaic-vue.umd.min.js",
-  "files": [
-    "dist/*",
-    "src/*",
-    "types/*",
-    "*.d.ts",
-    "postinstall.js"
-  ],
-  "types": "./types/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/adeo/mozaic-vue.git"
   },
-  "bugs": {
-    "url": "https://github.com/adeo/mozaic-vue/issues"
-  }
+  "types": "./types/index.d.ts"
 }

package/src/components/accordion/MAccordion.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import MIcon from '../icon/MIcon';
+import MIcon from '../icon/MIcon.vue';
 
 export default {
   name: 'MAccordion',

package/src/components/autocomplete/MAutocomplete.vue

@@ -43,9 +43,9 @@
 </template>
 
 <script>
-import MTextInput from '../textinput/MTextInput';
-import MTag from '../tags/MTag';
-import MListBox from '../listbox/MListBox';
+import MTextInput from '../textinput/MTextInput.vue';
+import MTag from '../tags/MTag.vue';
+import MListBox from '../listbox/MListBox.vue';
 
 export default {
   name: 'MAutocomplete',

package/src/components/breadcrumb/MBreadcrumb.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import MLink from '../link/MLink';
+import MLink from '../link/MLink.vue';
 
 export default {
   name: 'MBreadcrumb',

package/src/components/button/MButton.vue

@@ -47,7 +47,7 @@ import {
   responsiveModifiers,
   responsiveModifierValidators,
 } from '../../utils/mozaicClasses';
-import MIcon from '../icon/MIcon';
+import MIcon from '../icon/MIcon.vue';
 
 export default {
   name: 'MButton',

package/src/components/datatable/MDataTable.vue

@@ -49,7 +49,11 @@
                 allowRowClick && onRowClick({ event: $event, item: item })
               "
             >
-              <slot :name="`item.${header.dataFieldExpr}`" :item="item" :index="rowIndex">
+              <slot
+                :name="`item.${header.dataFieldExpr}`"
+                :item="item"
+                :index="rowIndex"
+              >
                 {{ getItemValue(item, header.dataFieldExpr) }}
               </slot>
             </td>
@@ -62,7 +66,10 @@
         </tbody>
       </table>
     </div>
-    <div v-if="pagingOptions.enabled && total != null" 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'"
@@ -151,7 +158,7 @@ function buildOptions(
   const columnSorters = sortedColmuns.reduce(
     (acc, header) => ({
       ...acc,
-      [header.dataFieldExpr]: header.sortOrder,
+      [header.sortFieldExpr ?? header.dataFieldExpr]: header.sortOrder,
     }),
     {}
   );
@@ -586,8 +593,6 @@ $local-config: (
 
 @import 'settings-tools/_all-settings';
 
-@include import-font-families();
-
 .mc-data-table {
   @include set-font-face();
 
@@ -706,8 +711,6 @@ $local-config: (
     @include set-border-radius('m', 'bottom');
 
     &__item-per-page {
-      min-width: 100px;
-
       & select {
         width: auto;
         font-size: 0.875rem;

package/src/components/fileuploader/MFileUploader.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import MFileResult from './MFileResult';
+import MFileResult from './MFileResult.vue';
 export default {
   name: 'MFileUploader',
   components: {

package/src/components/icon/MIcon.vue

@@ -1,30 +1,18 @@
-<template>
-  <svg
-    :id="`icon-${id}`"
-    :viewBox="viewbox"
-    :height="size"
-    :width="size"
-    :fill="color"
-    aria-hidden="true"
-  >
-    <component
-      :is="path.tagName"
-      v-for="(path, index) in paths"
-      :key="index"
-      v-bind="path.attrs"
-    />
-  </svg>
-</template>
-
 <script>
 export default {
   name: 'MIcon',
 
   props: {
+    /**
+     * Icon name
+     */
     name: {
       type: String,
       required: true,
     },
+    /**
+     * Icon color
+     */
     color: {
       type: String,
       default: 'currentColor',
@@ -94,5 +82,39 @@ export default {
       });
     },
   },
+
+  render: function (createElement) {
+    const paths = this.paths;
+    const svgAttrs = {
+      id: `MIcon-${this.name}-${this.id}`,
+      viewBox: this.viewbox,
+      height: this.size,
+      width: this.size,
+      fill: this.color,
+      'aria-hidden': 'true',
+    };
+
+    function generatePaths(paths) {
+      return paths.map(function (path) {
+        const children = path.children;
+
+        if (children) {
+          return createElement(
+            path.tagName,
+            { attrs: path.attrs },
+            generatePaths(children)
+          );
+        }
+
+        return createElement(path.tagName, { attrs: path.attrs });
+      });
+    }
+
+    if (paths) {
+      return createElement('svg', { attrs: svgAttrs }, generatePaths(paths));
+    }
+
+    return createElement('svg', { attrs: svgAttrs });
+  },
 };
 </script>

package/src/components/layer/MLayer.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import MIcon from '../icon/MIcon';
+import MIcon from '../icon/MIcon.vue';
 
 export default {
   name: 'MLayer',

package/src/components/link/MLink.vue

@@ -26,7 +26,7 @@ import {
   responsiveModifierValidators,
   responsiveModifiers,
 } from '../../utils/mozaicClasses';
-import MIcon from '../icon/MIcon';
+import MIcon from '../icon/MIcon.vue';
 
 export default {
   name: 'MLink',

package/src/components/listbox/MListBox.vue

@@ -31,7 +31,7 @@
   </div>
 </template>
 <script>
-import MCheckbox from '../checkbox/MCheckbox';
+import MCheckbox from '../checkbox/MCheckbox.vue';
 export default {
   name: 'MListbox',
 

package/src/components/notification/MNotification.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import MLink from '../link/MLink';
+import MLink from '../link/MLink.vue';
 
 export default {
   name: 'MNotification',

package/src/components/pagination/MPagination.vue

@@ -46,8 +46,8 @@
 </template>
 
 <script>
-import MIcon from '../icon/MIcon';
-import MSelect from '../select/MSelect';
+import MIcon from '../icon/MIcon.vue';
+import MSelect from '../select/MSelect.vue';
 
 export default {
   name: 'MPagination',

package/src/components/quantityselector/MQuantitySelector.vue

@@ -46,8 +46,8 @@
 </template>
 
 <script>
-import MButton from '../button/MButton';
-import MTextInputField from '../textinput/MTextInputField';
+import MButton from '../button/MButton.vue';
+import MTextInputField from '../textinput/MTextInputField.vue';
 
 export default {
   name: 'MQuantitySelector',

package/src/components/select/MSelect.vue

@@ -7,6 +7,7 @@
     :value="getSelectValue"
     :disabled="disabled"
     @change="onChange($event.target.value)"
+    v-on="inputListeners"
   >
     <option v-if="placeholder" value="" disabled="disabled">
       -- {{ placeholder }} --
@@ -101,6 +102,15 @@ export default {
 
       return classes;
     },
+    inputListeners: function () {
+      // see => https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
+      var vm = this;
+      return Object.assign({}, this.$listeners, {
+        change: function (event) {
+          vm.$emit('change', event.target.value);
+        },
+      });
+    },
   },
 
   mounted() {

package/src/components/stepper/MStepper.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import MIcon from '../icon/MIcon';
+import MIcon from '../icon/MIcon.vue';
 
 export default {
   name: 'MStepper',

package/src/components/tabs/MTab.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import MSelect from '../select/MSelect';
+import MSelect from '../select/MSelect.vue';
 
 export default {
   name: 'MTab',

package/src/components/textinput/MTextInput.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script>
-import MTextInputField from './MTextInputField';
-import MTextInputIcon from './MTextInputIcon';
+import MTextInputField from './MTextInputField.vue';
+import MTextInputIcon from './MTextInputIcon.vue';
 
 export default {
   name: 'MTextInput',

package/src/components/textinput/MTextInputIcon.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import MIcon from '../icon/MIcon';
+import MIcon from '../icon/MIcon.vue';
 
 export default {
   name: 'MTextInputIcon',

package/src/tokens/adeo/android/colors.xml

@@ -73,24 +73,24 @@
   <color name="color_secondary_purple_700">#ff393879</color>
   <color name="color_secondary_purple_800">#ff282863</color>
   <color name="color_secondary_purple_900">#ff1a1a4b</color>
-  <color name="color_secondary_red_100">#fffeedee</color>
-  <color name="color_secondary_red_200">#fffab9bc</color>
-  <color name="color_secondary_red_300">#fff38789</color>
-  <color name="color_secondary_red_400">#ffea5d58</color>
-  <color name="color_secondary_red_500">#ffdf382b</color>
-  <color name="color_secondary_red_600">#ffb42a27</color>
-  <color name="color_secondary_red_700">#ff8b2226</color>
-  <color name="color_secondary_red_800">#ff641b21</color>
-  <color name="color_secondary_red_900">#ff3e1219</color>
-  <color name="color_secondary_orange_100">#fffff5eb</color>
-  <color name="color_secondary_orange_200">#ffffdab2</color>
-  <color name="color_secondary_orange_300">#ffffc17d</color>
-  <color name="color_secondary_orange_400">#ffffab4b</color>
-  <color name="color_secondary_orange_500">#fffc961e</color>
-  <color name="color_secondary_orange_600">#ffc86f21</color>
-  <color name="color_secondary_orange_700">#ff974f20</color>
-  <color name="color_secondary_orange_800">#ff6a351c</color>
-  <color name="color_secondary_orange_900">#ff401f15</color>
+  <color name="color_secondary_red_100">#fffdeaea</color>
+  <color name="color_secondary_red_200">#fff8bcbb</color>
+  <color name="color_secondary_red_300">#fff38d8c</color>
+  <color name="color_secondary_red_400">#ffef5f5c</color>
+  <color name="color_secondary_red_500">#ffea302d</color>
+  <color name="color_secondary_red_600">#ffc61112</color>
+  <color name="color_secondary_red_700">#ff8c0003</color>
+  <color name="color_secondary_red_800">#ff530000</color>
+  <color name="color_secondary_red_900">#ff2d0000</color>
+  <color name="color_secondary_orange_100">#fffdf1e8</color>
+  <color name="color_secondary_orange_200">#fff8d2b3</color>
+  <color name="color_secondary_orange_300">#fff4b27e</color>
+  <color name="color_secondary_orange_400">#ffef934a</color>
+  <color name="color_secondary_orange_500">#ffea7315</color>
+  <color name="color_secondary_orange_600">#ffc65200</color>
+  <color name="color_secondary_orange_700">#ff8c3500</color>
+  <color name="color_secondary_orange_800">#ff531b00</color>
+  <color name="color_secondary_orange_900">#ff360e00</color>
   <color name="color_secondary_yellow_100">#fffff8e2</color>
   <color name="color_secondary_yellow_200">#ffffebaf</color>
   <color name="color_secondary_yellow_300">#fffee07d</color>
@@ -160,7 +160,7 @@
   <color name="color_button_solid_neutral_active_background">#ff3a3936</color>
   <color name="color_button_solid_neutral_hover_background">#ff1e1e1c</color>
   <color name="color_button_solid_neutral_hover_font">#ffffffff</color>
-  <color name="color_button_solid_danger_background">#ffb42a27</color>
+  <color name="color_button_solid_danger_background">#ffc61112</color>
   <color name="color_button_solid_danger_font">#ffffffff</color>
   <color name="color_button_solid_danger_focus_border">#ff8c0003</color>
   <color name="color_button_solid_danger_disabled_background">#ffdddcd5</color>
@@ -193,13 +193,13 @@
   <color name="color_button_bordered_neutral_active_background">#ffdddcd5</color>
   <color name="color_button_bordered_neutral_hover_background">#ffeeedea</color>
   <color name="color_button_bordered_danger_background">#ffffffff</color>
-  <color name="color_button_bordered_danger_border">#ffb42a27</color>
-  <color name="color_button_bordered_danger_font">#ffb42a27</color>
-  <color name="color_button_bordered_danger_focus_border">#ff8b2226</color>
+  <color name="color_button_bordered_danger_border">#ffc61112</color>
+  <color name="color_button_bordered_danger_font">#ffc61112</color>
+  <color name="color_button_bordered_danger_focus_border">#ff8c0003</color>
   <color name="color_button_bordered_danger_disabled_background">#ffdddcd5</color>
   <color name="color_button_bordered_danger_disabled_font">#ff71706b</color>
-  <color name="color_button_bordered_danger_active_background">#fffab9bc</color>
-  <color name="color_button_bordered_danger_hover_background">#fffeedee</color>
+  <color name="color_button_bordered_danger_active_background">#fff8bcbb</color>
+  <color name="color_button_bordered_danger_hover_background">#fffdeaea</color>
   <color name="color_divider_lightest">#ffffffff</color>
   <color name="color_divider_light">#ffc2c1ba</color>
   <color name="color_divider_default">#ff71706b</color>
@@ -225,8 +225,8 @@
   <color name="color_flag_solid_light_background">#ffffffff</color>
   <color name="color_flag_solid_light_border">#ffffffff</color>
   <color name="color_flag_solid_light_text">#ff000000</color>
-  <color name="color_flag_solid_danger_background">#ffb42a27</color>
-  <color name="color_flag_solid_danger_border">#ffb42a27</color>
+  <color name="color_flag_solid_danger_background">#ffc61112</color>
+  <color name="color_flag_solid_danger_border">#ffc61112</color>
   <color name="color_flag_solid_danger_text">#ffffffff</color>
   <color name="color_flag_bordered_background">#ffffffff</color>
   <color name="color_flag_bordered_border">#ff007f8c</color>
@@ -241,11 +241,11 @@
   <color name="color_flag_bordered_light_border">#ffffffff</color>
   <color name="color_flag_bordered_light_text">#ffffffff</color>
   <color name="color_flag_bordered_danger_background">#ffffffff</color>
-  <color name="color_flag_bordered_danger_border">#ffb42a27</color>
-  <color name="color_flag_bordered_danger_text">#ffb42a27</color>
+  <color name="color_flag_bordered_danger_border">#ffc61112</color>
+  <color name="color_flag_bordered_danger_text">#ffc61112</color>
   <color name="color_focus_gap">#ffffffff</color>
   <color name="color_focus_border">#ff758992</color>
-  <color name="color_font_primary_01">#ff00919f</color>
+  <color name="color_font_primary_01">#ff007f8c</color>
   <color name="color_font_primary_02">#ff007574</color>
   <color name="color_font_darkest">#ff000000</color>
   <color name="color_font_darker">#ff1e1e1c</color>
@@ -287,26 +287,30 @@
   <color name="color_link_primary_visited">#ff006974</color>
   <color name="color_link_primary_active">#ff006974</color>
   <color name="color_link_primary_disabled">#ffeeedea</color>
-  <color name="color_link_primary_hover">#ff002e33</color>
+  <color name="color_link_primary_hover">#ff004e57</color>
   <color name="color_link_primary_02_base">#ff035f64</color>
   <color name="color_link_primary_02_visited">#ff044c53</color>
   <color name="color_link_primary_02_active">#ff044c53</color>
   <color name="color_link_primary_02_disabled">#ffeeedea</color>
   <color name="color_link_primary_02_hover">#ff062b35</color>
-  <color name="color_link_danger_base">#ffb42a27</color>
-  <color name="color_link_danger_visited">#ff8b2226</color>
-  <color name="color_link_danger_active">#ff8b2226</color>
+  <color name="color_link_danger_base">#ffc61112</color>
+  <color name="color_link_danger_visited">#ff8c0003</color>
+  <color name="color_link_danger_active">#ff8c0003</color>
   <color name="color_link_danger_disabled">#ffeeedea</color>
-  <color name="color_link_danger_hover">#ff3e1219</color>
+  <color name="color_link_danger_hover">#ff530000</color>
   <color name="color_notification_font">#ff000000</color>
   <color name="color_notification_information_background">#ffdaeff7</color>
   <color name="color_notification_information_border">#ff0b96cc</color>
+  <color name="color_notification_information_icon">#ff007bb4</color>
   <color name="color_notification_success_background">#ffebf5de</color>
   <color name="color_notification_success_border">#ff46a610</color>
+  <color name="color_notification_success_icon">#ff188803</color>
   <color name="color_notification_warning_background">#fffdf1e8</color>
   <color name="color_notification_warning_border">#ffea7315</color>
+  <color name="color_notification_warning_icon">#ffc65200</color>
   <color name="color_notification_danger_background">#fffdeaea</color>
   <color name="color_notification_danger_border">#ffea302d</color>
+  <color name="color_notification_danger_icon">#ffc61112</color>
   <color name="color_progress_background">#ffdddcd5</color>
   <color name="color_progress_indicator">#ff007bb4</color>
   <color name="color_progress_percentage_default">#ff1e1e1c</color>
@@ -314,14 +318,14 @@
   <color name="color_progress_branded_indicator">#ff00919f</color>
   <color name="color_star_empty">#ffdddcd5</color>
   <color name="color_star_focus">#ff758992</color>
-  <color name="color_star_full">#fffc961e</color>
-  <color name="color_star_hover">#ffffc17d</color>
+  <color name="color_star_full">#ffea7315</color>
+  <color name="color_star_hover">#fff4b27e</color>
   <color name="color_tabs_background">#ffffffff</color>
   <color name="color_tabs_shadow">#ff000000</color>
   <color name="color_tabs_default">#ff1e1e1c</color>
-  <color name="color_tabs_hover">#ff007f8c</color>
+  <color name="color_tabs_hover">#ff004e57</color>
   <color name="color_tabs_disabled">#ff71706b</color>
-  <color name="color_tabs_active">#ff00919f</color>
+  <color name="color_tabs_active">#ff007f8c</color>
   <color name="color_tabs_active_disabled">#ff91d5db</color>
   <color name="color_tag_text_light_background">#ffffffff</color>
   <color name="color_tag_text_light_border">#ff8c8b85</color>