devextreme-cli 1.6.4 → 1.6.5

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

@@ -1,190 +0,0 @@
-<template>
-  <div
-    class="dx-swatch-additional side-navigation-menu"
-    @click="forwardClick"
-  >
-    <slot />
-    <div class="menu-container">
-      <dx-tree-view
-        :ref="treeViewRef"
-        :items="items"
-        key-expr="path"
-        selection-mode="single"
-        :focus-state-enabled="false"
-        expand-event="click"
-        @item-click="handleItemClick"
-        width="100%"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import DxTreeView from 'devextreme-vue/tree-view';
-import { sizes } from '../utils/media-query';
-import navigation from '../app-navigation';
-
-const treeViewRef = "treeViewRef";
-const isLargeScreen = sizes()['screen-large'];
-const items = navigation.map((item) => {
-      if(item.path && !(/^\//.test(item.path))){
-        item.path = `/${item.path}`;
-      }
-      return {...item, expanded: isLargeScreen}
-    });
-
-export default {
-  props: {
-    compactMode: Boolean
-  },
-  data() {
-    return {
-      treeViewRef,
-      items
-    };
-  },
-  methods: {
-    forwardClick(...args) {
-      this.$emit("click", args);
-    },
-
-    handleItemClick(e) {
-      if (!e.itemData.path || this.compactMode) {
-        return;
-      }
-
-      this.$router.push(e.itemData.path);
-
-      const pointerEvent = e.event;
-      pointerEvent.stopPropagation();
-    },
-
-    updateSelection() {
-      if (!this.treeView) {
-        return;
-      }
-
-      this.treeView.selectItem(this.$route.path);
-      this.treeView.expandItem(this.$route.path);
-    }
-  },
-  mounted() {
-    this.treeView = this.$refs[treeViewRef] && this.$refs[treeViewRef].instance;
-    this.updateSelection();
-    if (this.compactMode) {
-      this.treeView.collapseAll();
-    }
-  },
-  watch: {
-    $route() {
-      this.updateSelection();
-    },
-    compactMode() {
-      if (this.compactMode) {
-        this.treeView.collapseAll();
-      } else {
-        this.updateSelection();
-      }
-    }
-  },
-  components: {
-    DxTreeView
-  }
-};
-</script>
-
-<style lang="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%;
-    display: flex;
-    flex: 1;
-
-    .dx-treeview {
-      // ## Long text positioning
-      white-space: nowrap;
-      // ##
-
-      // ## Icon width customization
-      .dx-treeview-item {
-        padding-left: 0;
-        padding-right: 0;
-
-        .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;
-      }
-      // ##
-
-      // ## Item levels customization
-      .dx-treeview-node {
-        &[aria-level="1"] {
-          font-weight: bold;
-          border-bottom: 1px solid $base-border-color;
-        }
-
-        &[aria-level="2"] .dx-treeview-item-content {
-          font-weight: normal;
-          padding: 0 $side-panel-min-width;
-        }
-      }
-      // ##
-    }
-
-    // ## Selected & Focuced items customization
-    .dx-treeview {
-      .dx-treeview-node-container {
-        .dx-treeview-node {
-          &.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
-            background: transparent;
-          }
-
-          &.dx-state-selected > .dx-treeview-item * {
-            color: $base-accent;
-          }
-
-          &:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
-            background-color: lighten($base-bg, 4);
-          }
-        }
-      }
-    }
-
-    .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-v2/application/src/components/user-panel.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="user-panel">
-    <div class="user-info">
-      <div class="image-container">
-        <div class="user-image" />
-      </div>
-      <div class="user-name">{{user.email}}</div>
-    </div>
-
-    <dx-context-menu
-      v-if="menuMode === 'context'"
-      target=".user-button"
-      :items="menuItems"
-      :width="210"
-      show-event="dxclick"
-      css-class="user-menu"
-    >
-      <dx-position my="top center" at="bottom center" />
-    </dx-context-menu>
-
-    <dx-list
-      v-if="menuMode === 'list'"
-      class="dx-toolbar-menu-action"
-      :items="menuItems"
-    />
-  </div>
-</template>
-
-<script>
-import DxContextMenu, { DxPosition } from "devextreme-vue/context-menu";
-import DxList from "devextreme-vue/list";
-
-export default {
-  props: {
-    menuMode: String,
-    menuItems: Array,
-    user: Object
-  },
-  components: {
-    DxContextMenu,
-    DxPosition,
-    DxList
-  }
-};
-</script>
-
-<style lang="scss">
-@import "../themes/generated/variables.base.scss";
-
-.user-info {
-  display: flex;
-  align-items: center;
-
-  .dx-toolbar-menu-section & {
-    padding: 10px 6px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  }
-
-  .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-image {
-      width: 100%;
-      height: 100%;
-      background: url("https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png")
-        no-repeat #fff;
-      background-size: cover;
-    }
-  }
-
-  .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-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-v2/application/src/dx-styles.scss

