# @featherk/composables 中文文档 规范地址：https://npmcn.com/package/%40featherk/composables/ 版本：0\.19\.4 npm 元数据更新时间：2026-11-13T20:42:25.181Z 中文译文更新时间：2026-11-14T12:53:16.661Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40featherk/composables 原文对照：https://npmcn.com/package/%40featherk/composables/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.1 MB，170 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：3 个 - peer 依赖：vue ^3\.5\.0，@progress/kendo-vue-grid ^6\.4\.1，@progress/kendo-vue-popup ^6\.4\.1，@progress/kendo-data-query ^1\.7\.1，@progress/kendo-vue-inputs ^6\.4\.1，@progress/kendo-vue-layout ^6\.4\.1，@progress/kendo-vue-dialogs ^6\.4\.1，@progress/kendo-vue-dateinputs ^6\.4\.1 - 首次发布：2025-09-26T18:24:44.731Z - 最新版本发布：2026-11-13T20:42:24.943Z - 近 30 天下载量：2786（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：127（近 12 个月 108 个） ## 中文简介 Vue 3 相容能改进 Kendo UI 用于Vue行为和可访问性. ## 安装 ```sh npm install @featherk/composables ``` 也可以使用：`pnpm add @featherk/composables`、`yarn add @featherk/composables`、`bun add @featherk/composables` ## README # @ featherk/ 组合 Vue 3 相容能改进 Kendo UI 用于Vue行为和可访问性. ## 组合概览 - **地址**数字 : `useUSAddress` — Orchestrates full US 地址形成行为,包括延迟验证(通过 `useFieldsetValidationKit`),状态选项,ZIP集成,并正常提交有效载荷. - 指南 : [文件/地址/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/address/useUSAddress.md) - **地址**数字 : `useZipTextBox` – 为 Kendo Vue 提供动态多掩码 ZIP 代码输入( 5位数和 ZIP+4) `TextBox`,有注意保存,呈报的论证,并有专注反正的支持. - 指南 : [文件/地址/使用ZipTextBox.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/address/useZipTextBox.md) - **日期**数字 : `useMaskedDateInput` ——蒙面单日输入并有阶梯和验证. - 指南 : [文件/日期/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/date/useMaskedDateInput.md) - **窗体( 低等)**数字 : `useFieldsetTouchTracker` ——先入为主的焦距触摸跟踪器,能为验证包提供动力. - 指南 : [文件/表格/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/form/useFieldsetTouchTracker.md) - **表单**数字 : `useFieldsetValidationKit` 延迟的外地设置验证工具箱,包括提交/触摸地标、外地帮助、无效的焦点定位和重置处理. - 指南 : [文档/表格/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/form/useFieldsetValidationKit.md) - **网格**数字 : `useGridA11y` ——可访问行级导航和列菜单键盘支持. - 指南 : [文件/网格/使用GridA11y.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/grid/useGridA11y.md) - **网格**数字 : `useGridActiveFilter` —— 将过滤列标记为 `"active"`。 。 。 . - 指南 : [文件/网格/使用GridActiveFilter.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/grid/useGridActiveFilter.md) - **网格**数字 : `useGridRowAction` ——安全可取行点击和键盘活化处理器,用于有交互和选择守护的网格行. - 指南 : [文件/网格/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/grid/useGridRowAction.md) - **身份证**数字 : `useCompositeId` —— SSR安全组件范围DOM ID生成,用于相关控制和ARIA关系. - 指南 : [文件/编号/用途](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/id/useCompositeId.md) - **菜单**数字 : `usePopupMenu` ——可访问的 Kendo Popup + Menu 动作菜单来取,选择模式,以及背景焦点恢复. - 指南 : [文件/菜单/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/menu/usePopupMenu.md) - 网格管弦总览: [文件/菜单/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/menu/usePopupMenuGridOrchestration.md) - 激活锚: [文档/菜单/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/menu/usePopupMenuActivationAnchor.md) - 共享实例 : [文件/菜单/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/menu/usePopupMenuSharedInstance.md) - 活式ID登记寿命周期: [文件/菜单/使用PopupMenuAnd AactiveIdRegistry.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/menu/usePopupMenuAndActiveIdRegistry.md) - 重点和排他性: [文件/菜单/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/menu/usePopupMenuFocusAndExclusivity.md) - 升级到0.13.0: [文档/菜单/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/menu/usePopupMenuUpgrade0130.md) - **观察员**数字 : `useIntersectionObserver` ——反应相交观测,可选剪接-根跟踪和SSR- safe no-op行为. - 指南 : [文件/观察员/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/observer/useIntersectionObserver.md) - **范围**数字 : `useMaskedDateRangeInput` ——蒙面日期范围输入有验证,夹克,可选弹出协调. - 指南 : [文档/范围/用途](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/range/useMaskedDateRangeInput.md) - **书记官处**数字 : `useActiveIdRegistry` ——在许多网格行/按钮上为单开口模式共享活式代记. - 指南 : [文件/登记/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/registry/useActiveIdRegistry.md) - **书记官处**数字 : `useExclusiveGroup` - 有效注册的生命周期管理相互专属. - 指南 : [文件/登记/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/registry/useExclusiveGroup.md) - **时间**数字 : `useMaskedTimeInput` ——有AM/PM便利和界限的蒙面单时输入. - 指南 : [文件/时间/使用 Masked Time Input.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/time/useMaskedTimeInput.md) - **陷阱**数字 : `usePopupTrap` ——焦点陷阱+逃逸/外出点击近身行为来弹出. - 指南 : [文件/陷阱/使用](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/trap/usePopupTrap.md) - **窗口**数字 : `useWindow` ——零/低配置剑道 `Window` 收尾:取景口-被分解拖放和再大小,相位过渡,以及内部指向下-抓取调整大小/文本选择工作绕行. - 指南 : [文件/窗口/使用Window.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/window/useWindow.md) - **窗口**数字 : `useWindowDrawer` - 剑道 `Window` 作为抽屉停靠在右边缘:全取景口高度,覆盖页面,默认带有焦点陷阱的模式,滑入和出出,仅从左边缘调整大小. - 指南 : [文件/窗口/使用WindowDrawer.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/window/useWindowDrawer.md) ### 工具导出 `computeCollisionOffset` 是一种纯粹的公用设备导出,而不是 Vue 可堆肥。 每轴应用 `fit` 或者说 `flip` 碰撞行为并可从 `@featherk/composables/geometry` 或软件包根. ## 导入可编解 从特性子路径导入 。 每个子路径是一个单独的条目,只装入自己的可堆放物,这也保持了dev服务器的快速. 包根再导出每个特性;见 [安装到什么对什么船](https://npmcn.com/package/%40featherk/composables/#readme-what-gets-installed-vs-what-ships)。不要导入内部 `dist` 路径. 子路径导入( 建议): ```ts // Grid import { useGridA11y, useGridActiveFilter, useGridRowAction, type RowActionContext, } from "@featherk/composables/grid"; // Date input import { useMaskedDateInput, type ChangePayload, } from "@featherk/composables/date"; // Date range input import { useMaskedDateRangeInput, type RangeChangePayload, } from "@featherk/composables/range"; // Time input import { useMaskedTimeInput, type ChangePayload, } from "@featherk/composables/time"; // Popup focus trap utilities import { usePopupTrap } from "@featherk/composables/trap"; // Kendo Popup + Menu action-menu utilities import { usePopupMenu, type KendoMenuSelectEvent, } from "@featherk/composables/menu"; // Shared active-id bookkeeping for single-open grid or list patterns import { useActiveIdRegistry, useExclusiveGroup, } from "@featherk/composables/registry"; // Intersection observer utilities import { useIntersectionObserver } from "@featherk/composables/observer"; // Geometry utilities import { computeCollisionOffset } from "@featherk/composables/geometry"; // Component-scoped DOM ID utilities import { useCompositeId } from "@featherk/composables/id"; // Address utilities import { useZipTextBox, useUSAddress, type USAddressSubmitPayload, } from "@featherk/composables/address"; // Form utilities import { useFieldsetValidationKit, useFieldsetTouchTracker, } from "@featherk/composables/form"; // Kendo Window wrappers import { useWindow, useWindowDrawer } from "@featherk/composables/window"; ``` 包根再导出每个特性. 日期和时间有效载荷类型在该地别名以避免名称相撞: ```ts import { useGridA11y, useGridActiveFilter, useGridRowAction, type RowActionContext, useMaskedDateInput, type DateChangePayload, useMaskedDateRangeInput, type RangeChangePayload, useMaskedTimeInput, type TimeChangePayload, usePopupTrap, usePopupMenu, type KendoMenuSelectEvent, useActiveIdRegistry, useExclusiveGroup, useIntersectionObserver, useCompositeId, useZipTextBox, useUSAddress, useFieldsetValidationKit, useFieldsetTouchTracker, useWindow, useWindowDrawer, } from "@featherk/composables"; ``` 对于完整的设置,行为,以及实例,使用"编曲概览"中列出的指南. ## 安装到什么对什么船 FeatherK 软件包一旦安装就应该工作: 你永远不应该跟踪缺失的依赖性, 也不应该压制同伴警告 。 当与安装大小相冲突时, FeatherK 接受更大的 `node_modules` 并保持浏览器捆绑小块. | 您导入 | 安装于 `node_modules` | 运入浏览器( 生产构建) | | --- | --- | --- | | `import { useX } from "@featherk/composables/"` | 每个运行时间依赖( VueUse, 焦距陷阱), 自动安装 | `useX` 及其进口的依赖性 | | `import { useX } from "@featherk/composables"` | 一样 | 与子路径导入相同 | | 没有任何特质 | 它的依赖性仍在安装 | 没有这个特征 | 期间 `vite dev`,一个根导入负载每个特性。 这只影响到dev服务器,而不是什么用户下载. ## 健道 UI 兼容性 建造和试验 **坚道UI代表Vue 6.4.1**。堆肥不会在运行时导入剑道,而是依赖于 DOM 结构和 `k-*` 分类由特定的剑道版本提供,多个公共类型来自剑道包. 这些软件包被宣布为可选的对等依赖(`^6.4.1`:不需要,但任何安装都必须在所支持的范围内. | 可编曲 | 剑道软件包 | | --- | --- | | `useGridA11y`, (中文(简体) ), `useGridActiveFilter`, (中文(简体) ), `useGridRowAction` | `@progress/kendo-vue-grid`, (中文(简体) ), `@progress/kendo-data-query` | | `useWindow`, (中文(简体) ), `useWindowDrawer` | `@progress/kendo-vue-dialogs` | | `usePopupMenu` | `@progress/kendo-vue-layout`, (中文(简体) ), `@progress/kendo-vue-popup` | | `usePopupTrap` | `@progress/kendo-vue-popup` | | `useMaskedDateInput`, (中文(简体) ), `useMaskedDateRangeInput`, (中文(简体) ), `useMaskedTimeInput` | `@progress/kendo-vue-dateinputs` | | `useZipTextBox`, (中文(简体) ), `useUSAddress` | `@progress/kendo-vue-inputs` | ## 依赖关系 - 所需对等方 : `vue` (3.5+) (单位:千美元) npm和pnpm自动安装;用Yarn Berry自行安装. - 可选对等方: 列在下面的 Kendo 包 [健道 UI 兼容性](https://npmcn.com/package/%40featherk/composables/#readme-kendo-ui-compatibility),用于你使用的可堆肥。 它们只用于类型,而你的应用程序已经安装了它们用于它制造的剑道组件. - 运行时间依赖性 : `@vueuse/core`, (中文(简体) ), `@vueuse/integrations` 财务报告和审定财务报表 `focus-trap`,用此软件包安装. `usePopupTrap` 内部使用 VueUse 集成和焦点定位. 全部留着 `@featherk/*` 同一版本的软件包。 他们一起释放,每个 `@featherk/ui` 释放至少需要匹配 `@featherk/composables`通过翻新或Dependabot,将它们组合成一个更新. ## 样式 堆肥船没有CSS。 一些,例如 `useWindow` 财务报告和审定财务报表 `useGridA11y`,添加 `fk-*` 课程到他们管理的剑道组件 `@featherk/styles` 这些课程的主题. ## 使用维特测试 嘲弄一个可堆叠的, 嘲弄它的子路径, 并从同样的子路径导入它 在测试的代码。 每个子路径是一个单独的模块,而一个模拟只取代它命名的模块. root 模拟没有达到导入子路径的代码, 包含每个 `@featherk/ui` 组件,一个子路径模型不能达到导入根的代码. 两种情况都没有产生出错;测试只是运行真正的可相容性. ```ts // Before 0.18.0 every subpath was one module, so either specifier worked. vi.mock("@featherk/composables", …); // Now: mock the subpath the code imports. vi.mock("@featherk/composables/trap", …); ``` ## 构建 从寄存器根中运行 : ```bash npm run build -- --filter=@featherk/composables ``` 或运行软件包本地 : ```bash npm run build ``` ## 维护者笔记 - 每个功能文件夹都有 `index.ts` 桶,从 `src/index.ts`,并有一个匹配 `exports` 子路径。 譬如说, `useGridA11y`, (中文(简体) ), `useGridActiveFilter` 财务报告和审定财务报表 `useGridRowAction` 住在这里 `src/grid/` 从 `@featherk/composables/grid`。 。 。 . - `vite.config.ts` 为根和每个根建立一个ES和一个通用JS条目 `package.json` `exports` 子路径。 一个新特性文件夹只需要其子路径添加到 `exports`。 。 。 . - `package.json` 套装 `"sideEffects": false`,所以根导入树摇动到与子路径相同的代码. 使模块不受导入时的副作用. 输入时必须运行的模块必须在 `sideEffects`,否则捆绑者会放弃它. - 将共享状态排除在模块范围之外:没有模块级的参考、地图或 `provide`编号 :`inject` 键。 一个应用可以同时加载ES和CommonJS所建,而两本不共享状态. 在可堆叠态中创建状态并传递实例, 如 `useActiveIdRegistry` 已经. - 将每个新源文件添加到 `coverage.include` 内 `vitest.config.ts`。列表是明确的,因此在覆盖报告中遗漏了一个文件,并逃避覆盖阈值,即使它有自己的测试. - 归宿 `scripts/check-entries.mjs` 运行在建筑的尽头。 如果缺少一个出口目标,一个条目会导入一个不是依赖或对等的包,或者任何条目会导入一个可选的对等(npm不安装这些),则失败. Kendo 软件包是可选的同位素,所以只能保留其类型 . - 归宿 `scripts/check-peers.mjs` 因为这个包裹没有 `@featherk/*` 同行. 如果它得到一个, 加入兄弟作为一个 `file:` dev 依赖性和对等检查到 `build` 脚本, 如 `@featherk/ui` 已经. ## 更改日志 向所有人公布历史 `@featherk/*` 软件包以单一方式维护 [变动情况](https://github.com/NantHealth/featherk/blob/integration/CHANGELOG.md)。 。 。 . ## 常见问题 ### @featherk/composables 是什么？ Vue 3 相容能改进 Kendo UI 用于Vue行为和可访问性\. ### 如何安装 @featherk/composables？ 在项目目录运行 npm install @featherk/composables，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @featherk/composables 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @featherk/composables 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @featherk/composables 可以商用吗？ @featherk/composables 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @featherk/composables 的下载量有多少？ 根据 npm 官方下载统计，@featherk/composables 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,786 次，日均约 93 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @featherk/composables 还在维护吗？ 最新版本 0\.19\.4 发布于 2026/11/14（今天）；至今共发布 127 个版本，其中过去 12 个月发布了 108 个；首次发布于 2025/09/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。