Test commit to new origin

resources/js/Components/DatePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useAttrs } from "vue";
 import { Button } from "@/Components/ui/button";
 import { Calendar } from "@/Components/ui/calendar";
 import {
@@ -13,6 +13,8 @@ import { format } from "date-fns";
 import { sl } from "date-fns/locale";
 import { CalendarDate, parseDate } from "@internationalized/date";
 
+defineOptions({ inheritAttrs: false });
+
 const props = defineProps({
   modelValue: {
     type: [Date, String, null],
@@ -42,6 +44,13 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
+const attrs = useAttrs();
+const forwardedAttrs = computed(() => {
+  const { class: _class, id: _id, ...rest } = attrs;
+  return rest;
+});
+const controlId = computed(() => attrs.id ?? props.id);
+
 // Convert string/Date to CalendarDate
 const toCalendarDate = (value) => {
   if (!value) return null;
@@ -115,13 +124,15 @@ const open = ref(false);
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
       <Button
-        :id="id"
+        v-bind="forwardedAttrs"
+        :id="controlId"
         variant="outline"
         :class="
           cn(
             'w-full justify-start text-left font-normal',
             !calendarDate && 'text-muted-foreground',
-            error && 'border-red-500 focus:border-red-500 focus:ring-red-500'
+            error && 'border-red-500 focus:border-red-500 focus:ring-red-500',
+            attrs.class
           )
         "
         :disabled="disabled"