Tooloop/Caramel-CRM
2
0
Fork 0
Code Issues 61 Pull Requests Projects 3 Releases Wiki Activity

Fix: growing textarea now working properly. Placeholder wasn't working before

Browse Source 
Preparation for #42
This commit is contained in:
Daniel Stock
2025-10-22 16:11:52 +02:00
parent 1e4db2162a
commit 82b7215dca
3 changed files with 75 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/documents/LineItemTable.vue
+15 -12
View File
@@ -1,5 +1,5 @@
<!-- TODO: Mengenfeld Komma als decimal point -->
<!-- Enter in LineItem = neue Zeile -->
<!-- Enter in LineItem = neue Zeile -->
<script setup lang="ts">
import { ref, watch, HTMLAttributes } from 'vue'
@@ -94,18 +94,17 @@ const recalculatePositions = () => {
<!-- Posten -->
<TableCell>
<Input v-model="element.title" placeholder="Posten"
class="font-bold h-6 py-0 px-1 m-0 bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 border-none hover:border-1 dark:hover:border-1 placeholder:text-muted-foreground/30 shadow-none mb-1" />
<!-- <Textarea v-model="element.description" placeholder="Beschreibung"
class="py-0 min-h-4 px-1 m-0 bg-transparent dark:bg-transparent border-none placeholder:text-muted-foreground/30 shadow-none" /> -->
class="font-bold h-fit p-1 h-7! m-0 bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 border-none hover:border-1 dark:hover:border-1 placeholder:text-muted-foreground/30 shadow-none mb-1" />
<GrowingTextarea v-model="element.description" placeholder="Beschreibung"
class="font-light bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 py-0 px-1 m-0 border-none shadow-none" />
class="font-light m-0 bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 py-0 px-1 m-0 border-none shadow-none" />
</TableCell>
<!-- Einh. -->
<TableCell class="w-1/8 text-center">
<Select v-model="element.unit">
<SelectTrigger class="shadow-none bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 border-none pr-0 py-0 pl-1 w-full h-6!">
<SelectTrigger
class="shadow-none bg-transparent p-1 h-7! dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 border-none w-full">
<SelectValue placeholder="Einheit" />
</SelectTrigger>
<SelectContent>
@@ -122,21 +121,25 @@ const recalculatePositions = () => {
<TableCell class="w-20 text-center">
<NumberField v-model="element.quantity" :step="0.5" :format-options="{}">
<NumberFieldContent>
<NumberFieldDecrement class="text-muted-foreground p-1 bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66" />
<NumberFieldInput class="h-6 border-none bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66" />
<NumberFieldIncrement class="text-muted-foreground p-1 bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66" />
<NumberFieldDecrement
class="text-muted-foreground p-1 h-7! bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66" />
<NumberFieldInput
class="h-6 border-none p-1 h-7! bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66" />
<NumberFieldIncrement
class="text-muted-foreground p-1 h-7! bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66" />
</NumberFieldContent>
</NumberField>
</TableCell>
<!-- Preis -->
<TableCell class="w-1/8 text-right tabular-nums">
<NumberInput :modelValue="Number(element.price)" class="bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 h-6 rounded" />
<NumberInput :modelValue="Number(element.price)"
class="bg-transparent p-1 h-7! dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 rounded shadow-none!" />
</TableCell>
<!-- Total -->
<TableCell class="w-1/8 text-right tabular-nums font-bold">{{ toCurrency(element.price * element.quantity)
}}
}}
</TableCell>
<!-- Buttons -->
@@ -168,7 +171,7 @@ const recalculatePositions = () => {
</Table>
<Empty v-if="items.length < 1">
<Empty v-if="items.length < 1" class="md:pb-0 md:pt-8">
<EmptyHeader>
<EmptyMedia variant="icon">
<TextSelect class="text-muted-foreground" stroke-width="1.5" />