Skip to content

Commit ce55f67

Browse files
tada5hitada5hi
committed
initial refactoring for vue3
1 parent 228c9c8 commit ce55f67

22 files changed

+12313
-8721
lines changed

‎package-lock.json

+12,024-8,314
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"node": ">=14.0.0"
3535
},
3636
"devDependencies": {
37-
"@tada5hi/eslint-config-vue-typescript": "^1.0.4",
37+
"@tada5hi/eslint-config-vue-typescript": "^1.0.5",
3838
"@types/node": "^18.7.9",
3939
"cross-env": "^7.0.3",
4040
"lerna": "^5.4.3",

‎packages/navigation-demo/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
"homepage": "https://github.com/Tada5hi/vue-layout#readme",
3737
"dependencies": {
3838
"@vue-layout/navigation": "^1.0.16",
39-
"vue": "^2.6.14",
40-
"vue-router": "^3.6.0"
39+
"vue": "^3.2.37",
40+
"vue-router": "^4.1.4"
4141
},
4242
"devDependencies": {
4343
"@babel/core": "^7.18.13",

‎packages/navigation/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,12 @@
7171
"ts-jest": "^28.0.8",
7272
"ttypescript": "^1.5.13",
7373
"typescript": "^4.7.4",
74-
"vue": "^2.6.14",
75-
"vue-router": "^3.6.0"
74+
"vue": "^3.2.37",
75+
"vue-router": "^4.1.4"
7676
},
7777
"peerDependencies": {
78-
"vue": "^2.x",
79-
"vue-router": "^3.x"
78+
"vue": "^3.x",
79+
"vue-router": "^4.x"
8080
},
8181
"engines": {
8282
"node": ">=12"

‎packages/utils/babel.config.js

+1-10
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
11
const devPresets = ['@vue/babel-preset-app'];
22
const buildPresets = [
3-
[
4-
'@babel/preset-env',
5-
// Config for @babel/preset-env
6-
{
7-
// Example: Always transpile optional chaining/nullish coalescing
8-
// include: [
9-
// /(optional-chaining|nullish-coalescing)/
10-
// ],
11-
},
12-
],
3+
'@babel/preset-env',
134
'@babel/preset-typescript',
145
];
156
module.exports = {

‎packages/utils/package.json

+6-4
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,14 @@
6565
"ts-jest": "^28.0.8",
6666
"ttypescript": "^1.5.13",
6767
"typescript": "^4.7.4",
68-
"vue": "^2.6.14",
69-
"vuelidate": "^0.7.7"
68+
"vue": "^3.2.37",
69+
"@vuelidate/core": "^2.0.0-alpha.44",
70+
"@vuelidate/validators": "^2.0.0-alpha.31"
7071
},
7172
"peerDependencies": {
72-
"vue": "^2.x",
73-
"vuelidate": "^0.x"
73+
"vue": "^3.x",
74+
"@vuelidate/core": "^2.x",
75+
"@vuelidate/validators": "^2.x"
7476
},
7577
"engines": {
7678
"node": ">=12"

‎packages/utils/src/components/FormGroup.ts

+13-12
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,11 @@
55
* view the LICENSE file that was distributed with this source code.
66
*/
77

8-
import Vue, { PropType } from 'vue';
8+
import {
9+
PropType, defineComponent, h,
10+
} from 'vue';
911
import { ValidationMessages, ValidationTranslator } from '../render';
1012

11-
type FormGroupComputed = {
12-
errors: string[],
13-
invalid: boolean
14-
};
15-
1613
export type FormGroupSlotScope = {
1714
errors: string[],
1815
invalid: boolean,
@@ -24,10 +21,10 @@ export type FormGroupProperties = {
2421
validationTranslator?: ValidationTranslator
2522
};
2623

27-
export const FormGroup = Vue.extend<any, any, FormGroupComputed, FormGroupProperties>({
24+
export const FormGroup = defineComponent({
2825
props: {
2926
validations: {
30-
required: true,
27+
default: undefined,
3128
type: Object,
3229
},
3330
validationMessages: {
@@ -41,13 +38,13 @@ export const FormGroup = Vue.extend<any, any, FormGroupComputed, FormGroupProper
4138
},
4239
computed: {
4340
errors() {
44-
if (!this.invalid) {
41+
if (!this.invalid || typeof this.validations === 'undefined') {
4542
return [];
4643
}
4744

4845
return Object.keys(this.validations.$params).reduce(
4946
(errors: string[], validator) => {
50-
if (!this.validations[validator]) {
47+
if (this.validations && !this.validations[validator]) {
5148
errors.push(this.translate(validator, this.validations.$params[validator]));
5249
}
5350

@@ -72,7 +69,7 @@ export const FormGroup = Vue.extend<any, any, FormGroupComputed, FormGroupProper
7269
}
7370

7471
if (typeof this.validationTranslator !== 'undefined') {
75-
const translation : string | undefined = this.validationTranslator(validator, properties);
72+
const translation : string | undefined = this.validationTranslator(validator, properties || {});
7673
if (typeof translation === 'string') {
7774
return translation;
7875
}
@@ -82,7 +79,11 @@ export const FormGroup = Vue.extend<any, any, FormGroupComputed, FormGroupProper
8279
},
8380
},
8481
render() {
85-
return this.$scopedSlots.default({
82+
if (!this.$slots.default) {
83+
return h('');
84+
}
85+
86+
return this.$slots.default({
8687
errors: this.errors,
8788
invalid: this.invalid,
8889
} as FormGroupSlotScope);

‎packages/utils/src/components/Pagination.ts

+31-46
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* view the LICENSE file that was distributed with this source code.
66
*/
77

8-
import Vue, { CreateElement, VNode } from 'vue';
8+
import { VNode, defineComponent, h } from 'vue';
99

1010
export type PaginationMeta = {
1111
limit?: number,
@@ -14,11 +14,7 @@ export type PaginationMeta = {
1414
page?: number
1515
};
1616

17-
export type PaginationProperties = PaginationMeta & {
18-
busy: boolean
19-
};
20-
21-
export const Pagination = Vue.extend<any, any, any, PaginationProperties>({
17+
export const Pagination = defineComponent({
2218
props: {
2319
total: {
2420
type: Number,
@@ -74,50 +70,43 @@ export const Pagination = Vue.extend<any, any, any, PaginationProperties>({
7470
this.$emit('load', data);
7571
},
7672
},
77-
render(createElement: CreateElement): VNode {
73+
render(): VNode {
7874
// eslint-disable-next-line @typescript-eslint/no-this-alias
7975
const vm = this;
80-
const h = createElement;
8176

82-
let prevPage = h();
77+
let prevPage = h('');
8378
if (vm.currentPage > 1) {
84-
prevPage = h('li', { staticClass: 'page-item' }, [
79+
prevPage = h('li', { class: 'page-item' }, [
8580
h('button', {
86-
staticClass: 'page-link',
87-
domProps: {
88-
disabled: vm.busy,
89-
},
90-
on: {
91-
click($event: any) {
92-
$event.preventDefault();
81+
class: 'page-link',
82+
disabled: vm.busy,
83+
onClick($event: any) {
84+
$event.preventDefault();
9385

94-
// eslint-disable-next-line prefer-rest-params
95-
return vm.goTo(vm.currentPage - 1);
96-
},
86+
// eslint-disable-next-line prefer-rest-params
87+
return vm.goTo(vm.currentPage - 1);
9788
},
9889
}, [
99-
h('i', { staticClass: 'fa fa-chevron-left' }),
90+
h('i', { class: 'fa fa-chevron-left' }),
10091
]),
10192
]);
10293
}
10394

10495
const betweenPages = [];
10596

10697
for (let i = 0; i < vm.pages.length; i++) {
107-
const node = h('li', { staticClass: 'page-item' }, [
98+
const node = h('li', { class: 'page-item' }, [
10899
h('button', {
109-
class: { active: vm.pages[i] === vm.currentPage },
110-
staticClass: 'page-link',
111-
domProps: {
112-
disabled: vm.busy,
100+
class: {
101+
active: vm.pages[i] === vm.currentPage,
102+
'page-link': true,
113103
},
114-
on: {
115-
click($event: any) {
116-
$event.preventDefault();
104+
disabled: vm.busy,
105+
onClick($event: any) {
106+
$event.preventDefault();
117107

118-
// eslint-disable-next-line prefer-rest-params
119-
return vm.goTo(vm.pages[i]);
120-
},
108+
// eslint-disable-next-line prefer-rest-params
109+
return vm.goTo(vm.pages[i]);
121110
},
122111
}, [
123112
vm.pages[i],
@@ -127,29 +116,25 @@ export const Pagination = Vue.extend<any, any, any, PaginationProperties>({
127116
betweenPages.push(node);
128117
}
129118

130-
let nextPage = h();
119+
let nextPage = h('');
131120
if (vm.currentPage < vm.totalPages) {
132-
nextPage = h('li', { staticClass: 'page-item' }, [
121+
nextPage = h('li', { class: 'page-item' }, [
133122
h('button', {
134-
staticClass: 'page-link',
135-
domProps: {
136-
disabled: vm.busy,
137-
},
138-
on: {
139-
click($event: any) {
140-
$event.preventDefault();
123+
class: 'page-link',
124+
disabled: vm.busy,
125+
onClick($event: any) {
126+
$event.preventDefault();
141127

142-
// eslint-disable-next-line prefer-rest-params
143-
return vm.goTo(vm.currentPage + 1);
144-
},
128+
// eslint-disable-next-line prefer-rest-params
129+
return vm.goTo(vm.currentPage + 1);
145130
},
146131
}, [
147-
h('i', { staticClass: 'fa fa-chevron-right' }),
132+
h('i', { class: 'fa fa-chevron-right' }),
148133
]),
149134
]);
150135
}
151136

152-
return h('ul', { staticClass: 'pagination justify-content-center' }, [
137+
return h('ul', { class: 'pagination justify-content-center' }, [
153138
prevPage,
154139
betweenPages,
155140
nextPage,

‎packages/utils/src/render/form/input.ts

+44-56
Original file line numberDiff line numberDiff line change
@@ -5,73 +5,61 @@
55
* view the LICENSE file that was distributed with this source code.
66
*/
77

8-
import { CreateElement, VNode } from 'vue';
8+
import { VNode, h } from 'vue';
9+
import { BaseValidation } from '@vuelidate/core';
910
import { FormGroup, FormGroupProperties } from '../../components';
1011
import {
11-
ComponentFormComputed,
12-
ComponentFormData,
13-
ComponentFormMethods,
14-
ComponentFormVuelidate,
1512
FormGroupProps,
1613
FormInputBuildContext,
1714
} from './type';
1815

1916
export function buildFormInput<T extends Record<string, any>>(
20-
instance: ComponentFormMethods<T> &
21-
ComponentFormComputed<T> &
22-
ComponentFormData<T> &
23-
ComponentFormVuelidate<T>,
24-
h: CreateElement,
2517
context: FormInputBuildContext<T>,
2618
) : VNode {
19+
const validations : Partial<BaseValidation> = context.validationGroup ?
20+
context.validationGroup[context.propName] : {};
21+
2722
return h(FormGroup, {
28-
props: {
29-
validations: instance.$v.form[context.propName],
30-
validationMessages: context.validationMessages,
31-
validationTranslator: context.validationTranslator,
32-
} as FormGroupProperties,
33-
scopedSlots: {
34-
default: (props: FormGroupProps) => h(
35-
'div',
36-
{
37-
staticClass: 'form-group',
38-
class: {
39-
'form-group-error': instance.$v.form[context.propName].$error,
40-
'form-group-warning': instance.$v.form[context.propName].$invalid &&
41-
!instance.$v.form[context.propName].$dirty,
42-
},
23+
validations,
24+
validationMessages: context.validationMessages,
25+
validationTranslator: context.validationTranslator,
26+
} as FormGroupProperties, {
27+
default: (props: FormGroupProps) => h(
28+
'div',
29+
{
30+
class: {
31+
'form-group': true,
32+
'form-group-error': validations.$error,
33+
'form-group-warning': validations.$invalid &&
34+
!validations.$dirty,
4335
},
44-
[
45-
h('label', Array.isArray(context.title) ? context.title : [context.title]),
46-
h('input', {
47-
attrs: {
48-
type: 'text',
49-
placeholder: '...',
50-
...(context.attrs || {}),
51-
},
52-
domProps: {
53-
value: instance.$v.form[context.propName].$model,
54-
...(context.domProps || {}),
55-
},
56-
staticClass: 'form-control',
57-
on: {
58-
input($event: any) {
59-
if ($event.target.composing) {
60-
return;
61-
}
36+
},
37+
[
38+
h('label', Array.isArray(context.title) ? context.title : [context.title]),
39+
h('input', {
40+
type: 'text',
41+
placeholder: '...',
42+
value: validations.$model,
43+
...(context.domProps || {}),
44+
...(context.attrs || {}),
45+
class: 'form-control',
46+
onInput($event: any) {
47+
if ($event.target.composing) {
48+
return;
49+
}
6250

63-
instance.$set(instance.$v.form[context.propName], '$model', $event.target.value);
64-
if (context.changeCallback) {
65-
context.changeCallback.call(null, $event.target.value);
66-
}
67-
},
68-
},
69-
}),
70-
props.errors.map((error) => h('div', {
71-
staticClass: 'form-group-hint group-required',
72-
}, [error])),
73-
],
74-
),
75-
},
51+
validations.$model = $event.target.value;
52+
this.$emit('update:modelValue', $event.target.value);
53+
54+
if (context.changeCallback) {
55+
context.changeCallback.call(null, $event.target.value);
56+
}
57+
},
58+
}),
59+
props.errors.map((error) => h('div', {
60+
class: 'form-group-hint group-required',
61+
}, [error])),
62+
],
63+
),
7664
});
7765
}

0 commit comments

Comments
 (0)