test: demo app update

Author: farfromrefug

demo-vue/app.webpack.config.js

@@ -5,7 +5,14 @@ const nsWebpack = require('@nativescript/webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');
-
+function fixedFromCharCode(codePt) {
+    if (codePt > 0xffff) {
+        codePt -= 0x10000;
+        return String.fromCharCode(0xd800 + (codePt >> 10), 0xdc00 + (codePt & 0x3ff));
+    } else {
+        return String.fromCharCode(codePt);
+    }
+}
 // temporary hack to support v-model using ns-vue-template-compiler
 // See https://github.com/nativescript-vue/nativescript-vue/issues/371
 NsVueTemplateCompiler.registerElement('MDTextField', () => require('@nativescript-community/ui-material-textfield').TextField, {
@@ -148,8 +155,9 @@ module.exports = (env, params = {}) => {
             test: /\.scss$/,
             exclude: /\.module\.scss$/,
             use: [
+                { loader: 'apply-css-loader' },
                 {
-                    loader: '@nativescript/webpack/dist/loaders/css2json-loader',
+                    loader: 'css2json-loader',
                     options: { useForImports: true }
                 },
                 {
@@ -184,10 +192,10 @@ module.exports = (env, params = {}) => {
             {
                 loader: 'string-replace-loader',
                 options: {
-                    search: 'mdi-([a-z-]+)',
+                    search: 'mdi-([a-z0-9-_]+)',
                     replace: (match, p1, offset, str) => {
                         if (mdiIcons[p1]) {
-                            return String.fromCharCode(parseInt(mdiIcons[p1], 16));
+                            return fixedFromCharCode(parseInt(mdiIcons[p1], 16));
                         }
                         return match;
                     },

demo-vue/app/app.scss

@@ -1,5 +1,5 @@
 .mdi {
-    font-family: 'materialdesignicons-webfont', 'Material Design Icons';
+    font-family: $mdi-fontFamily;
 }
 
 mdbutton,MDFloatingActionButton, MDCardView {

demo-vue/app/examples/BottomNavigationBar.vue

@@ -16,13 +16,16 @@
             <MDBottomNavigationBar
                 ref="bottomBar"
                 row="1"
+                activeColor="blue"
+                inactiveColor="green"
+                 class="mdi"
                 @loaded="onbottomNavigationBarLoaded"
                 @tabPressed="onBottomNavigationTabPressed"
                 @tabSelected="onBottomNavigationTabSelected"
                 @tabReselected="onBottomNavigationTabReselected"
             >
-                <MDBottomNavigationTab title="First" icon="res://ic_home" activeColor="green" />
-                <MDBottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" />
+                <MDBottomNavigationTab title="First" activeColor="green" />
+                <MDBottomNavigationTab title="Second" icon="font://mdi-account" isSelectable="false" class="mdi" />
                 <MDBottomNavigationTab title="Third" icon="res://ic_menu" inactiveColor="brown" />
             </MDBottomNavigationBar>
         </GridLayout>

demo-vue/app/examples/Dialogs.vue

@@ -62,7 +62,7 @@ export default Vue.extend({
                         context: {
                             dataItems: this.dataItems
                         },
-                        view: label
+                        view: label as any
                     }).then(result => {
                         alert(`closed  dialog with customview and result: ${result}`);
                     });
@@ -152,7 +152,7 @@ export default Vue.extend({
                     const dialog = new AlertDialog({
                         // title: 'tsst',
                         // message: null,
-                        view: stack
+                        view: stack as any
                     });
                     dialog.show();
             }

demo-vue/app/examples/Tabs.vue

@@ -79,8 +79,8 @@ export default Vue.extend({
             const items = this.$refs.tabs.nativeView.items.slice(0);
              const item: TabContentItem = new TabContentItem();
         // The createContent is a custom method that returns a StackLayout with a Label as a chils
-            item.content = this.createContent(index);
-        items.push(item);
+            item.content = this.createContent(items.length);
+            items.push(item);
            this.$refs.tabs.nativeView.items = items.slice(0)
         }
     }

demo-vue/package.json

@@ -4,7 +4,7 @@
     "readme": "README.md",
     "main": "app/main",
     "dependencies": {
-        "@mdi/font": "4.9.95",
+        "@mdi/font": "5.9.55",
         "@nativescript/core": "8.0.5",
         "@nativescript-community/text": "1.4.11",
         "@nativescript-community/ui-material-activityindicator": "file:../packages/activityindicator",