canner-types
產生schema的工具
Installation
$ npm install --save canner-types
Usage
import cannerTypes from 'canner-types';
const name = cannerTypes.string();
Basic
const article = cannerTypes.string()
.description('名字')
.ui('editor');
// same as
const article = {
type: "string",
description: "名字",
ui: "editor"
}
Object
const title = cannerTypes.string()
.description('標題');
const content = cannerTypes.string()
.description('內容')
.ui('editor');
const article = cannerTypes.object({title, content})
.description('文章');
// same as
const article = {
type: "object",
description: "文章",
items: {
title: {
type: "string",
description: "標題"
},
content: {
type: "string",
description: "內容"
}
}
}
Array
// array example
const title = cannerTypes.string()
.description('標題');
const content = cannerTypes.string()
.description('內容');
.ui('editor');
// 這裡的文章type變成array
const articles = cannerTypes.array({title, content})
.description('文章');
.ui('leftTab');
// same as
const articles = {
type: "array",
description: "文章",
items: {
type: "object",
items: {
title: {
type: "string",
description: "標題"
},
content: {
type: "string",
description: "內容"
}
}
}
}
Nested Array
// nested array example
const title = cannerTypes.string();
.description('標題');
const content = cannerTypes.string()
.description('內容');
.ui('editor');
const articles = cannerTypes.array()
.description('文章');
.items({title, content});
const name = cannerTypes.string();
.description('名字');
const writers = cannerTypes.array({name, articles})
.description('作家');
.ui('leftTab');
// wrtiers schema
const writers = {
type: "array",
description: "作家",
items: {
type: "object",
items: {
name: {
type: "string",
decsiption: "名字"
},
articles: {
type: "array",
desctiption: "文章",
ui: "leftTop",
items: {
type: "object",
items: {
title: {
type: "string",
description: "標題"
},
content: {
type: "string",
description: "內容"
}
}
}
}
}
}
}
Method
type
array
CannerTypes.array(items?: {[key: string]: CannerTypes})
創造 type 為 array
的 schema。在 ui
為 gallery
, tags
時,不需給予 arguments
。
object
CannerTypes.object(items?: {[key: string]: CannerTypes})
創造 type 為 object
的 schema。在 ui
為 map
, options.radio
時,不需給予 arguments
string
CannerTypes.string()
創造 type 為 string
的 schema。
boolean
CannerTypes.boolean()
創造 type 為 boolean
的 schema。
number
CannerTypes.number()
創造 type 為 number
的 schema。
description
CannerTypes.description(string)
ui
CannerTypes.ui(string)
共有以下 ui
:
- object:
map
options.radio
variants
- array:
tab
tabLeft
tabTop
tabRight
tabBottom
panel
gallery
tag
popup
tableInput
slider
bucket
- boolean:
switch
card
- string:
dateTime
time
editor
link
image
input
textarea
select
radio
card
slateEditor
assoc.select
- number:
input
rate
slider
numberInput
uiParams
彈性設定 ui 的樣式。
CannerTypes.uiParams({
[string]: any
})
object
ui | uiParams |
map |
{
type: 'geocode' | 'address' | 'placeId'
}
|
array
ui | uiParams |
tab |
{
[key: 'titleKey' | 'titlePrefix']: string
}
|
panel |
{
'titleKey': string
}
|
slider |
{
'min': number,
'max': number,
'step': number,
'unit': string,
}
|
tag |
{
'defaultOption': Array<string>,
}
|
tableInput |
{
'columns': Array<{
title: string,
key: string,
dataIndex: string
}>,
}
|
popup |
{
'columns': Array<{
title: string,
key: string,
dataIndex: string
}>,
createAction?: Array<string>,
updateAction?: Array<string>,
deleteAction?: Array<string>
}
|
gallery |
{
imageKey?: string,
thumbKey?: string,
titleKey?: string,
disableDrag?: boolean
}
|
bucket |
{
options: Array<{
text: string,
key: string
}>,
metaData: {
[string]: any
}
}
|
string
ui | uiParams |
card |
{
options: Array<string>,
imgs: Array<string>,
imgStyle: {[string]: string | number},
labelStyle: {[string]: string | number},
defaultSelected: number
}
|
dateTime |
{
display?: string, // 顯示格式 eg: YYYY/MM/DD HH:mm
input?: 'epoch' // 可以選擇回傳 epoch
}
|
radio |
{
options: Array<string>,
defaultChecked: number
}
|
select |
{
texts: Array<string>, // ['已付款', '未付款']
options: Array<string>, // ['paid', 'not']
defaultSelected: number
}
|
boolean
ui | uiParams |
card |
{
text: Array<string>,
imgs: Array<string>,
imgStyle: {[string]: string|number},
labelStyle: {[string]: string|number}
}
|
number
ui | uiParams |
input |
{
min: number,
max: number,
step: number,
unit: string
}
|
numberInput |
{
count: number,
allowHalf: boolean,
character: string
}
|
slider |
{
min: number,
max: number,
step: number,
unit: string
}
|
association
association
只用於設定 ui(assoc.select)
,當使用這個 assoc.select
,為必要的 method
。
CannerTypes.ui('assoc.select').association({
path: string,
textCol: string,
subtextCol: string
});
- path: array key,代表這個
assoc.select
plugins,會列出該array
的資料。 - textCol: 顯示名稱,在
assoc.select
之中,options
都是以該 array item 的id
作為value
,而textCol
可以決定要以該item
的哪個值作為顯示的文字。 - subtextCol: 顯示次要名稱,會在名稱後面以
(次要名稱)
顯示。
// example
CannerTypes.ui('assoc.select').association({
path: 'posts',
textCol: 'title',
subtextCol: 'subtitle'
});
上述的例子中, assoc.select
會以 posts
這個 array
裡所有 item id
作為 options
的 value
,並顯示 title(subtitle)
。
posts: [
{
id: "23TplPdS23TplPdS",
title: '標題',
subtitle: '副標題'
}
]
<option value="23TplPdS23TplPdS">
標題(副標題)
</option>
Popup Query
在 plugin popup
中,支援兩種 query
設定,sort
和 filter
。
addSort 增加排序選項。可以增加多個。
.addSort(key: string, label: string)
// example
.addSort('viewer', '瀏覽量')
.addSort('title', '標題')
addFilter
.addFilter(key: string, label: string, filter: {
type: 'select' | 'numberRange' | 'text',
options?: Array<{
text: string,
condition: {
[operator: '_eq' | '_gt' | '_gte' | '_lt' | '_lte' | '_contain' | '_in' | '_regex']: any
}
}>
})
// text example
.addFilter('title', '標題', {
type: 'text'
})
// numberRange example
.addFilter('price', '價錢', {
type: 'numberRagne'
})
// select example
.addFilter('brand', '品牌', {
type: 'select',
options: [
{
text: '黑松',
condition: {
_eq: '黑松'
}
},
{
text: '可口可樂',
condition: {
_eq: '可口可樂'
}
}
]
})
addOption
addOption
只用在 ui option.radio
,這個 plugin
,可以讓使用者選擇不同的 plugin
去 render
.addOption({
title: string,
key: string,
schema: CannerTypes,
})
- title: 選項名稱
- key: 用來區分每個
option
,要相異。 - schema: 這個選項要
render
的 plugin schema
// example
.addOption({
title: 'Option1',
key: 'option1',
schema: CannerTypes.string().description('選項一'),
})
.addOption({
title: 'Option2',
key: 'option2',
schema: CannerTypes.string().description('選項二'),
})
License
Apache-2.0 © abz53378