Filter DropdownDraft

<script lang="ts" setup>
const value = ref()

const options = [
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
]
</script>

<template>
  <provet-stack direction="horizontal" gap="s" wrap>
    <FilterDropdown v-model="value" label="Species" :options />
  </provet-stack>
</template>

<script lang="ts" setup>
const value = ref([])

const options = [
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
]
</script>

<template>
  <provet-stack direction="horizontal" gap="s" wrap>
    <FilterDropdown v-model="value" label="Species" :options multiple />
  </provet-stack>
</template>

<script lang="ts" setup>
const value = ref([])

const options = [
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  {
    label: 'Canine',
    value: 'CANINE',
    children: [
      {
        label: 'German Shepherd',
        value: 'GERMAN_SHEPHERD',
      },
      {
        label: 'Siberian Husky',
        value: 'SIBERIAN_HUSKY',
      },
      {
        label: 'Golden Retriever',
        value: 'GOLDEN_RETRIEVER',
      },
    ],
  },
  {
    label: 'Feline',
    value: 'FELINE',
    children: [
      {
        label: 'Maine Coon',
        value: 'MAINE_COON',
      },
      { label: 'Siamese', value: 'SIAMESE' },
      {
        label: 'British Shorthair',
        value: 'BRITISH_SHORTHAIR',
      },
    ],
  },
  {
    label: 'Option 1 with no children',
    value: 'OPTION_1',
  },
  {
    label: 'Option 2 with no children',
    value: 'OPTION_2',
  },
  {
    label: 'Others',
    value: 'OTHERS',
  },
]
</script>

<template>
  <provet-stack direction="horizontal" gap="s" wrap>
    <FilterDropdown
      v-model="value"
      label="Species & Breeds"
      :options
      multiple
    />
  </provet-stack>
</template>

<script lang="ts" setup>
const value = ref([])

const options = [
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
]
</script>

<template>
  <provet-stack direction="horizontal" gap="s" wrap>
    <FilterDropdown v-model="value" label="Species" :options multiple>
      <template #option-label="props">
        <div class="custom-option-label">
          <provet-icon name="user-single" size="s"></provet-icon>
          <div class="label">{{ props.option.label }}</div>
          <div class="suffix">
            Suffix
            <provet-icon name="interface-star" size="s"></provet-icon>
          </div>
        </div>
      </template>
    </FilterDropdown>
  </provet-stack>
</template>

<style scoped>
.custom-option-label {
  flex: 1;
  display: flex;
  gap: var(--n-space-s);
  justify-content: space-between;
  align-items: center;
}

.custom-option-label .label {
  margin-inline-end: auto;
}

.custom-option-label .suffix {
  font-size: var(--n-font-size-s);
  display: flex;
  align-items: center;
  gap: var(--n-space-s);
}

.custom-option-label :is(.suffix, provet-icon) {
  color: var(--n-color-text-weaker);
}
</style>

<script lang="ts" setup>
const value = ref([])

const options = [
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
]

const displayFilterDropdown = ref(true)

/**
 * Example of how to remove the filter dropdown, will display it again after a second for demonstration purposes
 */
function removeFilterDropdown() {
  displayFilterDropdown.value = false

  setTimeout(() => {
    displayFilterDropdown.value = true
  }, 1000)
}
</script>

<template>
  <provet-stack direction="horizontal" gap="s" wrap>
    <FilterDropdown
      v-if="displayFilterDropdown"
      v-model="value"
      label="Species"
      :options
      multiple
      removable
      @remove="removeFilterDropdown()"
    />
  </provet-stack>
</template>

<script lang="ts" setup>
const value = ref([])

const options = [
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
]
</script>

<template>
  <provet-stack direction="horizontal" gap="s" wrap>
    <FilterDropdown
      v-model="value"
      label="Species"
      :options
      multiple
      searchable
    />
  </provet-stack>
</template>

<script lang="ts" setup>
const value = ref([])

const options = ref([])

const isFetchingLanguages = ref(false)

const fetchLanguages = async (query: string) => {
  // From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=dataset

  isFetchingLanguages.value = true

  let where = ''

  if (query) {
    where =
      '&where=' +
      encodeURIComponent(
        JSON.stringify({
          ProgrammingLanguage: {
            $regex: `${query}|${query.toUpperCase()}|${
              query[0].toUpperCase() + query.slice(1)
            }`,
          },
        }),
      )
  }

  const response = await fetch(
    'https://parseapi.back4app.com/classes/All_Programming_Languages?limit=9999&order=ProgrammingLanguage&keys=ProgrammingLanguage' +
      where,
    {
      headers: {
        'X-Parse-Application-Id': 'XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL', // This is the fake app's application id
        'X-Parse-Master-Key': 'Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv', // This is the fake app's readonly master key
      },
    },
  )

  const data = await response.json() // Here you have the data that you need

  options.value = data.results.map(
    (item: { objectId: string; ProgrammingLanguage: string }) => {
      return { value: item.objectId, label: item.ProgrammingLanguage }
    },
  )

  isFetchingLanguages.value = false
}
</script>

<template>
  <provet-stack direction="horizontal" gap="s" wrap>
    <FilterDropdown
      v-model="value"
      label="Programming language"
      :options
      multiple
      searchable
      :loading="isFetchingLanguages"
      :internal-search="false"
      @search-change="fetchLanguages($event)"
      @open="fetchLanguages('')"
    />
  </provet-stack>
</template>

<script lang="ts" setup>
const value = ref([])

const options = [
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  {
    label: 'Canine',
    value: 'CANINE',
    children: [
      {
        label: 'German Shepherd',
        value: 'GERMAN_SHEPHERD',
      },
      {
        label: 'Siberian Husky',
        value: 'SIBERIAN_HUSKY',
      },
      {
        label: 'Golden Retriever',
        value: 'GOLDEN_RETRIEVER',
      },
    ],
  },
  {
    label: 'Feline',
    value: 'FELINE',
    children: [
      {
        label: 'Maine Coon',
        value: 'MAINE_COON',
      },
      { label: 'Siamese', value: 'SIAMESE' },
      {
        label: 'British Shorthair',
        value: 'BRITISH_SHORTHAIR',
      },
    ],
  },
  {
    label: 'Option 1 with no children',
    value: 'OPTION_1',
  },
  {
    label: 'Option 2 with no children',
    value: 'OPTION_2',
  },
  {
    label: 'Others',
    value: 'OTHERS',
  },
]
</script>

<template>
  <provet-stack direction="horizontal" gap="s" wrap>
    <FilterDropdown
      v-model="value"
      label="Species & Breeds"
      :options
      multiple
      searchable
    />
  </provet-stack>
</template>

<script lang="ts" setup>
const value = ref([])

const options = [
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
]
</script>

<template>
  <provet-stack direction="horizontal" gap="s" wrap>
    <provet-fieldset label="Small">
      <FilterDropdown
        v-model="value"
        label="Species"
        :options
        multiple
        size="s"
      />
    </provet-fieldset>

    <provet-fieldset label="Medium">
      <FilterDropdown
        v-model="value"
        label="Species"
        :options
        multiple
        size="m"
      />
    </provet-fieldset>

    <provet-fieldset label="Large">
      <FilterDropdown
        v-model="value"
        label="Species"
        :options
        multiple
        size="l"
      />
    </provet-fieldset>
  </provet-stack>
</template>