Componentes padronizados para EmberJS.
- Executar o comando
npm install talentrh-components
.
{{talent-input-mask
placeholder='CPF'
typeMask='cpf' // cep, cnpj, phone, date, datetime
unmasked=cpfUnmaked
value=cpfMasked}}
OU
{{talent-input-mask
placeholder='CPF'
mask='999.999.999-99'
unmasked=cpfUnmaked
value=cpfMasked}}
É possível passar um tipo predefinido ou informar a máscara manualmente.
Cria um DATATABLE com o model escolhido, com filtro e paginação. O componente {{data-table}} pode ser utilizado de duas formas: autoprocessamento, ou customizado. Veja os exemplos abaixo.
- columns: (String) Colunas do model que serão exibidas e/ou serão incluidas no filtro por texto
- columnNames: (String) Cabeçalhos a serem exibidos nas colunas da tabela
- viewRoute: (String) rota para onde o botão 'Ver' deverá apontar, no mesmo formato que se usaria em um link-to
- editRoute: (String) rota para onde o botão 'Editar' deverá apontar, no mesmo formato que se usaria em um link-to
- showDeleteButton: (Boolean) indica se deverá mostrar o botão 'Remover'. Padrão: true
- showActions: (Boolean) indica se deverá mostrar a coluna de ações sobre os models. Padrão: true
Obs: o size de colmuns e columnNames deve ser o mesmo. E.g. this.get('columns.length') === this.get('columnNames.length)
Nesta forma de utilização, basta informar todos os parâmetros
{{data-table modelName='accessProfile'
columns="title,defaultProfile,description,users"
columnNames="Título,Padrão,Descrição,Usuários neste perfil"
viewRoute='configuration.userProfile.show'
editRoute='configuration.userProfile.edit'
deleteButton=true
showActions=true}}
Nesta forma de utilização, deve-se obter o dataset ao final da declaração do componente (as |dataSet|) e então processar a tag de acordo com a customização desejada.
{{#data-table modelName='user'
columns='avatarUrl,firstName,lastName,professionalEmail,active,professionalPhone'
columnNames='Foto,Nome,Email,Status,Telefone'
showActions=true
as |dataSet|}}
{{#each dataSet as |data|}}
<tr>
<td><img src={{s3-url data.avatarUrl}} class="datatable-thumb" alt=""></td>
<td>{{data.firstName}} {{data.lastName}}</td>
<td>{{data.professionalEmail}}</td>
<td>{{if data.active 'Ativo' 'Inativo'}}</td>
<td>{{data.professionalPhone}}</td>
</tr>
{{/each}}
{{/data-table}}
<div class="form-group">
{{input-floating-label
class="form-control"
value=model.name}}
<label>Nome</label>
</div>
O componente é criado a partir de Ember.TextField portanto contém todas as propriedades do input normal, porém o input-floating-label deferencia-se fazendo o controle da label quando o input está vazio ou com conteúdo.
{{talent-input-cpf
placeholder='CPF'
value=model.cpf}}
required=true
disabled=true
onUpdateStatus='nomeDaAction'
Passar nome de uma action pela propriedade onUpdateStatus, a mesma será acionada pelo componente durante a digitação recebendo o tipo do campo e o status atual do componente (true ou false), sendo false caso o valor informado seja inválido e true caso seja válido.
updateStatus(inputType, status) {
this.set(inputType, status);
}
updateStatus(inputType, status) {
this.get('controller').set(inputType, status);
}
Neste exemplo de action, a mesma vai atualizar a propriedade com o nome inputType para o status atual do componente, permitindo saber se o valor do input é valido antes de submeter o form.
{{talent-input-cep
value=modelTest.cep
placeholder='CEP'}}
required=true
disabled=true
onUpdateStatus='nomeDaAction'
| Explicado no input CPF.buttonComplete=true
| Habilita botão de completar campos automaticamente, suportando atualmente: address, district e complement.
{{talent-input-cep
value=model.cep
address=model.address
district=model.district
complement=model.complement
buttonComplete=true
onUpdateStatus='updateStatus'
placeholder='CEP'}}
loadCity='nomeDaAction'
| Para o preenchimento automatico do campo CIDADE é necessário informar uma action para o componente, a mesma será acionada após clicar no botão de preencher automatico recebendo as informações da cidade ficando a critério do desenvolvedor a manipulação desses dados.
{{talent-input-cnpj
value=valuecnpj
placeholder='CNPJ'}}
required=true
disabled=true
onUpdateStatus='nomeDaAction'
| Explicado no input CNPJ.buttonComplete=true
| Habilita botão de completar campos automaticamente, suportando atualmente: name, address, district, zipcode, number, phone.
{{talent-input-cnpj
value=value
name=cnpjName
address=cnpjAddress
district=cnpjDistrict
zipcode=cnpjZipcode
number=cnpjNumber
phone=cnpjPhone
buttonComplete=true
onUpdateStatus='updateStatus'
placeholder='CNPJ'}}
loadCity='nomeDaAction'
| Para o preenchimento automatico do campo CIDADE é necessário informar uma action para o componente, a mesma será acionada após clicar no botão de preencher automatico recebendo as informações da cidade ficando a critério do desenvolvedor a manipulação desses dados.
{{talent-input-select2
modelName='city'
endpoint='/cities/ajax'
placeholder='Selecionar Cidade'
label='Cidade'
showProperties='id| - |name'
optional=true
selected=modelTest.city
startValue=modelTest.city.name}}
{{talent-input-select2
ajax=true
endpoint='/cities/ajax'
placeholder='Selecionar Cidade'
label='Cidade'
showProperties='id| - |name'
optional=true
selected=modelTest.city
startValue=modelTest.city.name}}
disabled=true
ajax=true
| Informa que o componente vai utilizar Ajax "puro" ao invés do Ember Data.modelName='nomeDoModel'
| Caso o componente esteja usando Ember Data, informar o nome do model.endpoint='/exemplo/cidades'
| Informar o endpoint o qual o componente buscará os registros.optional=true
| Exibe um "X" permitindo desselecionar o valor atual do select clicando no mesmo.startValue=modelTest.city.name
|showProperties='property'
| Informar a propriedade que será mostrada no select, pode ser usado o "|" para separar duas ou mais propriedades.onButtonNew='nomeDaAction'
| Caso essa propriedade for informada, aparecerá um botão ao lado do select que ao ser clicado invocará a action cujo nome foi passado no 'onButtonNew'. Utilizar esse recurso quando for necessario abrir um modal ou levar para outra tela para criar um novo registro.
{{talent-input-datetime
placeholder='Data inicial'
format='DD/MM/YYYY HH:mm'
value=datetimeValue}}
mask='99/99/9999 99:99'
| Permite informar uma máscara para o campoformatToDate=true
| Esta opção faz com que a data e/ou hora selecionada no input seja transformado de string para formato de data.
<div id="datepair-exemplo">
{{#talent-input-datepair
id="datepair-exemplo"
startDate=startDate
endDate=endDate
}}
<div class="col-md-6">
<div class="form-group">
{{input
value=startDate
class="form-control date start"}}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
{{input
value=endDate
class="form-control date end"}}
</div>
</div>
{{/talent-input-datepair}}
</div>
<div id="datepair-exemplo">
{{#talent-input-datepair
id="datepair-exemplo"
startTime=startTime
endTime=endTime
}}
<div class="col-md-6">
<div class="form-group">
{{input
value=startTime
class="form-control time start"}}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
{{input
value=endTime
class="form-control time end"}}
</div>
</div>
{{/talent-input-datepair}}
</div>
<div id="datepair-exemplo">
{{#talent-input-datepair
id="datepair-exemplo"
startDatetime=startDatetime
endDatetime=endDatetime
}}
<div class="col-md-6">
<div class="form-group">
{{input
value=startDatetime
class="form-control datetime start"}}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
{{input
value=endDatetime
class="form-control datetime end"}}
</div>
</div>
{{/talent-input-datepair}}
</div>
{{talent-input-phone
placeholder='Telefone'
value=modelExemplo.telefone}}
formatToNumber=true
| Esta opção faz com que o telefone presente no input seja transformado de string para formato de número.
{{talent-format-cep model.cep}}
{{talent-format-cnpj model.cnpj}}
{{talent-format-cpf model.cpf}}
{{talent-format-phone model.phone}}
- 1-
git clone
. - 2-
cd talentrh-components
. - 3- Instalar as dependência executando
npm install && bower install
. - 4- Remover comentario do método
isDevelopingAddon
em talentrh-components/index.js. - 5- Executar o comando
npm link
para gerar um link do módulo. - 6- No projeto em que será testado o addon, executar o comando
npm link talentrh-components
. - 7- No arquivo package.json do projeto em que será testado o addon, adicionar a dependência:
"talentrh-components": "*"
. - 8- Write your code.