zmp-cli 3.15.6 → 3.15.8

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

@@ -1,235 +0,0 @@
-const indent = require('../../utils/indent');
-const templateIf = require('../../utils/template-if');
-const appParameters = require('../app-parameters');
-
-module.exports = (options) => {
-  const { template, theming } = options;
-
-  // Panels
-  const leftPanelPlain = indent(
-    6,
-    `
-    <!-- Left panel with cover effect-->
-    <Panel left cover themeDark>
-      <View>
-        <Page>
-          <Navbar title="Left Panel"/>
-          <Block>Left panel content goes here</Block>
-        </Page>
-      </View>
-    </Panel>
-  `
-  );
-
-  const leftPanelWithView = indent(
-    6,
-    `
-    <!-- Left panel with cover effect when hidden -->
-    <Panel left cover themeDark visibleBreakpoint={960}>
-      <View>
-        <Page>
-          <Navbar title="Left Panel"/>
-          <BlockTitle>Left View Navigation</BlockTitle>
-          <List>
-            <ListItem link="/left-page-1/" title="Left Page 1"/>
-            <ListItem link="/left-page-2/" title="Left Page 2"/>
-          </List>
-          <BlockTitle>Control Main View</BlockTitle>
-          <List>
-            <ListItem link="/about/" view=".view-main" panelClose title="About"/>
-            <ListItem link="/form/" view=".view-main" panelClose title="Form"/>
-            <ListItem link="#" view=".view-main" back panelClose title="Back in history"/>
-          </List>
-        </Page>
-      </View>
-    </Panel>
-  `
-  );
-  const leftPanel =
-    template === 'split-view' ? leftPanelWithView : leftPanelPlain;
-  const rightPanel = indent(
-    6,
-    `
-    <!-- Right panel with reveal effect-->
-    <Panel right reveal themeDark>
-      <View>
-        <Page>
-          <Navbar title="Right Panel"/>
-          <Block>Right panel content goes here</Block>
-        </Page>
-      </View>
-    </Panel>
-  `
-  );
-
-  // Views
-  let views = '';
-  if (
-    template === 'single-view' ||
-    template === 'split-view' ||
-    template === 'blank'
-  ) {
-    views = indent(
-      6,
-      `
-      <!-- Your main view, should have "view-main" class -->
-      <View main class="safe-areas" url="/" />
-    `
-    );
-  }
-  if (template === 'tabs') {
-    views = indent(
-      6,
-      `
-      <!-- Views/Tabs container -->
-      <Views tabs class="safe-areas">
-        <!-- Tabbar for switching views-tabs -->
-        <Toolbar tabbar labels bottom>
-          <Link tabLink="#view-home" tabLinkActive iconIos="zmp:house_fill" iconAurora="zmp:house_fill" iconMd="material:home" text="Home" />
-          <Link tabLink="#view-catalog" iconIos="zmp:square_list_fill" iconAurora="zmp:square_list_fill" iconMd="material:view_list" text="Catalog" />
-          <Link tabLink="#view-settings" iconIos="zmp:gear" iconAurora="zmp:gear" iconMd="material:settings" text="Settings" />
-        </Toolbar>
-
-        <!-- Your main view/tab, should have "view-main" class. It also has "tabActive" prop -->
-        <View id="view-home" main tab tabActive url="/" />
-
-        <!-- Catalog View -->
-        <View id="view-catalog" name="catalog" tab url="/catalog/" />
-
-        <!-- Settings View -->
-        <View id="view-settings" name="settings" tab url="/settings/" />
-
-      </Views>
-    `
-    );
-  }
-
-  return indent(
-    0,
-    `
-    ${
-      template === 'blank'
-        ? `
-    <App { ...zmpparams } ${theming.darkTheme ? 'themeDark' : ''}>
-      ${views}
-    </App>
-    `.trim()
-        : `
-    <App { ...zmpparams } ${theming.darkTheme ? 'themeDark' : ''}>
-      ${leftPanel}
-      ${rightPanel}
-      ${views}
-
-      <!-- Popup -->
-      <Popup id="my-popup">
-        <View>
-          <Page>
-            <Navbar title="Popup">
-              <NavRight>
-                <Link popupClose>Close</Link>
-              </NavRight>
-            </Navbar>
-            <Block>
-              <p>Popup content goes here.</p>
-            </Block>
-          </Page>
-        </View>
-      </Popup>
-
-      <LoginScreen id="my-login-screen">
-        <View>
-          <Page loginScreen>
-            <LoginScreenTitle>Login</LoginScreenTitle>
-            <List form>
-              <ListInput
-                type="text"
-                name="username"
-                placeholder="Your username"
-                bind:value={username}
-              />
-              <ListInput
-                type="password"
-                name="password"
-                placeholder="Your password"
-                bind:value={password}
-              />
-            </List>
-            <List>
-              <ListButton title="Sign In" onClick={() => alertLoginData()} />
-            </List>
-            <BlockFooter>
-              Some text about login information.<br />Click "Sign In" to close Login Screen
-            </BlockFooter>
-          </Page>
-        </View>
-      </LoginScreen>
-    </App>
-    `.trim()
-    }
-    <script>
-      import { onMount } from 'svelte';
-      ${templateIf(
-        template === 'blank',
-        () => `
-      import {
-        zmp,
-        zmpready,
-        App,
-        View,
-      } from 'zmp-svelte';
-      `,
-        () => `
-      import {
-        zmp,
-        zmpready,
-        App,
-        Panel,
-        Views,
-        View,
-        Popup,
-        Page,
-        Navbar,
-        Toolbar,
-        NavRight,
-        Link,
-        Block,
-        BlockTitle,
-        LoginScreen,
-        LoginScreenTitle,
-        List,
-        ListItem,
-        ListInput,
-        ListButton,
-        BlockFooter
-      } from 'zmp-svelte';
-      `
-      )}
-      import store from '../store';
-
-      // ZMP Parameters
-      let zmpparams = {
-        ${indent(8, appParameters(options)).trim()}
-      };
-      ${templateIf(
-        template !== 'blank',
-        () => `
-      // Login screen demo data
-      let username = '';
-      let password = '';
-
-      function alertLoginData() {
-        zmp.dialog.alert('Username: ' + username + '<br>Password: ' + password, () => {
-          zmp.loginScreen.close();
-        });
-      }
-      `
-      )}
-      onMount(() => {
-        zmpready(() => {
-          // Call ZMP APIs here
-        });
-      })
-    </script>
-  `
-  ).trim();
-};

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

