Merge pull request #67 from DHTMLX/sp-release-1-7

Whats new before v1.7.0

Author: serhiipylypchuk1991

.github/workflows/main.yml

@@ -6,7 +6,7 @@ name: Deploy To Site
 on:
   # Triggers the workflow on push or pull request events but only for the master branch
   push:
-    branches: [ master, next, test ]
+    branches: [master, next, test]
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
@@ -24,7 +24,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: '18.19.0'
+          node-version: "20.0"
 
       - run: yarn install
       - run: yarn build

.gitignore

@@ -18,3 +18,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+*.cjs
+.pnp.loader.mjs
+.yarn

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

docs/api/config/js_kanban_cardheight_config.md

@@ -33,6 +33,6 @@ new kanban.Kanban("#root", {
 
 **Change log:** The property was added in v1.2
 
-**Related articles:** [Configuration](../../../guides/configuration#cards)
+**Related articles:** [Configuration](guides/configuration.md#cards)
 
 **Related sample:** [Kanban. Lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban)

docs/api/config/js_kanban_cards_config.md

@@ -29,6 +29,7 @@ cards?: [
                 coverURL?: string,
                 name?: string,
                 isCover?: boolean
+                size?: number
             }, {...}
         ],
         color?: string,
@@ -69,16 +70,17 @@ For each card you can specify the following parameters (data):
     - `coverURL` - (optional) a path to the image to be set as a cover
     - `name` - (optional) a file name
     - `isCover` - (optional) enables a cover image. If **true**, the cover image will be downloaded via the "coverURL" url
+    - `size` - (optional) a size of the attached file (in bytes)
 - `color` - (optional) a valid HEX color code. It is the color of the card top line
-- `users` - (optional) an **array** with **ID**s for multiple assigned users or **string | number**  for a single assigned user. To specify the assigned users, you need to define an array with users data in the [cardShape.users](../js_kanban_cardshape_config) property. The users are displayed in the **Users** field
+- `users` - (optional) an **array** with **ID**s for multiple assigned users or **string | number**  for a single assigned user. To specify the assigned users, you need to define an array with users data in the [cardShape.users](api/config/js_kanban_cardshape_config.md) property. The users are displayed in the **Users** field
 
 :::info
-`users?: array` - specify **array** with users **ID**s, if you use the [**multiselect**](../js_kanban_editorshape_config/#--parameters-for-combo-select-and-multiselect-types) editor type to assign multiple users
+`users?: array` - specify **array** with users **ID**s, if you use the [**multiselect**](api/config/js_kanban_editorshape_config.md#--parameters-for-combo-select-and-multiselect-types) editor type to assign multiple users
 
-`users?: string | number` - specify a single **ID**, if you use the [**combo** or **select**](../js_kanban_editorshape_config/#--parameters-for-combo-select-and-multiselect-types) editor types to assign a single user
+`users?: string | number` - specify a single **ID**, if you use the [**combo** or **select**](api/config/js_kanban_editorshape_config.md#--parameters-for-combo-select-and-multiselect-types) editor types to assign a single user
 :::
 
-- `priority` - (optional) a card priority **ID**. To specify the card priority, you need to define an array with priorities data in the [cardShape.priority](../js_kanban_cardshape_config) property. It is displayed in the **Priority** field
+- `priority` - (optional) a card priority **ID**. To specify the card priority, you need to define an array with priorities data in the [cardShape.priority](api/config/js_kanban_cardshape_config.md) property. It is displayed in the **Priority** field
 - `css` - (optional) defines css styles for a separate card
 - `votes` - (optional) an array of user IDs
 - `comments` - (optional) an array of objects with data of comments. For each comment's object you can specify the following parameters:
@@ -87,15 +89,15 @@ For each card you can specify the following parameters (data):
     - `cardId` - (required) an **ID** of the card that the comment belongs to
     - `text` - (optional) a text of the comment. It also can contain html markup
     - `date` - (optional) a Date object (do not specify a string date). The date when the comment was posted. It is not updated after editing
-- `custom_key` - (optional) a custom key of the card. You can specify the custom keys to place the card into column and row. See the [columnKey](../js_kanban_columnkey_config) and [rowKey](../js_kanban_rowkey_config) properties
+- `custom_key` - (optional) a custom key of the card. You can specify the custom keys to place the card into column and row. See the [columnKey](../js_kanban_columnkey_config) and [rowKey](api/config/js_kanban_rowkey_config.md) properties
 
 :::info
-If you want to load new data for cards dynamically, you can use the [**parse()**](../../methods/js_kanban_parse_method) method!
+If you want to load new data for cards dynamically, you can use the [**parse()**](api/methods/js_kanban_parse_method.md) method!
 :::
 
 ### Example
 
-~~~jsx {1-40,44}
+~~~jsx {1-41,45}
 const cards = [
     {
         id: 1,
@@ -111,7 +113,8 @@ const cards = [
                 previewURL: "../assets/img-1.jpg",
                 coverURL: "../assets/img-1.jpg",
                 name: "img-1.jpg",
-                isCover: true
+                isCover: true,
+                size: 11979
             }, {...} // other attached files data
         ],
         color: "#65D3B3",
@@ -147,7 +150,7 @@ new kanban.Kanban("#root", {
 **Change log:** The ***css***, ***comments*** and ***votes*** parameters were added in v1.4
 
 **Related articles:**
-- [Working with data](../../../guides/working_with_data)
+- [Working with data](guides/working_with_data.md)
 - [updateCard()](api/methods/js_kanban_updatecard_method.md)
 
 **Related sample:** [Kanban. Styling cards](https://snippet.dhtmlx.com/qu6rpktk?tag=kanban)

docs/api/config/js_kanban_cardshape_config.md

@@ -41,10 +41,11 @@ cardShape?: {
                 icon?: string,
                 text?: string,
                 disabled? boolean,
-                onClick?: ({ id, item, card }) => void
+                onClick?: ({ id, item, card }) => void,
+                data?: array // an array of menu subitems
             }, 
             {...}
-        ] | ({ card, store }) => array | boolean
+        ] | ({ card, readonly }) => array | null
     },
     users?: boolean | {
         show?: boolean,
@@ -131,22 +132,35 @@ To configure the card appearance, in the **cardShape** object you can specify th
             - ***id*** - an ID of the current menu item
             - ***item*** - a data object of the current menu item
             - ***card*** - a data object of the target card
+        - `data` - (optional) an array of objects that represent menu subitems
 
     :::info
-    You can also set the `items` parameter to a custom function, that takes the following arguments:
+    You can also set the `menu.items` parameter to a custom function, that takes the following arguments:
     - ***card*** - a data object of a current card
-    - ***store*** - an object of *dataStore*
+    - ***readonly*** - an object of readonly [state properties](api/internal/js_kanban_getstate_method.md)
 
     This function allows customizing menu for any card or hide it for a specific one (by returning *null* or *false*):
 
     ~~~jsx {}
-    items: ({ card, store }) => {
-        if(card.id === 1)
-            return false
-        return [
-            { id: "set-edit", icon: "wxi-edit", label: "Edit" },
-            { id: "delete-card", icon: "wxi-delete", label: "Delete" }
-        ]
+    items: ({ card, readonly }) => {
+        if (card.id === 1){
+            return false;
+        }  
+
+        const menu = [];
+
+        if (!readonly.delete){
+            menu.push({ 
+                id: "delete-card", icon: "wxi-delete", label: "Delete"
+            });
+        }
+            
+        if (!readonly.edit){
+            menu.push({ 
+                id: "set-edit", icon: "wxi-edit", label: "Edit"
+            });
+        }
+        return menu.length ? menu : null;
     }
     ~~~
     :::
@@ -190,7 +204,7 @@ To configure the card appearance, in the **cardShape** object you can specify th
     - `clickable` - (optional) - makes the vote icon on the card clickable. If `true`, users can vote for the card using the vote icon on this card. Otherwise, users can vote for the card using the vote icon in the editor only
 - `css` - a function returns a css class that applies to cards conditionally
 - `headerFields` - (optional) an array of objects with the **custom fields** data. Here you can specify the following parameters:
-    - `key` - (required) a key of the custom field. It is used when configuring the Editor via the [editorShape](../js_kanban_editorshape_config) property
+    - `key` - (required) a key of the custom field. It is used when configuring the Editor via the [editorShape](api/config/js_kanban_editorshape_config.md) property
     - `label` - (optional) a label of the custom field
     - `css` - (optional) a css class of the custom field
 
@@ -209,8 +223,8 @@ const defaultPriorities = [
 
 const defaultColors = ["#33B0B4", "#0096FA", "#F1B941"];
 
-export const getDefaultCardMenuItems = ({ store }: { store: DataStore }) => {
-    const { readonly } = store.getState();
+export const getDefaultCardMenuItems = ({ readonly }: { readonly: DataStore }) => {
+    const { readonly } = readonly.getState();
     const baseItems = [
         { id: "duplicate-card", icon: "wxi-content-copy", text: "Duplicate" },
         { id: "delete-card", icon: "wxi-delete-outline", text: "Delete" }
@@ -311,10 +325,13 @@ new kanban.Kanban("#root", {
 
 **Change log:**
 - The ***comments***, ***css*** and ***votes*** parameters were added in v1.4
-- The ***menu.items[0].label*** parameter was replaced by the ***menu.items[0].text*** parameter in v1.4
+- The ***menu.items[0].label*** parameter was deprecated and replaced by the ***menu.items[0].text*** parameter in v1.4
+- The ***menu.items[0].items*** parameter was deprecated and replaced by the ***menu.items[0].data*** parameter in v1.4
 - The ***users.maxCount*** and ***votes.clickable*** parameters were added in v1.6
+- The ***menu.items[0].label*** and ***menu.items[0].items*** parameters were removed in v1.7
+- The ***menu.items*** function was updated. The **store** parameter was replaced with the **readonly** one in v1.7
 
-**Related articles:** [Configuration](../../../guides/configuration#cards)
+**Related articles:** [Configuration](guides/configuration.md#cards)
 
 **Related samples:**
 - [Kanban. Swimlanes, comments, votes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)

docs/api/config/js_kanban_cardtemplate_config.md

@@ -68,6 +68,6 @@ new kanban.Kanban("#root", {
 
 **Change log:** The ability to display context menu was added in v1.4
 
-**Related articles:** [Customization](../../../guides/customization#custom-cards)
+**Related articles:** [Customization](guides/customization.md#custom-cards)
 
 **Related sample:** [Kanban. Custom card](https://snippet.dhtmlx.com/8rhdq81d?tag=kanban)

docs/api/config/js_kanban_columns_config.md

@@ -116,7 +116,7 @@ If styles are not applied, ensure that:
 **Change log:** The **css** and **overlay** parameters were added in v1.4
 
 **Related article:**
-- [Working with data](../../../guides/working_with_data)
+- [Working with data](guides/working_with_data.md)
 - [updateColumn()](api/methods/js_kanban_updatecolumn_method.md)
 
 **Related samples:**

docs/api/config/js_kanban_columnshape_config.md

@@ -22,10 +22,11 @@ columnShape?: {
                 icon?: string,
                 text?: string,
                 disabled?: boolean,
-                onClick?: ({ id, item, column }) => void
+                onClick?: ({ id, item, column }) => void,
+                data?: array // an array of menu subitems
             }, 
             {...}
-        ] | ({ column, columnIndex, columns, store }) => array | boolean
+        ] | ({ column, columnIndex, columns, readonly }) => array | null
     },
     fixedHeaders?: boolean,
     css?: (column, cards) => string,
@@ -52,6 +53,7 @@ To configure the columns appearance, in the **columnShape** object you can speci
             - ***"move-column:left"*** - defines the action to move a column left
             - ***"move-column:right"*** - defines the action to move a column right
             - ***"delete-column"*** - defines the action to delete a column
+
         - `icon` - (optional) a class name of icon of the menu item. Here you can specify any icon related to the icon fonts (*mdi-delete*)
         - `text` - (optional) a name of the menu item
         - `disabled` - (optional) a state of the menu item (*active* or *disabled* depending on the *boolean* value)
@@ -60,29 +62,32 @@ To configure the columns appearance, in the **columnShape** object you can speci
             - ***item*** - a data object of the current menu item
             - ***column*** - a data object of the target column
 
+        - `data` - (optional) an array of objects that represent menu subitems
+
     :::info
-    You can also set the `items` parameter to a custom function, that takes the following arguments:
+    You can also set the `menu.items` parameter to a custom function, that takes the following arguments:
     - ***column*** - a data object of a current column
     - ***columnIndex*** - an index of a current column
     - ***columns*** - an array of objects containing all columns data
-    - ***store*** - an object of *dataStore*
+    - ***readonly*** - an object of readonly [state properties](api/internal/js_kanban_getstate_method.md)
 
     This function allows customizing menu for any column or hide it for a specific one (by returning *null* or *false*):
 
     ~~~jsx {}
-    items: ({ column, columnIndex, columns, store }) => {
-        if(column.id === "inprogress")
-            return null
-
-        if (column.id === "backlog") 
+    items: ({ column }) => {
+        if(column.id === "inprogress"){
+            return null;
+        } 
+        if (column.id === "backlog"){
             return [
                 { id: "set-edit", icon: "wxi-edit", text: "Rename" },
                 {
                     id: "delete-card",
                     icon: "wxi-delete",
                     text: "Remove card"
                 }
-            ]
+            ];
+        }       
     }
     ~~~
     :::
@@ -96,7 +101,7 @@ To configure the columns appearance, in the **columnShape** object you can speci
 ### Default config
 
 ~~~jsx {}
-const getDefaultColumnMenuItems = ({ column, columnIndex, columns, store }) => [
+const getDefaultColumnMenuItems = ({ column, columnIndex, columns, readonly }) => [
     { id: "add-card", icon: "wxi-plus", text: "Add new card" },
     { id: "set-edit", icon: "wxi-edit", text: "Rename" },
     {
@@ -133,7 +138,7 @@ const columnShape = {
             {
                 id: "color",
                 text: "Color",
-                items: [
+                data: [
                     { 
                         id:"yellow", 
                         text: "Yellow",
@@ -196,11 +201,14 @@ new kanban.Kanban("#root", {
 
 **Change log:**
 - The ***css*** parameter was added in v1.4
-- The ***menu.items[0].label*** parameter was replaced by the ***menu.items[0].text*** parameter in v1.4
+- The ***menu.items[0].label*** parameter was deprecated and replaced by the ***menu.items[0].text*** parameter in v1.4
+- The ***menu.items[0].items*** parameter was deprecated and replaced by the ***menu.items[0].data*** parameter in v1.4
 - The ***fixedHeaders*** parameter was added in v1.5
 - The ***headerTemplate*** and ***collapsedTemplate*** parameters were added in v1.6
+- The ***menu.items[0].label*** and ***menu.items[0].items*** parameters were removed in v1.7
+- The ***menu.items*** function was updated. The **store** parameter was replaced with the **readonly** one in v1.7
 
-**Related articles:** [Configuration](../../../guides/configuration)
+**Related articles:** [Configuration](guides/configuration.md)
 
 **Related samples:**
 - [Kanban. Changing color of column via custom menu](https://snippet.dhtmlx.com/fnlvd2g5?tag=kanban)

docs/api/config/js_kanban_editor_config.md

@@ -14,6 +14,7 @@ description: You can learn about the editor config in the documentation of the D
 
 ~~~jsx {}
 editor?: {
+    show?: boolean,
     autoSave?: boolean,
     debounce?: number,
     placement?: "sidebar" | "modal"
@@ -22,6 +23,7 @@ editor?: {
 
 ### Parameters
 
+- `show` - (optional) - enables/disables an editor
 - `autoSave` - (optional) enables/disables an autosave mode of editor
 - `debounce` - (optional) time of delay of autosaving data (works with the ***autoSave: true*** parameter only)
 - `placement` - (optional) specifies the editor placement. You can set the following values:
@@ -32,6 +34,7 @@ editor?: {
 
 ~~~jsx {}
 editor: {
+    show: true,
     debounce: 100,
     autoSave: true,
     placement: "sidebar"
@@ -45,6 +48,7 @@ new kanban.Kanban("#root", {
     columns,
     cards,
     editor: {
+        show: true
         autoSave: true,
         debounce: 2000,
         placement: "modal"