first

.gitignore

@@ -0,0 +1,43 @@
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# Misc
+.DS_Store
+Thumbs.db
+
+# Cordova
+cordova/platforms/
+cordova/plugins/
+cordova/www/
+
+# Production build
+www/

README.md

@@ -0,0 +1,99 @@
+# test
+
+## Framework7 CLI Options
+
+Framework7 app created with following options:
+
+```
+{
+  "cwd": "/Users/kennyname/Documents/Documents/projects/cordova/test",
+  "type": [
+    "cordova",
+    "web"
+  ],
+  "name": "test",
+  "framework": "vue",
+  "template": "tabs",
+  "bundler": "webpack",
+  "cssPreProcessor": "scss",
+  "theming": {
+    "customColor": false,
+    "color": "#007aff",
+    "darkTheme": false,
+    "iconFonts": true,
+    "fillBars": false
+  },
+  "customBuild": false,
+  "webpack": {
+    "developmentSourceMap": true,
+    "productionSourceMap": true,
+    "hashAssets": false,
+    "preserveAssetsPaths": false,
+    "inlineAssets": true
+  },
+  "pkg": "io.tranyi.test",
+  "cordova": {
+    "folder": "cordova",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "plugins": [
+      "cordova-plugin-statusbar",
+      "cordova-plugin-keyboard",
+      "cordova-plugin-splashscreen",
+      "cordova-plugin-wkwebview-file-xhr"
+    ]
+  }
+}
+```
+
+## NPM Scripts
+
+* `npm start` - run development server
+* `npm run build-prod` - build web app for production
+* `npm run build-dev` - build web app using development mode (faster build without minification and optimization)
+* `npm run build-cordova-prod` - build cordova's `www` folder from and build cordova app
+* `npm run build-cordova-dev` - build cordova's `www` folder from and build cordova app using development mode (faster build without minification and optimization)
+* `npm run build-cordova-ios-prod` - build cordova's `www` folder from and build cordova iOS app
+* `npm run build-cordova-ios-dev` - build cordova's `www` folder from and build cordova iOS app using development mode (faster build without minification and optimization)
+* `npm run build-cordova-android-prod` - build cordova's `www` folder from and build cordova Android app
+* `npm run build-cordova-android-dev` - build cordova's `www` folder from and build cordova Android app using development mode (faster build without minification and optimization)
+
+## WebPack
+
+There is a webpack bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in `/src` folder. Webpack config located in `build/webpack.config.js`.
+
+Webpack has specific way of handling static assets (CSS files, images, audios). You can learn more about correct way of doing things on [official webpack documentation](https://webpack.js.org/guides/asset-management/).
+## Cordova
+
+Cordova project located in `cordova` folder. You shouldn't modify content of `cordova/www` folder. Its content will be correctly generated when you call `npm run cordova-build-prod`.
+
+
+
+## Assets
+
+Assets (icons, splash screens) source images located in `assets-src` folder. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:
+
+```
+framework7 generate-assets
+```
+
+Or launch UI where you will be able to change icons and splash screens:
+
+```
+framework7 generate-assets --ui
+```
+
+## Documentation & Resources
+
+* [Framework7 Core Documentation](https://framework7.io/docs/)
+* [Framework7 Vue Documentation](https://framework7.io/vue/)
+
+* [Framework7 Icons Reference](https://framework7.io/icons/)
+* [Community Forum](https://forum.framework7.io)
+
+## Support Framework7
+
+Love Framework7? Support project by donating or pledging on patreon:
+https://patreon.com/vladimirkharlampidi

babel.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {
+      modules: false,
+      targets: {
+        browsers: [
+          'Android >= 5',
+          'IOS >= 9.3',
+          'Edge >= 15',
+          'Safari >= 9.1',
+          'Chrome >= 49',
+          'Firefox >= 31',
+          'Samsung >= 5',
+        ],
+      },
+    }],
+  ],
+  plugins: [
+    'transform-vue-jsx',
+    // "@babel/plugin-transform-runtime",
+    '@babel/plugin-syntax-dynamic-import',
+  ],
+};

build/build.js

@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const ora = require('ora');
+const rm = require('rimraf');
+const chalk = require('chalk');
+const config = require('./webpack.config.js');
+
+const env = process.env.NODE_ENV || 'development';
+const target = process.env.TARGET || 'web';
+const isCordova = target === 'cordova'
+
+const spinner = ora(env === 'production' ? 'building for production...' : 'building development version...');
+spinner.start();
+
+rm(isCordova ? './cordova/www' : './www/', (removeErr) => {
+  if (removeErr) throw removeErr;
+
+  webpack(config, (err, stats) => {
+    if (err) throw err;
+    spinner.stop();
+
+    process.stdout.write(`${stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false,
+    })}\n\n`);
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('Build failed with errors.\n'));
+      process.exit(1);
+    }
+
+    console.log(chalk.cyan('Build complete.\n'));
+  });
+});

build/webpack.config.js

