@meistrari/tela-build 1.0.0

package/components/tela/filters/user-filter.stories.ts

@@ -0,0 +1,344 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import UserFilter from './user-filter.vue'
+
+const meta: Meta<typeof UserFilter> = {
+    title: 'Filters/UserFilter',
+    component: UserFilter,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A dropdown filter component for selecting users. Features a search bar, scrollable user list with avatars, and displays selected user avatars in the button. Supports multi-select with visual overflow indicators.',
+            },
+        },
+    },
+    argTypes: {
+        buttonLabel: {
+            control: 'text',
+            description: 'The label displayed on the filter button',
+        },
+        users: {
+            control: 'object',
+            description: 'Array of user/member objects to display as options',
+        },
+        isActive: {
+            control: 'boolean',
+            description: 'Whether the filter is currently active (has users selected)',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the filter button is disabled',
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Whether the filter is in a loading state',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+// Mock Member[] type structure (matching Member type from @meistrari/auth-sdk/utils)
+const mockUsers = [
+    {
+        id: '1',
+        userId: '1',
+        organizationId: 'org-1',
+        role: 'member',
+        createdAt: new Date(),
+        user: {
+            id: '1',
+            name: 'Alice Johnson',
+            email: 'alice@example.com',
+            image: 'https://i.pravatar.cc/150?img=1',
+        },
+    },
+    {
+        id: '2',
+        userId: '2',
+        organizationId: 'org-1',
+        role: 'member',
+        createdAt: new Date(),
+        user: {
+            id: '2',
+            name: 'Bob Smith',
+            email: 'bob@example.com',
+            image: 'https://i.pravatar.cc/150?img=2',
+        },
+    },
+    {
+        id: '3',
+        userId: '3',
+        organizationId: 'org-1',
+        role: 'member',
+        createdAt: new Date(),
+        user: {
+            id: '3',
+            name: 'Carol Williams',
+            email: 'carol@example.com',
+            image: 'https://i.pravatar.cc/150?img=3',
+        },
+    },
+    {
+        id: '4',
+        userId: '4',
+        organizationId: 'org-1',
+        role: 'member',
+        createdAt: new Date(),
+        user: {
+            id: '4',
+            name: 'David Brown',
+            email: 'david@example.com',
+            image: 'https://i.pravatar.cc/150?img=4',
+        },
+    },
+    {
+        id: '5',
+        userId: '5',
+        organizationId: 'org-1',
+        role: 'member',
+        createdAt: new Date(),
+        user: {
+            id: '5',
+            name: 'Eve Davis',
+            email: 'eve@example.com',
+            image: 'https://i.pravatar.cc/150?img=5',
+        },
+    },
+]
+
+export const Default: Story = {
+    render: args => ({
+        components: { UserFilter },
+        setup() {
+            const selected = ref({ identifier: 'user', label: 'User', value: undefined })
+            const isActive = ref(false)
+
+            function handleApply(value: any) {
+                const users = value.user
+                const userNames = users.map((email: string) => {
+                    const member = mockUsers.find(u => u.user.email === email)
+                    return member?.user.name || email
+                })
+
+                const label = userNames.length > 2
+                    ? `${userNames[0]} & ${userNames.length - 1} others`
+                    : userNames.join(' & ')
+
+                selected.value = {
+                    identifier: 'user',
+                    label,
+                    value: users,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'user', label: 'User', value: undefined }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <UserFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: 'User',
+        users: mockUsers as any,
+        isActive: false,
+        disabled: false,
+        loading: false,
+    },
+}
+
+export const SingleUserSelected: Story = {
+    render: args => ({
+        components: { UserFilter },
+        setup() {
+            const selected = ref({ identifier: 'user', label: 'Alice Johnson', value: ['alice@example.com'] })
+            const isActive = ref(true)
+
+            function handleApply(value: any) {
+                const users = value.user
+                const userNames = users.map((email: string) => {
+                    const member = mockUsers.find(u => u.user.email === email)
+                    return member?.user.name || email
+                })
+
+                const label = userNames.length > 2
+                    ? `${userNames[0]} & ${userNames.length - 1} others`
+                    : userNames.join(' & ')
+
+                selected.value = {
+                    identifier: 'user',
+                    label,
+                    value: users,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'user', label: 'User', value: [] }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <UserFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: 'Alice Johnson',
+        users: mockUsers as any,
+        isActive: true,
+        disabled: false,
+        loading: false,
+    },
+}
+
+export const TwoUsersSelected: Story = {
+    render: args => ({
+        components: { UserFilter },
+        setup() {
+            const selected = ref({ identifier: 'user', label: 'Alice Johnson & Bob Smith', value: ['alice@example.com', 'bob@example.com'] })
+            const isActive = ref(true)
+
+            function handleApply(value: any) {
+                const users = value.user
+                const userNames = users.map((email: string) => {
+                    const member = mockUsers.find(u => u.user.email === email)
+                    return member?.user.name || email
+                })
+
+                const label = userNames.length > 2
+                    ? `${userNames[0]} & ${userNames.length - 1} others`
+                    : userNames.join(' & ')
+
+                selected.value = {
+                    identifier: 'user',
+                    label,
+                    value: users,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'user', label: 'User', value: [] }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <UserFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: 'Alice Johnson & Bob Smith',
+        users: mockUsers as any,
+        isActive: true,
+        disabled: false,
+        loading: false,
+    },
+}
+
+export const MultipleUsersSelected: Story = {
+    render: args => ({
+        components: { UserFilter },
+        setup() {
+            const selected = ref({ identifier: 'user', label: 'Alice Johnson & 3 others', value: ['alice@example.com', 'bob@example.com', 'carol@example.com', 'david@example.com'] })
+            const isActive = ref(true)
+
+            function handleApply(value: any) {
+                const users = value.user
+                const userNames = users.map((email: string) => {
+                    const member = mockUsers.find(u => u.user.email === email)
+                    return member?.user.name || email
+                })
+
+                const label = userNames.length > 2
+                    ? `${userNames[0]} & ${userNames.length - 1} others`
+                    : userNames.join(' & ')
+
+                selected.value = {
+                    identifier: 'user',
+                    label,
+                    value: users,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'user', label: 'User', value: [] }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <UserFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: 'Alice Johnson & 3 others',
+        users: mockUsers as any,
+        isActive: true,
+        disabled: false,
+        loading: false,
+    },
+}
+
+export const Disabled: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
+}
+
+export const Loading: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        loading: true,
+    },
+}

package/components/tela/filters/user-filter.vue

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import type { Member } from '@meistrari/auth-sdk/utils'
+
+const props = withDefaults(defineProps<{
+    disabled?: boolean
+    loading?: boolean
+    buttonLabel?: string
+    class?: string
+    selected: { identifier: string, label: string, value?: string | string[] }
+    isActive: boolean
+    users: Member[]
+    currentUserId?: string
+    searchPlaceholder?: string
+    applyLabel?: string
+    noOptionsFoundLabel?: string
+    meLabel?: string
+}>(), {
+    searchPlaceholder: 'Search',
+    applyLabel: 'Apply',
+    noOptionsFoundLabel: 'No options found',
+    meLabel: 'Me',
+})
+
+const emit = defineEmits<{
+    (e: 'apply', value: Record<string, any>): void
+    (e: 'reset'): void
+}>()
+
+const userOptions = computed(() => {
+    return props.users.map((member: Member) => ({
+        id: member.userId,
+        label: member.user.name,
+        value: member.user.email,
+        avatar: { src: member.user.image },
+        isCurrentUser: member.userId === props.currentUserId,
+    }))
+})
+
+const filteredUserOptions = ref(userOptions.value)
+
+const isDropdownOpen = ref(false)
+const dropdownRef = useTemplateRef('dropdownEl')
+const scrollableContainer = ref<HTMLElement>()
+
+const searchQuery = ref<string>('')
+const selectedUsers = ref<{ value: string, label: string }[]>(getInitialSelectedUsers())
+
+const selectedUserAvatars = computed(() => {
+    if (props.selected?.value && Array.isArray(props.selected.value)) {
+        return props.selected.value.map((email: string) => {
+            const user = userOptions.value.find(option => option.value === email)
+            return {
+                image: user?.avatar.src,
+                alt: user?.label || email,
+            }
+        })
+    }
+    return []
+})
+
+const visibleImages = computed(() => selectedUserAvatars.value.slice(0, 2))
+const remainingImages = computed(() => selectedUserAvatars.value.filter((_, index) => index >= 2))
+
+const hasScrollbar = computed(() => {
+    if (!scrollableContainer.value) {
+        return false
+    }
+    return scrollableContainer.value.scrollHeight > scrollableContainer.value.clientHeight
+})
+
+function toggleUser(selectedUser: { value: string, label: string }) {
+    if (selectedUsers.value.some(u => u.value === selectedUser.value)) {
+        selectedUsers.value = selectedUsers.value.filter(u => u.value !== selectedUser.value)
+    }
+    else {
+        const isCurrentUser = userOptions.value.find(u => u.value === selectedUser.value)?.isCurrentUser
+        if (isCurrentUser) {
+            selectedUsers.value.unshift(selectedUser)
+        }
+        else {
+            selectedUsers.value.push(selectedUser)
+        }
+    }
+}
+
+function handleApply() {
+    const users = selectedUsers.value.map(user => user.value)
+    emit('apply', { user: users })
+    isDropdownOpen.value = false
+}
+
+function handleSearchInput() {
+    filteredUserOptions.value = userOptions.value.filter(user => user.label.toLowerCase().includes(searchQuery.value.toLowerCase()))
+}
+
+function getInitialSelectedUsers() {
+    if (props.selected?.value && Array.isArray(props.selected.value)) {
+        return props.selected.value.map((email: string) => {
+            const user = userOptions.value.find(option => option.value === email)
+            return { value: user?.value ?? '', label: user?.isCurrentUser ? props.meLabel : user?.label ?? '' }
+        })
+    }
+    return []
+}
+
+watch(isDropdownOpen, (isOpen) => {
+    if (isOpen) {
+        selectedUsers.value = getInitialSelectedUsers()
+    }
+    else {
+        searchQuery.value = ''
+    }
+})
+
+watch(() => props.isActive, (isActive) => {
+    if (!isActive && isDropdownOpen.value) {
+        isDropdownOpen.value = false
+    }
+})
+
+watch(() => props.users, () => {
+    filteredUserOptions.value = userOptions.value
+})
+
+onClickOutside(dropdownRef, () => {
+    isDropdownOpen.value = false
+})
+</script>
+
+<template>
+    <div ref="dropdownEl" class="relative">
+        <TelaButton
+            :class="[props.class, isDropdownOpen && !props.isActive ? 'bg-gray-40! border-gray-240!' : '']"
+            class="group rounded-10px! flex items-center gap-6px focus:ring-0! px-12px!"
+            variant="secondary"
+            size="md"
+            h-32px
+            :disabled="props.disabled"
+            :loading="props.loading"
+            :leading="false"
+            @click="isDropdownOpen = !isDropdownOpen"
+        >
+            <div flex items-center gap-6px>
+                <TelaAvatar
+                    v-for="(avatar, index) in visibleImages"
+                    :key="avatar.alt"
+                    :image="avatar.image"
+                    :alt="avatar.alt"
+                    size="2xs"
+                    rounded-full
+                    :style="{ marginRight: index === visibleImages.length - 1 ? '0' : '-6px', boxShadow: '0 0 0 2px #1B222B' }"
+                />
+                <div
+                    v-if="remainingImages.length > 0"
+                    class="relative"
+                    :style="{ marginLeft: '-6px' }"
+                >
+                    <TelaAvatar
+                        :image="remainingImages[0]?.image"
+                        alt="remaining images"
+                        size="2xs"
+                        rounded-full
+                        :style="{
+                            boxShadow: '0 0 0 2px #1B222B',
+                        }"
+                    />
+                    <div
+                        class="absolute inset-0 flex items-center justify-center text-white text-xs font-medium rounded-full" :style="{
+                            background: 'rgba(3, 12, 22, 0.64)',
+                            backdropFilter: 'blur(0.5px)',
+                        }"
+                    >
+                        +{{ remainingImages.length }}
+                    </div>
+                </div>
+                <span class="max-w-125px! truncate">{{ props.buttonLabel }}</span>
+                <TelaIcon
+                    v-if="!props.isActive && !props.loading"
+                    name="i-ph-caret-down" size="sm" text-black-1000
+                    transition
+                    :class="[
+                        isDropdownOpen && 'rotate-180',
+                    ]"
+                />
+                <TelaIcon v-if="props.isActive && !props.loading" name="i-ph-x" size="sm" @click.stop="emit('reset')" />
+            </div>
+        </TelaButton>
+
+        <div
+            v-if="isDropdownOpen"
+            class="absolute top-full left-0 z-50 mt-1 w-256px bg-white rounded-12px shadow-[0px_3px_12px_0px_rgba(15,_32,_48,_0.08),_0px_12px_52px_0px_rgba(3,_12,_20,_0.16)] border border-gray-120 flex flex-col"
+        >
+            <div p-8px border-b border-gray-120>
+                <div class="relative">
+                    <TelaIcon
+                        name="i-ph-magnifying-glass"
+                        size="sm"
+                        class="absolute left-8px top-1/2 -translate-y-1/2 text-gray-600"
+                    />
+                    <input
+                        v-model="searchQuery"
+                        type="text"
+                        :placeholder="props.searchPlaceholder"
+                        class="w-full h-32px pl-32px pr-8px rounded-8px border border-gray-120 text-14px focus:outline-none focus:border-gray-240"
+                        @input="handleSearchInput"
+                    >
+                </div>
+            </div>
+            <div
+                ref="scrollableContainer"
+                class="flex-1 overflow-y-auto max-h-256px"
+                flex="~ col"
+                gap-4px
+                :class="hasScrollbar ? 'pl-8px pr-4px' : 'px-8px'"
+                pt-8px
+                pb-8px
+            >
+                <div v-if="filteredUserOptions.length === 0" flex="~ col" items-center justify-center gap-12px p-16px>
+                    <TelaIcon name="i-ph-magnifying-glass" size="24px" class="text-gray-400" />
+                    <span text-14px text-gray-600>{{ props.noOptionsFoundLabel }}{{ searchQuery ? ` with '${searchQuery}'` : '' }}</span>
+                </div>
+                <div
+                    v-for="userOption in filteredUserOptions"
+                    v-else
+                    :key="userOption.value"
+                    cursor-pointer
+                    flex="~ justify-between"
+                    items-center
+                    gap-12px
+                    p-8px
+                    rounded-8px
+                    h-28px
+                    class="hover:bg-gray-20"
+                    @click="toggleUser({ value: userOption.value, label: userOption.isCurrentUser ? props.meLabel.toLowerCase() : userOption.label })"
+                >
+                    <div flex="~" items-center gap-8px>
+                        <TelaAvatar
+                            size="2xs"
+                            rounded-full
+                            :image="userOption.avatar.src"
+                            :alt="userOption.label"
+                        />
+                        <span
+                            :title="userOption.label"
+                            text-black-900 text-14px font-medium leading-tight max-w-160px truncate overflow-hidden text-ellipsis
+                        >
+                            {{ userOption.label }}
+                        </span>
+                    </div>
+                    <TelaCheckbox
+                        :model-value="selectedUsers.some(user => user.value === userOption.value)"
+                        @update:model-value="toggleUser({ value: userOption.value, label: userOption.isCurrentUser ? props.meLabel.toLowerCase() : userOption.label })"
+                        @click.stop
+                    />
+                </div>
+            </div>
+            <div pb-8px px-8px pt-8px bg-white rounded-b-12px>
+                <TelaButton
+                    variant="secondary"
+                    w-full
+                    size="sm"
+                    rounded-lg
+                    :disabled="selectedUsers.length === 0"
+                    @click="handleApply"
+                >
+                    {{ props.applyLabel }}
+                </TelaButton>
+            </div>
+        </div>
+    </div>
+</template>