credence-filter-modal-v1 v1.2.1

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

Form Object Data

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>