Uno Component Specs

specs.md

Table of Contents

• Required Files
• Directory Path Structure
• Component Package (component.json)
  • Format
  • Example
• Component Methods, Data and Events (component.js)
  • Object
  • Example
• Component Template Markup (component.html)
  • Wrapper (<wrapper>)
    • Attributes
    • Example
  • Element (<element>)
    • Attributes
    • Example
  • Content (<content>)
    • Attributes
    • Example
  • Column (<column>)
    • Attributes
    • Example

Required Files

User can add new component, by adding a directory with three required files

1. component.json
2. component.js
3. component.html

Directory path structure

your-component
|__ component.json
|__ component.js
|__ component.html
|__ css
|_____ hello.css
|__ js
|_____ world.js
|__ img
|_____ icon.svg

Note

• icon.svg or icon.png is optional, if this value is blank, it will be replaced with our default icon.
• CSS and Javascript directory is optional, you can load additional css it from component.json

---

Component Package component.json

The format must be in JSON format and must be valid.

Format

• id {String} (required) Your component unique value.
• label {String} (optional) Your component name. Will displays in component section. Default is Unlabeled
• group {String} (required) Component group. Your can name group with whatever. Your component will displays here.
• settings {Array} (optional) Custom settings. If you want to override custom settings and applying to your mark up, you can create custom forms here. Forms has these default format:
  • id {String} (required). Only accepts lowercase letter and _
  • type {String} (required). Available values: text|textarea|list|switch|button|radio|checkbox|range|imageupload
  • label {String} (optional). Form label.
  • value {String} (optional). Default value.
  • attrs {String} (optional). Additional form attributes. You can add your custom class, data, etc.
  • list {Array} (optional). Only available if type is dropdown. e.g ["Apple", "Banana"]
  • multiple {Boolean} (optional). Only available, if type are button, radio, checkbox, range.
  • button {Array>Object} (optional). Only available, if type is button.
    • e.g

      [
         {
            "label": "Button 1",
            "value": "button1"
         },
         
         {
            "label": "Button 2",
            "value": "button2"
         }
      ]

  • radio {Array>Object} (optional). Only available, if type is radio.
    • e.g

      [
         {
            "label": "Radio 1",
            "value": "radio1"
         },
         
         {
            "label": "Radio 2",
            "value": "radio2"
         }
      ]

  • checkbox {Array>Object} (optional). Only available, if type is checkbox.
    • e.g

      [
         {
            "label": "Checkbox 1",
            "value": "radio1"
         },
         
         {
            "label": "Checkbox 2",
            "value": "radio2"
         }
      ]

  • range {Array|Number} (optional). Only available, if type is range. If multiple is set as true, only array will be accepted as value. e.g 10 or [5, 10]
• css {Array} (optional) Additional css. You can add external urls.
• js {Array} (optional) Additional javascript. You can add external urls.

Example

{
  "id": "unique-id",
  "label": "My Element",
  "group": "Custom Component",
  "settings": [
    {
      "id": "my-text"
      "type": "text",
      "value": "",
      ...
    },
    ...
  ],
  "css": ["hello.css", "http://your-external.css"],
  "js": ["world.js", "http://your-external.js"]
}

---

Component Methods, Data and Events component.js

Collection of data, methods, and events in components.

Object

data

Custom data belongs here, this data is separated from component package settings, but you can call this data in forms (settings).

init

Event when uno is initializing component

ready

Event when component is dragged and dropped into blocks.

change

Event data observer, when data or settings are changed.

dragstart

Event when user start to dragging component.

dragmove

Event when user dragging component.

dragend

Event after component dropped, but it calls before ready.

Example

// This declaration must be written in component.js
// Or your component will be not loaded
uno.component.add({
	data: {},
	init: function () {},
	ready: function () {},
	change: function (key, value, oldValue) {},
	dragstart: function () {},
	dragmove: function (coords) {},
	dragend: function () {}
})

---

Component Template Markup component.html

Component markup specification.

Wrapper <wrapper>

Wrapper is non selectable element

Attributes

• accept {String} (required) Acceptable parent, separated by commas. Default is null
• tag {String} (optional) Element tag. Default is section

Example

<wrapper class=“uk-row” tag=“section” accept=“section,container”>
...
</wrapper>

---

Element <element>

Element is a selectable element. Builder can select element and see the outline in the editor.

Attributes

• accept {String} (required) Acceptable parent, separated by commas. Default is null
• accept-child {Boolean} (optional). Whether element is dropable or not. Default is false
• tag {String} (optional) Element tag. Default is div

Example

<wrapper class=“uk-row” tag=“section” accept=“section,container”>
<wrapper class=“uk-width-1-1”>
<element accept-child=“true”></element>
</wrapper>
</wrapper>

---

Content <content>

Content is an editable element with basic editor (Bold, Italic, Link). Builder can edit this element via double click.

Attributes

• tag {String} (optional) Element tag, you may change this to span to create an inline-block editor. Default is div

Example

<editor tag="span">Your content here</editor>

---

Column <column>

Column is an dropable and selectable element.

Attributes

• grid {String} (optional) Column grid, how many grid your column is.

Example

<element class="grid">
<column grid="3">..</column>
<column grid="7">..</column>
</element>