zmp-cli 3.15.6 → 3.15.8

package/create/templates/core/pages/settings.html

@@ -1,252 +0,0 @@
-<div class="page" data-name="settings">
-  <div class="navbar">
-    <div class="navbar-bg"></div>
-    <div class="navbar-inner sliding">
-      <div class="title">Settings</div>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="block-title">Form Example</div>
-    <div class="list no-hairlines-md">
-      <ul>
-        <li>
-          <div class="item-content item-input">
-            <div class="item-inner">
-              <div class="item-title item-label">Name</div>
-              <div class="item-input-wrap">
-                <input type="text" placeholder="Your name"/>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content item-input">
-            <div class="item-inner">
-              <div class="item-title item-label">E-mail</div>
-              <div class="item-input-wrap">
-                <input type="email" placeholder="E-mail"/>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content item-input">
-            <div class="item-inner">
-              <div class="item-title item-label">URL</div>
-              <div class="item-input-wrap">
-                <input type="url" placeholder="URL"/>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content item-input">
-            <div class="item-inner">
-              <div class="item-title item-label">Password</div>
-              <div class="item-input-wrap">
-                <input type="password" placeholder="Password"/>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content item-input">
-            <div class="item-inner">
-              <div class="item-title item-label">Phone</div>
-              <div class="item-input-wrap">
-                <input type="tel" placeholder="Phone"/>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content item-input">
-            <div class="item-inner">
-              <div class="item-title item-label">Gender</div>
-              <div class="item-input-wrap">
-                <select>
-                  <option>Male</option>
-                  <option>Female</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content item-input">
-            <div class="item-inner">
-              <div class="item-title item-label">Birth date</div>
-              <div class="item-input-wrap">
-                <input type="date" placeholder="Birth day" value="2014-04-30"/>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Toggle</div>
-              <div class="item-after">
-                <label class="toggle toggle-init">
-                  <input type="checkbox"/>
-                  <span class="toggle-icon"></span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="item-content item-input">
-            <div class="item-inner">
-              <div class="item-title item-label">Slider</div>
-              <div class="item-input-wrap">
-                <div class="range-slider range-slider-init" data-label="true">
-                  <input type="range" value="50" min="0" max="100" step="1"/>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li class="align-top">
-          <div class="item-content item-input">
-            <div class="item-inner">
-              <div class="item-title item-label">Textarea</div>
-              <div class="item-input-wrap">
-                <textarea placeholder="Bio"></textarea>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li class="align-top">
-          <div class="item-content item-input">
-            <div class="item-inner">
-              <div class="item-title item-label">Resizable</div>
-              <div class="item-input-wrap">
-                <textarea placeholder="Bio" class="resizable"></textarea>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div class="block-title">Buttons</div>
-    <div class="block block-strong">
-      <p class="row">
-        <a href="#" class="col button">Button</a>
-        <a href="#" class="col button button-fill">Fill</a>
-      </p>
-      <p class="row">
-        <a href="#" class="col button button-raised">Raised</a>
-        <a href="#" class="col button button-raised button-fill">Raised Fill</a>
-      </p>
-      <p class="row">
-        <a href="#" class="col button button-round">Round</a>
-        <a href="#" class="col button button-round button-fill">Round Fill</a>
-      </p>
-      <p class="row">
-        <a href="#" class="col button button-outline">Outline</a>
-        <a href="#" class="col button button-round button-outline">Outline Round</a>
-      </p>
-      <p class="row">
-        <a href="#" class="col button button-small button-outline">Small</a>
-        <a href="#" class="col button button-small button-round button-outline">Small Round</a>
-      </p>
-      <p class="row">
-        <a href="#" class="col button button-small button-fill">Small</a>
-        <a href="#" class="col button button-small button-round button-fill">Small Round</a>
-      </p>
-      <p class="row">
-        <a href="#" class="col button button-large button-raised">Large</a>
-        <a href="#" class="col button button-large button-fill button-raised">Large Fill</a>
-      </p>
-
-      <p class="row">
-        <a href="#" class="col button button-large button-fill button-raised color-red">Large Red</a>
-        <a href="#" class="col button button-large button-fill button-raised color-green">Large Green</a>
-      </p>
-
-    </div>
-    <div class="block-title">Checkbox group</div>
-    <div class="list">
-      <ul>
-        <li>
-          <label class="item-checkbox item-content">
-            <input type="checkbox" name="checkbox" value="Books" checked="checked"/>
-            <i class="icon icon-checkbox"></i>
-            <div class="item-inner">
-              <div class="item-title">Books</div>
-            </div>
-          </label>
-        </li>
-        <li>
-          <label class="item-checkbox item-content">
-            <input type="checkbox" name="checkbox" value="Movies"/>
-            <i class="icon icon-checkbox"></i>
-            <div class="item-inner">
-              <div class="item-title">Movies</div>
-            </div>
-          </label>
-        </li>
-        <li>
-          <label class="item-checkbox item-content">
-            <input type="checkbox" name="checkbox" value="Food"/>
-            <i class="icon icon-checkbox"></i>
-            <div class="item-inner">
-              <div class="item-title">Food</div>
-            </div>
-          </label>
-        </li>
-        <li>
-          <label class="item-checkbox item-content">
-            <input type="checkbox" name="checkbox" value="Drinks"/>
-            <i class="icon icon-checkbox"></i>
-            <div class="item-inner">
-              <div class="item-title">Drinks</div>
-            </div>
-          </label>
-        </li>
-      </ul>
-    </div>
-    <div class="block-title">Radio buttons group</div>
-    <div class="list">
-      <ul>
-        <li>
-          <label class="item-radio item-content">
-            <input type="radio" name="radio" value="Books" checked="checked"/>
-            <i class="icon icon-radio"></i>
-            <div class="item-inner">
-              <div class="item-title">Books</div>
-            </div>
-          </label>
-        </li>
-        <li>
-          <label class="item-radio item-content">
-            <input type="radio" name="radio" value="Movies"/>
-            <i class="icon icon-radio"></i>
-            <div class="item-inner">
-              <div class="item-title">Movies</div>
-            </div>
-          </label>
-        </li>
-        <li>
-          <label class="item-radio item-content">
-            <input type="radio" name="radio" value="Food"/>
-            <i class="icon icon-radio"></i>
-            <div class="item-inner">
-              <div class="item-title">Food</div>
-            </div>
-          </label>
-        </li>
-        <li>
-          <label class="item-radio item-content">
-            <input type="radio" name="radio" value="Drinks"/>
-            <i class="icon icon-radio"></i>
-            <div class="item-inner">
-              <div class="item-title">Drinks</div>
-            </div>
-          </label>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>

package/create/templates/create-folders.js

@@ -1,30 +0,0 @@
-const path = require('path');
-const fse = require('../../utils/fs-extra');
-
-module.exports = (options) => {
-  const cwd = options.cwd || process.cwd();
-  const { framework } = options;
-
-  const srcFolder = 'src';
-
-  const folders = [
-    `./${srcFolder}`,
-    `./${srcFolder}/static`,
-    `./${srcFolder}/css`,
-    `./${srcFolder}/pages`,
-    `./public`,
-    './assets-src',
-  ];
-  if (folders.indexOf('./www') < 0) {
-    folders.push('./www');
-  }
-  if (framework !== 'core') {
-    folders.push(...[`./${srcFolder}/components`]);
-  }
-
-  folders.push(`./${srcFolder}/static/icons`);
-
-  folders.forEach((f) => {
-    fse.mkdirSync(path.resolve(cwd, f));
-  });
-};

package/create/templates/dist/generate-styles.dev.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var indent = require('../utils/indent');
-
-var _require = require('../utils/colors'),
-    colorThemeCSSProperties = _require.colorThemeCSSProperties;
-
-module.exports = function (options) {
-  var template = options.template,
-      theming = options.theming;
-  var customColor = theming.customColor,
-      color = theming.color,
-      fillBars = theming.fillBars;
-  var styles = '';
-  var themeRgb = [0, 122, 255];
-
-  if (customColor && color) {
-    var customProps = colorThemeCSSProperties("".concat(color));
-    themeRgb = customProps['--zmp-theme-color-rgb'].split(',').map(function (n) {
-      return n.trim();
-    });
-    styles += indent(0, "\n      /* Custom color theme properties */\n      :root {\n        ".concat(Object.keys(customProps).filter(function (prop) {
-      return prop !== '--zmp-tabbar-fill-link-active-color' && prop !== '--zmp-tabbar-fill-link-active-border-color';
-    }).map(function (prop) {
-      return "".concat(prop, ": ").concat(customProps[prop], ";");
-    }).join('\n        '), "\n      }\n      :root.theme-dark,:root .theme-dark {\n        ").concat(Object.keys(customProps).map(function (prop) {
-      return "".concat(prop, ": ").concat(customProps[prop], ";");
-    }).join('\n        '), "\n      }\n    "));
-  }
-
-  if (fillBars) {
-    styles += indent(0, "\n      /* Invert navigation bars to fill style */\n    ");
-  }
-
-  if (includeTailwind) {
-    styles += indent(0, "\n      @import \"./tailwind.css\";\n      ");
-  }
-
-  if (template === 'split-view') {
-    styles += indent(0, "\n      /* Left Panel right border when it is visible by breakpoint */\n      .panel-left.panel-in-breakpoint:before {\n        position: absolute;\n        right: 0;\n        top: 0;\n        height: 100%;\n        width: 1px;\n        background: rgba(0,0,0,0.1);\n        content: '';\n        z-index: 6000;\n      }\n\n      /* Hide navbar link which opens left panel when it is visible by breakpoint */\n      .panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel=\"left\"] {\n        display: none;\n      }\n\n      /*\n        Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)\n      */\n      .ios .panel-left:not(.panel-in-breakpoint).panel-in ~ .view-main:before,\n      .ios .panel-left:not(.panel-in-breakpoint).panel-closing ~ .view-main:before {\n        position: absolute;\n        left: 0;\n        top: 0;\n        height: 100%;\n        width: 1px;\n        background: rgba(0,0,0,0.1);\n        content: '';\n        z-index: 6000;\n      }\n    ");
-  } else {
-    styles += indent(0, "\n      /* Your app custom styles here */\n    ");
-  }
-
-  return styles.trim();
-};

