🚀 v1.0.0

README.md

@@ -35,6 +35,8 @@ Example: Create dynamic document content using JavaScript.
 
 And more rich rendering components.
 
+​![image](assets/image-20241213214945-r6p1je6.png "Kanban")​
+
 ​![image](assets/image-20241130151900-0n7ku7o.png)​
 
 3️⃣ Simplify the processing and access of query results.
@@ -1072,7 +1074,54 @@ Changing `type: 'flowchart'`​ to `mindmap`​ can also display it in the form
 ​`MermaidRelation`​ specifies the corresponding view through the `type`​ parameter. For convenience, `dv`​ provides two equivalent components:
 
 * ​`dv.mflowchart`​: Equivalent to the flowchart Relation diagram.
-* ​`dv.mmindmap`​: Equivalent to the mindmap Relation diagram.
+* ​`dv.mmindmap`​: Equivalent to the mindmap Relation diagram..
+
+### MermaidKanban
+
+```ts
+mermaidKanban(groupedBlocks: Record<string, Block[]>, options: {
+    priority?: (b: Block) => 'Very High' | 'High' | 'Low' | 'Very Low',
+    clip?: number,
+    width?: string
+});
+```
+
+mermaidKanban is mainly used to display blocks in the form of kanban, and it has an alias of `mKanban`​.
+
+* ​`groupedBlocks`​: A structure of `group name: array of Blocks`​, and each group will be displayed separately as a column in the Kanban.
+* ​`options`​
+
+  * ​`priority`​: Used to specify the priority parameter of the block. For details, see [https://mermaid.js.org/syntax/kanban.html#supported-metadata-keys](https://mermaid.js.org/syntax/kanban.html#supported-metadata-keys).
+  * ​`clip`​: The maximum length of the text of each block in the kanban. The default is 50, and the text exceeding this length will be truncated.
+  * ​`width`​: The width of the kanban; 💡 It is recommended to pass in a value of `<number of groups> x <width of each group>`​.
+
+The options.type parameter can be specified as two types, "flowchart" or "mindmap", which respectively correspond to two different mermaid diagrams.
+
+The following case will retrieve the unfinished Todos of each month and display them in the Kanban.
+
+```js
+//!js
+const query = async () => {
+    let dv = Query.Dataview(protyle, item, top);
+    // null: no `after` filter, query all task block
+    // 128: max number of result
+    let blocks = await Query.task(null, 128);
+    let grouped = blocks.groupby((b) => {
+        return b.createdDate.slice(0, -3)
+    });
+    let N = Object.keys(grouped).length;
+    // each group with a fixed witdh 200px
+    dv.addmkanban(grouped, {
+        width: `${N * 200}px`
+    });
+    dv.render();
+}
+return query();
+```
+
+​![image](assets/image-20241213214406-rfj8yqh.png)​
+
+> 😃 Each block in the Kanban diagram can also **hover** to display content and **click to jump** to the corresponding document.
 
 ### ECharts Series
 

README_zh_CN.md

@@ -31,6 +31,8 @@
 
 以及更多丰富的可渲染组件。
 
+​![image](assets/image-20241213214945-r6p1je6.png "Kanban")​
+
 ​![image](assets/image-20241130151900-0n7ku7o.png)​
 
 3️⃣ 简化对查询结果的处理、访问。
@@ -1070,6 +1072,55 @@ return query();
 * ​`dv.mflowchart`​：等价于 flowchart 的 Relation 图
 * ​`dv.mmindmap`​：等价于 mindmap 的 Relation 图
 
+### mermaidKanban
+
+```ts
+mermaidKanban(groupedBlocks: Record<string, Block[]>, options: {
+      priority?: (b: Block) => 'Very High' | 'High' | 'Low' | 'Very Low',
+      clip?: number,
+      width?: string
+  });
+```
+
+mermaidKanban 主要用于用于将块以 kanban 的形式展示出来，它有一个 `mKanban`​ 的别名。
+
+* ​`groupedBlocks`​：一个 `分组名称: Block 数组`​ 的结构，每个分组会被单独显示为 Kanban 中的一栏
+* ​`options`​
+
+  * ​`priority`​：用于指定块的 priority 参数，详情见 [https://mermaid.js.org/syntax/kanban.html#supported-metadata-keys](https://mermaid.js.org/syntax/kanban.html#supported-metadata-keys)
+  * ​`clip`​：看板中每个块的文本的最大长度，默认 50，超过这个长度的文本会被截断
+  * ​`width`​：看板的宽度；💡 建议可以传入一个 `<分组数量> x <每组宽度>`​ 的值进去
+
+可以将 options.type 参数指定为 "flowchart" 或者 "mindmap" 两种类型，分别对应了两种不同的 mermaid 图表。
+
+下面的案例会检索每个月未完成的 Todo，并在 Kanban 中展示。
+
+```js
+//!js
+const query = async () => {
+    let dv = Query.Dataview(protyle, item, top);
+    // null: no `after` filter, query all task block
+    // 128: max number of result
+    let blocks = await Query.task(null, 128);
+    let grouped = blocks.groupby((b) => {
+        return b.createdDate.slice(0, -3)
+    });
+    let N = Object.keys(grouped).length;
+    // each group with a fixed witdh 200px
+    dv.addmkanban(grouped, {
+        width: `${N * 200}px`
+    });
+    dv.render();
+}
+return query();
+```
+
+大致效果如下：
+
+​![image](assets/image-20241213214406-rfj8yqh.png)​
+
+> 😃 Kanban 图中每个块同样可以**悬浮显示内容**以及**点击跳转**到对应文档。
+
 ### echarts 系列
 
 ```ts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sy-query-view",
-  "version": "1.0.0-beta11",
+  "version": "1.0.0",
   "type": "module",
   "description": "This is a sample plugin based on vite and svelte for Siyuan (https://b3log.org/siyuan). Created with siyuan-plugin-cli v2.4.5.",
   "repository": "https://github.com/frostime/sy-query-view",

plugin.json

@@ -2,7 +2,7 @@
   "name": "sy-query-view",
   "author": "frostime",
   "url": "https://github.com/frostime/sy-query-view",
-  "version": "1.0.0-beta11",
+  "version": "1.0.0",
   "minAppVersion": "3.1.14",
   "backends": [
     "windows",

public/types.d.ts

@@ -1,8 +1,8 @@
 /**
  * @name sy-query-view
  * @author frostime
- * @version 1.0.0-beta11
- * @updated 2024-12-13T13:26:30.292Z
+ * @version 1.0.0
+ * @updated 2024-12-13T13:51:48.807Z
  */
 
 declare module 'siyuan' {
@@ -651,15 +651,14 @@ export declare class DataView implements IDataView {
      * @param options
      * @param options.priority - Function to determine priority of each block, see {@link https://mermaid.js.org/syntax/kanban.html#supported-metadata-keys}
      * @param options.clip - Maximum length of text to display in each item, default as 50
-     * @param options.maxWidth - If true, the kanban will be displayed in a maximum width
+     * @param options.width - The width of kanban
      * @returns
      * @alias mKanban
      */
     mermaidKanban(groupedBlocks: Record<string, Block[]>, options: {
         priority?: (b: Block) => 'Very High' | 'High' | 'Low' | 'Very Low';
         clip?: number;
         width?: string;
-        center?: boolean;
     }): HTMLElement;
     /**
      * Embeds blocks into the DataView