# @featherk/ui 中文文档

规范地址：https://npmcn.com/package/%40featherk/ui/

版本：0\.19\.4
npm 元数据更新时间：2026-11-13T20:41:19.378Z
中文译文更新时间：2026-11-14T12:54:44.853Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40featherk/ui
原文对照：https://npmcn.com/package/%40featherk/ui/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：246 kB，47 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue ^3\.5\.0，@featherk/icons \>=0\.19\.4，@featherk/composables \>=0\.19\.4，@progress/kendo-vue-grid ^6\.4\.1，@progress/kendo-svg-icons ^4\.5\.0，@progress/kendo-vue-popup ^6\.4\.1，@progress/kendo-vue-common ^6\.4\.1，@progress/kendo-vue-inputs ^6\.4\.1，@progress/kendo-vue-labels ^6\.4\.1，@progress/kendo-vue-layout ^6\.4\.1，@progress/kendo-vue-buttons ^6\.4\.1，@progress/kendo-vue-tooltip ^6\.4\.1，@progress/kendo-vue-dropdowns ^6\.4\.1，@progress/kendo-vue-dateinputs ^6\.4\.1
- 首次发布：2026-08-04T21:56:32.333Z
- 最新版本发布：2026-11-13T20:41:19.175Z
- 近 30 天下载量：2485（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：61（近 12 个月 61 个）

## 中文简介

Vue 3 组件基于 Vue 的 Kendo UI 并驱动 `@featherk/composables`。 。 。 .

## 安装

```sh
npm install @featherk/ui
```

也可以使用：`pnpm add @featherk/ui`、`yarn add @featherk/ui`、`bun add @featherk/ui`

## README

# @ featherk/ ui (英语)

Vue 3 组件基于 Vue 的 Kendo UI 并驱动 `@featherk/composables`。 。 。 .

## 构成部分概览

-   **地址**数字 : `USAddress` - 由父公司驱动的演示式美国地址制造器 `useUSAddress` 视图模型.
    -   组件指南 : [文件/地址/地址](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/address/USAddress.md)
-   **图表**数字 : `ActionCell` - 由父母共同拥有的弹出寿命周期驱动的可配置可重复动作按钮容器.
    -   组件指南 : [文件/表格/行动Cell.md](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/table/ActionCell.md)
    -   可编译指南 : [文件/表/使用](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/table/useActionCellMenu.md)
-   **拾取器**数字 : `DateField` - Kendo DatePicker,带有口罩的输入,由父母拥有 `useMaskedDateInput`。 。 。 .
    -   组件指南 : [文件/拾取者/日期](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/picker/DateField.md)
-   **拾取器**数字 : `TimeField` - 使用口罩输入的 Kendo TimePicker, 由父母所有 `useMaskedTimeInput`。 。 。 .
    -   组件指南 : [文件/选取者/时间](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/picker/TimeField.md)
-   **拾取器**数字 : `DateRangeField` - 由父主驱动的带有范围日历的遮盖日期范围输入弹出 `useMaskedDateRangeInput`。 。 。 .
    -   组件指南 : [文档/拾取者/远程现场](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/picker/DateRangeField.md)

## 导入组件

