Skip to content

Commit 0d2ff57

Browse files
charlescordialDevExpresscharlescordialDevExpress
committed
Fix: Vue implementation, lint, and build to v25.1.3
1 parent 0043755 commit 0d2ff57

File tree

11 files changed

+563
-1241
lines changed

11 files changed

+563
-1241
lines changed

‎Vue/package-lock.json‎

Lines changed: 369 additions & 1034 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Vue/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
"test:unit": "vitest --environment jsdom --root src/",
1010
"build-only": "vite build",
1111
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
12-
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
12+
"lint-ts": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
13+
"lint-css": "stylelint src/**/*.{css,scss} --allow-empty-input",
14+
"lint-html": "prettier --check src/*",
15+
"lint": "npm-run-all -p -c lint-ts lint-css lint-html"
1316
},
1417
"dependencies": {
1518
"devextreme": "25.1.3",

‎Vue/src/App.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang="ts">
2-
import { RouterView } from 'vue-router';
2+
import 'devextreme/dist/css/dx.common.css';
3+
import 'devextreme/dist/css/dx.light.css';
4+
// Router will mount views; HomeView renders HomeContent
35
</script>
46

57
<template>
6-
<div class="main">
7-
<RouterView/>
8-
</div>
8+
<router-view/>
99
</template>

‎Vue/src/assets/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
-webkit-font-smoothing: antialiased;
44
-moz-osx-font-smoothing: grayscale;
55
color: #2c3e50;
6-
margin: 50px 50px;
6+
margin: 50px;
77
width: 90vh;
88
}

‎Vue/src/components/HomeContent.vue‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,50 @@
11
<script setup lang="ts">
2-
import { computed, ref } from 'vue';
3-
42
import 'devextreme/dist/css/dx.material.blue.light.compact.css';
5-
import DxButton from 'devextreme-vue/button';
3+
import { DxDataGrid, DxColumn, DxEditing, DxLookup } from 'devextreme-vue/data-grid';
4+
import type { DxDataGridTypes } from 'devextreme-vue/data-grid';
5+
import type { ValueChangedEvent } from 'devextreme/ui/lookup';
6+
import type { Customer, Employee } from '../types';
7+
import { customers, employees } from '../data';
8+
9+
const onEditorPreparing = (e: DxDataGridTypes.EditorPreparingEvent<Employee, number>): void => {
10+
if (e.parentType === 'dataRow' && e.dataField === 'CustomerID') {
11+
e.editorOptions.onValueChanged = function(ev: ValueChangedEvent): void {
12+
const selectedItem = ev.component.option('selectedItem') as Customer;
13+
if (!selectedItem || !e.setValue) return;
14+
e.setValue(selectedItem);
15+
};
16+
}
17+
};
618
7-
const props = defineProps({
8-
text: {
9-
type: String,
10-
default: 'count',
11-
},
12-
});
13-
const count = ref(0);
14-
const buttonText = computed<string>(
15-
() => `Click ${props.text}: ${count.value}`
16-
);
17-
function clickHandler() {
18-
count.value += 1;
19-
}
19+
const setCellValue = (rowData: Employee, value: Customer): void => {
20+
if (!rowData || !value) return;
21+
rowData.CustomerID = value.CustomerID;
22+
rowData.Address = value.Address;
23+
rowData.Phone = value.Phone;
24+
};
2025
</script>
26+
2127
<template>
22-
<div>
23-
<DxButton
24-
:text="buttonText"
25-
@click="clickHandler"
28+
<DxDataGrid
29+
:data-source="employees"
30+
@editor-preparing="onEditorPreparing"
31+
>
32+
<DxEditing
33+
:allow-updating="true"
34+
:allow-adding="true"
2635
/>
27-
</div>
36+
<DxColumn
37+
caption="Name"
38+
data-field="CustomerID"
39+
:set-cell-value="setCellValue"
40+
>
41+
<DxLookup
42+
:data-source="customers"
43+
value-expr="CustomerID"
44+
display-expr="CustomerName"
45+
/>
46+
</DxColumn>
47+
<DxColumn data-field="Address"/>
48+
<DxColumn data-field="Phone"/>
49+
</DxDataGrid>
2850
</template>

