From 98b38c023eaf67807ff54baf61c6836d12a92cde Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Tue, 11 Jun 2024 11:31:39 +0400
Subject: [PATCH] [update] changes after review

---
 docs/guides/integration_with_angular.md | 52 +++++++++++++-----------
 docs/guides/integration_with_react.md   | 16 +++++---
 docs/guides/integration_with_svelte.md  | 53 +++++++++++++++----------
 docs/guides/integration_with_vue.md     | 43 +++++++++++++-------
 docs/whats_new.md                       |  4 +-
 5 files changed, 103 insertions(+), 65 deletions(-)

diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md
index b36ece0..82e14f2 100644
--- a/docs/guides/integration_with_angular.md
+++ b/docs/guides/integration_with_angular.md
@@ -37,7 +37,7 @@ cd my-angular-todo-app
 Run the app with the following commands:
 
 ~~~json
-yarn install
+yarn
 yarn start
 ~~~
 
@@ -61,13 +61,13 @@ Open the file and import To Do List source files. Note that:
 
 - if you use PRO version and install the To Do List package from a local folder, the imported paths look like this:
 
-~~~jsx
+~~~jsx title="todo.components.ts"
 import { ToDo } from 'dhx-todolist-package';
 ~~~
 
 - if you use the trial version of To Do List, specify the following paths:
 
-~~~jsx
+~~~jsx title="todo.components.ts"
 import { ToDo } from '@dhx/trial-todolist';
 ~~~
 
@@ -80,27 +80,28 @@ To display To Do List on the page, you need to set the container to render the c
 ~~~jsx title="todo.component.ts"
 import { ToDo } from '@dhx/trial-todolist';
 import { Component, ElementRef, OnInit, ViewChild, OnDestroy} from '@angular/core';
-
+// ...
 @Component({
     selector: 'todo',
     template: '<div #container></div>'
 })
 export class ToDoComponent implements OnInit {
     @ViewChild('container', { static: true }) container!: ElementRef;
+    // ...
 }
 ~~~
 
 Then you need to render our To Do List in the container. To do that, use the `ngOnInit()` method of Angular:
 
