Admin
44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Table } from '@tanstack/vue-table'
|
|
|
|
import { X } from 'lucide-vue-next'
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import type { CloudConstant } from '@/pages/developer/cloud-constants/data/schema'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
|
|
const props = defineProps<DataTableToolbarProps>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
interface DataTableToolbarProps {
|
|
table: Table<CloudConstant>
|
|
}
|
|
|
|
const isFiltered = computed(() => props.table.getState().columnFilters.length > 0)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center flex-1 space-x-2">
|
|
<Input
|
|
:placeholder="t('developer.cloudConstants.searchPlaceholder')"
|
|
:model-value="(table.getColumn('key')?.getFilterValue() as string) ?? ''"
|
|
class="h-8 w-[150px] lg:w-[250px]"
|
|
@input="table.getColumn('key')?.setFilterValue($event.target.value)"
|
|
/>
|
|
|
|
<Button
|
|
v-if="isFiltered"
|
|
variant="ghost"
|
|
class="h-8 px-2 lg:px-3"
|
|
@click="table.resetColumnFilters()"
|
|
>
|
|
{{ t('common.reset') }}
|
|
<X class="size-4 ml-2" />
|
|
</Button>
|
|
</div>
|
|
</template>
|