@ featherk/ ui (英语)

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

构成部分概览

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

导入组件

从特性子路径导入 。 每个子路径是一个单独的条目,在运行时只导入自己的组件,样式和对等依赖,这也使dev服务器保持了快. 包根再导出每个特性;见 安装到什么对什么船。不要导入内部 dist 路径.

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 并保持浏览器捆绑小块.

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

健道 UI 兼容性

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

依赖关系

• 所需对等方 : 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"数字 :

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

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

// 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", …);

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

构建

从寄存器根中运行 :

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

或运行软件包本地 :

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/* 软件包以单一方式维护 变动情况。 。 。 .