zmp-cli 3.2.0-0 → 3.2.3

package/create/templates/generate-styles.js

@@ -19,9 +19,19 @@ module.exports = (options) => {
       /* Custom color theme properties */
       :root {
         ${Object.keys(customProps)
+          .filter(
+            (prop) =>
+              prop !== '--zmp-tabbar-fill-link-active-color' &&
+              prop !== '--zmp-tabbar-fill-link-active-border-color'
+          )
           .map((prop) => `${prop}: ${customProps[prop]};`)
           .join('\n        ')}
       }
+      :root.theme-dark,:root .theme-dark {
+        ${Object.keys(customProps)
+          .map((prop) => `${prop}: ${customProps[prop]};`)
+          .join('\n        ')} 
+      }
     `
     );
   }
@@ -30,51 +40,6 @@ module.exports = (options) => {
       0,
       `
       /* Invert navigation bars to fill style */
-      :root,
-      :root.theme-dark,
-      :root .theme-dark {
-        --zmp-bars-bg-color: var(--zmp-theme-color);
-        --zmp-bars-bg-color-rgb: var(--zmp-theme-color-rgb);
-        --zmp-bars-translucent-opacity: 0.9;
-        --zmp-bars-text-color: #fff;
-        --zmp-bars-link-color: #fff;
-        --zmp-navbar-subtitle-text-color: rgba(255,255,255,0.85);
-        --zmp-bars-border-color: transparent;
-        --zmp-tabbar-link-active-color: #fff;
-        --zmp-tabbar-link-inactive-color: rgba(255,255,255,0.54);
-        --zmp-sheet-border-color: transparent;
-        --zmp-tabbar-link-active-border-color: #fff;
-      }
-      .appbar,
-      .navbar,
-      .toolbar,
-      .subnavbar,
-      .calendar-header,
-      .calendar-footer {
-        --zmp-touch-ripple-color: var(--zmp-touch-ripple-white);
-        --zmp-link-highlight-color: var(--zmp-link-highlight-white);
-        --zmp-link-touch-ripple-color: var(--zmp-touch-ripple-white);
-        --zmp-button-text-color: #fff;
-        --zmp-button-pressed-bg-color: rgba(255,255,255,0.1);
-      }
-      .navbar-large-transparent,
-      .navbar-large.navbar-transparent {
-        --zmp-navbar-large-title-text-color: #000;
-
-        --r: ${themeRgb[0]};
-        --g: ${themeRgb[1]};
-        --b: ${themeRgb[2]};
-        --progress: var(--zmp-navbar-large-collapse-progress);
-        --zmp-bars-link-color: rgb(
-          calc(var(--r) + (255 - var(--r)) * var(--progress)),
-          calc(var(--g) + (255 - var(--g)) * var(--progress)),
-          calc(var(--b) + (255 - var(--b)) * var(--progress))
-        );
-      }
-      .theme-dark .navbar-large-transparent,
-      .theme-dark .navbar-large.navbar-transparent {
-        --zmp-navbar-large-title-text-color: #fff;
-      }
     `
     );
   }

package/create/templates/react/generate-home-page.js

@@ -1,7 +1,8 @@
 const indent = require('../../utils/indent');
 
 module.exports = (options) => {
-  const { name, template } = options;
+  const { name, template, theming } = options;
+  const { fillBars } = theming;
 
   let description = '';
   if (template === 'single-view' || template === 'blank') {
@@ -60,7 +61,7 @@ module.exports = (options) => {
       return (
         <Page name="home" navbarLarge>
           {/* Top Navbar */}
-          <Navbar transparent>
+          <Navbar ${fillBars ? 'fill' : ''}>
             <NavTitleLarge>${name}</NavTitleLarge>
           </Navbar>
           {/* Page content */}

package/create/utils/colors.js

@@ -1,15 +1,18 @@
 function colorHexToRgb(hex) {
-  const h = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => r + r + g + g + b + b);
+  const h = hex.replace(
+    /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+    (m, r, g, b) => r + r + g + g + b + b
+  );
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
-  return result
-    ? result.slice(1).map((n) => parseInt(n, 16))
-    : null;
+  return result ? result.slice(1).map((n) => parseInt(n, 16)) : null;
 }
 function colorRgbToHex(r, g, b) {
-  const result = [r, g, b].map((n) => {
-    const hex = n.toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-  }).join('');
+  const result = [r, g, b]
+    .map((n) => {
+      const hex = n.toString(16);
+      return hex.length === 1 ? `0${hex}` : hex;
+    })
+    .join('');
   return `#${result}`;
 }
 function colorRgbToHsl(r, g, b) {
@@ -41,7 +44,7 @@ function colorHslToRgb(h, s, l) {
   else if (hp <= 4) rgb1 = [0, x, c];
   else if (hp <= 5) rgb1 = [x, 0, c];
   else if (hp <= 6) rgb1 = [c, 0, x];
-  const m = l - (c / 2);
+  const m = l - c / 2;
   return rgb1.map((n) => Math.max(0, Math.min(255, Math.round(255 * (n + m)))));
 }
 function colorThemeCSSProperties(...args) {
@@ -56,15 +59,29 @@ function colorThemeCSSProperties(...args) {
   }
   if (!rgb) return {};
   const hsl = colorRgbToHsl(...rgb);
-  const hslShade = [hsl[0], hsl[1], Math.max(0, (hsl[2] - 0.08))];
-  const hslTint = [hsl[0], hsl[1], Math.max(0, (hsl[2] + 0.08))];
+  const hslShade = [hsl[0], hsl[1], Math.max(0, hsl[2] - 0.08)];
+  const hslTint = [hsl[0], hsl[1], Math.max(0, hsl[2] + 0.08)];
   const shade = colorRgbToHex(...colorHslToRgb(...hslShade));
   const tint = colorRgbToHex(...colorHslToRgb(...hslTint));
+  const hslSecondaryColor = [hsl[0], hsl[1], Math.max(0, hsl[2] + 0.6)];
+  const secondaryColor = colorRgbToHex(...colorHslToRgb(...hslSecondaryColor));
   return {
     '--zmp-theme-color': hex,
     '--zmp-theme-color-rgb': rgb.join(', '),
     '--zmp-theme-color-shade': shade,
     '--zmp-theme-color-tint': tint,
+    '--zmp-checkbox-active-color-disabled': 'var(--zmp-theme-color-shade)',
+    '--zmp-radio-active-color-disabled': 'var(--zmp-theme-color-shade)',
+    '--zmp-toggle-active-color-disabled': 'var(--zmp-theme-color-shade)',
+    '--zmp-picker-action-button-hover-bg-color': 'var(--zmp-theme-color-shade)',
+    '--zmp-button-pressed-bg-color-primary': 'var(--zmp-theme-color-shade)',
+    ' --zmp-button-bg-color-secondary': secondaryColor,
+    '--zmp-button-pressed-bg-color-secondary': secondaryColor,
+    '--zmp-button-pressed-color-secondary': 'var(--zmp-theme-color)',
+    '--zmp-button-border-color-secondary': 'var(--zmp-theme-color)',
+    '--zmp-tabbar-fill-link-active-color': 'var(--zmp-theme-color)',
+    '--zmp-tabbar-fill-link-active-border-color': 'var(--zmp-theme-color)',
+    '--zmp-fab-pressed-bg-color': 'var(--zmp-theme-color-shade)',
   };
 }
 

package/create/utils/dist/generate-gitignore.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var templateIf = require('./template-if');
+
+module.exports = function (options) {
+  return "\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Dependency directories\nnode_modules/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n\n# Misc\n.DS_Store\nThumbs.db\n\n# Production build\nwww/\n";
+};

package/create/utils/generate-gitignore.js

@@ -1,8 +1,6 @@
 const templateIf = require('./template-if');
 
 module.exports = (options) => {
-  const { bundler } = options;
-
   return `
 # Logs
 logs
@@ -39,12 +37,7 @@ node_modules/
 .DS_Store
 Thumbs.db
 
-${templateIf(
-  bundler,
-  () => `
 # Production build
 www/
-`
-)}
 `;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmp-cli",
-  "version": "3.2.0-0",
+  "version": "3.2.3",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {

package/start/dist/index.dev.js

@@ -28,6 +28,9 @@ var qrcode = require('qrcode-terminal');
 
 var logSymbols = require('log-symbols');
 
+var _require2 = require('path'),
+    resolve = _require2.resolve;
+
 var spinner = ora('Starting mini app...');
 
 module.exports = function _callee() {
@@ -49,6 +52,7 @@ module.exports = function _callee() {
       publicServer,
       server,
       app,
+      serverFrame,
       _args = arguments;
 
   return regeneratorRuntime.async(function _callee$(_context) {
@@ -117,7 +121,8 @@ module.exports = function _callee() {
               'process.env.NODE_ENV': JSON.stringify(previewOnZalo ? 'production' : 'development')
             },
             server: _objectSpread({
-              port: port
+              port: port,
+              strictPort: true
             }, previewOnZalo ? publicServer : localServer)
           }));
 
@@ -128,8 +133,29 @@ module.exports = function _callee() {
 
         case 21:
           app = _context.sent;
-          spinner.stop();
+
+          if (previewOnZalo) {
+            _context.next = 27;
+            break;
+          }
+
           _context.next = 25;
+          return regeneratorRuntime.awrap(createServer({
+            // any valid user config options, plus `mode` and `configFile`
+            configFile: false,
+            root: __dirname + '/frame',
+            server: {
+              port: port + 1
+            }
+          }));
+
+        case 25:
+          serverFrame = _context.sent;
+          serverFrame.listen();
+
+        case 27:
+          spinner.stop();
+          _context.next = 30;
           return regeneratorRuntime.awrap(new Promise(function () {
             var previewOnZaloURL = "https://zalo.me/app/link/zapps/".concat(appId, "/?env=TESTING_LOCAL&clientIp=https://").concat(host, ":").concat(app.config.server.port);
 
@@ -147,11 +173,11 @@ module.exports = function _callee() {
             }
           }));
 
-        case 25:
+        case 30:
           return _context.abrupt("return", _context.sent);
 
-        case 28:
-          _context.prev = 28;
+        case 33:
+          _context.prev = 33;
           _context.t0 = _context["catch"](12);
           logger.statusError('Error starting project'); // if (err) logger.error(err.stderr || err);
 
@@ -159,10 +185,10 @@ module.exports = function _callee() {
           errorExit(_context.t0);
           return _context.abrupt("return");
 
-        case 34:
+        case 39:
         case "end":
           return _context.stop();
       }
     }
-  }, null, null, [[12, 28]]);
+  }, null, null, [[12, 33]]);
 };

package/start/frame/index.html

@@ -22,6 +22,7 @@
         .then(data => {
           if (data.app.title) {
             document.getElementById('title').innerHTML = data.app.title;
+            document.title = data.app.title;
           }
           if (data.app.headerColor) {
             document.getElementById('header').style.backgroundColor = data.app.headerColor;
@@ -36,7 +37,7 @@
         });
    </script>
 
-    <title>Water Reminder</title>
+    <title>Water Reminder1</title>
     <style>
       body {
         font-family: -apple-system, BlinkMacSystemFont, sans-serif;