zmp-cli 3.15.7 → 3.15.9

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>

package/create/templates/svelte/pages/request-and-load.svelte

@@ -1,21 +0,0 @@
-<Page>
-  <Navbar title={`${user.firstName} ${user.lastName}`} backLink="Back" />
-  <Block strong>
-    {user.about}
-  </Block>
-  <List>
-    {#each user.links as link}
-      <ListItem
-        link={link.url}
-        title={link.title}
-        external
-        target="_blank"
-      />
-    {/each}
-  </List>
-</Page>
-<script>
-  import { Page, Navbar, Block, List, ListItem } from 'zmp-svelte';
-
-  export let user;
-</script>

package/create/templates/svelte/pages/settings.svelte

@@ -1,175 +0,0 @@
-<Page name="settings">
-  <Navbar title="Settings" />
-
-  <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="after">
-        <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/vue/babel.config.js

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

package/create/templates/vue/components/header.vue

@@ -1,28 +0,0 @@
-<template>
-  <zmp-navbar>
-    <zmp-nav-left>
-      <zmp-skeleton-avatar v-if="!user.id" class="pt-2"></zmp-skeleton-avatar>
-      <zmp-avatar v-else :src="user.avatar" online />
-    </zmp-nav-left>
-    <zmp-nav-title v-if="!user.id">
-      <zmp-skeleton-text>
-        <zmp-title class="mb-0">Lorem ipsum</zmp-title>
-      </zmp-skeleton-text>
-      <zmp-skeleton-text>Lorem ipsum</zmp-skeleton-text>
-    </zmp-nav-title>
-    <zmp-nav-title v-else>
-      <zmp-title class="mb-0">{{ user.name }}</zmp-title>
-      <zmp-text class="mb-0">{{ user.id }}</zmp-text>
-    </zmp-nav-title>
-    <zmp-nav-right>
-      <sun-and-moon />
-    </zmp-nav-right>
-  </zmp-navbar>
-</template>
-
-<script setup>
-import { useStore } from "zmp-vue";
-import SunAndMoon from "./sun-and-moon.vue";
-
-const user = useStore('user')
-</script>

package/create/templates/vue/components/sun-and-moon.vue

@@ -1,34 +0,0 @@
-<template>
-  <zmp-button
-    small
-    class="sun-moon"
-    @click="setLayoutTheme"
-    type-name="primary"
-    round
-    :color="darkMode ? 'gray' : 'default'"
-  >
-    <img :src="icon" alt="switch-mode" />
-  </zmp-button>
-</template>
-
-<script setup>
-import { useStore } from 'zmp-vue';
-import { computed } from 'vue';
-import store from '../store';
-import sun from '../static/icons/sun.svg';
-import moon from '../static/icons/moon.svg';
-
-const darkMode = useStore('darkMode');
-
-const icon = computed(() => (darkMode.value ? moon : sun));
-
-const setLayoutTheme = () => {
-  store.dispatch('setDarkMode', !darkMode.value);
-};
-</script>
-
-<style scoped>
-.sun-moon {
-  padding: 0;
-}
-</style>

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

@@ -1 +0,0 @@
-"use strict";const e=require("path"),o=require("./generate-home-page"),s=require("./generate-root"),r=require("../generate-store");module.exports=n=>{let t=n.cwd||process.cwd(),{bundler:c}=n,v=[];return["settings"].forEach(o=>{let s=e.resolve(__dirname,"pages",`${o}.vue`),r=e.resolve(t,"src","pages",`${o}.vue`);v.push({from:s,to:r})}),v.push({content:o(n),to:e.resolve(t,"src","pages","index.vue")}),v.push({content:s(n),to:e.resolve(t,"src","components","app.vue")}),v.push({content:r(n),to:e.resolve(t,"src","store.js")}),v.push({from:e.resolve(__dirname,"vite.config.js"),to:e.resolve(t,"vite.config.js")}),v.push({from:e.resolve(__dirname,"global-components.d.ts"),to:e.resolve(t,"src","global-components.d.ts")}),v.push({from:e.resolve(__dirname,"components","header.vue"),to:e.resolve(t,"src","components","header.vue")}),v.push({from:e.resolve(__dirname,"components","sun-and-moon.vue"),to:e.resolve(t,"src","components","sun-and-moon.vue")}),v.push({from:e.resolve(__dirname,"icons","sun.svg"),to:e.resolve(t,"src","static","icons","sun.svg")}),v.push({from:e.resolve(__dirname,"icons","moon.svg"),to:e.resolve(t,"src","static","icons","moon.svg")}),c&&v.push({from:e.resolve(__dirname,"babel.config.js"),to:e.resolve(t,"babel.config.js")}),v};

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

@@ -1,50 +0,0 @@
-"use strict";const e=require("../../utils/indent");module.exports=t=>{let{name:o,template:m}=t;return e(0,`
-  <template>
-    <zmp-page name="home" :theme-dark="darkMode">
-      <Header />
-      <zmp-box m="4">
-        <zmp-card inset title="Welcome to Zalo Mini App. Let's see what we have here.">
-          <p>
-            Recommended IDE Setup:
-            <a
-              href="https://code.visualstudio.com/"
-              target="_blank"
-              rel="nofollow"
-            >VSCode</a> +
-            <a
-              href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar"
-              target="_blank"
-              rel="nofollow"
-            >Volar</a>
-          </p>
-          <zmp-button @click="openDocs" fill responsive>Documentation</zmp-button>
-        </zmp-card>
-      </zmp-box>
-      <zmp-box m="4">
-        <zmp-card inset class="p-0">
-          <zmp-box flex justify-content="space-between" align-items="center">
-            <zmp-text bold class="mb-0">Example navigation</zmp-text>
-            <zmp-link href="/settings" transition="zmp-fade">
-              Settings
-              <zmp-icon zmp="zi-chevron-right" />
-            </zmp-link>
-          </zmp-box>
-        </zmp-card>
-      </zmp-box>
-    </zmp-page>
-  </template>
-
-  <script setup>
-  import { useStore } from 'zmp-vue';
-  import api from 'zmp-sdk';
-  import Header from "../components/header.vue";
-
-  const openDocs = () => {
-    api.openWebview({
-      url: 'https://mini.zalo.me'
-    });
-  };
-
-  const darkMode = useStore('darkMode');
-  </script>
-  `).trim()};

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

@@ -1,40 +0,0 @@
-"use strict";const r=require("../../utils/indent");require("../../utils/template-if");const e=require("../app-parameters");module.exports=t=>{let{template:a,type:p,theming:s,customBuild:m}=t;return r(0,`
-    <template>
-      <zmp-app v-bind="zmpparams">
-        <!-- Your main view, should have "view-main" class -->
-        <zmp-view main class="safe-areas" url="/"></zmp-view>
-      </zmp-app>
-    </template>
-    <script>
-    import { onMounted } from 'vue';
-    import { zmpready } from 'zmp-vue';
-    import api from 'zmp-sdk';
-    import store from '../store';
-
-    export default {
-      setup() {
-        // ZMP Parameters
-        const zmpparams = {
-          ${r(6,e(t)).trim()}
-        };
-
-        onMounted(() => {
-          zmpready(async () => {
-            // Call ZMP APIs here
-            try {
-              await api.login();
-              const { userInfo } = await api.getUserInfo();
-              store.dispatch('setUser', userInfo);
-            } catch (error) {
-              console.error(error);
-            }
-          });
-        });
-
-        return {
-          zmpparams
-        }
-      }
-    }
-    </script>
-  `).trim()};

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

@@ -1 +0,0 @@
-"use strict";module.exports=t=>{let{template:e}=t;return["settings"]};

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

@@ -1,46 +0,0 @@
-"use strict";const p=require("../../utils/template-if"),t=require("../../utils/indent"),o=require("../../utils/styles-extension");module.exports=e=>{let{cssPreProcessor:s,theming:r,customBuild:m,includeTailwind:i}=e,n="";return(n+=t(0,`
-    // Import Vue
-    import { createApp } from 'vue';
-
-    // Import ZMP
-    import ZMP from '${m?"./zmp-custom.js":"zmp-framework/core/lite-bundle"}';
-
-    // Import ZMP-Vue Plugin
-    import ZMPVue, { registerComponents } from 'zmp-vue/bundle';${i?`
-
-    // Import tailwind styles
-    import './css/tailwind.css';`:""}
-
-    // Import ZMP Styles
-    ${p(m,()=>`
-    import '../css/zmp-custom.less';
-    `,()=>`
-    import 'zmp-framework/zmp-bundle.min.css';
-    `)}
-
-    // Import Icons and App Custom Styles
-    ${p(r.iconFonts,()=>`
-    import './css/icons.css';
-    `)}
-    import './css/app.${o(s)}';
-
-    // Import App Component
-    import App from './components/app.vue';
-    import appConfig from '../app-config.json';
-
-    if (!window.APP_CONFIG) {
-      window.APP_CONFIG = appConfig;
-    }
-
-    // Init ZMP-Vue Plugin
-    ZMP.use(ZMPVue);
-
-    // Init App
-    const app = createApp(App);
-
-    // Register ZMP Vue components
-    registerComponents(app);
-
-    // Mount the app
-    app.mount('#app');
-  `)).trim()};

package/create/templates/vue/global-components.d.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});