package/create/templates/generate-config-xml.js

@@ -1,18 +0,0 @@
-const indent = require('../utils/indent');
-
-module.exports = () => {
-  return indent(
-    4,
-    `
-    <allow-navigation href="*" />
-    <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="AllowInlineMediaPlayback" value="true" />
-  `
-  );
-};

package/create/templates/generate-index.js

@@ -1,49 +0,0 @@
-/* eslint curly: off */
-const { projectFramework } = require('../../utils/constants');
-const generateCoreRoot = require('./core/generate-root.js');
-
-module.exports = (options) => {
-  const { name, framework, theming } = options;
-  const srcFolder = '/src/';
-  const iconsAssetsFolder = 'static';
-
-  const rootContent = framework === 'core' ? generateCoreRoot(options) : '';
-  const scripts = `
-  <!-- built script files will be auto injected -->
-  ${
-    framework === projectFramework.REACT || framework === projectFramework.VUE
-      ? `<script type="module" src="${srcFolder}app.js"></script>`
-      : ''
-  }
-  ${
-    framework === projectFramework.REACT_TYPESCRIPT
-      ? `<script type="module" src="${srcFolder}app.ts"></script>`
-      : ''
-  }
-  `.trim();
-
-  return `
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <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, viewport-fit=cover">
-
-  <meta name="theme-color" content="${
-    theming.customColor && theming.color ? `${theming.color}` : '#007aff'
-  }">
-  <meta name="format-detection" content="telephone=no">
-  <meta name="msapplication-tap-highlight" content="no">
-  <link rel="icon" href="${srcFolder}${iconsAssetsFolder}/icons/favicon.png">
-  <title>${name}</title>
-</head>
-<body>
-  <div id="app"${
-    framework === 'core' && theming.darkTheme ? 'class="theme-dark"' : ''
-  }>${rootContent}</div>
-  ${scripts}
-</body>
-</html>
-  `.trim();
-};

