zmp-cli 3.5.4 → 3.6.0

package/.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/index.js",
+            "args": [
+                "init"
+            ],
+            "console": "integratedTerminal"
+        }
+    ]
+}

package/.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "prettier.trailingComma": "none"
+  "prettier.trailingComma": "none",
+  "workbench.colorTheme": "GitHub Dark Default"
 }

package/create/templates/common/tailwind/tailwind.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   purge: {
     enabled: true,
-    content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    content: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
   },
   theme: {
     extend: {},

package/create/templates/generate-index.js

@@ -10,7 +10,7 @@ module.exports = (options) => {
   const scripts = `
   <!-- built script files will be auto injected -->
   ${
-    framework === 'react'
+    framework === 'react' || framework === 'vue'
       ? `<script type="module" src="${srcFolder}app.js"></script>`
       : ''
   }

package/create/templates/generate-routes.js

@@ -1,5 +1,5 @@
 // const generateCoreRoutes = require('./core/generate-routes');
-// const generateVueRoutes = require('./vue/generate-routes');
+const generateVueRoutes = require('./vue/generate-routes');
 const generateReactRoutes = require('./react/generate-routes');
 const generateReactTsRoutes = require('./react-typescript/generate-routes');
 // const generateSvelteRoutes = require('./svelte/generate-routes');
@@ -7,7 +7,7 @@ const generateReactTsRoutes = require('./react-typescript/generate-routes');
 module.exports = (options) => {
   const { framework } = options;
   // if (framework === 'core') return generateCoreRoutes(options);
-  // if (framework === 'vue') return generateVueRoutes(options);
+  if (framework === 'vue') return generateVueRoutes(options);
   if (framework === 'react') return generateReactRoutes(options);
   if (framework === 'react-typescript') return generateReactTsRoutes(options);
 

package/create/templates/generate-store.js

@@ -4,6 +4,39 @@ const templateIf = require('../utils/template-if');
 
 module.exports = (options) => {
   const { framework } = options;
+  if (framework === 'vue') {
+    return indent(0, `
+    import { createStore } from 'zmp-core/lite';
+    const store = createStore({
+      state: {
+        user: {
+          id: '',
+          name: '',
+          avatar: ''
+        },
+        darkMode: false,
+      },
+      getters: {
+        user({ state }) {
+          return state.user
+        },
+        darkMode({ state }) {
+          return state.darkMode
+        }
+      },
+      actions: {
+        setUser({ state }, data) {
+          state.user = { ...state.user, ...data }
+        },
+        setDarkMode({ state }, dark) {
+          state.darkMode = dark
+        }
+      },
+    })
+
+    export default store;
+  `);
+  }
   return indent(0, `
   import { createStore } from 'zmp-core${framework === 'core' ? '' : '/lite'}';
   const store = createStore({

package/create/templates/generate-styles.js

@@ -2,7 +2,7 @@ const indent = require('../utils/indent');
 const { colorThemeCSSProperties } = require('../utils/colors');
 
 module.exports = (options) => {
-  const { template, theming } = options;
+  const { template, theming, includeTailwind } = options;
   const { customColor, color, fillBars } = theming;
 
   let styles = '';
@@ -19,18 +19,18 @@ module.exports = (options) => {
       /* Custom color theme properties */
       :root {
         ${Object.keys(customProps)
-          .filter(
-            (prop) =>
-              prop !== '--zmp-tabbar-fill-link-active-color' &&
-              prop !== '--zmp-tabbar-fill-link-active-border-color'
-          )
-          .map((prop) => `${prop}: ${customProps[prop]};`)
-          .join('\n        ')}
+        .filter(
+          (prop) =>
+            prop !== '--zmp-tabbar-fill-link-active-color' &&
+            prop !== '--zmp-tabbar-fill-link-active-border-color'
+        )
+        .map((prop) => `${prop}: ${customProps[prop]};`)
+        .join('\n        ')}
       }
       :root.theme-dark,:root .theme-dark {
         ${Object.keys(customProps)
-          .map((prop) => `${prop}: ${customProps[prop]};`)
-          .join('\n        ')} 
+        .map((prop) => `${prop}: ${customProps[prop]};`)
+        .join('\n        ')} 
       }
     `
     );
@@ -44,6 +44,15 @@ module.exports = (options) => {
     );
   }
 
+  if (includeTailwind) {
+    styles += indent(
+      0,
+      `
+      @import "./tailwind.css";
+    `
+    );
+  }
+
   if (template === 'split-view') {
     styles += indent(
       0,

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

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,34 @@
+<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

@@ -5,15 +5,11 @@ const generateStore = require('../generate-store');
 
 module.exports = (options) => {
   const cwd = options.cwd || process.cwd();
-  const { template, bundler } = options;
+  const { bundler } = options;
   const toCopy = [];
 
   // Copy Pages
-  const pages = [
-    ...(template !== 'blank' ? ['404', 'about', 'dynamic-route', 'form'] : []),
-    ...(template === 'tabs' ? ['catalog', 'product', 'settings'] : []),
-    ...(template === 'split-view' ? ['left-page-1', 'left-page-2'] : []),
-  ];
+  const pages = ['settings'];
 
   pages.forEach((p) => {
     const src = path.resolve(__dirname, 'pages', `${p}.vue`);
@@ -25,7 +21,7 @@ module.exports = (options) => {
   });
   toCopy.push({
     content: generateHomePage(options),
-    to: path.resolve(cwd, 'src', 'pages', 'home.vue'),
+    to: path.resolve(cwd, 'src', 'pages', 'index.vue'),
   });
   toCopy.push({
     content: generateRoot(options),
@@ -35,6 +31,31 @@ module.exports = (options) => {
     content: generateStore(options),
     to: path.resolve(cwd, 'src', 'store.js'),
   });
+  toCopy.push({
+    from: path.resolve(__dirname, 'vite.config.js'),
+    to: path.resolve(cwd, 'vite.config.js'),
+  });
+  toCopy.push({
+    from: path.resolve(__dirname, 'global-components.d.ts'),
+    to: path.resolve(cwd, 'src', 'global-components.d.ts'),
+  });
+  toCopy.push({
+    from: path.resolve(__dirname, 'components', 'header.vue'),
+    to: path.resolve(cwd, 'src', 'components', 'header.vue'),
+  });
+  toCopy.push({
+    from: path.resolve(__dirname, 'components', 'sun-and-moon.vue'),
+    to: path.resolve(cwd, 'src', 'components', 'sun-and-moon.vue'),
+  });
+  toCopy.push({
+    from: path.resolve(__dirname, 'icons', 'sun.svg'),
+    to: path.resolve(cwd, 'src', 'static', 'icons', 'sun.svg'),
+  });
+  toCopy.push({
+    from: path.resolve(__dirname, 'icons', 'moon.svg'),
+    to: path.resolve(cwd, 'src', 'static', 'icons', 'moon.svg'),
+  });
+
 
   if (bundler) {
     toCopy.push({

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

@@ -33,7 +33,7 @@ module.exports = function (options) {
   });
   toCopy.push({
     content: generateHomePage(options),
-    to: path.resolve(cwd, 'src', 'pages', 'home.vue')
+    to: path.resolve(cwd, 'src', 'pages', 'index.vue')
   });
   toCopy.push({
     content: generateRoot(options),

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

@@ -1,110 +1,56 @@
 const indent = require('../../utils/indent');
 
 module.exports = (options) => {
-  const {
-    name,
-    template,
-  } = options;
-
-  let description = '';
-  if (template === 'single-view' || template === 'blank') {
-    description = `
-          <p>Here is your blank ZMP app. Let's see what we have here.</p>
-    `;
-  }
-  if (template === 'split-view') {
-    description = `
-          <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>
-    `;
-  }
-  if (template === 'tabs') {
-    description = `
-          <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>
-    `;
-  }
+  const { name, template } = options;
 
   return indent(0, `
-    <template>
-      <zmp-page name="home">
-        <!-- Top Navbar -->
-        ${template === 'blank' ? `
-        <zmp-navbar large>
-          <zmp-nav-title>${name}</zmp-nav-title>
-          <zmp-nav-title-large>${name}</zmp-nav-title-large>
-        </zmp-navbar>
-        `.trim() : `
-        <zmp-navbar large :sliding="false">
-          <zmp-nav-left>
-            <zmp-link icon-ios="zmp:menu" icon-aurora="zmp:menu" icon-md="material:menu" panel-open="left"></zmp-link>
-          </zmp-nav-left>
-          <zmp-nav-title sliding>${name}</zmp-nav-title>
-          <zmp-nav-right>
-            <zmp-link icon-ios="zmp:menu" icon-aurora="zmp:menu" icon-md="material:menu" panel-open="right"></zmp-link>
-          </zmp-nav-right>
-          <zmp-nav-title-large>${name}</zmp-nav-title-large>
-        </zmp-navbar>
-        `.trim()}
-        ${template !== 'tabs' ? `
-        <!-- Toolbar-->
-        <zmp-toolbar bottom>
-          <zmp-link>Left Link</zmp-link>
-          <zmp-link>Right Link</zmp-link>
-        </zmp-toolbar>
-
-        `.trim() : ''}
-        <!-- Page content-->
-        <zmp-block strong>
-          ${description.trim()}
-        </zmp-block>
-        ${template !== 'blank' ? `
-        <zmp-block-title>Navigation</zmp-block-title>
-        <zmp-list>
-          <zmp-list-item link="/about/" title="About"></zmp-list-item>
-          <zmp-list-item link="/form/" title="Form"></zmp-list-item>
-        </zmp-list>
-
-        <zmp-block-title>Modals</zmp-block-title>
-        <zmp-block strong>
-          <zmp-row>
-            <zmp-col width="50">
-              <zmp-button fill raised popup-open="#my-popup">Popup</zmp-button>
-            </zmp-col>
-            <zmp-col width="50">
-              <zmp-button fill raised login-screen-open="#my-login-screen">Login Screen</zmp-button>
-            </zmp-col>
-          </zmp-row>
-        </zmp-block>
-
-        <zmp-block-title>Panels</zmp-block-title>
-        <zmp-block strong>
-          <zmp-row>
-            <zmp-col width="50">
-              <zmp-button fill raised panel-open="left">Left Panel</zmp-button>
-            </zmp-col>
-            <zmp-col width="50">
-              <zmp-button fill raised panel-open="right">Right Panel</zmp-button>
-            </zmp-col>
-          </zmp-row>
-        </zmp-block>
-
-        <zmp-list>
-          <zmp-list-item
-            title="Dynamic (Component) Route"
-            link="/dynamic-route/blog/45/post/125/?foo=bar#about"
-          ></zmp-list-item>
-          <zmp-list-item
-            title="Default Route (404)"
-            link="/load-something-that-doesnt-exist/"
-          ></zmp-list-item>
-        </zmp-list>
-        `.trim() : ''}
-      </zmp-page>
-    </template>
+  <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();
 };