Web Component: j-Properties2


  • Info
  • HTML
  • JS
  • CSS
  • Meta

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 method method(item, replace_text(new_text)) (executed if some value is changed) and replace_text argument is optional
  • modalalign {String} aligment for modal windows (default: center)
  • style {Number} supports a new style 2 like iOS 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 control
  • type {String} a type (required)
  • placeholder {String} a placeholder (supports few types only)
  • transform {String} for string type only, can contain capitalize, uppercase, lowercase or slug
  • maxlength {Number} for string type only
  • validate {RegExp/String} for string type only, can contain email, phone or url
  • min {Number} for number type only
  • max {Number} for number type only
  • inc {Number/String} increments a value according to the value, targeted for number or date (can contain 1 day or -1 day) type only
  • required {Boolean} for type string, number or date
  • dirsearch {String/Boolean} a placeholder for list type only, boolean disables search
  • dircustom {Boolean} enables a custom value for list type only
  • dirkey {String} a key name for label/name, targeted for list type only (default: name)
  • dirvalue {String} a key name for value, targeted for list type only (default: id)
  • detail {String} URL address for obtaining of data for list type, example: /users/{0}/ and {0} will be replaced with the value from list
  • items {Object Array/String} items for list type only, string can contain a path to Array or URL address to search
  • show {Arrow function}, example: data => data.KEY === 'SOMETHING' --> will show the item if the condition will valid
  • icon {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 method function(item, set(new_val))
  • camouflage {Boolean} only for string type
  • monospace {Boolean} it uses a monospace font

Allowed types in data:

  • string
  • bool
  • number
  • date
  • list
  • color
  • emoji
  • fontawesome
  • exec (can exec exec method)
  • text (readonly value)
  • menu (it's similar to list but the component will execute j-Menu)

Missing types:

  • datetime
  • time
  • file
  • months

Good to know

The component extends the Array by adding:

  • invalid {Boolean} field determines if the value is invalid (default: undefined)
  • changed {Boolean} field determines if the value has been changed (default: undefined)
  • prev {???} field contains an initial value

Author