tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance input component layout with labels and improve styling

Browse Source
This commit is contained in:
ncoronel
2026-06-26 10:18:43 -03:00
parent f1a4f51695
commit 0d46172325
6 changed files with 146 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@@ -45,124 +45,150 @@
<hr class="section-divider" />
<div class="input-grid">
<app-input
type="search"
placeholder="Buscar producto"
[value]="textValue"
[maxlength]="24"
(valueChange)="textValue = $event"
>
Texto
</app-input>
<div class="input-field">
<label for="search-input">Texto</label>
<app-input
id="search-input"
type="search"
placeholder="Buscar producto"
[value]="textValue"
[maxlength]="24"
(valueChange)="textValue = $event"
/>
</div>
<app-input
type="number"
placeholder="0"
[value]="numberValue"
(valueChange)="numberValue = $event"
>
Numero
</app-input>
<div class="input-field">
<label for="number-input">Numero</label>
<app-input
id="number-input"
type="number"
placeholder="0"
[value]="numberValue"
(valueChange)="numberValue = $event"
/>
</div>
<app-input
type="email"
placeholder="mail@empresa.com"
[value]="email"
(valueChange)="email = $event"
>
Email
</app-input>
<div class="input-field">
<label for="email-input">Email</label>
<app-input
id="email-input"
type="email"
placeholder="mail@empresa.com"
[value]="email"
(valueChange)="email = $event"
/>
</div>
<app-input
type="user"
placeholder="Nombre de usuario"
[value]="user"
(valueChange)="user = $event"
>
Usuario
</app-input>
<div class="input-field">
<label for="user-input">Usuario</label>
<app-input
id="user-input"
type="user"
placeholder="Nombre de usuario"
[value]="user"
(valueChange)="user = $event"
/>
</div>
<app-input
type="password-toggle"
placeholder="********"
[value]="password"
(valueChange)="password = $event"
>
Password
</app-input>
<div class="input-field">
<label for="password-input">Password</label>
<app-input
id="password-input"
type="password-toggle"
placeholder="********"
[value]="password"
(valueChange)="password = $event"
/>
</div>
<app-input
type="date"
[value]="date"
(valueChange)="date = $event"
>
Fecha
</app-input>
<div class="input-field">
<label for="date-input">Fecha</label>
<app-input
id="date-input"
type="date"
[value]="date"
(valueChange)="date = $event"
/>
</div>
<app-input
type="period"
[value]="period"
(valueChange)="period = $event"
>
Periodo
</app-input>
<div class="input-field">
<label for="period-input">Periodo</label>
<app-input
id="period-input"
type="period"
[value]="period"
(valueChange)="period = $event"
/>
</div>
<app-input
type="currency"
placeholder="0"
[value]="amount"
(valueChange)="amount = $event"
>
Moneda
</app-input>
<div class="input-field">
<label for="amount-input">Moneda</label>
<app-input
id="amount-input"
type="currency"
placeholder="0"
[value]="amount"
(valueChange)="amount = $event"
/>
</div>
<app-input
type="percent"
placeholder="0"
[value]="percent"
(valueChange)="percent = $event"
>
Porcentaje
</app-input>
<div class="input-field">
<label for="percent-input">Porcentaje</label>
<app-input
id="percent-input"
type="percent"
placeholder="0"
[value]="percent"
(valueChange)="percent = $event"
/>
</div>
<app-input
placeholder="Campo deshabilitado"
[value]="disabledValue"
[disabled]="true"
>
Deshabilitado
</app-input>
<div class="input-field">
<label for="disabled-input">Deshabilitado</label>
<app-input
id="disabled-input"
placeholder="Campo deshabilitado"
[value]="disabledValue"
[disabled]="true"
/>
</div>
<app-input
type="editable"
[value]="editableValue"
[disabled]="editableDisabled"
(valueChange)="editableValue = $event"
(disabledChange)="editableDisabled = $event"
>
Editable
</app-input>
<div class="input-field">
<label for="editable-input">Editable</label>
<app-input
id="editable-input"
type="editable"
[value]="editableValue"
[disabled]="editableDisabled"
(valueChange)="editableValue = $event"
(disabledChange)="editableDisabled = $event"
/>
</div>
<app-input
type="email"
placeholder="mail@empresa.com"
[value]="invalidEmail"
[invalid]="true"
(valueChange)="invalidEmail = $event"
>
Invalido
</app-input>
<div class="input-field">
<label for="invalid-input">Invalido</label>
<app-input
id="invalid-input"
type="email"
placeholder="mail@empresa.com"
[value]="invalidEmail"
[invalid]="true"
(valueChange)="invalidEmail = $event"
/>
</div>
<div class="file-field">
<app-input
type="file"
accept=".pdf,.png,.jpg"
[fileName]="fileName"
[clearTrigger]="clearTrigger"
(fileChange)="onFileChange($event)"
>
Archivo
</app-input>
<div class="input-field">
<label for="file-input">Archivo</label>
<app-input
id="file-input"
type="file"
accept=".pdf,.png,.jpg"
[fileName]="fileName"
[clearTrigger]="clearTrigger"
(fileChange)="onFileChange($event)"
/>
</div>
<app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
</div>

5
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
View File

@@ -65,6 +65,11 @@ h1 {
gap: 1rem;
}
.input-field {
display: grid;
gap: 0;
}
.file-field {
display: grid;
gap: 0.75rem;