j-Editable

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Este componente pode editar todos os elementos com a classe editable. Ele funciona com valores de data-bind ou dinâmicos.

Configuração:

autofocus {Boolean} concentra-se no primeiro item (default: false)
validate {Boolean} pode desativar a validação (default: true)
disabled {Boolean} pode desativar a edição (addiciona classes de ui-editable-disabled e ui-editable-enabled), padrão: false
changed {String} opcional, um link para um método ou caminho --> contém o objeto com valores alterados apenas
enter {String} opcional, um link para um método method(path, value, el), o método é executado se o usuário pressionar ENTER
escape {String} opcional, um link para um método method(path, value, el), o método é executado se o usuário pressionar ESC
can {String} opcional, um link para o método method(opt, el) deve retornar boolean, isto significa can edit?
error {String} opcional, um link para o método method(el, isInvalid, meta) é avaliado quando o item é inválido e vice-versa
NEW class {String} opcional, adiciona um nome de classe no formulário ui-editable-CLASS (default: default)

O atributo data-editable descreve o comportamento:

path {String} um caminho relativo para a propriedade (pode ser herdado de data-bind automaticamente)
required {Boolean} opcional, permite "requisito" (default: false)
type {String} opcional, pode ser string (default), date, number, boolean, email ou html NEW tags
can {String} opcional, um caminho para function(opt, el) deve retornar boolean, isto significa can edit?
save {String} opcional, um caminho para function(opt, accepted(boolean)), a função accepted deve ser avaliada
format {String} opcional, um formato para date, padrão: yyyy-MM-dd
dirsource {String} opcional, caminho para uma fonte de dados
dircustom {String/Boolean} opcional, pode conter um caminho para function(val, next(new_val)) ou pode ser Boolean. esta opção pode permitir adicionar um valor personalizado (valor não definido na fonte de dados)
dirrender {String} opcional, um caminho para function(item, text) (deve retornar HTML para j-Directory), esta função pode afetar a lista de itens em j-Directory
dirminwidth {Número} opcional, uma largura mínima para j-Directory, padrão: 200
dirmaxwidth {Número} opcional, uma largura máxima para j-Directory
dirplaceholder {String} opcional, um locatário para j-Directory
dirempty {String} opcional, adiciona um campo vazio para j-Directory
dirkey {String} opcional, um nome chave para a leitura de text em dirsource (default: name)
dirvalue {String} opcional, um nome chave para a leitura de value em dirsource (default: id)
dirsearch {Boolean} opcional, pode desativar a pesquisa para j-Directory
autosource {String} um caminho para a função search em autocomplete, function(search, render(arr))
autovalue {String} um caminho de propriedade para o valor em autosource
maxlength {Número} um máximo
minvalue {Número} um valor mínimo para o tipo de número (default: undefined)
maxvalue {Número} um valor máximo para o tipo de número (default: undefined)
rebind {Boolean} se o true refuta data-bind apenas a este elemento (default: 0)
validate {String} opcional, uma condição para validação de valor, pode conter um link para function(value) ou !!value.match(/[a-z]+/)
multiline {Boolean} opcional, permite multiline + apendices classe editable-multiline (inline-block + width:100%) quando é edição (default: false)
raw {Boolean} opcional, quando true então o conteúdo HTML atual será como um local se o valor é nullable (default: true)
accept {String} opcional, uma condição de aceitação de valor, pode conter um link para function(value) ou !!value.match(/[a-z]+/) é semelhante a validate
empty {String} opcional, permite um valor vazio e pode conter um rótulo vazio ou 1 ou true para o auto rebind de ligação
invalid {String} opcional, um link para o método method(el, isInvalid, meta) é avaliado quando o item é inválido e vice-versa

Métodos:

NEW: component.changed() retorna um objeto com dados alterados

Bom para saber:

Se o usuário pressionar algum key, então o elemento editável contém a classe keypressed enquanto eles não deixam o controle.
Cada elemento alterado contém uma classe de changed
Se o componente alterar alguns valores, o elemento principal contém a classe ui-editable-changed
Se o elemento tiver data-bind com empty, ele será limpo após foco
NEW agora suporta o tipo tags. atualmente só suporta com rebind e data-bind. (data-bind template com {jQuery selector} trabalha de +v18)
NEW se o elemento ( ou pai, ou pai de pai) contém o atributo data-disabled="1", o controle será desativado
NEW elementos ocultos e desativados não serão validados

Use-o com <ui-component name="editable">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.

example.html

<style>
	.changed {}
	.changed::after { float: right; content: '+'; margin-left: 5px; font-weight: normal; color: orange; }
</style>

<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY directory"></ui-component>

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

		<div class="row">
			<div class="col-xs-3">
				Name:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.name" config="html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Email:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.email" config="html" class="editable block" data-editable="required:1;type:email"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Nickname:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.nickname" config="empty:Nickname;html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Framework:
			</div>
			<div class="col-xs-9">
				<ui-bind class="editable block" config="html;empty:Choose a framework;change:renderframework" path="form.frameworkid" data-editable="dirsource:frameworks;"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Country:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.countries" config="template:{#countrytags}" class="editable block" data-editable="rebind:1;dirsource:countries;type:tags"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Date:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.date" config="html:(new Date() || value).format('yyyy-MM-dd')" class="editable block" data-editable="type:date"></ui-bind>
			</div>
		</div>
	</div>
	<pre><ui-bind path="form" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-component>

<script type="text/html" id="countrytags">
	{{ foreach m in value }}<span class="editable-tag"><i class="ti ti-times"></i>{{ m }}</span>{{ end }}
</script>


<script>

	// Alternative to tags (ui-bind path="path" config="change:myfunc")
	function myfunc(data, path, el) {
		if (!data)
			return el.html('');
		var template = '<span class="tag"><i class="ti ti-times"></i>{0}</span>';
		var html = '';
		for (var i = 0; i < data.length; i++)
			html += template.format(data[i]);
		el.html(html);
	}

	var frameworks = [{ id: 0, name: 'Nothing', template: '<b>{{ name }}</b>' }, { id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var countries = ['Slovakia', 'Poland', 'Hungary', 'Germany', 'USA', 'Austria', 'Poland', 'Czechia'];
	var form = {};
	form.date = new Date();
	form.name = 'Peter Širka';
	form.countries = ['Slovakia', 'Hungary'];
	form.frameworkid = 0;

	function renderframework(value, path, el) {
		return value ? frameworks.findValue('id', value, 'name', DEF.empty) : DEF.empty;
	}

</script>