Fixed a regression, where the position column widths the line item table would get messed up of a section title was the first element
This commit is contained in:
@@ -11,7 +11,7 @@ import { Table, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"
|
||||
import { NumberField, NumberFieldContent, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, } from '@/components/ui/number-field'
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Loader2, GripVertical, Trash2, Plus, TextSelect } from 'lucide-vue-next';
|
||||
import { Loader2, GripVertical, Trash2, Plus, TextSelect, BetweenHorizonalEnd } from 'lucide-vue-next';
|
||||
import Button from '../ui/button/Button.vue';
|
||||
import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '@/components/ui/empty'
|
||||
import NumberInput from '../ui/number-input/NumberInput.vue';
|
||||
@@ -105,6 +105,19 @@ const recalculatePositions = () => {
|
||||
<Table :class="{ 'opacity-100!': !isLoading && items.length >= 1 }"
|
||||
class="table-fixed transition-opacity opacity-0 duration-300">
|
||||
|
||||
<!-- Dummy header so a col spanning title section in first row
|
||||
doesn’t mess up col widths -->
|
||||
<TableRow class="border-0">
|
||||
<TableHead class="h-0 w-6 px-0"></TableHead>
|
||||
<TableHead class="h-0 w-8 px-0 text-center"></TableHead>
|
||||
<TableHead class="h-0 "></TableHead>
|
||||
<TableHead class="h-0 w-1/8"></TableHead>
|
||||
<TableHead class="h-0 w-20 text-center"></TableHead>
|
||||
<TableHead class="h-0 w-1/8 text-right pr-5"></TableHead>
|
||||
<TableHead class="h-0 w-1/8 text-right"></TableHead>
|
||||
<TableHead class="h-0 w-8"></TableHead>
|
||||
</TableRow>
|
||||
|
||||
<draggable v-model="items" tag="tbody" item-key="position" handle=".handle" ghostClass="ghost"
|
||||
@end="recalculatePositions">
|
||||
<template #item="{ element }">
|
||||
@@ -127,7 +140,7 @@ const recalculatePositions = () => {
|
||||
<TableCell class="w-8 text-right px-1">
|
||||
<Button variant="ghost" size="sm" @click="deleteItem(element)"
|
||||
class="has-[>svg]:px-1 text-muted-foreground hover:text-destructive">
|
||||
<Trash2 :size="18" stroke-width="1.5"/>
|
||||
<Trash2 :size="18" stroke-width="1.5" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
@@ -196,8 +209,14 @@ const recalculatePositions = () => {
|
||||
<TableCell class="w-8 text-right px-1">
|
||||
<Button variant="ghost" size="sm" @click="deleteItem(element)"
|
||||
class="has-[>svg]:px-1 text-muted-foreground hover:text-destructive">
|
||||
<Trash2 :size="18" stroke-width="1.5"/>
|
||||
<Trash2 stroke-width="1.5" />
|
||||
</Button>
|
||||
|
||||
<!-- <Button variant="ghost" size="sm" @click=""
|
||||
class="has-[>svg]:px-1 text-muted-foreground">
|
||||
<BetweenHorizonalEnd stroke-width="1.5"/>
|
||||
</Button> -->
|
||||
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user