zmp-cli 3.15.6 → 3.15.8

package/create/templates/vue/pages/catalog.vue

@@ -1,39 +0,0 @@
-<template>
-  <zmp-page name="catalog">
-    <zmp-navbar title="Catalog"></zmp-navbar>
-    <zmp-list>
-      <zmp-list-item
-        v-for="(product) in products"
-        :key="product.id"
-        :title="product.title"
-        :link="`/product/${product.id}/`"
-      ></zmp-list-item>
-    </zmp-list>
-    <zmp-block v-if="products.length === 3">
-      <zmp-button fill @click="addProduct">Add Product</zmp-button>
-    </zmp-block>
-  </zmp-page>
-</template>
-<script>
-  import { useStore } from 'zmp-vue';
-  import store from '../store'
-
-  export default {
-    setup() {
-      const products = useStore('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 {
-        products,
-        addProduct,
-      };
-    }
-  };
-</script>

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

@@ -1,34 +0,0 @@
-<template>
-  <zmp-page>
-    <zmp-navbar title="Dynamic Route" back-link="Back"></zmp-navbar>
-    <zmp-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>
-            <li v-for="(value, key) in zmproute.params" :key="key"><b>{{key}}:</b> {{value}}</li>
-          </ul>
-        </li>
-        <li><b>Query:</b>
-          <ul>
-            <li v-for="(value, key) in zmproute.query" :key="key"><b>{{key}}:</b> {{value}}</li>
-          </ul>
-        </li>
-        <li><b>Route:</b> {{zmproute.route.path}}</li>
-      </ul>
-    </zmp-block>
-    <zmp-block strong>
-      <zmp-link @click="zmprouter.back()">Go back via Router API</zmp-link>
-    </zmp-block>
-  </zmp-page>
-</template>
-<script>
-  export default {
-    props: {
-      zmproute: Object,
-      zmprouter: Object,
-    },
-  };
-</script>

package/create/templates/vue/pages/form.vue