@@ -0,0 +1,205 @@
+const webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+
+const path = require('path');
+
+function resolvePath(dir) {
+  return path.join(__dirname, '..', dir);
+}
+
+const env = process.env.NODE_ENV || 'development';
+const target = process.env.TARGET || 'web';
+const isCordova = target === 'cordova';
+
+
+module.exports = {
+  mode: env,
+  entry: [
+    './src/js/app.js',
+  ],
+  output: {
+    path: resolvePath(isCordova ? 'cordova/www' : 'www'),
+    filename: 'js/app.js',
+    publicPath: '',
+    hotUpdateChunkFilename: 'hot/hot-update.js',
+    hotUpdateMainFilename: 'hot/hot-update.json',
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      vue$: 'vue/dist/vue.esm.js',
+      '@': resolvePath('src'),
+    },
+  },
+  devtool: env === 'production' ? 'source-map' : 'eval',
+  devServer: {
+    hot: true,
+    open: true,
+    compress: true,
+    contentBase: '/www/',
+    disableHostCheck: true,
+    watchOptions: {
+      poll: 1000,
+    },
+  },
+  optimization: {
+    minimizer: [new TerserPlugin({
+      sourceMap: true,
+    })],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        use: 'babel-loader',
+        include: [
+          resolvePath('src'),
+          resolvePath('node_modules/framework7'),
+          resolvePath('node_modules/framework7-vue'),
+
+          resolvePath('node_modules/template7'),
+          resolvePath('node_modules/dom7'),
+          resolvePath('node_modules/ssr-window'),
+        ],
+      },
+
+      {
+        test: /\.vue$/,
+        use: 'vue-loader',
+      },
+      {
+        test: /\.css$/,
+        use: [
+          (env === 'development' ? 'style-loader' : {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../'
+            }
+          }),
+          'css-loader',
+          'postcss-loader',
+        ],
+      },
+      {
+        test: /\.styl(us)?$/,
+        use: [
+          (env === 'development' ? 'style-loader' : {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../'
+            }
+          }),
+          'css-loader',
+          'postcss-loader',
+          'stylus-loader',
+        ],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          (env === 'development' ? 'style-loader' : {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../'
+            }
+          }),
+          'css-loader',
+          'postcss-loader',
+          'less-loader',
+        ],
+      },
+      {
+        test: /\.(sa|sc)ss$/,
+        use: [
+          (env === 'development' ? 'style-loader' : {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../'
+            }
+          }),
+          'css-loader',
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'images/[name].[ext]',
+
+        },
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'media/[name].[ext]',
+
+        },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'fonts/[name].[ext]',
+
+        },
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(env),
+      'process.env.TARGET': JSON.stringify(target),
+    }),
+    new VueLoaderPlugin(),
+    ...(env === 'production' ? [
+      new OptimizeCSSPlugin({
+        cssProcessorOptions: {
+          safe: true,
+          map: { inline: false },
+        },
+      }),
+      new webpack.optimize.ModuleConcatenationPlugin(),
+    ] : [
+      // Development only plugins
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.NamedModulesPlugin(),
+    ]),
+    new HtmlWebpackPlugin({
+      filename: './index.html',
+      template: './src/index.html',
+      inject: true,
+      minify: env === 'production' ? {
+        collapseWhitespace: true,
+        removeComments: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true
+      } : false,
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'css/app.css',
+    }),
+    new CopyWebpackPlugin([
+      {
+        from: resolvePath('src/static'),
+        to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
+      },
+
+    ]),
+
+
+  ],
+};

cordova/config.xml

@@ -0,0 +1,91 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget id="io.tranyi.test" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>test</name>
+    <description>
+        A sample Apache Cordova application that responds to the deviceready event.
+    </description>
+    <author email="dev@cordova.apache.org" href="http://cordova.io">
+        Apache Cordova Team
+    </author>
+    <content src="index.html" />
+    <plugin name="cordova-plugin-whitelist" spec="1" />
+    <access origin="*" />
+    <allow-intent href="http://*/*" />
+    <allow-intent href="https://*/*" />
+    <allow-intent href="tel:*" />
+    <allow-intent href="sms:*" />
+    <allow-intent href="mailto:*" />
+    <allow-intent href="geo:*" />
+    <platform name="android">
+        <allow-intent href="market:*" />
+    </platform>
+    <platform name="ios">
+        <allow-intent href="itms:*" />
+        <allow-intent href="itms-apps:*" />
+    </platform>
+
+    <allow-navigation href="*" />
+
+    <platform name="android">
+      <preference name="StatusBarOverlaysWebView" value="false" />
+      <preference name="android-minSdkVersion" value="21" />
+      <preference name="SplashMaintainAspectRatio" value="true" />
+      <splash density="land-hdpi" src="res/screen/android/drawable-hdpi/screen.png" />
+      <splash density="land-mdpi" src="res/screen/android/drawable-mdpi/screen.png" />
+      <splash density="land-xhdpi" src="res/screen/android/drawable-xhdpi/screen.png" />
+      <splash density="land-xxhdpi" src="res/screen/android/drawable-xxhdpi/screen.png" />
+      <splash density="land-xxxhdpi" src="res/screen/android/drawable-xxxhdpi/screen.png" />
+      <splash density="port-hdpi" src="res/screen/android/drawable-hdpi/screen.png" />
+      <splash density="port-mdpi" src="res/screen/android/drawable-mdpi/screen.png" />
+      <splash density="port-xhdpi" src="res/screen/android/drawable-xhdpi/screen.png" />
+      <splash density="port-xxhdpi" src="res/screen/android/drawable-xxhdpi/screen.png" />
+      <splash density="port-xxxhdpi" src="res/screen/android/drawable-xxxhdpi/screen.png" />
+      <icon density="ldpi" src="res/icon/android/mipmap-ldpi/ic_launcher.png" />
+      <icon density="mdpi" src="res/icon/android/mipmap-mdpi/ic_launcher.png" />
+      <icon density="hdpi" src="res/icon/android/mipmap-hdpi/ic_launcher.png" />
+      <icon density="xhdpi" src="res/icon/android/mipmap-xhdpi/ic_launcher.png" />
+      <icon density="xxhdpi" src="res/icon/android/mipmap-xxhdpi/ic_launcher.png" />
+      <icon density="xxxhdpi" src="res/icon/android/mipmap-xxxhdpi/ic_launcher.png" />
+    </platform>
+
+
+    <platform name="ios">
+      <config-file parent="CFBundleAllowMixedLocalizations" platform="ios" target="*-Info.plist">
+        <true />
+      </config-file>
+      <preference name="StatusBarOverlaysWebView" value="true" />
+      <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
+      <icon height="180" src="res/icon/ios/icon-60x60@3x.png" width="180" />
+      <icon height="60" src="res/icon/ios/icon-60x60@1x.png" width="60" />
+      <icon height="120" src="res/icon/ios/icon-60x60@2x.png" width="120" />
+      <icon height="76" src="res/icon/ios/icon-76x76@1x.png" width="76" />
+      <icon height="152" src="res/icon/ios/icon-76x76@2x.png" width="152" />
+      <icon height="228" src="res/icon/ios/icon-76x76@3x.png" width="228" />
+      <icon height="40" src="res/icon/ios/icon-40x40@1x.png" width="40" />
+      <icon height="80" src="res/icon/ios/icon-40x40@2x.png" width="80" />
+      <icon height="87" src="res/icon/ios/icon-29x29@3x.png" width="87" />
+      <icon height="57" src="res/icon/ios/icon-57x57@1x.png" width="57" />
+      <icon height="114" src="res/icon/ios/icon-57x57@2x.png" width="114" />
+      <icon height="72" src="res/icon/ios/icon-72x72@1x.png" width="72" />
+      <icon height="144" src="res/icon/ios/icon-72x72@2x.png" width="144" />
+      <icon height="167" src="res/icon/ios/icon-83.5x83.5@2x.png" width="167" />
+      <icon height="29" src="res/icon/ios/icon-29x29@1x.png" width="29" />
+      <icon height="58" src="res/icon/ios/icon-29x29@2x.png" width="58" />
+      <icon height="50" src="res/icon/ios/icon-50x50@1x.png" width="50" />
+      <icon height="100" src="res/icon/ios/icon-50x50@2x.png" width="100" />
+      <icon height="167" src="res/icon/ios/icon-83.5x83.5@2x.png" width="167" />
+      <icon height="1024" src="res/icon/ios/icon-512x512@2x.png" width="1024" />
+    </platform>
+
+
+    <preference name="UIWebViewBounce" value="false" />
+    <preference name="DisallowOverscroll" value="true" />
+    <preference name="BackupWebStorage" value="local" />
+    <preference name="AutoHideSplashScreen" value="false" />
+    <preference name="ShowSplashScreenSpinner" value="false" />
+    <preference name="SplashScreenDelay" value="0" />
+    <preference name="Suppresses3DTouchGesture" value="true" />
+    <preference name="Allow3DTouchLinkPreview" value="false" />
+    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
+    <preference name="AllowInlineMediaPlayback" value="true" />
+</widget>

