test vue demo app

Author: farfromrefug

demo-vue/app/examples/Buttons.vue

@@ -9,6 +9,7 @@
         </ActionBar>
         <ScrollView>
             <StackLayout>
+                <MDButton id="button1" elevation="2" borderRadius="10" fontSize="20" text="raised button" @tap="onTap" />
                 <StackLayout v-if="isEditing">
                         <MDTextField class="session-details-input" :hint="('name')" />
                         <MDTextField class="session-details-input" :hint="('description')"/>
@@ -20,13 +21,16 @@
                 <StackLayout margin="10">
                     <MDButton id="button0" text="default button" @tap="onTap" />
                 </StackLayout>
-                <MDButton id="button1" elevation="2" borderRadius="10" fontSize="20" text="raised button" @tap="onTap" />
                 <MDButton id="button2" class="bg-red" borderRadius="10" color="red" text="text button" variant="text" @tap="onTap">
                     <FormattedString>
                         <Span text="Words " color="#00ff00"></Span>
                         <Span text="with " color="#ff0000" fontAttributes="Bold"></Span>
                     </FormattedString>
                 </MDButton>
+                <MDButton id="button22" class="bg-red" verticalTextAlignment="center" borderRadius="10" color="red" text="text button" variant="text" @tap="onTap">
+                        <Span text="mdi-magnify" fontSize="20" class="mdi"></Span>
+                        <Span text=" search" fontAttributes="Bold"></Span>
+                </MDButton>
                 <MDButton id="button3" text="disabled button"  isEnabled="false" @tap="onTap" />
                 <MDButton id="button3" text="flat button \n test" variant="flat" class="bg-blue" @tap="onTap" />
                 <MDButton id="button4" text="flat disabled button" variant="flat" isEnabled="false" backgroundColor="yellow" @tap="onTap" />

demo-vue/app/examples/Tabs.vue

@@ -7,16 +7,16 @@
             <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
             <TabStrip>
                 <TabStripItem>
-                    <Label text="Home"></Label>
-                    <Image src="font://󰋜" class="mdi"></Image>
+                    <Label text="Home"/>
+                    <Image src="font://mdi-home" class="mdi"/>
                 </TabStripItem>
                 <TabStripItem class="special">
-                    <Label text="Account"></Label>
-                    <Image src="font://󰀄" class="mdi"></Image>
+                    <Label text="Account"/>
+                    <Image src="font://mdi-account" class="mdi"/>
                 </TabStripItem>
                 <TabStripItem class="special">
-                    <Label text="Search"></Label>
-                    <Image src="font://󰜏" class="mdi"></Image>
+                    <Label text="Search"/>
+                    <Image src="font://mdi-magnify" class="mdi"/>
                 </TabStripItem>
             </TabStrip>
 

demo-vue/package.json

@@ -13,8 +13,8 @@
         }
     },
     "dependencies": {
-        "@mdi/font": "^5.0.45",
-        "@nativescript/core": "6.5.0",
+        "@mdi/font": "4.9.95",
+        "@nativescript/core": "6.5.1",
         "@nativescript/theme": "~2.3.3",
         "nativescript-iqkeyboardmanager": "^1.5.1",
         "nativescript-material-activityindicator": "file:../packages/nativescript-material-activityindicator",
@@ -46,8 +46,10 @@
         "nativescript-vue-template-compiler": "^2.5.0",
         "node-sass": "^4.13.1",
         "sass-loader": "^8.0.2",
-        "tns-platform-declarations": "6.5.0",
-        "tslint": "^6.1.0",
+        "scss-symbols-parser": "^2.0.1",
+        "string-replace-loader": "^2.3.0",
+        "tns-platform-declarations": "6.5.1",
+        "tslint": "^6.1.2",
         "tslint-config-prettier": "^1.18.0",
         "tslint-config-standard": "^9.0.0",
         "typescript": "^3.8.3",

demo-vue/webpack.config.js

@@ -1,4 +1,5 @@
 const { join, relative, resolve, sep } = require('path');
+const { readFileSync } = require('fs');
 
 const webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
@@ -199,6 +200,10 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'build', 'configurations', 'nativescript-android-snapshot')}`);
     }
 
+    const symbolsParser = require('scss-symbols-parser');
+    const mdiSymbols = symbolsParser.parseSymbols(readFileSync(resolve(projectRoot, 'node_modules/@mdi/font/scss/_variables.scss')).toString());
+    const mdiIcons = JSON.parse(`{${mdiSymbols.variables[mdiSymbols.variables.length - 1].value.replace(/" (F|0)(.*?)([,\n]|$)/g, '": "$1$2"$3')}}`);
+
     nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: mode,
@@ -306,6 +311,34 @@ module.exports = env => {
                         }
                     ].filter(loader => Boolean(loader))
                 },
+                {
+                    test: /\.vue$/,
+                    loader: 'vue-loader',
+                    options: {
+                        compiler: NsVueTemplateCompiler
+                    }
+                },
+                {
+                    // rules to replace mdi icons and not use nativescript-font-icon
+                    test: /\.(ts|js|css|vue)$/,
+                    exclude: /node_modules/,
+                    use: [
+                        {
+                            loader: 'string-replace-loader',
+                            options: {
+                                search: 'mdi-([a-z-]+)',
+                                replace: (match, p1, offset, string) => {
+                                    if (mdiIcons[p1]) {
+                                        console.log('replace mdi icon', p1, mdiIcons[p1], String.fromCharCode(parseInt(mdiIcons[p1], 16)));
+                                        return String.fromCharCode(parseInt(mdiIcons[p1], 16));
+                                    }
+                                    return match;
+                                },
+                                flags: 'g'
+                            }
+                        }
+                    ]
+                },
                 {
                     test: /[\/|\\]app\.css$/,
                     use: [
@@ -367,13 +400,6 @@ module.exports = env => {
                             declaration: false
                         }
                     }
-                },
-                {
-                    test: /\.vue$/,
-                    loader: 'vue-loader',
-                    options: {
-                        compiler: NsVueTemplateCompiler
-                    }
                 }
             ]
         },