devextreme-cli 1.6.4 → 1.6.6

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>

package/src/templates/vue-v2/application/src/main.js

@@ -1,16 +0,0 @@
-import Vue from "vue";
-import themes from "devextreme/ui/themes";
-
-import App from "./App";
-import router from "./router";
-import appInfo from "./app-info";
-
-Vue.config.productionTip = false;
-Vue.prototype.$appInfo = appInfo;
-
-themes.initialized(() => {
-  new Vue({
-    router,
-    render: h => h(App)
-  }).$mount("#app");
-});

package/src/templates/vue-v2/application/src/router.js

@@ -1,149 +0,0 @@
-import Vue from "vue";
-import Router from "vue-router";
-
-import auth from "./auth";
-
-<%=^empty%>import Home from "./views/home-page";
-import Profile from "./views/profile-page";
-import Tasks from "./views/tasks-page";
-<%=/empty%>import defaultLayout from "./layouts/<%=layout%>";
-import simpleLayout from "./layouts/single-card";
-
-Vue.use(Router);
-
-const router = new Router({
-  routes: [<%=#empty%>
-    {
-      path: "/",
-      components: {
-        layout: defaultLayout
-      }
-    },<%=/empty%><%=^empty%>
-    {
-      path: "/home",
-      name: "home",
-      meta: { requiresAuth: true },
-      components: {
-        layout: defaultLayout,
-        content: Home
-      }
-    },
-    {
-      path: "/profile",
-      name: "profile",
-      meta: { requiresAuth: true },
-      components: {
-        layout: defaultLayout,
-        content: Profile
-      }
-    },
-    {
-      path: "/tasks",
-      name: "tasks",
-      meta: { requiresAuth: true },
-      components: {
-        layout: defaultLayout,
-        content: Tasks
-      }
-    },<%=/empty%>
-    {
-      path: "/login-form",
-      name: "login-form",
-      meta: { requiresAuth: false },
-      components: {
-        layout: simpleLayout,
-        content: () =>
-          import(/* webpackChunkName: "login" */ "./views/login-form")
-      },
-      props: {
-        layout: {
-          title: "Sign In"
-        }
-      }
-    },
-    {
-      path: "/reset-password",
-      name: "reset-password",
-      meta: { requiresAuth: false },
-      components: {
-        layout: simpleLayout,
-        content: () =>
-          import(/* webpackChunkName: "login" */ "./views/reset-password-form")
-      },
-      props: {
-        layout: {
-          title: "Reset Password",
-          description: "Please enter the email address that you used to register, and we will send you a link to reset your password via Email."
-        }
-      }
-    },
-    {
-      path: "/create-account",
-      name: "create-account",
-      meta: { requiresAuth: false },
-      components: {
-        layout: simpleLayout,
-        content: () =>
-          import(/* webpackChunkName: "login" */ "./views/create-account-form")
-      },
-      props: {
-        layout: {
-          title: "Sign Up"
-        }
-      }
-    },
-    {
-      path: "/change-password/:recoveryCode",
-      name: "change-password",
-      meta: { requiresAuth: false },
-      components: {
-        layout: simpleLayout,
-        content: () =>
-          import(/* webpackChunkName: "login" */ "./views/change-password-form")
-      },
-      props: {
-        layout: {
-          title: "Change Password"
-        }
-      }
-    },<%=^empty%>
-    {
-      path: "/",
-      redirect: "/home"
-    },
-    {
-      path: "/recovery",
-      redirect: "/home"
-    },
-    {
-      path: "*",
-      redirect: "/home"
-    }<%=/empty%><%=#empty%>
-    {
-      path: "*",
-      redirect: "/"
-    }<%=/empty%>
-  ]
-});
-
-router.beforeEach((to, from, next) => {
-
-  if (to.name === "login-form" && auth.loggedIn()) {
-    next({ name: "home" });
-  }
-
-  if (to.matched.some(record => record.meta.requiresAuth)) {
-    if (!auth.loggedIn()) {
-      next({
-        name: "login-form",
-        query: { redirect: to.fullPath }
-      });
-    } else {
-      next();
-    }
-  } else {
-    next();
-  }
-});
-
-export default router;

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

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

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

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

