zmp-cli 3.15.7 → 3.15.8

package/create/templates/svelte/babel.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  presets: [
-    ['@babel/preset-env', {
-      modules: false,
-    }],
-  ],
-  plugins: [
-    '@babel/plugin-transform-runtime',
-  ],
-};

package/create/templates/svelte/copy-assets.js

@@ -1 +0,0 @@
-"use strict";const e=require("path"),t=require("./generate-home-page"),s=require("./generate-root"),r=require("../generate-store");module.exports=o=>{let a=o.cwd||process.cwd(),{template:l,bundler:n}=o,c=[];return[..."blank"!==l?["404","about","dynamic-route","form"]:[],..."tabs"===l?["catalog","product","settings"]:[],..."split-view"===l?["left-page-1","left-page-2"]:[]].forEach(t=>{let s=e.resolve(__dirname,"pages",`${t}.svelte`),r=e.resolve(a,"src","pages",`${t}.svelte`);c.push({from:s,to:r})}),c.push({content:t(o),to:e.resolve(a,"src","pages","home.svelte")}),c.push({content:s(o),to:e.resolve(a,"src","components","app.svelte")}),c.push({content:r(o),to:e.resolve(a,"src","store.js")}),n&&c.push({from:e.resolve(__dirname,"babel.config.js"),to:e.resolve(a,"babel.config.js")}),c};

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

@@ -1,122 +0,0 @@
-"use strict";const t=require("../../utils/indent");module.exports=e=>{let i;let{name:a,template:o}=e;return("single-view"===o||"blank"===o)&&(i=`
-          <p>Here is your blank ZMP app. Let's see what we have here.</p>
-    `),"split-view"===o&&(i=`
-        <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>
-    `),"tabs"===o&&(i=`
-        <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>
-    `),t(0,`
-    <Page name="home">
-      <!-- Top Navbar -->
-      ${"blank"===o?`
-      <Navbar large>
-        <NavTitle>${a}</NavTitle>
-        <NavTitleLarge>${a}</NavTitleLarge>
-      </Navbar>
-      `.trim():`
-      <Navbar large sliding={false}>
-        <NavLeft>
-          <Link iconIos="zmp:menu" iconAurora="zmp:menu" iconMd="material:menu" panelOpen="left" />
-        </NavLeft>
-        <NavTitle sliding>${a}</NavTitle>
-        <NavRight>
-          <Link iconIos="zmp:menu" iconAurora="zmp:menu" iconMd="material:menu" panelOpen="right" />
-        </NavRight>
-        <NavTitleLarge>${a}</NavTitleLarge>
-      </Navbar>
-      `.trim()}
-      ${"tabs"!==o?`
-      <!-- Toolbar -->
-      <Toolbar bottom>
-        <Link>Left Link</Link>
-        <Link>Right Link</Link>
-      </Toolbar>
-
-      `.trim():""}
-      <!-- Page content -->
-      <Block strong>
-        ${i.trim()}
-      </Block>
-
-      ${"blank"!==o?`
-      <BlockTitle>Navigation</BlockTitle>
-      <List>
-        <ListItem link="/about/" title="About"/>
-        <ListItem link="/form/" title="Form"/>
-      </List>
-
-      <BlockTitle>Modals</BlockTitle>
-      <Block strong>
-        <Row>
-          <Col width="50">
-            <Button fill raised popupOpen="#my-popup">Popup</Button>
-          </Col>
-          <Col width="50">
-            <Button fill raised loginScreenOpen="#my-login-screen">Login Screen</Button>
-          </Col>
-        </Row>
-      </Block>
-
-      <BlockTitle>Panels</BlockTitle>
-      <Block strong>
-        <Row>
-          <Col width="50">
-            <Button fill raised panelOpen="left">Left Panel</Button>
-          </Col>
-          <Col width="50">
-            <Button fill raised panelOpen="right">Right Panel</Button>
-          </Col>
-        </Row>
-      </Block>
-
-      <List>
-        <ListItem
-          title="Dynamic (Component) Route"
-          link="/dynamic-route/blog/45/post/125/?foo=bar#about"
-        />
-        <ListItem
-          title="Default Route (404)"
-          link="/load-something-that-doesnt-exist/"
-        />
-      </List>
-      `.trim():""}
-    </Page>
-    ${"blank"===o?`
-    <script>
-      import {
-        Page,
-        Navbar,
-        NavTitle,
-        NavTitleLarge,
-        Link,
-        Toolbar,
-        Block,
-      } from 'zmp-svelte';
-    </script>
-    `.trim():`
-    <script>
-      import {
-        Page,
-        Navbar,
-        NavLeft,
-        NavTitle,
-        NavTitleLarge,
-        NavRight,
-        Link,
-        Toolbar,
-        Block,
-        BlockTitle,
-        List,
-        ListItem,
-        Row,
-        Col,
-        Button
-      } from 'zmp-svelte';
-    </script>
-    `.trim()}
-  `).trim()};

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

