Skip to content

Sanji-IO/sanji-core-ui

Repository files navigation

sanji-core-ui

Sanji core module is part of Sanji UI framework and also it is a angular module. It is responsible for config all webapp services.

NPM Build Status dependencies devdependencies semantic-release Commitizen friendly

Dependencies

Installation

npm install sanji-core-ui --save
let app = angular.module('webapp', ['sanji.core']);

Form Config

sanji-core-ui define some basic form fields through angular-formly.

Define Config

  • key(required): this is field uniq id.
  • type(required): this is field type.
  • templateOptions(optional): this is for setting field property.

example:

[{
  "key": "ip",
  "type": "input",
  "templateOptions": {
    "label": "IP",
    "required": true
  }
}]

Build-in Field Type

Type name: realtime_info templateOptions:

  • event: event name for subscribing data which push from server to client.
  • label: label name

Note: Server need to send data which matching following format:

{
  data: {
    value: '32 MB'
  },
  event: 'realtime:info'
}

Type name: cloud_connection templateOptions:

  • event: event name for subscribing data which push from server to client.

Note: Server need to send data which matching following format:

{
  data: {
    status: true
  },
  event: 'cloud:connection'
}

Type name: tag_selector templateOptions:

  • basePath: client request url base path.
  • apiToken: API token string.

Type name: input templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: password templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: url templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: email templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: range templateOptions:

  • required: value is true or false.
  • label: label name.
  • min: minimum value.
  • max: maximum value.

Type name: file templateOptions:

  • required: value is true or false.
  • label: label name.
  • accept: accept file pattern, like image/*.
  • maxSize: file size limitation, like 10MB.

Type name: date templateOptions:

  • required: value is true or false.
  • label: label name.
  • min: minimum date value.
  • max: maximum date value.

Type name: datetime templateOptions:

  • required: value is true or false.
  • label: label name.
  • min: minimum date value(ISO8601).
  • max: maximum date value(ISO8601).

Type name: number templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.
  • min: minimum value.
  • max: maximum value.

Type name: radio templateOptions:

  • options: radio option array, like [{label: 'foo', value: 'bar'}].

Type name: radio_label templateOptions:

  • label: label name.
  • options: radio option array, like [{label: 'foo', value: 'bar'}].

Type name: empty templateOptions:

  • divider: value is true or false.

Type name: datepicker templateOptions:

  • required: value is true or false.
  • placeholder: placeholder string.
  • min: minimum date value.
  • max: maximum date value.

Type name: select templateOptions:

  • options: select option array, like [{label: 'foo', value: 'bar'}].

Type name: checkbox templateOptions:

  • label: label name.

Type name: ip templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: latitude templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: longitude templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: aliasName templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: hostname templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: port templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: mac templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Type name: float templateOptions:

  • required: value is true or false.
  • label: label name.
  • placeholder: placeholder string.

Contact

Author: Zack Yang © 2015

Support: if you find any problems with this library, open issue on Github