cordova/hooks/README.md

@@ -0,0 +1,23 @@
+<!--
+#
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+#  KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+#
+-->
+# Cordova Hooks
+
+Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system  to customize cordova commands. See Hooks Guide for more details:  http://cordova.apache.org/docs/en/edge/guide_appdev_hooks_index.md.html#Hooks%20Guide.

cordova/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "io.tranyi.test",
+  "displayName": "test",
+  "version": "1.0.0",
+  "description": "A sample Apache Cordova application that responds to the deviceready event.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "ecosystem:cordova"
+  ],
+  "author": "Apache Cordova Team",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "cordova-android": "^8.0.0",
+    "cordova-browser": "^6.0.0",
+    "cordova-ios": "^5.0.1",
+    "cordova-plugin-keyboard": "^1.2.0",
+    "cordova-plugin-splashscreen": "^5.0.2",
+    "cordova-plugin-statusbar": "^2.4.2",
+    "cordova-plugin-wkwebview-engine": "^1.1.4",
+    "cordova-plugin-wkwebview-file-xhr": "^2.1.1",
+    "phonegap-plugin-barcodescanner": "^8.0.1"
+  },
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-statusbar": {},
+      "cordova-plugin-keyboard": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-wkwebview-file-xhr": {},
+      "cordova-plugin-whitelist": {},
+      "phonegap-plugin-barcodescanner": {
+        "ANDROID_SUPPORT_V4_VERSION": "27.+"
+      }
+    },
+    "platforms": [
+      "ios",
+      "android",
+      "browser"
+    ]
+  },
+  "devDependencies": {
+    "cordova-plugin-whitelist": "^1.3.3"
+  }
+}

package.json

@@ -0,0 +1,116 @@
+{
+  "name": "test",
+  "private": true,
+  "version": "1.0.0",
+  "description": "test",
+  "repository": "",
+  "license": "UNLICENSED",
+  "framework7": {
+    "cwd": "/Users/kennyname/Documents/Documents/projects/cordova/test",
+    "type": [
+      "cordova",
+      "web"
+    ],
+    "name": "test",
+    "framework": "vue",
+    "template": "tabs",
+    "bundler": "webpack",
+    "cssPreProcessor": "scss",
+    "theming": {
+      "customColor": false,
+      "color": "#007aff",
+      "darkTheme": false,
+      "iconFonts": true,
+      "fillBars": false
+    },
+    "customBuild": false,
+    "webpack": {
+      "developmentSourceMap": true,
+      "productionSourceMap": true,
+      "hashAssets": false,
+      "preserveAssetsPaths": false,
+      "inlineAssets": true
+    },
+    "pkg": "io.tranyi.test",
+    "cordova": {
+      "folder": "cordova",
+      "platforms": [
+        "ios",
+        "android"
+      ],
+      "plugins": [
+        "cordova-plugin-statusbar",
+        "cordova-plugin-keyboard",
+        "cordova-plugin-splashscreen",
+        "cordova-plugin-wkwebview-engine"
+      ]
+    }
+  },
+  "scripts": {
+    "build-dev": "cross-env NODE_ENV=development node ./build/build.js",
+    "build-prod": "cross-env NODE_ENV=production node ./build/build.js",
+    "build-cordova-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build",
+    "build-cordova-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build",
+    "build-cordova-ios-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build ios",
+    "build-cordova-ios-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build ios",
+    "build-cordova-android-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build android",
+    "build-cordova-android-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build android",
+    "demo": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova run browser",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
+    "start": "npm run dev",
+    "postinstall": "cpy './node_modules/framework7-icons/fonts/*.*' './src/fonts/'"
+  },
+  "browserslist": [
+    "Android >= 5",
+    "IOS >= 9.3",
+    "Edge >= 15",
+    "Safari >= 9.1",
+    "Chrome >= 49",
+    "Firefox >= 31",
+    "Samsung >= 5"
+  ],
+  "dependencies": {
+    "axios": "^0.18.0",
+    "dom7": "^2.1.3",
+    "framework7": "^4.4.0",
+    "framework7-icons": "^2.3.1",
+    "framework7-vue": "^4.4.0",
+    "template7": "^1.4.1",
+    "vue": "^2.6.10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-syntax-jsx": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/runtime": "^7.4.5",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-transform-vue-jsx": "^4.0.1",
+    "chalk": "^2.4.2",
+    "copy-webpack-plugin": "^5.0.3",
+    "cpy-cli": "^2.0.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.6.0",
+    "node-sass": "^4.12.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "ora": "^3.4.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.6.0",
+    "rimraf": "^2.6.3",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "terser-webpack-plugin": "^1.3.0",
+    "url-loader": "^1.1.2",
+    "vue-loader": "^15.7.0",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.32.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.4.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-env': {},
+  },
+};

src/components/app.vue

