Filter

Компонент призначений для полегшення створення динамічних фільтрів у додатках на Vue.js. Він дозволяє користувачам визначити параметри фільтрації, динамічно завантажувати дані та керувати станом фільтра на основі URL.

Підключення

hbs

{{{_vue "vs-filters"}}}

Component API

Behaviour

Name	Description	Type
scheme	Схема таблиці для фільтрації. Може бути рядком, об'єктом або масивом, за замовчуванням - порожній масив.	Object, String, Array
vueRouter	Позначає, чи використовувати Vue Router для зберігання стану фільтра в URL. За замовчуванням false	Boolean
name	Назва, яка використовується для ідентифікації фільтрів в параметрах URL. Якщо не вказано, то за замовчуванням використовується унікальний ідентифікатор (_uid) компонента	String

Style

Name	Description	Type
divider	Для можливості вказати кастомний тип розділювача значень в url, приклад дозволених символів | : ; $ *	String

Приклад

Приклад пропсу scheme

Details

export default {
  data() {
    return {
      filter: [
        {
          type: "text",
          label: "Label test",
          placeholder: "Placeholder test",
          id: "search",
        },
        {
          type: "switch",
          label: "Label test",
          placeholder: "Placeholder test",
          id: "id4",
        },
        {
          id: "id5",
          type: "radio",
          label: "Label test",
          placeholder: "Placeholder test",
          options: [
            {
              id: "test1",
              text: "Test perevirka",
            },
            {
              id: "test12",
              text: "perevirka",
            },
          ],
        },
        {
          type: "select",
          label: "Label test",
          placeholder: "Placeholder test",
          id: "id3",
          default_option: "Оберіть значення",
          options: ["Eric Clapton", "John Mayer", "Stevie Ray Vaughn", "Jimi Hendrix", "Albert King"],
        },
        {
          type: "checkbox",
          label: "Label test",
          placeholder: "Placeholder test",
          options: [
            {
              name: "music",
              count: 123,
              color: "red",
            },
            {
              name: "sports",
              count: 7,
              color: "blue",
            },
            {
              name: "reading",
              count: 55,
              color: "green",
            },
          ],
          id: "id2",
        },
      ],
    };
  },
};

Приклад компоненту

  <template>
    <div>
      <code v-if="filterState" style="white-space: break-spaces;" class="mb-2 vsTailwind block">{{filterState}}</code>
      <VsFilter :name="'test1'" :scheme="filter" @change="filterState = $event" />
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          filterState: {
            url: "",
            state: {
              "search": "",
              "id5": "test1",
              "id3": "John Mayer",
              "id2": []
            }
          },
          filter: [
            {
              type: "text",
              label: "Label test",
              placeholder: "Placeholder test",
              id: "search",
            },
            {
              id: "id5",
              type: "radio",
              label: "Label test",
              placeholder: "Placeholder test",
              options: [
                {
                  id: "test1",
                  text: "Test perevirka",
                },
                {
                  id: "test12",
                  text: "perevirka",
                },
              ],
            },
            {
              type: "autocomplete",
              label: "Choose an applicant",
              placeholder: "Choose an applicant to vote",
              id: "id3",
              default_option: "Оберіть значення",
              options: ["Eric Clapton", "John Mayer", "Stevie Ray Vaughn", "Jimi Hendrix", "Albert King"],
            },
            {
              type: "checkbox",
              label: "Label test",
              placeholder: "Placeholder test",
              options: [
                {
                  name: "music",
                  count: 123,
                  color: "red",
                },
                {
                  name: "sports",
                  count: 7,
                  color: "blue",
                },
                {
                  name: "reading",
                  count: 55,
                  color: "green",
                },
              ],
              id: "id2",
            },
          ],
        };
      },
    };
  </script>
  

Структура проекту

#src
├── App.vue
├── assets
|  └── logo.png
├── components
|  ├── filter
|  |  ├── layout
|  |  |  └── vst-filter-layout.vue
|  |  ├── misc
|  |  |  └── vst-filter-skeleton.vue
|  |  ├── vst-filter-checkbox.vue
|  |  ├── vst-filter-input.vue
|  |  ├── vst-filter-radio.vue
|  |  ├── vst-filter-select.vue
|  |  ├── vst-filter-switch.vue
|  |  └── vst-filter-text.vue
|  ├── index.js
|  └── vs-filter.vue
├── main.js
├── misc
|  ├── filterComponents.js
|  └── init-filter.js
└── mixins
   └── vs-filter-mx.js