Migration to newer versions

1.5.13 -> 1.6.0

Some changes were made to the CSS classes for the menu:

    .menu -> .wx-menu
    .item -> .wx-item
    .icon -> .wx-icon
    .value -> .wx-value

1.5.12 -> 1.5.13

The CSS classes used by the editor were updated:

    .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

Methods

The setLocale method for the Kanban toolbar has a new way to apply a locale:

Before v1.5.7
    // create Kanban
    const board = new kanban.Kanban("#root", {...});
    // create Toolbar
    const toolbar = new kanban.Toolbar("#toolbar", { api: board.api });
    // apply the "de" locale to Toolbar
    toolbar.setLocale(de); // or null to reset the locale to the default one (en)

From v1.5.7
    // create Kanban
    const board = new kanban.Kanban("#root", {...});
    // create Toolbar
    const toolbar = new kanban.Toolbar("#toolbar", { api: board.api });
    // apply the "de" locale to the Toolbar
    toolbar.setLocale(de, board.api);

1.4 -> 1.5

Api

Properties

The columnShape property in Kanban got this change:

Before v1.5
{
  menu: {
    show: true,
    items: [
      {
      label: "Update", ...
      }
    ]
    // other parameters
  }
}

From v1.5
{
  menu: {
    show: true,
    items: [
      {
      text: "Update", ...
      }
    ]
    // other parameters
  },
  fixedHeaders: true
}

1.3 -> 1.4

Api

Properties

The editorShape property for Kanban now works like this:

Before v1.4
{
  type: "date",
  key: "start_date",
  label: "Start date"
},
// other parameters

From v1.4
{
  type: "date", // or you can also use the "dateRange" type
  key: "start_date",
  label: "Date Range"
  format: "%d/%m/%y"
},
{
  type: "comments",
  key: "comments",
  label: "Comments",
  config: {
    format: "%M %d",
    placement: "page", // or "editor"
    html: true,
  },
},
{
  type: "links",
  key: "links",
  label: "Links",
},
// other parameters

Update to the cardShape property:

Before v1.4
{
  label: true,
  description: true,
  menu: {
    items: [
      {
      label: "Delete", ...
      }
    ]
  }
  // other parameters
}

From v1.4
{
  label: true,
  description: true,
  menu: {
    items: [
      {
      text: "Delete", ...
      }
    ]
  },
  votes: true,
  comments: true,
  css: (card) => card.type == "feature" ? "green" : "red",
  // other parameters
}

Update to the columnShape property:

Before v1.4
{
  menu: {
  show: true,
  items: [
    {
      label: "Delete", ...
    }
  ]
  // other parameters
  }
}

From v1.4
{
  menu: {
    show: true,
    items: [
      {
        text: "Delete", ...
      }
    ]
    // other parameters
  },
  css: (column, cards) => column.id == "feature" && cards.length < 5 ? "green" : "red"
}

Update to the rowShape property:

Before v1.4
{
  menu: {
  show: true,
  items: [
    {
    label: "Delete", ...
    }
  ]
  // other parameters
  }
}

From v1.4
{
  menu: {
    show: true,
    items: [
      {
        text: "Delete", ...
      }
    ]
    // other parameters
  },
  css: (row, cards) => row.id == "task" && cards.length < 5 ? "green" : "red",
}

The cards property now looks like this:

Before v1.4
[
  {
    id: 1,
    label: "Integration with React",
    description: "Some description",
    // other parameters
  }, ...
]

From 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(),
      },{...}
    ]
    // other parameters
  }, ...
]

The columns property now has some new options:

Before v1.4
[
  {
    id: "inprogress",
    label: "In progress",
    // other parameters
  }, ...
]