@@ -0,0 +1,174 @@
+<template>
+<f7-app :params="f7params" >
+  <!-- Status bar overlay for fullscreen mode-->
+  <f7-statusbar></f7-statusbar>
+
+  <!-- Left panel with cover effect-->
+  <f7-panel left cover theme-dark>
+    <f7-view>
+      <f7-page>
+        <f7-navbar title="Left Panel"></f7-navbar>
+        <f7-block>Left panel content goes here</f7-block>
+      </f7-page>
+    </f7-view>
+  </f7-panel>
+
+
+  <!-- Right panel with reveal effect-->
+  <f7-panel right reveal theme-dark>
+    <f7-view>
+      <f7-page>
+        <f7-navbar title="Right Panel"></f7-navbar>
+        <f7-block>Right panel content goes here</f7-block>
+      </f7-page>
+    </f7-view>
+  </f7-panel>
+
+
+  <!-- Views/Tabs container -->
+  <f7-views tabs class="safe-areas">
+    <!-- Tabbar for switching views-tabs -->
+    <f7-toolbar tabbar labels bottom>
+      <f7-link tab-link="#view-home" tab-link-active icon-ios="f7:home_fil" icon-aurora="f7:home_fil" icon-md="material:home" text="Home"></f7-link>
+      <f7-link tab-link="#view-catalog" icon-ios="f7:list_fill" icon-aurora="f7:list_fill" icon-md="material:view_list" text="Catalog"></f7-link>
+      <f7-link tab-link="#view-settings" icon-ios="f7:settings_fill" icon-aurora="f7:settings_fill" icon-md="material:settings" text="Settings"></f7-link>
+    </f7-toolbar>
+
+    <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
+    <f7-view id="view-home" main tab tab-active url="/"></f7-view>
+
+    <!-- Catalog View -->
+    <f7-view id="view-catalog" name="catalog" tab url="/catalog/"></f7-view>
+
+    <!-- Settings View -->
+    <f7-view id="view-settings" name="settings" tab url="/settings/"></f7-view>
+
+  </f7-views>
+
+
+  <!-- Popup -->
+  <f7-popup id="my-popup">
+    <f7-view>
+      <f7-page>
+        <f7-navbar title="Popup">
+          <f7-nav-right>
+            <f7-link popup-close>Close</f7-link>
+          </f7-nav-right>
+        </f7-navbar>
+        <f7-block>
+          <p>Popup content goes here.</p>
+        </f7-block>
+      </f7-page>
+    </f7-view>
+  </f7-popup>
+
+  <f7-login-screen id="my-login-screen">
+    <f7-view>
+      <f7-page login-screen>
+        <f7-login-screen-title>Login</f7-login-screen-title>
+        <f7-list form>
+          <f7-list-input
+            type="text"
+            name="username"
+            placeholder="Your username"
+            :value="username"
+            @input="username = $event.target.value"
+          ></f7-list-input>
+          <f7-list-input
+            type="password"
+            name="password"
+            placeholder="Your password"
+            :value="password"
+            @input="password = $event.target.value"
+          ></f7-list-input>
+        </f7-list>
+        <f7-list>
+          <f7-list-button title="Sign In" login-screen-close @click="alertLoginData"></f7-list-button>
+          <f7-block-footer>
+            Some text about login information.<br>Click "Sign In" to close Login Screen
+          </f7-block-footer>
+        </f7-list>
+      </f7-page>
+    </f7-view>
+  </f7-login-screen>
+</f7-app>
+</template>
+<script>
+  import cordovaApp from '../js/cordova-app.js';
+  import routes from '../js/routes.js';
+
+  export default {
+    data() {
+      return {
+        // Framework7 Parameters
+        f7params: {
+          id: 'io.tranyi.test', // App bundle ID
+          name: 'test', // App name
+          theme: 'auto', // Automatic theme detection
+          // App root data
+          data: function () {
+            return {
+              user: {
+                firstName: 'John',
+                lastName: 'Doe',
+              },
+              // Demo products for Catalog section
+              products: [
+                {
+                  id: '1',
+                  title: 'Apple iPhone 8',
+                  description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
+                },
+                {
+                  id: '2',
+                  title: 'Apple iPhone 8 Plus',
+                  description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
+                },
+                {
+                  id: '3',
+                  title: 'Apple iPhone X',
+                  description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
+                },
+              ]
+            };
+          },
+
+          // App routes
+          routes: routes,
+
+
+
+          // Input settings
+          input: {
+            scrollIntoViewOnFocus: this.$device.cordova && !this.$device.electron,
+            scrollIntoViewCentered: this.$device.cordova && !this.$device.electron,
+          },
+          // Cordova Statusbar settings
+          statusbar: {
+            overlay: this.$device.cordova && this.$device.ios || 'auto',
+            iosOverlaysWebView: true,
+            androidOverlaysWebView: false,
+          },
+        },
+
+        // Login screen data
+        username: '',
+        password: '',
+      }
+    },
+    methods: {
+      alertLoginData() {
+        this.$f7.dialog.alert('Username: ' + this.username + '<br>Password: ' + this.password);
+      }
+    },
+    mounted() {
+      this.$f7ready((f7) => {
+        // Init cordova APIs (see cordova-app.js)
+        if (f7.device.cordova) {
+          cordovaApp.init(f7);
+        }
+        // Call F7 APIs here
+      });
+    }
+  }
+</script>

src/css/app.scss

@@ -0,0 +1,6 @@
+/* iOS Cordova Tweak */
+.device-cordova.device-ios {
+  height: 100vh;
+}
+
+/* Your app custom styles here */

src/css/icons.css

@@ -0,0 +1,61 @@
+/* Material Icons Font (for MD theme) */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/MaterialIcons-Regular.eot);
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
+       url(../fonts/MaterialIcons-Regular.woff) format('woff'),
+       url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+}
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'liga';
+}
+
+/* Framework7 Icons Font (for iOS theme) */
+@font-face {
+  font-family: 'Framework7 Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/Framework7Icons-Regular.eot");
+  src: url("../fonts/Framework7Icons-Regular.woff2") format("woff2"),
+       url("../fonts/Framework7Icons-Regular.woff") format("woff"),
+       url("../fonts/Framework7Icons-Regular.ttf") format("truetype");
+}
+.f7-icons {
+  font-family: 'Framework7 Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 28px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+  text-align: center;
+}

