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>