zmp-cli 3.15.6 → 3.15.8

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

@@ -1,143 +0,0 @@
-const indent = require('../../utils/indent');
-
-module.exports = (options) => {
-  const {
-    name,
-    template,
-  } = options;
-
-  const isBlank = template === 'blank';
-
-  let description;
-  if (template === 'single-view' || template === 'blank') {
-    description = `
-          <p>Here is your blank ZMP app. Let's see what we have here.</p>
-    `;
-  }
-  if (template === 'split-view') {
-    description = `
-          <p>This is an example of split view application layout, commonly used on tablets. The main approach of such kind of layout is that you can see different views at the same time.</p>
-
-          <p>Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.</p>
-
-          <p>The fun thing is that you can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.</p>
-    `;
-  }
-  if (template === 'tabs') {
-    description = `
-          <p>This is an example of tabs-layout application. The main point of such tabbed layout is that each tab contains independent view with its own routing and navigation.</p>
-
-          <p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.</p>
-    `;
-  }
-
-  return indent(0, `
-    <div class="page" data-name="home">
-      <!-- Top Navbar -->
-      ${template === 'blank' ? `
-      <div class="navbar navbar-large">
-        <div class="navbar-bg"></div>
-        <div class="navbar-inner sliding">
-          <div class="title">${name}</div>
-          <div class="title-large">
-            <div class="title-large-text">${name}</div>
-          </div>
-        </div>
-      </div>
-      `.trim() : `
-      <div class="navbar navbar-large">
-        <div class="navbar-bg"></div>
-        <div class="navbar-inner">
-          <div class="left">
-            <a href="#" class="link icon-only panel-open" data-panel="left">
-              <i class="icon zmp-icons if-not-md">menu</i>
-              <i class="icon material-icons if-md">menu</i>
-            </a>
-          </div>
-          <div class="title sliding">${name}</div>
-          <div class="right">
-            <a href="#" class="link icon-only panel-open" data-panel="right">
-              <i class="icon zmp-icons if-not-md">menu</i>
-              <i class="icon material-icons if-md">menu</i>
-            </a>
-          </div>
-          <div class="title-large">
-            <div class="title-large-text">${name}</div>
-          </div>
-        </div>
-      </div>
-      `.trim()}
-      ${template !== 'tabs' ? `
-      <!-- Toolbar-->
-      <div class="toolbar toolbar-bottom">
-        <div class="toolbar-inner">
-          <a href="#" class="link">Left Link</a>
-          <a href="#" class="link">Right Link</a>
-        </div>
-      </div>
-      `.trim() : ''}
-      <!-- Scrollable page content-->
-      <div class="page-content">
-        <div class="block block-strong">
-          ${description.trim()}
-        </div>
-        ${!isBlank ? `
-        <div class="block-title">Navigation</div>
-        <div class="list">
-          <ul>
-            <li>
-              <a href="/about/" class="item-content item-link">
-                <div class="item-inner">
-                  <div class="item-title">About</div>
-                </div>
-              </a>
-            </li>
-            <li>
-              <a href="/form/" class="item-content item-link">
-                <div class="item-inner">
-                  <div class="item-title">Form</div>
-                </div>
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <div class="block-title">Modals</div>
-        <div class="block block-strong">
-          <div class="row">
-            <div class="col-50">
-              <a href="#" class="button button-raised button-fill popup-open" data-popup="#my-popup">Popup</a>
-            </div>
-            <div class="col-50">
-              <a href="#" class="button button-raised button-fill login-screen-open" data-login-screen="#my-login-screen">Login Screen</a>
-            </div>
-          </div>
-        </div>
-
-        <div class="block-title">Panels</div>
-        <div class="block block-strong">
-          <div class="row">
-            <div class="col-50">
-              <a href="#" class="button button-raised button-fill panel-open" data-panel="left">Left Panel</a>
-            </div>
-            <div class="col-50">
-              <a href="#" class="button button-raised button-fill panel-open" data-panel="right">Right Panel</a>
-            </div>
-          </div>
-        </div>
-
-        <div class="list links-list">
-          <ul>
-            <li>
-              <a href="/dynamic-route/blog/45/post/125/?foo=bar#about">Dynamic (Component) Route</a>
-            </li>
-            <li>
-              <a href="/load-something-that-doesnt-exist/">Default Route (404)</a>
-            </li>
-          </ul>
-        </div>
-        `.trim() : ''}
-      </div>
-    </div>
-  `).trim();
-};

