Skip to content
This repository was archived by the owner on Jun 27, 2023. It is now read-only.

Commit 79cb628

Browse files
alvarosabualvarosabu
authored
Merge pull request #257 from asigloo/hotfix/vdf-components-resolve-missing
fix: possible fix for components not resolving and dts
2 parents d275232 + ff23e68 commit 79cb628

12 files changed

+234
-9
lines changed

‎.eslintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ module.exports = {
44
node: true,
55
},
66
extends: [
7-
/* 'plugin:vue/vue3-essential', */
7+
'plugin:vue/vue3-essential',
88
'eslint:recommended',
99
'@vue/typescript/recommended',
1010
'@vue/prettier',

‎demos/vue-3/src/main.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import App from './App.vue';
33
import './styles/main.css';
44
import router from './router';
55

6-
import { createDynamicForms } from '/@';
6+
/* import { createDynamicForms } from '/@'; */
77

8-
/* import { createDynamicForms } from '../../../dist/as-dynamic-forms.es'; */
8+
import { createDynamicForms } from '../../../dist/as-dynamic-forms.es';
99

1010
const VueDynamicForms = createDynamicForms({
1111
autoValidate: true,

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@
88
"build:demo": "vite build",
99
"build": "vite build --config vite-lib.config.ts",
1010
"serve": "vite preview",
11+
"build:tsc": "tsc src/index.ts --declaration --emitDeclarationOnly && yarn build",
1112
"test:unit": "jest",
1213
"test:e2e": "cypress open",
1314
"test:e2e:ci": "cypress run",
1415
"lint": "lint",
1516
"build:dts": "api-extractor run --local --verbose && tail -n +7 >> dist/as-dynamic-forms.d.ts",
1617
"postinstall": "is-ci || husky install",
1718
"postpublish": "pinst --enable",
18-
"prepublishOnly": "pinst --disable",
19+
"prepublishOnly": "tsc src/index.ts --noEmit && yarn build && pinst --disable",
1920
"semantic-release": "semantic-release",
2021
"test": "jest",
2122
"test:components": "cypress open-ct",
@@ -92,7 +93,6 @@
9293
"typescript": "~4.3.5",
9394
"vite": "^2.4.1",
9495
"vite-plugin-components": "^0.12.2",
95-
"vite-plugin-dts": "^0.5.2",
9696
"vite-plugin-icons": "^0.6.5",
9797
"vue": "^3.1.4",
9898
"vue-jest": "^5.0.0-alpha.10",

‎src/core/factories.d.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { InputBase, TextInput, EmailInput, PasswordInput, CheckboxInput, ColorInput, RadioInput, NumberInput, SelectInput, CustomInput, FormControl, FormValidator, ValidationTrigger, TextAreaInput, UrlInput } from './models';
2+
export declare const FieldBase: ({ validations, label, ariaLabel, ariaLabelledBy, customClass, customStyles, disabled, placeholder, autocomplete, readonly, validationTrigger, }: InputBase) => InputBase;
3+
export declare const TextField: ({ value, ...rest }: Partial<TextInput>) => TextInput;
4+
export declare const TextAreaField: ({ value, cols, rows, ...rest }: Partial<TextAreaInput>) => TextAreaInput;
5+
export declare const EmailField: ({ value, ...rest }: Partial<EmailInput>) => EmailInput;
6+
export declare const PasswordField: ({ value, ...rest }: Partial<PasswordInput>) => PasswordInput;
7+
export declare const UrlField: ({ value, ...rest }: Partial<UrlInput>) => UrlInput;
8+
export declare const CheckboxField: ({ value, ...rest }: Partial<CheckboxInput>) => CheckboxInput;
9+
export declare const ColorField: ({ value, ...rest }: Partial<ColorInput>) => ColorInput;
10+
export declare const RadioField: ({ options, value, ...rest }: Partial<RadioInput>) => RadioInput;
11+
export declare const NumberField: ({ value, min, max, step, ...rest }: Partial<NumberInput>) => NumberInput;
12+
export declare const SelectField: ({ options, value, optionValue, optionLabel, ...rest }: Partial<SelectInput>) => SelectInput;
13+
export declare const CustomField: ({ value, ...rest }: Partial<CustomInput>) => CustomInput;
14+
export declare const FieldControl: ({ name, type, ...rest }: Partial<FormControl<any>>) => FormControl<any>;
15+
export declare const Validator: ({ validator, text, }: FormValidator) => FormValidator;
16+
export declare const ValidatorTrigger: ({ type, threshold, }: ValidationTrigger) => ValidationTrigger;

‎src/core/models.d.ts

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
export declare type InputType = TextInput | NumberInput | SelectInput | TextAreaInput | CheckboxInput | RadioInput | EmailInput | PasswordInput | RadioInput | ColorInput | UrlInput | CustomInput;
2+
export declare type MustHave<T, K extends keyof T> = Partial<T> & Pick<T, K>;
3+
export declare type FormFields = {
4+
[key: string]: InputType;
5+
};
6+
export declare type FormChanges = {
7+
[key: string]: string | number | null | undefined;
8+
};
9+
export interface DynamicForm {
10+
id: string;
11+
fields: FormFields;
12+
fieldOrder?: string[];
13+
options?: FormOptions;
14+
}
15+
export declare enum ValidationTriggerTypes {
16+
BLUR = "blur",
17+
CHANGE = "change"
18+
}
19+
export interface ValidationTrigger {
20+
type: ValidationTriggerTypes;
21+
threshold: number;
22+
}
23+
export interface ErrorMessage {
24+
text: string;
25+
value: boolean | null;
26+
}
27+
export declare type ValidationErrors = {
28+
[key: string]: any;
29+
};
30+
export declare type BindingObject = {
31+
[key: string]: never;
32+
};
33+
export interface ValidatorFn {
34+
(value: ControlValue | undefined): ValidationErrors | null;
35+
}
36+
export declare type ControlValue = string | number | boolean;
37+
export interface FormValidator {
38+
validator: ValidatorFn;
39+
text: string;
40+
type?: string;
41+
}
42+
export interface InputEvent {
43+
name: string;
44+
value?: unknown;
45+
}
46+
export declare type ValidationEvent = InputEvent & {
47+
errors: ValidationErrors;
48+
valid: boolean;
49+
};
50+
export interface InputBase {
51+
name?: string;
52+
label?: string;
53+
ariaLabel?: string;
54+
ariaLabelledBy?: string;
55+
disabled?: boolean;
56+
customClass?: string | string[] | BindingObject | BindingObject[] | unknown;
57+
customStyles?: string | string[] | BindingObject | BindingObject[] | unknown;
58+
placeholder?: string;
59+
autocomplete?: string;
60+
readonly?: boolean;
61+
validations?: FormValidator[];
62+
validationTrigger?: ValidationTrigger;
63+
}
64+
export declare type TextInput = InputBase & {
65+
type: FieldTypes.TEXT;
66+
value?: string;
67+
};
68+
export declare type NumberInput = InputBase & {
69+
type: FieldTypes.NUMBER;
70+
value: number;
71+
min: number;
72+
max: number;
73+
step: number;
74+
};
75+
export declare type SelectInput<T = boolean | string> = InputBase & {
76+
type: FieldTypes.SELECT;
77+
value: T;
78+
optionValue: string;
79+
optionLabel: string;
80+
options?: {
81+
label: string;
82+
value: string;
83+
disabled?: boolean;
84+
}[];
85+
};
86+
export declare type TextAreaInput = InputBase & {
87+
type: FieldTypes.TEXTAREA;
88+
value: string;
89+
cols?: number;
90+
rows?: number;
91+
};
92+
export declare type CheckboxInput = InputBase & {
93+
type: FieldTypes.CHECKBOX;
94+
value: boolean;
95+
};
96+
export declare type CustomInput = InputBase & {
97+
type: FieldTypes.CUSTOM;
98+
value: boolean | string | number;
99+
};
100+
export declare type EmailInput = InputBase & {
101+
type: FieldTypes.EMAIL;
102+
value: string;
103+
};
104+
export declare type PasswordInput = InputBase & {
105+
type: FieldTypes.PASSWORD;
106+
value: string;
107+
};
108+
export declare type ColorInput = InputBase & {
109+
type: FieldTypes.COLOR;
110+
value: string;
111+
};
112+
export declare type UrlInput = InputBase & {
113+
type: FieldTypes.URL;
114+
value: string;
115+
};
116+
export declare type RadioInput = InputBase & {
117+
type: FieldTypes.RADIO;
118+
value: string;
119+
options?: {
120+
key: string;
121+
value: string;
122+
disabled?: boolean;
123+
}[];
124+
};
125+
export declare type FormControl<T extends InputType> = T & {
126+
valid: boolean;
127+
dirty: boolean;
128+
touched: boolean;
129+
errors: ValidationErrors | null;
130+
};
131+
export interface FormOptions {
132+
customClass?: string | string[] | BindingObject | BindingObject[] | unknown;
133+
customStyles?: string | string[] | BindingObject | BindingObject[] | unknown;
134+
method?: string;
135+
netlify?: boolean;
136+
netlifyHoneypot?: string;
137+
autocomplete?: boolean | string;
138+
resetAfterSubmit?: boolean;
139+
}
140+
export declare enum FieldTypes {
141+
TEXT = "text",
142+
TEXTAREA = "textarea",
143+
SELECT = "select",
144+
NUMBER = "number",
145+
EMAIL = "email",
146+
URL = "url",
147+
PASSWORD = "password",
148+
CHECKBOX = "checkbox",
149+
RADIO = "radio",
150+
CUSTOM = "custom-field",
151+
COLOR = "color"
152+
}

‎src/core/utils/index.d.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export * from './validators';
2+
declare const _default: {
3+
required: (value: import("../models").ControlValue) => import("../models").ValidationErrors;
4+
min: (min: number) => (value: import("../models").ControlValue) => import("../models").ValidationErrors;
5+
max: (max: number) => (value: import("../models").ControlValue) => import("../models").ValidationErrors;
6+
email: (value: import("../models").ControlValue) => import("../models").ValidationErrors;
7+
minLength: (minLength: number) => (value: import("../models").ControlValue) => import("../models").ValidationErrors;
8+
maxLength: (maxLength: number) => (value: import("../models").ControlValue) => import("../models").ValidationErrors;
9+
pattern: (pattern: string) => import("../models").ValidatorFn;
10+
url: (value: import("../models").ControlValue) => import("../models").ValidationErrors;
11+
};
12+
export default _default;

‎src/core/utils/validators.d.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ControlValue, ValidationErrors, ValidatorFn } from '../models';
2+
export declare const isEmptyInputValue: (value: ControlValue) => boolean;
3+
export declare const required: (value: ControlValue) => ValidationErrors;
4+
export declare const min: (min: number) => (value: ControlValue) => ValidationErrors;
5+
export declare const max: (max: number) => (value: ControlValue) => ValidationErrors;
6+
export declare const email: (value: ControlValue) => ValidationErrors;
7+
export declare const url: (value: ControlValue) => ValidationErrors;
8+
export declare const minLength: (minLength: number) => (value: ControlValue) => ValidationErrors;
9+
export declare const maxLength: (maxLength: number) => (value: ControlValue) => ValidationErrors;
10+
export declare const pattern: (pattern: string) => ValidatorFn;
11+
declare const _default: {
12+
required: (value: ControlValue) => ValidationErrors;
13+
min: (min: number) => (value: ControlValue) => ValidationErrors;
14+
max: (max: number) => (value: ControlValue) => ValidationErrors;
15+
email: (value: ControlValue) => ValidationErrors;
16+
minLength: (minLength: number) => (value: ControlValue) => ValidationErrors;
17+
maxLength: (maxLength: number) => (value: ControlValue) => ValidationErrors;
18+
pattern: (pattern: string) => ValidatorFn;
19+
url: (value: ControlValue) => ValidationErrors;
20+
};
21+
export default _default;

‎src/dynamicForms.d.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { App, InjectionKey } from 'vue';
2+
import { FormOptions } from './core/models';
3+
export interface DynamicFormsOptions {
4+
autoValidate?: boolean;
5+
form?: FormOptions;
6+
}
7+
export interface DynamicFormsPlugin {
8+
options?: DynamicFormsOptions;
9+
install(app: App): void;
10+
}
11+
export declare const dynamicFormsSymbol: InjectionKey<DynamicFormsPlugin>;
12+
export declare function useDynamicForms(): DynamicFormsPlugin;
13+
export declare function createDynamicForms(options?: DynamicFormsOptions): DynamicFormsPlugin;

‎src/dynamicForms.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { App, inject, InjectionKey } from 'vue';
2-
import DynamicForm from './components/dynamic-form/DynamicForm.vue';
32
import { FormOptions } from './core/models';
43

54
export interface DynamicFormsOptions {
@@ -12,6 +11,8 @@ export interface DynamicFormsPlugin {
1211
install(app: App): void;
1312
}
1413

14+
const components = import.meta.globEager('./components/**/*.vue');
15+
1516
export const dynamicFormsSymbol: InjectionKey<DynamicFormsPlugin> =
1617
Symbol('vdf');
1718

@@ -30,7 +31,14 @@ export function createDynamicForms(
3031
install(app: App) {
3132
app.provide(dynamicFormsSymbol, $vdf);
3233

33-
app.component('DynamicForm', DynamicForm);
34+
Object.entries(components).forEach(([path, definition]) => {
35+
const componentName = path
36+
.split('/')
37+
.pop()
38+
.replace(/\.\w+$/, '');
39+
40+
app.component(componentName, definition.default);
41+
});
3442

3543
Object.defineProperty(app, '__VUE_DYNAMIC_FORMS_SYMBOL__', {
3644
get() {

‎src/index.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from './dynamicForms';
2+
export * from './core/models';
3+
export * from './core/factories';
4+
export * from './core/utils';

‎tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"rootDir": ".",
2020
"types": ["vite/client", "jest", "node", "@types/jest"],
2121
"paths": {
22-
"/@/*": ["src/*"]
22+
"/@/*": ["./src/*"]
2323
}
2424
},
2525
"include": [

‎vite-lib.config.ts

-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export default defineConfig({
2323
},
2424
plugins: [
2525
vue(),
26-
dts(),
2726
copy({
2827
targets: [{ src: 'src/styles/themes/**/*', dest: 'dist/themes' }],
2928
hook: 'writeBundle', // notice here

0 commit comments

Comments
 (0)