@splicetree/plugin-checkable 0.0.1 → 0.1.1

package/CHANGELOG.md

@@ -1,25 +1,17 @@
 # @splicetree/plugin-checkable
 
-## 0.0.1
+## 0.1.1
 
-### Patch Changes
+## 0.1.0
 
-- chore: 搭建 SpliceTree 框架基础架构与工程体系
+### Minor Changes
 
-  框架架构：
-  - 建立无头树（Headless Tree）核心模型与数据结构
-  - 定义节点操作 API、事件系统和状态管理机制
-  - 设计并实现插件体系（生命周期、注册机制、能力扩展）
-  - 引入模块化架构，明确 core / plugins / adapters 的边界
-  - 预留扩展点与内部协议，构建可插拔式架构基础
+- ### @splicetree/plugin-checkable
+  - 更新为配置聚合：`configuration.checkable.defaultChecked/triggerByClick`
+  - 可选：通过点击节点触发勾选切换（与 Pointer 协同）
 
-  适配层与生态：
-  - 添加 Vue 3 适配层（渲染无关、纯接口绑定）
-  - 设计独立的 UI 层解耦策略，确保跨框架可迁移
-  - 预留未来 React/Svelte/WebComponents 的适配接口
+## 0.0.1
 
-  工程化与工具链：
-  - 初始化 monorepo 工程结构（packages + docs）
-  - 配置构建工具链 tsdown（多包构建、类型输出）
-  - 构建文档系统（VitePress）与基础导航结构
-  - 设置开发环境、代码规范（ESLint）、格式化流程
+### Patch Changes
+
+- chore: 搭建 SpliceTree 框架基础架构与工程体系

package/README.md

@@ -1,13 +1,13 @@
 # @splicetree/plugin-checkable
 
