devextreme-cli 1.3.0-beta.0 → 1.3.1

package/src/templates/{vue → vue-v2}/application/src/App.vue

@@ -11,7 +11,7 @@
           <router-view name="content" />
         </div>
         <template #footer>
-          <the-footer />
+          <app-footer />
         </template>
       </router-view>
     </div>
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import TheFooter from "./components/the-footer";
+import AppFooter from "./components/app-footer";
 import { sizes, subscribe, unsubscribe } from "./utils/media-query";
 
 function getScreenSizeInfo() {
@@ -60,7 +60,7 @@ export default {
   },
 
   components: {
-    TheFooter
+    AppFooter
   }
 };
 </script>

package/src/templates/{vue → vue-v2}/application/src/components/header-toolbar.vue

@@ -77,7 +77,8 @@ export default {
       userMenuItems: [
         {
           text: "Profile",
-          icon: "user"
+          icon: "user",
+          onClick: this.onProfileClick
         },
         {
           text: "Logout",
@@ -94,6 +95,12 @@ export default {
         path: "/login-form",
         query: { redirect: this.$route.path }
       });
+    },
+    onProfileClick() {
+      this.$router.push({
+        path: "/profile",
+        query: { redirect: this.$route.path }
+      });
     }
   },
   components: {

package/src/templates/{vue → vue-v2}/application/src/dx-styles.scss

@@ -8,6 +8,10 @@
   }
 }
 
