refactor(form): deprecate labelPosition (#172)
This commit is contained in:
parent
f93f8b6484
commit
b4c33eec66
12 changed files with 3 additions and 21 deletions
|
@ -62,7 +62,6 @@ const config: ControlConfig = {
|
||||||
type: "checkbox",
|
type: "checkbox",
|
||||||
name: "is-awesome",
|
name: "is-awesome",
|
||||||
label: "is Awesome?",
|
label: "is Awesome?",
|
||||||
labelPosition: "right",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// insert a control
|
// insert a control
|
||||||
|
|
|
@ -56,7 +56,6 @@ form.controls.push(
|
||||||
type: "checkbox",
|
type: "checkbox",
|
||||||
name: "is-awesome",
|
name: "is-awesome",
|
||||||
label: "is Awesome?",
|
label: "is Awesome?",
|
||||||
labelPosition: "right",
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -33,7 +33,6 @@ export interface ControlBase {
|
||||||
type?: ControlType;
|
type?: ControlType;
|
||||||
value?: string | number | string[];
|
value?: string | number | string[];
|
||||||
label?: string;
|
label?: string;
|
||||||
labelPosition?: "right" | "left";
|
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
validators?: string[]; // TODO: implement validator type
|
validators?: string[]; // TODO: implement validator type
|
||||||
options?: string[] | ControlOption[];
|
options?: string[] | ControlOption[];
|
||||||
|
|
|
@ -58,7 +58,6 @@ form.controls.push(
|
||||||
type: "checkbox",
|
type: "checkbox",
|
||||||
name: "is-awesome",
|
name: "is-awesome",
|
||||||
label: "is Awesome?",
|
label: "is Awesome?",
|
||||||
labelPosition: "right",
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -57,3 +57,4 @@ const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
|
||||||
border-color: red;
|
border-color: red;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -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}>
|
<label for={control.name} data-validation-required={isRequired ? "true" : null}>
|
||||||
{control.label}
|
{control.label}
|
||||||
</label>
|
</label>
|
||||||
|
@ -25,7 +25,7 @@ const isRequired: boolean = showValidationHints && validators.includes('validato
|
||||||
<slot />
|
<slot />
|
||||||
|
|
||||||
{
|
{
|
||||||
control.label && control.labelPosition === 'right' && (
|
control.label && control.type === "checkbox" && (
|
||||||
<label for={control.name} data-validation-required={isRequired ? "true" : null}>
|
<label for={control.name} data-validation-required={isRequired ? "true" : null}>
|
||||||
{control.label}
|
{control.label}
|
||||||
</label>
|
</label>
|
||||||
|
|
|
@ -36,7 +36,6 @@ const validatorAttributes: Record<string, string> = validators?.reduce((prev, va
|
||||||
checked={control.value === 'checked'}
|
checked={control.value === 'checked'}
|
||||||
placeholder={control.placeholder}
|
placeholder={control.placeholder}
|
||||||
data-label={control.label}
|
data-label={control.label}
|
||||||
data-label-position={control.labelPosition}
|
|
||||||
data-validator-haserrors={hasErrors.toString()}
|
data-validator-haserrors={hasErrors.toString()}
|
||||||
readonly={readOnly || null}
|
readonly={readOnly || null}
|
||||||
disabled={(readOnly || null) && control.type === 'checkbox'}
|
disabled={(readOnly || null) && control.type === 'checkbox'}
|
||||||
|
|
|
@ -32,7 +32,6 @@ const validatorAttributes: Record<string, string> = validators?.reduce((prev, va
|
||||||
rows={control?.rows ?? 3}
|
rows={control?.rows ?? 3}
|
||||||
cols={control?.cols ?? 21}
|
cols={control?.cols ?? 21}
|
||||||
data-label={control?.label}
|
data-label={control?.label}
|
||||||
data-label-position={control?.labelPosition}
|
|
||||||
readonly={readOnly || null}
|
readonly={readOnly || null}
|
||||||
{...validatorAttributes}
|
{...validatorAttributes}
|
||||||
>
|
>
|
||||||
|
|
|
@ -18,7 +18,6 @@ export class FormControl {
|
||||||
private _type: ControlType = 'text';
|
private _type: ControlType = 'text';
|
||||||
private _value?: string | number | null | string[] | ControlOption[];
|
private _value?: string | number | null | string[] | ControlOption[];
|
||||||
private _label = '';
|
private _label = '';
|
||||||
private _labelPosition?: 'right' | 'left' = 'left';
|
|
||||||
private _isValid = true;
|
private _isValid = true;
|
||||||
private _isPristine = true;
|
private _isPristine = true;
|
||||||
private _placeholder: string | null = null;
|
private _placeholder: string | null = null;
|
||||||
|
@ -43,7 +42,6 @@ export class FormControl {
|
||||||
type = 'text',
|
type = 'text',
|
||||||
value = null,
|
value = null,
|
||||||
label = '',
|
label = '',
|
||||||
labelPosition = 'left',
|
|
||||||
placeholder = null,
|
placeholder = null,
|
||||||
validators = [],
|
validators = [],
|
||||||
options = [],
|
options = [],
|
||||||
|
@ -53,7 +51,6 @@ export class FormControl {
|
||||||
this._type = type;
|
this._type = type;
|
||||||
this._value = value;
|
this._value = value;
|
||||||
this._label = label;
|
this._label = label;
|
||||||
this._labelPosition = labelPosition;
|
|
||||||
this._placeholder = placeholder;
|
this._placeholder = placeholder;
|
||||||
this._validators = validators;
|
this._validators = validators;
|
||||||
this._options = options;
|
this._options = options;
|
||||||
|
@ -96,10 +93,6 @@ export class FormControl {
|
||||||
return this._label;
|
return this._label;
|
||||||
}
|
}
|
||||||
|
|
||||||
get labelPosition() {
|
|
||||||
return this._labelPosition;
|
|
||||||
}
|
|
||||||
|
|
||||||
get placeholder() {
|
get placeholder() {
|
||||||
return this._placeholder;
|
return this._placeholder;
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,7 +17,6 @@ describe('Field.astro test', () => {
|
||||||
control: {
|
control: {
|
||||||
label: expectedLabel,
|
label: expectedLabel,
|
||||||
name: 'username',
|
name: 'username',
|
||||||
labelPosition: 'left',
|
|
||||||
},
|
},
|
||||||
showValidationHints: false,
|
showValidationHints: false,
|
||||||
};
|
};
|
||||||
|
@ -38,7 +37,6 @@ describe('Field.astro test', () => {
|
||||||
control: {
|
control: {
|
||||||
label: expectedLabel,
|
label: expectedLabel,
|
||||||
name: 'username',
|
name: 'username',
|
||||||
labelPosition: 'left',
|
|
||||||
validators: ['validator-required'],
|
validators: ['validator-required'],
|
||||||
},
|
},
|
||||||
showValidationHints: true,
|
showValidationHints: true,
|
||||||
|
@ -60,7 +58,6 @@ describe('Field.astro test', () => {
|
||||||
control: {
|
control: {
|
||||||
label: 'FAKE LABEL',
|
label: 'FAKE LABEL',
|
||||||
name: 'username',
|
name: 'username',
|
||||||
labelPosition: 'left',
|
|
||||||
validators: ['validator-required'],
|
validators: ['validator-required'],
|
||||||
errors: [
|
errors: [
|
||||||
{
|
{
|
||||||
|
@ -88,7 +85,6 @@ describe('Field.astro test', () => {
|
||||||
control: {
|
control: {
|
||||||
label: expectedLabel,
|
label: expectedLabel,
|
||||||
name: 'username',
|
name: 'username',
|
||||||
labelPosition: 'left',
|
|
||||||
validators: ['validator-required'],
|
validators: ['validator-required'],
|
||||||
},
|
},
|
||||||
readOnly: true,
|
readOnly: true,
|
||||||
|
|
|
@ -10,7 +10,6 @@ describe('FieldSet.astro test', () => {
|
||||||
name: 'test',
|
name: 'test',
|
||||||
label: 'Test',
|
label: 'Test',
|
||||||
type: 'text',
|
type: 'text',
|
||||||
labelPosition: 'left',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
|
|
@ -62,7 +62,6 @@ form.controls.push(
|
||||||
type: "checkbox",
|
type: "checkbox",
|
||||||
name: "is-awesome",
|
name: "is-awesome",
|
||||||
label: "is Awesome?",
|
label: "is Awesome?",
|
||||||
labelPosition: "right",
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue