# j-Input

> j-Input je multifunkční vstupní složka, která podporuje mnoho funkcí a je optimalizována pro každodenní použití. j-Textbox a j-DropdownPráce pouze s jComponent +v17.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: cs
Content-SHA256: 12f7ee23dae840db76470cee976ab86cb6f1f356d42a8155505bc3ac825bc06f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

_j-Input_ je multifunkční `input` komponent, který podporuje mnoho funkcí a je optimalizován pro každodenní použití. `j-Textbox` a `j-Dropdown`Práce pouze s jComponent `+v17`.


__Konfigurace__:

- `type {String}` volitelné hodnoty:
	- Prázdná hodnota znamená default `text`
	- `email`,
	- `multiline`
	- `checkbox`
	- `phone`
	- `password`
	- `zip`
	- `date` (potřebuje složku `datepicker`)
	- __NEW__: `datetime` (potřebuje složku `datepicker`)
	- `time` (potřebuje složku `timepicker`)
	- `color` (potřebuje složku `colorpicker`)
	- `icon` (potřebuje složku `faicons`)
	- `emoji` (potřebuje složku `emoji`)
	- `url`
	- `number`
	- `number2` (zrušený)
	- `search`
	- `lower`
	- `upper`
	- `slug`
	- `id`
	- Příslušenství: `radiobutton`
	- Příslušenství: `tags`
	- Příslušenství: `tags-lower`
	- Příslušenství: `tags-upper`
	- Příslušenství: `tags-id`
	- Příslušenství: `tags-email`
	- Příslušenství: `tags-slug`
	- Příslušenství: `tags-phone`
	- Příslušenství: `tags-url`
