vue-dynamic-filters

DEMO

:rocket: Making dynamic filters was never this easy now with this package you can make filters like amazon,souq,etc... just like that :clap:!

Installing

This package is availabel on npm.

Using npm:

npm i vue-dynamic-filters

if you want to use it globale main.js

import Vue from "vue";
import vueDynamicFilters from "vue-dynamic-filters";

Vue.component("vueDynamicFilters", vueDynamicFilters);

Usage

vue-dynamic-filters can be used in two methods, the first method is to give vue-dynamic-filters all the filters and the package will do all the work, the second method is you do the loop and depend on the object you pass it will preview the input that you want.

First Method

you don't have to worry about looping throw the filters vue-dynamic-filters will do all the work for you and the output value will also handle that for you, you can see the first example code right here -> First Method Code the the products data is just for testing purposes.

<template>
  <div>
    <vue-dynamic-filters
      :filters="filters"
      :displayType="false"
      checkboxValue="id"
      selectValue="id"
      v-model="filterValues"
    ></vue-dynamic-filters>
   </div>
</template>
import vueDynamicFilters from "vue-dynamic-filters";
<script>
  export default{
    components: {
    vueDynamicFilters,
    },
    data(){
      return{
        filterValues:{},
        filters:[
            {
              title: "Search",
              filter_type: "text",
            },
            {
              title: "Price",
              filter_type: "price",
              min: "0.000000",
              max: "9000.000000",
            },
            {
              title: "Brand",
              filter_type: "checkbox",
              options: [
                {
                  id: 2,
                  title: "Nokia",
                },
                {
                  id: 4,
                  title: "Iphone",
                },
              ],
            },
        ]
      }
    }
  }
  </script>

Second Method

The second method lets you control in every input, the vue-dynamic-filters will handle to put all values in one property in this example is filterValues and also you can control of the output keys on every input, you can also check the second method example Second Method Code

<template>
  <div class="filters">
    <div v-for="filter in filters" :key="filter.id">
      <vue-dynamic-filters
        selectValue="id"
        checkboxValue="id"
        methodType="m2"
        :displayType="filter.display_type ? true : false"
        :filter="filter"
        :singleFilterValue="filterValues"
        :searchValueKey="filter.searchKey"
        :selectValueKey="filter.categoryKey"
        :checkboxValueKey="filter.checkboxKey"
        @methodTwoValueChanged="changeValue"
      ></vue-dynamic-filters>
    </div>
  </div>
</template>
<script>
import vueDynamicFilters from "vue-dynamic-filters";
export default{
  components: {
    vueDynamicFilters,
  },
  data() {
    return {
      filterValues: {
        textKey:'acc'
      },
      filters: [
        {
          title: "Search",
          filter_type: "text",
          searchKey: "textKey",
          display_type: 0,
        },
        {
          title: "Category",
          filter_type: "select",
          display_type: 0,
          categoryKey: "categoryKey",
          options: [
            {
              id: 2,
              title: "Mobiles",
            },
            {
              id: 3,
              title: "Cars",
            },
          ],
        },
        {
          title: "Brand",
          filter_type: "checkbox",
          checkboxKey: "checkboxKey",
          display_type: 1,
          options: [
            {
              id: 2,
              title: "Redmi",
            },
            {
              id: 4,
              title: "Iphone",
            },
          ],
        },
      ],
    };
  },
  methods: {
    changeValue(value) {
      this.filterValues = value;
    },
  },
}
</script>

as you can see in this example you can loop throw the vue-dynamic-filters and also you can control the output object key on every input if the filters are coming from some sort of API or something like that.

Events

@change

This event is used only for the first method m1 and you can have the object value as the first paramter.

@methodTwoValueChanged

This event is used only for the second method m2 and you must use it so you can change the value of your filtered data like the second method examples.

Options

filters

That the array that includes the inputs like the first examples above, only used by default for the first method.

Default: []

filter

That the object that includes the input like the second examples above, only used by default for the second method.

Default: {}

methodType

This property lets the vue-dynamic-filters know that you will work on the second method of the package and the developer will loop throw the component and use the @methodTwoValueChaned event and by default use the first method.

Default: m1

singleFilterValue

This is property only use for method m2 only this property you can update and add like v-model but only used for m2 check the second example for more clarification.

Default: {}

filterTitleKey

filter title key used for the text in the collapse button for example search, category, etc..., you specify the key that inside the filters array or the filter object by default is a title.

Default: title