+.side-nav-outer-toolbar .dx-drawer {
+  height: calc(100% - 56px)
+}
+
 .content-block {
   margin-left: 40px;
   margin-right: 40px;

package/src/templates/{vue → vue-v2}/application/src/router.js

@@ -3,9 +3,9 @@ import Router from "vue-router";
 
 import auth from "./auth";
 
-<%=^empty%>import Home from "./views/home";
-import Profile from "./views/profile";
-import Tasks from "./views/tasks";
+<%=^empty%>import Home from "./views/home-page";
+import Profile from "./views/profile-page";
+import Tasks from "./views/tasks-page";
 <%=/empty%>import defaultLayout from "./layouts/<%=layout%>";
 import simpleLayout from "./layouts/single-card";
 

package/src/templates/{vue → vue-v2}/application/src/views/change-password-form.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit="onSubmit">
+  <form @submit.prevent="onSubmit">
     <dx-form :form-data="formData" :disabled="loading">
       <dx-item
         data-field="password"
@@ -80,8 +80,7 @@ components: {
   },
   /* eslint-disable  no-debugger */
   methods: {
-    onSubmit: async function(e) {
-    e.preventDefault();
+    onSubmit: async function() {
     const { password } = this.formData;
     this.loading = true;
 

package/src/templates/{vue → vue-v2}/application/src/views/create-account-form.vue

@@ -1,5 +1,5 @@
 <template>
-  <form class="create-account-form" @submit="onSubmit">
+  <form class="create-account-form" @submit.prevent="onSubmit">
     <dx-form :form-data="formData" :disabled="loading">
       <dx-item
         data-field="email"
@@ -99,8 +99,7 @@ export default {
     }
   },
   methods: {
-    onSubmit: async function(e) {
-      e.preventDefault();
+    onSubmit: async function() {
       const { email, password } = this.formData;
       this.loading = true;
 

package/src/templates/{vue → vue-v2}/application/src/views/login-form.vue

@@ -1,5 +1,5 @@
 <template>
-  <form class="login-form" @submit="onSubmit">
+  <form class="login-form" @submit.prevent="onSubmit">
     <dx-form :form-data="formData" :disabled="loading">
       <dx-item
         data-field="email"
@@ -85,8 +85,7 @@ export default {
     onCreateAccountClick() {
       this.$router.push("/create-account");
     },
-    onSubmit: async function(e) {
-      e.preventDefault();
+    onSubmit: async function() {
       const { email, password } = this.formData;
       this.loading = true;
 

package/src/templates/{vue → vue-v2}/application/src/views/reset-password-form.vue

@@ -1,5 +1,5 @@
 <template>
-  <form class="reset-password-form" @submit="onSubmit">
+  <form class="reset-password-form" @submit.prevent="onSubmit">
     <dx-form :form-data="formData" :disabled="loading">
       <dx-item
         data-field="email"
@@ -73,8 +73,7 @@ export default {
     }
   },
   methods: {
-    onSubmit: async function(e) {
-      e.preventDefault();
+    onSubmit: async function() {
       const { email } = this.formData;
       this.loading = true;
 

package/src/templates/{vue/sample-pages/home.vue → vue-v2/sample-pages/home-page.vue}

@@ -97,7 +97,7 @@
           and includes the following DevExtreme components:</p>
         <ul>
           <li>
-            <a href="https://js.devexpress.com/Documentation/Guide/Widgets/DataGrid/Overview/" target="_blank" rel="noopener noreferrer">DataGrid</a>
+            <a href="https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/" target="_blank" rel="noopener noreferrer">DataGrid</a>
           </li>
           <li>
             <a href="https://js.devexpress.com/Documentation/Guide/Widgets/Form/Overview/" target="_blank" rel="noopener noreferrer">Form</a>
@@ -113,16 +113,16 @@
 
         <ul>
           <li>
-            <a href="https://js.devexpress.com/Documentation/Guide/Vue_Components/Create_a_DevExtreme_Application/#Layouts" target="_blank" rel="noopener noreferrer">Layouts</a>
+            <a href="https://js.devexpress.com/Documentation/Guide/Vue_Components/Application_Template/#Layouts" target="_blank" rel="noopener noreferrer">Layouts</a>
           </li>
           <li>
-            <a href="https://js.devexpress.com/Documentation/Guide/Vue_Components/Create_a_DevExtreme_Application/#Add_a_New_View" target="_blank" rel="noopener noreferrer">Add a New View</a>
+            <a href="https://js.devexpress.com/Documentation/Guide/Vue_Components/Application_Template/#Add_a_New_View" target="_blank" rel="noopener noreferrer">Add a New View</a>
           </li>
           <li>
-            <a href="https://js.devexpress.com/Documentation/Guide/Vue_Components/Create_a_DevExtreme_Application/#Configure_the_Navigation_Menu" target="_blank" rel="noopener noreferrer">Configure the Navigation Menu</a>
+            <a href="https://js.devexpress.com/Documentation/Guide/Vue_Components/Application_Template/#Configure_the_Navigation_Menu" target="_blank" rel="noopener noreferrer">Configure the Navigation Menu</a>
           </li>
           <li>
-            <a href="https://js.devexpress.com/Documentation/Guide/Vue_Components/Create_a_DevExtreme_Application/#Configure_Themes" target="_blank" rel="noopener noreferrer">Configure Themes</a>
+            <a href="https://js.devexpress.com/Documentation/Guide/Vue_Components/Application_Template/#Configure_Themes" target="_blank" rel="noopener noreferrer">Configure Themes</a>
           </li>
         </ul>
          <p>

package/src/templates/{vue/sample-pages/profile.vue → vue-v2/sample-pages/profile-page.vue}

@@ -38,7 +38,7 @@ export default {
         Prefix: "Mrs.",
         Position: "Controller",
         Picture: picture,
-        BirthDate: new Date("1974/11/15"),
+        BirthDate: new Date("1974/11/5"),
         HireDate: new Date("2005/05/11"),
         Notes:
 

package/src/templates/{vue/sample-pages/tasks.vue → vue-v2/sample-pages/tasks-page.vue}

@@ -66,6 +66,7 @@
       <dx-column
         data-field="Task_Priority"
         caption="Priority"
+        name="Priority"
         :hiding-priority="1"
       />
 

package/src/templates/{vue → vue-v3}/application/devextreme.json

@@ -1,5 +1,8 @@
 {
   "applicationEngine": "vue",
+  "vue": {
+    "version": 3
+  },
   "build": {
       "commands": [
           {

package/src/templates/vue-v3/application/src/App.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="root">
+    <div :class="cssClasses">
+      <component
+        :is="$route.meta.layout"
+        :title="title"
+        :is-x-small="screen.getScreenSizeInfo.isXSmall"
+        :is-large="screen.getScreenSizeInfo.isLarge"
+      >
+      <div class="content">
+        <router-view></router-view>
+      </div>
+        <template #footer>
+          <app-footer />
+        </template>
+      </component>
+    </div>
+  </div>
+</template>
+
+<script>
+import AppFooter from "./components/app-footer";
+import { sizes, subscribe, unsubscribe } from "./utils/media-query";
+import {
+  getCurrentInstance,
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+  computed
+} from "vue";
+
+function getScreenSizeInfo() {
+  const screenSizes = sizes();
+
+  return {
+    isXSmall: screenSizes["screen-x-small"],
+    isLarge: screenSizes["screen-large"],
+    cssClasses: Object.keys(screenSizes).filter(cl => screenSizes[cl])
+  };
+}
+
+export default {
+  components: {
+    AppFooter
+  },
+  setup() {
+    const vm = getCurrentInstance();
+
+    const title = vm.proxy.$appInfo.title;
+    const screen = reactive({ getScreenSizeInfo: {} });
+    screen.getScreenSizeInfo = getScreenSizeInfo();
+    
+    function screenSizeChanged () {
+      screen.getScreenSizeInfo = getScreenSizeInfo();
+    }
+
+    onMounted(() => {
+      subscribe(screenSizeChanged);
+    });
+
+    onBeforeUnmount(() => {
+      unsubscribe(screenSizeChanged);
+    });
+
+    const cssClasses = computed(() => {
+      return ["app"].concat(screen.getScreenSizeInfo.cssClasses);
+    });
+
+    return {
+      title,
+      screen,
+      cssClasses
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+html,
+body {
+  margin: 0px;
+  min-height: 100%;
+  height: 100%;
+}
+
+#root {
+  height: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.app {
+  @import "./themes/generated/variables.base.scss";
+  background-color: darken($base-bg, 5);
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+</style>

package/src/templates/vue-v3/application/src/app-info.js

@@ -0,0 +1,3 @@
+export default {
+  title: "<%=project%>"
+};

package/src/templates/vue-v3/application/src/app-navigation.js

@@ -0,0 +1,21 @@
+export default [<%=^empty%>
+  {
+    text: "Home",
+    path: "/home",
+    icon: "home"
+  },
+  {
+    text: "Examples",
+    icon: "folder",
+    items: [
+      {
+        text: "Profile",
+        path: "/profile"
+      },
+      {
+        text: "Tasks",
+        path: "/tasks"
+      }
+    ]
+  }
+  <%=/empty%>];

package/src/templates/vue-v3/application/src/auth.js

@@ -0,0 +1,101 @@
+const defaultUser = {
+  email: 'sandra@example.com',
+  avatarUrl: 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'
+};
+
+export default {
+  _user: defaultUser,
+  loggedIn() {
+    return !!this._user;
+  },
+
+  async logIn(email, password) {
+    try {
+      // Send request
+      console.log(email, password);
+      this._user = { ...defaultUser, email };
+
+      return {
+        isOk: true,
+        data: this._user
+      };
+    }
+    catch {
+      return {
+        isOk: false,
+        message: "Authentication failed"
+      };
+    }
+  },
+
+  async logOut() {
+    this._user = null;
+  },
+
+  async getUser() {
+    try {
+      // Send request
+
+      return {
+        isOk: true,
+        data: this._user
+      };
+    }
+    catch {
+      return {
+        isOk: false
+      };
+    }
+  },
+
+  async resetPassword(email) {
+    try {
+      // Send request
+      console.log(email);
+
+      return {
+        isOk: true
+      };
+    }
+    catch {
+      return {
+        isOk: false,
+        message: "Failed to reset password"
+      };
+    }
+  },
+
+  async changePassword(email, recoveryCode) {
+    try {
+      // Send request
+      console.log(email, recoveryCode);
+
+      return {
+        isOk: true
+      };
+    }
+    catch {
+      return {
+        isOk: false,
+        message: "Failed to change password"
+      }
+    }
+  },
+
+  async createAccount(email, password) {
+    try {
+      // Send request
+      console.log(email, password);
+
+      return {
+        isOk: true
+      };
+    }
+    catch {
+      return {
+        isOk: false,
+        message: "Failed to create account"
+      };
+    }
+  }
+};

package/src/templates/vue-v3/application/src/components/app-footer.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="content-block">
+    <footer class="footer">
+      Copyright © 2011-{{new Date().getFullYear()}} {{this.$appInfo.title}} Inc.
+      <br />All trademarks or registered trademarks are property of their
+      respective owners.
+    </footer>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../themes/generated/variables.base.scss";
+
+.footer {
+  display: block;
+  color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding-top: 20px;
+  padding-bottom: 24px;
+}
+</style>

package/src/templates/vue-v3/application/src/components/header-toolbar.vue

@@ -0,0 +1,161 @@
+<template>
+  <header class="header-component">
+    <dx-toolbar class="header-toolbar">
+      <dx-item
+        :visible="menuToggleEnabled"
+        location="before"
+        css-class="menu-button"
+      >
+        <template #default>
+          <dx-button
+            icon="menu"
+            styling-mode="text"
+            @click="toggleMenuFunc"
+          />
+        </template>
+      </dx-item>
+
+      <dx-item
+        v-if="title"
+        location="before"
+        css-class="header-title dx-toolbar-label"
+      >
+        <div>{{ title }}</div>
+      </dx-item>
+
+      <dx-item
+        location="after"
+        locate-in-menu="auto"
+        menu-item-template="menuUserItem"
+      >
+      <template #default>
+          <div>
+            <dx-button
+              class="user-button authorization"
+              :width="210"
+              height="100%"
+              styling-mode="text"
+            >
+              <user-panel :email="email" :menu-items="userMenuItems" menu-mode="context" />
+            </dx-button>
+          </div>
+        </template>
+      </dx-item>
+      
+      <template #menuUserItem>
+        <user-panel
+          :email="email"
+          :menu-items="userMenuItems"
+          menu-mode="list"
+        />
+      </template>
+    </dx-toolbar>
+  </header>
+</template>
+
+<script>
+import DxButton from "devextreme-vue/button";
+import DxToolbar, { DxItem } from "devextreme-vue/toolbar";
+import auth from "../auth";
+import { useRouter, useRoute } from 'vue-router';
+import { ref } from 'vue';
+
+import UserPanel from "./user-panel";
+
+export default {
+  props: {
+    menuToggleEnabled: Boolean,
+    title: String,
+    toggleMenuFunc: Function,
+    logOutFunc: Function
+  },
+  setup() {
+    const router = useRouter();
+    const route = useRoute();
+
+    const email = ref("");
+    auth.getUser().then((e) => email.value = e.data.email);
+    
+    const userMenuItems = [{
+        text: "Profile",
+        icon: "user",
+        onClick: onProfileClick
+      },
+      {
+        text: "Logout",
+        icon: "runner",
+        onClick: onLogoutClick
+    }];
+      
+    function onLogoutClick() {
+      auth.logOut();
+      router.push({
+        path: "/login-form",
+        query: { redirect: route.path }
+      });
+    }
+
+    function onProfileClick() {
+      router.push({
+        path: "/profile",
+        query: { redirect: route.path }
+      });
+    }
+
+    return {
+      email,
+      userMenuItems
+    };
+  },
+  components: {
+    DxButton,
+    DxToolbar,
+    DxItem,
+    UserPanel
+  }
+};
+</script>
+
+<style lang="scss">
+@import "../themes/generated/variables.base.scss";
+@import "../dx-styles.scss";
+
+.header-component {
+  flex: 0 0 auto;
+  z-index: 1;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+
+  .dx-toolbar .dx-toolbar-item.menu-button > .dx-toolbar-item-content .dx-icon {
+    color: $base-accent;
+  }
+}
+
+.dx-toolbar.header-toolbar .dx-toolbar-items-container .dx-toolbar-after {
+  padding: 0 40px;
+
+  .screen-x-small & {
+    padding: 0 20px;
+  }
+}
+
+.dx-toolbar .dx-toolbar-item.dx-toolbar-button.menu-button {
+  width: $side-panel-min-width;
+  text-align: center;
+  padding: 0;
+}
+
+.header-title .dx-item-content {
+  padding: 0;
+  margin: 0;
+}
+
+.dx-theme-generic {
+  .dx-toolbar {
+    padding: 10px 0;
+  }
+
+  .user-button > .dx-button-content {
+    padding: 3px;
+  }
+}
+</style>