use crm- components everywhere

resources/js/components/DeleteUser.vue

@@ -6,7 +6,7 @@ import { ref } from 'vue';
 // Components
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import {
     Dialog,
     DialogClose,
@@ -17,7 +17,7 @@ import {
     DialogTitle,
     DialogTrigger,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 
 const passwordInput = ref<InstanceType<typeof Input> | null>(null);

resources/js/components/DialogCloseButton/DialogCloseButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/crm-button'
 import { X } from "lucide-vue-next"
 
 </script>

resources/js/components/NavUser.vue

@@ -5,7 +5,7 @@ import { useSidebar } from '@/components/ui/sidebar';
 import { usePage } from '@inertiajs/vue3';
 import { ChevronsUpDown } from 'lucide-vue-next';
 import UserMenuContent from './UserMenuContent.vue';
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/crm-button'
 
 
 const page = usePage();

resources/js/components/TwoFactorRecoveryCodes.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { regenerateRecoveryCodes } from '@/routes/two-factor';

resources/js/components/TwoFactorSetupModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';

resources/js/components/documents/InvoiceDialog.vue

@@ -19,8 +19,8 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, }
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Table, TableBody, TableCell, TableHead, TableRow, } from '@/components/ui/table'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button'
+import { Input } from '@/components/ui/crm-input';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
 import { StatusBadge, statusBadgeLabels } from '@/components/ui/status-badge'
 import LineItemTable from '@/components/documents/LineItemTable.vue'

resources/js/components/documents/LineItemTable.vue

@@ -2,7 +2,7 @@
 <!-- TODO: Enter in LineItem = neue Zeile -->
 <script setup lang="ts">
 
-import { ref, watch, HTMLAttributes, onUpdated, onMounted } from 'vue'
+import { ref, watch, HTMLAttributes, onUpdated } from 'vue'
 import draggable from 'vuedraggable';
 import { cn, toCurrency } from '@/lib/utils';
 import { LineItem } from '@/types';
@@ -10,12 +10,12 @@ import { newLineItem } from '@/types/index.d'
 import { Table, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from '@/components/ui/table';
 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, BetweenHorizonalEnd } from 'lucide-vue-next';
-import Button from '../ui/button/Button.vue';
+import { Input } from '@/components/ui/crm-input';
+import { Loader2, GripVertical, Trash2, Plus, TextSelect } from 'lucide-vue-next';
+import { Button } from '@/components/ui/crm-button';
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '@/components/ui/empty'
-import NumberInput from '../ui/number-input/NumberInput.vue';
-import { GrowingTextarea } from '../ui/growing-textarea';
+import NumberInput from '@/components/ui/number-input/NumberInput.vue';
+import { GrowingTextarea } from '@/components/ui/growing-textarea';
 
 const props = defineProps<{
   isLoading?: boolean,
@@ -202,7 +202,7 @@ const recalculatePositions = () => {
 
             <!-- Total -->
             <TableCell class="w-1/8 text-right tabular-nums font-bold">{{ toCurrency(element.price * element.quantity)
-              }}
+            }}
             </TableCell>
 
             <!-- Buttons -->

resources/js/components/ui/crm-textarea/Textarea.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { ref } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+defineExpose({
+  textareaRef
+})
+
+</script>
+
+<template>
+  <textarea ref="textareaRef" v-model="modelValue" data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)" />
+</template>

resources/js/components/ui/crm-textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue"

resources/js/components/ui/send-mail-dialog/SendMailDialog.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue"
 import { type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/crm-button"
 import { Dialog, DialogContent, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
+import { Input } from "@/components/ui/crm-input"
 import { Label } from "@/components/ui/label"
 
 const props = defineProps<DialogRootProps & {