src/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <!--
+  Customize this policy to fit your own app's needs. For more guidance, see:
+      https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
+  Some notes:
+    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
+    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
+    * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
+      * Enable inline JS: add 'unsafe-inline' to default-src
+  -->
+  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
+
+  <meta name="theme-color" content="#007aff">
+  <meta name="format-detection" content="telephone=no">
+  <meta name="msapplication-tap-highlight" content="no">
+  <title>test</title>
+  <% if (process.env.TARGET === 'web') { %>
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
+  <link rel="icon" href="static/icons/favicon.png">
+  
+  <% } %>
+  <!-- built styles file will be auto injected -->
+</head>
+<body>
+  <div id="app"></div>
+  <% if (process.env.TARGET === 'cordova') { %>
+  <script src="cordova.js"></script>
+  <% } %>
+  <!-- built script files will be auto injected -->
+</body>
+</html>

src/js/app.js

@@ -0,0 +1,32 @@
+// Import Vue
+import Vue from 'vue';
+
+// Import Framework7
+import Framework7 from 'framework7/framework7.esm.bundle.js';
+
+// Import Framework7-Vue Plugin
+import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';
+
+// Import Framework7 Styles
+import 'framework7/css/framework7.bundle.css';
+
+// Import Icons and App Custom Styles
+import '../css/icons.css';
+import '../css/app.scss';
+
+// Import App Component
+import App from '../components/app.vue';
+
+// Init Framework7-Vue Plugin
+Framework7.use(Framework7Vue);
+
+// Init App
+new Vue({
+  el: '#app',
+  render: (h) => h(App),
+
+  // Register App Component
+  components: {
+    app: App
+  },
+});

src/js/cordova-app.js

@@ -0,0 +1,96 @@
+var cordovaApp = {
+  f7: null,
+  /*
+  This method hides splashscreen after 2 seconds
+  */
+  handleSplashscreen: function() {
+    var f7 = cordovaApp.f7;
+    if (!window.navigator.splashscreen || f7.device.electron) return;
+    setTimeout(() => {
+      window.navigator.splashscreen.hide();
+    }, 2000);
+  },
+  /*
+  This method prevents back button tap to exit from app on android.
+  And allows to exit app on backbutton double tap
+  */
+  handleAndroidBackButton: function () {
+    var f7 = cordovaApp.f7;
+    if (f7.device.electron) return;
+    cordovaApp.backButtonTimestamp = new Date().getTime();
+    document.addEventListener('backbutton', function (e) {
+      if (new Date().getTime() - cordovaApp.backButtonTimestamp < 250) {
+        cordovaApp.backButtonTimestamp = new Date().getTime();
+        if (window.navigator.app && window.navigator.app.exitApp) {
+          window.navigator.app.exitApp();
+        }
+        return true;
+      }
+      cordovaApp.backButtonTimestamp = new Date().getTime();
+      e.preventDefault();
+      return false;
+    }, false);
+  },
+  /*
+  This method does the following:
+    - provides cross-platform view "shrinking" on keyboard open/close
+    - hides keyboard accessory bar for all inputs except where it required
+  */
+  handleKeyboard: function () {
+    var f7 = cordovaApp.f7;
+    if (!window.Keyboard || !window.Keyboard.shrinkView || f7.device.electron) return;
+    var $ = f7.$;
+    window.Keyboard.shrinkView(false);
+    window.Keyboard.disableScrollingInShrinkView(true);
+    window.Keyboard.hideFormAccessoryBar(true);
+    window.addEventListener('keyboardWillShow', () => {
+      f7.input.scrollIntoView(document.activeElement, 0, true, true);
+    });
+    window.addEventListener('keyboardDidShow', () => {
+      f7.input.scrollIntoView(document.activeElement, 0, true, true);
+    });
+    window.addEventListener('keyboardDidHide', () => {
+      if (document.activeElement && $(document.activeElement).parents('.messagebar').length) {
+        return;
+      }
+      window.Keyboard.hideFormAccessoryBar(false);
+    });
+    window.addEventListener('keyboardHeightWillChange', (event) => {
+      var keyboardHeight = event.keyboardHeight;
+      if (keyboardHeight > 0) {
+        // Keyboard is going to be opened
+        document.body.style.height = `calc(100% - ${keyboardHeight}px)`;
+        $('html').addClass('device-with-keyboard');
+      } else {
+        // Keyboard is going to be closed
+        document.body.style.height = '';
+        $('html').removeClass('device-with-keyboard');
+      }
+
+    });
+    $(document).on('touchstart', 'input, textarea, select', function (e) {
+      var nodeName = e.target.nodeName.toLowerCase();
+      var type = e.target.type;
+      var showForTypes = ['datetime-local', 'time', 'date', 'datetime'];
+      if (nodeName === 'select' || showForTypes.indexOf(type) >= 0) {
+        window.Keyboard.hideFormAccessoryBar(false);
+      } else {
+        window.Keyboard.hideFormAccessoryBar(true);
+      }
+    }, true);
+  },
+  init: function (f7) {
+    // Save f7 instance
+    cordovaApp.f7 = f7;
+
+    // Handle Android back button
+    cordovaApp.handleAndroidBackButton();
+
+    // Handle Statusbar
+    cordovaApp.handleSplashscreen();
+
+    // Handle Keyboard
+    cordovaApp.handleKeyboard();
+  },
+};
+export default cordovaApp;

src/js/routes.js

@@ -0,0 +1,99 @@
+
+import HomePage from '../pages/home.vue';
+import AboutPage from '../pages/about.vue';
+import FormPage from '../pages/form.vue';
+import CatalogPage from '../pages/catalog.vue';
+import ProductPage from '../pages/product.vue';
+import SettingsPage from '../pages/settings.vue';
+
+import DynamicRoutePage from '../pages/dynamic-route.vue';
+import RequestAndLoad from '../pages/request-and-load.vue';
+import NotFoundPage from '../pages/404.vue';
+
+var routes = [
+  {
+    path: '/',
+    component: HomePage,
+  },
+  {
+    path: '/about/',
+    component: AboutPage,
+  },
+  {
+    path: '/form/',
+    component: FormPage,
+  },
+  {
+    path: '/catalog/',
+    component: CatalogPage,
+  },
+  {
+    path: '/product/:id/',
+    component: ProductPage,
+  },
+  {
+    path: '/settings/',
+    component: SettingsPage,
+  },
+
+  {
+    path: '/dynamic-route/blog/:blogId/post/:postId/',
+    component: DynamicRoutePage,
+  },
+  {
+    path: '/request-and-load/user/:userId/',
+    async: function (routeTo, routeFrom, resolve, reject) {
+      // Router instance
+      var router = this;
+
+      // App instance
+      var app = router.app;
+
+      // Show Preloader
+      app.preloader.show();
+
+      // User ID from request
+      var userId = routeTo.params.userId;
+
+      // Simulate Ajax Request
+      setTimeout(function () {
+        // We got user data from request
+        var user = {
+          firstName: 'Vladimir',
+          lastName: 'Kharlampidi',
+          about: 'Hello, i am creator of Framework7! Hope you like it!',
+          links: [
+            {
+              title: 'Framework7 Website',
+              url: 'http://framework7.io',
+            },
+            {
+              title: 'Framework7 Forum',
+              url: 'http://forum.framework7.io',
+            },
+          ]
+        };
+        // Hide Preloader
+        app.preloader.hide();
+
+        // Resolve route to load page
+        resolve(
+          {
+            component: RequestAndLoad,
+          },
+          {
+            context: {
+              user: user,
+            }
+          }
+        );
+      }, 1000);
+    },
+  },
+  {
+    path: '(.*)',
+    component: NotFoundPage,
+  },
+];
+
+export default routes;