从特性子路径导入 。 每个子路径是一个单独的条目,在运行时只导入自己的组件,样式和对等依赖,这也使dev服务器保持了快. 包根再导出每个特性;见 [安装到什么对什么船](https://npmcn.com/package/%40featherk/ui/#readme-what-gets-installed-vs-what-ships)。不要导入内部 `dist` 路径.

```ts
import { USAddress } from "@featherk/ui/address";
import { ActionCell } from "@featherk/ui/table";
import { DateField, DateRangeField, TimeField } from "@featherk/ui/picker";
import { useUSAddress } from "@featherk/composables/address";
```

对于完整的设置,行为,和示例,使用组件概览中列出的组件指南.

## 安装到什么对什么船

FeatherK 软件包一旦安装就应该工作: 你永远不应该跟踪缺失的依赖性, 也不应该压制同伴警告 。 当与安装大小相冲突时, FeatherK 接受更大的 `node_modules` 并保持浏览器捆绑小块.

| 您导入 | 安装于 `node_modules` | 运入浏览器( 生产构建) |
| --- | --- | --- |
| `import { X } from "@featherk/ui/<feature>"` | 所有所需的对等器, 自动安装 | `X`,其样式和导入的同位素 |
| `import { X } from "@featherk/ui"` | 一样 | 与子路径导入相同 |
| 没有任何特质 | 还在安装 | 没有这个特征 |

期间 `vite dev`,一个根导入负载每个特性。 这只影响到dev服务器,而不是什么用户下载.

## 健道 UI 兼容性

建造和试验 **坚道UI代表Vue 6.4.1**。Kendo 软件包被宣布为对等依赖(`^6.4.1`),所以您的应用程序控制已安装的 Kendo 版本.

| 子路径 | 构成部分 | 剑道软件包 |
| --- | --- | --- |
| `address` | `USAddress` | `kendo-vue-dropdowns`, (中文(简体) ), `kendo-vue-inputs`, (中文(简体) ), `kendo-vue-labels` |
| `table` | `ActionCell`, (中文(简体) ), `useActionCellMenu` | `kendo-vue-buttons`, (中文(简体) ), `kendo-vue-grid` |
| `picker` | `DateField`, (中文(简体) ), `TimeField`, (中文(简体) ), `DateRangeField` | `kendo-vue-common`, (中文(简体) ), `kendo-vue-dateinputs`, (中文(简体) ), `kendo-vue-inputs`, (中文(简体) ), `kendo-vue-labels`, (中文(简体) ), `kendo-vue-popup`, (中文(简体) ), `kendo-vue-tooltip` |

## 依赖关系

-   所需对等方 : `vue` (3.5+), `@featherk/composables`, (中文(简体) ), `@featherk/icons`, (中文(简体) ), `@progress/kendo-vue-buttons`, (中文(简体) ), `@progress/kendo-vue-common`, (中文(简体) ), `@progress/kendo-vue-dateinputs`, (中文(简体) ), `@progress/kendo-vue-dropdowns`, (中文(简体) ), `@progress/kendo-vue-grid`, (中文(简体) ), `@progress/kendo-vue-inputs`, (中文(简体) ), `@progress/kendo-vue-labels`, (中文(简体) ), `@progress/kendo-vue-popup`, (中文(简体) ), `@progress/kendo-vue-tooltip`
    
    npm和pnpm自动安装这些;与Yarn Berry一起自己安装. 每一个子路径只装入其组件所用的,所以一个从未导入的应用程序 `@featherk/ui/picker` 从不装载 `@featherk/icons` 或者说 `@progress/kendo-vue-tooltip`。 。 。 .
    
-   可选同伴 :
    
    -   `@progress/kendo-vue-layout`,用于 `useActionCellMenu` ——委员会 `menuProps` 传播到共享的剑道上 `<Menu>`
    -   `@progress/kendo-svg-icons` (只有类型)——用于 `ActionCell` 图标打字
-   运行时间依赖性:无. 所有的东西都是对等的,所以你的应用和FeatherK共享一份Vue,Kendo和 `@featherk/composables`。 。 。 .
    

全部留着 `@featherk/*` 同一版本的软件包。 他们一起释放,每个 `@featherk/ui` 释放至少需要匹配 `@featherk/composables` 财务报告和审定财务报表 `@featherk/icons`通过翻新或Dependabot,将它们组合成一个更新.

## 样式

组件样式 `@featherk/ui`。每个 ES 条目都导入其组件的样式,所以不需要单独导入。 共同司法体系的建设`require`)不导入 CSS。 剑道组件的主题样式来自 `@featherk/styles`。 。 。 .

## 使用维特测试

Vitest将已安装的软件包放入节点,节点无法加载每个条目导入的样式表. 没有这个设置, 将测试导入 `@featherk/ui` 失败 `Unknown file extension ".css"`数字 :

```ts
// vitest.config.ts
export default defineConfig({
  test: {
    server: { deps: { inline: ["@featherk/ui"] } },
  },
});
```

嘲笑一个可调和的,嘲笑它的子路径,而不是包根. 每个子路径是一个单独的模块,而一个模拟只取代它命名的模块. FeatherK组件从它们的子路径导入可堆肥物,因此根模组从未到达它们. 譬如说, `TimeField` 进口 `usePopupTrap` 从 `@featherk/composables/trap`数字 :

