@mozaic-ds/vue 0.18.0 → 0.19.0

package/package.json

@@ -1,22 +1,32 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.18.0",
+  "version": "0.19.0",
+  "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/web-fonts": "1.22.0",
+    "@mozaic-ds/css-dev-tools": "^1.29.1",
+    "@mozaic-ds/icons": "^1.30.0",
+    "@mozaic-ds/styles": "^1.30.0",
+    "@mozaic-ds/web-fonts": "^1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "1.9.50",
     "postcss-scss": "^4.0.1",
@@ -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

@@ -151,7 +151,7 @@ function buildOptions(
   const columnSorters = sortedColmuns.reduce(
     (acc, header) => ({
       ...acc,
-      [header.dataFieldExpr]: header.sortOrder,
+      [header.sortFieldExpr ?? header.dataFieldExpr]: header.sortOrder,
     }),
     {}
   );

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',
@@ -49,7 +37,8 @@ export default {
       return () =>
         import(
           /* webpackMode: 'eager' */
-          '@mozaic-ds/icons/js/icons.js'
+          // '@mozaic-ds/icons/js/icons.js'
+          './icons.js' // <= example file
         );
     },
 
@@ -94,5 +83,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>