+为树节点提供勾选与半选能力，支持向下级联与向上计算半选。
+
 [![version](https://img.shields.io/npm/v/@splicetree/plugin-checkable.svg?label=version)](https://www.npmjs.com/package/@splicetree/plugin-checkable)
 [![downloads](https://img.shields.io/npm/dm/@splicetree/plugin-checkable.svg)](https://npmcharts.com/compare/%40splicetree%2Fplugin-checkable?minimal=true)
 [![license](https://img.shields.io/npm/l/@splicetree/plugin-checkable.svg)](https://www.npmjs.com/package/@splicetree/plugin-checkable)
 [![Website](https://img.shields.io/static/v1?label=Website&message=splicetree.dev&color=blue)](https://www.splicetree.dev)
 [![GitHub](https://img.shields.io/static/v1?label=GitHub&message=splicetree%2Fsplicetree&logo=github)](https://github.com/michaelcocova/splicetree)
 
-为树节点提供勾选与半选能力，支持向下级联与向上计算半选。
-
 ## 安装
 
 `pnpm add @splicetree/plugin-checkable`
@@ -20,36 +20,34 @@ import checkable from '@splicetree/plugin-checkable'
 
 const tree = createSpliceTree(data, {
   plugins: [checkable],
-  defaultExpanded: ['a'],
-  defaultChecked: ['a'],
+  configuration: {
+    checkable: {
+      defaultChecked: ['a'],
+      // 可选：点击节点即切换勾选
+      triggerByClick: true,
+    },
+  },
 })
 ```
 
 ## Api
 
-### Options
+### Configuration
 
-| 选项             | 类型       | 默认值 | 说明         |
-| ---------------- | ---------- | ------ | ------------ |
-| `defaultChecked` | `string[]` | `[]`   | 初始勾选集合 |
+- `configuration.checkable.defaultChecked: string[]` 初始勾选集合
+- `configuration.checkable.triggerByClick: boolean` 点击节点切换勾选
 
 ### Events
 
-| 事件      | 负载                 | 说明               |
-| --------- | -------------------- | ------------------ |
-| `checked` | `{ keys: string[] }` | 勾选状态变化时触发 |
+- `checked` 负载：`{ keys: string[] }` 勾选状态变化时触发
 
 ### 实例方法
 
-| 名称                | 参数 | 说明         |
-| ------------------- | ---- | ------------ |
-| `checkedKeys`       | `无` | 当前勾选集合 |
-| `indeterminateKeys` | `无` | 当前半选集合 |
+- `checkedKeys` 当前勾选集合
+- `indeterminateKeys` 当前半选集合
 
 ### 节点方法
 
-| 名称                    | 参数                | 说明           |
-| ----------------------- | ------------------- | -------------- |
-| `isChecked()`           | `无`                | 是否勾选       |
-| `isIndeterminate()`     | `无`                | 是否半选       |
-| `toggleCheck(checked?)` | `checked?: boolean` | 切换或显式设置 |
+- `isChecked(): boolean` 是否勾选
+- `isIndeterminate(): boolean` 是否半选
+- `toggleCheck(checked?: boolean)` 切换或显式设置

package/dist/index.d.ts

@@ -2,16 +2,22 @@ import { SpliceTreePlugin } from "@splicetree/core";
 
 //#region src/index.d.ts
 declare module '@splicetree/core' {
-  /**
-   * 选项扩展（Checkable）
-   * - defaultChecked：初始勾选的节点 id 列表
-   */
-  interface UseSpliceTreeOptions {
-    /**
-     * 初始勾选的节点 id 列表
-     * 在初始化时将这些节点设置为已勾选
-     */
-    defaultChecked?: string[];
+  interface SpliceTreeConfiguration {
+    checkable?: {
+      defaultChecked?: string[];
+      triggerByClick?: boolean;
+    };
+  }
+  interface SpliceTreeEventPayloadMap {
+    'input:node-click': {
+      nodeId: string;
+      modifiers: {
+        shift: boolean;
+        ctrl: boolean;
+        meta: boolean;
+        alt: boolean;
+      };
+    };
   }
   /**
    * 节点扩展（Checkable）

package/dist/index.js

@@ -21,7 +21,8 @@ function setChecked(id, state, checked, indeterminate) {
 const checkable = {
 	name: "checkable",
 	setup(ctx) {
-		const { defaultChecked = [] } = ctx.options;
+		const cfg = ctx.options?.configuration?.checkable ?? {};
+		const { defaultChecked = [] } = cfg;
 		const checkedKeys = new Set(defaultChecked);
 		const indeterminateKeys = /* @__PURE__ */ new Set();
 		const isChecked = (id) => checkedKeys.has(id);
@@ -103,6 +104,11 @@ const checkable = {
 			name: "checked",
 			keys: Array.from(checkedKeys)
 		});
+		if (!!cfg?.triggerByClick) ctx.events.on("input:node-click", (p) => {
+			const nodeId = p.nodeId;
+			if (!ctx.tree.getNode(nodeId)) return;
+			toggleCheck(nodeId);
+		});
 		return {
 			checkedKeys,
 			indeterminateKeys,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@splicetree/plugin-checkable",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "author": {
     "email": "michael.cocova@gmail.com",
     "name": "Michael Cocova"
@@ -23,7 +23,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@splicetree/core": "0.0.1"
+    "@splicetree/core": "0.1.1"
   },
   "scripts": {
     "dev": "tsdown --watch",

package/src/index.ts

@@ -2,16 +2,22 @@ import type { SpliceTreePlugin, SpliceTreePluginContext } from '@splicetree/core
 import '@splicetree/core'
 
 declare module '@splicetree/core' {
-  /**
-   * 选项扩展（Checkable）
-   * - defaultChecked：初始勾选的节点 id 列表
-   */
-  interface UseSpliceTreeOptions {
-    /**
-     * 初始勾选的节点 id 列表
-     * 在初始化时将这些节点设置为已勾选
-     */
-    defaultChecked?: string[]
+  export interface SpliceTreeConfiguration {
+    checkable?: {
+      defaultChecked?: string[]
+      triggerByClick?: boolean
+    }
+  }
+  export interface SpliceTreeEventPayloadMap {
+    'input:node-click': {
+      nodeId: string
+      modifiers: {
+        shift: boolean
+        ctrl: boolean
+        meta: boolean
+        alt: boolean
+      }
+    }
   }
 
   /**
@@ -118,7 +124,11 @@ export const checkable: SpliceTreePlugin = {
    * 勾选/半选插件：支持向下级联与向上计算半选
    */
   setup(ctx: SpliceTreePluginContext) {
-    const { defaultChecked = [] } = ctx.options
+    const cfg = (ctx.options?.configuration?.checkable ?? {}) as {
+      defaultChecked?: string[]
+      triggerByClick?: boolean
+    }
+    const { defaultChecked = [] } = cfg
 
     const checkedKeys = new Set<string>(defaultChecked)
     const indeterminateKeys = new Set<string>()
@@ -207,7 +217,18 @@ export const checkable: SpliceTreePlugin = {
       check(id)
     }
     ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
-    ctx.events.emit({ name: 'checked', keys: Array.from(checkedKeys) } as any)
+    ctx.events.emit({ name: 'checked', keys: Array.from(checkedKeys) })
+
+    const triggerByClick = !!cfg?.triggerByClick
+    if (triggerByClick) {
+      ctx.events.on('input:node-click', (p) => {
+        const nodeId = (p as any).nodeId as string
+        if (!ctx.tree.getNode(nodeId)) {
+          return
+        }
+        toggleCheck(nodeId)
+      })
+    }
 
     return {
       checkedKeys,