src/pages/404.vue

@@ -0,0 +1,12 @@
+<template>
+  <f7-page>
+    <f7-navbar title="Not found" back-link="Back"></f7-navbar>
+    <f7-block strong>
+      <p>Sorry</p>
+      <p>Requested content not found.</p>
+    </f7-block>
+  </f7-page>
+</template>
+<script>
+  export default {};
+</script>

src/pages/about.vue

@@ -0,0 +1,15 @@
+<template>
+  <f7-page name="about">
+    <f7-navbar title="About" back-link="Back"></f7-navbar>
+    <f7-block-title>About My App</f7-block-title>
+    <f7-block strong>
+      <p>Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis sint nemo consequuntur, fugiat. Eius perferendis animi autem incidunt vel quod tenetur nostrum, voluptate omnis quasi quidem illum consequuntur, a, quisquam.</p>
+      <p>Laudantium neque magnam vitae nemo quam commodi, in cum dolore obcaecati laborum, excepturi harum, optio qui, consequuntur? Obcaecati dolor sequi nesciunt culpa quia perspiciatis, reiciendis ex debitis, ut tenetur alias.</p>
+    </f7-block>
+    <f7-block>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique, saepe iste consectetur in repellat ut minus quibusdam!</p>
+      <p>Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis, aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius, velit corrupti reprehenderit dignissimos consequatur!</p>
+      <p>Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil, iusto doloribus a at! Ea molestiae ullam delectus!</p>
+    </f7-block>
+  </f7-page>
+</template>

src/pages/catalog.vue

@@ -0,0 +1,22 @@
+<template>
+  <f7-page name="catalog">
+    <f7-navbar title="Catalog"></f7-navbar>
+    <f7-list>
+      <f7-list-item
+        v-for="(product) in products"
+        :key="product.id"
+        :title="product.title"
+        :link="`/product/${product.id}/`"
+      ></f7-list-item>
+    </f7-list>
+  </f7-page>
+</template>
+<script>
+  export default {
+    data: function () {
+      return {
+        products: this.$f7.data.products,
+      };
+    }
+  };
+</script>

src/pages/dynamic-route.vue

@@ -0,0 +1,29 @@
+<template>
+  <f7-page>
+    <f7-navbar title="Dynamic Route" back-link="Back"></f7-navbar>
+    <f7-block strong>
+      <ul>
+        <li><b>Url:</b> {{$f7route.url}}</li>
+        <li><b>Path:</b> {{$f7route.path}}</li>
+        <li><b>Hash:</b> {{$f7route.hash}}</li>
+        <li><b>Params:</b>
+          <ul>
+            <li v-for="(value, key) in $f7route.params" :key="key"><b>{{key}}:</b> {{value}}</li>
+          </ul>
+        </li>
+        <li><b>Query:</b>
+          <ul>
+            <li v-for="(value, key) in $f7route.query" :key="key"><b>{{key}}:</b> {{value}}</li>
+          </ul>
+        </li>
+        <li><b>Route:</b> {{$f7route.route.path}}</li>
+      </ul>
+    </f7-block>
+    <f7-block strong>
+      <f7-link @click="$f7router.back()">Go back via Router API</f7-link>
+    </f7-block>
+  </f7-page>
+</template>
+<script>
+  export default {};
+</script>

src/pages/form.vue

@@ -0,0 +1,158 @@
+<template>
+  <f7-page name="form">
+    <f7-navbar title="Form" back-link="Back"></f7-navbar>
+
+    <f7-block-title>Form Example</f7-block-title>
+    <f7-list no-hairlines-md>
+      <f7-list-input
+        label="Name"
+        type="text"
+        placeholder="Your name"
+      ></f7-list-input>
+
+      <f7-list-input
+        label="E-mail"
+        type="email"
+        placeholder="E-mail"
+      ></f7-list-input>
+
+      <f7-list-input
+        label="URL"
+        type="url"
+        placeholder="URL"
+      ></f7-list-input>
+
+      <f7-list-input
+        label="Password"
+        type="password"
+        placeholder="Password"
+      ></f7-list-input>
+
+      <f7-list-input
+        label="Phone"
+        type="tel"
+        placeholder="Phone"
+      ></f7-list-input>
+
+      <f7-list-input
+        label="Gender"
+        type="select"
+        >
+        <option>Male</option>
+        <option>Female</option>
+      </f7-list-input>
+
+      <f7-list-input
+        label="Birth date"
+        type="date"
+        placeholder="Birth day"
+        defaultValue="2014-04-30"
+      ></f7-list-input>
+
+      <f7-list-item
+        title="Toggle"
+      >
+        <f7-toggle slot="after"></f7-toggle>
+      </f7-list-item>
+
+      <f7-list-input
+        label="Range"
+        :input="false"
+      >
+        <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
+      </f7-list-input>
+
+      <f7-list-input
+        type="textarea"
+        label="Textarea"
+        placeholder="Bio"
+      ></f7-list-input>
+      <f7-list-input
+        type="textarea"
+        label="Resizable"
+        placeholder="Bio"
+        resizable
+      ></f7-list-input>
+    </f7-list>
+
+    <f7-block-title>Buttons</f7-block-title>
+    <f7-block strong>
+      <f7-row tag="p">
+        <f7-button class="col">Button</f7-button>
+        <f7-button class="col" fill>Fill</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" raised>Raised</f7-button>
+        <f7-button class="col" raised fill>Raised Fill</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" round>Round</f7-button>
+        <f7-button class="col" round fill>Round Fill</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" outline>Outline</f7-button>
+        <f7-button class="col" round outline>Outline Round</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" small outline>Small</f7-button>
+        <f7-button class="col" small round outline>Small Round</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" small fill>Small</f7-button>
+        <f7-button class="col" small round fill>Small Round</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" large raised>Large</f7-button>
+        <f7-button class="col" large fill raised>Large Fill</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" large fill raised color="red">Large Red</f7-button>
+        <f7-button class="col" large fill raised color="green">Large Green</f7-button>
+      </f7-row>
+    </f7-block>
+
+    <f7-block-title>Checkbox group</f7-block-title>
+    <f7-list>
+      <f7-list-item
+        checkbox
+        name="my-checkbox"
+        value="Books"
+        title="Books"
+      ></f7-list-item>
+      <f7-list-item
+        checkbox
+        name="my-checkbox"
+        value="Movies"
+        title="Movies"
+      ></f7-list-item>
+      <f7-list-item
+        checkbox
+        name="my-checkbox"
+        value="Food"
+        title="Food"
+      ></f7-list-item>
+    </f7-list>
+
+    <f7-block-title>Radio buttons group</f7-block-title>
+    <f7-list>
+      <f7-list-item
+        radio
+        name="radio"
+        value="Books"
+        title="Books"
+      ></f7-list-item>
+      <f7-list-item
+        radio
+        name="radio"
+        value="Movies"
+        title="Movies"
+      ></f7-list-item>
+      <f7-list-item
+        radio
+        name="radio"
+        value="Food"
+        title="Food"
+      ></f7-list-item>
+    </f7-list>
+  </f7-page>
+</template>

