# j-Edit

> O componente permite um atributo editável de conteúdo para os elementos com classes edit ou edit2.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pt
Content-SHA256: 19f04ad8e970dc47f76b631b1273a90da5b417cd5cc4cde684a67e2c780d4c12
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

O componente permite o atributo de `contenteditable` para elementos com classes de `edit` ou `edit2`.

- Singularidade
- Apresentação do elemento `<body` como o `j-Directory` ou o `j-DatePicker`.

__Bom para saber__:

- Cada elemento com a classe `edit` é possível editar com um único clique
- Cada elemento com a classe `edit2` é possível editar com um duplo clique

__Configuração__:

- `dateformat {String}` um formato padrão para datas de parcelamento (default: `yyyy-MM-dd`)
- `exec {String}` opcional, um caminho padrão para `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` opcional, pode permitir o fluxo por padrão (default: `false`)
- `minwidth {Number}` opcional, uma min largura
- `offsetX {Number}` opcional, X offset
- `offsetY {Number}` opcional, Y offset

---

O `data-edit` suporta:

- `required {Boolean}` opcional, permite o "requisito" (default: `false`)
- `type {String}` opcional, pode ser `string` (defeitualmente em `date`, `number`, `boolean`, `email`, `url`ou `html`
- `check {String}` opcional, um caminho para `function(opt, el)` deve retornar `boolean`, isto significa `Can the user edit that field?`
- `exec {String}` opcional, um caminho para `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` opcional, um formato para `date`, padrão: `yyyy-MM-dd`
- `maxlength {Number}` a extensão máxima
- `minvalue {Number}` a min. valor para o tipo de número (default: `undefined`)
- `maxvalue {Number}` um valor máximo para o tipo de número (default: `undefined`)
- `bind {Boolean}` se o `true` refuta `data-bind` apenas a este elemento (default: `true`)
- `multiline {Boolean}` opcional, permite multilina + aplicação classe `editable-multiline` (`inline-block` + `width:100%`) quando é editado (default: `false`)
- `floating {Boolean/String}` opcional, permite a janela flutuante para o elemento (default: `false`, `string` pode conter valores de `position` ou `offset`)
- `offsetX {Number}` opcional, adicional X offset para a janela flutuante
- `offsetY {Number}` opcional, offset Y adicional para a janela flutuante
- `offsetWidth {Number}` opcional, largura adicional para a janela flutuante
- `width {Number}` opcional, uma largura fixa para o painel flutuante
- `parent {String}` opcional, um seletor para obter offset (pode conter o seletore `parent` ou jQuery para o método `.closest()`)
- `selectall {Boolean}` opcional, seleciona todo o texto
- `cursor {String}` opcional, uma posição de cursor `beg` ou `end` (default)
- `notify {String}` opcional, um caminho para `function(opt)` que será notificado após a mudança bem sucedida
- `prevent {Boolean}` opcional, executa `.preventDefault()` e `.stopPropagation()` no evento de clique
- `align {String}` opcional, estabelece um valeu para a propriedade alinhada ao texto para o modo de flutuante apenas
- `focus {String}` opcional, um link para o `function(opt, el)` quando focado
- `blur {String}` opcional, um link para o `function(opt, el)`, quando é blurrado
- __NEW__: `attr {String}` opcional, um nome `data-{attr}` para obter o valor não formátado

__Bom para saber__:

- `opt.set(value)` pode ser usado para atribuir um valor

Use-o com `<ui-component name="edit">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

```html example.html
<ui-component name="edit"></ui-component>

<ui-plugin path="form" style="width:500px;padding:10px;border:1px solid #E0E0E0">

	<div class="row m">
		<div class="col-xs-3">
			Name:
		</div>
		<div class="col-xs-9">
			<ui-bind class="edit2 block" data-edit="required:1;floating:1" path="?.name" config="html" style="height:24px;background-color:#E0E0E0"></ui-bind>
		</div>
	</div>
	<div class="row m">
		<div class="col-xs-3">
			Email:
		</div>
		<div class="col-xs-9">
			<div class="edit" data-edit="required:1;type:email;exec:save_email" style="height:24px;background-color:#E0E0E0">@</div>
		</div>
	</div>
	<div class="row m">
		<div class="col-xs-3">
			HTML:
		</div>
		<div class="col-xs-9">
			<ui-bind  class="edit block" data-edit="multiline:1;floating:1;type:html" path="form.html" config="html" style="min-height:24px;background-color:#E0E0E0"></ui-bind>
		</div>
	</div>
	<pre><ui-bind path="?" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-plugin>

<script>

	function save_email(opt, next) {
		SET('form.email', opt.value);
		// next(true);
		// next(false) OR next(null) cancels the change
		next(opt.value.toUpperCase());
	}

	var form = {};
	form.html = '<b>Hello world!</b>';
	form.name = 'UI components';

</script>
```