Files
homebox/frontend/components/ui/table/TableCell.vue
Tonya 6cd9e2779f Use Tanstack table for Selectable Table, quick actions (#998)
* feat: implement example of data table

* feat: load item data into table

* chore: begin switching dialogs

* feat: implement old dialog for controlling headers and page size

* feat: get table into relatively usable state

* feat: enhance dropdown actions for multi-selection and CSV download

* feat: enhance table cell and dropdown button styles for better usability

* feat: json download for table

* feat: add expanded row component for item details in data table

* chore: add translation support

* feat: restore table on home page

* fix: oops need ids

* feat: move card view to use tanstack to allow for pagination

* feat: switch the items search to use ItemViewSelectable

* fix: update pagination handling and improve button click logic

* feat: improve selectable table

* feat: add indeterminate to checkbox

* feat: overhaul maintenance dialog to use new system and add maintenance options to table

* feat: add label ids and location id to item patch api

* feat: change location and labels in table view

* feat: add quick actions preference and enable toggle in table settings

* fix: lint

* fix: remove sized 1 pages

* fix: attempt to fix type error

* fix: various issues

* fix: remove

* fix: refactor item fetching logic to use useAsyncData for improved reactivity and improve use confirm

* fix: sort backend issues

* fix: enhance CSV export functionality by escaping fields to prevent formula injection

* fix: put aria sort on th not button

* chore: update api types
2025-09-24 02:37:38 +01:00

37 lines
935 B
Vue

<script setup lang="ts">
import type { HTMLAttributes } from "vue";
import { cn } from "@/lib/utils";
const props = defineProps<{
class?: HTMLAttributes["class"];
href?: string;
compact?: boolean;
}>();
</script>
<template>
<td :class="cn('p-0 align-middle relative', props.class)">
<NuxtLink
v-if="props.href"
:to="props.href"
class="block size-full"
:class="props.compact ? 'p-0' : 'p-4'"
style="min-width: 100%; min-height: 100%; display: flex; align-items: stretch"
>
<span class="flex min-h-0 min-w-0 flex-1 items-center"> <slot /> </span>
</NuxtLink>
<template v-else>
<div
:class="
cn(
'flex size-full min-h-0 min-w-0 items-center [&:has([role=checkbox])]:pr-0',
props.compact ? 'justify-center p-0' : 'p-4'
)
"
>
<slot />
</div>
</template>
</td>
</template>