zmp-cli 3.15.7 → 3.15.9

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

@@ -1,129 +0,0 @@
-"use strict";const t=require("../../utils/template-if"),e=require("../../utils/indent");module.exports=a=>{let o;let{bundler:p,template:m}=a;return o="blank"===m?"webpack"===p?e(0,`
-        import HomePage from './pages/home.zmp.html';
-
-        var routes = [
-          {
-            path: '/',
-            component: HomePage,
-          },
-        ];
-      `):e(0,`
-        var routes = [
-          {
-            path: '/',
-            url: './index.html',
-          },
-        ];
-      `):"webpack"===p?e(0,`
-      import HomePage from './pages/home.zmp.html';
-      import AboutPage from './pages/about.zmp.html';
-      import FormPage from './pages/form.zmp.html';
-      ${t("tabs"===m,()=>`
-      import CatalogPage from './pages/catalog.zmp.html';
-      import ProductPage from './pages/product.zmp.html';
-      import SettingsPage from './pages/settings.zmp.html';
-      `)}
-      ${t("split-view"===m,()=>`
-      import LeftPage1 from './pages/left-page-1.zmp.html';
-      import LeftPage2 from './pages/left-page-2.zmp.html';
-      `)}
-      ${t("blank"!==m,()=>`
-      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,
-        },
-        ${t("tabs"===m,()=>`
-        {
-          path: '/catalog/',
-          component: CatalogPage,
-        },
-        {
-          path: '/product/:id/',
-          component: ProductPage,
-        },
-        {
-          path: '/settings/',
-          component: SettingsPage,
-        },
-        `)}
-        ${t("split-view"===m,()=>`
-        {
-          path: '/left-page-1/',
-          component: LeftPage1,
-        },
-        {
-          path: '/left-page-2/',
-          component: LeftPage2,
-        },
-        `)}
-        {
-          path: '/dynamic-route/blog/:blogId/post/:postId/',
-          component: DynamicRoutePage,
-        },
-        {
-          path: '(.*)',
-          component: NotFoundPage,
-        },
-      ];
-    `):e(0,`
-      var routes = [
-        {
-          path: '/',
-          url: './index.html',
-        },
-        {
-          path: '/about/',
-          url: './pages/about.html',
-        },
-        {
-          path: '/form/',
-          url: './pages/form.html',
-        },
-        ${t("tabs"===m,()=>`
-        {
-          path: '/catalog/',
-          componentUrl: './pages/catalog.html',
-        },
-        {
-          path: '/product/:id/',
-          componentUrl: './pages/product.html',
-        },
-        {
-          path: '/settings/',
-          url: './pages/settings.html',
-        },
-        `)}
-        ${t("split-view"===m,()=>`
-        {
-          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',
-        },
-      ];
-    `),p&&(o+="\nexport default routes;"),o};

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

@@ -1,45 +0,0 @@
-"use strict";const r=require("../../utils/template-if"),e=require("../../utils/indent"),o=require("../app-parameters"),s=require("../../utils/styles-extension");module.exports=m=>{let{bundler:n,type:p,cssPreProcessor:t,theming:i,customBuild:a,template:l}=m,c="";return n?c+=e(0,`
-      import $ from 'zmp-dom';
-      ${r(a,()=>`
-      import ZMP from './zmp-custom.js';
-      `,()=>`
-      import ZMP from 'zmp-framework/core/bundle';
-      `)}
-
-      // Import ZMP Styles
-      ${r(a,()=>`
-      import '../css/zmp-custom.less';
-      `,()=>`
-      import 'zmp-framework/zmp-bundle.min.css';
-      `)}
-
-      // Import Icons and App Custom Styles
-      ${r(i.iconFonts,()=>`
-      import '../css/icons.css';
-      `)}
-      import '../css/app.${s(t)}';
-      // Import Store
-      import store from '../store.js';
-
-      // Import main app component
-      import App from '../app.zmp.html';
-    `):c+=e(0,`
-      var $ = Dom7;
-    `),(c+=e(0,`
-    var app = new ZMP({
-      ${e(6,o(m)).trim()}
-    });
-    ${r(!n&&"blank"!==l,()=>`
-    // 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);
-    });
-    `)}
-  `)).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>

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

@@ -1,26 +0,0 @@
-<div class="page" data-name="about">
-  <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">About</div>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="block-title">About My App</div>
-    <div class="block 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>
-    </div>
-    <div class="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>
-    </div>
-  </div>
-</div>

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

@@ -1,40 +0,0 @@
-<template>
-  <div class="page" data-name="catalog">
-    <div class="navbar">
-      <div class="navbar-bg"></div>
-      <div class="navbar-inner sliding">
-        <div class="title">Catalog</div>
-      </div>
-    </div>
-    <div class="page-content">
-      <div class="list links-list">
-        <ul>
-          ${products.value.map((product) => $h`
-            <li><a href="/product/${product.id}/">${product.title}</a></li>
-          `)}
-        </ul>
-      </div>
-      ${products.value.length === 3 && $h`
-        <div class="block">
-          <button class="button button-fill" @click=${addProduct}>Add Product</Button>
-        </div>
-      `}
-    </div>
-  </div>
-</template>
-<script>
-  export default (props, { $store }) => {
-    const products = $store.getters.products;
-
-    const addProduct = () => {
-      $store.dispatch('addProduct', {
-        id: '4',
-        title: 'Apple iPhone 12',
-        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.'
-      });
-    }
-
-    return $render;
-  }
-
-</script>

