@meistrari/tela-build 1.0.0

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

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    disabled?: boolean
+    loading?: boolean
+    class?: string
+    identifier: string
+    buttonLabel: string
+    selected: { identifier: string, label: string, value?: string | string[] }
+    isActive: boolean
+    options: Record<string, { value: string, label: string }>
+    searchPlaceholder?: string
+    applyLabel?: string
+    noOptionsFoundLabel?: string
+}>(), {
+    searchPlaceholder: 'Search',
+    applyLabel: 'Apply',
+    noOptionsFoundLabel: 'No options found',
+})
+
+const emit = defineEmits<{
+    (e: 'apply', value: Record<string, any>): void
+    (e: 'reset'): void
+}>()
+
+const isDropdownOpen = ref(false)
+const dropdownRef = useTemplateRef('dropdownEl')
+const selectedOptions = ref<string[]>([])
+const searchQuery = ref('')
+
+const filteredOptions = computed(() => {
+    if (!searchQuery.value.trim()) {
+        return Object.values(props.options)
+    }
+    const query = searchQuery.value.toLowerCase()
+    return Object.values(props.options).filter(option =>
+        option.label.toLowerCase().includes(query),
+    )
+})
+
+function toggleOption(option: string) {
+    if (selectedOptions.value.includes(option)) {
+        selectedOptions.value = selectedOptions.value.filter(o => o !== option)
+    }
+    else {
+        selectedOptions.value.push(option)
+    }
+}
+
+function handleApply() {
+    emit('apply', { [props.identifier.toLowerCase()]: selectedOptions.value })
+    isDropdownOpen.value = false
+}
+
+function resetToCurrentValue() {
+    selectedOptions.value = Array.isArray(props.selected.value) ? [...props.selected.value] : []
+}
+
+watch(isDropdownOpen, (isOpen) => {
+    if (isOpen) {
+        resetToCurrentValue()
+    }
+    else {
+        searchQuery.value = ''
+    }
+})
+
+watch(() => props.isActive, (isActive) => {
+    if (!isActive && isDropdownOpen.value) {
+        isDropdownOpen.value = false
+    }
+})
+
+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! focus:ring-0! px-12px! gap-6px!"
+            variant="secondary"
+            size="md"
+            h-32px
+            :disabled="props.disabled"
+            :loading="props.loading"
+            :leading="false"
+            @click="isDropdownOpen = !isDropdownOpen"
+        >
+            <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')" />
+        </TelaButton>
+
+        <div
+            v-if="isDropdownOpen"
+            class="absolute top-full left-0 z-50 mt-1 w-220px 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"
+                    >
+                </div>
+            </div>
+            <div class="flex-1 overflow-y-auto max-h-180px" p-8px>
+                <div v-if="filteredOptions.length > 0" flex="~ col" gap-8px>
+                    <div
+                        v-for="option in filteredOptions"
+                        :key="option.value"
+                        cursor-pointer
+                        flex="~ justify-between"
+                        items-center
+                        gap-12px
+                        p-8px
+                        h-28px
+                        rounded-8px
+                        class="hover:bg-gray-20"
+                        @click="toggleOption(option.value)"
+                    >
+                        <span flex="~" items-center gap-8px text-black-900 text-14px font-medium leading-tight>
+                            {{ option.label }}
+                        </span>
+                        <TelaCheckbox
+                            :model-value="selectedOptions.includes(option.value)"
+                            @update:model-value="toggleOption(option.value)"
+                            @click.stop
+                        />
+                    </div>
+                </div>
+                <div v-else flex="~" items-center justify-center p-16px>
+                    <span text-14px text-gray-600>{{ props.noOptionsFoundLabel }}{{ searchQuery ? ` with '${searchQuery}'` : '' }}</span>
+                </div>
+            </div>
+            <div pb-8px px-8px pt-8px bg-white rounded-b-12px>
+                <TelaButton
+                    variant="secondary"
+                    w-full
+                    size="sm"
+                    rounded-lg
+                    :disabled="selectedOptions.length === 0"
+                    @click="handleApply"
+                >
+                    {{ props.applyLabel }}
+                </TelaButton>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,258 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import DateFilter from './date-filter.vue'
+
+const meta: Meta<typeof DateFilter> = {
+    title: 'Filters/DateFilter',
+    component: DateFilter,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A dropdown filter component for selecting date ranges. Supports predefined ranges (Today, This Week, This Month) and custom date range selection via a calendar picker. Emits start and end dates in ISO format.',
+            },
+        },
+    },
+    argTypes: {
+        buttonLabel: {
+            control: 'text',
+            description: 'The label displayed on the filter button',
+        },
+        isActive: {
+            control: 'boolean',
+            description: 'Whether the filter is currently active (has a date range applied)',
+        },
+        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>
+
+export const Default: Story = {
+    render: args => ({
+        components: { DateFilter },
+        setup() {
+            const selected = ref({ identifier: 'date', label: 'Date', value: undefined })
+            const isActive = ref(false)
+
+            function handleApply(value: any) {
+                // In a real app, this would use the date filter handler to format the label
+                const label = value.value === 'today'
+                    ? 'Today'
+                    : value.value === 'thisWeek'
+                        ? 'This Week'
+                        : value.value === 'thisMonth'
+                            ? 'This Month'
+                            : value.value === 'specificDate'
+                                ? 'Custom Range'
+                                : 'Date'
+
+                selected.value = {
+                    identifier: 'date',
+                    label,
+                    value: value.value,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'date', label: 'Date', value: undefined }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <DateFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: 'Date',
+        isActive: false,
+        disabled: false,
+        loading: false,
+    },
+}
+
+export const ActiveToday: Story = {
+    render: args => ({
+        components: { DateFilter },
+        setup() {
+            const selected = ref({ identifier: 'date', label: 'Today', value: 'today' })
+            const isActive = ref(true)
+
+            function handleApply(value: any) {
+                const label = value.value === 'today'
+                    ? 'Today'
+                    : value.value === 'thisWeek'
+                        ? 'This Week'
+                        : value.value === 'thisMonth'
+                            ? 'This Month'
+                            : value.value === 'specificDate'
+                                ? 'Custom Range'
+                                : 'Date'
+
+                selected.value = {
+                    identifier: 'date',
+                    label,
+                    value: value.value,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'date', label: 'Date', value: '' }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <DateFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: 'Today',
+        isActive: true,
+        disabled: false,
+        loading: false,
+    },
+}
+
+export const ActiveThisWeek: Story = {
+    render: args => ({
+        components: { DateFilter },
+        setup() {
+            const selected = ref({ identifier: 'date', label: 'This Week', value: 'thisWeek' })
+            const isActive = ref(true)
+
+            function handleApply(value: any) {
+                const label = value.value === 'today'
+                    ? 'Today'
+                    : value.value === 'thisWeek'
+                        ? 'This Week'
+                        : value.value === 'thisMonth'
+                            ? 'This Month'
+                            : value.value === 'specificDate'
+                                ? 'Custom Range'
+                                : 'Date'
+
+                selected.value = {
+                    identifier: 'date',
+                    label,
+                    value: value.value,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'date', label: 'Date', value: '' }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <DateFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: 'This Week',
+        isActive: true,
+        disabled: false,
+        loading: false,
+    },
+}
+
+export const ActiveCustomRange: Story = {
+    render: args => ({
+        components: { DateFilter },
+        setup() {
+            const selected = ref({ identifier: 'date', label: '01/01/2025 — 15/01/2025', value: 'specificDate' })
+            const isActive = ref(true)
+
+            function handleApply(value: any) {
+                selected.value = {
+                    identifier: 'date',
+                    label: '01/01/2025 — 15/01/2025',
+                    value: value.value,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'date', label: 'Date', value: '' }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <DateFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: '01/01/2025 — 15/01/2025',
+        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/date-filter.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { endOfDay, startOfDay, startOfMonth, startOfWeek } from 'date-fns'
+import { getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+
+const props = withDefaults(defineProps<{
+    disabled?: boolean
+    loading?: boolean
+    buttonLabel?: string
+    class?: string
+    selected: { identifier: string, label: string, value?: string | string[] }
+    isActive: boolean
+    applyLabel?: string
+    todayLabel?: string
+    thisWeekLabel?: string
+    thisMonthLabel?: string
+    specificDateLabel?: string
+}>(), {
+    applyLabel: 'Apply',
+    todayLabel: 'Today',
+    thisWeekLabel: 'This Week',
+    thisMonthLabel: 'This Month',
+    specificDateLabel: 'Specific Date',
+})
+
+const emit = defineEmits<{
+    (e: 'apply', value: Record<string, any>): void
+    (e: 'reset'): void
+}>()
+
+const isDropdownOpen = ref(false)
+const dropdownRef = useTemplateRef('dropdownEl')
+const specificRange = ref<DateRange>()
+
+const selectedDateValue = ref<string | undefined>(props.selected.value as string)
+
+const dateFilterValueOptions = computed(() => [
+    { label: props.todayLabel, value: 'today' },
+    { label: props.thisWeekLabel, value: 'thisWeek' },
+    { label: props.thisMonthLabel, value: 'thisMonth' },
+    { label: props.specificDateLabel, value: 'specificDate' },
+])
+
+function handleDateValueSelect(value: string) {
+    if (selectedDateValue.value === value) {
+        selectedDateValue.value = undefined
+        specificRange.value = undefined
+    }
+    else {
+        selectedDateValue.value = value
+        if (value !== 'specificDate') {
+            specificRange.value = undefined
+        }
+    }
+}
+
+function handleApply() {
+    const today = new Date()
+    let start: string | undefined
+    let end: string | undefined
+
+    if (selectedDateValue.value === 'today') {
+        start = startOfDay(today).toISOString()
+        end = today.toISOString()
+    }
+    else if (selectedDateValue.value === 'thisWeek') {
+        const firstDayOfWeek = startOfWeek(today, { weekStartsOn: 0 })
+        start = firstDayOfWeek.toISOString()
+        end = today.toISOString()
+    }
+    else if (selectedDateValue.value === 'thisMonth') {
+        const firstDayOfMonth = startOfMonth(today)
+        start = firstDayOfMonth.toISOString()
+        end = today.toISOString()
+    }
+    else if (selectedDateValue.value === 'specificDate' && specificRange.value?.start && specificRange.value?.end) {
+        const startDate = startOfDay(specificRange.value.start.toDate(getLocalTimeZone()))
+        const endDate = endOfDay(specificRange.value.end.toDate(getLocalTimeZone()))
+        start = startDate.toISOString()
+        end = endDate.toISOString()
+    }
+
+    const value = {
+        value: selectedDateValue.value,
+        start,
+        end,
+        specificRange: specificRange.value
+            ? [
+                    specificRange.value.start?.toDate(getLocalTimeZone()).toISOString(),
+                    specificRange.value.end?.toDate(getLocalTimeZone()).toISOString(),
+                ]
+            : undefined,
+    }
+
+    emit('apply', value)
+    isDropdownOpen.value = false
+}
+
+function resetToCurrentValue() {
+    selectedDateValue.value = props.selected.value as string | undefined
+}
+
+watch(isDropdownOpen, (isOpen) => {
+    if (isOpen) {
+        resetToCurrentValue()
+    }
+})
+
+watch(() => props.isActive, (isActive) => {
+    if (!isActive && isDropdownOpen.value) {
+        isDropdownOpen.value = false
+    }
+})
+
+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! focus:ring-0! px-12px! gap-6px!"
+            variant="secondary"
+            size="md"
+            h-32px
+            :disabled="props.disabled"
+            :loading="props.loading"
+            :leading="false"
+            @click="isDropdownOpen = !isDropdownOpen"
+        >
+            <TelaIcon v-if="props.isActive" name="i-ph-calendar-blank" size="md" />
+            <span class="max-w-210px! 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')" />
+        </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 flex="~ col" gap-4px py-8px px-8px>
+                <div
+                    v-for="option in dateFilterValueOptions"
+                    :key="option.value"
+                    cursor-pointer
+                    flex="~ justify-between"
+                    items-center
+                    gap-12px
+                    p-8px
+                    h-28px
+                    rounded-8px
+                    class="hover:bg-gray-20"
+                    :class="[
+                        (selectedDateValue === option.value)
+                            ? 'outline outline-0.5px outline-gray-240'
+                            : '',
+                    ]"
+                    @click="handleDateValueSelect(option.value)"
+                >
+                    <span justify-start text-black-900 text-14px font-medium leading-tight>
+                        {{ option.label }}
+                    </span>
+                    <TelaRadioButton
+                        :model-value="selectedDateValue === option.value"
+                        class="border border-gray-300!"
+                        @update:model-value="handleDateValueSelect(option.value)"
+                        @click.stop
+                    />
+                </div>
+            </div>
+            <div v-if="selectedDateValue === 'specificDate'">
+                <TelaRangeCalendar
+                    v-model="specificRange"
+                    class="shadow-none! px-2px! pt-8px!"
+                />
+            </div>
+            <div pb-8px px-8px pt-8px bg-white rounded-b-12px>
+                <TelaButton
+                    variant="secondary"
+                    w-full
+                    size="sm"
+                    rounded-lg
+                    :disabled="!selectedDateValue || (selectedDateValue === 'specificDate' && (!specificRange?.start || !specificRange?.end))"
+                    @click="handleApply"
+                >
+                    {{ props.applyLabel }}
+                </TelaButton>
+            </div>
+        </div>
+    </div>
+</template>