src/pages/home.vue

@@ -0,0 +1,184 @@
+<template>
+  <f7-page name="home">
+    
+    <div class="view view-main">
+      <!-- Navbar -->
+      <div class="navbar">
+        <div class="navbar-inner">
+          <div class="left">
+            <a href="#" @click="scanner" class="link icon-only"><i class="f7-icons size-50">add_round</i></a>
+          </div>
+          <div class="center sliding">KixScanner</div>
+        </div>
+      </div>
+
+      <!-- Pages -->
+      <div class="pages navbar-through toolbar-through">
+        <div data-page="index" class="page">
+          <div class="page-content" v-if="loading=='1'">
+            <div class="card">
+              <div class="card-content">
+                <div class="load-wrapp">
+                  <div class="load-3">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="page-content" v-else>
+            <template v-if="error_message!=''">
+              <div class="content-block-title">錯誤訊息</div>
+              <div class="content-block">
+                <div class="content-block-inner">
+                  <h3>{{ error_message }}</h3>
+                </div>
+              </div>
+            </template>
+
+            <template v-if="message=='NA'">
+              <div class="content-block">
+                <div class="searchbar">
+                  <div class="searchbar-inner">
+                    <div class="searchbar-input-wrap">
+                      <input type="search" placeholder="Search SKU" v-model="sku_text" @keyup.enter="textFind">
+                      <i class="searchbar-icon"></i>
+                      <span class="input-clear-button" @click="textFind"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="content-block" @click="scanner">
+                <img src="img/scanner.png" width="100%" alt="開始掃瞄">
+              </div>
+            </template>
+
+            <template v-else>
+              <div class="content-block">
+                <div class="searchbar">
+                  <div class="searchbar-inner">
+                    <div class="searchbar-input-wrap">
+                      <input type="search" placeholder="Search SKU" v-model="sku_text" @keyup.enter="textFind">
+                      <i class="searchbar-icon"></i>
+                      <span class="input-clear-button" @click="textFind"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <template v-for="barcode in last_product">
+                <div :key="barcode.SKU">
+                  <f7-card>
+                    <f7-card-content :padding="false">
+                      <img :src="barcode.Pics" width="100%"/>
+                    </f7-card-content>
+                  </f7-card>
+                  <f7-card-content>
+                    <p>型號: {{ barcode.SKU }}</p>
+                    <p>品名: {{ barcode.Name }}</p>
+                    <p>KName: {{ barcode.Kname }}</p>
+                    <p>價格: {{ barcode.MSRP }}</p>
+                  </f7-card-content>
+                  
+                  <f7-block-title>庫存</f7-block-title>
+                  <f7-list accordion-list>
+                    <template v-for="(stock, index) in barcode.Stock.BranchStock">
+                      <f7-list-item :key="index" accordion-item :title="stock.name">
+                        <f7-accordion-content>
+                          <f7-list>
+                            <f7-list-item v-for="(key, val) in stock.size" :key="val">
+                              {{ val }} : {{ key }}
+                            </f7-list-item>
+                          </f7-list>
+                        </f7-accordion-content>
+                      </f7-list-item>
+                    </template>
+                  </f7-list>
+                </div>
+              </template>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </f7-page>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  data () {
+    return {
+      url: "https://preerp.tranyi.com/scanners",
+      error_message: '',
+      message: '',
+      last_product: [],
+      loading: '0',
+      sku_text: '',
+      error_message: '',
+      message: 'NA',
+      response_json: '',
+      history: []
+    }
+  },
+  methods: {
+    scanner () {
+      axios.get(this.url,{params: {barcode: this.sku_text}}).then(res => {
+        if (!res || JSON.stringify(res) == '{}') {
+          //無資料
+          this.error_message = this.sku_text + "(查無資料)"
+          this.last_product = []
+        } else {
+          //有資料
+          this.error_message = ''
+          this.message = this.sku_text
+          this.last_product = []
+          this.last_product.push(res)
+        }
+      }).catch(err => {
+        alert("網路連接錯誤，請確保內部網路連線正常。\n如仍有問題，請回報錯誤資訊：" + JSON.stringify(err))
+      })
+
+      // cordova.plugins.barcodeScanner.scan(
+      //   function (result) {
+      //   },
+      //   function (error) {
+      //     alert(error)
+      //   },
+      //   {
+      //     // preferFrontCamera : true, // iOS and Android
+      //     // showFlipCameraButton : true, // iOS and Android
+      //     showTorchButton: true, // iOS and Android
+      //     // torchOn: true, // Android, launch with the torch switched on (if available)
+      //     prompt: "提示:點選右上角按鈕，可開啟手機閃光燈", // Android
+      //     resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
+      //     formats: "CODE_128,EAN_13", // default: all but PDF_417 and RSS_EXPANDED
+      //     // orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
+      //     // disableAnimations : true // iOS
+      //   }
+      // )
+    },
+    textFind () {
+      axios.get(this.url, {params: {sku: this.sku_text}}).then(res => {
+        if (!res || JSON.stringify(res) == '{}') {
+          //無資料
+          this.error_message = this.sku_text + "(查無資料)"
+          this.last_product = []
+        } else {
+          //有資料
+          this.error_message = ''
+          this.message = this.sku_text
+          this.last_product = []
+          this.last_product.push(res.data)
+          console.log(res.data)
+        }
+      }).catch(err => {
+        alert("網路連接錯誤，請確保內部網路連線正常。\n如仍有問題，請回報錯誤資訊：" + JSON.stringify(err))
+      })
+    }
+  }
+}
+</script>
+      

