devextreme-cli 1.7.1 → 1.8.0-beta.0

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="dx-swatch-additional side-navigation-menu"
+    :class="[swatchClassName, 'side-navigation-menu']"
     @click="forwardClick"
   >
     <slot />
@@ -25,6 +25,7 @@ import { sizes } from '../utils/media-query';
 import navigation from '../app-navigation';
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { themeService } from '../theme-service';
 
 export default {
   props: {
@@ -43,6 +44,7 @@ export default {
     });
 
     const treeViewRef = ref(null);
+    const swatchClassName = ref('');
 
     function forwardClick (...args) {
       context.emit("click", args);
@@ -82,6 +84,14 @@ export default {
       }
     );
 
+    watch(
+      () => themeService.isDark,
+      () => {
+        swatchClassName.value = themeService.isDark.value ? 'dx-swatch-additional-dark' : 'dx-swatch-additional';
+      },
+      { immediate: true }
+    );
+
     watch(
       () => props.compactMode,
       () => {
@@ -98,7 +108,8 @@ export default {
       items,
       forwardClick,
       handleItemClick,
-      updateSelection
+      updateSelection,
+      swatchClassName,
     };
   },
   components: {
@@ -108,97 +119,76 @@ export default {
 </script>
 
 <style lang="scss">
+@import "../variables.scss";
 @import "../dx-styles.scss";
-@import "../themes/generated/variables.additional.scss";
-
-.side-navigation-menu {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  height: 100%;
-  width: 250px !important;
 
-  .menu-container {
-    min-height: 100%;
+.dx-swatch-additional, .dx-swatch-additional-dark {
+  &.side-navigation-menu {
     display: flex;
-    flex: 1;
-
-    .dx-treeview {
-      // ## Long text positioning
-      white-space: nowrap;
-      // ##
+    flex-direction: column;
+    min-height: 100%;
+    height: 100%;
+    width: 250px !important;
+    background-color: var(--base-bg);
+
+    .menu-container {
+      min-height: 100%;
+      display: flex;
+      flex: 1;
+
+      .dx-treeview {
+        // ## Long text positioning
+        white-space: nowrap;
+        // ##
+
+        .dx-treeview-node-container:empty {
+          display: none;
+        }
 
-      // ## Icon width customization
-      .dx-treeview-item {
-        padding-left: 0;
-        flex-direction: row-reverse;
+        // ## Icon width customization
+        .dx-treeview-item {
+          padding-left: 0;
+          border-radius: 0;
+          flex-direction: row-reverse;
 
-        .dx-icon {
-          width: $side-panel-min-width !important;
-          margin: 0 !important;
+          .dx-icon {
+            width: $side-panel-min-width !important;
+            margin: 0 !important;
+          }
         }
-      }
-      // ##
-
-      // ## Arrow customization
-      .dx-treeview-node {
-        padding: 0 0 !important;
-      }
 
-      .dx-treeview-toggle-item-visibility {
-        right: 10px;
-        left: auto;
-      }
+        // ##
 
-      .dx-rtl .dx-treeview-toggle-item-visibility {
-        left: 10px;
-        right: auto;
-      }
-      // ##
+        // ## Arrow customization
+        .dx-treeview-node {
+          padding: 0 0 !important;
+        }
 
-      // ## Item levels customization
-      .dx-treeview-node {
-        &[aria-level="1"] {
-          font-weight: bold;
-          border-bottom: 1px solid $base-border-color;
+        .dx-treeview-toggle-item-visibility {
+          right: 10px;
+          left: auto;
         }
 
-        &[aria-level="2"] .dx-treeview-item-content {
-          font-weight: normal;
-          padding: 0 $side-panel-min-width;
+        .dx-rtl .dx-treeview-toggle-item-visibility {
+          left: 10px;
+          right: auto;
         }
-      }
-      // ##
-    }
+        // ##
 
-    // ## Selected & Focuced items customization
-    .dx-treeview {
-      .dx-treeview-node-container {
+        // ## Item levels customization
         .dx-treeview-node {
-          &.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
-            background: transparent;
-          }
-
-          &.dx-state-selected > .dx-treeview-item * {
-            color: $base-accent;
+          &[aria-level="1"] {
+            font-weight: bold;
           }
 
-          &:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
-            background-color: lighten($base-bg, 4);
+          &[aria-level="2"] .dx-treeview-item-content {
+            font-weight: normal;
+            padding: 0 $side-panel-min-width;
           }
         }
+        // ##
       }
     }
-
-    .dx-theme-generic .dx-treeview {
-      .dx-treeview-node-container
-        .dx-treeview-node.dx-state-selected.dx-state-focused
-        > .dx-treeview-item
-        * {
-        color: inherit;
-      }
-    }
-    // ##
   }
 }
 </style>

package/src/templates/vue-v3/application/src/components/theme-switcher.vue

@@ -0,0 +1,19 @@
+<template>
+  <dx-button
+    class="theme-button"
+    styling-mode="text"
+    :icon="currentTheme === 'dark' ? 'sun' : 'moon'"
+    @click="onClickButton"
+  />
+</template>
+
+<script setup>
+import { DxButton } from 'devextreme-vue/button';
+import { themeService } from '../theme-service';
+
+const currentTheme = themeService.currentTheme;
+
+function onClickButton() {
+  themeService.switchAppTheme();
+}
+</script>

package/src/templates/vue-v3/application/src/components/user-panel.vue

@@ -1,114 +1,94 @@
 <template>
   <div class="user-panel">
-    <div class="user-info">
-      <div class="image-container">
-        <div class="user-image" />
-      </div>
-      <div class="user-name">{{email}}</div>
-    </div>
-
-    <dx-context-menu
-      v-if="menuMode === 'context'"
-      target=".user-button"
+    <dx-drop-down-button
+      v-if="menuMode !== 'list'"
+      stylingMode="text"
+      :icon="'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'"
+      :showArrowIcon="false"
       :items="menuItems"
-      :width="210"
-      show-event="dxclick"
-      css-class="user-menu"
-    >
-      <dx-position my="top center" at="bottom center" />
-    </dx-context-menu>
-
+      displayExpr="text"
+      keyExpr="id"
+      :elementAttr="{
+      class: 'user-button'
+    }"
+      :dropDownOptions="{
+      width: '150px'
+    }"
+    />
     <dx-list
       v-if="menuMode === 'list'"
-      class="dx-toolbar-menu-action"
       :items="menuItems"
+      displayExpr="text"
+      keyExpr="id"
+      width="130"
     />
   </div>
 </template>
 
 <script>
-import DxContextMenu, { DxPosition } from "devextreme-vue/context-menu";
-import DxList from "devextreme-vue/list";
+import { DxDropDownButton, DxList } from 'devextreme-vue';
 
 export default {
   props: {
-    menuMode: String,
     menuItems: Array,
-    email: String
+    menuMode: String,
   },
   components: {
-    DxContextMenu,
-    DxPosition,
-    DxList
+    DxDropDownButton,
+    DxList,
   }
 };
 </script>
-
 <style lang="scss">
-@import "../themes/generated/variables.base.scss";
+.app .header-toolbar .user-panel .user-button.dx-dropdownbutton img.dx-icon {
+  height: 100%;
+  width: auto;
 
-.user-info {
-  display: flex;
-  align-items: center;
-
-  .dx-toolbar-menu-section & {
-    padding: 10px 6px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  .dx-theme-generic & {
+    max-height: 32px;
   }
+}
 
-  .image-container {
-    overflow: hidden;
-    border-radius: 50%;
-    height: 30px;
-    width: 30px;
-    margin: 0 4px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+.user-panel  {
+  display: flex;
+  flex-direction: column;
+
+  .user-button.dx-dropdownbutton {
+    margin-left: 5px;
 
-    .user-image {
-      width: 100%;
-      height: 100%;
-      background: url("https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png")
-        no-repeat #fff;
-      background-size: cover;
+    img.dx-icon {
+      border-radius: 50%;
+      margin: 0;
+      width: auto;
+      aspect-ratio: 1 / 1;
+      box-sizing: border-box;
+      border: 1px solid var(--dx-color-border);
+      object-fit: cover;
+      object-position: top;
+      background: rgb(255, 255, 255);
+      background-clip: padding-box;
     }
-  }
 
-  .user-name {
-    font-size: 14px;
-    color: $base-text-color;
-    margin: 0 9px;
-  }
-}
 
-.user-panel {
-  .dx-list-item .dx-icon {
-    vertical-align: middle;
-    color: $base-text-color;
-    margin-right: 16px;
-  }
-  .dx-rtl .dx-list-item .dx-icon {
-    margin-right: 0;
-    margin-left: 16px;
-  }
-}
 
-.dx-context-menu.user-menu.dx-menu-base {
-  &.dx-rtl {
-    .dx-submenu .dx-menu-items-container .dx-icon {
-      margin-left: 16px;
+    .dx-buttongroup {
+      vertical-align: middle;
+
+      .dx-button.dx-button-has-icon:not(.dx-button-has-text) {
+        .dx-button-content {
+          padding: 0;
+        }
+
+        &.dx-state-hover,
+        &.dx-state-focused {
+          background-color: transparent;
+
+          img.dx-icon {
+            border-color: var(--dx-color-primary);
+          }
+        }
+      }
     }
   }
-  .dx-submenu .dx-menu-items-container .dx-icon {
-    margin-right: 16px;
-  }
-  .dx-menu-item .dx-menu-item-content {
-    padding: 3px 15px 4px;
-  }
-}
-
-.dx-theme-generic .user-menu .dx-menu-item-content .dx-menu-item-text {
-  padding-left: 4px;
-  padding-right: 4px;
 }
 </style>

package/src/templates/vue-v3/application/src/dx-styles.scss

@@ -1,69 +1,84 @@
-.content {
-  line-height: 1.5;
-  flex-grow: 1;
+$side-panel-min-width: 60px;
 
-  h2 {
-    font-size: 30px;
-    margin-top: 20px;
-    margin-bottom: 20px;
+.dx-viewport {
+  .dx-popup-wrapper {
+    z-index: 1510 !important;
   }
-}
 
-.container {
-  height: 100%;
-  flex-direction: column;
-  display: flex;
-}
+  .content {
+    line-height: 1.5;
+    flex-grow: 1;
+    padding: 20px 40px;
 
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
+    h2 {
+      font-size: 32px;
+      margin: 0;
+      line-height: 40px;
+    }
 
-.side-nav-outer-toolbar .dx-drawer {
-  height: calc(100% - 56px)
-}
+    .screen-x-small & {
+      padding: 20px;
+    }
+  }
 
-.content-block {
-  margin-left: 40px;
-  margin-right: 40px;
-  margin-top: 20px;
+  .container {
+    height: 100%;
+    flex-direction: column;
+    display: flex;
+  }
 
-  .screen-x-small & {
-    margin-left: 20px;
-    margin-right: 20px;
+  .layout-body {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .side-nav-outer-toolbar .dx-drawer {
+    height: calc(100% - 56px)
   }
-}
 
-.responsive-paddings {
-  padding: 20px;
+  .content-block {
+    margin-top: 20px;
+  }
 
-  .screen-large & {
-    padding: 40px;
+  .responsive-paddings {
+    padding: 20px;
+
+    .screen-large & {
+      padding: 40px;
+    }
   }
-}
 
-.dx-card.wide-card {
-  border-radius: 0;
-  margin-left: 0;
-  margin-right: 0;
-  border-right: 0;
-  border-left: 0;
-}
+  .dx-card.wide-card {
+    border-radius: 0;
+    margin-left: 0;
+    margin-right: 0;
+    border-right: 0;
+    border-left: 0;
+  }
 
-.with-footer > .dx-scrollable-wrapper >
-.dx-scrollable-container > .dx-scrollable-content {
-  height: 100%;
+  .with-footer > .dx-scrollable-wrapper >
+  .dx-scrollable-container > .dx-scrollable-content {
+    height: 100%;
 
-  & > .dx-scrollview-content {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
+    & > .dx-scrollview-content {
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
+  }
+
+  #app {
+    background-color: var(--base-bg-darken-5);
+    height: 100%;
   }
 }
 
-#app {
-  height: 100%;
- }
+.dx-theme-fluent {
+  .dx-drawer-wrapper {
+    .dx-drawer-panel-content,
+    .dx-overlay-content {
+      box-shadow: 0 4px 4px 0 var(--shadow-color-first), 0 1px 2px 0 var(--shadow-color-second);
+    }
+  }
+}
 
-$side-panel-min-width: 60px;

package/src/templates/vue-v3/application/src/layouts/side-nav-inner-toolbar.vue

@@ -18,7 +18,9 @@
           :toggle-menu-func="toggleMenu"
         />
         <dx-scroll-view ref="scrollViewRef" class="layout-body with-footer">
-          <slot />
+          <div class="content">
+            <slot />
+          </div>
           <slot name="footer" />
         </dx-scroll-view>
       </div>
@@ -157,13 +159,8 @@ export default {
 }
 
 #navigation-header {
-  @import "../themes/generated/variables.additional.scss";
-  background-color: $base-accent;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-
-  .menu-button .dx-icon {
-    color: $base-text-color;
-  }
+  background-color: var(--base-bg);
 
   .screen-x-small & {
     padding-left: 20px;

package/src/templates/vue-v3/application/src/layouts/side-nav-outer-toolbar.vue

@@ -19,7 +19,9 @@
       :close-on-outside-click="drawerOptions.closeOnOutsideClick"
     >
       <dx-scroll-view ref="scrollViewRef" class="with-footer">
-        <slot />
+        <div class="content">
+          <slot />
+        </div>
         <slot name="footer" />
       </dx-scroll-view>
       <template #menuTemplate>
@@ -130,6 +132,6 @@ export default {
 }
 
 .layout-header {
-  z-index: 1501;
+  z-index: 1505;
 }
 </style>

package/src/templates/vue-v3/application/src/layouts/single-card.vue

@@ -41,8 +41,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../themes/generated/variables.base.scss";
-
 .single-card {
   width: 100%;
   height: 100%;
@@ -67,14 +65,14 @@ export default {
       margin-bottom: 30px;
 
       .title {
-        color: $base-text-color;
+        color: var(--base-text-color);
         line-height: 28px;
         font-weight: 500;
         font-size: 24px;
       }
 
       .description {
-        color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+        color: var(--base-text-color-alpha-7);
         line-height: 18px;
       }
     }

package/src/templates/vue-v3/application/src/theme-service.js

@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+
+class ThemeService {
+  themes = ['light', 'dark']
+  themeClassNamePrefix = 'dx-swatch-';
+  currentTheme = ref('');
+  isDark = ref(false);
+
+  constructor() {
+    if (!document.body.className.includes(this.themeClassNamePrefix)) {
+      this.currentTheme.value = this.themes[0];
+
+      document.body.classList.add(this.themeClassNamePrefix + this.currentTheme.value);
+    }
+  }
+
+  switchAppTheme() {
+    const prevTheme = this.currentTheme.value;
+    const isCurrentThemeDark = prevTheme === 'dark';
+
+    this.currentTheme.value =  this.themes[prevTheme === this.themes[0] ? 1 : 0];
+
+    document.body.classList.replace(
+      this.themeClassNamePrefix + prevTheme,
+      this.themeClassNamePrefix + this.currentTheme.value
+    );
+
+    const additionalClassNamePrefix = this.themeClassNamePrefix + 'additional';
+    const additionalClassNamePostfix = isCurrentThemeDark ? '-' + prevTheme : '';
+    const additionalClassName = `${additionalClassNamePrefix}${additionalClassNamePostfix}`
+
+    document.body
+      .querySelector(`.${additionalClassName}`)?.classList
+      .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark'));
+
+    this.isDark.value = this.currentTheme.value === 'dark';
+  }
+}
+
+export const themeService = new ThemeService();

package/src/templates/vue-v3/application/src/themes/metadata.additional.dark.json

@@ -0,0 +1,11 @@
+{
+  "items": [],
+  "baseTheme": "fluent.blue.dark",
+  "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
+  "outputColorScheme": "additional-dark",
+  "makeSwatch": true,
+  "base": true,
+  "widgets": [
+    "treeview"
+  ]
+}

package/src/templates/vue-v3/application/src/themes/metadata.additional.json

@@ -1,6 +1,6 @@
 {
   "items": [],
-  "baseTheme": "material.orange.dark",
+  "baseTheme": "fluent.blue.light",
   "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "additional",
   "makeSwatch": true,

package/src/templates/vue-v3/application/src/themes/metadata.base.dark.json

@@ -0,0 +1,8 @@
+{
+  "items": [],
+  "baseTheme": "fluent.blue.dark",
+  "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
+  "outputColorScheme": "dark",
+  "base": true,
+  "makeSwatch": true
+}

package/src/templates/vue-v3/application/src/themes/metadata.base.json

@@ -1,6 +1,6 @@
 {
   "items": [],
-  "baseTheme": "material.orange.light",
+  "baseTheme": "fluent.blue.light",
   "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "base",
   "base": true