Vue js dynamic inputs component

Preview

Live demo:

https://codepen.io/taverasady/pen/LYVzevo

Installation

npm i vue-dynamic-inputs

Usage

HTML: 

 <vue-dynamic-inputs
     @onSubmit="submitedValues"
     :data="listOfInputs"
     :buttonSettings="buttonSettings"
 />


JS:

<script>
import DynamicInputs from "vue-dynamic-inputs";
export default {
  name: "app",
  components: {
    DynamicInputs
  },
  data() {
    return {
      listOfInputs: [
        {
          type: "text",
          value: "",
          col: "6",
          placeholder: "",
          showLabel: true,
          label: "First Name"
        },
        {
          type: "text",
          value: "",
          col: "6",
          placeholder: "",
          showLabel: true,
          label: "Last Name"
        },
        {
          type: "number",
          value: null,
          col: "3",
          showLabel: true,
          label: "Age"
        },

        {
          type: "datepicker",
          value: new Date(),
          col: "3",
          placeholder: "Date of Birth",
          showLabel: true,
          label: "Date of birth"
        },
        {
          type: "text",
          value: "",
          col: "6",
          placeholder: "example: [email protected]",
          showLabel: true,
          label: "Email"
        },
        {
          type: "checkbox",
          value: false,
          col: "3",
          placeholder: "Are you single?",
          showLabel: false,
          label: ""
        },
        {
          type: "switch",
          value: false,
          col: "3",
          placeholder: "",
          showLabel: true,
          label: "Allow notifications"
        },
        {
          type: "radio",
          value: false,
          col: "6",
          placeholder: "",
          showLabel: true,
          label: "",
          options: [{ name: "Male" }, { name: "Female" }, { name: "Other" }]
        }
      ],
      buttonSettings: {
        label: "Save",
        color: "success",
        position: "right",
        size: "default"
      }
    };
  },
  methods: {
    submitedValues(value) {
      console.log(value);
    }
  },
  created() {}
};
</script>