@@ -1,91 +0,0 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-
-module.exports = (options) => {
-  const {
-    template,
-  } = options;
-
-  if (template === 'blank') {
-    return indent(0, `
-      import HomePage from './pages/home.svelte';
-
-      var routes = [
-        {
-          path: '/',
-          component: HomePage,
-        },
-      ];
-
-      export default routes;
-    `);
-  }
-  // Webpack Routes
-  const routes = indent(0, `
-    import HomePage from './pages/home.svelte';
-    import AboutPage from './pages/about.svelte';
-    import FormPage from './pages/form.svelte';
-    ${templateIf(template === 'tabs', () => `
-    import CatalogPage from './pages/catalog.svelte';
-    import ProductPage from './pages/product.svelte';
-    import SettingsPage from './pages/settings.svelte';
-    `)}
-    ${templateIf(template === 'split-view', () => `
-    import LeftPage1 from './pages/left-page-1.svelte';
-    import LeftPage2 from './pages/left-page-2.svelte';
-    `)}
-    import DynamicRoutePage from './pages/dynamic-route.svelte';
-    import NotFoundPage from './pages/404.svelte';
-
-    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,
-      },
-    ];
-
-    export default routes;
-  `);
-
-  return routes;
-};

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

@@ -1,47 +0,0 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-const stylesExtension = require('../../utils/styles-extension');
-
-module.exports = (options) => {
-  const {
-    cssPreProcessor,
-    theming,
-    customBuild,
-  } = options;
-
-  let scripts = '';
-
-  scripts += indent(0, `
-    // Import ZMP
-    import ZMP from '${customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle'}';
-
-    // Import ZMP-Svelte Plugin
-    import ZMPSvelte from 'zmp-svelte';
-
-    // 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 App Component
-    import App from '../components/app.svelte';
-
-    // Init ZMP Svelte Plugin
-    ZMP.use(ZMPSvelte)
-
-    // Mount Svelte App
-    const app = new App({
-      target: document.getElementById('app'),
-    });
-  `);
-
-  return scripts.trim();
-};

package/create/templates/svelte/pages/404.svelte

@@ -1,10 +0,0 @@
-<Page>
-  <Navbar title="Not found" backLink="Back" />
-  <Block strong>
-    <p>Sorry</p>
-    <p>Requested content not found.</p>
-  </Block>
-</Page>
-<script>
-  import { Page, Navbar, Block } from 'zmp-svelte';
-</script>

package/create/templates/svelte/pages/about.svelte

