Package Exports

@easylogic/inspector

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@easylogic/inspector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

EasyLogic Inspector

Fantastic Inspector for UI System

This project is sapa based.

How to use (comming soon)

import Inspector from "@easylogic/inspector";

const obj = Inspector.createInspector({
  container: document.getElementById("app"),
  layout: {
    type: "box",  // default 
  },
  items: [
    'title'
  ]  
})

const obj2 = Inspector.createInspector({
  container: document.getElementById('tabContent'),
  layout: {
    type: 'grid',
    rows: 3,
    cols: 2,
  },
  items: [
    {}
  ]  
})

// control layout 
obj.setLayout({
  type: "grid",
  rows: 2,
  cols: 3
})

// set item editor 
obj.setItems([
  { 
    type: 'color', 
    key: 'background-color', 
    defaultValue: '#ededed', 
    layout: {
      row: 1,
      col: 1
    } 
  }
])

obj.defaultValue // return { 'background-color': '#ededed' }

// set value 
obj.set("key", value);
obj.set({
  key: 1,
  key2: 2,
  key3: 3
});
obj.key = value; 

// get value 
obj.get("key");   // return one value 
obj.key;          // return one value 
obj.get("key", "key2", "key3");  // return { key, key2, key3 }

// event 
obj.on("change", (obj) => {
  // obj is all value 
})

obj.on("change:key", (newValue, oldValue) => {
  // when key is changed
})

obj.on("lastChanged", (obj) => {
  // obj is all value 
})

obj.on("lastChanged:key", (newValue, oldValue) => {
  // when key is changed
})

Development

git clone https://github.com/easylogic/editor.git
cd editor
npm install 
npm run dev

build

npm run build

@easylogic/inspector