迁移到新版本
1.6.5 -> 1.7.0
Api
属性
editorShape属性已更新。clearButton参数被clear参数替代:
v1.7.0 之前
new kanban.Kanban("#root", {
editorShape: [
{
type: "combo",
label: "Priority",
key: "priority",
config: {
clearButton: true // 旧用法
}
}, { /* ... */ }
]
// 其他参数
});
v1.7.0 起
new kanban.Kanban("#root", {
editorShape: [
{
type: "combo",
label: "Priority",
key: "priority",
config: {
clear: true // 新用法
}
}, { /* ... */ }
]
// 其他参数
});
cardShape.menu.items函数已更新。store 参数被 readonly 参数替代:
v1.7.0 之前
menu: {
show: true,
items: ({ card, store }) => {
const defaultMenuItems = getDefaultCardMenuItems({ card, store }); // "store" 参数为旧用法
...
}
}
v1.7.0 起
menu: {
show: true,
items: ({ card, readonly }) => {
const defaultMenuItems = getDefaultCardMenuItems({ card, readonly }); // "readonly" 参数为新用法
...
}
}
columnShape.menu.items函数已更新。store 参数被 readonly 参数替代:
v1.7.0 之前
menu: {
show: true,
items: ({ column, columnIndex, columns, store }) => {
const defaultMenuItems = getDefaultColumnMenuItems({ column, columnIndex, columns, store }); // "store" 参数为旧用法
...
}
}
v1.7.0 起
menu: {
show: true,
items: ({ column, columnIndex, columns, readonly }) => {
const defaultMenuItems = getDefaultColumnMenuItems({ column, columnIndex, columns, readonly }); // "readonly" 参数为新用法
...
}
}
rowShape.menu.items函数已更新。store 参数被 readonly 参数替代:
v1.7.0 之前
menu: {
show: true,
items: ({ row, rowIndex, rows, store }) => {
const defaultMenuItems = getDefaultRowMenuItems({ row, rowIndex, rows, store }); // "store" 参数为旧用法
...
}
}
v1.7.0 起
menu: {
show: true,
items: ({ row, rowIndex, rows, readonly }) => {
const defaultMenuItems = getDefaultRowMenuItems({ row, rowIndex, rows, readonly }); // "readonly" 参数为新用法
...
}
}
-
cardShape.menu.items、columnShape.menu.items、rowShape.menu.items属性中的 menu.items[0].label 和 menu.items[0].items 已在 v1.7 移除。 -
editorAutoSave属性在 v1.7 被移除。请使用editor.autoSave属性:
v1.7.0 之前
new kanban.Kanban("#root", {
editorAutoSave: true, // 旧用法
// 其他参数
});
v1.7.0 起
new kanban.Kanban("#root", {
editor: {
autoSave: true // 新用法
}
// 其他参数
});
links属性有如下更新:- masterId 参数被 source 参数替代
- slaveId 参数被 target 参数替代
v1.7.0 之前
const links = [
{
id: 1,
// 旧用法
masterId: 2,
slaveId: 5
}, {...} // 其他连接数据
];
new kanban.Kanban("#root", {
links,
// 其他参数
});
v1.7.0 起
const links = [
{
id: 1,
// 新用法
source: 2,
target: 5
}, {...} // 其他连接数据
];
new kanban.Kanban("#root", {
links,
// 其他参数
});
方法
undo和redo方法已从 store 方法中移除:
v1.7.0 之前
kanban.api.getStores().data.undo() // 旧用法
v1.7.0 起
kanban.undo();
// 或者
kanban.api.exec("undo");
-
api.getState()和api.getReactiveState()方法有如下更新:- 以下参数在 v1.7.0 被移除:
fromAreaMeta,
dropAreaItemsCoords,
dropAreasCoords,
overAreaMeta,
before,
dragItemId,
dragItemsCoords,
overAreaId- 以下参数在 v1.7.0 变为私有:
edit -> _edit: object,
layout -> _layout: string,
cardsMap -> _cardsMap: object,
cardsMeta -> _cardsMeta: object,
areasMeta -> _areasMeta: object,
scroll -> _scroll: object
事件
start-drag-card事件中的dragItemsCoords和dropAreasCoords参数已被移除
1.5.13 -> 1.6.0
与菜单相关的 CSS 类有如下变 更:
.menu -> .wx-menu
.item -> .wx-item
.icon -> .wx-icon
.value -> .wx-value
1.5.12 -> 1.5.13
与编辑器相关的 CSS 类有如下变更:
.modal -> .wx-modal
.window -> .wx-window
.modal .window .buttons -> .wx-modal .wx-window .wx-buttons
.combo -> .wx-combo
.combo -> .wx-multicombo
.item -> .wx-item
.color-picker -> .wx-colorselect
.colors -> .wx-colors
.slider -> .wx-slider
.datepicker -> .wx-datepicker
.calendar -> .wx-calendar
.calendar .days .day.out -> .wx-calendar .wx-days .wx-day.wx-out
.combo .tag -> .multicombo .wx-tag
.dropdown -> .wx-dropdown
.dropdown .item -> .wx-dropdown .wx-item
.clear -> .wx-clear
1.5.6 -> 1.5.7
Api
方法
- Kanban 工具栏的
setLocale方法有如下更新:
v1.5.7 之前
// 创建 Kanban
const board = new kanban.Kanban("#root", {...});
// 创建 Toolbar
const toolbar = new kanban.Toolbar("#toolbar", { api: board.api });
// 应用 "de" 语言到 Toolbar
toolbar.setLocale(de); // 或传 null 重置为默认语言 (en)
v1.5.7 起
// 创建 Kanban
const board = new kanban.Kanban("#root", {...});
// 创建 Toolbar
const toolbar = new kanban.Toolbar("#toolbar", { api: board.api });
// 应用 "de" 语言到 Toolbar
toolbar.setLocale(de, board.api);
1.4 -> 1.5
Api
属性
-
Kanban 的
columnShape属性有如下变更:v1.5 之前{
menu: {
show: true,
items: [
{
label: "Update", ...
}
]
// 其他参数
}
}v1.5 起{
menu: {
show: true,
items: [
{
text: "Update", ...
}
]
// 其他参数
},
fixedHeaders: true
}
1.3 -> 1.4
Api
属性
-
Kanban 的
editorShape属性有如下变更:v1.4 之前{
type: "date",
key: "start_date",
label: "Start date"
},
// 其他参数v1.4 起{
type: "date", // 或可使用 "dateRange" 类型
key: "start_date",
label: "Date Range"
format: "%d/%m/%y"
},
{
type: "comments",
key: "comments",
label: "Comments",
config: {
format: "%M %d",
placement: "page", // 或 "editor"
html: true,
},
},
{
type: "links",
key: "links",
label: "Links",
},
// 其他参数 -
Kanban 的
cardShape属性有如下变更:v1.4 之前{
label: true,
description: true,
menu: {
items: [
{
label: "Delete", ...
}
]
}
// 其他参数
}v1.4 起{
label: true,
description: true,
menu: {
items: [
{
text: "Delete", ...
}
]
},
votes: true,
comments: true,
css: (card) => card.type == "feature" ? "green" : "red",
// 其他参数
} -
Kanban 的
columnShape属性有如下变更:v1.4 之前{
menu: {
show: true,
items: [
{
label: "Delete", ...
}
]
// 其他参数
}
}v1.4 起{
menu: {
show: true,
items: [
{
text: "Delete", ...
}
]
// 其他参数
},
css: (column, cards) => column.id == "feature" && cards.length < 5 ? "green" : "red"
} -
Kanban 的
rowShape属性有如下变更:v1.4 之前{
menu: {
show: true,
items: [
{
label: "Delete", ...
}
]
// 其他参数
}
}v1.4 起{
menu: {
show: true,
items: [
{
text: "Delete", ...
}
]
// 其他参数
},
css: (row, cards) => row.id == "task" && cards.length < 5 ? "green" : "red",
} -
Kanban 的
cards属性有如下变更:v1.4 之前[
{
id: 1,
label: "Integration with React",
description: "Some description",
// 其他参数
}, ...
]v1.4 起[
{
id: 1,
label: "Integration with React",
description: "Some description",
css: "red",
votes: [4,6,9],
comments: [
{
id: 1,
userId: 9,
cardId: 6,
text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays.",
date: new Date(),
},{...}
]
// 其他参数
}, ...
] -
Kanban 的
columns属性有如下变更:v1.4 之前[
{
id: "inprogress",
label: "In progress",
// 其他参数
}, ...
]v1.4 起[
{
id: "inprogress",
label: "In progress",
css: "red",
overlay: template(`
<div className="blockOverlay disable-drop">
<span className="disable-drop-header">Drop is not allowed</span>
<span className="disable-drop-description">Only testers can move cards to this
column</span>
</div>`)
// 其他参数
}, ...
] -
Kanban 的
rows属性有如下变更:v1.4 之前[
{
id: "features",
label: "Features",
// 其他参数
}, ...
]v1.4 起[
{
id: "features",
label: "Features",
css: "green"
// 其他参数
}, ...
] -
Kanban 的
cardTemplate属性有如下变更:v1.4 之前const cardTemplate = ({ cardFields, selected, dragging, cardShape }) => {
if (selected) {
return `
<div className="custom-card" style={{padding: '20px'}}>
<div className="status-color" style={{background: '${cardFields.color}'}}></div>
Selected:${cardFields.label}
</div>
`;
}
}
new kanban.Kanban("#root", {
cards,
columns,
cardTemplate
});v1.4 起const cardTemplate = ({ cardFields, selected, dragging, cardShape }) => {
if (selected) {
return `
<div className="custom-card" style={{padding: '20px'}}>
<div className="status-color" style={{background: '${cardFields.color}'}}></div>
<div data-menu-id=${cardFields.id} >
<i className="wxi-dots-v"></i>
</div>
Selected:${cardFields.label}
</div>
`;
}
}
new kanban.Kanban("#root", {
cards,
columns,
cardTemplate: kanban.template(card => cardTemplate(card)),
// 其他参数
}); -
Kanban 工具栏
items属性中的 sort 控件有如下变更:v1.4 之前[
{ // 自定义排序控件
type: "sort",
options: [
{
label: "Sort by label",
by: "label",
dir: "asc"
},
{
label: "Sort by description",
by: "description",
dir: "desc"
}
]
},
]v1.4 起[
{ // 自定义排序控件
type: "sort",
options: [
{
text: "Sort by label",
by: "label",
dir: "asc"
},
{
text: "Sort by description",
by: "description",
dir: "desc"
}
]
},
]
方法
- Kanban 的
api.getState()方法有如下变更:
v1.4 之前
api.getState();
// 方法返回包含以下属性的对象
/*{
areasMeta: object,
before: string | number,
cardShape: object,
cards: array,
cardsMap: object,
cardsMeta: object,
columnKey: string,
columns: array,
dragItemId: string | number,
dragItemsCoords: array,
edit: object,
editorShape: array,
fromAreaMeta: object,
overAreaId: string | number,
readonly: object,
rowKey: string,
rows: array,
scroll: object,
search: object,
selected: array,
sort: object,
dropAreaItemsCoords: array,
dropAreasCoords: array,
overAreaMeta: object,
}*/
v1.4 起
api.getState();
// 方法返回包含以下属性的对象
/*{
areasMeta: object,
before: string | number,
cardShape: object,
cards: array,
cardsMap: object,
cardsMeta: object,
columnKey: string,
columns: array,
dragItemId: string | number,
dragItemsCoords: array,
edit: object,
editorShape: array,
fromAreaMeta: object,
overAreaId: string | number,
readonly: object,
rowKey: string,
rows: array,
scroll: object,
search: object,
selected: array,
sort: object,
}*/
1.2 -> 1.3
Api
属性
-
Kanban 的
editorShape属性有如下变更:- dateRange 参数
v1.3 之前{
type: "date",
key: "start_date",
label: "Start date"
},
// 其他参数v1.3 起{
type: "dateRange", // 或可使用 "date" 类型
key: {
start: "start_date",
end: "end_date"
},
label: "Date Range"
},
// 其他参数 -
工具栏的
items属性有如下变更:
v1.3 之前
items: [
"search",
"spacer",
"sort",
"addColumn",
"addRow"
]
v1.3 起
items: [
"search",
"spacer",
"undo",
"redo",
"sort",
"addColumn",
"addRow"
]
方法
- Kanban 的
updateCard()方法有如下变更:
v1.3 之前
updateCard({
id: 1,
card: {
label: "New Label",
row: "feature",
column: "inprogress",
/*other parameters*/
}
});
v1.3 起
updateCard({
id: 1,
card: {
label: "New Label",
row: "feature",
column: "inprogress",
/*other parameters*/
},
replace: true
});
- Kanban 的
updateColumn()方法有如下变更:
v1.3 之前
updateColumn({
id: "backlog",
column: {
label: "Updated column",
limit: 3,
strictLimit: 3,
collapsed: true
}
});
v1.3 起
updateColumn({
id: "backlog",
column: {
label: "Updated column",
limit: 3,
strictLimit: 3,
collapsed: true
},
replace: true
});
- Kanban 的
updateRow()方法有如下变更:
v1.3 之前
updateRow({
id: "feature",
row: {
label: "Updated row",
collapsed: true
},
});
v1.3 起
updateColumn({
id: "feature",
row: {
label: "Updated row",
collapsed: true
},
replace: true
});
1.1 -> 1.2
Api
属性
-
Kanban 的
cardShape属性有如下变更:- menu 参数
v1.2 之前menu: true,
//或
menu: { show: true }
// 其他参数v1.2 起menu: true,
// 或
menu: {
show: true,
items: ({ card, store }) => {
if(card.id === 1){
return false;
} else {
return [
{ id: "set-edit", icon: "wxi-edit", label: "Edit" },
{ id: "delete-card", icon: "wxi-delete", label: "Delete" }
];
}
}
},
// 其他参数- users 参数
v1.2 之前users: {
show: true,
values: [
{
id: 1,
label: "John Smith",
path: "../assets/user.jpg"
},
]
},
// 其他参数v1.2 起users: {
show: true,
values: [
{
id: 1,
label: "John Smith",
avatar: "../assets/user.jpg"
},
]
},
// 其他参数- start_date 和 end_date 参数
v1.2 之前start_date: true,
end_date: true,
// 其他参数v1.2 起start_date: {
show: true,
format: "%d.%m.%Y"
},
end_date: {
show: true,
format: "%d.%m.%Y"
},
// 其他参数 -
Kanban 的
editorShape属性有如下变更:
v1.2 之前
{
type: "multiselect",
key: "users",
label: "Users",
values: [
{
id: 1, label: "Alan",
path: "preview_image_path_1.png"
},
]
},
// 其他字段设置
v1.2 起
{
type: "multiselect",
key: "users",
label: "Users",
values: [
{
id: 1, label: "Alan",
avatar: "preview_image_path_1.png"
},
]
},
// 其他字段设置
- 工具栏的
items属性有如下变更:
v1.2 之前
items: [
"search",
"controls"
]
v1.2 起
items: [
{ // 或 "search",
type: "search",
options: [
{
id: "label",
label: "By label"
},
{
id: "start_date",
label: "By date",
searchRule: (card, value, by) => {
const date = card[by];
return date?.toString().includes(value);
}
}
]
},
"spacer",
{ // 或 "sort",
type: "sort",
options: [
{
label: "Sort by label",
by: "label",
dir: "asc"
},
{
label: "Sort by description",
by: "description",
dir: "desc"
}
]
},
"addColumn",
"addRow"
]