```ts
// Before 0.18.0 every subpath was one module, so this also reached TimeField.
vi.mock("@featherk/composables", …);

// Now: mock the subpath.
vi.mock("@featherk/composables/trap", …);
```

从同一个子路径导入到你自己的代码 一个子路径模拟不能达到从根部导入的代码.

## 构建

从寄存器根中运行 :

```bash
npm run build -- --filter=@featherk/ui
```

或运行软件包本地 :

```bash
npm run build
```

## 维护者笔记

-   每个功能文件夹都有 `index.ts` 桶,从 `src/index.ts`,并有一个匹配 `exports` 子路径.
-   `vite.config.ts` 为根和每个根建立一个ES和一个通用JS条目 `package.json` `exports` 子路径( n)`address`, (中文(简体) ), `table`, (中文(简体) ), `picker`) (中文(简体) ). 一个新特性文件夹只需要其子路径添加到 `exports`。 。 。 .
-   范围化的组件样式按特性分割,一个小Vite插件从它的ES模块中导入每个块的CSS. 新组件获得他们的风格,没有额外的台阶.
-   `package.json` 只列出 CSS 在 `sideEffects`,所以根导入树摇动到与子路径相同的代码和样式. 保持其他模块不发生导入时副作用,或添加到 `sideEffects`。 。 。 .
-   将共享状态排除在模块范围之外:没有模块级的参考、地图或 `provide`编号 :`inject` 键。 一个应用可以同时加载ES和CommonJS所建,而两本不共享状态. 在组件中创建状态或可堆叠并传递实例, 如 `useActionCellMenu` 已经.
-   将每个新组件添加到 `coverage.include` 内 `vitest.config.ts`,除非这样 `src/picker/*.vue` 已经盖好了 清单是明确的,因此在报道报告中遗漏了一个文件,即使它有自己的测试.
-   归宿 `scripts/check-entries.mjs` 运行在建筑的尽头。 如果缺少一个导出目标, 条目导入一个未申报的对等点, 任何条目导入一个可选的对等点( npm 不安装这些对等点) , 或样式表不被导入, 它失败 .
-   归宿 `scripts/check-peers.mjs` 跟着它跑 除非每个都失败 `@featherk/*` 对等区域为 `>=x.y.z` 至少是这个兄弟会的当前版本 所以npm从不将这个发行品 与一个老的兄弟会配对 因为它没有进口的东西 软件包在锁步中释放, 所以根 `version:patch|minor|major` 脚本运行 `scripts/sync-peers.mjs`,将这些最小值提高到新版本 `package.json` 财务报告和审定财务报表 `package-lock.json`。 。 。 .
-   对于新的组件文档,请遵循文件撰写模板 `docs/README.md`。 。 。 .

## 更改日志

向所有人公布历史 `@featherk/*` 软件包以单一方式维护 [变动情况](https://github.com/NantHealth/featherk/blob/integration/CHANGELOG.md)。 。 。 .

## 常见问题

### @featherk/ui 是什么？

Vue 3 组件基于 Vue 的 Kendo UI 并驱动 @featherk/composables。 。 。 \.

### 如何安装 @featherk/ui？

在项目目录运行 npm install @featherk/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）、@featherk/icons（\>=0\.19\.4）、@featherk/composables（\>=0\.19\.4）、@progress/kendo-vue-grid（^6\.4\.1）、@progress/kendo-vue-popup（^6\.4\.1）、@progress/kendo-vue-common（^6\.4\.1）、@progress/kendo-vue-inputs（^6\.4\.1）、@progress/kendo-vue-labels（^6\.4\.1）、@progress/kendo-vue-buttons（^6\.4\.1）、@progress/kendo-vue-tooltip（^6\.4\.1）、@progress/kendo-vue-dropdowns（^6\.4\.1）、@progress/kendo-vue-dateinputs（^6\.4\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @featherk/ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @featherk/ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @featherk/ui 可以商用吗？

@featherk/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @featherk/ui 的下载量有多少？

根据 npm 官方下载统计，@featherk/ui 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,485 次，日均约 83 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @featherk/ui 还在维护吗？

最新版本 0\.19\.4 发布于 2026/11/14（今天）；至今共发布 61 个版本，其中过去 12 个月发布了 61 个；首次发布于 2026/08/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。