credence-filter-modal-v1

Filter Modal Component for Credence Projects

 version: 1.2.1

Installation

npm i credence-modal-filter-v1

Features

• Lorem ipsum

Dependencies

• [Bootstrap-Vue] - ^2.0.0-rc.21

Usage

    <div>
        ...
        <filter-modal :filterModal="propObject" />
        ...
    </div>

Prop Object Data

Name	Description	Type	Syntax
ID	Modal ID	String	id: "myModalID"
Title	Modal Title	String	title: "Filter By"
Cancel Title	Value of the cancel button	String	cancelTitle: "Clear All"
Ok Title	Value of the ok button	String	title: "Apply Filters"
Form	Form input field data	Object	form: {...}
Responses	v-model data for each input field	Object	responses: {}

Form Object Data

Name	Description	Type	Syntax	Variants
Autocomplete	Form autocomplete attr.	String	autocomplete: "off"	'on', 'off'
Fields	Input fields data	[Object]	fields: [{...}]	----------

Fields Array Object Data

Data for each field(s) row in the the form

Name	Description	Type	Syntax	Variants
ID	Field ID	[String]	id: ["fieldId1"]	id: [String, String]
Label	Field Label	String	label: "First Name"	-------
Type	Field Type	[String, String]	type: ["single", "date"]	type: ["paired", "date"]
Ok Handler	Handler func. for ok button	Function(event)	okHandler(event){...}	-----
Cancel Handler	Handler func. for cancel button	Function(event)	cancelHandler(event){...}	-----
Submit Handler	Handler func. for form submit	Function(event)	submitHandler(event){...}	-----

For List Type Field

Name	Description	Type	Syntax	Variants
List Options	Values for the select input field	[Array]	listOptions: [["val1", "val2"],]	listOptions: [["val1", "val2"], ["valA", "valB"],]

Sample Usage

<template>
  <filter-modal :filterModal="filterModal" />
</template>

<script>
import FilterModal from "credence-filter-modal-v1/src/FilterModal.vue";

export default {
  name: "ContainerComponent",
  components: { FilterModal },
  data() {
    return {
      filterModal: {
        id: "filter-modal-1",
        title: "Filter By",
        cancelTitle: "Clear All",
        okTitle: "Apply",
        form: {
          autocomplete: "off",
          fields: [
            { id: ["fieldId1"], label: "Date", type: ["single", "date"] },
            { id: ["fieldId2"], label: "Text", type: ["single", "text"] },
            { id: ["fieldId3"], label: "Number", type: ["single", "number"] },
            // prettier-ignore
            { id: ["fieldId4"], label: "Select", type: ["single", "list"], listOptions: [["USD/INR", "INR/AUD"]] },
            { id: ["fieldId5", "fieldId6"], label: "Paired Date", type: ["paired", "date"] },
          ],
        },
        responses: {},
        okHandler(event) {
          event.preventDefault();
          console.log("Apply");
        },
        cancelHandler(event) {
          event.preventDefault();
          console.log("Close");
        },
        submitHandler() {
          console.log("Submit");
        },
      },
    };
  },
};
</script>