VstFilterCheckbox

Компоненту vst-filter-checkbox розроблено для можливості фільтрації за допомогою чекбоксів у користувацькому інтерфейсі. Він дозволяє користувачам обирати кілька параметрів зі списку прапорців, кожен з яких супроводжується додатковою інформацією, такою як покажчики кольору (необов'язково), підписи та лічильники (необов'язково).

Component API

Behaviour

Name	Description	Type
value	Обрані значення прапорців. Це може бути масив обраних значень або одне строкове значення.	String, Array
id	Обов'язковий унікальний ідентифікатор фільтру	String

Content

Name	Description	Type
options	Масив об'єктів або стрінгових значень. Допустимими ключами об'єкту є: id, name, title або сама опція, що будуть значеннями для v-model, та name, title або сама опція, яка піде як label для чекбоксу	Array

Events

Name	Description	Return value
@input	Івент зміни значення компонента	String

Приклад

Нижче наведено базове використання компоненти, де задано пропси id, placeholder, options. label - назва випадаючого акордеону, type - ключ, який визначає, який фільтр виводити.

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

Details

export default {
  data() {
    return {
      filter: [
        {
          type: "checkbox",
          label: "Pick favorite hobbie",
          placeholder: "Placeholder test",
          options: [
            {
              name: "music",
              count: 123,
              color: "red",
            },
            {
              name: "sports",
              count: 7,
              color: "blue",
            },
            {
              name: "reading",
              count: 55,
              color: "green",
            },
          ],
          id: "hobbie",
        },
      ],
    };
  },
};

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

   <template>
      <div>
        <code v-if="filterState" style="white-space: break-spaces;" class="mb-2 vsTailwind block">{{filterState}}</code>
        <VsFilter name="checkbox" :scheme="filter" @change="filterState = $event"></VsFilter>
      </div>
   </template>
   <script>
    export default {
      data() {
        return {
          filterState: {
            url: "",
            state: {
              id2: []
            }
          },
          filter: [
            {
              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: "hobbies",
            },
          ],
        };
      },
    };
   </script>