{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "select-list",
  "title": "Select List",
  "description": "Asynchronous searchable single or multiple selection powered by TanStack Query.",
  "dependencies": [
    "@lucide/vue",
    "@tanstack/vue-query",
    "@vueuse/core"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "command",
    "popover",
    "spinner"
  ],
  "files": [
    {
      "path": "registry/js/components/ui/select-list/SelectList.vue",
      "content": "<script setup lang=\"ts\">\nimport { useQuery } from '@tanstack/vue-query';\nimport { CheckIcon, ChevronDownIcon } from '@lucide/vue';\nimport { refDebounced } from '@vueuse/core';\nimport { computed, ref, useId, watch } from 'vue';\nimport { cn } from '@/lib/utils';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n    Command,\n    CommandEmpty,\n    CommandGroup,\n    CommandInput,\n    CommandItem,\n    CommandList,\n} from '@/components/ui/command';\nimport {\n    Popover,\n    PopoverContent,\n    PopoverTrigger,\n} from '@/components/ui/popover';\nimport { Spinner } from '@/components/ui/spinner';\n\ntype OptionId = string | number;\ntype SelectListValue = OptionId | OptionId[] | null;\n\ntype Option = {\n    id: OptionId;\n    name: string;\n    reference?: string | null;\n};\n\nconst props = withDefaults(\n    defineProps<{\n        endpoint: string;\n        modelValue: SelectListValue;\n        multiple?: boolean;\n        placeholder?: string;\n        searchPlaceholder?: string;\n        emptyText?: string;\n        disabled?: boolean;\n    }>(),\n    {\n        multiple: false,\n        placeholder: 'Select...',\n        searchPlaceholder: 'Search...',\n        emptyText: 'No items found.',\n        disabled: false,\n    },\n);\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: SelectListValue];\n    change: [value: Option | Option[] | null];\n}>();\n\nconst id = useId();\nconst open = ref(false);\nconst query = ref('');\nconst debouncedQuery = refDebounced(query, 300);\nconst selectedIds = computed<OptionId[]>(() => {\n    if (Array.isArray(props.modelValue)) {\n        return props.modelValue;\n    }\n\n    return props.modelValue === null ? [] : [props.modelValue];\n});\nconst selectedKey = computed(() =>\n    selectedIds.value.map(String).sort().join(','),\n);\nconst originalSelection = ref(selectedKey.value);\n\nconst { data, error, isFetching, isPending } = useQuery<Option[]>({\n    queryKey: [\n        'select-list',\n        computed(() => props.endpoint),\n        debouncedQuery,\n        selectedKey,\n    ],\n    queryFn: async ({ signal }) => {\n        const parameters = new URLSearchParams({\n            search: debouncedQuery.value,\n            ids: selectedIds.value.join(','),\n        });\n        const separator = props.endpoint.includes('?') ? '&' : '?';\n        const response = await fetch(\n            `${props.endpoint}${separator}${parameters}`,\n            {\n                headers: { Accept: 'application/json' },\n                signal,\n            },\n        );\n\n        if (!response.ok) {\n            throw new Error(`Unable to load options (${response.status}).`);\n        }\n\n        const payload = (await response.json()) as\n            { data?: Option[] } | Option[];\n\n        return Array.isArray(payload) ? payload : (payload.data ?? []);\n    },\n});\n\nconst options = computed(() => data.value ?? []);\nconst selectedOptions = computed(() =>\n    selectedIds.value\n        .map((selectedId) =>\n            options.value.find((option) => sameId(option.id, selectedId)),\n        )\n        .filter((option): option is Option => option !== undefined),\n);\nconst selectedOption = computed(() => selectedOptions.value[0] ?? null);\n\nfunction sameId(first: OptionId, second: OptionId): boolean {\n    return String(first) === String(second);\n}\n\nfunction isSelected(option: Option): boolean {\n    return selectedIds.value.some((selectedId) =>\n        sameId(selectedId, option.id),\n    );\n}\n\nfunction select(option: Option): void {\n    if (props.multiple) {\n        const value = isSelected(option)\n            ? selectedIds.value.filter(\n                  (selectedId) => !sameId(selectedId, option.id),\n              )\n            : [...selectedIds.value, option.id];\n\n        emit('update:modelValue', value);\n\n        return;\n    }\n\n    emit('update:modelValue', isSelected(option) ? null : option.id);\n    open.value = false;\n}\n\nwatch(open, (isOpen) => {\n    if (isOpen) {\n        originalSelection.value = selectedKey.value;\n\n        return;\n    }\n\n    if (selectedKey.value === originalSelection.value) {\n        return;\n    }\n\n    originalSelection.value = selectedKey.value;\n    emit(\n        'change',\n        props.multiple ? selectedOptions.value : selectedOption.value,\n    );\n});\n</script>\n\n<template>\n    <Popover v-model:open=\"open\">\n        <PopoverTrigger as-child>\n            <Button\n                :id=\"id\"\n                variant=\"outline\"\n                role=\"combobox\"\n                :aria-expanded=\"open\"\n                :aria-busy=\"isFetching\"\n                :disabled=\"disabled\"\n                class=\"w-full justify-between border-input bg-background px-3 font-normal outline-offset-0 focus-visible:outline-[3px] dark:bg-input/30\"\n            >\n                <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n                    <Spinner v-if=\"isPending || isFetching\" class=\"shrink-0\" />\n\n                    <span\n                        v-if=\"multiple && selectedOptions.length > 0\"\n                        class=\"flex min-w-0 items-center gap-1\"\n                    >\n                        <Badge\n                            v-for=\"option in selectedOptions.slice(0, 2)\"\n                            :key=\"option.id\"\n                            class=\"max-w-32 truncate\"\n                        >\n                            {{ option.name }}\n                        </Badge>\n                        <span\n                            v-if=\"selectedOptions.length > 2\"\n                            class=\"text-sm text-muted-foreground\"\n                        >\n                            +{{ selectedOptions.length - 2 }}\n                        </span>\n                    </span>\n\n                    <span\n                        v-else-if=\"!multiple && selectedOption\"\n                        class=\"truncate\"\n                    >\n                        {{ selectedOption.name }}\n                    </span>\n\n                    <span v-else class=\"truncate text-muted-foreground\">\n                        {{ placeholder }}\n                    </span>\n                </span>\n\n                <ChevronDownIcon\n                    class=\"size-4 shrink-0 text-muted-foreground/80\"\n                    aria-hidden=\"true\"\n                />\n            </Button>\n        </PopoverTrigger>\n\n        <PopoverContent\n            class=\"w-full min-w-[var(--reka-popper-anchor-width)] border-input p-0\"\n            align=\"start\"\n        >\n            <Command :filter=\"() => true\">\n                <CommandInput\n                    v-model=\"query\"\n                    class=\"w-full\"\n                    :placeholder=\"searchPlaceholder\"\n                />\n                <CommandList>\n                    <CommandEmpty>\n                        {{ error instanceof Error ? error.message : emptyText }}\n                    </CommandEmpty>\n                    <CommandGroup>\n                        <CommandItem\n                            v-for=\"option in options\"\n                            :key=\"option.id\"\n                            :value=\"String(option.id)\"\n                            @select=\"select(option)\"\n                        >\n                            <span\n                                :class=\"\n                                    cn(\n                                        'mr-2 flex size-4 items-center justify-center rounded-sm border border-primary',\n                                        isSelected(option)\n                                            ? 'bg-primary text-primary-foreground'\n                                            : 'text-transparent',\n                                    )\n                                \"\n                            >\n                                <CheckIcon class=\"size-3\" aria-hidden=\"true\" />\n                            </span>\n                            <span class=\"truncate\">{{ option.name }}</span>\n                        </CommandItem>\n                    </CommandGroup>\n                </CommandList>\n            </Command>\n        </PopoverContent>\n    </Popover>\n</template>\n",
      "type": "registry:ui",
      "target": "resources/js/components/ui/select-list/SelectList.vue"
    },
    {
      "path": "registry/js/components/ui/select-list/index.ts",
      "content": "export { default as SelectList } from './SelectList.vue';\n",
      "type": "registry:ui",
      "target": "resources/js/components/ui/select-list/index.ts"
    }
  ],
  "type": "registry:ui"
}