@stateform/element

StateForm implementation of element-ui

Quick Start

import {createStateForm} from '@stateform/element'
import "@stateform/element/dist/stateform-element.css"

const StateForm = createStateForm({
  upload: {
    handleUpload(file, props, cb) {
      // You should upload the file by yourself,
      // and call `cb` when the upload is completed
      cb({

        // "uploading" | "done" | "error"
        status: "done", 

        // By default, we will use the value of the `url` as the input value of this upload,
        // thus the outside world will only receive the url string.
        // If you want to input more infomation, you can set a `value` property, see below
        url: "http://xxxxx",

        // when error happened
        // error: "error message",
        
        // if there is an `value` property, we will use its value as the input value
        // value: {
        //  name: 'custom file name',
        //  url: 'http://xxxx'
        // }
      })
    },
    handleRemove(file) {
      // on file remove
    }
  },
  // components: customComponents
})

// now you can use StateForm as a component in vue 
// e.g., <StateForm :state="yourFormState" @input="inputHandler" @submit="submitHandler" />

Playground

Install

npm install @stateform/element  --save

vue and element-ui are peerDependencies

API

createStateForm

type createStateForm = (options?: StateFormOptions) => StateForm

interface StateFormOptions {
  // if you use Upload component, you should implement handleUpload and handleRemove 
  upload?: {
    handleUpload: (file: File, props: any, cb: UploadCallback) => void;
    handleRemove: (file: FileItem) => void;
  },
  // you are able to use custom components in StateForm
  components?: {
    [key: string]: Vue;
  }
}

type UploadCallback = (FileItem) => void;

interface FileItem {
  url: string;
  status: "uploading" | "done" | "error";
  thumbUrl?: undefined
  name?: string;
  error?: string;
  value?: any;
  uid?: string;
}

Example
see QuickStart

FormItemLayout

You can use this component in your custom component

interface FormItemLayoutProps {
  layout?: string;
  label?: string;
  cols?: StateForm.Cols;
  required?: boolean;
  className?: string;
  help?: string;
  error?: string;
  [key: string]: any;
}
interface FormItemLayout extends Vue {
}

Here is an example to define a custom component

<template>
  <FormItemLayout
    :layout="layout"
    :cols="cols"
    :label="label"
    :error="error"
    :required="required"
  >
    <Input
      :value="value"
      @input="$emit('input', $event)"
      :placeholder="placeholder"
    >
    </Input>
    <Button @click="sendCaptcha">Send</Button>
  </FormItemLayout>
</template>

<script>
import { Button , Input } from 'element-ui'
import { FormItemLayout } from '@stateform/element'  
export default {
  components: {
    Button,
    Input,
    FormItemLayout
  },
  // Component will receive all props from the state node.
  // For example, below is the state object of the StateForm, 
  // then Captcha component will receive p1, p2 .... pn.
  // {
  //   // ....
  //   children: [
  //     // ....
  //     {
  //       component: 'Captcha',
  //       p1: '1',
  //       p2: '2',
  //       // ...
  //       pn: 'n'
  //     }
  //   ]
  // }
  methods: {
    sendCaptcha() {
      // ....
    }
  }
}
</script>

TODO

• test

License

MIT