KanbanGit/resources/js/components/projects/UserSelectDropdown.vue

<script setup lang="ts">
import { Check, ChevronDown, UserRound } from 'lucide-vue-next';
import { computed } from 'vue';
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import type { UserSelectDropdownEmits, UserSelectDropdownProps } from '@/types';

const props = withDefaults(defineProps<UserSelectDropdownProps>(), {
    emptyLabel: 'Unassigned',
});

const emit = defineEmits<UserSelectDropdownEmits>();

const normalizedValue = computed(() => String(props.modelValue ?? ''));
const selectedUser = computed(
    () =>
        props.users.find((user) => String(user.id) === normalizedValue.value) ??
        null,
);

const selectUser = (value: string): void => {
    if (!props.editable || value === normalizedValue.value) {
        return;
    }

    const nextValue = value === '' ? '' : Number(value);

    emit('update:modelValue', nextValue);
    emit('commit', nextValue);
};
</script>

<template>
    <DropdownMenu v-if="editable">
        <DropdownMenuTrigger as-child>
            <button
                type="button"
                class="focus-visible:ring-ring/50 data-[state=open]:bg-primary/[0.08] data-[state=open]:text-primary hover:bg-primary/[0.055] hover:text-primary group -mx-1 flex min-h-7 w-[calc(100%+0.5rem)] items-center gap-2 rounded px-1 text-left text-sm font-medium outline-none transition-colors focus-visible:ring-[3px]"
                :aria-label="`Select ${label}`"
            >
                <UserAvatar
                    v-if="selectedUser"
                    :user="selectedUser"
                    class="size-6 shrink-0"
                />
                <span
                    v-else
                    class="border-outline-variant bg-surface-container-high text-muted-foreground flex size-6 shrink-0 items-center justify-center rounded-full border"
                >
                    <UserRound class="size-3.5" />
                </span>
                <span class="min-w-0 flex-1 truncate">
                    {{ selectedUser?.name ?? emptyLabel }}
                </span>
                <ChevronDown
                    class="text-muted-foreground size-3.5 shrink-0 transition-transform group-data-[state=open]:rotate-180"
                />
            </button>
        </DropdownMenuTrigger>

        <DropdownMenuContent
            align="end"
            :side-offset="6"
            class="w-(--reka-dropdown-menu-trigger-width) min-w-64 rounded p-1"
        >
            <DropdownMenuItem
                class="hover:bg-primary/[0.04] focus:bg-primary/[0.08] cursor-pointer gap-2.5 rounded px-2 py-2"
                :class="
                    normalizedValue === ''
                        ? 'bg-primary/[0.055] text-primary'
                        : ''
                "
                @select="selectUser('')"
            >
                <span
                    class="border-outline-variant bg-surface-container-high text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full border"
                >
                    <UserRound class="size-3.5" />
                </span>
                <span class="min-w-0 flex-1 truncate font-medium">
                    {{ emptyLabel }}
                </span>
                <Check
                    v-if="normalizedValue === ''"
                    class="text-primary size-4 shrink-0"
                />
            </DropdownMenuItem>

            <DropdownMenuItem
                v-for="user in users"
                :key="user.id"
                class="hover:bg-primary/[0.04] focus:bg-primary/[0.08] cursor-pointer gap-2.5 rounded px-2 py-2"
                :class="
                    normalizedValue === String(user.id)
                        ? 'bg-primary/[0.055] text-primary'
                        : ''
                "
                @select="selectUser(String(user.id))"
            >
                <UserAvatar :user="user" class="size-7 shrink-0" />
                <span class="min-w-0 flex-1">
                    <span class="block truncate font-medium">
                        {{ user.name }}
                    </span>
                    <span
                        v-if="user.email"
                        class="text-muted-foreground block truncate text-[11px]"
                    >
                        {{ user.email }}
                    </span>
                </span>
                <Check
                    v-if="normalizedValue === String(user.id)"
                    class="text-primary size-4 shrink-0"
                />
            </DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>

    <div
        v-else
        class="flex min-h-7 min-w-0 items-center gap-2 text-sm font-medium"
    >
        <UserAvatar
            v-if="selectedUser"
            :user="selectedUser"
            class="size-6 shrink-0"
        />
        <span
            v-else
            class="border-outline-variant bg-surface-container-high text-muted-foreground flex size-6 shrink-0 items-center justify-center rounded-full border"
        >
            <UserRound class="size-3.5" />
        </span>
        <span class="truncate">{{ selectedUser?.name ?? emptyLabel }}</span>
    </div>
</template>