-~~~jsx {6-9} title="todo.component.ts"
+~~~jsx {7-9} title="todo.component.ts"
+// ...
 export class ToDoComponent implements OnInit, OnDestroy {
     @ViewChild('container', { static: true }) container!: ElementRef;
 
     private _todo!: ToDo;
 
     ngOnInit() {
-        const todo = new ToDo(this.container.nativeElement,{});
-        this._todo = todo;
+        this._todo = new ToDo(this.container.nativeElement,{});
     }
 
     ngOnDestroy() {
@@ -122,7 +123,7 @@ export function getData() {
             id: "temp://1652991560212",
             project: "introduction",
             text: "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List.",
-            priority: 1,
+            priority: 1
         },
         {
             id: "1652374122964",
@@ -130,7 +131,7 @@ export function getData() {
             text: "You can assign task performers and due dates using the menu.",
             assigned: ["user_4", "user_1", "user_2", "user_3"],
             due_date: "2033-03-08T21:00:00.000Z",
-            priority: 2,
+            priority: 2
         },
         // ...
     ];
@@ -139,7 +140,7 @@ export function getData() {
             id: "user_1",
             label: "Don Smith",
             avatar:
-                "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg",
+                "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg"
         },
         // ...
     ];
@@ -159,32 +160,34 @@ export function getData() {
 
 Then open the ***todo.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of To Do List within the `ngOnInit()` method, as shown below.
 
-~~~jsx {2,6-9} title="todo.component.ts"
+~~~jsx {2,5,7-9} title="todo.component.ts"
 // importing the data file
 import { getData } from './data';
-
+// ...
 ngOnInit() {
     const { users, tasks, projects } = getData();
-    const todo = new ToDo(this.container.nativeElement, {
+    this._todo = new ToDo(this.container.nativeElement, {
         users,
         tasks,
         projects
     });
 }
+// ...
 ~~~
 
 You can also use the [`parse()`](/api/methods/parse_method/) method inside the `ngOnInit()` method of Angular to load data into To Do List. It will reload data on each applied change.
 
-~~~jsx {8} title="todo.component.ts"
+~~~jsx {5,8} title="todo.component.ts"
 // importing the data file
 import { getData } from './data';
+// ...
+    ngOnInit() {
+        const { users, tasks, projects } = getData();
+        const todo = new ToDo(this.container.nativeElement, {});
 
-ngOnInit() {
-    const { users, tasks, projects } = getData();
-    const todo = new ToDo(this.container.nativeElement, {});
-
-    todo.parse({users, tasks, projects});
-}
+        todo.parse({users, tasks, projects});
+    }
+// ...
 ~~~
 
 Now the To Do List component is ready. When the element will be added to the page, it will initialize the To Do List object with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](/api/overview/configs_overview/) to check the full list of available properties.
@@ -196,13 +199,14 @@ When a user makes some action in the To Do List, it invokes an event. You can us
 Open the **todo.component.ts** file and complete the `ngOnInit()` method as in:
 
 ~~~jsx {4-6} title="todo.component.ts"
+// ...
 ngOnInit() {
-    const todo = new ToDo(this.container.nativeElement,{ /*...*/ });
-
-    todo.api.on("add-task", (obj) => {
-        console.log("A new task is added", obj);
+    // ... ToDoList initialization, data loading, and other...
+    this._todo.api.on("add-task", ({ id }) => {
+        console.log("A new task is added", id);
     });
 }
+// ...
 ~~~
 
 ### Step 3. Adding To Do List into the app
diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md
index 7b3ba5b..18ae5f0 100644
--- a/docs/guides/integration_with_react.md
+++ b/docs/guides/integration_with_react.md
@@ -37,7 +37,7 @@ Install dependencies and start the dev server. For this, use a package manager:
 - if you use [**yarn**](https://yarnpkg.com/), run the following commands:
 
 ~~~json
-yarn install
+yarn
 yarn dev
 ~~~
 
@@ -96,7 +96,7 @@ import '@dhx/trial-todolist/dist/todo.css';
 // eslint-disable-next-line react/prop-types
 const ToDoComponent = () => {
     let container = useRef();
-
+    // ...
     return <div ref={container} style={{ width: "100%", height: "100%" }}></div>;
 };
 
@@ -187,7 +187,8 @@ export default App;
 
 Open the ***ToDo.jsx*** file and apply the passed **props** to the To Do List configuration object:
 
-~~~jsx {4,8-10} title="ToDo.jsx"
+~~~jsx {5,9-11} title="ToDo.jsx"
+// ...
 const ToDoComponent = ({ props }) => {
     let container = useRef();
 
@@ -210,7 +211,8 @@ export default ToDoComponent;
 
 You can also use the [`parse()`](/api/methods/parse_method/) method inside the `useEffect()` method of React to load data into To Do List:
 
-~~~jsx {4,9} title="ToDo.jsx"
+~~~jsx {5,10} title="ToDo.jsx"
+// ...
 const ToDoComponent = ({ props }) => {
     let container = useRef();
 
@@ -226,6 +228,8 @@ const ToDoComponent = ({ props }) => {
     
     return <div ref={container}></div>;
 };
+
+export default ToDoComponent;
 ~~~
 
 The `todo.parse(data);` line provides data reloading on each applied change.
@@ -239,6 +243,7 @@ When a user makes some action in the To Do List, it invokes an event. You can us
 Open **ToDo.jsx** and complete the `useEffect()` method in the following way:
 
 ~~~jsx {4-6} title="ToDo.jsx"
+// ...
 useEffect(() => {
     const todo = new ToDo(container.current, {});
 
@@ -247,7 +252,8 @@ useEffect(() => {
     });
     
     return () => (container.current.innerHTML = "");
-  }, []);
+}, []);
+// ...
 ~~~
 
 ### Step 3. Adding To Do List into the app
diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md
index 52df8c8..330e173 100644
--- a/docs/guides/integration_with_svelte.md
+++ b/docs/guides/integration_with_svelte.md
@@ -45,7 +45,7 @@ Install dependencies and run the app. For this, use a package manager:
 - if you use [**yarn**](https://yarnpkg.com/), run the following commands:
 
 ~~~json
-yarn install
+yarn
 yarn dev
 ~~~
 
@@ -77,8 +77,10 @@ Open the ***ToDo.svelte*** file and import To Do List source files. Note that:
 - if you use PRO version and install the To Do List package from a local folder, the import paths look like this:
 
 ~~~html title="ToDo.svelte"
-import { ToDo } from 'dhx-todolist-package';
-import 'dhx-todolist-package/dist/todo.css';
+<script>
+    import { ToDo } from 'dhx-todolist-package';
+    import 'dhx-todolist-package/dist/todo.css';
+</script>
 ~~~
 
 Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **todo.min.css**.
@@ -86,8 +88,10 @@ Note that depending on the used package, the source files can be minified. In th
 - if you use the trial version of To Do List, specify the following paths:
 
 ~~~html title="ToDo.svelte"
-import { ToDo } from '@dhx/trial-todolist';
-import '@dhx/trial-todolist/dist/todo.css';
+<script>
+    import { ToDo } from '@dhx/trial-todolist';
+    import '@dhx/trial-todolist/dist/todo.css';
+</script>
 ~~~
 
 In this tutorial you can see how to configure the **trial** version of To Do List.
@@ -96,12 +100,13 @@ In this tutorial you can see how to configure the **trial** version of To Do Lis
 
 To display To Do List on the page, you need to set the container to render the component inside. Check the code below:
 
-~~~html {5,8} title="ToDo.svelte"
+~~~html {5,9} title="ToDo.svelte"
 <script>
     import { ToDo } from "@dhx/trial-todolist";
     import "@dhx/trial-todolist/dist/todo.css"
     
     let container;
+    // ...
 </script>
 
 <div bind:this={container} style="width: 100%; height: 100%;"></div>
@@ -109,7 +114,7 @@ To display To Do List on the page, you need to set the container to render the c
 
 Then you need to render To Do List in the container. Use the `new ToDo()` constructor inside the `onMount()` method of Svelte, to initialize To Do List inside of the container:
 
-~~~html {4,8-10} title="ToDo.svelte"
+~~~html {4,8-12} title="ToDo.svelte"
 <script>
     import { ToDo } from "@dhx/trial-todolist";
     import "@dhx/trial-todolist/dist/todo.css";
@@ -118,7 +123,9 @@ Then you need to render To Do List in the container. Use the `new ToDo()` constr
     let container;
 
     onMount(() => {
-        new ToDo(container,{}); 
+        new ToDo(container,{
+            // ...
+        }); 
     });
 </script>
 
@@ -136,7 +143,7 @@ export function getData() {
             id: "temp://1652991560212",
             project: "introduction",
             text: "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List.",
-            priority: 1,
+            priority: 1
         },
         {
             id: "1652374122964",
@@ -144,7 +151,7 @@ export function getData() {
             text: "You can assign task performers and due dates using the menu.",
             assigned: ["user_4", "user_1", "user_2", "user_3"],
             due_date: "2033-03-08T21:00:00.000Z",
-            priority: 2,
+            priority: 2
         },
         // ...
     ];
@@ -153,7 +160,7 @@ export function getData() {
             id: "user_1",
             label: "Don Smith",
             avatar:
-                "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg",
+                "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg"
         },
         // ...
     ];
@@ -175,7 +182,7 @@ Then open the ***App.svelte*** file, import data, and pass it into the new creat
 
 ~~~html {3-4,7} title="App.svelte"
 <script>
-    // ...
+    import ToDo from "./ToDo.svelte";
     import { getData } from "./data.js";
     const { users, tasks, projects } = getData();
 </script>
@@ -185,7 +192,7 @@ Then open the ***App.svelte*** file, import data, and pass it into the new creat
 
 Open the ***ToDo.svelte*** file and apply the passed **props** to the To Do List configuration object:
 
-~~~html {3-5,10-12} title="App.svelte"
+~~~html {3-5,10-12} title="ToDo.svelte"
 <script>
     // ...
     export let users;
@@ -220,7 +227,8 @@ You can also use the [`parse()`](/api/methods/parse_method/) method inside the `
         todo.parse({ users, tasks, projects });
     });
 </script>
-<!-- ... -->
+
+<div bind:this={container} style="width: 100%; height: 100%;"></div>
 ~~~
 
 Now the To Do List component is ready. When the element will be added to the page, it will initialize the To Do List object with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](/api/overview/configs_overview/) to check the full list of available properties.
@@ -231,13 +239,18 @@ When a user makes some action in the To Do List, it invokes an event. You can us
 
 Open ***ToDo.svelte*** and complete the `onMount()` method as in:
 
-~~~jsx title="ToDo.svelte"
-onMount(() => {
-    const todo = new ToDo(container, { columns, cards });
-    todo.api.on("add-task", (obj) => {
-        console.log("A new task is added", obj);
+~~~html title="ToDo.svelte"
+<script>
+    // ...
+    onMount(() => {
+        const todo = new ToDo(container, { users, tasks, projects });
+        todo.api.on("add-task", (obj) => {
+            console.log("A new task is added", obj);
+        });
     });
-});
+</script>
+
+<div bind:this={container} style="width: 100%; height: 100%;"></div>
 ~~~
 
 ### Step 3. Adding To Do List into the app
diff --git a/docs/guides/integration_with_vue.md b/docs/guides/integration_with_vue.md
index bbad18a..9853960 100644
--- a/docs/guides/integration_with_vue.md
+++ b/docs/guides/integration_with_vue.md
@@ -41,7 +41,7 @@ Install dependencies and start the dev server. For this, use a package manager:
 - if you use [**yarn**](https://yarnpkg.com/), run the following commands:
 
 ~~~json
-yarn install
+yarn
 yarn dev
 ~~~
 
@@ -73,8 +73,10 @@ Open the ***ToDo.vue*** file and import ToDo source files. Note that:
 - if you use PRO version and install the To Do List package from a local folder, the import paths look like this:
 
 ~~~html title="ToDo.vue"
-import { ToDo } from 'dhx-todolist-package';
-import 'dhx-todolist-package/dist/todo.css';
+<script>
+    import { ToDo } from 'dhx-todolist-package';
+    import 'dhx-todolist-package/dist/todo.css';
+</script>
 ~~~
 
 Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **todo.min.css**.
@@ -82,8 +84,10 @@ Note that depending on the used package, the source files can be minified. In th
 - if you use the trial version of To Do List, specify the following paths:
 
 ~~~html title="ToDo.vue"
-import { ToDo } from '@dhx/trial-todolist';
-import '@dhx/trial-todolist/dist/todo.css';
+<script>
+    import { ToDo } from '@dhx/trial-todolist';
+    import '@dhx/trial-todolist/dist/todo.css';
+</script>
 ~~~
 
 In this tutorial you can see how to configure the **trial** version of To Do List.
@@ -92,10 +96,11 @@ In this tutorial you can see how to configure the **trial** version of To Do Lis
 
 To display To Do List on the page, you need to set the container to render the component inside. Check the code below:
 
-~~~html {6-8} title="ToDo.vue"
+~~~html {7-9} title="ToDo.vue"
 <script>
     import { ToDo } from "@dhx/trial-todolist";
     import "@dhx/trial-todolist/dist/todo.css";
+    // ...
 </script>
 
 <template>
@@ -122,8 +127,9 @@ Then you need to render To Do List in the container. Use the `new ToDo()` constr
 
 To clear the component as it has unmounted, use the `todo.destructor()` method and remove the container inside the `unmounted()` method of ***Vue.js***, as follows:
 
-~~~html {7-10} title="ToDo.vue"
+~~~html {8-11} title="ToDo.vue"
 <script>
+    // ...
     export default {
         mounted: function() {
             this.todo = new ToDo(this.$refs.container, {});
@@ -191,7 +197,7 @@ Then open the ***App.vue*** file, import data, and initialize it via the inner `
 
 ~~~html {3,7-14,19} title="App.vue"
 <script>
-    // ...
+    import ToDo from "./components/ToDo.vue";
     import { getData } from "./data";
 
     export default {
@@ -208,14 +214,15 @@ Then open the ***App.vue*** file, import data, and initialize it via the inner `
 </script>
 
 <template>
-    <ToDo :columns="columns" :cards="cards" />
+    <ToDo :users="users" :tasks="tasks" :projects="projects" />
 </template>
 ~~~
 
 Open the ***ToDo.vue*** file and apply the passed **props** to the To Do List configuration object:
 
-~~~html {3,7-8} title="ToDo.vue"
+~~~html {4,8-10} title="ToDo.vue"
 <script>
+    // ...
     export default {
         props: ["tasks", "users", "projects"],
 
@@ -228,12 +235,15 @@ Open the ***ToDo.vue*** file and apply the passed **props** to the To Do List co
         }
     }
 </script>
+
+<!--...-->
 ~~~
 
 You can also use the [`parse()`](/api/methods/parse_method/) method inside the `mounted()` method of Vue to load data into To Do List:
 
-~~~html {7} title="ToDo.vue"
+~~~html {4,8-12} title="ToDo.vue"
 <script>
+    // ...
     export default {
         props: ["tasks", "users", "projects"],
 
@@ -247,6 +257,8 @@ You can also use the [`parse()`](/api/methods/parse_method/) method inside the `
         }
     }
 </script>
+
+<!--...-->
 ~~~
 
 Now the To Do List component is ready. When the element will be added to the page, it will initialize the To Do List object with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](/api/overview/configs_overview/) to check the full list of available properties.
@@ -257,18 +269,21 @@ When a user makes some action in the To Do List, it invokes an event. You can us
 
 Open ***ToDo.vue*** and complete the `mounted()` method:
 
-~~~html {6-8} title="ToDo.vue"
+~~~html {7-9} title="ToDo.vue"
 <script>
+    // ...
     export default {
         // ...
         mounted() {
             this.todo = new ToDo(this.$refs.cont, {});
-            this.todo.api.on("add-card", (obj) => {
-                console.log(obj.columnId);
+            this.todo.api.on("add-task", ({ id }) => {
+                console.log("A new task is added", id);
             });
         }
     }
 </script>
+
+<!--...-->
 ~~~
 
 ### Step 3. Adding To Do List into the app
diff --git a/docs/whats_new.md b/docs/whats_new.md
index 30c43bd..ab54a77 100644
--- a/docs/whats_new.md
+++ b/docs/whats_new.md
@@ -15,8 +15,8 @@ Released on June 11, 2024
 ### Fixes
 
 - Script error when sorting an empty project
-- The submenus (Completed task -> Hide/Show) don't work on touch devices
-- TS. Incorect types for api object
+- The submenus don't work on touch devices
+- Incorrect types for "api" object
 
 ## Version 1.2.8