package/create/templates/core/generate-root.js

@@ -1,283 +0,0 @@
-const generateHomePage = require('./generate-home-page');
-const indent = require('../../utils/indent');
-const templateIf = require('../../utils/template-if');
-
-module.exports = (options) => {
-  const {
-    template,
-    bundler,
-  } = options;
-
-  // Panels
-  const leftPanelPlain = `
-    <!-- Left panel with cover effect-->
-    <div class="panel panel-left panel-cover theme-dark panel-init">
-      <div class="view">
-        <div class="page">
-          <div class="navbar">
-            <div class="navbar-bg"></div>
-            <div class="navbar-inner">
-              <div class="title">Left Panel</div>
-            </div>
-          </div>
-          <div class="page-content">
-            <div class="block">Left panel content goes here</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `.trim();
-
-  const leftPanelWithView = `
-    <!-- Left panel with cover effect -->
-    <div class="panel panel-left panel-cover theme-dark panel-init" data-visible-breakpoint="960">
-      <div class="view view-init" data-name="left">
-        <div class="page">
-          <div class="navbar">
-            <div class="navbar-bg"></div>
-            <div class="navbar-inner sliding">
-              <div class="title">Left Panel</div>
-            </div>
-          </div>
-          <div class="page-content">
-            <div class="block-title">Left View Navigation</div>
-            <div class="list links-list">
-              <ul>
-                <li><a href="/left-page-1/">Left Page 1</a></li>
-                <li><a href="/left-page-2/">Left Page 2</a></li>
-              </ul>
-            </div>
-            <div class="block-title">Control Main View</div>
-            <div class="list links-list">
-              <ul>
-                <li>
-                  <a href="/about/" data-view=".view-main" class="panel-close">About</a>
-                </li>
-                <li>
-                  <a href="/form/" data-view=".view-main" class="panel-close">Form</a>
-                </li>
-                <li>
-                  <a href="#" data-view=".view-main" class="back panel-close">Back in history</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-  const leftPanel = template === 'split-view' ? leftPanelWithView : leftPanelPlain;
-  const rightPanel = `
-    <!-- Right panel with reveal effect-->
-    <div class="panel panel-right panel-reveal theme-dark">
-      <div class="view">
-        <div class="page">
-          <div class="navbar">
-            <div class="navbar-bg"></div>
-            <div class="navbar-inner">
-              <div class="title">Right Panel</div>
-            </div>
-          </div>
-          <div class="page-content">
-            <div class="block">Right panel content goes here</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `.trim();
-
-  // Views
-  let views = '';
-  if (template === 'single-view' || template === 'split-view' || template === 'blank') {
-    views = indent(4, `
-      <!-- Your main view, should have "view-main" class -->
-      ${templateIf(bundler === 'webpack', () => `
-      <div class="view view-main view-init safe-areas" data-url="/"></div>
-      `, () => `
-      <div class="view view-main view-init safe-areas">
-        ${indent(8, generateHomePage(options)).trim()}
-      </div>
-      `)}
-    `);
-  }
-  if (template === 'tabs') {
-    views = indent(4, `
-    <!-- Views/Tabs container -->
-    <div class="views tabs safe-areas">
-      <!-- Tabbar for switching views-tabs -->
-      <div class="toolbar toolbar-bottom tabbar-labels">
-        <div class="toolbar-inner">
-          <a href="#view-home" class="tab-link tab-link-active">
-            <i class="icon zmp-icons if-not-md">house_fill</i>
-            <i class="icon material-icons if-md">home</i>
-            <span class="tabbar-label">Home</span>
-          </a>
-          <a href="#view-catalog" class="tab-link">
-            <i class="icon zmp-icons if-not-md">square_list_fill</i>
-            <i class="icon material-icons if-md">view_list</i>
-            <span class="tabbar-label">Catalog</span>
-          </a>
-          <a href="#view-settings" class="tab-link">
-            <i class="icon zmp-icons if-not-md">gear</i>
-            <i class="icon material-icons if-md">settings</i>
-            <span class="tabbar-label">Settings</span>
-          </a>
-        </div>
-      </div>
-
-      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
-      ${templateIf(bundler === 'webpack', () => `
-      <div id="view-home" class="view view-main view-init tab tab-active" data-url="/">
-        <!-- Home page will be loaded here dynamically from / route -->
-      </div>
-      `, () => `
-      <div id="view-home" class="view view-main view-init tab tab-active">
-        ${indent(8, generateHomePage(options)).trim()}
-      </div>
-      `)}
-
-      <!-- Catalog View -->
-      <div id="view-catalog" class="view view-init tab" data-name="catalog" data-url="/catalog/">
-        <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
-      </div>
-
-      <!-- Settings View -->
-      <div id="view-settings" class="view view-init tab" data-name="settings" data-url="/settings/">
-        <!-- Settings page will be loaded here dynamically from /settings/ route -->
-      </div>
-    </div>
-    `);
-  }
-
-  const htmlTemplate = template === 'blank' ? `
-    ${views}
-  ` : `
-    ${leftPanel}
-    ${rightPanel}
-    ${views}
-
-    <!-- Popup -->
-    <div class="popup" id="my-popup">
-      <div class="view">
-        <div class="page">
-          <div class="navbar">
-            <div class="navbar-bg"></div>
-            <div class="navbar-inner">
-              <div class="title">Popup</div>
-              <div class="right">
-                <a href="#" class="link popup-close">Close</a>
-              </div>
-            </div>
-          </div>
-          <div class="page-content">
-            <div class="block">
-              <p>Popup content goes here.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Login Screen -->
-    <div class="login-screen" id="my-login-screen">
-      <div class="view">
-        <div class="page">
-          <div class="page-content login-screen-content">
-            <div class="login-screen-title">Login</div>
-            <div class="list">
-              <ul>
-                <li class="item-content item-input">
-                  <div class="item-inner">
-                    <div class="item-title item-label">Username</div>
-                    <div class="item-input-wrap">
-                      ${templateIf(bundler, () => `
-                        <input type="text" name="username" placeholder="Your username" value="\${username}" @input="\${updateUsername}"/>
-                      `)}
-                      ${templateIf(!bundler, () => `
-                        <input type="text" name="username" placeholder="Your username"/>
-                      `)}
-                    </div>
-                  </div>
-                </li>
-                <li class="item-content item-input">
-                  <div class="item-inner">
-                    <div class="item-title item-label">Password</div>
-                    <div class="item-input-wrap">
-                      ${templateIf(bundler, () => `
-                        <input type="password" name="password" placeholder="Your password" value="\${password}" @input="\${updatePassword}"/>
-                      `)}
-                      ${templateIf(!bundler, () => `
-                        <input type="password" name="password" placeholder="Your password"/>
-                      `)}
-                    </div>
-                  </div>
-                </li>
-              </ul>
-            </div>
-            <div class="list">
-              <ul>
-                <li>
-                  ${templateIf(bundler, () => `
-                  <a href="#" class="item-link list-button login-button" @click="\${alertLoginData}">Sign In</a>
-                  `)}
-                  ${templateIf(!bundler, () => `
-                  <a href="#" class="item-link list-button login-button">Sign In</a>
-                  `)}
-                </li>
-              </ul>
-              <div class="block-footer">Some text about login information.<br/>Click "Sign In" to close Login Screen</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-
-  if (bundler === 'webpack') {
-    if (template === 'blank') {
-      return indent(0, `
-        <template>
-          <div id="app">
-            ${indent(10, views)}
-          </div>
-        </template>
-        <script>
-          export default () => {
-            return $render;
-          }
-        </script>
-      `);
-    }
-    return indent(0, `
-      <template>
-        <div id="app">
-          ${indent(10, htmlTemplate)}
-        </div>
-      </template>
-      <script>
-        export default (props, { $zmp, $update }) => {
-          // Login screen demo data
-          let username = '';
-          let password = '';
-
-          const updateUsername = (e) => {
-            username = e.target.value;
-            $update();
-          }
-          const updatePassword = (e) => {
-            password = e.target.value;
-            $update();
-          }
-          const alertLoginData = () => {
-            $zmp.dialog.alert('Username: ' + username + '<br/>Password: ' + password, () => {
-              $zmp.loginScreen.close();
-            });
-          }
-
-          return $render;
-        }
-      </script>
-    `);
-  }
-  return htmlTemplate;
-};