@@ -1,162 +0,0 @@
-<template>
-  <zmp-page name="form">
-    <zmp-navbar title="Form" back-link="Back"></zmp-navbar>
-
-    <zmp-block-title>Form Example</zmp-block-title>
-    <zmp-list no-hairlines-md>
-      <zmp-list-input
-        label="Name"
-        type="text"
-        placeholder="Your name"
-      ></zmp-list-input>
-
-      <zmp-list-input
-        label="E-mail"
-        type="email"
-        placeholder="E-mail"
-      ></zmp-list-input>
-
-      <zmp-list-input
-        label="URL"
-        type="url"
-        placeholder="URL"
-      ></zmp-list-input>
-
-      <zmp-list-input
-        label="Password"
-        type="password"
-        placeholder="Password"
-      ></zmp-list-input>
-
-      <zmp-list-input
-        label="Phone"
-        type="tel"
-        placeholder="Phone"
-      ></zmp-list-input>
-
-      <zmp-list-input
-        label="Gender"
-        type="select"
-        >
-        <option>Male</option>
-        <option>Female</option>
-      </zmp-list-input>
-
-      <zmp-list-input
-        label="Birth date"
-        type="date"
-        placeholder="Birth day"
-        defaultValue="2014-04-30"
-      ></zmp-list-input>
-
-      <zmp-list-item
-        title="Toggle"
-      >
-        <template #after>
-          <zmp-toggle />
-        </template>
-      </zmp-list-item>
-
-      <zmp-list-input
-        label="Range"
-        :input="false"
-      >
-        <template #input>
-          <zmp-range :value="50" :min="0" :max="100" :step="1" />
-        </template>
-      </zmp-list-input>
-
-      <zmp-list-input
-        type="textarea"
-        label="Textarea"
-        placeholder="Bio"
-      ></zmp-list-input>
-      <zmp-list-input
-        type="textarea"
-        label="Resizable"
-        placeholder="Bio"
-        resizable
-      ></zmp-list-input>
-    </zmp-list>
-
-    <zmp-block-title>Buttons</zmp-block-title>
-    <zmp-block strong>
-      <zmp-row tag="p">
-        <zmp-button class="col">Button</zmp-button>
-        <zmp-button class="col" fill>Fill</zmp-button>
-      </zmp-row>
-      <zmp-row tag="p">
-        <zmp-button class="col" raised>Raised</zmp-button>
-        <zmp-button class="col" raised fill>Raised Fill</zmp-button>
-      </zmp-row>
-      <zmp-row tag="p">
-        <zmp-button class="col" round>Round</zmp-button>
-        <zmp-button class="col" round fill>Round Fill</zmp-button>
-      </zmp-row>
-      <zmp-row tag="p">
-        <zmp-button class="col" outline>Outline</zmp-button>
-        <zmp-button class="col" round outline>Outline Round</zmp-button>
-      </zmp-row>
-      <zmp-row tag="p">
-        <zmp-button class="col" small outline>Small</zmp-button>
-        <zmp-button class="col" small round outline>Small Round</zmp-button>
-      </zmp-row>
-      <zmp-row tag="p">
-        <zmp-button class="col" small fill>Small</zmp-button>
-        <zmp-button class="col" small round fill>Small Round</zmp-button>
-      </zmp-row>
-      <zmp-row tag="p">
-        <zmp-button class="col" large raised>Large</zmp-button>
-        <zmp-button class="col" large fill raised>Large Fill</zmp-button>
-      </zmp-row>
-      <zmp-row tag="p">
-        <zmp-button class="col" large fill raised color="red">Large Red</zmp-button>
-        <zmp-button class="col" large fill raised color="green">Large Green</zmp-button>
-      </zmp-row>
-    </zmp-block>
-
-    <zmp-block-title>Checkbox group</zmp-block-title>
-    <zmp-list>
-      <zmp-list-item
-        checkbox
-        name="my-checkbox"
-        value="Books"
-        title="Books"
-      ></zmp-list-item>
-      <zmp-list-item
-        checkbox
-        name="my-checkbox"
-        value="Movies"
-        title="Movies"
-      ></zmp-list-item>
-      <zmp-list-item
-        checkbox
-        name="my-checkbox"
-        value="Food"
-        title="Food"
-      ></zmp-list-item>
-    </zmp-list>
-
-    <zmp-block-title>Radio buttons group</zmp-block-title>
-    <zmp-list>
-      <zmp-list-item
-        radio
-        name="radio"
-        value="Books"
-        title="Books"
-      ></zmp-list-item>
-      <zmp-list-item
-        radio
-        name="radio"
-        value="Movies"
-        title="Movies"
-      ></zmp-list-item>
-      <zmp-list-item
-        radio
-        name="radio"
-        value="Food"
-        title="Food"
-      ></zmp-list-item>
-    </zmp-list>
-  </zmp-page>
-</template>

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

@@ -1,14 +0,0 @@
-<template>
-  <zmp-page>
-    <zmp-navbar title="Left Page 1" back-link="Back"></zmp-navbar>
-    <zmp-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>
-    </zmp-block>
-  </zmp-page>
-</template>
-
-

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

@@ -1,11 +0,0 @@
-<template>
-  <zmp-page>
-    <zmp-navbar title="Left Page 2" back-link="Back"></zmp-navbar>
-    <zmp-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>
-    </zmp-block>
-  </zmp-page>
-</template>

package/create/templates/vue/pages/product.vue

@@ -1,31 +0,0 @@
-<template>
-  <zmp-page name="product">
-    <zmp-navbar :title="product.title" back-link="Back"></zmp-navbar>
-    <zmp-block-title>About {{product.title}}</zmp-block-title>
-    <zmp-block strong>
-      {{product.description}}
-    </zmp-block>
-  </zmp-page>
-</template>
-<script>
-  import { useStore } from 'zmp-vue';
-
-  export default {
-    props: {
-      zmproute: Object,
-    },
-    setup(props) {
-      const products = useStore('products');
-      const productId = props.zmproute.params.id;
-      let currentProduct;
-      products.forEach(function (product) {
-        if (product.id === productId) {
-          currentProduct = product;
-        }
-      });
-      return {
-        product: currentProduct,
-      };
-    },
-  };
-</script>

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

