Merge pull request #41 from DHTMLX/sp-next-defaultmenus

[update] default options

docs/api/config/js_kanban_cards_config.md

@@ -45,11 +45,10 @@ cards?: [
                 cardId: string | number,
                 text?: string,
                 date?: Date,
-            },{...}
+            }, {...}
         ], 
         [custom_key: string]?: any
-    },
-    {...} // other cards data
+    }, {...} // other cards data
 ];
 ~~~
 
@@ -125,7 +124,7 @@ const cards = [
                 cardId: 1,
                 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 comments
         ],
         priority: 1,
         // custom field to place the card into the "feature" row 
@@ -135,7 +134,7 @@ const cards = [
         // the columnKey config needs to be set to the "stage" value
         stage: "backlog",
         css: "red",
-    },{...} // other cards data
+    }, {...} // other cards data
 ];
 
 new kanban.Kanban("#root", {
@@ -151,4 +150,4 @@ new kanban.Kanban("#root", {
 - [Working with data](../../../guides/working_with_data)
 - [updateCard()](api/methods/js_kanban_updatecard_method.md)
 
-**Related sample:** [Kanban. Styling cards](https://snippet.dhtmlx.com/qu6rpktk?tag=kanban)
+**Related sample:** [Kanban. Styling cards](https://snippet.dhtmlx.com/qu6rpktk?tag=kanban)

docs/api/config/js_kanban_cardshape_config.md

@@ -200,51 +200,47 @@ Unless you specify the cards settings via the **cardShape** property, the widget
 
 ~~~jsx {}
 const defaultPriorities = [
-    { id: 1, color: "#FF5252", label: "high" },
-    { id: 2, color: "#FFC975", label: "medium" },
-    { id: 3, color: "#0AB169", label: "low" }
+    { id: 1, color: "#FE6158", label: "High" },
+    { id: 2, color: "#F1B941", label: "Medium" },
+    { id: 3, color: "#77D257", label: "Low" }
 ];
 
-const defaultColors = ["#65D3B3", "#FFC975", "#58C3FE"];
+const defaultColors = ["#33B0B4", "#0096FA", "#F1B941"];
+
+export const getDefaultCardMenuItems = ({ store }: { store: DataStore }) => {
+    const { readonly } = store.getState();
+    const baseItems = [
+        { id: "duplicate-card", icon: "wxi-content-copy", text: "Duplicate" },
+        { id: "delete-card", icon: "wxi-delete-outline", text: "Delete" }
+    ];
 
-const getDefaultCardMenuItems = ({ card, store }) => {
-    const readonly = store.getState();
     if (!readonly?.select && readonly?.edit) {
         return [
-            { id: "set-edit", icon: "wxi-edit", text: "Edit" },
-            { id: "delete-card", icon: "wxi-delete", text: "Delete" },
+            { id: "set-edit", icon: "wxi-edit-outline", text: "Edit" },
+            ...baseItems,
         ];
     }
-    return [{ id: "delete-card", icon: "wxi-delete", text: "Delete" }];
+    return baseItems;
 };
 
 const defaultCardShape = {
-    label: true,
-    description: false,
-    progress: false,
-    start_date: false,
-    end_date: false,
-    menu: {
-        show: true,
-        items: getDefaultCardMenuItems
-    },
-    attached: false,
-    cover: false,
-    comments: false,
-    color: {
+    label: { show: true },
+    description: { show: false },
+    progress: { show: false },
+    start_date: { show: false },
+    end_date: { show: false },
+    users: { show: false },
+    priority: { 
         show: false,
-        values: defaultColors
+        values: defaultPriorities
     },
-    users: {
+    color: { 
         show: false,
-        maxCount: 2
-    },
-    priority: {
-        show: false,
-        values: defaultPriorities
+        values: defaultColors
     },
-    comments: false,
-    votes: false
+    cover: { show: false },
+    attached: { show: false },
+    menu: { show: true }
 };
 ~~~
 
@@ -293,7 +289,7 @@ const cardShape = { // card settings
     },
     css: (card) => card.type == "feature" ? "green" : "red",
     headerFields: [
-        { // custom field
+        {   // custom field
             key: "sprint",
             css: "custom_style",
             label: "Sprint"

docs/api/config/js_kanban_cardtemplate_config.md

@@ -70,4 +70,4 @@ new kanban.Kanban("#root", {
 
 **Related articles:** [Customization](../../../guides/customization#custom-cards)
 
-**Related sample:** [Kanban. Custom card](https://snippet.dhtmlx.com/8rhdq81d?tag=kanban)
+**Related sample:** [Kanban. Custom card](https://snippet.dhtmlx.com/8rhdq81d?tag=kanban)

docs/api/config/js_kanban_columns_config.md

@@ -106,4 +106,4 @@ new kanban.Kanban("#root", {
 **Related samples:**
 - [Kanban. Limits for columns and swimlanes](https://snippet.dhtmlx.com/2blo6hx8?tag=kanban)
 - [Kanban. Changing color of column via custom menu](https://snippet.dhtmlx.com/fnlvd2g5?tag=kanban)
-- [Kanban. Disabling drag and drop to specific columns](https://snippet.dhtmlx.com/nfv59yif?tag=kanban)
+- [Kanban. Disabling drag and drop to specific columns](https://snippet.dhtmlx.com/nfv59yif?tag=kanban)

docs/api/config/js_kanban_currentuser_config.md

@@ -33,4 +33,4 @@ new kanban.Kanban("#root", {
 
 **Change log:** The property was added in v1.4
 
-**Related sample:** [Kanban. Swimlanes, comments, votes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)
+**Related sample:** [Kanban. Swimlanes, comments, votes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)

docs/api/config/js_kanban_editor_config.md

@@ -32,8 +32,8 @@ editor?: {
 
 ~~~jsx {}
 editor: {
+    debounce: 100,
     autoSave: true,
-    debounce: 100
     placement: "sidebar"
 }
 ~~~

docs/api/config/js_kanban_editorshape_config.md

@@ -316,10 +316,10 @@ where `rec` is the only parameter of the function and is an extended `PointerEve
 
 ~~~jsx {}
 interface UploadEvent extends PointerEvent {
-	id: number;
-	status: "client" | "server" | "error"; // which means in plain English "not sent yet", "sent successfully", "something went wrong, so not sent"
-	name: string; // the name of the file
-	file: string | Blob; // the file
+    id: number;
+    status: "client" | "server" | "error"; // which means in plain English "not sent yet", "sent successfully", "something went wrong, so not sent"
+    name: string; // the name of the file
+    file: string | Blob; // the file
 }
 ~~~
 
@@ -348,21 +348,57 @@ Unless you specify the editor settings via the `editorShape` property, the widge
 
 ~~~jsx {}
 const defaultPriorities = [
-    { id: 1, color: "#FF5252", label: "high" },
-    { id: 2, color: "#FFC975", label: "medium" },
-    { id: 3, color: "#0AB169", label: "low" }
+    { id: 1, color: "#FE6158", label: "High" },
+    { id: 2, color: "#F1B941", label: "Medium" },
+    { id: 3, color: "#77D257", label: "Low" }
 ];
 
-const defaultColors = [ "#65D3B3", "#FFC975", "#58C3FE" ];
+const defaultColors = ["#33B0B4", "#0096FA", "#F1B941"];
 
 const defaultEditorShape = [
-    { key: "label", type: "text", label: "Label" },
-    { key: "description", type: "textarea", label: "Description" },
-    { key: "priority", type: "combo", label: "Priority", values: defaultPriorities },
-    { key: "color", type: "color", label: "Color", values: defaultColors },
-    { key: "progress", type: "progress", label: "Progress" },
-    { key: "start_date", type: "date", label: "Start date" },
-    { key: "end_date", type: "date", label: "End date" }
+    {
+        key: "label",
+        type: "text",
+        label: "Label"
+    },
+    {
+        key: "description",
+        type: "textarea",
+        label: "Description"
+    },
+    {
+        type: "combo",
+        label: "Priority",
+        key: "priority",
+        config: {
+            clearButton: true
+        }
+    },
+    {
+        type: "color",
+        label: "Color",
+        key: "color"
+    },
+    {
+        type: "progress",
+        key: "progress",
+        label: "Progress"
+    },
+    {
+        type: "date",
+        key: "start_date",
+        label: "Start date"
+    },
+    {
+        type: "date",
+        key: "end_date",
+        label: "End date"
+    },
+    {
+        type: "multiselect",
+        key: "users",
+        label: "Users"
+    }
 ];
 ~~~
 

docs/api/config/js_kanban_history_config.md

@@ -43,4 +43,4 @@ new kanban.Kanban("#root", {
 
 **Change log:** The property was added in v1.3
 
-**Related articles:** [`undo()`](api/methods/js_kanban_undo_method.md) and [`redo()`](api/methods/js_kanban_redo_method.md)
+**Related articles:** [`undo()`](api/methods/js_kanban_undo_method.md) and [`redo()`](api/methods/js_kanban_redo_method.md)

docs/api/config/js_kanban_links_config.md

@@ -18,9 +18,8 @@ links?: [
         id: string | number,
         masterId: string | number,
         slaveId: string | number,
-        relation: "relatesTo" | "requiredFor" | "duplicate" | "parent",
-    },    
-    {...} // other links data
+        relation: "relatesTo" | "requiredFor" | "duplicate" | "parent"
+    }, {...} // other links data
 ];
 ~~~
 
@@ -50,8 +49,7 @@ const links = [
         masterId: 2,
         slaveId: 5,
         relation: "relatesTo",
-    },
-    {...}
+    }, {...} // other link data
 ];
 
 new kanban.Kanban("#root", {

docs/api/config/js_kanban_locale_config.md

@@ -42,4 +42,4 @@ const board = new kanban.Kanban("#root", {
 
 **Related articles:** [Localization](../../../guides/localization)
 
-**Related sample:** [Kanban. Localization](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban)
+**Related sample:** [Kanban. Localization](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban)

docs/api/config/js_kanban_rendertype_config.md

@@ -46,4 +46,4 @@ new kanban.Kanban("#root", {
 
 **Related articles:** [Configuration](../../../guides/configuration#cards)
 
-**Related sample:** [Kanban. Fixed headers, lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban)
+**Related sample:** [Kanban. Fixed headers, lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban)

docs/api/config/js_kanban_rowkey_config.md

@@ -43,4 +43,4 @@ new kanban.Kanban("#root", {
 });
 ~~~
 
-**Related sample:** [Kanban. Swimlanes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)
+**Related sample:** [Kanban. Swimlanes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)

docs/api/config/js_kanban_rows_config.md

@@ -19,8 +19,7 @@ rows?: [
         label?: string,
         collapsed?: boolean,
         css?: string,
-    },
-    {...} // other rows data
+    }, {...} // other row data
 ];
 ~~~
 
@@ -63,4 +62,4 @@ new kanban.Kanban("#root", {
 - [Working with data](../../../guides/working_with_data)
 - [updateRow()](api/methods/js_kanban_updaterow_method.md)
 
-**Related sample:** [Kanban. Swimlanes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)
+**Related sample:** [Kanban. Swimlanes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)

docs/api/config/js_kanban_rowshape_config.md

@@ -23,8 +23,7 @@ rowShape?: {
                 text?: string,
                 disabled? boolean,
                 onClick?: ({ id, item, row }) => void
-            }, 
-            {...}
+            }, {...} // other item data
         ] | ({ row, rowIndex, rows, store }) => array | boolean
     },
     css?: (row, cards) => string
@@ -70,12 +69,12 @@ To configure the rows appearance, in the **rowShape** object you can specify the
             {
                 id: "custom-delete-row",
                 icon: "wxi-delete",
-                text: "Remove row",
+                text: "Remove row"
             },
             {
                 id: "custom-move-row:up",
                 icon: "wxi-arrow-up",
-                text: "Move up",
+                text: "Move up"
             }
         ]
     }

docs/api/config/js_kanban_theme_config.md

@@ -98,4 +98,4 @@ const board = new kanban.Kanban("#root", {
 **Related sample:**
 - [Kanban. Using themes](https://snippet.dhtmlx.com/jnw54xif?tag=kanban)
 - [Kanban. Including a theme as a stylesheet](https://snippet.dhtmlx.com/k3iw6ti0?tag=kanban)
-- [Kanban. Changing a theme via the CSS class](https://snippet.dhtmlx.com/7qzp561m?tag=kanban)
+- [Kanban. Changing a theme via the CSS class](https://snippet.dhtmlx.com/7qzp561m?tag=kanban)

docs/api/config/toolbar_api_config.md

@@ -35,4 +35,4 @@ new kanban.Toolbar("#toolbar", {
 
 **Related articles:** [Configuration](../../../guides/configuration#toolbar)
 
-**Related sample:** [Kanban. Custom toolbar](https://snippet.dhtmlx.com/s5r5h4ju?tag=kanban)
+**Related sample:** [Kanban. Custom toolbar](https://snippet.dhtmlx.com/s5r5h4ju?tag=kanban)

docs/api/config/toolbar_items_config.md

@@ -136,8 +136,7 @@ items: [
                 dir: "desc"
             }
         ]
-    },
-    // other controls
+    }, {...} // other controls
 ]
 ~~~
 :::

docs/api/config/toolbar_locale_config.md

@@ -44,4 +44,4 @@ new kanban.Toolbar("#toolbar", {
 
 **Related articles:** [Localization](../../../guides/localization)
 
-**Related sample:** [Kanban. Localization](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban)
+**Related sample:** [Kanban. Localization](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban)

docs/api/config/toolbar_theme_config.md

@@ -82,4 +82,4 @@ new Toolbar("#toolbar", {
 **Related sample:**
 - [Kanban. Using themes](https://snippet.dhtmlx.com/jnw54xif?tag=kanban)
 - [Kanban. Including a theme as a stylesheet](https://snippet.dhtmlx.com/k3iw6ti0?tag=kanban)
-- [Kanban. Changing a theme via the CSS class](https://snippet.dhtmlx.com/7qzp561m?tag=kanban)
+- [Kanban. Changing a theme via the CSS class](https://snippet.dhtmlx.com/7qzp561m?tag=kanban)

docs/news/whats_new.md

@@ -20,7 +20,7 @@ Released on November 13, 2024
 - The ability to change the content of column headers via the [`columnShape`](../../api/config/js_kanban_columnshape_config) property (see the [**example**](https://snippet.dhtmlx.com/gq2saz9c?tag=kanban))
 - The ability to change the view and content of search results via the [`items.searchResult`](../../api/config/toolbar_items_config) property of the Toolbar **search** control (see the [**example**](https://snippet.dhtmlx.com/2uo2f5mf?tag=kanban))
 - The ability to display the editor as a modal window via the [`editor.placement`](../../api/config/js_kanban_editor_config) property (see the [**example**](https://snippet.dhtmlx.com/vt6pe7qz?tag=kanban))
-- The ability to enable voting for a card (using the vote icon on the card) via the [`cardShape.votes.clicable`](../../api/config/js_kanban_cardshape_config) property (see the [**example**](https://snippet.dhtmlx.com/en76xvi4?tag=kanban))
+- The ability to enable voting for a card (using the vote icon on the card) via the [`cardShape.votes.clickable`](../../api/config/js_kanban_cardshape_config) property (see the [**example**](https://snippet.dhtmlx.com/en76xvi4?tag=kanban))
 - The ability to apply a theme via the [`setTheme()`](../../api/methods/js_kanban_settheme_method) method
 
 ### Updates