vue-form-producer

By linking form creation required for business applications, input screens using forms, and data display screens with JSON data, Vue.js / Bootstrap-Vue the productivity of form development in front-end development. It is a component that improves in terms of productivity.

業務アプリケーションに必要とされるフォームの作成から、フォームを使った入力画面、データ表示画面までをJSONデータで連携し、Vue.js / Bootstrap-Vue でのフロントエンド開発におけるフォーム開発の生産性を飛躍的に向上するコンポーネントです。

DEMO

デモサイトはこちら

Install

npm install vue-form-producer

BootstrapVue Setup

Register BootstrapVue in your app entry point (typically app.js or main.js):

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

詳しくは BootstrapVue のサイトを参照ください

Setup

import { swFormEditor, swFormInputter, swFormViewer } from 'vue-form-producer'

Usage

vue-form-producer は、以下の3つのコンポーネントで構成されています。

• フォーム作成コンポーネント / sw-form-editor
• 入力フォームコンポーネント / sw-form-inputter
• データ表示コンポーネント / sw-form-viewer

フォーム作成コンポーネント / sw-form-editor

<template>
  <div>
    <sw-form-editor type_info="ALL" item_key_option="false" v-model="form_info" />
  </div>
</template>

<script>
  import { swFormEditor } from 'vue-form-producer'

  export default {
    data() {
      return {
        form_info: null
      }
    }
  }
</script>

Properties

Property	Type	Default	Description
form_info	Object	null	null の時は、新規作成。v-model で取得した "フォーム定義 JSON Object" をセットすると、編集モードとなる。
type_info	String	"basic"	［追加する項目］に表示する項目を指定。複数の場合は、カンマ区切りで指定。※別表を参照
type_option	String	"list"	［追加する項目タイプ］の表示方法を指定する。"list":リスト形式 or "tile":タイル形式 を指定する。
item_key_option	String	"false"	［項目キー］の入力フィールドの使用/不使用を指定する。"true":使用 or "false":不使用 を指定すること。
item_condition_option	String	"false"	［条件付き表示］の入力フィールドの使用/不使用を指定する。"true":使用 or "false":不使用 を指定すること。
font_info	String	"small"	項目名のフォント情報を指定する。"small","font-weight-bold" など

v-model

Property	Event	Description
value	update	フォームが定義された "フォーム定義 JSON Object" が出力される。データフォーマットはデモページを参照ください。

type-info

Value	Description
"all"	全てを表示する
"text"	短いテキスト
"texts"	長いテキスト
"number"	数値
"radio"	ラジオボタン
"checkbox"	チェックボックス
"toggle"	スイッチ
"date"	日付
"time"	時刻
"datetime"	日時
"image"	写真
"password"	パスワード
"name"	氏名
"telephone"	電話番号
"email"	メールアドレス
"pulldown"	プルダウン
"label"	ラベル
"table"	表
"markdown"	マークダウン
"basic"	"text","texts","number","radio", "checkbox","toggle","date","time","datetime" のセット
"standard"	"basic" + "image","password","name","telephone","email" のセット
"pro"	"standard" + "pulldown","label","table","markdown" のセット

入力フォームコンポーネント / sw-form-inputter

<template>
  <div>
    <sw-form-inputter :form_info="form_info" v-model="form_data"" />
  </div>
</template>

<script>
  import { swFormInputter } from 'vue-form-producer'

  export default {
    data() {
      return {
        form_info: null,
        form_data: null
      }
    }
  }
</script>

Properties

Property	Type	Default	Description
form_info	Object	null	フォーム作成コンポーネントで取得した "フォーム定義 JSON Object" を指定する。データフォーマットはデモページを参照ください。
form_data	Object	null	新規の場合は、null。編集時には、フォーム入力コンポーネントで取得した "データ入力 JSON Object" を指定する。データフォーマットはデモページを参照ください。
form_list_info	Array	null	［プルダウン］項目で［動的］を選択した時に選択肢のデータを指定する。
line_space	Number	0	項目の行間調整（0-5）

form_list_info

[ 
  {
    item_key: "select-1";
    item_options: [
      { value: 'value1', text: 'text 1' },
      { value: 'value2', text: 'text 2' },...,{}
    ]
  },...,{}
]

v-model

Property	Event	Description
value	update	フォームで入力された "データ入力 JSON Object" が出力される。データフォーマットはデモページを参照ください。

データ表示コンポーネント / sw-form-viewer

<template>
  <div>
    <sw-form-viewer :form_data="form_data" 
          pdf_output pdf_output_button="PDF出力" pdf_output_placement="top" />
  </div>
</template>

<script>
  import { swFormViewer } from 'vue-form-producer'
  
  export default {
    data() {
      return {
        form_data: null
      }
    }
  }
</script>

Properties

Property	Type	Default	Description
form_data	Object	null	フォーム入力コンポーネントで取得した "データ入力 JSON Object" を指定する。
pdf_output	toggle	false	true:PDF出力ボタンを表示する / false:PDF出力ボタンを表示しない
pdf_output_button	String	"PDF出力"	PDF出力ボタンの名称
pdf_output_placement	String	"top"	PDF出力ボタンの表示位置 "top":先頭 "bottom":最後尾
line_space	Number	0	項目の行間調整（0-5）