@@ -1,16 +0,0 @@
-<Page>
-  <Navbar title="About" backLink="Back" />
-  <BlockTitle>About My App</BlockTitle>
-  <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>
-  </Block>
-  <Block strong>
-    <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>
-  </Block>
-</Page>
-<script>
-  import { Page, Navbar, Block, BlockTitle } from 'zmp-svelte';
-</script>

package/create/templates/svelte/pages/catalog.svelte

@@ -1,31 +0,0 @@
-<Page name="catalog">
-  <Navbar title="Catalog" />
-  <List>
-    {#each products as product, index (product.id)}
-      <ListItem
-        title={product.title}
-        link={`/product/${product.id}/`}
-      />
-    {/each}
-  </List>
-  {#if products.length === 3}
-    <Block>
-      <Button fill onClick={addProduct}>Add Product</Button>
-    </Block>
-  {/if}
-</Page>
-<script>
-  import { Page, Navbar, List, ListItem, Block, Button, useStore } from 'zmp-svelte';
-  import store from '../store';
-
-  let products = useStore('products', (value) => (products = value));
-
-  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.'
-    });
-  }
-
-</script>

package/create/templates/svelte/pages/dynamic-route.svelte

@@ -1,34 +0,0 @@
-<Page>
-  <Navbar title="Dynamic Route" backLink="Back" />
-  <Block strong>
-    <ul>
-      <li><b>Url:</b> {zmproute.url}</li>
-      <li><b>Path:</b> {zmproute.path}</li>
-      <li><b>Hash:</b> {zmproute.hash}</li>
-      <li><b>Params:</b>
-        <ul>
-          {#each Object.keys(zmproute.params) as key}
-            <li><b>{key}:</b> {zmproute.params[key]}</li>
-          {/each}
-        </ul>
-      </li>
-      <li><b>Query:</b>
-        <ul>
-          {#each Object.keys(zmproute.query) as key}
-            <li><b>{key}:</b> {zmproute.query[key]}</li>
-          {/each}
-        </ul>
-      </li>
-      <li><b>Route:</b> {zmproute.route.path}</li>
-    </ul>
-  </Block>
-  <Block strong>
-    <Link onClick={() => zmprouter.back()}>Go back via Router API</Link>
-  </Block>
-</Page>
-<script>
-  import { Page, Navbar, Block, Link } from 'zmp-svelte';
-
-  export let zmproute;
-  export let zmprouter;
-</script>

package/create/templates/svelte/pages/form.svelte

@@ -1,175 +0,0 @@
-<Page name="form">
-  <Navbar title="Form" backLink="Back"></Navbar>
-
-  <BlockTitle>Form Example</BlockTitle>
-  <List noHairlinesMd>
-    <ListInput
-      label="Name"
-      type="text"
-      placeholder="Your name"
-    ></ListInput>
-
-    <ListInput
-      label="E-mail"
-      type="email"
-      placeholder="E-mail"
-    ></ListInput>
-
-    <ListInput
-      label="URL"
-      type="url"
-      placeholder="URL"
-    ></ListInput>
-
-    <ListInput
-      label="Password"
-      type="password"
-      placeholder="Password"
-    ></ListInput>
-
-    <ListInput
-      label="Phone"
-      type="tel"
-      placeholder="Phone"
-    ></ListInput>
-
-    <ListInput
-      label="Gender"
-      type="select"
-      >
-      <option>Male</option>
-      <option>Female</option>
-    </ListInput>
-
-    <ListInput
-      label="Birth date"
-      type="date"
-      placeholder="Birth day"
-      value="2014-04-30"
-    ></ListInput>
-
-    <ListItem
-      title="Toggle"
-    >
-      <span slot="after">
-        <Toggle />
-      </span>
-    </ListItem>
-
-    <ListInput
-      label="Range"
-      input={false}
-    >
-      <span slot="input">
-        <Range value={50} min={0} max={100} step={1} />
-      </span>
-    </ListInput>
-
-    <ListInput
-      type="textarea"
-      label="Textarea"
-      placeholder="Bio"
-    ></ListInput>
-    <ListInput
-      type="textarea"
-      label="Resizable"
-      placeholder="Bio"
-      resizable
-    ></ListInput>
-  </List>
-
-  <BlockTitle>Buttons</BlockTitle>
-  <Block strong>
-    <Row tag="p">
-      <Button class="col">Button</Button>
-      <Button class="col" fill>Fill</Button>
-    </Row>
-    <Row tag="p">
-      <Button class="col" raised>Raised</Button>
-      <Button class="col" raised fill>Raised Fill</Button>
-    </Row>
-    <Row tag="p">
-      <Button class="col" round>Round</Button>
-      <Button class="col" round fill>Round Fill</Button>
-    </Row>
-    <Row tag="p">
-      <Button class="col" outline>Outline</Button>
-      <Button class="col" round outline>Outline Round</Button>
-    </Row>
-    <Row tag="p">
-      <Button class="col" small outline>Small</Button>
-      <Button class="col" small round outline>Small Round</Button>
-    </Row>
-    <Row tag="p">
-      <Button class="col" small fill>Small</Button>
-      <Button class="col" small round fill>Small Round</Button>
-    </Row>
-    <Row tag="p">
-      <Button class="col" large raised>Large</Button>
-      <Button class="col" large fill raised>Large Fill</Button>
-    </Row>
-    <Row tag="p">
-      <Button class="col" large fill raised color="red">Large Red</Button>
-      <Button class="col" large fill raised color="green">Large Green</Button>
-    </Row>
-  </Block>
-
-  <BlockTitle>Checkbox group</BlockTitle>
-  <List>
-    <ListItem
-      checkbox
-      name="my-checkbox"
-      value="Books"
-      title="Books"
-    ></ListItem>
-    <ListItem
-      checkbox
-      name="my-checkbox"
-      value="Movies"
-      title="Movies"
-    ></ListItem>
-    <ListItem
-      checkbox
-      name="my-checkbox"
-      value="Food"
-      title="Food"
-    ></ListItem>
-  </List>
-
-  <BlockTitle>Radio buttons group</BlockTitle>
-  <List>
-    <ListItem
-      radio
-      name="radio"
-      value="Books"
-      title="Books"
-    ></ListItem>
-    <ListItem
-      radio
-      name="radio"
-      value="Movies"
-      title="Movies"
-    ></ListItem>
-    <ListItem
-      radio
-      name="radio"
-      value="Food"
-      title="Food"
-    ></ListItem>
-  </List>
-</Page>
-<script>
-  import {
-    Page,
-    Navbar,
-    List,
-    ListInput,
-    ListItem,
-    Toggle,
-    BlockTitle,
-    Row,
-    Button,
-    Range,
-    Block
-  } from 'zmp-svelte';
-</script>

package/create/templates/svelte/pages/left-page-1.svelte

@@ -1,13 +0,0 @@
-<Page>
-  <Navbar title="Left Page 1" backLink="Back" />
-  <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>
-  </Block>
-</Page>
-<script>
-  import { Page, Navbar, Block } from 'zmp-svelte';
-</script>

package/create/templates/svelte/pages/left-page-2.svelte

@@ -1,12 +0,0 @@
-<Page>
-  <Navbar title="Left Page 2" backLink="Back" />
-  <Block strong>
-    <p>Maxime tempore, repellendus? Sequi saepe provident quas, neque assumenda dicta odit eaque nesciunt facere mollitia totam voluptate aspernatur vel corporis repudiandae commodi ad cumque repellendus. Saepe officia iure repellat repellendus.</p>
-    <p>Ea maiores accusantium non fuga dicta, vero minus veniam! Ipsum eveniet vero voluptate veritatis aspernatur hic dicta adipisci, debitis. Sint quam aperiam repellat quis perspiciatis accusantium ipsum nulla soluta temporibus.</p>
-    <p>Necessitatibus ipsum culpa doloremque, nostrum atque totam minima itaque! Blanditiis nobis nam repudiandae, ut nostrum voluptate accusantium atque, veniam libero quaerat corporis laborum earum rem nihil unde. Vitae cum, aliquam?</p>
-    <p>Debitis aliquid nemo maxime recusandae, mollitia sed error vero. Atque molestiae rem necessitatibus nam voluptas quaerat, reiciendis, excepturi quis facilis, quod cupiditate vitae voluptate repudiandae! Unde impedit aut id ut?</p>
-  </Block>
-</Page>
-<script>
-  import { Page, Navbar, Block } from 'zmp-svelte';
-</script>

package/create/templates/svelte/pages/product.svelte

@@ -1,21 +0,0 @@
-<Page name="product">
-  <Navbar title={currentProduct.title} backLink="Back" />
-  <BlockTitle>About {currentProduct.title}</BlockTitle>
-  <Block strong>
-    {currentProduct.description}
-  </Block>
-</Page>
-<script>
-  import { Page, Navbar, BlockTitle, Block, useStore } from 'zmp-svelte';
-
-  export let zmproute;
-
-  const products = useStore('products');
-  const productId = zmproute.params.id;
-  let currentProduct;
-  products.forEach(function (product) {
-    if (product.id === productId) {
-      currentProduct = product;
-    }
-  });
-</script>