@meistrari/tela-build 1.42.2 → 1.43.0

package/components/tela/badge/badge.vue

@@ -22,7 +22,7 @@ const tag = computed(() => props.to ? NuxtLink : 'div')
         v-bind="props.to ? { to: props.to, target: props.target } : {}"
         :class="cn(
             'inline-block px-[5px] py-[3px] rounded-[5px] select-none',
-            variant === 'outline' && 'border-[0.5px] border-border',
+            variant === 'outline' && 'bg-background border-[0.5px] border-border',
             variant === 'filled' && 'bg-lowered',
             props.class,
         )"

package/components/tela/filter/filter-bar.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+    <div :class="cn('flex flex-wrap items-center select-none', props.class)">
+        <slot />
+    </div>
+</template>

package/components/tela/filter/filter-content-item.vue

@@ -0,0 +1,12 @@
+<template>
+    <button
+        type="button"
+        data-filter-item
+        flex="~ justify-between"
+        items-center gap-12px
+        px-8px h-28px rounded-8px w-full
+        hover:bg-muted focus-visible:bg-muted focus:outline-none
+    >
+        <slot />
+    </button>
+</template>

package/components/tela/filter/filter-content.vue

@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { PopoverContent } from 'reka-ui'
+import TelaRadioGroupRoot from '../radio-group/radio-group-root.vue'
+import type { FilterContentConfig, FilterSelectionMode, FilterSelections } from './types'
+
+const props = defineProps<{
+    configs: FilterContentConfig[]
+    closing: boolean
+    settled: boolean
+    modelValue: FilterSelections
+    width: string
+    contentClass?: HTMLAttributes['class']
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: FilterSelections]
+    'interactOutside': [event: Event]
+    'pointerDownOutside': [event: Event]
+    'select': []
+}>()
+
+const fadeTransition = {
+    transition: {
+        opacity: { duration: 0.25 },
+        filter: { duration: 0.15 },
+    },
+}
+
+const contentMeasure = useTemplateRef<HTMLElement>('contentMeasure')
+const { height: heightContent } = useElementSize(contentMeasure)
+
+const computedHeightContent = computed(() => {
+    if (heightContent.value > 0) {
+        return `${heightContent.value}px`
+    }
+
+    return undefined
+})
+
+function isChecked(filterKey: string, optionValue: string) {
+    return props.modelValue[filterKey]?.includes(optionValue) ?? false
+}
+
+function toggleOption(filterKey: string, optionValue: string, mode: FilterSelectionMode | undefined) {
+    const current = props.modelValue[filterKey] ?? []
+
+    let next: string[]
+
+    if (mode === 'multiple') {
+        next = current.includes(optionValue)
+            ? current.filter(v => v !== optionValue)
+            : [...current, optionValue]
+    }
+    else if (mode === 'single') {
+        next = current.includes(optionValue) ? [] : [optionValue]
+    }
+    else {
+        next = [optionValue]
+    }
+
+    emit('update:modelValue', {
+        ...props.modelValue,
+        [filterKey]: next,
+    })
+
+    if (mode === undefined) {
+        emit('select')
+    }
+}
+
+function getItemButtons(): HTMLButtonElement[] {
+    return Array.from(
+        contentMeasure.value?.querySelectorAll<HTMLButtonElement>('[data-filter-item]') ?? [],
+    )
+}
+
+function focusItemAt(index: number) {
+    const buttons = getItemButtons()
+
+    if (buttons.length === 0) {
+        return
+    }
+
+    const safe = ((index % buttons.length) + buttons.length) % buttons.length
+
+    buttons[safe]?.focus()
+}
+
+function onItemsPointerOver(event: PointerEvent) {
+    const target = event.target as HTMLElement | null
+
+    if (!target?.closest('[data-filter-item]')) {
+        return
+    }
+
+    const active = document.activeElement as HTMLElement | null
+
+    if (active && active.matches('[data-filter-item]')) {
+        active.blur()
+    }
+}
+
+function onItemsKeydown(event: KeyboardEvent) {
+    const activeConfig = props.configs[0]?.config
+
+    if (!activeConfig || activeConfig.selectionMode === 'single') {
+        return
+    }
+
+    const buttons = getItemButtons()
+
+    if (buttons.length === 0) {
+        return
+    }
+
+    const currentIndex = buttons.indexOf(document.activeElement as HTMLButtonElement)
+
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault()
+            focusItemAt(currentIndex === -1 ? 0 : currentIndex + 1)
+            break
+        case 'ArrowUp':
+            event.preventDefault()
+            focusItemAt(currentIndex === -1 ? buttons.length - 1 : currentIndex - 1)
+            break
+        case 'Home':
+            event.preventDefault()
+            focusItemAt(0)
+            break
+        case 'End':
+            event.preventDefault()
+            focusItemAt(buttons.length - 1)
+            break
+    }
+}
+
+watch(() => props.settled, async (settled) => {
+    if (!settled) {
+        return
+    }
+
+    const activeConfig = props.configs[0]?.config
+
+    if (!activeConfig || activeConfig.selectionMode === 'single') {
+        return
+    }
+
+    await nextTick()
+
+    const selectedValue = props.modelValue[activeConfig.key]?.[0]
+    const selectedIndex = selectedValue
+        ? activeConfig.options.findIndex(o => o.value === selectedValue)
+        : -1
+
+    focusItemAt(selectedIndex >= 0 ? selectedIndex : 0)
+})
+
+function getSlideMotionVariants(index: number, closingState: boolean) {
+    const exitIndex = closingState ? 0 : index
+
+    return {
+        initial: {
+            x: `${100 * index}%`,
+            opacity: 0,
+            filter: 'blur(2px)',
+            ...fadeTransition,
+        },
+        animate: {
+            x: 0,
+            opacity: 1,
+            filter: 'blur(0px)',
+            ...fadeTransition,
+        },
+        exit: {
+            x: `${100 * exitIndex}%`,
+            opacity: 0,
+            filter: 'blur(2px)',
+            ...fadeTransition,
+        },
+    }
+}
+</script>
+
+<template>
+    <PopoverContent
+        :side-offset="4"
+        align="start"
+        data-popover-content
+        :data-settled="settled || undefined"
+        :class="cn(
+            'relative select-none z-99999 p-4px bg-background border-[0.5px] border-border rounded-12px overflow-hidden',
+            '[box-shadow:0_3px_10px_0_rgba(163,163,163,0.08),0_12px_20px_0_rgba(163,163,163,0.06)]',
+            contentClass,
+        )"
+        @interact-outside="emit('interactOutside', $event)"
+        @pointer-down-outside="emit('pointerDownOutside', $event)"
+    >
+        <div
+            class="[transition:height_0.25s_ease-out,width_0.25s_ease-out]"
+            :style="{ width, ...(computedHeightContent ? { height: computedHeightContent } : {}) }"
+        >
+            <div ref="contentMeasure" @keydown="onItemsKeydown" @pointerover="onItemsPointerOver">
+                <AnimatePresence mode="popLayout" :initial="false">
+                    <Motion
+                        v-for="cfg in configs"
+                        :key="cfg.key"
+                        v-bind="getSlideMotionVariants(cfg.slideIndex, closing)"
+                        tabindex="-1"
+                        flex="~ col"
+                    >
+                        <slot
+                            :name="`header-${cfg.config.key}`"
+                            :filter="cfg.config"
+                            :selected="props.modelValue[cfg.config.key] ?? []"
+                            :toggle="(value: string) => toggleOption(cfg.config.key, value, cfg.config.selectionMode)"
+                        />
+
+                        <div mx--4px>
+                            <TelaScrollArea :class="cn('flex flex-col', cfg.config.optionsClass)" tabindex="-1">
+                                <div px-4px>
+                                    <component
+                                        :is="cfg.config.selectionMode === 'single' ? TelaRadioGroupRoot : 'div'"
+                                        v-bind="cfg.config.selectionMode === 'single'
+                                            ? {
+                                                'modelValue': props.modelValue[cfg.config.key]?.[0] ?? '',
+                                                'onUpdate:modelValue': (val: string) => toggleOption(cfg.config.key, val, 'single'),
+                                            }
+                                            : {}"
+                                        class="contents"
+                                    >
+                                        <template v-for="option in cfg.config.options" :key="option.value">
+                                            <slot
+                                                :name="`option-${cfg.config.key}`"
+                                                :option="option"
+                                                :filter="cfg.config"
+                                                :checked="isChecked(cfg.config.key, option.value)"
+                                                :toggle="() => toggleOption(cfg.config.key, option.value, cfg.config.selectionMode)"
+                                                :mode="cfg.config.selectionMode"
+                                            >
+                                                <TelaFilterContentItem
+                                                    :checked="isChecked(cfg.config.key, option.value)"
+                                                    @click="toggleOption(cfg.config.key, option.value, cfg.config.selectionMode)"
+                                                >
+                                                    <span text-primary body-14-medium truncate>{{ option.label }}</span>
+                                                    <TelaRadioGroupItem
+                                                        v-if="cfg.config.selectionMode === 'single'"
+                                                        :value="option.value"
+                                                        class="pointer-events-none"
+                                                    />
+                                                    <TelaCheckbox
+                                                        v-else-if="cfg.config.selectionMode === 'multiple'"
+                                                        :model-value="isChecked(cfg.config.key, option.value)"
+                                                        class="pointer-events-none"
+                                                        @update:model-value="toggleOption(cfg.config.key, option.value, cfg.config.selectionMode)"
+                                                        @click.stop
+                                                    />
+                                                </TelaFilterContentItem>
+                                            </slot>
+                                        </template>
+                                    </component>
+                                </div>
+                            </TelaScrollArea>
+                        </div>
+
+                        <slot
+                            :name="`footer-${cfg.config.key}`"
+                            :filter="cfg.config"
+                            :selected="props.modelValue[cfg.config.key] ?? []"
+                            :toggle="(value: string) => toggleOption(cfg.config.key, value, cfg.config.selectionMode)"
+                        />
+                    </Motion>
+                </AnimatePresence>
+            </div>
+        </div>
+    </PopoverContent>
+</template>
+
+<style>
+[data-popover-content] {
+    transform-origin: var(--reka-popover-content-transform-origin);
+}
+
+[data-popover-content][data-state="open"] {
+    animation: enter 0.12s ease-out forwards;
+}
+
+[data-popover-content][data-state="closed"] {
+    animation: exit 0.12s ease-out forwards;
+    animation-delay: 0s;
+}
+
+[data-reka-popper-content-wrapper]:has(> [data-popover-content][data-settled]) {
+    transition: transform 0.25s ease-out;
+    will-change: transform;
+}
+
+@keyframes enter {
+    from {
+        opacity: 0;
+        transform: translateY(2px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes exit {
+    from {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-2px) scale(0.97);
+    }
+}
+</style>

package/components/tela/filter/filter-trigger.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { FilterConfig } from './types'
+
+defineProps<{
+    filter: FilterConfig
+    isActive: boolean
+    count: number
+    triggerClass?: HTMLAttributes['class']
+}>()
+
+defineEmits<{
+    click: []
+}>()
+</script>
+
+<template>
+    <button
+        type="button"
+        :data-active="isActive || undefined"
+        :class="cn(
+            'group inline-flex h-[32px] items-center gap-[7px] px-[12px] border-l-[0.5px] border-y-[0.5px] border-strong bg-background outline-none transition-all duration-150',
+            'text-[14px] leading-[18px] -tracking-[0.15px] font-540 text-primary',
+            'focus-visible:ring-2 focus-visible:ring-gray-200 [&:not([data-active])]:hover:bg-subtle data-[active]:bg-muted first:rounded-l-[10px] last:rounded-r-[10px] last:border-r-[0.5px]',
+            triggerClass,
+        )"
+        @click="$emit('click')"
+    >
+        <div inline-flex items-center>
+            <span text-14px leading-18px tracking--0.15px font-540 text-primary>{{ filter.label }}</span>
+
+            <AnimatePresence>
+                <Motion
+                    v-if="count && filter.selectionMode === 'multiple'"
+                    mt--3px ml-5px
+                    :initial="{ width: 0, x: -20, scale: 0, opacity: 0 }"
+                    :animate="{ width: 'auto', x: 0, scale: 1, opacity: 1 }"
+                    :exit="{ width: 0, x: -20, scale: 0, opacity: 0 }"
+                    :transition="{ duration: 0.15, ease: 'easeOut' }"
+                >
+                    <TelaBadge variant="filled" class="py-[1px] px-[4px] rounded-[4px]" text-class="tabular-nums text-[8px]">
+                        <TelaAnimatedNumber :value="count || 0" />
+                    </TelaBadge>
+                </Motion>
+            </AnimatePresence>
+        </div>
+        <TelaIcon
+            name="i-ph-caret-down-bold"
+            size="12px"
+            color="icon-secondary"
+            class="shrink-0 transition-all ease-out duration-120 group-data-[active]:rotate-180"
+        />
+    </button>
+</template>