devextreme-cli 1.3.0-beta.0 → 1.3.1

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

@@ -0,0 +1,204 @@
+<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/ui/tree-view";
+import { sizes } from '../utils/media-query';
+import navigation from '../app-navigation';
+import { onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router'; 
+
+export default {
+  props: {
+    compactMode: Boolean
+  },
+  setup(props, context) {
+    const route = useRoute();
+    const router = useRouter();
+
+    const isLargeScreen = sizes()['screen-large'];
+    const items = navigation.map((item) => {
+      if(item.path && !(/^\//.test(item.path))){ 
+        item.path = `/${item.path}`;
+      }
+      return {...item, expanded: isLargeScreen} 
+    });
+
+    const treeViewRef = ref(null);
+
+    function forwardClick (...args) {
+      context.emit("click", args);
+    }
+
+    function handleItemClick(e) {
+      if (!e.itemData.path || props.compactMode) {
+        return;
+      }
+      router.push(e.itemData.path);
+
+      const pointerEvent = e.event;
+      pointerEvent.stopPropagation();
+    }
+
+    function updateSelection () {
+      if (!treeViewRef.value || !treeViewRef.value.instance) {
+        return;
+      }
+
+      treeViewRef.value.instance.selectItem(route.path);
+      treeViewRef.value.instance.expandItem(route.path);
+    }
+
+    onMounted(() => { 
+      updateSelection();
+      if (props.compactMode) {
+        treeViewRef.value.instance.collapseAll();
+      }
+    });
+    
+
+    watch(
+      () => route.path,
+      () => {
+        updateSelection();
+      }
+    );
+    
+    watch(
+      () => props.compactMode,
+      () => {
+        if (props.compactMode) {
+          treeViewRef.value.instance.collapseAll();
+        } else {
+          updateSelection();
+        }
+      }
+    );
+
+    return {
+      treeViewRef,
+      items,
+      forwardClick,
+      handleItemClick,
+      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-v3/application/src/components/user-panel.vue

@@ -0,0 +1,114 @@
+<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"
+      :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,
+    email: String
+  },
+  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-v3/application/src/dx-styles.scss

@@ -0,0 +1,57 @@
+.content {
+  line-height: 1.5;
+
+  h2 {
+    font-size: 30px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+}
+
+.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%;
+  }
+}
+
+#app {
+  height: 100%;
+ }
+
+$side-panel-min-width: 60px;

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

@@ -0,0 +1,192 @@
+<template>
+  <div class="side-nav-inner-toolbar">
+    <dx-drawer
+      class="drawer"
+      position="before"
+      template="menuTemplate"
+      v-model:opened="menuOpened"
+      :opened-state-mode="drawerOptions.menuMode"
+      :reveal-mode="drawerOptions.menuRevealMode"
+      :min-size="drawerOptions.minMenuSize"
+      :max-size="drawerOptions.maxMenuSize"
+      :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 #menuTemplate>
+        <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>{{ title }}</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";
+import { ref, watch, computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default {
+  props: {
+    title: String,
+    isXSmall: Boolean,
+    isLarge: Boolean
+  },
+  setup(props) {
+    const route = useRoute();
+    
+    const scrollViewRef = ref(null);
+    const menuOpened = ref(props.isLarge);
+    const menuTemporaryOpened = ref(false);
+
+    function toggleMenu (e) {
+      const pointerEvent = e.event;
+      pointerEvent.stopPropagation();
+      if (menuOpened.value) {
+        menuTemporaryOpened.value = false;
+      }
+
+      menuOpened.value = !menuOpened.value;
+    }
+
+    function handleSideBarClick () {
+      if (menuOpened.value === false) {
+        menuTemporaryOpened.value = true;
+      }
+
+      menuOpened.value = true;
+    }
+
+    const drawerOptions = computed(() => {
+      const shaderEnabled = !props.isLarge;
+
+      return {
+        menuMode: props.isLarge ? "shrink" : "overlap",
+        menuRevealMode: props.isXSmall ? "slide" : "expand",
+        minMenuSize: props.isXSmall ? 0 : 60,
+        maxMenuSize: props.isXSmall ? 250 : undefined,
+        closeOnOutsideClick: shaderEnabled,
+        shaderEnabled
+      };
+    });
+
+    const headerMenuTogglerEnabled = computed(() => {
+      return props.isXSmall;
+    });
+
+    watch(
+      () => props.isLarge,
+      () => {
+        if (!menuTemporaryOpened.value) {
+          menuOpened.value = props.isLarge;
+        }
+      }
+    );
+    
+    watch(
+      () => route.path,
+      () => {
+        if (menuTemporaryOpened.value || !props.isLarge) {
+          menuOpened.value = false;
+          menuTemporaryOpened.value = false;
+        }
+        scrollViewRef.value.instance.scrollTo(0);
+      }
+    );
+
+    return {
+      scrollViewRef,
+      menuOpened,
+      drawerOptions,
+      menuItems,
+      headerMenuTogglerEnabled,
+      toggleMenu,
+      handleSideBarClick
+    };
+  },
+  components: {
+    DxButton,
+    DxDrawer,
+    DxScrollView,
+    DxToolbar,
+    DxItem,
+    HeaderToolbar,
+    SideNavMenu
+  }
+};
+</script>
+
+<style lang="scss">
+.side-nav-inner-toolbar {
+  width: 100%;
+}
+
+.container {
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+}
+
+.layout-body {
+  flex: 1;
+  min-height: 0;
+}
+
+.content {
+  flex-grow: 1;
+}
+
+#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-v3/application/src/layouts/side-nav-outer-toolbar.vue

@@ -0,0 +1,144 @@
+<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="menuTemplate"
+      v-model:opened="menuOpened"
+      :opened-state-mode="drawerOptions.menuMode"
+      :reveal-mode="drawerOptions.menuRevealMode"
+      :min-size="drawerOptions.minMenuSize"
+      :max-size="drawerOptions.maxMenuSize"
+      :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 #menuTemplate>
+        <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";
+import { computed, ref, watch} from 'vue';
+import { useRoute } from 'vue-router';
+
+export default {
+  props: {
+    title: String,
+    isXSmall: Boolean,
+    isLarge: Boolean
+  },
+  setup(props) {
+    const route = useRoute();
+
+    const scrollViewRef = ref(null);
+    const menuOpened = ref(props.isLarge);
+    const menuTemporaryOpened = ref(false);
+
+    function toggleMenu(e) {
+      const pointerEvent = e.event;
+      pointerEvent.stopPropagation();
+      if (menuOpened.value) {
+        menuTemporaryOpened.value = false;
+      }
+      menuOpened.value = !menuOpened.value;
+    }
+
+    function handleSideBarClick() {
+      if (menuOpened.value === false) {
+        menuTemporaryOpened.value = true;
+      }
+      menuOpened.value = true;
+    }
+
+    const drawerOptions = computed(() => {
+      const shaderEnabled = !props.isLarge;
+
+      return {
+        menuMode: props.isLarge ? "shrink" : "overlap",
+        menuRevealMode: props.isXSmall ? "slide" : "expand",
+        minMenuSize: props.isXSmall ? 0 : 60,
+        maxMenuSize: props.isXSmall ? 250 : undefined,
+        closeOnOutsideClick: shaderEnabled,
+        shaderEnabled
+      };
+    });
+
+    watch(
+      () => props.isLarge,
+      () => {
+        if (!menuTemporaryOpened.value) {
+          menuOpened.value = props.isLarge;
+        }
+    });
+
+    watch(
+      () => route.path,
+      () => {
+        if (menuTemporaryOpened.value || !props.isLarge) {
+          menuOpened.value = false;
+          menuTemporaryOpened.value = false;
+        }
+      scrollViewRef.value.instance.scrollTo(0);
+      }
+    );
+
+    return {
+      menuOpened,
+      menuItems,
+      toggleMenu,
+      handleSideBarClick,
+      drawerOptions,
+      scrollViewRef
+    };
+  },
+  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;
+}
+
+.layout-body {
+  flex: 1;
+  min-height: 0;
+}
+
+.content {
+  flex-grow: 1;
+}
+</style>