package/create/templates/core/generate-routes.js

@@ -1,155 +0,0 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-
-module.exports = (options) => {
-  const {
-    bundler, template,
-  } = options;
-
-  let routes;
-  if (template === 'blank') {
-    if (bundler === 'webpack') {
-      routes = indent(0, `
-        import HomePage from './pages/home.zmp.html';
-
-        var routes = [
-          {
-            path: '/',
-            component: HomePage,
-          },
-        ];
-      `);
-    } else {
-      routes = indent(0, `
-        var routes = [
-          {
-            path: '/',
-            url: './index.html',
-          },
-        ];
-      `);
-    }
-  } else if (bundler === 'webpack') {
-    routes = indent(0, `
-      import HomePage from './pages/home.zmp.html';
-      import AboutPage from './pages/about.zmp.html';
-      import FormPage from './pages/form.zmp.html';
-      ${templateIf(template === 'tabs', () => `
-      import CatalogPage from './pages/catalog.zmp.html';
-      import ProductPage from './pages/product.zmp.html';
-      import SettingsPage from './pages/settings.zmp.html';
-      `)}
-      ${templateIf(template === 'split-view', () => `
-      import LeftPage1 from './pages/left-page-1.zmp.html';
-      import LeftPage2 from './pages/left-page-2.zmp.html';
-      `)}
-      ${templateIf(template !== 'blank', () => `
-      import DynamicRoutePage from './pages/dynamic-route.zmp.html';
-      import NotFoundPage from './pages/404.zmp.html';
-      `)}
-
-      var routes = [
-        {
-          path: '/',
-          component: HomePage,
-        },
-        {
-          path: '/about/',
-          component: AboutPage,
-        },
-        {
-          path: '/form/',
-          component: FormPage,
-        },
-        ${templateIf(template === 'tabs', () => `
-        {
-          path: '/catalog/',
-          component: CatalogPage,
-        },
-        {
-          path: '/product/:id/',
-          component: ProductPage,
-        },
-        {
-          path: '/settings/',
-          component: SettingsPage,
-        },
-        `)}
-        ${templateIf(template === 'split-view', () => `
-        {
-          path: '/left-page-1/',
-          component: LeftPage1,
-        },
-        {
-          path: '/left-page-2/',
-          component: LeftPage2,
-        },
-        `)}
-        {
-          path: '/dynamic-route/blog/:blogId/post/:postId/',
-          component: DynamicRoutePage,
-        },
-        {
-          path: '(.*)',
-          component: NotFoundPage,
-        },
-      ];
-    `);
-  } else {
-    routes = indent(0, `
-      var routes = [
-        {
-          path: '/',
-          url: './index.html',
-        },
-        {
-          path: '/about/',
-          url: './pages/about.html',
-        },
-        {
-          path: '/form/',
-          url: './pages/form.html',
-        },
-        ${templateIf(template === 'tabs', () => `
-        {
-          path: '/catalog/',
-          componentUrl: './pages/catalog.html',
-        },
-        {
-          path: '/product/:id/',
-          componentUrl: './pages/product.html',
-        },
-        {
-          path: '/settings/',
-          url: './pages/settings.html',
-        },
-        `)}
-        ${templateIf(template === 'split-view', () => `
-        {
-          path: '/left-page-1/',
-          url: './pages/left-page-1.html',
-        },
-        {
-          path: '/left-page-2/',
-          url: './pages/left-page-2.html',
-        },
-        `)}
-        {
-          path: '/dynamic-route/blog/:blogId/post/:postId/',
-          componentUrl: './pages/dynamic-route.html',
-        },
-        // Default route (404 page). MUST BE THE LAST
-        {
-          path: '(.*)',
-          url: './pages/404.html',
-        },
-      ];
-    `);
-  }
-
-  if (bundler) {
-    routes += '\nexport default routes;';
-  }
-
-  return routes;
-};

