@meistrari/tela-build 1.0.0

package/components/tela/multiple-select/multiple-select.vue

@@ -0,0 +1,666 @@
+<script setup lang="ts">
+import {
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectItemIndicator,
+    SelectLabel,
+    SelectPortal,
+    SelectRoot,
+    SelectScrollDownButton,
+    SelectScrollUpButton,
+    SelectTrigger,
+    SelectViewport,
+} from 'radix-vue'
+import { nextTick } from 'vue'
+import PopoverList from '../popover-list/popover-list.vue'
+
+const props = withDefaults(defineProps<{
+    modelValue?: string[]
+    readOnly?: boolean
+    options: SelectMenuOption[]
+    placeholder?: string
+    required?: boolean
+    maxSelectedDisplay?: number
+    allowSearch?: boolean
+    searchPlaceholder?: string
+    buttonLabel?: string
+    closeButtonLabel?: string
+    closeOnSelect?: boolean
+    buttonIcon?: string
+    variant?: 'list' | 'preview'
+    previewMaxItems?: number
+    description?: string
+}>(), {
+    maxSelectedDisplay: 10,
+    searchPlaceholder: 'Search options...',
+    closeOnSelect: false,
+    closeButtonLabel: 'Close',
+    buttonIcon: 'i-ph-plus',
+    variant: 'list',
+    previewMaxItems: 3,
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string[]]
+    'navigate': [to: string]
+    'select': [value: string]
+    'deselect': [value: string]
+    'focus': []
+    'blur': []
+}>()
+
+const { t } = useTranslation()
+
+type SelectMenuOption = {
+    value: string
+    label: string
+    description?: string
+    icon?: string
+    externalIconSrc?: string
+    group?: string
+    to?: string
+}
+
+const innerValue = ref<string>('')
+const container = ref<HTMLElement>()
+const triggerElementRef = ref<HTMLElement | null>(null)
+const { width: contentWidth } = useElementBounding(triggerElementRef)
+
+const isFocused = ref(false)
+const isOpen = ref(false)
+
+watch(isFocused, val => val ? emit('focus') : emit('blur'))
+
+function handleEscKey(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+        isFocused.value = false
+        isOpen.value = false
+
+        if (triggerElementRef.value) {
+            const button = triggerElementRef.value.querySelector('button')
+            if (button) {
+                button.blur()
+            }
+        }
+
+        e.stopPropagation()
+    }
+}
+
+onMounted(() => {
+    const button = triggerElementRef.value?.querySelector('button')
+    if (button) {
+        const handleFocus = () => {
+            isFocused.value = true
+        }
+        const handleBlur = () => {
+            isFocused.value = false
+        }
+        button.addEventListener('focus', handleFocus)
+        button.addEventListener('blur', handleBlur)
+
+        onBeforeUnmount(() => {
+            button.removeEventListener('focus', handleFocus)
+            button.removeEventListener('blur', handleBlur)
+        })
+    }
+})
+
+const testId = ref('')
+onMounted(() => {
+    if (container.value?.attributes && container.value?.attributes.getNamedItem('data-testid')) {
+        testId.value = container.value?.attributes.getNamedItem('data-testid')?.value as string
+
+        // Remove the data-testid attribute from the container element
+        container.value?.removeAttribute('data-testid')
+
+        // Add the data-testid attribute to the input element
+        triggerElementRef.value?.setAttribute('data-testid', testId.value)
+    }
+
+    window.addEventListener('keydown', handleEscKey)
+
+    const button = triggerElementRef.value?.querySelector('button')
+    if (button) {
+        const handleFocus = () => {
+            isFocused.value = true
+        }
+        const handleBlur = () => {
+            isFocused.value = false
+        }
+        button.addEventListener('focus', handleFocus)
+        button.addEventListener('blur', handleBlur)
+
+        button.addEventListener('keydown', handleEscKey)
+
+        onBeforeUnmount(() => {
+            window.removeEventListener('keydown', handleEscKey)
+            button.removeEventListener('focus', handleFocus)
+            button.removeEventListener('blur', handleBlur)
+            button.removeEventListener('keydown', handleEscKey)
+        })
+    }
+})
+
+const search = ref('')
+const searchInputEl = ref<HTMLInputElement>()
+
+function onOpenChange(open: boolean) {
+    isOpen.value = open
+
+    if (!open) {
+        isFocused.value = false
+        search.value = '' // Clear search when closing
+    }
+    else if (props.allowSearch) {
+        // Auto-focus search input when opening
+        setTimeout(() => {
+            if (searchInputEl.value) {
+                searchInputEl.value.focus()
+            }
+        }, 50)
+    }
+}
+
+const filteredOptions = computed(() => {
+    if (!search.value)
+        return props.options
+    return props.options.filter(option =>
+        option.label.toLowerCase().includes(search.value.toLowerCase())
+        || option.description?.toLowerCase().includes(search.value.toLowerCase()),
+    )
+})
+
+const hasGroups = computed(() => filteredOptions.value.some(option => option.group))
+
+const selectedValues = computed(() => props.modelValue || [])
+
+const selectedOptions = computed(() => {
+    return props.options.filter(option => selectedValues.value.includes(option.value))
+})
+
+const groupedOptions = computed(() => {
+    const availableOptions = filteredOptions.value
+
+    if (!hasGroups.value)
+        return { __default: availableOptions }
+
+    const groups: Record<string, typeof availableOptions> = {}
+    availableOptions.forEach((option) => {
+        const groupKey = option.group ? option.group : '__default'
+
+        if (!groups[groupKey])
+            groups[groupKey] = []
+
+        groups[groupKey].push(option)
+    })
+    return groups
+})
+
+const hasAvailableOptions = computed(() => {
+    return Object.values(groupedOptions.value).some(group => group.length > 0)
+})
+
+const displayText = computed(() => {
+    if (selectedOptions.value.length === 0) {
+        return props.placeholder || t('common.selectOptions')
+    }
+
+    const maxDisplay = props.maxSelectedDisplay
+    if (selectedOptions.value.length <= maxDisplay) {
+        return selectedOptions.value.map(option => option.label).join(', ')
+    }
+
+    return `${selectedOptions.value.slice(0, maxDisplay).map(option => option.label).join(', ')} ${t('common.andMore', { count: selectedOptions.value.length - maxDisplay })}`
+})
+
+const previewDisplayText = computed(() => {
+    if (selectedOptions.value.length === 0) {
+        return { itemsText: '', remainingCount: 0 }
+    }
+
+    const maxItems = props.previewMaxItems
+    const displayItems = selectedOptions.value.slice(0, maxItems)
+    const remainingCount = selectedOptions.value.length - maxItems
+
+    if (remainingCount <= 0) {
+        return { itemsText: displayItems.map(option => option.label).join(', '), remainingCount: 0 }
+    }
+
+    const itemsText = displayItems.map(option => option.label).join(', ')
+    return { itemsText, remainingCount }
+})
+
+const remainingItems = computed(() => {
+    if (selectedOptions.value.length <= props.previewMaxItems) {
+        return []
+    }
+    return selectedOptions.value.slice(props.previewMaxItems)
+})
+
+const isSelected = (value: string) => selectedValues.value.includes(value)
+
+const animationClass = `
+    will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade
+`
+
+const buttonLabel = computed(() => props.buttonLabel ?? (selectedOptions.value.length === 0 ? t('common.add') : t('common.addAnother')))
+
+function toggleSelection(value: string) {
+    if (!value)
+        return
+
+    const option = props.options.find(option => option.value === value)
+    if (!option)
+        return
+
+    const newValues = [...selectedValues.value]
+    const index = newValues.indexOf(value)
+
+    if (index > -1) {
+        // Remove from selection
+        newValues.splice(index, 1)
+        emit('deselect', value)
+    }
+    else {
+        // Add to selection
+        newValues.push(value)
+        emit('select', value)
+    }
+
+    emit('update:modelValue', newValues)
+
+    if (props.closeOnSelect) {
+        nextTick(() => {
+            isOpen.value = false
+            if (triggerElementRef.value) {
+                const button = triggerElementRef.value.querySelector('button')
+                if (button) {
+                    button.blur()
+                }
+            }
+        })
+    }
+    else {
+        nextTick(() => {
+            isOpen.value = true
+        })
+    }
+
+    if (option.to) {
+        navigateTo(option.to)
+    }
+}
+
+function removeSelection(value: string) {
+    const newValues = selectedValues.value.filter(v => v !== value)
+    emit('update:modelValue', newValues)
+    emit('deselect', value)
+}
+
+// Handle selection through the SelectRoot component
+watch(innerValue, (value) => {
+    if (!value)
+        return
+
+    toggleSelection(value)
+    innerValue.value = ''
+})
+
+function handleDeleteSearchValue() {
+    search.value = ''
+    if (searchInputEl.value) {
+        searchInputEl.value.focus()
+    }
+}
+
+function handleSearchKeydown(e: KeyboardEvent) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Backspace') {
+        e.preventDefault()
+        handleDeleteSearchValue()
+    }
+}
+
+function selectAll() {
+    if (selectedValues.value.length === filteredOptions.value.length) {
+        emit('update:modelValue', [])
+    }
+    else {
+        emit('update:modelValue', filteredOptions.value.map(option => option.value))
+    }
+}
+</script>
+
+<template>
+    <div ref="container">
+        <SelectRoot v-model="innerValue" :open="isOpen" :disabled="readOnly" :required="required" @update:open="onOpenChange">
+            <div
+                ref="triggerElementRef"
+                v-bind="$attrs"
+                flex flex-col
+                @keydown.esc.stop="handleEscKey($event)"
+            >
+                <!-- Selected options - List variant (existing) -->
+                <div v-if="variant === 'list' && selectedOptions.length > 0" flex items-center w-full mb-8px>
+                    <div
+                        v-if="selectedOptions.length > 0"
+                        flex items-center flex-wrap flex-1 min-w-0
+                    >
+                        <div
+                            v-for="(option, index) in selectedOptions.slice(0, props.maxSelectedDisplay)"
+                            :key="option.value"
+                            transition-all
+                            duration-200
+                            p-8px
+                            flex items-center gap-8px
+                            body-12-medium
+                            text-gray-900
+                            w-full
+                            border="0.5px gray-300"
+                            :class="{
+                                'rounded-t-8px': index === 0,
+                                'rounded-b-8px': index === selectedOptions.length - 1,
+                                'border-b-0': index !== selectedOptions.length - 1,
+                            }"
+                            h-24px
+                        >
+                            <div
+                                v-if="option.icon"
+                                w-16px h-16px flex items-center justify-center
+                                text-12px flex-shrink-0
+                            >
+                                <TelaIcon v-if="typeof option.icon === 'string'" :name="option.icon" />
+                                <Component :is="option.icon" v-else class="!w-12px !h-12px" />
+                            </div>
+                            <div v-if="!option.icon && option.externalIconSrc" w-16px h-16px flex items-center justify-center flex-shrink-0>
+                                <img :src="option.externalIconSrc" alt="" w-16px h-16px>
+                            </div>
+                            <div flex-1 flex items-center justify-start w-full overflow-hidden>
+                                <span :title="option.label" truncate>{{ option.label }}</span>
+                            </div>
+                            <TelaIconButton
+                                v-if="!readOnly"
+                                icon="i-ph-trash text-gray-400"
+                                size="xs"
+                                color="secondary"
+                                @click.stop.prevent="removeSelection(option.value)"
+                                @mousedown.stop.prevent
+                                @pointerdown.stop.prevent
+                            />
+                        </div>
+                        <span
+                            v-if="selectedOptions.length > (props.maxSelectedDisplay)"
+                            text-12px text-gray-500 px-4px flex-shrink-0
+                            w-full
+                            border-t="0.5px gray-300"
+                            pt-4px
+                        >
+                            +{{ selectedOptions.length - (props.maxSelectedDisplay) }} {{ t('common.more') }}
+                        </span>
+                    </div>
+                </div>
+
+                <Motion v-if="description" body-12-regular text-gray-500 :animate="{ opacity: 1, y: 0 }" :initial="{ opacity: 0, y: 10 }" :exit="{ opacity: 0, y: 10 }" :transition="{ duration: 0.43, ease: [0.18, 0.89, 0.32, 1.28] }">
+                    {{ description }}
+                </Motion>
+                <!-- Preview variant - shows selected items inline -->
+                <div v-if="variant === 'preview'" flex items-center justify-between w-full mb-8px>
+                    <span
+                        class="body-12-semibold flex-1 text-left text-gray-700 max-w-90% flex items-center overflow-hidden"
+                    >
+                        <span class="truncate min-w-0">
+                            {{ previewDisplayText.itemsText }}
+                        </span>
+                        <span
+                            v-if="previewDisplayText.remainingCount > 0"
+                            class="body-12-regular flex-shrink-0 ml-4px"
+                        >
+                            {{ t('common.and') }}
+                        </span>
+                        <PopoverList
+                            v-if="previewDisplayText.remainingCount > 0"
+                            :items="remainingItems.map(item => item.label)"
+                            position="center"
+                            :title="t('workstationComponents.assignedColumns')"
+                        >
+                            <template #trigger>
+                                <span class="body-12-regular underline flex-shrink-0 ml-4px cursor-pointer hover:text-blue-600 transition-colors">
+                                    {{ t('common.otherCount', { count: previewDisplayText.remainingCount }) }}
+                                </span>
+                            </template>
+                        </PopoverList>
+                    </span>
+                </div>
+
+                <!-- Trigger -->
+                <slot
+                    v-bind="{ selectedOptions, selectedValues, displayText, readOnly, buttonIcon, buttonLabel, toggleSelection }"
+                    name="trigger"
+                >
+                    <SelectTrigger
+                        bg-white text-textcolor
+                        b="1 gray-200"
+                        rounded-8px
+                        transition focus:b="#08344D/70" focus:ring="2 #08344D/12"
+                        outline-none
+                        class="data-[placeholder]:text-textcolor/50"
+                        aria-label="Select multiple options"
+                        w-full
+                        v-bind="$attrs"
+                        :class="[
+                            (selectedOptions.length === 0) ? '!text-gray-600 !font-light' : '',
+                        ]"
+                    >
+                        <span
+                            v-if="selectedOptions.length === 0"
+                            class="body-14-medium" :class="[
+                                (selectedOptions.length === 0) ? 'text-gray-400 font-light' : '',
+                            ]"
+                            text-left flex-auto
+                        >
+                            {{ displayText }}
+                        </span>
+                        <TelaButton
+                            size="sm"
+                            :disabled="readOnly"
+                            variant="ghost"
+                            leading
+                            w-full
+                            :icon="buttonIcon"
+                            :class="[
+                                selectedOptions.length === 0 && 'hover:bg-transparent',
+                            ]"
+                            @click="toggleSelection('')"
+                        >
+                            <span>{{ buttonLabel }}</span>
+                        </TelaButton>
+                    </SelectTrigger>
+                </slot>
+            </div>
+
+            <SelectPortal>
+                <SelectContent
+                    class="bg-white rounded-8px"
+                    flying-shadow
+                    b="0.5px gray-300" overflow-hidden
+                    :class="[animationClass]"
+                    :side-offset="4"
+                    relative
+                    position="popper"
+                    :style="{
+                        width: `${contentWidth}px`,
+                        minWidth: '328px',
+                    }"
+                    avoid-collisions
+                    max-h-400px
+                    z-999
+                >
+                    <SelectScrollUpButton class="flex items-center justify-center h-25px bg-white text-dark cursor-default">
+                        <TelaIcon name="i-ph-caret-up" text="16px" />
+                    </SelectScrollUpButton>
+
+                    <!-- Search input -->
+                    <div v-if="allowSearch" flex items-center px-12px py-8px border-b="0.5px gray-300">
+                        <TelaIcon name="i-ph-magnifying-glass-bold" text-gray-500 mr-8px />
+                        <input
+                            ref="searchInputEl"
+                            v-model="search"
+                            :placeholder="searchPlaceholder"
+                            body-14-regular text-gray-900
+                            class="placeholder:text-gray-400 focus-visible:outline-none flex-1"
+                            @click.stop
+                            @keydown.stop="handleSearchKeydown"
+                        >
+                    </div>
+                    <div v-if="filteredOptions.length > 0" flex items-center justify-between pl-6px pr-10px py-8px border-b="0.5px gray-200">
+                        <span body-12-semibold text-gray-700>{{ t('common.itemCount', { count: filteredOptions.length }) }}</span>
+
+                        <TelaButton variant="ghost" size="sm" class="rounded-lg" @click="selectAll">
+                            <span
+                                v-if="selectedValues.length !== filteredOptions.length"
+                                body-12-regular
+                                text-gray-900
+                                underline
+                            >
+                                {{ t('common.selectAll') }}
+                            </span>
+                            <span
+                                v-else
+                                body-12-regular
+                                text-gray-900
+                                underline
+                            >
+                                {{ t('common.clearAll') }}
+                            </span>
+                        </TelaButton>
+                    </div>
+
+                    <SelectViewport class="p-5px" w-full>
+                        <div
+                            v-if="!hasAvailableOptions"
+                            class="flex flex-col items-center justify-center gap-5 px-7 py-12"
+                        >
+                            <div class="flex flex-col items-center justify-center gap-3">
+                                <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-gray-400" />
+                                <span class="text-xl font-medium leading-none text-center">
+                                    {{ search.trim() ? t('common.noOptionsFound', { search: search.trim() }) : t('common.noRemainingValues') }}
+                                </span>
+                                <span v-if="search.trim()" class="inline-flex gap-1.5 text-md text-gray-500 items-center">
+                                    Press
+                                    <div class="flex items-center gap-1">
+                                        <div class="p-2px bg-gray-200 rounded">
+                                            <TelaIcon name="i-ph-command" size="16px" />
+                                        </div>
+                                        <div class="p-2px bg-gray-200 rounded">
+                                            <TelaIcon name="i-ph-backspace" size="16px" />
+                                        </div>
+                                    </div>
+                                    {{ t('common.toClear') }}
+                                </span>
+                            </div>
+                            <TelaButton
+                                v-if="search.trim()"
+                                variant="secondary"
+                                size="sm"
+                                class="rounded-lg"
+                                @click="handleDeleteSearchValue"
+                            >
+                                {{ t('common.clear') }}
+                            </TelaButton>
+                        </div>
+
+                        <SelectGroup
+                            v-for="[group, groupOptions], idx of Object.entries(groupedOptions!)"
+                            v-else
+                            :key="idx"
+                        >
+                            <SelectLabel v-if="hasGroups && group !== '__default'" body-12-regular text="gray-700" mt-4px p="6px" pb-8px capitalize>
+                                {{ group }}
+                            </SelectLabel>
+                            <SelectItem
+                                v-for="option in groupOptions"
+                                :key="option.value"
+                                :value="option.value"
+                                as-child
+                                @select.prevent
+                            >
+                                <button
+                                    v-test="testId ? `${testId}:option:${option.value}` : undefined"
+                                    as-child
+                                    p-6px
+                                    rounded-4px
+                                    transition
+                                    outline-none
+                                    select-none
+                                    flex
+                                    w-full
+                                    items-center
+                                    class="
+                                        data-[disabled]:text-gray-300
+                                        data-[disabled]:pointer-events-none
+                                        data-[highlighted]:bg-#F5F6F6
+                                        data-[highlighted]:outline-none
+                                        hover:cursor-pointer
+                                        text-gray-900
+                                    "
+                                    :class="[
+                                        isSelected(option.value) && 'bg-blue-50 border-blue-200',
+                                    ]"
+                                >
+                                    <TelaCheckbox
+                                        :model-value="isSelected(option.value)"
+                                        :disabled="readOnly"
+                                        cursor-pointer
+                                        mr-12px
+                                        min-w-16px
+                                    />
+                                    <div
+                                        v-if="option.icon" mr-12px rounded-4px w-40px h-40px flex items-center justify-center
+                                        b="0.5px gray-200"
+                                        text="gray-900"
+                                        bg-white flex-none
+                                    >
+                                        <TelaIcon v-if="typeof option.icon === 'string'" size="sm" :name="option.icon" />
+                                        <Component :is="option.icon" v-else class="!w-24px !h-24px" />
+                                    </div>
+                                    <div v-if="!option.icon && option.externalIconSrc" mr-12px rounded-4px w-16px h-36px flex items-center justify-center>
+                                        <img :src="option.externalIconSrc" alt="" min-w-18px h-18px>
+                                    </div>
+                                    <div flex="~ col" overflow-hidden>
+                                        <p text="gray-900" body-14-medium text-start truncate :title="option.label">
+                                            {{ option.label }}
+                                        </p>
+
+                                        <span v-if="option.description" text="gray-700" body-9-regular text-start>
+                                            {{ option.description }}
+                                        </span>
+                                    </div>
+                                    <div flex-auto />
+                                    <SelectItemIndicator flex items-center justify-center>
+                                        <div>
+                                            <TelaIcon
+                                                name="i-ph-square"
+                                                text="16px"
+                                                class="text-gray-400"
+                                            />
+                                        </div>
+                                    </SelectItemIndicator>
+                                </button>
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectViewport>
+
+                    <SelectScrollDownButton class="flex items-center justify-center h-25px bg-white text-dark cursor-default">
+                        <TelaIcon name="i-ph-caret-down" text="16px" />
+                    </SelectScrollDownButton>
+                    <div class="p-8px border-t border-gray-300">
+                        <TelaButton variant="secondary" w-full @click="isOpen = false">
+                            {{ closeButtonLabel }}
+                        </TelaButton>
+                    </div>
+                </SelectContent>
+            </SelectPortal>
+        </SelectRoot>
+    </div>
+</template>