@ featherk/ 组合
Vue 3 相容能改进 Kendo UI 用于Vue行为和可访问性.
组合概览
- 地址数字 :
useUSAddress— Orchestrates full US 地址形成行为,包括延迟验证(通过useFieldsetValidationKit),状态选项,ZIP集成,并正常提交有效载荷.- 指南 : 文件/地址/使用
- 地址数字 :
useZipTextBox– 为 Kendo Vue 提供动态多掩码 ZIP 代码输入( 5位数和 ZIP+4)TextBox,有注意保存,呈报的论证,并有专注反正的支持. - 日期数字 :
useMaskedDateInput——蒙面单日输入并有阶梯和验证.- 指南 : 文件/日期/使用
- 窗体( 低等)数字 :
useFieldsetTouchTracker——先入为主的焦距触摸跟踪器,能为验证包提供动力.- 指南 : 文件/表格/使用
- 表单数字 :
useFieldsetValidationKit延迟的外地设置验证工具箱,包括提交/触摸地标、外地帮助、无效的焦点定位和重置处理.- 指南 : 文档/表格/使用
- 网格数字 :
useGridA11y——可访问行级导航和列菜单键盘支持.- 指南 : 文件/网格/使用GridA11y.md
- 网格数字 :
useGridActiveFilter—— 将过滤列标记为"active"。 。 。 . - 网格数字 :
useGridRowAction——安全可取行点击和键盘活化处理器,用于有交互和选择守护的网格行.- 指南 : 文件/网格/使用
- 身份证数字 :
useCompositeId—— SSR安全组件范围DOM ID生成,用于相关控制和ARIA关系.- 指南 : 文件/编号/用途
- 菜单数字 :
usePopupMenu——可访问的 Kendo Popup + Menu 动作菜单来取,选择模式,以及背景焦点恢复. - 观察员数字 :
useIntersectionObserver——反应相交观测,可选剪接-根跟踪和SSR- safe no-op行为.- 指南 : 文件/观察员/使用
- 范围数字 :
useMaskedDateRangeInput——蒙面日期范围输入有验证,夹克,可选弹出协调.- 指南 : 文档/范围/用途
- 书记官处数字 :
useActiveIdRegistry——在许多网格行/按钮上为单开口模式共享活式代记.- 指南 : 文件/登记/使用
- 书记官处数字 :
useExclusiveGroup- 有效注册的生命周期管理相互专属.- 指南 : 文件/登记/使用
- 时间数字 :
useMaskedTimeInput——有AM/PM便利和界限的蒙面单时输入. - 陷阱数字 :
usePopupTrap——焦点陷阱+逃逸/外出点击近身行为来弹出.- 指南 : 文件/陷阱/使用
- 窗口数字 :
useWindow——零/低配置剑道Window收尾:取景口-被分解拖放和再大小,相位过渡,以及内部指向下-抓取调整大小/文本选择工作绕行.- 指南 : 文件/窗口/使用Window.md
- 窗口数字 :
useWindowDrawer- 剑道Window作为抽屉停靠在右边缘:全取景口高度,覆盖页面,默认带有焦点陷阱的模式,滑入和出出,仅从左边缘调整大小.
工具导出
computeCollisionOffset 是一种纯粹的公用设备导出,而不是 Vue 可堆肥。 每轴应用 fit 或者说 flip 碰撞行为并可从 @featherk/composables/geometry 或软件包根.
导入可编解
从特性子路径导入 。 每个子路径是一个单独的条目,只装入自己的可堆放物,这也保持了dev服务器的快速. 包根再导出每个特性;见 安装到什么对什么船。不要导入内部 dist 路径.
子路径导入( 建议):
// 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";
包根再导出每个特性. 日期和时间有效载荷类型在该地别名以避免名称相撞:
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/<feature>" | 每个运行时间依赖( 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 兼容性,用于你使用的可堆肥。 它们只用于类型,而你的应用程序已经安装了它们用于它制造的剑道组件.
-
运行时间依赖性 :
@vueuse/core, (中文(简体) ),@vueuse/integrations财务报告和审定财务报表focus-trap,用此软件包安装.usePopupTrap内部使用 VueUse 集成和焦点定位.
全部留着 @featherk/* 同一版本的软件包。 他们一起释放,每个 @featherk/ui 释放至少需要匹配 @featherk/composables通过翻新或Dependabot,将它们组合成一个更新.
样式
堆肥船没有CSS。 一些,例如 useWindow 财务报告和审定财务报表 useGridA11y,添加 fk-* 课程到他们管理的剑道组件 @featherk/styles 这些课程的主题.
使用维特测试
嘲弄一个可堆叠的, 嘲弄它的子路径, 并从同样的子路径导入它 在测试的代码。 每个子路径是一个单独的模块,而一个模拟只取代它命名的模块. root 模拟没有达到导入子路径的代码, 包含每个 @featherk/ui 组件,一个子路径模型不能达到导入根的代码. 两种情况都没有产生出错;测试只是运行真正的可相容性.
// 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", …);
构建
从寄存器根中运行 :
npm run build -- --filter=@featherk/composables
或运行软件包本地 :
npm run build
维护者笔记
- 每个功能文件夹都有
index.ts桶,从src/index.ts,并有一个匹配exports子路径。 譬如说,useGridA11y, (中文(简体) ),useGridActiveFilter财务报告和审定财务报表useGridRowAction住在这里src/grid/从@featherk/composables/grid。 。 。 . vite.config.ts为根和每个根建立一个ES和一个通用JS条目package.jsonexports子路径。 一个新特性文件夹只需要其子路径添加到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/* 软件包以单一方式维护 变动情况。 。 。 .