From 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>`)
// other parameters
  }, ...
]

The rows property now allows for a css option:

Before v1.4
[
  {
    id: "features",
    label: "Features",
    // other parameters
  }, ...
]

From v1.4
[
  {
    id: "features",
    label: "Features",
    css: "green"
    // other parameters
  }, ...
]

The cardTemplate property update:

Before 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,
});

From 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)),
  // other parameters
});

The sort control in items for the Kanban Toolbar has a new style:

Before v1.4
[
  {
    // custom sort control
    type: "sort",
    options: [
      {
        label: "Sort by label",
        by: "label",
        dir: "asc",
      },
      {
        label: "Sort by description",
        by: "description",
        dir: "desc",
      },
    ],
  },
];

From v1.4
[
  {
    // custom sort control
    type: "sort",
    options: [
      {
        text: "Sort by label",
        by: "label",
        dir: "asc",
      },
      {
        text: "Sort by description",
        by: "description",
        dir: "desc",
      },
    ],
  },
];

Methods

The api.getState() method in Kanban now returns fewer properties:

Before v1.4
api.getState();
// the method returns an object with the following properties
/*{
    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,
}*/

From v1.4
api.getState();
// the method returns an object with the following properties
/*{
    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

Properties

The editorShape property now supports a dateRange parameter:

Before v1.3
{
  type: "date",
  key: "start_date",
  label: "Start date"
},
// other parameters

From v1.3
{
  type: "dateRange", // or you can also use the "date" type
  key: {
    start: "start_date",
    end: "end_date"
  },
  label: "Date Range"
},
// other parameters

The items property of Toolbar now includes "undo" and "redo":

Before v1.3
items: ["search", "spacer", "sort", "addColumn", "addRow"];

From v1.3
items: ["search", "spacer", "undo", "redo", "sort", "addColumn", "addRow"];

Methods

The updateCard() method now takes an extra option:

Before v1.3
updateCard({
  id: 1,
  card: {
    label: "New Label",
    row: "feature",
    column: "inprogress",
    /*other parameters*/
  },
});

From v1.3
updateCard({
  id: 1,
  card: {
    label: "New Label",
    row: "feature",
    column: "inprogress",
    /*other parameters*/
  },
  replace: true,
});

The updateColumn() method also supports a new argument:

Before v1.3
updateColumn({
  id: "backlog",
  column: {
    label: "Updated column",
    limit: 3,
    strictLimit: 3,
    collapsed: true,
  },
});

From v1.3
updateColumn({
  id: "backlog",
  column: {
    label: "Updated column",
    limit: 3,
    strictLimit: 3,
    collapsed: true,
  },
  replace: true,
});

The updateRow() method now includes the replace option:

Before v1.3
updateRow({
  id: "feature",
  row: {
    label: "Updated row",
    collapsed: true,
  },
});

From v1.3
updateColumn({
  id: "feature",
  row: {
    label: "Updated row",
    collapsed: true,
  },
  replace: true,
});

1.1 -> 1.2

Api

Properties

The cardShape property was improved:
- for the menu parameter

Before v1.2
menu: true,
//or
menu: { show: true }
// other parameters

From v1.2
menu: true,
// or
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" }
      ];
    }
  }
},
// other parameters

for the users parameter

Before v1.2
users: {
  show: true,
    values: [
      {
      id: 1,
      label: "John Smith",
      path: "../assets/user.jpg"
      },
    ]
  },
// other parameters

From v1.2
users: {
  show: true,
  values: [
    {
      id: 1,
      label: "John Smith",
      avatar: "../assets/user.jpg"
    },
  ]
},
// other parameters

for start_date and end_date parameters

Before v1.2
start_date: true,
end_date: true,
// other parameters

From v1.2
start_date: {
  show: true,
  format: "%d.%m.%Y"
},
end_date: {
  show: true,
  format: "%d.%m.%Y"
},
// other parameters

The editorShape property now uses "avatar" instead of "path":

Before v1.2
{
    type: "multiselect",
    key: "users",
    label: "Users",
    values: [
        {
            id: 1, label: "Alan",
            path: "preview_image_path_1.png"
        },
    ]
},
// settings of other fields

From v1.2
{
    type: "multiselect",
    key: "users",
    label: "Users",
    values: [
        {
            id: 1, label: "Alan",
            avatar: "preview_image_path_1.png"
        },
    ]
},
// settings of other fields

The items property of Toolbar has some new features:

Before v1.2
items: ["search", "controls"];

From v1.2
items: [
  {
    // or "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",
  {
    // or "sort",
    type: "sort",
    options: [
      {
        label: "Sort by label",
        by: "label",
        dir: "asc",
      },
      {
        label: "Sort by description",
        by: "description",
        dir: "desc",
      },
    ],
  },
  "addColumn",
  "addRow",
];

Methods

The setLocale() method in Kanban and the setLocale() method in Toolbar are now a bit different:

Before v1.2
setLocale(kanban.en); // reset to default locale

From v1.2
setLocale(null); // reset to default locale

The api.getReactiveState() method in Kanban now returns more state properties:

Before v1.2
api.getReactiveState();
// the method returns an object with the following properties
/*{
    dragItemId: {
        subscribe: any,
        update: any,
        set: any
    },
    before: {...},
    overAreaId: {...},
    overAreaMeta: {...},
    dropAreaItemsCoords: {...},
    dropAreasCoords: {...},
    dragItemsCoords: {...},
    selected: {...}
}*/

From v1.2
api.getReactiveState();
// the method returns an object with the following properties
/*{
    areasMeta: {
        subscribe: any,
        update: any,
        set: any
    },
    before: {...},
    cardShape: {...},
    cards: {...},
    cardsMap: {...},
    cardsMeta: {...},
    columnKey: {...},
    columns: {...},
    dragItemId: {...},
    dragItemsCoords: {...},
    dropAreaItemsCoords: {...},
    dropAreasCoords: {...},
    edit: {...},
    editorShape: {...},
    fromAreaMeta: {...},
    overAreaId: {...},
    overAreaMeta: {...},
    readonly: {...},
    rowKey: {...},
    rows: {...},
    scroll: {...},
    search: {...},
    selected: {...},
    sort: {...}
}*/

The api.getState() method in Kanban now returns a more detailed state object:

Before v1.2
api.getState();
// the method returns an object with the following properties
/*{
    dragItemId: string | number,
    before: string | number,
    overAreaId: string | number,
    overAreaMeta: object,
    dropAreaItemsCoords: array,
    dropAreasCoords: array,
    dragItemsCoords: array,
    selected: array
}*/

From v1.2
api.getState();
// the method returns an object with the following properties
/*{
    areasMeta: object,
    before: string | number,
    cardShape: object,
    cards: array,
    cardsMap: object,
    cardsMeta: object,
    columnKey: string,
    columns: array,
    dragItemId: string | number,
    dragItemsCoords: array,
    dropAreaItemsCoords: array,
    dropAreasCoords: array,
    edit: object,
    editorShape: array,
    fromAreaMeta: object,
    overAreaId: string | number,
    overAreaMeta: object,
    readonly: object,
    rowKey: string,
    rows: array,
    scroll: object,
    search: object,
    selected: array,
    sort: object
}*/

The api.getStores() method in Kanban now only returns the state store:

Before v1.2
api.getStores();
// the method returns an object with the following stores
/*{
    state: StateStore, // ( object )
    data: DataStore // ( object )
}*/

From v1.2
api.getStores();
// the method returns an object with the following properties
/*{
    state: StateStore, // ( object )
}*/

Localization

Before v1.2

const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];
const monthsShort = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];
const wx = {
  Today: "Today",
  Clear: "Clear",
  Close: "Close",
};
const en = {
  lang: "en",
  __dates: {
    months,
    monthsShort,
    days,
  },
  wx,
  kanban: {
    Save: "Save",
    Close: "Close",
    Delete: "Delete",
    Name: "Name",
    Description: "Description",
    Type: "Type",
    "Start date": "Start date",
    "End date": "End date",
    Result: "Result",
    "No results": "No results",
    Search: "Search",
    "Search in": "Search in",
    "Add new row": "Add new row",
    "Add new column": "Add new column",
    "Add new card": "Add new card",
    "Edit card": "Edit card",
    Edit: "Edit",
    Everywhere: "Everywhere",
    Label: "Label",
    Status: "Status",
    Color: "Color",
    Date: "Date",
    Untitled: "Untitled",
    Rename: "Rename",
  },
};

From v1.2

const en = {
  kanban: {
    // translations of the Kanban labels
    Save: "Save",
    Close: "Close",
    Delete: "Delete",
    Name: "Name",
    Description: "Description",
    Type: "Type",
    "Start date": "Start date",
    "End date": "End date",
    Result: "Result",
    "No results": "No results",
    Search: "Search",
    "Search in": "Search in",
    "Add new row": "Add new row",
    "Add new column": "Add new column",
    "Add new card": "Add new card",
    "Edit card": "Edit card",
    Edit: "Edit",
    Everywhere: "Everywhere",
    Label: "Label",
    Status: "Status",
    Color: "Color",
    Date: "Date",
    Untitled: "Untitled",
    Rename: "Rename",
    "Move up": "Move up",
    "Move down": "Move down",
    "Move left": "Move left",
    "Move right": "Move right",
    Sort: "Sort",
    "Label (a-z)": "Label (a-z)",
    "Label (z-a)": "Label (z-a)",
    "Description (a-z)": "Description (a-z)",
    "Description (z-a)": "Description (z-a)",
  },
  calendar: {
    // translations and settings of the calendar
    monthFull: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ],
    monthShort: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
    dayFull: [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
    ],
    dayShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    hours: "Hours",
    minutes: "Minutes",
    done: "Done",
    clear: "Clear",
    today: "Today",
    am: ["am", "AM"],
    pm: ["pm", "PM"],
    weekStart: 7,
    timeFormat: 24,
  },
  core: {
    // translations of the core elements
    ok: "OK",
    cancel: "Cancel",
  },
};

1.0 -> 1.1

Api

Properties

The columns property added a few more parameters starting from v1.1: collapsed, limit and strictLimit.

Before v1.1
const columns = [
    {
        label: "Backlog",
        id: "backlog"
    }, ...
];

From v1.1
const columns = [
    {
        label: "Backlog",
        id: "backlog",
        collapsed: true,
        limit: 3,
        strictLimit: true
    }, ...
];

new kanban.Kanban("#root", {
    columns,
    // other parameters
});

The color parameter in cardShape got a tweak.

Before v1.1
const cardShape = {
  color: {
    show: true,
    values: [
      { id: 1, color: "#65D3B3", label: "red" },
      { id: 2, color: "#FFC975", label: "green" },
    ],
  },
};

From v1.1
const cardShape = {
  color: {
    show: true,
    values: ["#65D3B3", "#FFC975", "#58C3FE"],
  },
};

new kanban.Kanban("#root", {
  cardShape,
  // other parameters
});

Methods

The addColumn method (and add-column event) is now initialized a bit differently:

Before v1.1
addColumn(column_data_object);

From v1.1
addColumn({
    id: "backlog",
    column: {
        label: "Backlog",
        collapsed: false,
        ...
    }
});

The addRow method (and add-row event) also updated:

Before v1.1
addRow(row_data_object);

From v1.1
addRow({
    id: "feature",
    row: {
        label: "Feature",
        collapsed: false,
        ...
    }
});

The updateColumn method (and update-column event) changed as follows:

Before v1.1
updateColumn(column_data_object);

From v1.1
updateColumn({
    id: "backlog",
    column: {
        label: "Backlog",
        collapsed: true,
        ...
    }
});

The updateRow method (and update-row event) also has an updated format:

Before v1.1
updateRow(row_data_object);

From v1.1
updateRow({
    id: "feature",
    row: {
        label: "Feature",
        collapsed: true,
        ...
    }
});

The updateCard method (and update-card event) is now set up like this:

Before v1.1
updateCard(card_data_object);

From v1.1
updateCard({
    id: 1,
    card: {
        label: "Volvo XC 70",
        progress: 26
        ...
    }
});

The parse method now works without needing to reset the initial data first:

Before v1.1
// you need to reset initial data befor parsing new one
const board = new kanban.Kanban("#root", {
  columns: [],
  cards: [],
  rows: [],
});

board.parse({
  columns,
  cards,
  rows,
});

From v1.1
// you don't need to reset initial data befor parsing new one
const board = new kanban.Kanban("#root", {});

board.parse({
  columns,
  cards,
  rows,
});

1.5.13 -> 1.6.0​

1.5.12 -> 1.5.13​

1.5.6 -> 1.5.7​

Api​

Methods​

1.4 -> 1.5​

Api​

Properties​

1.3 -> 1.4​

Api​

Properties​

Methods​

1.2 -> 1.3​

Api​

Properties​

Methods​

1.1 -> 1.2​

Api​

Properties​

Methods​

Localization​

1.0 -> 1.1​

Api​

Properties​

Methods​

1.5.13 -> 1.6.0

1.5.12 -> 1.5.13

1.5.6 -> 1.5.7

Api

Methods

1.4 -> 1.5

Api

Properties

1.3 -> 1.4

Api

Properties

Methods

1.2 -> 1.3

Api

Properties

Methods

1.1 -> 1.2

Api

Properties

Methods

Localization

1.0 -> 1.1

Api

Properties

Methods