devextreme-cli 1.6.3 → 1.6.5

package/src/templates/react/application/src/types.tsx

@@ -1,56 +1,56 @@
-import { TreeViewTypes } from 'devextreme-react/tree-view';
-import { ButtonTypes } from 'devextreme-react/button';
-import React from 'react';
-
-export interface HeaderProps {
-    menuToggleEnabled: boolean;
-    title?: string;
-    toggleMenu: (e: ButtonTypes.ClickEvent) => void;
-}
-
-export interface SideNavigationMenuProps {
-    selectedItemChanged: (e: TreeViewTypes.ItemClickEvent) => void;
-    openMenu: (e: React.PointerEvent) => void;
-    compactMode: boolean;
-    onMenuReady: (e: TreeViewTypes.ContentReadyEvent) => void;
-}
-
-export interface UserPanelProps {
-    menuMode: 'context' | 'list';
-}
-
-export interface User {
-    email: string;
-    avatarUrl: string;
-}
-
-export type AuthContextType = {
-    user?: User;
-    signIn: (email: string, password: string) => Promise<{isOk: boolean, data?: User, message?: string}>;
-    signOut: () => void;
-    loading: boolean;
-}
-
-export interface SideNavToolbarProps {
-    title: string;
-}
-
-export interface SingleCardProps {
-    title?: string;
-    description?: string;
-}
-
-export type Handle = () => void;
-
-interface NavigationData {
-    currentPath: string;
-}
-
-export type NavigationContextType = {
-    setNavigationData?: ({ currentPath }: NavigationData) => void;
-    navigationData: NavigationData;
-}
-
-export type ValidationType = {
-    value: string;
+import { TreeViewTypes } from 'devextreme-react/tree-view';
+import { ButtonTypes } from 'devextreme-react/button';
+import React from 'react';
+
+export interface HeaderProps {
+    menuToggleEnabled: boolean;
+    title?: string;
+    toggleMenu: (e: ButtonTypes.ClickEvent) => void;
+}
+
+export interface SideNavigationMenuProps {
+    selectedItemChanged: (e: TreeViewTypes.ItemClickEvent) => void;
+    openMenu: (e: React.PointerEvent) => void;
+    compactMode: boolean;
+    onMenuReady: (e: TreeViewTypes.ContentReadyEvent) => void;
+}
+
+export interface UserPanelProps {
+    menuMode: 'context' | 'list';
+}
+
+export interface User {
+    email: string;
+    avatarUrl: string;
+}
+
+export type AuthContextType = {
+    user?: User;
+    signIn: (email: string, password: string) => Promise<{isOk: boolean, data?: User, message?: string}>;
+    signOut: () => void;
+    loading: boolean;
+}
+
+export interface SideNavToolbarProps {
+    title: string;
+}
+
+export interface SingleCardProps {
+    title?: string;
+    description?: string;
+}
+
+export type Handle = () => void;
+
+interface NavigationData {
+    currentPath: string;
+}
+
+export type NavigationContextType = {
+    setNavigationData?: ({ currentPath }: NavigationData) => void;
+    navigationData: NavigationData;
+}
+
+export type ValidationType = {
+    value: string;
 }

package/src/templates/react/sample-pages/tasks/tasks.tsx

@@ -84,6 +84,7 @@ export default function Task() {
 
 const dataSource = {
   store: {
+    version: 2,
     type: 'odata',
     key: 'Task_ID',
     url: 'https://js.devexpress.com/Demos/DevAV/odata/Tasks'

package/src/templates/vue-v3/application/src/components/side-nav-menu.vue

@@ -131,7 +131,7 @@ export default {
       // ## Icon width customization
       .dx-treeview-item {
         padding-left: 0;
-        padding-right: 0;
+        flex-direction: row-reverse;
 
         .dx-icon {
           width: $side-panel-min-width !important;

package/src/templates/vue-v3/sample-pages/tasks-page.vue

@@ -100,6 +100,7 @@ export default {
   setup() {
     const dataSourceConfig = {
       store: {
+        version: 2,
         type: "odata",
         key: "Task_ID",
         url: "https://js.devexpress.com/Demos/DevAV/odata/Tasks"

package/src/utility/latest-versions.js

@@ -1,8 +1,8 @@
 const packageJson = require('../../package.json');
 module.exports = {
-    'devextreme': '^23.1.6',
-    'devextreme-react': '^23.1.6',
-    'devextreme-vue': '^23.1.6',
+    'devextreme': '23.2.3',
+    'devextreme-react': '23.2.3',
+    'devextreme-vue': '23.2.3',
     'devextreme-cli': packageJson.version,
     'devextreme-schematics': 'latest'
 };

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

@@ -1,39 +0,0 @@
-{
-  "applicationEngine": "vue",
-  "vue": {
-      "version": 2,
-      "template": "javascript"
-  },
-  "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-v2/application/src/App.vue

@@ -1,91 +0,0 @@
-<template>
-  <div id="root">
-    <div :class="cssClasses">
-      <router-view
-        name="layout"
-        :title="title"
-        :is-x-small="screen.isXSmall"
-        :is-large="screen.isLarge"
-      >
-        <div class="content">
-          <router-view name="content" />
-        </div>
-        <template #footer>
-          <app-footer />
-        </template>
-      </router-view>
-    </div>
-  </div>
-</template>
-
-<script>
-import AppFooter from "./components/app-footer";
-import { sizes, subscribe, unsubscribe } from "./utils/media-query";
-
-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 {
-  name: "app",
-  data() {
-    return {
-      title: this.$appInfo.title,
-      screen: getScreenSizeInfo()
-    };
-  },
-  computed: {
-    cssClasses() {
-      return ["app"].concat(this.screen.cssClasses);
-    }
-  },
-  methods: {
-    screenSizeChanged() {
-      this.screen = getScreenSizeInfo();
-    }
-  },
-
-  mounted() {
-    subscribe(this.screenSizeChanged);
-  },
-
-  beforeDestroy() {
-    unsubscribe(this.screenSizeChanged);
-  },
-
-  components: {
-    AppFooter
-  }
-};
-</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-v2/application/src/app-info.js

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

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

@@ -1,21 +0,0 @@
-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-v2/application/src/auth.js

@@ -1,101 +0,0 @@
-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-v2/application/src/components/app-footer.vue

@@ -1,21 +0,0 @@
-<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-v2/application/src/components/header-toolbar.vue

@@ -1,157 +0,0 @@
-<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"
-      >
-        <template>
-          <div>{{ title }}</div>
-        </template>
-      </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 :user="user" :menu-items="userMenuItems" menu-mode="context" />
-            </dx-button>
-          </div>
-        </template>
-      </dx-item>
-      <template #menuUserItem>
-        <user-panel
-          :user="user"
-          :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 UserPanel from "./user-panel";
-
-export default {
-  props: {
-    menuToggleEnabled: Boolean,
-    title: String,
-    toggleMenuFunc: Function,
-    logOutFunc: Function
-  },
-  created() {
-    auth.getUser().then((e) => this.user = e.data);
-  },
-  data() {
-    return {
-      user: { },
-      userMenuItems: [
-        {
-          text: "Profile",
-          icon: "user",
-          onClick: this.onProfileClick
-        },
-        {
-          text: "Logout",
-          icon: "runner",
-          onClick: this.onLogoutClick
-        }
-      ]
-    };
-  },
-  methods: {
-    onLogoutClick() {
-      auth.logOut();
-      this.$router.push({
-        path: "/login-form",
-        query: { redirect: this.$route.path }
-      });
-    },
-    onProfileClick() {
-      this.$router.push({
-        path: "/profile",
-        query: { redirect: this.$route.path }
-      });
-    }
-  },
-  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>