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）|