Skip to content

Commit

Permalink
feat(field): add LyFieldDefaultOptions
Browse files Browse the repository at this point in the history
  • Loading branch information
@Enlcxx
Enlcxx committed Jul 19, 2021
1 parent 4faefeb commit 829bc2e
Show file tree
Hide file tree
Showing 3 changed files with 190 additions and 118 deletions.
180 changes: 100 additions & 80 deletions src/app/docs/components/field-demo/field-playground/field-playground.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,104 @@
<ly-radio-group [formControl]="appearance">
<span>Appearance:</span>
<ly-radio value="standard" checked>Standard</ly-radio>
<ly-radio value="outlined">Outlined</ly-radio>
<ly-radio value="filled">Filled</ly-radio>
</ly-radio-group>

<br />

formControl(password):
<ly-checkbox
[formControl]="isDisabled"
(change)="$event.checked ? password.disable() : password.enable()"
>Is disabled</ly-checkbox>
<ly-checkbox [formControl]="isReadonly">Is readonly</ly-checkbox>
<button ly-button color="primary" (click)="password.reset()" [disabled]="password.untouched">reset</button>
<ly-grid container [lyAlignItems]="'center'" [spacingX]="16">
<ly-grid item [col]="'6 12@XSmall'">
<ly-field fullWidth #_field [appearance]="appearance.value">
<input
lyNativeControl
placeholder="********"
[type]="hide ? 'password' : 'text'"
[formControl]="password"
[readonly]="isReadonly.value"
<div [class]="classes.exampleContainer">
<ly-radio-group [formControl]="appearance">
<span>Appearance:</span>
<ly-radio value="standard" checked>Standard</ly-radio>
<ly-radio value="outlined">Outlined</ly-radio>
<ly-radio value="filled">Filled</ly-radio>
</ly-radio-group>
<br />
<ly-radio-group [formControl]="color">
<span>Color:</span>
<ly-radio color="primary" value="primary" checked>Primary</ly-radio>
<ly-radio color="accent" value="accent">Accent</ly-radio>
<ly-radio color="warn" value="warn">Warn</ly-radio>
<ly-radio color="#00bcd4" value="#00bcd4">Cyan (#00bcd4)</ly-radio>
</ly-radio-group>
<ly-checkbox
[formControl]="isDisabled"
(change)="$event.checked ? password.disable() : password.enable()"
>Is disabled</ly-checkbox>
<ly-checkbox [formControl]="isReadonly">Is readonly</ly-checkbox>
<button ly-button color="primary" (click)="password.reset()" [disabled]="password.untouched">reset</button>
<ly-grid container [lyAlignItems]="'center'" [spacingX]="16">
<ly-grid item [col]="'6 12@XSmall'">
<ly-field #_field
[appearance]="appearance.value"
[lyWidth]="1"
[color]="color.value"
>
<ly-label>Enter your password</ly-label>
<button ly-button
appearance="icon"
lySuffix
(click)="hide = !hide"
[disabled]="isDisabled.value"
[color]="_field.errorState ? 'warn' : 'text'"
<input
lyNativeControl
placeholder="********"
[type]="hide ? 'password' : 'text'"
[formControl]="password"
[readonly]="isReadonly.value"
>
<ly-label>Enter your password</ly-label>
<button ly-button
appearance="icon"
lySuffix
(click)="hide = !hide"
[disabled]="isDisabled.value"
[color]="_field.errorState ? 'warn' : 'text'"
>
<ly-icon>{{ hide ? 'visibility' : 'visibility_off' }}</ly-icon>
</button>
<ly-hint>Hint</ly-hint>
<ly-hint [align]="'after'">{{ password.value?.length || 0 }}</ly-hint>
<ly-error *ngIf="password.hasError('minlength')">Min 8 characters</ly-error>
<ly-error *ngIf="password.hasError('required')">Required</ly-error>
</ly-field>
</ly-grid>

<ly-grid item [col]="'6 12@XSmall'">
<ly-field [lyWidth]="1" [appearance]="appearance.value" [color]="color.value">
<ly-label>Clearable</ly-label>
<input #_input
lyNativeControl
[value]="'Text'"
[disabled]="isDisabled.value"
placeholder="Placeholder"
type="text"
maxlength="10"
>
<ly-hint>Hint</ly-hint>
<ly-hint [align]="'after'">{{ _input.value?.length || 0 }}/10</ly-hint>
<button ly-button
*ngIf="_input.value"
appearance="icon"
lySuffix
(click)="_input.value = ''"
>
<ly-icon>close</ly-icon>
</button>
</ly-field>
</ly-grid>

<ly-grid item [col]="'6 12@XSmall'">
<ly-field
[lyWidth]="1"
[appearance]="appearance.value"
[color]="color.value"
>
<ly-icon>{{ hide ? 'visibility' : 'visibility_off' }}</ly-icon>
</button>
<ly-hint>Hint</ly-hint>
<ly-hint [align]="'after'">{{ password.value?.length || 0 }}</ly-hint>
<ly-error *ngIf="password.hasError('minlength')">Min 8 characters</ly-error>
<ly-error *ngIf="password.hasError('required')">Required</ly-error>
</ly-field>
</ly-grid>

<ly-grid item [col]="'6 12@XSmall'">
<ly-field fullWidth [appearance]="appearance.value">
<ly-label>Clearable</ly-label>
<input #_input
lyNativeControl
[value]="'Text'"
placeholder="Placeholder"
type="text"
maxlength="10"
>
<ly-hint>Hint</ly-hint>
<ly-hint [align]="'after'">{{ _input.value?.length || 0 }}/10</ly-hint>
<button ly-button
*ngIf="_input.value"
appearance="icon"
lySuffix
(click)="_input.value = ''"
<ly-label>Label</ly-label>
<ly-placeholder>Placeholder</ly-placeholder>
<textarea lyNativeControl [disabled]="isDisabled.value"></textarea>
<ly-hint>Hint</ly-hint>
</ly-field>
</ly-grid>

<ly-grid item [col]="'6 12@XSmall'">
<ly-field
[appearance]="appearance.value"
floatingLabel
[lyMaxWidth]="125"
[color]="color.value"
>
<ly-icon>close</ly-icon>
</button>
</ly-field>
</ly-grid>

<ly-grid item [col]="'6 12@XSmall'">
<ly-field fullWidth [appearance]="appearance.value">
<ly-label>Label</ly-label>
<ly-placeholder>Placeholder</ly-placeholder>
<textarea lyNativeControl></textarea>
<ly-hint>Hint</ly-hint>
</ly-field>
</ly-grid>

<ly-grid item [col]="'6 12@XSmall'">
<ly-field [appearance]="appearance.value" floatingLabel style="max-width: 125px">
<ly-label>Price</ly-label>
<span>$&nbsp;</span>
<input lyNativeControl type="number" [value]="10">
<ly-hint>Hint</ly-hint>
</ly-field>
<ly-label>Price</ly-label>
<span>$&nbsp;</span>
<input lyNativeControl type="number" [value]="10" [disabled]="isDisabled.value">
<ly-hint>Hint</ly-hint>
</ly-field>
</ly-grid>
</ly-grid>
</ly-grid>
</div>
29 changes: 28 additions & 1 deletion src/app/docs/components/field-demo/field-playground/field-playground.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,42 @@
import { lyl, StyleRenderer, ThemeRef, ThemeVariables } from '@alyle/ui';
import { STYLES as RADIO_STYLES } from '@alyle/ui/radio';
import { STYLES as CHECKBOX_STYLES } from '@alyle/ui/checkbox';
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

export const STYLES = (_: ThemeVariables, ref: ThemeRef) => {
const radio = ref.renderStyleSheet(RADIO_STYLES);
const checkbox = ref.renderStyleSheet(CHECKBOX_STYLES);
return {
exampleContainer: lyl `{
> * {
margin: 8px 0
}
.${radio.radio},
.${checkbox.root} {
margin: 0 12px
}
}`
};
};

@Component({
selector: 'aui-field-playground',
templateUrl: './field-playground.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
StyleRenderer
]
})
export class FieldPlaygroundComponent {
readonly classes = this.sRenderer.renderSheet(STYLES);
hide = true;
appearance = new FormControl();
color = new FormControl('primary');
isReadonly = new FormControl();
isDisabled = new FormControl();
password = new FormControl('', [Validators.required, Validators.minLength(8)]);
constructor(
readonly sRenderer: StyleRenderer
) { }
}
99 changes: 62 additions & 37 deletions src/lib/field/field.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ import {
HostBinding,
Optional,
Self,
DoCheck
DoCheck,
InjectionToken,
Inject,
} from '@angular/core';
import {
LyTheme2,
Expand Down Expand Up @@ -70,6 +72,25 @@ export interface LyFieldVariables {
field?: LyFieldTheme;
}

export interface LyFieldDefaultOptions {
appearance?: string;
/**
* Whether the label is floating.
* false (default): The label will only float when needed
* true: The label will always be floating
*/
floatingLabel?: boolean;
/**
* Whether the hint will always show.
* false (default): The hint will only be shown when the text is focused
* true: The hint will always show
*/
persistentHint?: boolean;
}

export const LY_FIELD_DEFAULT_OPTIONS =
new InjectionToken<LyFieldDefaultOptions>('LY_FIELD_DEFAULT_OPTIONS')

/** LyField */
const STYLE_PRIORITY = -2;
const DEFAULT_APPEARANCE = 'standard';
Expand Down Expand Up @@ -486,47 +507,43 @@ export class LyField implements WithStyles, OnInit, AfterContentInit, AfterViewI

/** Theme color for the component. */
@Input()
set color(val: string) {
if (val !== this._color) {
this._color = val;
this._colorClass = this._theme.addStyle(`ly-field.color:${val}`, (theme: ThemeVariables) => {
const color = theme.colorOf(val);
const contrast = theme.colorOf(`${val}:contrast`);
return {
[`&.${this.classes.focused} .${this.classes.container}:after, &{focused}{selectArrow} {infix}:after`]: {
color
},
[`&.${this.classes.focused} .${this.classes.fieldset}`]: {
borderColor: color
},
[`&.${this.classes.focused} .${this.classes.label}`]: {
color
},
[`& .${this.classes.inputNative}`]: {
caretColor: color
},
'& {inputNative}::selection': {
backgroundColor: color,
color: contrast
},
'& {inputNative}::-moz-selection': {
backgroundColor: color,
color: contrast
}
};
}, this._el.nativeElement, this._colorClass, STYLE_PRIORITY + 1, STYLES);
@Style<string>(
val => (theme: ThemeVariables, ref) => {
const classes = ref.selectorsOf(STYLES);
const color = theme.colorOf(val);
const contrast = theme.colorOf(`${val}:contrast`);
return lyl `{
&${classes.focused} ${classes.container}:after,
&${classes.focused}${classes.selectArrow} ${classes.infix}:after {
color: ${color}
}
&${classes.focused} ${classes.fieldset} {
border-color: ${color}
}
&${classes.focused} ${classes.label} {
color: ${color}
}
& ${classes.inputNative} {
caret-color: ${color}
}
& ${classes.inputNative}::selection {
background-color: ${color}
color: ${contrast}
}
& ${classes.inputNative}::-moz-selection {
background-color: ${color}
color: ${contrast}
}
}`;
}
}
get color() {
return this._color;
}
) color: string;

/** The field appearance style. */
@Input()
@Style<string | null>(
val => (theme: LyFieldVariables, ref) => {
const classes = ref.selectorsOf(STYLES);
if (theme.field && theme.field.appearance) {
if (theme.field?.appearance) {
const appearance = theme.field.appearance[val];
if (appearance) {
return appearance instanceof StyleCollection
Expand Down Expand Up @@ -555,7 +572,9 @@ export class LyField implements WithStyles, OnInit, AfterContentInit, AfterViewI
private _cd: ChangeDetectorRef,
private _ngZone: NgZone,
readonly sRenderer: StyleRenderer,
private _platform: Platform
private _platform: Platform,
@Optional() @Inject(LY_FIELD_DEFAULT_OPTIONS)
private _defaults: LyFieldDefaultOptions
) {
_renderer.addClass(_el.nativeElement, this.classes.root);
}
Expand All @@ -565,7 +584,13 @@ export class LyField implements WithStyles, OnInit, AfterContentInit, AfterViewI
this.color = DEFAULT_WITH_COLOR;
}
if (!this.appearance) {
this.appearance = DEFAULT_APPEARANCE;
this.appearance = this._defaults?.appearance ? this._defaults?.appearance : DEFAULT_APPEARANCE;
}
if (!this.persistentHint) {
this.persistentHint = (this._defaults?.persistentHint != null) ? this._defaults.persistentHint : false;
}
if (!this.floatingLabel) {
this.persistentHint = (this._defaults?.floatingLabel != null) ? this._defaults.floatingLabel : false;
}
}

Expand Down

0 comments on commit 829bc2e

Please sign in to comment.