package/create/templates/generate-manifest.js

@@ -1,49 +0,0 @@
-module.exports = (options) => {
-  const { name, theming } = options;
-  const iconsFolder = 'static';
-  const manifest = {
-    name,
-    short_name: name,
-    description: name,
-    lang: 'en-US',
-    start_url: '/',
-    display: 'standalone',
-    background_color:
-      theming.customColor && theming.color ? `${theming.color}` : '#EE350F',
-    theme_color:
-      theming.customColor && theming.color ? `${theming.color}` : '#EE350F',
-    icons: [
-      {
-        src: `/${iconsFolder}/icons/128x128.png`,
-        sizes: '128x128',
-        type: 'image/png',
-      },
-      {
-        src: `/${iconsFolder}/icons/144x144.png`,
-        sizes: '144x144',
-        type: 'image/png',
-      },
-      {
-        src: `/${iconsFolder}/icons/152x152.png`,
-        sizes: '152x152',
-        type: 'image/png',
-      },
-      {
-        src: `/${iconsFolder}/icons/192x192.png`,
-        sizes: '192x192',
-        type: 'image/png',
-      },
-      {
-        src: `/${iconsFolder}/icons/256x256.png`,
-        sizes: '256x256',
-        type: 'image/png',
-      },
-      {
-        src: `/${iconsFolder}/icons/512x512.png`,
-        sizes: '512x512',
-        type: 'image/png',
-      },
-    ],
-  };
-  return JSON.stringify(manifest, null, 2);
-};

package/create/templates/generate-recoil.js

@@ -1,56 +0,0 @@
-const indent = require('../utils/indent');
-const templateIf = require('../utils/template-if');
-
-module.exports = (options) => {
-  const { framework, template } = options;
-
-  const productState = `
-
-export const productsState = atom({
-  key: "products",
-  default: [
-    {
-      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.'
-    },
-  ]
-});`;
-
-  if (framework === 'react-typescript') {
-    return `
-import { atom } from "recoil";
-import { userInfo } from 'zmp-sdk';
-
-export const userState = atom<userInfo>({
-  key: "user",
-  default: {
-    id: '12345678',
-    name: 'Zalo',
-    avatar: 'ZA',
-  }
-})
-${templateIf(template === 'tabs', () => productState)}`;
-  }
-  return `import { atom } from "recoil";
-
-export const userState = atom({
-  key: "user",
-  default: {
-    id: '12345678',
-    name: 'Zalo',
-    avatar: 'ZA',
-  }
-})
-${templateIf(template === 'tabs', () => productState)}`;
-};

package/create/templates/generate-routes.js

@@ -1,16 +0,0 @@
-// const generateCoreRoutes = require('./core/generate-routes');
-const generateVueRoutes = require('./vue/generate-routes');
-const generateReactRoutes = require('./react/generate-routes');
-const generateReactTsRoutes = require('./react-typescript/generate-routes');
-// const generateSvelteRoutes = require('./svelte/generate-routes');
-
-module.exports = (options) => {
-  const { framework } = options;
-  // if (framework === 'core') return generateCoreRoutes(options);
-  if (framework === 'vue') return generateVueRoutes(options);
-  if (framework === 'react') return generateReactRoutes(options);
-  if (framework === 'react-typescript') return generateReactTsRoutes(options);
-
-  // if (framework === 'svelte') return generateSvelteRoutes(options);
-  return [];
-};

package/create/templates/generate-scripts.js

@@ -1,16 +0,0 @@
-const generateCoreScripts = require('./core/generate-scripts');
-const generateVueScripts = require('./vue/generate-scripts');
-const generateReactScripts = require('./react/generate-scripts');
-const generateSvelteScripts = require('./svelte/generate-scripts');
-const generateReactTsScripts = require('./react-typescript/generate-scripts');
-const generateZauiScripts = require('./zaui/generate-scripts');
-module.exports = (options) => {
-  const { framework, package } = options;
-  if (package === 'zmp-ui') return generateZauiScripts(options);
-  if (framework === 'core') return generateCoreScripts(options);
-  if (framework === 'vue') return generateVueScripts(options);
-  if (framework === 'react') return generateReactScripts(options);
-  if (framework === 'svelte') return generateSvelteScripts(options);
-  if (framework === 'react-typescript') return generateReactTsScripts(options);
-  return '';
-};

package/create/templates/generate-service-worker.js

@@ -1,126 +0,0 @@
-const indent = require('../utils/indent');
-const templateIf = require('../utils/template-if');
-
-module.exports = (options) => {
-  const { bundler, theming } = options;
-  return indent(0, `
-    // Import Workbox (https://developers.google.com/web/tools/workbox/)
-    importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
-
-    /*
-      Precache Manifest
-      Change revision as soon as file content changed
-    */
-    self.__WB_MANIFEST = [
-      {
-        revision: '1',
-        url: 'zmp/zmp-bundle.min.css'
-      },
-      {
-        revision: '1',
-        url: 'zmp/zmp-bundle.min.js'
-      },
-      {
-        revision: '1',
-        url: 'css/app.css'
-      },
-      ${templateIf(theming.iconFonts, () => `
-      {
-        revision: '1',
-        url: 'css/icons.css'
-      },
-      `)}
-      {
-        revision: '1',
-        url: 'routes.js'
-      },
-      {
-        revision: '1',
-        url: 'store.js'
-      },
-      {
-        revision: '1',
-        url: 'app.js'
-      },
-      ${templateIf(theming.iconFonts, () => `
-      // Fonts
-      {
-        revision: '1',
-        url: 'fonts/ZMPIcons-Regular.woff2'
-      },
-      {
-        revision: '1',
-        url: 'fonts/ZMPIcons-Regular.woff'
-      },
-      {
-        revision: '1',
-        url: 'fonts/ZMPIcons-Regular.eot'
-      },
-      {
-        revision: '1',
-        url: 'fonts/ZMPIcons-Regular.ttf'
-      },
-      {
-        revision: '1',
-        url: 'fonts/MaterialIcons-Regular.woff2'
-      },
-      {
-        revision: '1',
-        url: 'fonts/MaterialIcons-Regular.woff'
-      },
-      {
-        revision: '1',
-        url: 'fonts/MaterialIcons-Regular.ttf'
-      },
-      {
-        revision: '1',
-        url: 'fonts/MaterialIcons-Regular.eot'
-      },
-      `)}
-      // HTML
-      {
-        revision: '1',
-        url: './index.html'
-      },
-      // Icons
-      {
-        revision: '1',
-        url: 'assets/icons/128x128.png'
-      },
-      {
-        revision: '1',
-        url: 'assets/icons/144x144.png'
-      },
-      {
-        revision: '1',
-        url: 'assets/icons/152x152.png'
-      },
-      {
-        revision: '1',
-        url: 'assets/icons/192x192.png'
-      },
-      {
-        revision: '1',
-        url: 'assets/icons/256x256.png'
-      },
-      {
-        revision: '1',
-        url: 'assets/icons/512x512.png'
-      },
-      {
-        revision: '1',
-        url: 'assets/icons/favicon.png'
-      },
-      {
-        revision: '1',
-        url: 'assets/icons/apple-touch-icon.png'
-      },
-    ];
-
-    /*
-      Enable precaching
-      It is better to comment next line during development
-    */
-    workbox.precaching.precacheAndRoute(self.__WB_MANIFEST || []);
-  `).trim();
-};