Maz-UI

MazChecklist ​

MazChecklist is a standalone component that allows creating a checklist with integrated search functionality. It provides a flexible and customizable user interface for selecting multiple items from a list of options. The component supports real-time search, color customization, and displays messages when no results are found.

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

TIP

This component can be translated globally using the MazUi plugin.

Basic usage ​

Selected languages: none

query value: none


vue
<template>
  Selected languages: {{ languages || 'none' }}

  <br />

  <MazChecklist
    v-model="languages"
    v-model:query="query"
    title="Select your languages"
    :search="{
      enabled: true,
      placeholder: 'Search a language',
      debounce: 300,
      autoFocus: false,
      size: 'sm'
    }"
    :items="languagesOptions"
    class="h-80"
  >
    <template #item="{ item }">
      <div class="flex w-full items-center justify-between gap-2">
        <span class="capitalize">{{ item.label }}</span>
        <MazBadge color="theme" outlined>
          {{ item.value }}
        </MazBadge>
      </div>
    </template>
  </MazChecklist>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import MazChecklist from 'maz-ui/components/MazChecklist'
  import { useDisplayNames } from 'maz-ui/composables/useDisplayNames'

  const query = ref<string>()
  const languages = ref<string[]>()
  const languagesOptions = useDisplayNames('en-US').getAllDisplayNames({ type: 'language' }).value.map(({ code, name }) => ({
    label: name,
    value: code,
  }))
</script>

Custom search function ​

You can replace the default search function by providing a custom search function. Useful when you need to search by multiple fields, if you want to use a different search algorithm or if you want search into your database by fetching data from an API.

Selected employees: none


Props ​

NameDescriptionTypeRequiredDefaultPossible values
model-valuev-model The model value of the checklist (selected items)T[]No--
queryv-model:query The query to filter the items (model)stringNo--
itemsThe list of items to displayO[]No--
titleThe title of the checkliststringNo--
elevationAdd elevation to the cardbooleanNofalse-
searchThe search input optionsboolean | MazInputProps<string>No{ enabled: false, debounce: 300, autoFocus: false }-
search-optionsThe options to normalize the search query (used by the default search function) By default, the threshold is 0.75(NormalizeStringOptions & { threshold?: number | undefined; })No--
search-functionReplace the default search function to provide a custom search function((query: string, items: O[]) => O[] | undefined)No--
colorThe color of the checklist (card, checkbox and search input)"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"No"primary"'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
translationsTranslations of the checklist component{ noResultsFound?: string | undefined; searchInput?: { placeholder?: string | undefined; } | undefined; }NoTranslations from-

Events ​

Event namePayloadDescription
update:model-valuevalue?: T[] | undefinedEmitted when the model value change
update:queryvalue?: string | undefinedEmitted when the query change

Slots ​

NameDescriptionBindings
titleuse this slot to customize the title-
no-resultsuse this slot to customize the no results area-
no-results-textuse this slot to customize the no results message-
itemuse this slot to customize the itemselectedValues T[]
item O

Made by LouisMazel with 🖤