package/src/templates/vue-v2/application/src/utils/media-query.js

@@ -1,33 +0,0 @@
-const Breakpoints = {
-  XSmall: "(max-width: 599.99px)",
-  Small: "(min-width: 600px) and (max-width: 959.99px)",
-  Medium: "(min-width: 960px) and (max-width: 1279.99px)",
-  Large: "(min-width: 1280px)"
-};
-
-let handlers = [];
-const xSmallMedia = window.matchMedia(Breakpoints.XSmall);
-const smallMedia = window.matchMedia(Breakpoints.Small);
-const mediumMedia = window.matchMedia(Breakpoints.Medium);
-const largeMedia = window.matchMedia(Breakpoints.Large);
-
-[xSmallMedia, smallMedia, mediumMedia, largeMedia].forEach(media => {
-  media.addListener(() => {
-    handlers.forEach(handler => handler());
-  });
-});
-
-export const sizes = () => {
-  return {
-    "screen-x-small": xSmallMedia.matches,
-    "screen-small": smallMedia.matches,
-    "screen-medium": mediumMedia.matches,
-    "screen-large": largeMedia.matches
-  };
-};
-
-export const subscribe = handler => handlers.push(handler);
-
-export const unsubscribe = handler => {
-  handlers = handlers.filter(item => item !== handler);
-};

package/src/templates/vue-v2/application/src/views/change-password-form.vue