@@ -1,25 +0,0 @@
-<template>
-  <zmp-page>
-    <zmp-navbar :title="`${user.firstName} ${user.lastName}`" back-link="Back"></zmp-navbar>
-    <zmp-block strong>
-      {{user.about}}
-    </zmp-block>
-    <zmp-list>
-      <zmp-list-item
-        v-for="(link, index) in user.links"
-        :key="index"
-        :link="link.url"
-        :title="link.title"
-        external
-        target="_blank"
-      ></zmp-list-item>
-    </zmp-list>
-  </zmp-page>
-</template>
-<script>
-  export default {
-    props: {
-      user: Object,
-    }
-  }
-</script>

package/create/templates/vue/pages/settings.vue

@@ -1,18 +0,0 @@
-<template>
-  <zmp-page bg-color="white">
-    <zmp-box m="4">
-      <zmp-title>Settings</zmp-title>
-      <zmp-list>
-        <zmp-list-item title="Show notifications">
-          <zmp-toggle />
-        </zmp-list-item>
-        <zmp-list-item title="Auto update">
-          <zmp-preloader />
-        </zmp-list-item>
-        <zmp-list-item title="Volume">
-          <zmp-range style="width: 50%" />
-        </zmp-list-item>
-      </zmp-list>
-    </zmp-box>
-  </zmp-page>
-</template>

package/create/templates/vue/vite.config.js

@@ -1,11 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue';
-
-// https://vitejs.dev/config/
-export default () => {
-  return defineConfig({
-    plugins: [vue()],
-    root: './src',
-    base: ''
-  })
-}

package/create/templates/zaui/_tsconfig.json

@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "noEmit": true,
-    "target": "es6", 
-    "module": "esnext", 
-    "noImplicitAny": false,
-    "preserveConstEnums": true,
-    "jsx": "react", 
-    "lib": ["dom", "es5", "es6", "es7", "es2017"],
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "skipLibCheck": true, 
-    "declaration": false,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": false,
-    "strict": true,
-    "strictFunctionTypes": false,
-    "pretty": true,
-    "removeComments": true,
-    "sourceMap": true,
-    "resolveJsonModule": true
-  },
-  "exclude": ["node_modules"],
-  "include": ["src"]
-}

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

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

package/create/templates/zaui/components/user-card.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Avatar, Box, Text } from 'zmp-ui';
-
-const UserCard = ({ user }) => {
-  return (
-    <Box flex>
-      <Avatar story='default' online src={user.avatar.startsWith('http') ? user.avatar : null}>{user.avatar}</Avatar>
-      <Box ml={4}>
-        <Text.Title>{user.name}</Text.Title>
-        <Text>{user.id}</Text>
-      </Box>
-    </Box>
-  )
-};
-
-export default UserCard;

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