@@ -1,65 +0,0 @@
-.content {
-  line-height: 1.5;
-  flex-grow: 1;
-
-  h2 {
-    font-size: 30px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-  }
-}
-
-.container {
-  height: 100%;
-  flex-direction: column;
-  display: flex;
-}
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.side-nav-outer-toolbar .dx-drawer {
-  height: calc(100% - 56px)
-}
-
-.content-block {
-  margin-left: 40px;
-  margin-right: 40px;
-  margin-top: 20px;
-
-  .screen-x-small & {
-    margin-left: 20px;
-    margin-right: 20px;
-  }
-}
-
-.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;
-}
-
-.with-footer > .dx-scrollable-wrapper >
-.dx-scrollable-container > .dx-scrollable-content {
-  height: 100%;
-
-  & > .dx-scrollview-content {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
-}
-
-$side-panel-min-width: 60px;

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

@@ -1,158 +0,0 @@
-<template>
-  <div class="side-nav-inner-toolbar">
-    <dx-drawer
-      class="drawer"
-      position="before"
-      template="menu"
-      :opened.sync="menuOpened"
-      :opened-state-mode="drawerOptions.menuMode"
-      :reveal-mode="drawerOptions.menuRevealMode"
-      :min-size="drawerOptions.minMenuSize"
-      :shading="drawerOptions.shaderEnabled"
-      :close-on-outside-click="drawerOptions.closeOnOutsideClick"
-    >
-      <div class="container">
-        <header-toolbar
-          :menu-toggle-enabled="headerMenuTogglerEnabled"
-          :toggle-menu-func="toggleMenu"
-        />
-        <dx-scroll-view ref="scrollViewRef" class="layout-body with-footer">
-          <slot />
-          <slot name="footer" />
-        </dx-scroll-view>
-      </div>
-      <template #menu>
-        <side-nav-menu
-          :compact-mode="!menuOpened"
-          @click="handleSideBarClick"
-        >
-          <dx-toolbar id="navigation-header">
-            <dx-item v-if="!isXSmall" location="before" css-class="menu-button">
-              <template #default>
-                <dx-button
-                  icon="menu"
-                  styling-mode="text"
-                  @click="toggleMenu"
-                />
-              </template>
-            </dx-item>
-            <dx-item location="before" css-class="header-title dx-toolbar-label">
-              <template #default>
-                <div>
-                  <div>{{ title }}</div>
-                </div>
-              </template>
-            </dx-item>
-          </dx-toolbar>
-        </side-nav-menu>
-      </template>
-    </dx-drawer>
-  </div>
-</template>
-
-<script>
-import DxButton from "devextreme-vue/button";
-import DxDrawer from "devextreme-vue/drawer";
-import DxScrollView from "devextreme-vue/scroll-view";
-import DxToolbar, { DxItem } from "devextreme-vue/toolbar";
-
-import HeaderToolbar from "../components/header-toolbar";
-import SideNavMenu from "../components/side-nav-menu";
-import menuItems from "../app-navigation";
-
-export default {
-  props: {
-    title: String,
-    isXSmall: Boolean,
-    isLarge: Boolean
-  },
-  methods: {
-    toggleMenu(e) {
-      const pointerEvent = e.event;
-      pointerEvent.stopPropagation();
-      if (this.menuOpened) {
-        this.menuTemporaryOpened = false;
-      }
-      this.menuOpened = !this.menuOpened;
-    },
-    handleSideBarClick() {
-      if (this.menuOpened === false) this.menuTemporaryOpened = true;
-      this.menuOpened = true;
-    }
-  },
-  data() {
-    return {
-      menuOpened: this.isLarge,
-      menuTemporaryOpened: false,
-      menuItems
-    };
-  },
-  computed: {
-    drawerOptions() {
-      const shaderEnabled = !this.isLarge;
-      return {
-        menuMode: this.isLarge ? "shrink" : "overlap",
-        menuRevealMode: this.isXSmall ? "slide" : "expand",
-        minMenuSize: this.isXSmall ? 0 : 60,
-        menuOpened: this.isLarge,
-        closeOnOutsideClick: shaderEnabled,
-        shaderEnabled
-      };
-    },
-    headerMenuTogglerEnabled() {
-      return this.isXSmall;
-    },
-    scrollView() {
-      return this.$refs["scrollViewRef"].instance;
-    }
-  },
-  watch: {
-    isLarge() {
-      if (!this.menuTemporaryOpened) {
-        this.menuOpened = this.isLarge;
-      }
-    },
-    $route() {
-      if (this.menuTemporaryOpened || !this.isLarge) {
-        this.menuOpened = false;
-        this.menuTemporaryOpened = false;
-      }
-      this.scrollView.scrollTo(0);
-    }
-  },
-  components: {
-    DxButton,
-    DxDrawer,
-    DxScrollView,
-    DxToolbar,
-    DxItem,
-    HeaderToolbar,
-    SideNavMenu
-  }
-};
-</script>
-
-<style lang="scss">
-.side-nav-inner-toolbar {
-  width: 100%;
-}
-
-#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;
-  }
-
-  .screen-x-small & {
-    padding-left: 20px;
-  }
-
-  .dx-theme-generic & {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-}
-</style>

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

