@zap-wunschlachen/wl-shared-components 1.0.0 → 1.0.1

package/App.vue

@@ -2,6 +2,7 @@
   <div class="app">
     <div class="element-container">
       <div style="width: 100%; display: flex; flex-direction: column; gap: 20px;">
+        <Card :appointment="value0" :dentist-image-src="value0.dentist.imageSrc" />
         <Card :appointment="value1" :dentist-image-src="value1.dentist.imageSrc" />
         <Card :appointment="value2" :dentist-image-src="value2.dentist.imageSrc" />
         <Card :appointment="value3" :dentist-image-src="value3.dentist.imageSrc" />
@@ -15,6 +16,25 @@ import {ref} from 'vue';
 import Card from '@/components/Appointment/Card/Card.vue';
 import type { AppointmentData } from '@/types';
 
+const value0 = ref<AppointmentData>({
+  id: "0",
+  patientName: "Max Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "upcoming", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: true,
+  template_name: ["Routine Checkup", "Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: '',
+    imageSrc: ''
+  },
+  type: 0,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+
 const value1 = ref<AppointmentData>({
   id: "1",
   patientName: "Max Mustermann",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/Appointment/Card/Actions.css

@@ -2,7 +2,7 @@
 .actions-grid {
   margin-bottom: 1.25rem;
   display: flex;
-  gap: 0;
+  gap: 20px;
   color: var(--Dental-Blue-0);
 }
 
@@ -12,7 +12,6 @@
 }
 
 .action-button:first-child {
-  border-right: 1px solid #e5e7eb;
   padding-right: 0.5rem;
 }
 

package/src/components/Appointment/Card/Actions.vue

@@ -1,10 +1,10 @@
 <template>
     <template v-if="appointment.status === 'upcoming'">
         <div class="actions-grid">
-            <Button class="action-button" variant="text" prependIcon="heroicons:x-circle"
+            <Button class="action-button" variant="outlined" prependIcon="heroicons:x-circle"
                 label='Termin stornieren' size="small" @click="handleCancel" />
 
-            <Button class="action-button" variant="text" prependIcon="heroicons:arrows-up-down"
+            <Button class="action-button" :variant="confirmable ? 'outlined' : 'flat'" prependIcon="heroicons:arrows-up-down"
                 label='Termin verschieben' size="small" @click="handleReschedule" />
         </div>
 

package/src/components/index.ts

@@ -18,3 +18,4 @@ export { default as OtpInput } from './OtpInput/OtpInput.vue';
 export { default as PhoneInput } from './PhoneInput/PhoneInput.vue';
 export { default as EditField } from './EditField/EditField.vue';
 export { default as Modal } from './Modal/Modal.vue';
+export { default as AppointmentCard } from './Appointment/Card/Card.vue';