devextreme-cli 1.3.0-beta.1 → 1.3.0

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>

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

@@ -0,0 +1,83 @@
+<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";
+
+import { useRoute } from 'vue-router';
+import { watch, ref } from 'vue';
+
+export default {
+  components: {
+    DxScrollView
+  },
+  setup() {
+    const route = useRoute();
+
+    const title = ref(route.meta.title);
+    const description = ref("");
+
+    watch(() => route.path,
+     () => {
+        title.value = route.meta.title;
+        description.value = route.meta.description;
+     }
+    )
+    return {
+      title,
+      description
+    }
+  }
+};
+</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-v3/application/src/main.js

@@ -0,0 +1,10 @@
+import { createApp }  from "vue";
+import router from "./router";
+
+import App from "./App";
+import appInfo from "./app-info";
+
+const app = createApp(App);
+app.use(router);
+app.config.globalProperties.$appInfo = appInfo;
+app.mount('#app');

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

@@ -0,0 +1,130 @@
+import auth from "./auth";
+import { createRouter, createWebHashHistory } from "vue-router";
+
+<%=^empty%>import Home from "./views/home";
+import Profile from "./views/profile";
+import Tasks from "./views/tasks";
+<%=/empty%>import defaultLayout from "./layouts/<%=layout%>";
+import simpleLayout from "./layouts/single-card";
+
+function loadView(view) {
+  return () => import (/* webpackChunkName: "login" */ `./views/${view}.vue`)
+}
+
+const router = new createRouter({
+  routes: [<%=#empty%>
+    {
+      path: "/",
+      meta: {
+        layout: defaultLayout
+      }
+    },<%=/empty%><%=^empty%>
+    {
+      path: "/home",
+      name: "home",
+      meta: {
+        requiresAuth: true,
+        layout: defaultLayout
+      },
+      component: Home
+    },
+    {
+      path: "/profile",
+      name: "profile",
+      meta: {
+        requiresAuth: true,
+        layout: defaultLayout
+      },
+      component: Profile
+    },
+    {
+      path: "/tasks",
+      name: "tasks",
+      meta: { 
+        requiresAuth: true,
+        layout: defaultLayout
+      },
+      component: Tasks
+    },<%=/empty%>
+    {
+      path: "/login-form",
+      name: "login-form",
+      meta: {
+        requiresAuth: false,
+        layout: simpleLayout,
+        title: "Sign In"
+      },
+      component: loadView("login-form")
+    },
+    {
+      path: "/reset-password",
+      name: "reset-password",
+      meta: {
+        requiresAuth: false,
+        layout: simpleLayout,
+        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."
+      },
+      component: loadView("reset-password-form")
+    },
+    {
+      path: "/create-account",
+      name: "create-account",
+      meta: {
+        requiresAuth: false,
+        layout: simpleLayout,
+        title: "Sign Up"
+      },
+      component: loadView("create-account-form"),
+    },
+    {
+      path: "/change-password/:recoveryCode",
+      name: "change-password",
+      meta: {
+        requiresAuth: false,
+        layout: simpleLayout,
+        title: "Change Password"
+      },
+      component: loadView("change-password-form")
+    },<%=^empty%>
+    {
+      path: "/",
+      redirect: "/home"
+    },
+    {
+      path: "/recovery",
+      redirect: "/home"
+    },
+    {
+      path: "/:pathMatch(.*)*",
+      redirect: "/home"
+    }<%=/empty%><%=#empty%>
+    {
+      path: "/:pathMatch(.*)*",
+      redirect: "/"
+    }<%=/empty%>
+  ],
+  history: createWebHashHistory()
+});
+
+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-v3/application/src/themes/metadata.additional.json

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

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

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

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

@@ -0,0 +1,33 @@
+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-v3/application/src/views/change-password-form.vue

@@ -0,0 +1,115 @@
+<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 { useRouter, useRoute } from 'vue-router';
+import { ref, reactive } from "vue";
+
+import auth from "../auth";
+
+export default {
+components: {
+    DxForm,
+    DxItem,
+    DxLabel,
+    DxButtonItem,
+    DxButtonOptions,
+    DxRequiredRule,
+    DxCustomRule,
+    DxLoadIndicator
+  },
+  setup() {
+    const router = useRouter();
+    const route = useRoute();
+
+    const recoveryCode = ref("");
+    const loading = ref(false);
+    const formData = reactive({
+      password:""
+    });
+
+    recoveryCode.value = route.params.recoveryCode;
+
+    async function onSubmit() {
+      const { password } = formData;
+      loading.value = true;
+  
+      const result = await auth.changePassword(password, recoveryCode.value);
+      loading.value = false;
+  
+      if (result.isOk) {
+        router.push("/login-form");
+      } else {
+        notify(result.message, 'error', 2000);
+      }
+    }
+
+    function confirmPassword (e) {
+      return e.value === formData.password;
+    }
+
+    return {
+      loading,
+      formData,
+      onSubmit,
+      confirmPassword
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,155 @@
+<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-form">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 { useRouter } from 'vue-router';
+import { ref, reactive } from 'vue';
+
+import auth from "../auth";
+
+export default {
+  components: {
+    DxForm,
+    DxItem,
+    DxLabel,
+    DxButtonItem,
+    DxButtonOptions,
+    DxRequiredRule,
+    DxCustomRule,
+    DxEmailRule,
+    DxLoadIndicator
+  },
+  setup() {
+    const router = useRouter();
+    
+    const loading = ref(false);
+    const formData = reactive({
+      email:"",
+      password:""
+    });
+
+    const onSubmit = async () => {
+    const { email, password } = formData;
+    loading.value = true;
+
+    const result = await auth.createAccount(email, password);
+    loading.value = false;
+
+    if (result.isOk) {
+      router.push("/login-form");
+    } else {
+      notify(result.message, 'error', 2000);
+    }
+  };
+
+    function confirmPassword(e) {
+      return e.value === formData.password;
+    }
+    
+    return {
+        formData,
+        loading,
+        onSubmit,
+        confirmPassword
+    }
+  }
+}
+</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>