Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
component.css
component.js
component.json
dependencies.html
example.html
picture.jpg
readme.md

readme.md

j-Properties (BETA)

The component uses j-DatePicker, j-TimePicker, j-Directory, j-Emoji, j-ColorPicker and j-FaIcons components.

Configuration:

  • dateformat {String} optional, a date format (default: yyyy-MM-dd)
  • timeformat {String} optional, a time format (default: HH:mm)
  • datetimeformat {String} optional, a date/time format (default: yyyy-MM-dd HH:mm)
  • height {Number} optional, a height of the element (default: undefined)
  • parent {String} optional, jQuery selector for auto setup of height (can be window, parent or custom)
  • margin {Number} optional, vertical margin (default: 0)
  • change {String} optional, a path to method method(item, replace_text(new_text)) (executed if some value is changed) and replace_text argument is optional

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: 'fas fa-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)
  • 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

Allowed types in data:

  • string
  • bool
  • number
  • date
  • list
  • color
  • emoji
  • fontawesome

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

You can’t perform that action at this time.