Merge pull request #3 from DevExpress-Examples/Vue-example

Vue example

README.md

@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/744047123/23.2.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1211517)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 <!-- default badges end -->

Vue/src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { RouterView } from "vue-router";
+import { RouterView } from 'vue-router';
 </script>
 
 <template>
-    <div class="main">
-        <RouterView />
-    </div>
+  <div class="main">
+    <RouterView/>
+  </div>
 </template>

Vue/src/components/HomeContent.vue

@@ -1,22 +1,56 @@
+<template>
+  <div class="main">
+    <DxDateBox
+      v-model="now"
+      type="date"
+      label="Date with the short year"
+      :display-format="format"
+    />
+    <DxDataGrid
+      id="grid"
+      :data-source="employeesData"
+      :width="400"
+      :key-expr="'ID'"
+      :show-borders="true"
+    >
+      <DxEditing
+        mode="cell"
+        :allow-updating="true"
+      />
+      <DxColumn data-field="FirstName"/>
+      <DxColumn data-field="LastName"/>
+      <DxColumn
+        data-field="BirthDate"
+        data-type="date"
+        :editor-options="editorOptions"
+      />
+    </DxDataGrid>
+  </div>
+</template>
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { ref } from 'vue';
+import 'devextreme/dist/css/dx.material.blue.light.compact.css';
+import DxDataGrid, { DxColumn, DxEditing } from 'devextreme-vue/data-grid';
+import DxDateBox from 'devextreme-vue/date-box';
+import { type Employee, employees } from '@/data';
+import { formatter, parser } from '@/utils';
 
-import "devextreme/dist/css/dx.material.blue.light.compact.css";
-import DxButton from "devextreme-vue/button";
+const now = new Date();
+const employeesData = ref<Employee[]>(employees);
+
+const format = {
+  parser: (val: string) => parser(val),
+  formatter: (val: Date) => formatter(val),
+};
+
+const editorOptions = {
+  displayFormat: format,
+};
 
-const props = defineProps({
-  text: String,
-});
-const count = ref(0);
-const buttonText = computed<String>(
-  () => `Click ${props.text}: ${count.value}`
-);
-function clickHandler() {
-  count.value += 1;
-}
 </script>
-<template>
-  <div>
-    <DxButton :text="buttonText" @click="clickHandler"></DxButton>
-  </div>
-</template>
+<style scoped>
+#grid {
+  margin-top: 50px;
+}
+
+</style>

Vue/src/data.ts

@@ -0,0 +1,38 @@
+export interface Employee {
+    ID: number;
+
+    FirstName: string;
+
+    LastName: string;
+
+    Prefix: string;
+
+    Position: string;
+
+    BirthDate: string;
+
+    HireDate: string;
+
+    Address: string;
+}
+
+export const employees: Employee[] = [{
+  ID: 1,
+  FirstName: 'John',
+  LastName: 'Heart',
+  Prefix: 'Mr.',
+  Position: 'CEO',
+  BirthDate: '1964/03/16',
+  HireDate: '1995/01/15',
+  Address: '351 S Hill St.',
+}, {
+  ID: 2,
+  FirstName: 'Olivia',
+  LastName: 'Peyton',
+  Prefix: 'Mrs.',
+  Position: 'Sales Assistant',
+  BirthDate: '1981/06/03',
+  HireDate: '2012/05/14',
+  Address: '807 W Paseo Del Mar',
+}];
+

Vue/src/main.ts

@@ -1,11 +1,11 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
 
-import "./assets/main.css";
+import './assets/main.css';
 
 const app = createApp(App);
 
 app.use(router);
 
-app.mount("#app");
+app.mount('#app');

Vue/src/router/index.ts

@@ -1,12 +1,12 @@
-import { createRouter, createWebHistory } from "vue-router";
-import HomeView from "../views/HomeView.vue";
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: "/",
-      name: "home",
+      path: '/',
+      name: 'home',
       component: HomeView,
     },
   ],

Vue/src/utils.ts

@@ -0,0 +1,11 @@
+export function parser(value: string) {
+  const parts = value.split('/');
+  if (parts.length !== 3) return Date.parse(value);
+  let year = Number(parts[2]);
+  if (year < 100) year += 2000;
+  return new Date(year, Number(parts[0]) - 1, Number(parts[1]));
+}
+
+export function formatter(value: number | Date) {
+  return typeof value !== 'number' ? value.toLocaleDateString() : '';
+}

Vue/src/views/HomeView.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import HomeContent from "../components/HomeContent.vue";
+import HomeContent from '../components/HomeContent.vue';
 </script>
 
 <template>
-  <HomeContent text="Count" />
+  <HomeContent/>
 </template>