@@ -1,177 +0,0 @@
-"use strict";const e=require("../../utils/indent"),t=require("../../utils/template-if"),i=require("../app-parameters");module.exports=a=>{let{template:o,theming:l}=a,n=e(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>
-  `),r=e(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>
-  `),s=e(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>
-  `),p="";return("single-view"===o||"split-view"===o||"blank"===o)&&(p=e(6,`
-      <!-- Your main view, should have "view-main" class -->
-      <View main class="safe-areas" url="/" />
-    `)),"tabs"===o&&(p=e(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>
-    `)),e(0,`
-    ${"blank"===o?`
-    <App { ...zmpparams } ${l.darkTheme?"themeDark":""}>
-      ${p}
-    </App>
-    `.trim():`
-    <App { ...zmpparams } ${l.darkTheme?"themeDark":""}>
-      ${"split-view"===o?r:n}
-      ${s}
-      ${p}
-
-      <!-- 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';
-      ${t("blank"===o,()=>`
-      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 = {
-        ${e(8,i(a)).trim()}
-      };
-      ${t("blank"!==o,()=>`
-      // 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,76 +0,0 @@
-"use strict";const e=require("../../utils/template-if"),t=require("../../utils/indent");module.exports=o=>{let{template:a}=o;return"blank"===a?t(0,`
-      import HomePage from './pages/home.svelte';
-
-      var routes = [
-        {
-          path: '/',
-          component: HomePage,
-        },
-      ];
-
-      export default routes;
-    `):t(0,`
-    import HomePage from './pages/home.svelte';
-    import AboutPage from './pages/about.svelte';
-    import FormPage from './pages/form.svelte';
-    ${e("tabs"===a,()=>`
-    import CatalogPage from './pages/catalog.svelte';
-    import ProductPage from './pages/product.svelte';
-    import SettingsPage from './pages/settings.svelte';
-    `)}
-    ${e("split-view"===a,()=>`
-    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,
-      },
-      ${e("tabs"===a,()=>`
-      {
-        path: '/catalog/',
-        component: CatalogPage,
-      },
-      {
-        path: '/product/:id/',
-        component: ProductPage,
-      },
-      {
-        path: '/settings/',
-        component: SettingsPage,
-      },
-      `)}
-      ${e("split-view"===a,()=>`
-      {
-        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;
-  `)};

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

@@ -1,31 +0,0 @@
-"use strict";const t=require("../../utils/template-if"),e=require("../../utils/indent"),p=require("../../utils/styles-extension");module.exports=o=>{let{cssPreProcessor:s,theming:m,customBuild:r}=o,n="";return(n+=e(0,`
-    // Import ZMP
-    import ZMP from '${r?"./zmp-custom.js":"zmp-framework/core/lite-bundle"}';
-
-    // Import ZMP-Svelte Plugin
-    import ZMPSvelte from 'zmp-svelte';
-
-    // Import ZMP Styles
-    ${t(r,()=>`
-    import '../css/zmp-custom.less';
-    `,()=>`
-    import 'zmp-framework/zmp-bundle.min.css';
-    `)}
-
-    // Import Icons and App Custom Styles
-    ${t(m.iconFonts,()=>`
-    import '../css/icons.css';
-    `)}
-    import '../css/app.${p(s)}';
-
-    // 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'),
-    });
-  `)).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>