@@ -1,105 +0,0 @@
-<template>
-  <form @submit.prevent="onSubmit">
-    <dx-form :form-data="formData" :disabled="loading">
-      <dx-item
-        data-field="password"
-        editor-type="dxTextBox"
-        :editor-options="{ stylingMode: 'filled', placeholder: 'Password', mode: 'password' }"
-      >
-        <dx-required-rule message="Password is required" />
-        <dx-label :visible="false" />
-      </dx-item>
-      <dx-item
-        data-field="confirmedPassword"
-        editor-type="dxTextBox"
-        :editor-options="{ stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' }"
-      >
-        <dx-required-rule message="Password is required" />
-        <dx-custom-rule
-          message="Passwords do not match"
-          :validation-callback="confirmPassword"
-        />
-        <dx-label :visible="false" />
-      </dx-item>
-      <dx-button-item>
-        <dx-button-options
-          width="100%"
-          type="default"
-          template="changePassword"
-          :use-submit-behavior="true"
-        >
-        </dx-button-options>
-      </dx-button-item>
-
-      <template #changePassword>
-        <div>
-          <span class="dx-button-text">
-              <dx-loadIndicator v-if="loading" width="24px" height="24px" :visible="true" />
-              <span v-if="!loading">Continue</span>
-          </span>
-        </div>
-      </template>
-    </dx-form>
-  </form>
-</template>
-
-<script>
-import DxForm, {
-  DxItem,
-  DxLabel,
-  DxButtonItem,
-  DxButtonOptions,
-  DxCustomRule,
-  DxRequiredRule
-} from 'devextreme-vue/form';
-import DxLoadIndicator from 'devextreme-vue/load-indicator';
-import notify from 'devextreme/ui/notify';
-
-import auth from "../auth";
-
-export default {
-components: {
-    DxForm,
-    DxItem,
-    DxLabel,
-    DxButtonItem,
-    DxButtonOptions,
-    DxRequiredRule,
-    DxCustomRule,
-    DxLoadIndicator
-  },
-  created() {
-    this.recoveryCode = this.$route.params.recoveryCode;
-  },
-  data() {
-    return {
-        formData: {},
-        loading: false,
-        recoveryCode: ""
-    }
-  },
-  /* eslint-disable  no-debugger */
-  methods: {
-    onSubmit: async function() {
-    const { password } = this.formData;
-    this.loading = true;
-
-    const result = await auth.changePassword(password, this.recoveryCode);
-    this.loading = false;
-
-      if (result.isOk) {
-        this.$router.push("/login-form");
-      } else {
-        notify(result.message, 'error', 2000);
-      }
-    },
-    confirmPassword(e) {
-      return e.value === this.formData.password;
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>

package/src/templates/vue-v2/application/src/views/create-account-form.vue

@@ -1,143 +0,0 @@
-<template>
-  <form class="create-account-form" @submit.prevent="onSubmit">
-    <dx-form :form-data="formData" :disabled="loading">
-      <dx-item
-        data-field="email"
-        editor-type="dxTextBox"
-        :editor-options="{ stylingMode: 'filled', placeholder: 'Email', mode: 'email' }"
-      >
-        <dx-required-rule message="Email is required" />
-        <dx-email-rule message="Email is invalid" />
-        <dx-label :visible="false" />
-      </dx-item>
-      <dx-item
-        data-field="password"
-        editor-type="dxTextBox"
-        :editor-options="{ stylingMode: 'filled', placeholder: 'Password', mode: 'password' }"
-      >
-        <dx-required-rule message="Password is required" />
-        <dx-label :visible="false" />
-      </dx-item>
-      <dx-item
-        data-field="confirmedPassword"
-        editor-type="dxTextBox"
-        :editor-options="{ stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' }"
-      >
-        <dx-required-rule message="Password is required" />
-        <dx-custom-rule
-          message="Passwords do not match"
-          :validation-callback="confirmPassword"
-        />
-        <dx-label :visible="false" />
-      </dx-item>
-      <dx-item>
-        <template #default>
-          <div class='policy-info'>
-            By creating an account, you agree to the <router-link to="#">Terms of Service</router-link> and <router-link to="#">Privacy Policy</router-link>
-          </div>
-        </template>
-      </dx-item>
-      <dx-button-item>
-        <dx-button-options
-          width="100%"
-          type="default"
-          template="createAccount"
-          :use-submit-behavior="true"
-        >
-        </dx-button-options>
-      </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="login-link">
-            Have an account? <router-link to="/login">Sign In</router-link>
-          </div>
-        </template>
-      </dx-item>
-      <template #createAccount>
-        <div>
-          <span class="dx-button-text">
-              <dx-loadIndicator v-if="loading" width="24px" height="24px" :visible="true" />
-              <span v-if="!loading">Create a new account</span>
-          </span>
-        </div>
-      </template>
-    </dx-form>
-  </form>
-</template>
-
-<script>
-import DxForm, {
-  DxItem,
-  DxLabel,
-  DxButtonItem,
-  DxButtonOptions,
-  DxCustomRule,
-  DxRequiredRule,
-  DxEmailRule
-} from 'devextreme-vue/form';
-import DxLoadIndicator from 'devextreme-vue/load-indicator';
-import notify from 'devextreme/ui/notify';
-
-import auth from "../auth";
-
-export default {
-  components: {
-    DxForm,
-    DxItem,
-    DxLabel,
-    DxButtonItem,
-    DxButtonOptions,
-    DxRequiredRule,
-    DxCustomRule,
-    DxEmailRule,
-    DxLoadIndicator
-  },
-  data() {
-    return {
-        formData: {},
-        loading: false
-    }
-  },
-  methods: {
-    onSubmit: async function() {
-      const { email, password } = this.formData;
-      this.loading = true;
-
-      const result = await auth.createAccount(email, password);
-      this.loading = false;
-
-      if (result.isOk) {
-        this.$router.push("/login-form");
-      } else {
-        notify(result.message, 'error', 2000);
-      }
-    },
-    confirmPassword(e) {
-      return e.value === this.formData.password;
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "../themes/generated/variables.base.scss";
-
-.create-account-form {
-  .policy-info {
-    margin: 10px 0;
-    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
-    font-size: 14px;
-    font-style: normal;
-
-    a {
-      color: rgba($base-text-color, alpha($base-text-color) * 0.7);
-    }
-  }
-
-  .login-link {
-    color: $base-accent;
-    font-size: 16px;
-    text-align: center;
-  }
-}
-</style>