‎Vue/src/data.ts‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import type { Customer, Employee } from './types';
2+
3+
export const employees: Employee[] = [
4+
{ ID: 1, CustomerID: 1, Address: 'Markušica', Phone: '+385 674 958 1641' },
5+
{ ID: 2, CustomerID: 2, Address: 'Itaberaí', Phone: '+55 491 329 4084' },
6+
{ ID: 3, CustomerID: 3, Address: 'Volgograd', Phone: '+7 745 619 7799' },
7+
{ ID: 4, CustomerID: 4, Address: 'Shuiyin', Phone: '+86 774 746 9874' },
8+
{ ID: 5, CustomerID: 5, Address: 'Baturaden', Phone: '+62 113 149 9397' },
9+
{ ID: 6, CustomerID: 6, Address: 'New York City', Phone: '+1 917 528 7751' },
10+
{
11+
ID: 7,
12+
CustomerID: 7,
13+
Address: 'Adolfo Lopez Mateos',
14+
Phone: '+52 626 244 6757',
15+
},
16+
{ ID: 8, CustomerID: 8, Address: 'Nong Khae', Phone: '+66 326 375 8694' },
17+
{ ID: 9, CustomerID: 9, Address: 'Znamenskoye', Phone: '+7 926 141 2517' },
18+
{
19+
ID: 10,
20+
CustomerID: 10,
21+
Address: 'Patpata Segundo',
22+
Phone: '+63 428 750 7737',
23+
},
24+
{ ID: 11, CustomerID: 11, Address: 'Fontanka', Phone: '+380 557 509 4191' },
25+
{ ID: 12, CustomerID: 12, Address: "Novosil'", Phone: '+7 493 632 2768' },
26+
{ ID: 13, CustomerID: 13, Address: 'Ubinskoye', Phone: '+7 954 353 8930' },
27+
{ ID: 14, CustomerID: 14, Address: 'Protvino', Phone: '+7 386 362 2407' },
28+
{
29+
ID: 15,
30+
CustomerID: 15,
31+
Address: 'Santa Fé do Sul',
32+
Phone: '+55 867 691 7097',
33+
},
34+
];
35+
36+
export const customers: Customer[] = [
37+
{
38+
CustomerID: 1,
39+
CustomerName: 'Kaela Phonix',
40+
Address: 'Markušica',
41+
Phone: '+385 674 958 1641',
42+
},
43+
{
44+
CustomerID: 2,
45+
CustomerName: 'Dotty Hearnden',
46+
Address: 'Itaberaí',
47+
Phone: '+55 491 329 4084',
48+
},
49+
{
50+
CustomerID: 3,
51+
CustomerName: 'Alasdair Greenin',
52+
Address: 'Volgograd',
53+
Phone: '+7 657 495 7659',
54+
},
55+
{
56+
CustomerID: 4,
57+
CustomerName: 'Stoddard Laidlaw',
58+
Address: 'Shuiyin',
59+
Phone: '+86 774 746 9874',
60+
},
61+
{
62+
CustomerID: 5,
63+
CustomerName: 'Damiano Gencke',
64+
Address: 'Baturaden',
65+
Phone: '+62 113 149 9397',
66+
},
67+
{
68+
CustomerID: 6,
69+
CustomerName: 'Aura Bavidge',
70+
Address: 'New York City',
71+
Phone: '+1 917 528 7751',
72+
},
73+
{
74+
CustomerID: 7,
75+
CustomerName: 'Emmanuel Chedgey',
76+
Address: 'Adolfo Lopez Mateos',
77+
Phone: '+52 626 244 6757',
78+
},
79+
{
80+
CustomerID: 8,
81+
CustomerName: 'Clerkclaude Pargeter',
82+
Address: 'Nong Khae',
83+
Phone: '+66 326 375 8694',
84+
},
85+
{
86+
CustomerID: 9,
87+
CustomerName: 'Onfroi Cinnamond',
88+
Address: 'Znamenskoye',
89+
Phone: '+7 926 141 2517',
90+
},
91+
{
92+
CustomerID: 10,
93+
CustomerName: 'Madlin Kopke',
94+
Address: 'Patpata Segundo',
95+
Phone: '+63 428 750 7737',
96+
},
97+
{
98+
CustomerID: 11,
99+
CustomerName: 'Mortie Feary',
100+
Address: 'Fontanka',
101+
Phone: '+380 557 509 4191',
102+
},
103+
{
104+
CustomerID: 12,
105+
CustomerName: 'Colet Haitlie',
106+
Address: "Novosil'",
107+
Phone: '+7 493 632 2768',
108+
},
109+
{
110+
CustomerID: 13,
111+
CustomerName: 'Pippy Carnell',
112+
Address: 'Ubinskoye',
113+
Phone: '+7 954 353 8930',
114+
},
115+
{
116+
CustomerID: 14,
117+
CustomerName: 'Arvie Midden',
118+
Address: 'Protvino',
119+
Phone: '+7 386 362 2407',
120+
},
121+
{
122+
CustomerID: 15,
123+
CustomerName: 'Brook Kamena',
124+
Address: 'Santa Fé do Sul',
125+
Phone: '+55 867 691 7097',
126+
},
127+
];

‎Vue/src/orig_App.vue‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

0 commit comments

Comments
 (0)