ngx inline editor
0.2.0-alpha.12
Siga -me para ser notificado sobre novos lançamentos.
NGX-Inline-Editor é uma biblioteca de angulares (versão 4+) que permite criar elementos editáveis. Essa técnica também é conhecida como clique para editar ou editar no local . É baseado em idéias de xeditável angular, que são desenvolvidas em AngularJs.
Basicamente, não depende de nenhuma biblioteca, exceto o próprio Angular4. Para temas, você pode precisar incluir o Twitter Bootstrap CSS.
Angular 4 agora está estável. Portanto, se encontrar erros usando este LIB, verifique se sua versão do Angular é compatível. A versão atual usada para desenvolver esta lib é o Angular4 ^4.0.0 .
npm i @qontu/ngx-inline-editor --save
dist/themes/bootstrap.css
Importar InlineEditorModule para os módulos do seu aplicativo:
import { InlineEditorModule } from '@qontu/ngx-inline-editor' ;
@ NgModule ( {
imports : [
InlineEditorModule
]
} ) Isso disponibiliza todos os componentes @qontu/ngx-inline-editor para uso em seus componentes do aplicativo.
Você pode encontrar um exemplo completo aqui
import { Component } from '@angular/core' ;
@ Component ( {
selector : 'my-component' ,
template : `
<div>
<inline-editor type="text" [(ngModel)]="editableText" (onSave)="saveEditable($event)" name="editableText1" size="8"></inline-editor>
</div>
<div>
<inline-editor type="password" [(ngModel)]="editablePassword" (onSave)="saveEditable($event)"></inline-editor>
</div>
<div>
<inline-editor type="textarea" [(ngModel)]="editableTextArea" (onSave)="saveEditable($event)"> </inline-editor>
</div>
<div>
<inline-editor type="select" [(ngModel)]="editableSelect" (onSave)="saveEditable($event)" [options]="editableSelectOptions"
value="valor"></inline-editor>
</div>`
} )
export class MyComponent {
title = 'My component!' ;
editableText = 'myText' ;
editablePassword = 'myPassword' ;
editableTextArea = 'Text in text area' ;
editableSelect = 2 ;
editableSelectOptions = [
{ value : 1 , text : 'status1' } ,
{ value : 2 , text : 'status2' } ,
{ value : 3 , text : 'status3' } ,
{ value : 4 , text : 'status4' }
] ;
saveEditable ( value ) {
//call to http service
console . log ( 'http.service: ' + value ) ;
} < inline-editor
type =" text "
[(ngModel)] =" editableText "
(onSave) =" saveEditable($event) "
name =" editableText1 "
size =" 8 "
disabled =" true "
min =" 1 "
max =" 8 "
pattern =" ^[a-zA-Z]{1,3} "
(onError) =" myHandleError() " > </ inline-editor >type [ string ] Especifica o elemento Tipo <input> a ser exibido.onSave [ event handler ] A expressão especificada será invocada sempre que o formulário for salvo por meio de um clique no botão Salvar. O argumento $event será o retorno do valor do envio de entrada.onError [ event handler ] A expressão especificada será invocada sempre que o formulário for salvo por meio de um clique no botão Salvar e um erro for provocado (Exemplo: o valor não está entre Min e Max).name [ string ] define o nome de um elemento <input> . O padrão é undefined .size [ number ] define a largura, nos caracteres, de um elemento <input> . O padrão é 8 .disabled [ boolean ] Se definido como true , um elemento de entrada desativado é inutilizável e não clicável. O padrão é false .min [ number ] O atributo Min especifica o valor mínimo para um elemento <input> . O padrão é 1 .max [ number ] O atributo max especifica o valor máximo para um elemento <input> . O padrão é Infinity . < inline-editor
type =" password "
[(ngModel)] =" editablePassword "
(onSave) =" saveEditable($event) "
name =" editablePassword "
size =" 8 "
disabled =" true "
min =" 1 "
max =" 8 "
(onError) =" myHandleError " > </ inline-editor >type [ string ] Especifica o elemento Tipo <input> a ser exibido.onSave [ event handler ] A expressão especificada será invocada sempre que o formulário for salvo por meio de um clique no botão Salvar. O argumento $event será o retorno do valor do envio de entrada.onError [ event handler ] A expressão especificada será invocada sempre que o formulário for salvo por meio de um clique no botão Salvar e um erro for provocado (Exemplo: o valor não está entre Min e Max).name [ string ] define o nome de um elemento <input> . O padrão é undefined .size [ number ] define a largura, nos caracteres, de um elemento <input> . O padrão é 8 .disabled [ boolean ] Se definido como true , um elemento de entrada desativado é inutilizável e não clicável. O padrão é false .min [ number ] O atributo Min especifica o valor mínimo para um elemento <input> . O padrão é 1 .max [ number ] O atributo max especifica o valor máximo para um elemento <input> . O padrão é Infinity . < inline-editor
type =" textarea "
[(ngModel)] =" editableTextArea "
(onSave) =" saveEditable($event) "
name =" editableTextArea "
size =" 8 "
disabled =" true "
cols =" 50 "
rows =" 4 "
min =" 1 "
max =" 8 "
(onError) =" myHandleError " > </ inline-editor >type [ string ] Especifica o elemento Tipo <input> a ser exibido.onSave [ event handler ] A expressão especificada será invocada sempre que o formulário for salvo por meio de um clique no botão Salvar. O argumento $event será o retorno do valor do envio de entrada.onError [ event handler ] A expressão especificada será invocada sempre que o formulário for salvo por meio de um clique no botão Salvar e um erro for provocado (Exemplo: o valor não está entre Min e Max).name [ string ] define o nome de um elemento <input> . O padrão é undefined .size [ number ] define a largura, nos caracteres, de um elemento <input> . O padrão é 8 .disabled [ boolean ] Se definido como true , um elemento de entrada desativado é inutilizável e não clicável. O padrão é false .cols [ number ] especifica a largura visível de uma área de texto. O padrão é 50 .rows [ number ] especifica a altura visível de uma área de texto. O padrão é 4 .min [ number ] O atributo Min especifica o valor mínimo para um elemento <input> . O padrão é 1 .max [ number ] O atributo max especifica o valor máximo para um elemento <input> . O padrão é Infinity . < inline-editor
type =" select "
[(ngModel)] =" editableSelect "
(onSave) =" saveEditable($event) "
name =" editableSelect "
disabled =" false "
[options] =" editableSelectOptions " > </ inline-editor >type [ string ] Especifica o elemento Tipo <input> a ser exibido.onSave [ event handler ] A expressão especificada será invocada sempre que o formulário for salvo por meio de um clique no botão Salvar. O argumento $event será o retorno do valor do envio de entrada.name [ string ] define o nome de um elemento <input> . O padrão é undefined .disabled [ boolean ] Se definido como true , um elemento de entrada desativado é inutilizável e não clicável. O padrão é false .options [ Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string } ] Matriz de itens para selecionar. Deve ser uma variedade de objetos com propriedades value e text . É possível configurar parâmetros de valor-chave usando um objeto que especifica esses campos e dados.Código TypeScript:
editableSelect = 2 ;
editableSelectOptions = [
{ value : 1 , text : 'status1' } ,
{ value : 2 , text : 'status2' } ,
{ value : 3 , text : 'status3' } ,
{ value : 4 , text : 'status4' }
] ;
saveEditable ( value ) {
//call to http server
console . log ( 'http.server: ' + value ) ;
} editableSelect [ number ] Especifica o valor do padrão da seleção.editableSelectOptions [ Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string } ] Especifica a matriz de itens para selecionar. Deve ser uma variedade de objetos com propriedades value e text . É possível configurar parâmetros de valor-chave usando um objeto que especifica esses campos e dados.Código TypeScript:
editableSelect = 2 ;
editableSelectOptionsConfiguration = {
data : [
{ id : 1 , field : 'status1' } ,
{ id : 2 , field : 'status2' } ,
{ id : 3 , field : 'status3' } ,
{ id : 4 , field : 'status4' }
] ,
value : 'id' ,
text : 'field'
}
saveEditable ( value ) {
//call to http server
console . log ( 'http.server: ' + value ) ;
} É possível configurar sub -níveis/filhos para gerar a seleção usando uma variedade de objetos chamados children .
Código TypeScript:
editableSelectOptionsTwoLevelsDefault = 1 ;
editableSelectOptionsTwoLevelsConfiguration = {
data : [
{
id : 1 , field : 'status1' ,
children : [
{ id : 5 , field : 'status1.1' } ,
{ id : 6 , field : 'status1.2' }
]
} ,
{ id : 2 , field : 'status2' } ,
{ id : 3 , field : 'status3' } ,
{
id : 4 , field : 'status4' ,
children : [ { id : 7 , field : 'status4.1' } ]
}
] ,
value : 'id' ,
text : 'field'
} 
< inline-editor
type =" text "
ngModel
empty =" My custom message "
(onSave) =" saveEditable($event) "
(onError) =" handleError "
name =" editableText1 "
size =" 8 "
min =" 3 "
max =" 5 " > </ inline-editor >
< inline-editor type =" select "
[(ngModel)] =" editableSelectDoesntExist "
(onSave) =" saveEditable($event) "
[options] =" editableSelectOptionsConfiguration " > </ inline-editor >empty [ string ] Especifica a mensagem padrão para exibir se não houver ngmodel para o componente. Se o tipo for select , o elemento selecionado padrão é o primeiro elemento da matriz options . O inline-editor possui o seguinte tema básico que você pode encontrar em dist/themes/bootstrap.css :
a . c-inline-editor {
text-decoration : none;
color : # 428bca ;
border-bottom : dashed 1 px # 428bca ;
cursor : pointer;
line-height : 2 ;
margin-right : 5 px ;
margin-left : 5 px ;
}
. c-inline-editor . editable-empty ,
. c-inline-editor . editable-empty : hover ,
. c-inline-editor . editable-empty : focus ,
. c-inline-editor . a . editable-empty ,
. c-inline-editor . a . editable-empty : hover ,
. c-inline-editor . a . editable-empty : focus {
font-style : italic;
color : # DD1144 ;
text-decoration : none;
}
. c-inline-editor . inlineEditForm {
display : inline-block;
white-space : nowrap;
margin : 0 ;
}
# inlineEditWrapper {
display : inline-block;
}
. c-inline-editor . inlineEditForm input ,
. c-inline-editor . select {
width : auto;
display : inline;
}
. c-inline-editor . inline-editor-button-group {
display : inline-block;
}
. c-inline-editor . editInvalid {
color : # a94442 ;
margin-bottom : 0 ;
}
. c-inline-editor . error {
border-color : # a94442 ;
}
[ hidden ]. c-inline-editor {
display : none;
} Exemplo usando a tabela angular2-Data (demonstração) 
Siga estas diretrizes ao relatar bugs e solicitações de recursos:
Obrigado pela compreensão!
Para gerar todos os arquivos *.js , *.js.map e *.d.ts :
npm run build
Para depurar:
npm run build:watch
Carlos Caballero - https://github.com/caballerog
Antonio Villena - https://github.com/xxxtonixxxx
A licença do MIT (consulte o arquivo de licença para o texto completo) -
