xinnian999/vue-form-craft

Vue Form Craft – クイック概要

概要: JSON schemaからフォームを設計・レンダリングできるVue 3ベースのライブラリです。視覚的なドラッグ＆ドロップフォームビルダー (FormDesign) とランタイムレンダラー (FormRender) が含まれています。また、schemaの生成や編集を支援するオプションのAI機能も提供します。

主な機能

• ビジュアルデザイナー – コンポーネントをドラッグして JsonSchema を作成。
• レンダラー – FormRender がschemaを読み込み、動作するフォームを生成。
• 複雑なロジック – フィールドレベルの式、データ/属性のリンク、ネストされた配列 (FormList)。
• バリデーション – 組み込みルール（必須、最小/最大値、パターン、カスタムJS）。
• AI支援によるschema作成 – シンプルな ai 関数を通じて任意のLLMエンドポイントを接続。
• UIアダプター – Element Plusを標準サポート。Ant Design Vueへの切り替えも可能。

プロジェクトでの使用方法

1. npmパッケージをインストール：

   npm i vue-form-craft
   

2. グローバル登録し、必要に応じてUIライブラリを選択：

   import ElementPlus from 'element-plus'
   import { createApp } from 'vue'
   import VueFormCraft from 'vue-form-craft'
   import 'element-plus/dist/index.css'
   const app = createApp(App)
   app.use(ElementPlus)
   app.use(VueFormCraft) // または app.use(VueFormCraft, { ui: AntdAdapter })
   

3. schema オブジェクトを渡し、v-model をデータにバインドして FormRender でフォームをレンダリング。
4. または、ビジュアルビルダー FormDesign をページに配置し、エンドユーザーがその場でフォームを作成できるようにする。
5. AIを有効にするには、LLMエンドポイントを呼び出す ai 関数を提供します。ライブラリがプロンプトを転送し、生成されたschemaテキストを受け取ります。

プロジェクト構成

• lib – 公開されている vue-form-craft パッケージのソース。
• play – ローカル開発用のプレイグラウンド。
• docs – 使用方法とライブデモを含むVitePressサイト。

対象ユーザー 管理パネル、社内ツール、または動的でschema駆動型のフォームを必要とするVue 3アプリケーションを構築するフロントエンドチーム。特に、ローコードのビジュアルエディタとAI支援を求めている場合に最適です。

ライブデモとドキュメント

• Demo: https://form.elin521.cn/form-design.html
• Docs: https://form.elin521.cn/