David/meilisearch-admin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactored form components

Browse source
This commit is contained in:
Stanislav Romanov 2022-09-02 12:50:33 +03:00
parent 88274e9a89
commit a2309bb624
4 changed files with 37 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/components/form/element.hbs
View file

@ -1,7 +1,11 @@
<div class="mb-4">
<div class='mb-4'>
{{#if @label}}
<label for={{@for}} class="block font-medium mb-1 text-dark {{if @required "after:content-['*'] after:text-red-500"}}">
{{~ @label ~}}
<label
for={{@for}}
class='block font-medium mb-1 text-dark
{{if @required "after:content-['*'] after:text-red-500"}}'
>
{{~@label~}}
</label>
{{/if}}
@ -12,7 +16,7 @@
{{/if}}
{{#if @helper}}
<div class="mt-1 text-sm">
<div class='mt-1 text-sm'>
{{@helper}}
</div>
{{/if}}

27
app/components/form/input.hbs
View file

@ -1,27 +1,22 @@
<div class="mb-4">
{{#if @label}}
<label for={{this.id}} class="block font-medium mb-1 text-dark {{if @required "after:content-['*'] after:text-red-500"}}">
{{~@label~}}
</label>
{{/if}}
<div class="relative flex items-center border rounded-md">
<Form::Element
@label={{@label}}
@for={{this.id}}
@required={{@required}}
@helper={{@helper}}
>
<div class='relative flex items-center border rounded-md'>
{{#if @prefixIcon}}
<@prefixIcon class="h-8 w-8 pl-2" />
<@prefixIcon class='h-8 w-8 pl-2' />
{{/if}}
<input
type="text"
type='text'
name={{@name}}
id={{this.id}}
class="block w-full p-2 bg-transparent focus:outline-none"
class='block w-full p-2 bg-transparent focus:outline-none'
placeholder={{@placeholder}}
value={{@value}}
required={{@required}}
{{on 'input' this.onChange}}
/>
</div>
{{#if @helper}}
<div class="mt-1 text-sm">
{{@helper}}
</div>
{{/if}}
</div>
</Form::Element>

42
app/components/form/textarea.hbs
View file

@ -1,26 +1,16 @@
<div class='mb-4'>
{{#if @label}}
<label for={{this.id}} class='block font-medium mb-1 text-dark'>
{{@label}}
</label>
{{/if}}
<div class='relative flex items-center border rounded-md'>
{{#if @prefixIcon}}
<@prefixIcon class='h-8 w-8 pl-2' />
{{/if}}
<Textarea
type='text'
name={{@name}}
id={{this.id}}
class='block w-full p-2 bg-transparent focus:outline-none'
placeholder={{@placeholder}}
@value={{@value}}
{{on 'change' this.onChange}}
/>
</div>
{{#if @helper}}
<div class='mt-1 text-sm'>
{{@helper}}
</div>
{{/if}}
</div>
<Form::Element
@label={{@label}}
@for={{this.id}}
@required={{@required}}
@helper={{@helper}}
>
<Textarea
type='text'
name={{@name}}
id={{this.id}}
class='block w-full p-2 bg-transparent border rounded-md focus:outline-none'
placeholder={{@placeholder}}
@value={{@value}}
{{on 'change' this.onChange}}
/>
</Form::Element>

21
app/components/form/textarea.js
View file

@ -1,20 +1,3 @@
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { action } from '@ember/object';
import FormInputComponent from './input';
export default class FormTextareaComponent extends Component {
get guid() {
return guidFor(this);
}
get id() {
return this.args.id ?? this.guid;
}
@action
onChange(event) {
if (this.args.onChange) {
this.args.onChange(event.target.value, event);
}
}
}
export default class FormTextareaComponent extends FormInputComponent {}