package/create/templates/core/pages/dynamic-route.html

@@ -1,115 +0,0 @@
-<template>
-  <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">Component Page</div>
-      </div>
-    </div>
-    <div class="page-content">
-      <div class="block block-strong">
-        <p>Component page template is compiled as ES Template. In addition it has lifecycle hooks, events handling, data managment and Virtual DOM data bindings.</p>
-        <p>It is useful to use Component page when you need page-specific logic.</p>
-      </div>
-      <div class="block-title">Events Handling</div>
-      <div class="block block-strong">
-        <a href="#" class="button button-raised" @click=${openAlert}>Open Alert</a>
-      </div>
-      <div class="block-title">Page Component Data</div>
-      <div class="block block-strong">
-        <p>Hello! My name is ${name}. I am ${age} years old.</p>
-        <p>I like to play:</p>
-        <ul>
-          ${likes.map((item) => $h`
-          <li>${item}</li>
-          `)}
-        </ul>
-      </div>
-      <div class="block-title">Extended Context</div>
-      <div class="block block-strong">
-        <p>Component page context as Template7 page context is also extended with some additional variables.</p>
-        <h4>$zmproute</h4>
-        <p>Contains properties of the current route:</p>
-        <ul style="padding-left:25px">
-          <li><b>$zmproute.url</b>: ${$zmproute.url}</li>
-          <li><b>$zmproute.path</b>: ${$zmproute.path}</li>
-          <li><b>$zmproute.params</b>: ${JSON.stringify($zmproute.params)}</li>
-          <li><b>$zmproute.hash</b>: ${$zmproute.hash}</li>
-          <li><b>$zmproute.query</b>: ${JSON.stringify($zmproute.query)}</li>
-        </ul>
-
-        <h4>$theme</h4>
-        <p>Currently active theme:</p>
-        <ul style="padding-left:25px">
-          <li><b>$theme.ios</b>: ${$theme.ios}</li>
-          <li><b>$theme.md</b>: ${$theme.md}</li>
-          <li><b>$theme.aurora</b>: ${$theme.aurora}</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-<style>
-  p {
-    margin: 10px 0;
-  }
-</style>
-<script>
-  export default function (props, {$zmp, $on, $onBeforeMount, $onMounted, $onBeforeUnmount, $onUnmounted }) {
-    // Component Data
-    let name = 'Jimmy';
-    let age = 25;
-    let likes = ['Tennis', 'Chess', 'Football'];
-
-    // Component Methods
-    const openAlert = () => {
-      $zmp.dialog.alert('Hello World');
-    }
-
-    // Lifecycle
-    $onBeforeMount(() => {
-      console.log('onBeforeMount');
-    });
-    $onMounted(() => {
-      console.log('onMounted');
-    });
-    $onBeforeUnmount(() => {
-      console.log('onBeforeUnmount');
-    });
-    $onUnmounted(() => {
-      console.log('onUnmounted');
-    });
-
-    // Page Events
-    $on('pageMounted', (e, page) => {
-      console.log('pageMounted', page);
-    });
-    $on('pageInit', (e, page) => {
-      console.log('pageInit', page);
-    });
-    $on('pageBeforeIn', (e, page) => {
-      console.log('pageBeforeIn', page);
-    });
-    $on('pageAfterIn', (e, page) => {
-      console.log('pageAfterIn', page);
-    });
-    $on('pageBeforeOut', (e, page) => {
-      console.log('pageBeforeOut', page);
-    });
-    $on('pageAfterOut', (e, page) => {
-      console.log('pageAfterOut', page);
-    });
-    $on('pageBeforeRemove', (e, page) => {
-      console.log('pageBeforeRemove', page);
-    });
-
-    // Return render function
-    return $render;
-  }
-</script>

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

@@ -1,258 +0,0 @@
-<div class="page" data-name="form">
-  <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">Form</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/core/pages/left-page-1.html

@@ -1,24 +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">Left Page 1</div>
-    </div>
-  </div>
-  <div class="page-content">
-    <div class="block block-strong">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit deserunt vel accusamus voluptatem neque! Laborum, et facilis at. Est dolorem, reprehenderit, sed repellendus at cum incidunt labore vel perferendis excepturi?</p>
-      <p>Tempore accusantium quaerat officiis dolores ullam, perferendis labore assumenda. A sint quo necessitatibus temporibus ipsam adipisci et quos aliquid officiis, facilis nulla ut aperiam assumenda magnam blanditiis exercitationem facere non!</p>
-      <p>Omnis accusamus harum, vero dolores itaque, asperiores laudantium eligendi ipsa, labore dignissimos unde temporibus eius assumenda, obcaecati fuga et. Et provident at consectetur vel temporibus ea nam, veritatis excepturi obcaecati.</p>
-      <p>Aspernatur dolorum nostrum est sapiente deleniti in. Placeat itaque expedita dignissimos, suscipit tenetur necessitatibus sunt excepturi quisquam, doloremque repudiandae mollitia in. Nesciunt quo vel, dolorum magni nihil officia reprehenderit libero.</p>
-      <p>Fugit nesciunt nobis at doloribus labore, voluptatem quis, distinctio, saepe illo adipisci qui molestias fugiat ut! Quasi animi possimus temporibus repudiandae quam aspernatur, recusandae libero, reiciendis distinctio cupiditate nesciunt a.</p>
-    </div>
-  </div>
-</div>
-