@composy/progress-vue

@composy/progress-vue

基于 @composy/progress-core 的 Vue 3 适配层，包含组件、composable、directive 和插件。

安装

pnpm add @composy/progress-vue

组件

<script setup lang="ts">
import { ref } from 'vue'
import { LdProgress } from '@composy/progress-vue'

const percent = ref(50)
</script>

<template>
  <LdProgress v-model="percent" type="line" show-text />
  <LdProgress v-model="percent" type="circle" :diameter="120" />
</template>

Composable 与 directive

import { useProgress } from '@composy/progress-vue'

const { setPercent, complete } = useProgress({ initialValue: 0 })
await setPercent(50)
await complete()

<template>
  <div v-progress="50" />
  <div v-progress.circle="75" />
  <div v-progress="{ percent: 80, type: 'wave' }" />
</template>

异步任务、无障碍与 iframe

LdProgress 透传 ariaLabel、ariaDescribedBy、ariaLabelledBy、ariaValueText 和 respectReducedMotion。Core 的 bindTask 可通过 ref 暴露的实例调用；directive 会把样式注入到宿主元素的 ownerDocument，适用于 iframe 文档。

const { instance } = useProgress({ container: host, initialValue: 0 })
const task = instance.value?.bindTask(streamOfPercent)
await task?.promise

插件

import { ProgressPlugin } from '@composy/progress-vue'

app.use(ProgressPlugin)

CSS Token 与产物

组件通过 --ld-* color/size Token 和 --ldesign-progress-* 组件变量控制外观。构建会生成 dist、es、esm 和 lib 四套目录，并提供 CSS 入口 index.css 与 index.min.css。

开发

pnpm run type-check
pnpm run test:run
pnpm run lint:check
pnpm run build

构建由 @composy/builder 使用 rolldown 完成。权威构建、ESLint 和 TypeScript 配置位于 .ldesign/；根目录的 eslint.config.js 和 tsconfig*.json 保留兼容入口。构建产物须同时包含 dist、es、esm 和 lib，并与 package.json 的 exports 和入口字段一致。

License

MIT