@@ -1,90 +0,0 @@
-const path = require('path');
-const generateHomePage = require('./generate-home-page');
-const generateRoot = require('./generate-root');
-const generateRecoil = require('../generate-recoil');
-const generateUserCard = require('./generate-user-card');
-const copyPages = require('./pages');
-const { projectFramework } = require('../../../utils/constants');
-const fse = require('../../../utils/fs-extra');
-
-module.exports = (options) => {
-  const cwd = options.cwd || process.cwd();
-  const { template, stateManagement, framework } = options;
-  const toCopy = [];
-
-  // Copy Pages
-
-  const ext = framework === projectFramework.REACT_TYPESCRIPT ?'tsx': 'jsx'
-
-  let pages = [];
-  if (template !== 'blank')
-    pages.push(
-      ...[
-        { fileName: 'about', content: 'copyAbout' },
-        { fileName: 'user', content: 'copyUser' },
-        { fileName: 'form', content: 'copyForm' },
-      ]
-    );
-
-
-  pages.forEach(({ fileName, content }) => {
-    const dest = path.resolve(cwd, 'src', 'pages', `${fileName}.${ext}`);
-    toCopy.push({
-      content: copyPages[content](options),
-      to: dest,
-    });
-  });
-
-
-  toCopy.push({
-    content: generateHomePage(options),
-    to: path.resolve(cwd, 'src', 'pages', `index.${ext}`),
-  });
-
-  if(template !== 'blank') {
-    toCopy.push({
-      content: generateUserCard(options),
-      to: path.resolve(cwd, 'src','components', `user-card.${ext}`)
-    })
-  }
-
-
-  toCopy.push({
-    content: generateRoot(options),
-    to: path.resolve(cwd, 'src', 'components', `app.${ext}`),
-  });
-
-  if(framework === projectFramework.REACT_TYPESCRIPT){
-    if (stateManagement === 'recoil') {
-      toCopy.push({
-        content: generateRecoil(options),
-        to: path.resolve(cwd, 'src', 'state.ts'),
-      });
-    } 
-
-  
-  }else {
-    if (stateManagement === 'recoil') {
-      toCopy.push({
-        content: generateRecoil(options),
-        to: path.resolve(cwd, 'src', 'state.js'),
-      });
-    } 
-  
-  }
-  const isTs = framework === projectFramework.REACT_TYPESCRIPT
-
-  toCopy.push({
-    content: fse.readFileSync(path.resolve(__dirname, 'vite.config.js'),'utf8'),
-    to: path.resolve(cwd, `vite.config.${isTs ? 'ts':'js'}`),
-  });
-
-  if(framework === projectFramework.REACT_TYPESCRIPT){
-    toCopy.push({
-      from: path.resolve(__dirname, '_tsconfig.json'),
-      to: path.resolve(cwd, 'tsconfig.json')
-    })
-  }
-
-  return toCopy;
-};

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