@@ -1,122 +0,0 @@
-<template>
-  <div class="side-nav-outer-toolbar">
-    <header-toolbar
-      class="layout-header"
-      :menu-toggle-enabled="true"
-      :toggle-menu-func="toggleMenu"
-      :title="title"
-    />
-    <dx-drawer
-      class="layout-body"
-      position="before"
-      template="menu"
-      :opened.sync="menuOpened"
-      :opened-state-mode="drawerOptions.menuMode"
-      :reveal-mode="drawerOptions.menuRevealMode"
-      :min-size="drawerOptions.minMenuSize"
-      :shading="drawerOptions.shaderEnabled"
-      :close-on-outside-click="drawerOptions.closeOnOutsideClick"
-    >
-      <dx-scroll-view ref="scrollViewRef" class="with-footer">
-        <slot />
-        <slot name="footer" />
-      </dx-scroll-view>
-      <template #menu>
-        <side-nav-menu
-          :compact-mode="!menuOpened"
-          @click="handleSideBarClick"
-        />
-      </template>
-    </dx-drawer>
-  </div>
-</template>
-
-<script>
-import DxDrawer from "devextreme-vue/drawer";
-import DxScrollView from "devextreme-vue/scroll-view";
-
-import menuItems from "../app-navigation";
-import HeaderToolbar from "../components/header-toolbar";
-import SideNavMenu from "../components/side-nav-menu";
-
-export default {
-  props: {
-    title: String,
-    isXSmall: Boolean,
-    isLarge: Boolean
-  },
-  methods: {
-    toggleMenu(e) {
-      const pointerEvent = e.event;
-      pointerEvent.stopPropagation();
-      if (this.menuOpened) {
-        this.menuTemporaryOpened = false;
-      }
-      this.menuOpened = !this.menuOpened;
-    },
-    handleSideBarClick() {
-      if (this.menuOpened === false) this.menuTemporaryOpened = true;
-      this.menuOpened = true;
-    }
-  },
-  data() {
-    return {
-      menuOpened: this.isLarge,
-      menuTemporaryOpened: false,
-      menuItems
-    };
-  },
-  computed: {
-    drawerOptions() {
-      const shaderEnabled = !this.isLarge;
-      return {
-        menuMode: this.isLarge ? "shrink" : "overlap",
-        menuRevealMode: this.isXSmall ? "slide" : "expand",
-        minMenuSize: this.isXSmall ? 0 : 60,
-        menuOpened: this.isLarge,
-        closeOnOutsideClick: shaderEnabled,
-        shaderEnabled
-      };
-    },
-    headerMenuTogglerEnabled() {
-      return this.isXSmall;
-    },
-    scrollView() {
-      return this.$refs["scrollViewRef"].instance;
-    }
-  },
-  watch: {
-    isLarge() {
-      if (!this.menuTemporaryOpened) {
-        this.menuOpened = this.isLarge;
-      }
-    },
-    $route() {
-      if (this.menuTemporaryOpened || !this.isLarge) {
-        this.menuOpened = false;
-        this.menuTemporaryOpened = false;
-      }
-      this.scrollView.scrollTo(0);
-    }
-  },
-  components: {
-    DxDrawer,
-    DxScrollView,
-    HeaderToolbar,
-    SideNavMenu
-  }
-};
-</script>
-
-<style lang="scss">
-.side-nav-outer-toolbar {
-  flex-direction: column;
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
-
-.layout-header {
-  z-index: 1501;
-}
-</style>

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

@@ -1,67 +0,0 @@
-<template>
-  <dx-scroll-view height="100%" width="100%" class="with-footer single-card">
-     <div class="dx-card content">
-      <div class="header">
-        <div class="title">{{title}}</div>
-        <div class="description">{{description}}</div>
-      </div>
-      <slot />
-    </div>
-  </dx-scroll-view>
-</template>
-
-<script>
-import DxScrollView from "devextreme-vue/scroll-view";
-
-export default {
-  components: {
-    DxScrollView
-  },
-  props: {
-    title: String,
-    description: String
-  }
-};
-</script>
-
-<style lang="scss">
-@import "../themes/generated/variables.base.scss";
-
-.single-card {
-  width: 100%;
-  height: 100%;
-
-  .dx-card {
-    width: 330px;
-    margin: auto auto;
-    padding: 40px;
-    flex-grow: 0;
-
-    .screen-x-small & {
-      width: 100%;
-      height: 100%;
-      border-radius: 0;
-      box-shadow: none;
-      margin: 0;
-      border: 0;
-      flex-grow: 1;
-    }
-
-    .header {
-      margin-bottom: 30px;
-
-      .title {
-        color: $base-text-color;
-        line-height: 28px;
-        font-weight: 500;
-        font-size: 24px;
-      }
-
-      .description {
-        color: rgba($base-text-color, alpha($base-text-color) * 0.7);
-        line-height: 18px;
-      }
-    }
-  }
-}
-</style>