- `required {Boolean}` volitelně, umožňuje "potřebné" (předvolené: `false`)
- `icon {String}` volitelné, ikona pro štítky např. `home`, `cog`, atd.
- `licon {String}` volitelný, levá ikona např. `home`, `cog`, atd.
- `liconclick {String}` volitelný, cesta k metodu `function(component, input)`
- `ricon {String}` volitelný, pravá ikona např. `home`, `cog`, atd.
- `riconclick {String}` volitelný, cesta k metodu `function(component, input)`
- `label {String}` volitelné, štítek (default je obsah HTML)
- `autofocus {Boolean}` je volitelný, zaměřuje se na vstup (předvolený: `false`)
- `align {String}` volitelně , `left` a podvodně, `2` / `right` nebo `1` / `center`
- `after {String}` je volitelný, znamená to char po štítku (default: `:`)
- `autofill  {Boolean/String}` volitelně, umožňuje funkci autofill prohlížeče (`string` bude použit jako vstupní název, předvoleno: `false`)
- `placeholder {String}` volitelně, přidává text `placeholder` do vstupu
- `maxlength {Number}` volitelně, nastavení maximální délky čerpadel (default: `200`)
- `minlength {Number}` volitelně, stanoví minimální délku pneumatik
- `minvalue {Number}` volitelné, minimální hodnota pro typ `number`
- `maxvalue {Number}` volitelné, maximální hodnota pro typ `number`
- `increment {Number}` je volitelný, stanoví hodnotu pro zvýšení (default: `1`)
- `validate {String}` volitelný, podmínka pro potvrzení hodnoty, může obsahovat odkaz na `function(value)` nebo `!!value.match(/[a-z]+/)`
- `format {String}` Volitelné, výstupní formátování atd. `date` typy : `yyyy-MM-dd`Pro `time` typy : `HH:mm`Pro `number` Můžete definovat max. decimals (default): `auto`)
- `disabled {Boolean}` volitelně, tento složka je deaktivována
- `error {String}` volitelně, přidává text `string` pod složkou
- `autocomplete {String}` je volitelný, musí obsahovat odkaz na funkci, vyvolává se na události `focus`
- `spaces {Boolean}` volitelné, umožňuje prostory jinak je odstraňuje (předvolené: `true`)
- `innerlabel {Boolean}` volitelné, umožňuje vnitřní značku (podmínkou: `true`)
- `dirsource {String}` volitelně, cesta k datovému zdroji nebo __NEW__ do `function(search, next)` (cesta musí obsahovat `/` nebo __NĚV__: `id|name,id|name`
- `dircustom {String/Boolean}` je volitelný, může obsahovat cestu k `function(val, next(new_val))` nebo může být `Boolean`.Tato možnost umožňuje přidání vlastního hodnoty (hodnota není definována v zdroji údajů)
- `dirrender {String}` volitelné, cesta k `function(item, text)` (musí vrátit HTML pro `j-Directory`), tato funkce může ovlivnit seznam položek v `j-Directory`
- Volitelná šířka `dirminwidth {Number}`, minimální šířky pro `j-Directory`, výchozí: `200`
- `dirmaxwidth {Number}` volitelné, maximální šířka pro `j-Directory`
- `diroffsety {Number}` volitelné, `Y` offset (předvolené: `0`)
- `diroffsetx {Number}` volitelné, `X` offset (předvolené: `0`)
- `dirplaceholder {String}` volitelné, místo držitele pro `j-Directory`
- `dirempty {String}` volitelně, přidává prázdné pole pro `j-Directory`
- `dirkey {String}` volitelný, klíčový název pro čtení `text` v `dirsource` (předvolený: `name`)
- `dirvalue {String}` volitelný, klíčový název pro čtení `value` v `dirsource` (předvolený: `id`)
- `direxclude {Boolean}` je volitelný, vylučuje aktuální hodnotu z `j-Directory` (předvolený: `true`)
- `dirsearch {Boolean|String}` volitelně, může být vyhledávání deaktivováno v `j-Directory` (podle předvolby: `true`) nebo `{String}` (klíčové jméno) může mapovat hodnotu pro vyhledání
- `dirraw {Boolean}` volitelné, může být zakázáno únik položek pro `j-Directory` (předvolené: `false`)
- `dirdetail {String}` volitelně, odkaz na funkci `function(val, next(NEW_TEXT))` (cílí na `dirsource`)
- `dirfilter {String}` volitelná, inline filtrová podmíněná metoda, například: `value.id !== 2` (s cílem na `dirsource`)
- __NEW__: `dirrawrender {Boolean}` volitelné, pokud `dirsource` neobsahuje hodnotu, bude to surová hodnota (podle předvolby: `true`)
- `mask {String}` volitelné, může obsahovat masku ve formě `###/##` (`#` je nahrazeno charem)
- `maskregexp {String}` volitelně, může obsahovat RegExp pro každý char ve formě `\d,\d,\d,null,\d,\d` (`,` je delimetr)
- `masktidy {Boolean}` volitelně, komponenta vrací pouze surové pneumatiky bez pevných pneumatik (předvolené: `false`)
- `autosource {String}` je cesta k vyhledávacímu zdroji `Array` (__NEW__) nebo `function(search, render(arr))` pro dynamické vyhledávání
- `autovalue {String}` je vlastnická cesta pro hodnotu v `autosource`, předvolená: `name`
- Metoda `function(item, next(value_to_input))` je metoda `autoexec {String}`
- `searchalign {Number}` Můžete přidat ikonku `type:search` Zanechal jsem (`2`nebo správně (`1`a default)
- `forcevalidation {Boolean}` umožňuje validace síly pro `phone` a `email` (předvolené: `true`)
- `camouflage {Boolean|String}` maskuje hodnotu v vstupu po vyvolání události `blur` (předběžně: `false`) nebo může být `String`, která bude použita jako kamufláže
- `monospace {Boolean}` umožňuje písemnost `monospaced` (předvolené: `false`)
- `multiple {Boolean}` umožňuje kontrolní krabičky, pokud není `dirsource` prázdný
- `tabindex {Number}` přidává tabový index (předvolený: `0`)
- `tabs {Boolean}` umožňuje tabulky pro multiliny (předvolené: `true`)
- `readonly {Boolean}` blokovací textové pole (předvolené: `false`)
- `transform {String}` odkaz na `function(value, config)` pro přeměnu zadávaných hodnot
- `multiline {Boolean}` funguje pouze s typem `radiobutton`
- `separator {String|Boolean}` - separátor pro více hodnot
- `realtime {Boolean}` umožňuje zavazování v reálném čase (předvolené: `true`)
- `exec {String}` odkaz na `function(value, element)`, který bude vyhodnocován, pokud je vstup ovlivněn

__Zajímavé je:__

- `type:date` potřebuje _`datepicker`__ složku
- `type:time` potřebuje _`timepicker`__ složku
- `dirsource:path.to.datasource` potřebuje _`directory`__ složku
- Pokud `licon` nebo `ricon` začíná s `!`, pak složka představuje surovou hodnotu namísto `icon`.
- Klasa `ui-input-ok` je připojena, když je vstup validován a vyplněn
- `SET('path', 'camouflage', 'show');` ukazuje hodnotu 2000 ms

```video
https://www.youtube.com/watch?v=Ne3ezaP0w34
```

Použijte ji s `<ui-component name="input">`Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy `DEF.fallback` a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

```html example.html
<ui-component name="LAZY directory" config="placeholder:Search..."></ui-component>
<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY icons"></ui-component>

<div style="width:400px">
	<ui-component name="input" path="form.framework" config="placeholder:Choose a framework;dirsource:frameworks" class="m">Framework</ui-component>
	<ui-component name="input" path="form.terms" config="type:checkbox" class="m">I agree with terms</ui-component>
	<ui-component name="input" path="form.notes" config="type:multiline;innerlabel:1;placeholder:Enter notes" class="m">Notes</ui-component>
	<ui-component name="input" path="form.frameworks" config="placeholder:Select frameworks;multiple:true;dirsource:frameworks">Frameworks</ui-component>
	<br />
	<ui-component name="input" path="form.city" config="required:1;placeholder:Where do you live?;dirsource:cities;dircustom:true">City</ui-component>
	<br />
	<ui-component name="input" path="cities" config="type:tags;placeholder:Type a tag and press enter">Tags</ui-component>
	<br />
	<ui-component name="input" path="form.date" config="placeholder:Enter date;type:date;required:true;innerlabel:true">Date</ui-component>
	<br />
	<ui-component name="input" path="form.search" config="placeholder:Search...;type:search;innerlabel:true">Search</ui-component>
	<br />
	<ui-component name="input" path="form.password" config="placeholder:Type a password...;type:password">Password</ui-component>
	<br />
	<ui-component name="input" path="form.zip" config="mask:###-##;maskregexp:\d,\d,\d,null,\d,\d">ZIP</ui-component>
	<br />
	<ui-component name="input" path="form.email" config="placeholder:example@email.com;type:email">Email</ui-component>
	<br />
	<ui-component name="input" path="form.phone" config="placeholder:+421;type:phone">Phone</ui-component>
	<br />
	<ui-component name="input" path="form.radio" config="type:radiobutton;dirsource:Male,Female,Unknown">Gender</ui-component>
	<br />
	<ui-component name="input" path="form.radio" config="type:radiobutton;dirsource:Male,Female,Unknown;multiline:1">Gender</ui-component>
	<br />
	<div style="width:150px">
		<ui-component name="input" path="form.age" config="type:number;innerlabel:false">Your age</ui-component>
	</div>
</div>

<script>
	var frameworks = [{ id: 0, name: 'Nothing', template: '<b>{{ name }}</b>' }, { id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var cities = ['Slovakia', 'Poland', 'Hungary', 'Germany'];
	var form = {};
	form.age = 30;
</script>
```
