ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(form): deprecate labelPosition (#172)

Browse source
This commit is contained in:
Woramat Ngamkham 2022-11-01 22:24:29 +07:00 committed by GitHub
parent f93f8b6484
commit b4c33eec66
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 3 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/demo/src/pages/index.astro
View file

@ -62,7 +62,6 @@ const config: ControlConfig = {
type: "checkbox",
name: "is-awesome",
label: "is Awesome?",
labelPosition: "right",
};
// insert a control

1
apps/docs/src/pages/en/page-2.md
View file

@ -56,7 +56,6 @@ form.controls.push(
type: "checkbox",
name: "is-awesome",
label: "is Awesome?",
labelPosition: "right",
})
);

1
packages/common/types/control.types.ts
View file

@ -33,7 +33,6 @@ export interface ControlBase {
type?: ControlType;
value?: string | number | string[];
label?: string;
labelPosition?: "right" | "left";
placeholder?: string;
validators?: string[]; // TODO: implement validator type
options?: string[] | ControlOption[];

1
packages/form/README.md
View file

@ -58,7 +58,6 @@ form.controls.push(
type: "checkbox",
name: "is-awesome",
label: "is Awesome?",
labelPosition: "right",
})
);

1
packages/form/components/Form.astro
View file

@ -57,3 +57,4 @@ const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
border-color: red;
}
</style>

4
packages/form/components/Label.astro
View file

@ -15,7 +15,7 @@ const isRequired: boolean = showValidationHints && validators.includes('validato
---
{
control.label && control.labelPosition === 'left' && (
control.label && control.type !== "checkbox" && (
<label for={control.name} data-validation-required={isRequired ? "true" : null}>
{control.label}
</label>
@ -25,7 +25,7 @@ const isRequired: boolean = showValidationHints && validators.includes('validato
<slot />
{
control.label && control.labelPosition === 'right' && (
control.label && control.type === "checkbox" && (
<label for={control.name} data-validation-required={isRequired ? "true" : null}>
{control.label}
</label>

1
packages/form/components/controls/Input.astro
View file

@ -36,7 +36,6 @@ const validatorAttributes: Record<string, string> = validators?.reduce((prev, va
checked={control.value === 'checked'}
placeholder={control.placeholder}
data-label={control.label}
data-label-position={control.labelPosition}
data-validator-haserrors={hasErrors.toString()}
readonly={readOnly || null}
disabled={(readOnly || null) && control.type === 'checkbox'}

1
packages/form/components/controls/TextArea.astro
View file

@ -32,7 +32,6 @@ const validatorAttributes: Record<string, string> = validators?.reduce((prev, va
rows={control?.rows ?? 3}
cols={control?.cols ?? 21}
data-label={control?.label}
data-label-position={control?.labelPosition}
readonly={readOnly || null}
{...validatorAttributes}
>

7
packages/form/core/form-control.ts
View file

@ -18,7 +18,6 @@ export class FormControl {
private _type: ControlType = 'text';
private _value?: string | number | null | string[] | ControlOption[];
private _label = '';
private _labelPosition?: 'right' | 'left' = 'left';
private _isValid = true;
private _isPristine = true;
private _placeholder: string | null = null;
@ -43,7 +42,6 @@ export class FormControl {
type = 'text',
value = null,
label = '',
labelPosition = 'left',
placeholder = null,
validators = [],
options = [],
@ -53,7 +51,6 @@ export class FormControl {
this._type = type;
this._value = value;
this._label = label;
this._labelPosition = labelPosition;
this._placeholder = placeholder;
this._validators = validators;
this._options = options;
@ -96,10 +93,6 @@ export class FormControl {
return this._label;
}
get labelPosition() {
return this._labelPosition;
}
get placeholder() {
return this._placeholder;
}

4
packages/form/test/Field.astro.test.js
View file

@ -17,7 +17,6 @@ describe('Field.astro test', () => {
control: {
label: expectedLabel,
name: 'username',
labelPosition: 'left',
},
showValidationHints: false,
};
@ -38,7 +37,6 @@ describe('Field.astro test', () => {
control: {
label: expectedLabel,
name: 'username',
labelPosition: 'left',
validators: ['validator-required'],
},
showValidationHints: true,
@ -60,7 +58,6 @@ describe('Field.astro test', () => {
control: {
label: 'FAKE LABEL',
name: 'username',
labelPosition: 'left',
validators: ['validator-required'],
errors: [
{
@ -88,7 +85,6 @@ describe('Field.astro test', () => {
control: {
label: expectedLabel,
name: 'username',
labelPosition: 'left',
validators: ['validator-required'],
},
readOnly: true,

1
packages/form/test/FieldSet.astro.test.js
View file

@ -10,7 +10,6 @@ describe('FieldSet.astro test', () => {
name: 'test',
label: 'Test',
type: 'text',
labelPosition: 'left',
};
beforeEach(() => {

1
packages/validator/README.md
View file

@ -62,7 +62,6 @@ form.controls.push(
type: "checkbox",
name: "is-awesome",
label: "is Awesome?",
labelPosition: "right",
})
);