Web Component: j-Properties2
j-Properties 2
The component uses j-DatePicker
, j-TimePicker
, j-Directory
, j-Emoji
, j-ColorPicker
and j-FaIcons
components.
Configuration:
dateformat {String}
a date format (default:yyyy-MM-dd
)timeformat {String}
a time format (default:HH:mm
)datetimeformat {String}
a date/time format (default:yyyy-MM-dd HH:mm
)change {String}
a path to methodmethod(item, replace_text(new_text))
(executed if some value is changed) andreplace_text
argument is optionalmodalalign {String}
aligment for modal windows (default:center
)style {Number}
supports a new style2
likeiOS
settings (default:1
)validation {Boolean}
enables validation for required fields (default:true
)defaultgroup {String}
a default group name (default:Default
)
Data declaration:
var form = [];
form.push({ group: 'Personal', label: 'First name', name: 'user.firstname', type: 'string', value: 'Peter', transform: 'capitalize' });
form.push({ group: 'Personal', label: 'Last name', name: 'user.lastname', type: 'string', value: 'Širka', placeholder: 'String' });
form.push({ group: 'Personal', label: 'Age', name: 'user.age', type: 'number', value: 33, min: 30 });
form.push({ group: 'Personal', label: 'Birth date', name: 'user.birth', type: 'date', value: NOW });
form.push({ group: 'Additional', label: 'Newsletter', name: 'user.newsletter', type: 'bool', value: true });
form.push({ group: 'Additional', label: 'City', name: 'user.city', type: 'list', value: 2, items: 'items', dirsearch: 'Search city', dircustom: true });
form.push({ group: 'Additional', label: 'Color', name: 'user.color', type: 'color', value: '#e73323' });
form.push({ group: 'Additional', label: 'Icon', name: 'user.icon', type: 'fontawesome', value: 'ti ti-home' });
form.push({ group: 'Additional', label: 'Emoji', name: 'user.emoji', type: 'emoji', value: '', show: 'n => n.age === 33' });
Data properties in data declaration:
name
{String} an item identifier (required)label
{String} a label (required)group
{String} a group name (required)note
{String} a small note under controltype
{String} a type (required)placeholder
{String} a placeholder (supports few types only)transform
{String} forstring
type only, can containcapitalize
,uppercase
,lowercase
orslug
maxlength
{Number} forstring
type onlyvalidate
{RegExp/String} forstring
type only, can containemail
,phone
orurl
min
{Number} fornumber
type onlymax
{Number} fornumber
type onlyinc
{Number/String} increments a value according to the value, targeted fornumber
ordate
(can contain1 day
or-1 day
) type onlyrequired
{Boolean} for typestring
,number
ordate
dirsearch
{String/Boolean} a placeholder forlist
type only, boolean disables searchdircustom
{Boolean} enables a custom value forlist
type onlydirkey
{String} a key name for label/name, targeted forlist
type only (default:name
)dirvalue
{String} a key name for value, targeted forlist
type only (default:id
)detail
{String} URL address for obtaining of data forlist
type, example:/users/{0}/
and{0}
will be replaced with the value from listitems
{Object Array/String} items forlist
type only, string can contain a path toArray
orURL address
to searchshow
{Arrow function}, example:data => data.KEY === 'SOMETHING'
--> will show the item if the condition will validicon
{String} Total icon, can contain a color e.g.ti ti-home #00000
ricon
{String} Right Font-Awesome icon or text e.g.!HTML text
riconclick
{String} a path to the methodfunction(item, set(new_val))
camouflage
{Boolean} only forstring
typemonospace
{Boolean} it uses a monospace font
Allowed types in data:
string
bool
number
date
list
color
emoji
fontawesome
exec
(can execexec
method)text
(readonly value)menu
(it's similar to list but the component will executej-Menu
)
Missing types:
datetime
time
file
months
Good to know
The component extends the Array by adding:
invalid
{Boolean} field determines if thevalue
is invalid (default:undefined
)changed
{Boolean} field determines if thevalue
has been changed (default:undefined
)prev
{???} field contains an initial value
Author
- Peter Širka petersirka@gmail.com
- License
Created
17. february 2020
Updated
26. november 2023
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com
