Web Component: j-Configuration

j-Configuration

• easy usage
• supports dark mode

Configuration:

• dateformat {String} a default date format (default: DEF.dateformat)

Declaration

Allowed properties:

• type {String} supports:
  • string
  • number
  • date
  • boolean
  • dropdown
  • color
  • icon
  • multiline
  • selectable
• text {String} a text/title
• name {String} a name of property in the model
• align {Number} align for inputs (0 left (default), 1 center, 2 right)
• icon {String} optional, Total JS or font-awesome icon identifier
• summary {String} optional, a summarization
• note {String} optional, a note
• required {Boolean} optional, is the property required?
• disable {String} optional, declaration of arrow function in the form model => model.interval === 100
• visible {String} optional, declaration of arrow function in the form model => model.interval === 100
• button {String} optional, creates a small button
• click {String} optional, a link to the method (depends on the button)
• maxlength {Number} optional, supports only string type
• min {Number} optional, supports only number type
• max {Number} optional, supports only number type
• increment {Number} optional, an increment count - supports only number type (default: 1)
• multiple {Boolean} optional, works with selectable type (a value will be array)
• monospace {Boolean} optional, works with string and number types
• bold {Boolean} optional, works with string and number types
• placeholder {String} optional
• items {String/Object Array} optional for dropdown and selectable in the form [{ id: 'VALUE', name: 'TEXT' }]
  • type string a path to the Object Array (works with scopes)
  • type Object Array fixed defined array
• dirplaceholder {String} optional, placeholder for j-Directory
• dirsearch {Boolean} optional, enables/disables search field in j-Directory (default: true)
• NEW: datasource {String} optional, a path to the data-source for config items

Declaration must be defined in the component's element body wrapped in the <script type="text/plain"> element. Example:

[
    {
        name: 'My group label',
        type: 'group',
        // summary: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, nostrum.',
        // icon: 'ti ti-home'
    },
    {
        id: 'name',
        name: 'Application name',
        type: 'string',
        icon: 'ti ti-home',
        disable: 'model => model.interval < 100',
        summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.',
        required: true
    },
    ... other items
]

Author

• Peter Širka petersirka@gmail.com
• License