Skip to content

Commit fc100dc

Browse files
vis97cvis97c
committed
fix: form input from types
BREAKING CHANGE: iForm moved to types
1 parent a13cb49 commit fc100dc

File tree

20 files changed

+3273
-2714
lines changed

20 files changed

+3273
-2714
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"stylelint-config-recommended-vue": "^1.5.0",
6464
"stylelint-config-standard-scss": "^13.1.0",
6565
"stylelint-prettier": "^5.0.0",
66-
"typescript": "5.6.3",
66+
"typescript": "5.8.2",
6767
"vite": "^5.2.12",
6868
"vue-tsc": "^2.1.10"
6969
},

‎packages/common-helpers/src/form/composable.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type {
22
iFetchResponse,
33
iFormResponse,
44
iPluginOptions,
5+
tFormInput,
56
tResponseFn,
67
} from "@open-xamu-co/ui-common-types";
78

@@ -17,7 +18,6 @@ import {
1718
isValidValue,
1819
notEmptyValue,
1920
} from "./utils";
20-
import { FormInput } from "./input";
2121

2222
/**
2323
* Form Composable
@@ -38,7 +38,7 @@ export default function useForm(options: iPluginOptions = {}) {
3838
*/
3939
async function getResponse<R, RV extends Record<string, any> = Record<string, any>>(
4040
request: tResponseFn<R, RV>,
41-
inputs: RV | FormInput[] = [],
41+
inputs: RV | tFormInput[] = [],
4242
event?: Event,
4343
silent = false,
4444
plainValues = true

‎packages/common-helpers/src/form/input.ts‎

Lines changed: 25 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type {
88
iSelectOption,
99
tFormAutocomplete,
1010
tFormIcon,
11+
tFormInputDefault,
1112
} from "@open-xamu-co/ui-common-types";
1213
import {
1314
eFormType,
@@ -78,38 +79,36 @@ function isChoiceType(type: eFormTypeBase | eFormTypeSimple | eFormTypeComplex):
7879
return types.includes(type);
7980
}
8081

81-
export class FormInputDefault<
82-
T extends eFormTypeBase | eFormTypeSimple | eFormTypeComplex = eFormTypeSimple,
83-
> implements iFormInputDefault<T>
82+
export abstract class FormInputDefault<
83+
T extends eFormTypeBase | eFormTypeSimple | eFormTypeComplex = eFormTypeSimple.TEXT,
84+
> implements tFormInputDefault<T>
8485
{
8586
// public
86-
public type!: T;
87+
public type: T;
8788
// public readonly
88-
public readonly required!: boolean;
89-
public readonly placeholder!: string;
90-
public readonly icon!: tFormIcon;
91-
public readonly autocomplete!: tFormAutocomplete;
89+
public readonly required: boolean;
90+
public readonly placeholder: string;
91+
public readonly icon?: tFormIcon;
92+
public readonly autocomplete?: tFormAutocomplete;
9293

9394
constructor(
9495
formInput: iFormInputDefault<T>,
9596
private _rerender?: (fi?: Partial<iFormInputDefault<T>>) => void
9697
) {
98+
this.type = formInput.type || (eFormTypeSimple.TEXT as T);
9799
this.required = formInput.required ?? false;
100+
this.placeholder = formInput.placeholder || "";
101+
this.autocomplete = formInput.autocomplete;
98102

99-
if (formInput.type) this.type = formInput.type;
100-
if (formInput.placeholder) this.placeholder = formInput.placeholder;
101103
if (formInput.icon) this.icon = getIcon(formInput.icon, formInput.type);
102-
if (formInput.autocomplete) this.autocomplete = formInput.autocomplete;
103104
}
104105

105106
/** Rerender component */
106107
public rerender(): void {
107108
this._rerender?.(this);
108109
}
109110

110-
/**
111-
* set rerender function
112-
*/
111+
/** set rerender function */
113112
public setRerender(rerender: (fi?: Partial<iFormInputDefault<T>>) => void) {
114113
this._rerender = rerender;
115114

@@ -122,15 +121,15 @@ export class FormInput<V extends iFormValue = iFormValue, Vk extends V | V[] = V
122121
implements iFormInput<V, Vk>
123122
{
124123
// private
125-
private _options!: iSelectOption[];
126-
private _values!: Vk[];
124+
private _options: iSelectOption[];
125+
private _values: Vk[];
127126
private _defaults?: [iFormInputDefault, iFormInputDefault, ...iFormInputDefault[]];
128127
// public readonly
129-
public readonly name!: string;
130-
public readonly title!: string;
131-
public readonly multiple!: boolean;
132-
public readonly min!: number;
133-
public readonly max!: number;
128+
public readonly name: string;
129+
public readonly title?: string;
130+
public readonly multiple: boolean;
131+
public readonly min: number;
132+
public readonly max: number;
134133

135134
/**
136135
* Form input constructor
@@ -144,7 +143,11 @@ export class FormInput<V extends iFormValue = iFormValue, Vk extends V | V[] = V
144143
) {
145144
super(formInput, rerender);
146145

146+
this.name = formInput.name;
147+
this.multiple = formInput.multiple ?? false;
148+
this.title = formInput.title;
147149
this._options = formInput.options?.map(toOption) ?? [];
150+
this._defaults = formInput.defaults;
148151
this.min = formInput.min ?? 1;
149152

150153
// max cannot be lower than min or more than options if they exist
@@ -167,12 +170,6 @@ export class FormInput<V extends iFormValue = iFormValue, Vk extends V | V[] = V
167170
// use defaults
168171
if (this._values.length < length) this._values = values;
169172
}
170-
171-
this.name = formInput.name;
172-
this.multiple = formInput.multiple ?? false;
173-
174-
if (formInput.defaults) this._defaults = formInput.defaults;
175-
if (formInput.title) this.title = formInput.title;
176173
}
177174

178175
get options(): iSelectOption[] {
@@ -288,7 +285,7 @@ export class FormInput<V extends iFormValue = iFormValue, Vk extends V | V[] = V
288285
* Get simple object
289286
*/
290287
public getObject<Vi extends iFormValue = iFormValue, Vik extends Vi | Vi[] = Vi>(
291-
input: FormInput<Vi, Vik>
288+
input: iFormInput<Vi, Vik>
292289
): iFormInput<Vi, Vik> {
293290
return {
294291
required: input.required,
@@ -311,17 +308,3 @@ export class FormInput<V extends iFormValue = iFormValue, Vk extends V | V[] = V
311308
return isEqual(this.getObject(this), this.getObject(other));
312309
}
313310
}
314-
315-
export interface iForm {
316-
/**
317-
* Optional form key
318-
*/
319-
key?: string;
320-
title?: string;
321-
inputs: FormInput[];
322-
listen?: boolean;
323-
/** Make all inputs read only by disabling them */
324-
readonly?: boolean;
325-
/** Message when no valid inputs are rendered */
326-
emptyMessage?: string;
327-
}

‎packages/common-helpers/src/form/utils.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {
55
iFormValue,
66
iFormResults,
77
iInvalidInput,
8+
tFormInput,
89
} from "@open-xamu-co/ui-common-types";
910
import {
1011
eFormType,
@@ -13,8 +14,6 @@ import {
1314
eFormTypeBase,
1415
} from "@open-xamu-co/ui-common-enums";
1516

16-
import { FormInput } from "./input";
17-
1817
/**
1918
* Wheter or not value is empty
2019
* @param value any value
@@ -39,7 +38,7 @@ export function notEmptyValue<V extends iFormValue = iFormValue>(
3938
*/
4039
export function isValidValue<V extends iFormValue = iFormValue>(
4140
value: V | V[],
42-
input: FormInput
41+
input: tFormInput
4342
): boolean {
4443
// empty values are falsy
4544
if (!notEmptyValue(value, input.defaults)) return false;
@@ -66,7 +65,7 @@ export function isValidValue<V extends iFormValue = iFormValue>(
6665
*
6766
* Array.every is truthy for empty arrays
6867
*/
69-
export const isValidFormInputValue = (input: FormInput, ignoreRequired = false): boolean => {
68+
export const isValidFormInputValue = (input: tFormInput, ignoreRequired = false): boolean => {
7069
const { values, multiple, type, min, max } = input;
7170
const required = input.required && !ignoreRequired;
7271

@@ -121,7 +120,7 @@ export function getInputSuffixes(
121120
return ["", ""];
122121
}
123122
}
124-
export function getFormInputsInvalids(inputs: FormInput[]): iInvalidInput[] {
123+
export function getFormInputsInvalids(inputs: tFormInput[]): iInvalidInput[] {
125124
const invalidInputs: iInvalidInput[] = [];
126125

127126
inputs.forEach((input) => {
@@ -143,7 +142,7 @@ export function getFormInputsInvalids(inputs: FormInput[]): iInvalidInput[] {
143142
* @returns
144143
*/
145144
export function getFormInputsValues<V extends Record<string, any>>(
146-
inputs: FormInput[],
145+
inputs: tFormInput[],
147146
plainValues = true
148147
): V {
149148
return inputs.reduce((acc, input, index) => {
@@ -231,7 +230,7 @@ export function getFormInputsValues<V extends Record<string, any>>(
231230
* @returns An object containing the form values and invalid inputs.
232231
*/
233232
export function getFormValues<V extends Record<string, any>>(
234-
inputs: V | FormInput[],
233+
inputs: V | tFormInput[],
235234
plainValues = true
236235
): iFormResults<V> {
237236
if (!Array.isArray(inputs)) return { values: inputs, invalidInputs: [] };

‎packages/common-helpers/src/locale/en.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ export const localePagination: tLocalePagination = {
198198
*
199199
* @locale en
200200
*/
201-
const etLocale: tPluginLocale = {
201+
const enLocale: tPluginLocale = {
202202
...omit(localeBase, "swal"),
203203
...omit(localeInput, "swal"),
204204
...omit(localeModal, "swal"),
@@ -215,4 +215,4 @@ const etLocale: tPluginLocale = {
215215
},
216216
};
217217

218-
export default etLocale;
218+
export default enLocale;

‎packages/common-types/src/form/class.ts‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import type {
2+
eFormTypeBase,
3+
eFormTypeSimple,
4+
eFormTypeComplex,
5+
} from "@open-xamu-co/ui-common-enums";
6+
7+
import type {
8+
iFormInput,
9+
iFormInputDefault,
10+
iFormValue,
11+
tFormAutocomplete,
12+
tFormIcon,
13+
} from "./types";
14+
import type { iSelectOption } from "../values.js";
15+
16+
export declare abstract class tFormInputDefault<
17+
T extends eFormTypeBase | eFormTypeSimple | eFormTypeComplex = eFormTypeSimple.TEXT,
18+
> implements iFormInputDefault<T>
19+
{
20+
// public
21+
public type: T;
22+
// public readonly
23+
public readonly required: boolean;
24+
public readonly placeholder: string;
25+
public readonly icon?: tFormIcon;
26+
public readonly autocomplete?: tFormAutocomplete;
27+
28+
/** Rerender component */
29+
public rerender(): void;
30+
31+
/** Set rerender function */
32+
public setRerender(rerender: (fi?: Partial<iFormInputDefault<T>>) => void): this;
33+
}
34+
35+
export declare class tFormInput<V extends iFormValue = iFormValue, Vk extends V | V[] = V | V[]>
36+
extends tFormInputDefault<eFormTypeBase | eFormTypeSimple | eFormTypeComplex>
37+
implements iFormInput<V, Vk>
38+
{
39+
// public readonly
40+
public readonly name: string;
41+
public readonly title?: string;
42+
public readonly multiple: boolean;
43+
public readonly min: number;
44+
public readonly max: number;
45+
// public
46+
public options: iSelectOption[];
47+
public values: Vk[];
48+
public defaults?: [iFormInputDefault, iFormInputDefault, ...iFormInputDefault[]];
49+
/**
50+
* set rerender function
51+
*
52+
* @override
53+
*/
54+
public setRerender(rerender: (fi?: Partial<iFormInput<V>>) => void): this;
55+
/**
56+
* add new model to the models
57+
*/
58+
public addValue(newValue?: Vk): this;
59+
/**
60+
* remove the given value from the values
61+
*/
62+
public removeValue(index: number): this;
63+
64+
/**
65+
* Clone this object
66+
*/
67+
public clone(
68+
overrides?: Omit<iFormInput<V, Vk>, "name"> & { name?: string },
69+
onUpdatedValues?: (updatedValues: Vk[]) => Vk[] | undefined | void
70+
): tFormInput<V, Vk>;
71+
/**
72+
* Get simple object
73+
*/
74+
public getObject<Vi extends iFormValue = iFormValue, Vik extends Vi | Vi[] = Vi>(
75+
input: iFormInput<Vi, Vik>
76+
): iFormInput<Vi, Vik>;
77+
78+
public isEqual(other: tFormInput): boolean;
79+
}
80+
81+
export interface iForm {
82+
/**
83+
* Optional form key
84+
*/
85+
key?: string;
86+
title?: string;
87+
inputs: tFormInput[];
88+
listen?: boolean;
89+
/** Make all inputs read only by disabling them */
90+
readonly?: boolean;
91+
/** Message when no valid inputs are rendered */
92+
emptyMessage?: string;
93+
}

‎packages/common-types/src/form/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from "./class";
2+
export * from "./types";

‎packages/common-types/src/form.ts‎ renamed to ‎packages/common-types/src/form/types.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { IconName } from "@fortawesome/fontawesome-common-types";
22

33
import { eFormTypeBase, eFormTypeComplex, eFormTypeSimple } from "@open-xamu-co/ui-common-enums";
44

5-
import type { iSelectOption } from "./values.js";
5+
import type { iSelectOption } from "../values.js";
66

77
export interface iFormOption extends iSelectOption {
88
/**
@@ -101,10 +101,10 @@ export type iFormValue = string | number | boolean | File | Date;
101101
* Simple input
102102
*/
103103
export interface iFormInputDefault<
104-
T extends eFormTypeBase | eFormTypeSimple | eFormTypeComplex = eFormTypeSimple,
104+
T extends eFormTypeBase | eFormTypeSimple | eFormTypeComplex = eFormTypeSimple.TEXT,
105105
> {
106-
required?: boolean;
107106
type?: T;
107+
required?: boolean;
108108
/**
109109
* String without the dots
110110
*/

‎packages/common-types/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export * from "./files.js";
2-
export * from "./form.js";
2+
export * from "./form/index.js";
33
export * from "./transform.js";
44
export * from "./styles.js";
55
export * from "./props.js";

‎packages/components-vue/src/components/form/Input.vue‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -283,13 +283,9 @@
283283
import snakeCase from "lodash-es/snakeCase";
284284
import omit from "lodash-es/omit";
285285
286-
import type { iInvalidInput, iSelectOption } from "@open-xamu-co/ui-common-types";
286+
import type { iInvalidInput, iSelectOption, tFormInput } from "@open-xamu-co/ui-common-types";
287287
import { eFormType as eFT } from "@open-xamu-co/ui-common-enums";
288-
import {
289-
type FormInput as FormInputClass,
290-
useI18n,
291-
useForm,
292-
} from "@open-xamu-co/ui-common-helpers";
288+
import { useI18n, useForm } from "@open-xamu-co/ui-common-helpers";
293289
294290
import BaseBox from "../base/Box.vue";
295291
import BaseErrorBoundary from "../base/ErrorBoundary.vue";
@@ -315,7 +311,7 @@
315311
316312
interface iFormInputProps extends iUseThemeProps {
317313
modelValue: any[];
318-
input: FormInputClass;
314+
input: tFormInput;
319315
invalid?: iInvalidInput;
320316
countries?: iCountry[];
321317
states?: iState[];

0 commit comments

Comments
 (0)