@composy/size-vue

@composy/size-vue

@composy/size-vue 是 @composy/size-core 的 Vue 3 适配层。它提供 Vue Plugin、engine plugin、composables、组件和 v-size 指令，但核心计算、CSS 变量、断点和样式 token 解析都复用 core。

适配边界

• Vue 层负责 provide/inject、响应式 ref、组件渲染、指令生命周期和 app 安装。
• SizeManager、preset 合并、CSS 变量、断点判定、样式 token 解析、持久化和 sync 均来自 @composy/size-core。
• 原生 Vue Plugin 和 engine plugin 共用 createSizeRuntime() 与 installSizeRuntime()，避免同一个 app 内出现两套尺寸状态。

目录结构

src/
  components/          SizeSwitcher、SizePresetPicker、SizeProvider、SizeDebugPanel
  composables/         useSize、useAutoSize、useSizeBreakpoint 等
  context/             注入 key
  directives/          v-size 指令
  plugin/              原生 Vue Plugin 与共享 runtime 安装逻辑
  plugins/             engine plugin 入口
  size-switcher/       历史子路径兼容 wrapper
  size-preset-picker/  历史子路径兼容 wrapper

原生 Vue Plugin

import { createSizePlugin } from '@composy/size-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(
  createSizePlugin({
    defaultSize: 'comfortable',
    persistence: true,
    globalComponents: true,
    globalProperties: true,
  })
)

app.mount('#app')

说明：

• defaultPreset 仍是兼容别名，新代码推荐统一使用 defaultSize。
• 未显式传 defaultSize 时，可通过 baseSize / scale / unit 启动自定义配置。
• persistence 和 sync 会透传给 core 的 SizeManager。

Composable

import { useSize } from '@composy/size-vue'

const { applyPreset, compute, config, currentPreset, currentPresetDetail, presets } = useSize()

applyPreset('spacious')
void config.value.baseSize
void currentPreset.value
void currentPresetDetail.value
void presets.value
void compute(2)

useSizeBreakpoint() 复用 core 的 resolveSizeBreakpoint() 和断点判断函数，不在 Vue 层维护第二份阈值。

指令

<template>
  <section v-size:padding="'lg'" v-size:radius.important="'md'">
    内容
  </section>
</template>

v-size 会把语义 token 解析为 core 定义的 CSS 变量：

• font: lg -> font-size: var(--ld-font-lg)
• padding: md -> padding: var(--ld-spacing-md, var(--ld-md))
• width: 10px -> 直接保留 CSS 值

组件

• SizeSwitcher
  • 当前尺寸 preset 切换组件。
• SizePresetPicker
  • preset picker 组件，可自定义 trigger slot。
• SizeProvider
  • 提供 slot props 的轻量 provider。
• SizeDebugPanel
  • 调试当前 preset、base size 和断点的辅助面板。

Engine Plugin

import { createSizeEnginePlugin } from '@composy/size-vue/plugins'

const sizePlugin = createSizeEnginePlugin({
  defaultSize: 'default',
  persistence: true,
  globalComponents: true,
})

engine.use(sizePlugin)

行为约束：

• 如果 Vue app 尚未创建，engine plugin 会先创建 engine runtime，等 app:created 后再挂到 Vue app。
• 如果 Vue app 已通过原生 Vue Plugin 安装尺寸能力，engine plugin 会复用已有 runtime。
• engine state 与 engine API 会持续同步当前 size manager、配置和 preset。

导出入口

• @composy/size-vue
  • 根入口，导出 plugin、engine plugin、components、composables、context、directive。
• @composy/size-vue/plugin
  • 原生 Vue Plugin 入口。
• @composy/size-vue/plugins
  • engine plugin 入口。
• @composy/size-vue/components
  • 组件入口。
• @composy/size-vue/directives
  • v-size 指令入口。
• @composy/size-vue/size-switcher 与 @composy/size-vue/size-preset-picker
  • 历史兼容子路径，内部只保留薄 wrapper。

验证

pnpm --dir packages/vue run lint:check
pnpm --dir packages/vue run type-check
pnpm --dir packages/vue run test:run
pnpm --dir packages/vue run build

构建后必须保留 dist、es、esm、lib 四类产物，并通过 postbuild 清理源码目录中的生成型 .d.ts 和 .d.ts.map。