filterTypeKey

This allows you to control the key that checks for the object that inside filters array or filter object that responsible for check filter type object for example filter_type: 'select', you can check the examples above for more clarification.

Default: filter_type

filterOptionsKey

This property only used for the select input and checkbox input that the key vue-dynamic-filters will loop in to display the values that inside the option value and by default options

Default: options

displayType

This property allows you to control the filter is collapsed or open, you can check the second example for more clarification.

Default: true

checkboxCheckName

This property allows you to control the validation on the checkbox name and this value operates with filterTypeKey property, in other words, is used for validation to check if the filterTypeKey == checkboxCheckName if true will display the filter.

Default: checkbox

checkboxLabelKey

This property is the key for the title of the checkbox object and this checkboxLabelKey will be in the label of the input key.

Default: title

checkboxValueKey

This property is to let you control the name of the returned key to the selected values.

Default: checkbox

checkboxValue

This property is let you control checkbox value, for example, you want the id to return so you will pass this property and in checkboxValueKey will return the id check example two for more clarification and by default vue-dynamic-filters return the full object, the checkboxValue act like this checkbox[checkboxValue] .

Default: `` an empty string that means you want to return the full object not key inside of it

selectCheckName

This property allows you to control the validation on the select name and this value operates with filterTypeKey property, in other words, is used for validation to check if the filterTypeKey == selectCheckName if true will display the filter.

Default: select

selectValueKey

This property is to let you control the name of the returned key to the selected values.

Default: select

selectDisplayNameKey

This property is the key to the title of the select option that will display in the select filter.

Default: title

selectValue

This property is let you control select value, for example, you want the id to return so you will pass this property and in selectValue will return the id check example two for more clarification and by default vue-dynamic-filters return the full object, the selectValue act like this select[selectValue] .

Default: `` an empty string that means you want to return the full object not key inside of it

searchCheckName

This property allows you to control the validation on the search name and this value operates with filterTypeKey property, in other words, is used for validation to check if the filterTypeKey == searchCheckName if true will display the filter.

Default: text

searchValueKey

This property is to let you control the name of the returned key to the selected values.

Default: search

searchButtonName

This property is simply the text inside the button.

Default: Search

priceCheckName

This property allows you to control the validation on the price name and this value operates with filterTypeKey property, in other words, is used for validation to check if the filterTypeKey == priceCheckName if true will display the filter.

Default: price

minLabel

This property is simply the text inside the key for the title of the price object and this minLabel will be in the label of the input.

Default: min

maxLabel

This property is simply the text inside the key for the title of the price object and this maxLabel will be in the label of the input.

Default: max

minPriceValueKey

This property is to let you control the name of the returned key to the selected values.

Default: min

maxPriceValueKey

This property is to let you control the name of the returned key to the selected values.

Default: max

pricebuttonName

This property is simply the text inside the button.

Default: Search

vueFilterClassMethodOne

This property is a class that holds filters.

Default: vue-filter__method-one

vueFilterClassMethodTwo

This property is a class that holds every filters.

Default: vue-filter__method-two

filterHolderClass

This property is a class that holds only one filter.

Default: vue-filter__filter-holder

filterInputHolderClass

This property is a class that holds only one input.

Default: vue-filter__input-holder

checkboxHolderClass

This property is a class for the holder of all the checkboxes.

Default: vue-filter__checkboxes-holder

checkboxClass

This property is a class that holds input and the label of the every checkbox.

Default: vue-filter__checkbox

checkboxLabelClass

This property is a class for checkbox label.

Default: vue-filter__checkbox-label

checkboxInputClass

This property is a class for checkbox input.

Default: vue-filter__checkbox-input

searchInputClass

This property is a class for the search input.

Default: vue-filter__search

searchFormClass

This property is a class for the search form.

Default: vue-filter__search-form

searchBtnClass

This property is a class for the search button.

Default: vue-filter__search-btn

selectClass

This property is a class for the select input.

Default: vue-filter__select

priceFormClass

This property is a class for the search form.

Default: vue-filter__price-form

minHolderClass

This property is a class for the holder min price label and the input.

Default: vue-filter__min-holder

maxHolderClass

This property is a class for the holder max price label and the input.

Default: vue-filter__max-holder

priceLabelClass

This property is a class for price label.

Default: vue-filter__price-label

priceInputClass

This property is a class for price input min & max.

Default: vue-filter__price-input

priceBtnClass

This property is a class for price button.

Default: vue-filter__price-btn