devextreme-cli 1.3.0-beta.1 → 1.3.0

package/src/templates/vue-v2/application/devextreme.json

@@ -0,0 +1,38 @@
+{
+  "applicationEngine": "vue",
+  "vue": {
+      "version": 2
+  },
+  "build": {
+      "commands": [
+          {
+              "command": "build-theme",
+              "options": {
+                  "inputFile": "src/themes/metadata.base.json",
+                  "outputFile": "src/themes/generated/theme.base.css"
+              }
+          },
+          {
+              "command": "build-theme",
+              "options": {
+                  "inputFile": "src/themes/metadata.additional.json",
+                  "outputFile": "src/themes/generated/theme.additional.css"
+              }
+          },
+          {
+              "command": "export-theme-vars",
+              "options": {
+                  "inputFile": "src/themes/metadata.base.json",
+                  "outputFile": "src/themes/generated/variables.base.scss"
+              }
+          },
+          {
+              "command": "export-theme-vars",
+              "options": {
+                  "inputFile": "src/themes/metadata.additional.json",
+                  "outputFile": "src/themes/generated/variables.additional.scss"
+              }
+          }
+      ]
+  }
+}

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/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 → vue-v2}/sample-pages/home.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 → vue-v2}/sample-pages/profile.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 → vue-v2}/sample-pages/tasks.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>