@composy/data-import-vue

@composy/data-import-vue

Vue adapter for @composy/data-import-core. It provides the DataImporter component, the useDataImporter() composable, and an installable plugin.

Install

pnpm add @composy/data-import-core @composy/data-import-vue

Quick start

<script setup lang="ts">
import { DataImporter } from '@composy/data-import-vue'

const targetFields = [
  { key: 'name', label: 'Name', type: 'string', required: true },
  { key: 'email', label: 'Email', type: 'string' },
]

function handleComplete(result: unknown) {
  void result
}
</script>

<template>
  <DataImporter :target-fields="targetFields" @complete="handleComplete" />
</template>

OPT-105 能力说明

DataImporter 会把解析、映射、校验和批量提交交给 Core，只在 Vue 层管理生命周期、响应式状态和事件。除 targetFields 外，组件支持 parseOptions、batchSize、maxValidationErrors、allowImportWithErrors、uniqueKeys、duplicateStrategy 与 asyncValidator 等配置：

<DataImporter
  :target-fields="targetFields"
  :parse-options="{ trimValues: true, trimHeaders: true }"
  :batch-size="100"
  :unique-keys="['email']"
  duplicate-strategy="skip"
  :async-validator="checkRemoteRule"
  @progress="handleProgress"
  @complete="handleComplete"
/>

progress 事件包含当前批次、成功、失败和跳过数量；complete 事件返回 total、success、failed、skipped 与 cancelled。组件 expose 的 validateAsync(options) 和 startImport(options) 分别支持可取消异步校验、dryRun 试运行以及外部 AbortSignal。需要直接编排状态时，可使用 useDataImporter() 获取 instance、step、mappings、validationResult、parseResult 和 validateAsync。

Package structure

packages/vue/
├── .ldesign/       # Builder, ESLint, and ESM/CJS TypeScript authority configs
├── src/            # Components, composables, plugins, and styles
├── tsconfig.json   # Compatibility entry for the ESM config
└── tsconfig.cjs.json # Compatibility entry for the CJS config

The adapter depends on @composy/data-import-core and targets Vue 3.5 or newer.

Build and checks

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

The package uses @composy/builder with rolldown and publishes dist/, es/, esm/, and lib/ outputs. Builder package metadata write-back is disabled so the reviewed exports and files list stay stable across builds.

License

MIT