package/create/templates/core/generate-scripts.js

@@ -1,94 +0,0 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-const appParameters = require('../app-parameters');
-const stylesExtension = require('../../utils/styles-extension');
-
-module.exports = (options) => {
-  const {
-    bundler,
-    type,
-    cssPreProcessor,
-    theming,
-    customBuild,
-    template,
-  } = options;
-
-  let scripts = '';
-
-  if (bundler) {
-    scripts += indent(
-      0,
-      `
-      import $ from 'zmp-dom';
-      ${templateIf(
-        customBuild,
-        () => `
-      import ZMP from './zmp-custom.js';
-      `,
-        () => `
-      import ZMP from 'zmp-framework/core/bundle';
-      `
-      )}
-
-      // Import ZMP Styles
-      ${templateIf(
-        customBuild,
-        () => `
-      import '../css/zmp-custom.less';
-      `,
-        () => `
-      import 'zmp-framework/zmp-bundle.min.css';
-      `
-      )}
-
-      // Import Icons and App Custom Styles
-      ${templateIf(
-        theming.iconFonts,
-        () => `
-      import '../css/icons.css';
-      `
-      )}
-      import '../css/app.${stylesExtension(cssPreProcessor)}';
-      // Import Store
-      import store from '../store.js';
-
-      // Import main app component
-      import App from '../app.zmp.html';
-    `
-    );
-  } else {
-    scripts += indent(
-      0,
-      `
-      var $ = Dom7;
-    `
-    );
-  }
-
-  scripts += indent(
-    0,
-    `
-    var app = new ZMP({
-      ${indent(6, appParameters(options)).trim()}
-    });
-    ${templateIf(
-      !bundler && template !== 'blank',
-      () => `
-    // Login Screen Demo
-    $('#my-login-screen .login-button').on('click', function () {
-      var username = $('#my-login-screen [name="username"]').val();
-      var password = $('#my-login-screen [name="password"]').val();
-
-      // Close login screen
-      app.loginScreen.close('#my-login-screen');
-
-      // Alert username and password
-      app.dialog.alert('Username: ' + username + '<br/>Password: ' + password);
-    });
-    `
-    )}
-  `
-  );
-
-  return scripts.trim();
-};

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

@@ -1,20 +0,0 @@
-<div class="page">
-  <div class="navbar">
-    <div class="navbar-bg"></div>
-    <div class="navbar-inner sliding">
-      <div class="left">
-        <a href="#" class="link back">
-          <i class="icon icon-back"></i>
-          <span class="if-not-md">Back</span>
-        </a>
-      </div>
-      <div class="title">Not found</div>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="block block-strong">
-      <p>Sorry</p>
-      <p>Requested content not found.</p>
-    </div>
-  </div>
-</div>