src/pages/product.vue

@@ -0,0 +1,25 @@
+<template>
+  <f7-page name="product">
+    <f7-navbar :title="product.title" back-link="Back"></f7-navbar>
+    <f7-block-title>About {{product.title}}</f7-block-title>
+    <f7-block strong>
+      {{product.description}}
+    </f7-block>
+  </f7-page>
+</template>
+<script>
+  export default {
+    data: function () {
+      var productId = this.$f7route.params.id;
+      var currentProduct;
+      this.$f7.data.products.forEach(function (product) {
+        if (product.id === productId) {
+          currentProduct = product;
+        }
+      });
+      return {
+        product: currentProduct,
+      };
+    }
+  };
+</script>

src/pages/request-and-load.vue

@@ -0,0 +1,27 @@
+<template>
+  <f7-page>
+    <f7-navbar :title="`${user.firstName} ${user.lastName}`" back-link="Back"></f7-navbar>
+    <f7-block strong>
+      {{user.about}}
+    </f7-block>
+    <f7-list>
+      <f7-list-item
+        v-for="(link, index) in user.links"
+        :key="index"
+        :link="link.url"
+        :title="link.title"
+        external
+        target="_blank"
+      ></f7-list-item>
+    </f7-list>
+  </f7-page>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        user: this.$f7route.context.user,
+      }
+    }
+  }
+</script>

src/pages/settings.vue

@@ -0,0 +1,158 @@
+<template>
+  <f7-page name="settings">
+    <f7-navbar title="Settings"></f7-navbar>
+
+    <f7-block-title>Form Example</f7-block-title>
+    <f7-list no-hairlines-md>
+      <f7-list-input
+        label="Name"
+        type="text"
+        placeholder="Your name"
+      ></f7-list-input>
+
+      <f7-list-input
+        label="E-mail"
+        type="email"
+        placeholder="E-mail"
+      ></f7-list-input>
+
+      <f7-list-input
+        label="URL"
+        type="url"
+        placeholder="URL"
+      ></f7-list-input>
+
+      <f7-list-input
+        label="Password"
+        type="password"
+        placeholder="Password"
+      ></f7-list-input>
+
+      <f7-list-input
+        label="Phone"
+        type="tel"
+        placeholder="Phone"
+      ></f7-list-input>
+
+      <f7-list-input
+        label="Gender"
+        type="select"
+        >
+        <option>Male</option>
+        <option>Female</option>
+      </f7-list-input>
+
+      <f7-list-input
+        label="Birth date"
+        type="date"
+        placeholder="Birth day"
+        defaultValue="2014-04-30"
+      ></f7-list-input>
+
+      <f7-list-item
+        title="Toggle"
+      >
+        <f7-toggle slot="after"></f7-toggle>
+      </f7-list-item>
+
+      <f7-list-input
+        label="Range"
+        :input="false"
+      >
+        <f7-range slot="input" :value="50" :min="0" :max="100" :step="1"></f7-range>
+      </f7-list-input>
+
+      <f7-list-input
+        type="textarea"
+        label="Textarea"
+        placeholder="Bio"
+      ></f7-list-input>
+      <f7-list-input
+        type="textarea"
+        label="Resizable"
+        placeholder="Bio"
+        resizable
+      ></f7-list-input>
+    </f7-list>
+
+    <f7-block-title>Buttons</f7-block-title>
+    <f7-block strong>
+      <f7-row tag="p">
+        <f7-button class="col">Button</f7-button>
+        <f7-button class="col" fill>Fill</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" raised>Raised</f7-button>
+        <f7-button class="col" raised fill>Raised Fill</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" round>Round</f7-button>
+        <f7-button class="col" round fill>Round Fill</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" outline>Outline</f7-button>
+        <f7-button class="col" round outline>Outline Round</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" small outline>Small</f7-button>
+        <f7-button class="col" small round outline>Small Round</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" small fill>Small</f7-button>
+        <f7-button class="col" small round fill>Small Round</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" large raised>Large</f7-button>
+        <f7-button class="col" large fill raised>Large Fill</f7-button>
+      </f7-row>
+      <f7-row tag="p">
+        <f7-button class="col" large fill raised color="red">Large Red</f7-button>
+        <f7-button class="col" large fill raised color="green">Large Green</f7-button>
+      </f7-row>
+    </f7-block>
+
+    <f7-block-title>Checkbox group</f7-block-title>
+    <f7-list>
+      <f7-list-item
+        checkbox
+        name="my-checkbox"
+        value="Books"
+        title="Books"
+      ></f7-list-item>
+      <f7-list-item
+        checkbox
+        name="my-checkbox"
+        value="Movies"
+        title="Movies"
+      ></f7-list-item>
+      <f7-list-item
+        checkbox
+        name="my-checkbox"
+        value="Food"
+        title="Food"
+      ></f7-list-item>
+    </f7-list>
+
+    <f7-block-title>Radio buttons group</f7-block-title>
+    <f7-list>
+      <f7-list-item
+        radio
+        name="radio"
+        value="Books"
+        title="Books"
+      ></f7-list-item>
+      <f7-list-item
+        radio
+        name="radio"
+        value="Movies"
+        title="Movies"
+      ></f7-list-item>
+      <f7-list-item
+        radio
+        name="radio"
+        value="Food"
+        title="Food"
+      ></f7-list-item>
+    </f7-list>
+  </f7-page>
+</template>