@ fiscozen/ 组合

关于使用量的文件,见 故事书文档

发展

设置

pnpm install
pnpm --filter @fiscozen/composables build

代码组织

src/
  index.ts                        Re-exports everything (composables, types, utils, FzFloating)
  types.ts                        Shared types (FzFloatingPosition, FzRect, FzUseCurrencyOptions, etc.)
  utils/
    index.ts                      Barrel file for utilities
    number/
      index.ts                    Currency format/parse helpers
    position/
      index.ts                    Floating position calculation helpers
  FzFloating.vue                  Component wrapper for useFloating
  composables/
    index.ts                      Barrel file for all composables
    useFloating.ts                Floating element positioning
    useMediaQuery.ts              Reactive CSS media query matching
    useBreakpoints.ts             Responsive breakpoint detection (wraps useMediaQuery)
    useClickOutside.ts            Click-outside detection
    useKeyDown.ts                 Keydown event listener
    useKeyUp.ts                   Keyup event listener
    useCurrency.ts                Currency formatting (deprecated)
  __tests__/
    useFloating.spec.ts           useFloating unit tests
    FzFloating.spec.ts            FzFloating component tests
    number.spec.ts                Currency/number utility tests

可编曲

浮动

浮动/流行元素的定位逻辑(工具提示,下放,弹出等).

结构 :

• 查询表数字 : positionCalculators (带有开口器)和 containerPositionCalculators (没有打开器)为所有12个明确位置提供O(1)位置分辨率(上/下/左/右+-起/端变体).
• 自动定位解析数字 : resolveAutoPosition 代表团 getHighestAvailableSpacePos 页:1 auto, (中文(简体) ), auto-vertical, (中文(简体) ), auto-start, (中文(简体) ), auto-end和他们的组合.
• 边界更正数字 : applyBoundaryCorrections 夹住容器界限内的最后位置,当元素溢出时会改变.
• 轮班预防: 该元素设置为 position: fixed 在直径计算之前.
• 反应重定位: 用途 IntersectionObserver 以跟踪可见度的变化.

这个 FzFloating 构成部分src/FzFloating.vue)是显示 useFloating 通过声明模板 API.

使用媒体查询

绕行回放 window.matchMedia返回计算 Ref<boolean> 当媒体查询符合状态变化时更新。 生命周期意识:在挂载上添加收听器,在卸载上删除.

使用断点

高级抽象 useMediaQuery 用于响应性设计. 接受打入的断点映射( R)Record<T, '${number}px'>返回时 isGreater(bp), (中文(简体) ), isSmaller(bp),以及 isInBetween(min, max)。 。 。 .

使用 Click 外部

检测到在目标元素外单击。 接受一个组件 ref,一个回调,和一个可选择的元素来限制听众(默认为 document) (中文(简体) ). 支持动态监听器通过 watch 当范围元素改变时.

使用密钥下

附 录a keydown 组件参考器的监听器。 生命周期管理(山地/非山地)。 如果缺少组件或回调则丢出 .

使用键

附 录a keyup 组件的收听器 document 当未提供组件时。 参数顺序不同于 useKeyDown数字 : (callback, component?) ——构件可选.

使用频率

堕地. 环绕 format 财务报告和审定财务报表 parse 从 src/utils/number消费者应直接进口这些功能.

测试

运行测试

pnpm --filter @fiscozen/composables test:unit
pnpm --filter @fiscozen/composables coverage

测试结构

• useFloating.spec.ts 编号 : FzFloating.spec.ts: 位置计算和组件渲染.
• number.spec.ts: 货币格式/公用设施.

测试模拟 window.matchMedia 内 beforeEach覆盖率目标: > 90%.

依赖关系

• @fiscozen/style (工作空间) —— 断点符号 useBreakpoints 编号 : useMediaQuery

构建

pnpm --filter @fiscozen/composables build

运行 Vite 库建设 。 输出到 dist/。 。 。 .