Maz-UI

Appearance

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.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

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="maz-h-80"
  >
    <template #item="{ item }">
      <div class="maz-flex maz-w-full maz-items-center maz-justify-between maz-gap-2">
        <span class="maz-capitalize">{{ item.label }}</span>
        <MazBadge color="theme" outline>
          {{ item.value }}
        </MazBadge>
      </div>
    </template>
  </MazChecklist>
</template>

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

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

Custom search function ​

You can replace the default search function by providing a custom search function.

vue
<template>
  <MazChecklist
    v-model="languages"
    v-model:query="query"
    :search="{
      enabled: true,
      placeholder: 'Search a language',
    }"
    :items="languagesOptions"
    :search-function="customSearchFunction"
    class="maz-max-h-80"
  />
</template>

<script lang="ts" setup>
  const query = ref()
  const languages = ref<string[]>()
  const languagesOptions = ref([])
  languagesOptions.value = useLanguageDisplayNames('en-US').getAllLanguageDisplayNames().value.map(({ code, language }) => ({
    label: language,
    value: code,
  }))

  function customSearchFunction(query: string, items: typeof languagesOptions) {
    return items.filter(
      ({ label, value }) =>
        label.toLowerCase().includes(query.toLowerCase()) ||
        value.toLowerCase().includes(query.toLowerCase()),
    )
  }
</script>

Props, Event & Slots ​

Props ​

Prop nameDescriptionTypeValuesDefault
modelValueThe model value of the checklist (selected items)Array-undefined
queryThe query to filter the items (model)string-undefined
itemsThe list of items to displayArray-undefined
titleThe title of the checkliststring-undefined
elevationAdd elevation to the card
@default false		boolean-false
searchThe search input options
@default		intersection-() => ({
enabled: false,
})
searchOptionsThe options to normalize the search query (used by the default search function)NormalizeStringOptions-
searchFunctionReplace the default search function to provide a custom search function
@default undefined		TSFunctionType-
colorThe color of the checklist (card, checkbox and search input)
@default primary		Color-'primary'

Events ​

Event namePropertiesDescription
update:queryvalue mixed - The new queryEmitted when the query change
update:model-valuevalue mixed - The new valueEmitted when the model value 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 item

Made by LouisMazel with ❤️