@@ -1,117 +0,0 @@
-const { projectFramework } = require('../../../utils/constants');
-const indent = require('../../utils/indent');
-module.exports = (options) => {
-  const { name, template, framework, stateManagement } = options;
-  if(framework === projectFramework.REACT_TYPESCRIPT){
-    return indent(
-      0,
-      `
-      import React from 'react';
-      ${
-        template === 'blank'
-          ? `
-      import { Page } from 'zmp-ui';
-      `.trim()
-          : `
-      import {
-        List,
-        Page,
-        Icon,
-        useNavigate
-      } from 'zmp-ui';${stateManagement === 'recoil' ? `
-      import { useRecoilValue } from 'recoil';
-      import { userInfo } from "zmp-sdk";
-      import { userState } from '../state';` : ''}
-      ${template !=='blank' ?`
-      import UserCard from '../components/user-card';
-      `:''}
-      `.trim()
-      }
-  
-      const HomePage:React.FunctionComponent = () => {
-        ${template !== 'blank' ? (stateManagement === 'recoil' ? "const user = useRecoilValue<userInfo>(userState);" : "const user = useStore('user');") : ''}
-        ${template !=='blank' ?   `const navigate = useNavigate()`:''}
-        return (
-          ${template==='blank' ?`<Page className="page">
-            Hello Zalo Mini App
-          </Page> `.trim():
-          `
-          <Page  className="page">
-          <div className="section-container">
-            <UserCard user={user}/> 
-          </div>
-          <div className="section-container">
-          <List >
-            <List.Item suffix={<Icon icon="zi-arrow-right"/>}>
-              <div  onClick={()=>navigate('/about')}>About</div>
-            </List.Item>
-            <List.Item suffix={<Icon icon="zi-arrow-right"/>}>
-              <div onClick={()=>navigate('/user')}>User</div>
-            </List.Item>
-          </List>
-          </div>
-        </Page>`.trim()
-        }
-        );
-      }
-      
-      export default HomePage;
-    `
-    ).trim(); 
-  }
-  return indent(
-    0,
-    `
-    import React from 'react';
-    ${
-      template === 'blank'
-        ? `
-    import {
-      Page
-    } from 'zmp-ui';
-    `.trim()
-        : `
-    import {
-      List,
-      Page,
-      Icon,useNavigate
-    } from 'zmp-ui';${stateManagement === 'recoil' ? `
-    import { useRecoilValue } from 'recoil';
-    import { userState } from '../state';` : ''}
-    ${template !=='blank' ?`
-    import UserCard from '../components/user-card';
-    `:''}
-    `.trim()
-    }
-
-    const HomePage = () => {
-      ${template !== 'blank' ? (stateManagement === 'recoil' ? "const user = useRecoilValue(userState);" : "const user = useStore('user');") : ''}
-      ${template !=='blank' ?   `const navigate = useNavigate()`:''}
-      return (
-        ${template==='blank' ?`<Page className="page">
-          Hello Zalo Mini App
-        </Page> `.trim():
-        `
-        <Page className="page">
-        <div className="section-container">
-          <UserCard user={user}/> 
-        </div>
-        <div className="section-container">
-        <List >
-          <List.Item suffix={<Icon icon="zi-arrow-right"/>}>
-            <div  onClick={()=>navigate('/about')}>About</div>
-          </List.Item>
-          <List.Item suffix={<Icon icon="zi-arrow-right"/>}>
-            <div onClick={()=>navigate('/user')}>User</div>
-          </List.Item>
-        </List>
-        </div>
-      </Page>`.trim()
-      }
-      );
-    }
-    
-    export default HomePage;
-  `
-  ).trim();
-};

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

@@ -1,53 +0,0 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-const { capitalize } = require('../../utils/string')
-module.exports = (options) => {
-  const { template, theming, stateManagement } = options;
-
-  // Views
-
-  const routes = []
-  if(template ==='single-view'){
-    routes.push('about','form','user')
-  }
-  return indent(
-    0,
-    `
-    import React from 'react';
-    import { Route} from 'react-router-dom'
-    ${['blank', 'single-view'].indexOf(template) >= 0
-    ? `
-    import { App, ZMPRouter, AnimationRoutes, SnackbarProvider } from 'zmp-ui';
-    `.trim(): ''
-    } 
-    ${templateIf(stateManagement === 'recoil', () => `import { RecoilRoot } from 'recoil';`,'')}
-    import HomePage from '../pages';
-    ${routes.length>0 ? routes.map((route) => `    import ${capitalize(route)} from '../pages/${route}';\n`).join('').trim():''}
-
-
-    const MyApp = () => {
-      ${`
-      return (${stateManagement === 'recoil' ? `
-        <RecoilRoot>` : ''}
-        ${indent(stateManagement === 'recoil' ? 2 : 0, `<App ${theming.darkTheme ? 'themeDark' : ''}>`)}
-          <SnackbarProvider>
-            <ZMPRouter>
-              <AnimationRoutes>
-                <Route path="/" element={<HomePage></HomePage>}></Route>
-                ${routes.length>0 ? routes.map((route) =>{
-                  const pageName = capitalize(route)
-                  return `              <Route path="/${route}" element={<${pageName}></${pageName}>}></Route>\n`
-                }).join('').trim(): ''
-              }
-              </AnimationRoutes>
-            </ZMPRouter>
-          </SnackbarProvider>
-        ${indent(stateManagement === 'recoil' ? 2 : 0, `</App>`)}${stateManagement === 'recoil' ? `
-        </RecoilRoot>` : ''}
-      );
-      `.trim()}
-    }
-    export default MyApp;
-  `
-  ).trim();
-};