@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/components/Accordion/presets/plain.css

@@ -1,34 +1,34 @@
-/* Plain preset - minimal styling, no background, no shadow, no dividers */
-.wl-accordion-item--plain {
-  background: transparent !important;
-}
-
-.wl-accordion-item--plain.v-expansion-panel {
-  background: transparent !important;
-}
-
-.wl-accordion-item--plain .v-expansion-panel__shadow {
-  box-shadow: none !important;
-}
-
-.wl-accordion-item--plain .v-expansion-panel-title {
-  padding: 12px 0 !important;
-  min-height: auto !important;
-  background: transparent !important;
-}
-
-.wl-accordion-item--plain .v-expansion-panel-title:hover {
-  background: transparent !important;
-}
-
-.wl-accordion-item--plain .v-expansion-panel-title__overlay {
-  opacity: 0 !important;
-}
-
-.wl-accordion-item--plain .v-expansion-panel-text {
-  background: transparent !important;
-}
-
-.wl-accordion-item--plain .v-expansion-panel-text__wrapper {
-  padding: 0 0 12px 0 !important;
-}
+/* Plain preset - minimal styling, no background, no shadow, no dividers */
+.wl-accordion-item--plain {
+  background: transparent !important;
+}
+
+.wl-accordion-item--plain.v-expansion-panel {
+  background: transparent !important;
+}
+
+.wl-accordion-item--plain .v-expansion-panel__shadow {
+  box-shadow: none !important;
+}
+
+.wl-accordion-item--plain .v-expansion-panel-title {
+  padding: 12px 0 !important;
+  min-height: auto !important;
+  background: transparent !important;
+}
+
+.wl-accordion-item--plain .v-expansion-panel-title:hover {
+  background: transparent !important;
+}
+
+.wl-accordion-item--plain .v-expansion-panel-title__overlay {
+  opacity: 0 !important;
+}
+
+.wl-accordion-item--plain .v-expansion-panel-text {
+  background: transparent !important;
+}
+
+.wl-accordion-item--plain .v-expansion-panel-text__wrapper {
+  padding: 0 0 12px 0 !important;
+}

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

@@ -1,55 +1,55 @@
-/* Actions component styles */
-.actions-grid {
-  margin-bottom: 1.25rem;
-  display: flex;
-  gap: 20px;
-  color: var(--appointment_card_title);
-}
-
-.actions-column {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.action-button {
-  font-weight: bold;
-  flex: 1;
-}
-
-.action-button:first-child {
-  padding-right: 0.5rem;
-}
-
-.action-button:last-child {
-  padding-left: 0.5rem;
-}
-
-.full-width-button {
-  width: 100%;
-}
-
-.full-width-button-opacity {
-  width: 100%;
-  opacity: 1;
-}
-
-.missed-info-box {
-  background-color: var(--Dental-Light-Blue--3);
-}
-
-.border-rounded-md {
-  border-radius: 0.375rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
-.action-link {
-  color: var(--appointment_card_title);
-}
-
-.status-error {
-  color: var(--error-color, var(--Error-Red-0));
+/* Actions component styles */
+.actions-grid {
+  margin-bottom: 1.25rem;
+  display: flex;
+  gap: 20px;
+  color: var(--appointment_card_title);
+}
+
+.actions-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.action-button {
+  font-weight: bold;
+  flex: 1;
+}
+
+.action-button:first-child {
+  padding-right: 0.5rem;
+}
+
+.action-button:last-child {
+  padding-left: 0.5rem;
+}
+
+.full-width-button {
+  width: 100%;
+}
+
+.full-width-button-opacity {
+  width: 100%;
+  opacity: 1;
+}
+
+.missed-info-box {
+  background-color: var(--Dental-Light-Blue--3);
+}
+
+.border-rounded-md {
+  border-radius: 0.375rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.action-link {
+  color: var(--appointment_card_title);
+}
+
+.status-error {
+  color: var(--error-color, var(--Error-Red-0));
 }

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

@@ -1,100 +1,100 @@
-<template>
-    <template v-if="appointment.status === 'upcoming'">
-        <div class="actions-grid">
-            <Button class="action-button" variant="outlined" prependIcon="heroicons:x-circle" :disabled="disabled"
-                :label="t('wl.appointment_card.cancel')" size="small" @click="handleCancel" />
-            <Button class="action-button" :variant="confirmable ? 'outlined' : 'flat'"
-                prependIcon="heroicons:arrows-up-down" :disabled="disabled" :label="t('wl.appointment_card.reschedule')"
-                size="small" @click="handleReschedule" />
-        </div>
-        <Button v-if="confirmable" class="full-width-button" :label="t('wl.appointment_card.confirm')"
-            :disabled="disabled" @click="confirmAppointment" />
-
-    </template>
-    <template v-if="appointment.status === 'cancelled'">
-        <div>
-            <p class="text-center font-weight-bold status-error mb-5">
-                <v-icon size="26" icon="heroicons:x-circle" />
-                {{ t('appointments.status.cancelled') }}
-            </p>
-            <div class="actions-grid">
-                <Button class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path"
-                    :disabled="disabled" :label="t('wl.appointment_card.reschedule_after_cancellation')"
-                    @click="handleReschedule" />
-            </div>
-        </div>
-    </template>
-    <template v-if="appointment.status === 'done' && appointment.for_patient">
-        <div class="actions-grid">
-            <Button class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path"
-                :disabled="disabled" :label="t('wl.appointment_card.reschedule_after_cancellation')"
-                @click="handleReschedule" />
-        </div>
-    </template>
-    <template v-if="appointment.status === 'missed'">
-        <p class="text-center font-weight-bold status-error mb-5">
-            <v-icon size="26" icon="heroicons:x-circle" />
-            {{ t('appointments.status.missed') }}
-        </p>
-        <div class="actions-grid justify-center align-center missed-info-box border border-rounded-md p-4">
-            <div>
-                <v-icon size="46" icon="heroicons:calendar-days" />
-            </div>
-            <div>
-                <h4>{{ t('appointment.missed.title') }}</h4>
-                <p>{{ t('phone') }}: <a rel="stylesheet" class="action-link" href="tel:030/495 20 10">030/495 20
-                        10</a>
-                    <br />
-                    {{ t('email') }}: <a rel="stylesheet" class="action-link"
-                        href="mailto:info@wunschlachen.de">info@wunschlachen.de</a>
-                </p>
-            </div>
-        </div>
-    </template>
-</template>
-
-
-<script setup lang="ts">
-import { AppointmentData } from '@/types';
-import { computed } from 'vue';
-import Button from '../../Button/Button.vue';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const { appointment, disabled } = defineProps<{
-    appointment: AppointmentData,
-    disabled?: boolean,
-}>();
-
-// Emit events upward when actions occur
-const emit = defineEmits<{
-    (e: 'confirmed', id: string): void
-    (e: 'cancelled', id: string): void
-    (e: 'rescheduled', id: string): void
-}>()
-
-// Determine visibility: only show confirm button when unconfirmed and appointment is within next 48h
-const confirmable = computed(() => {
-    const now = Date.now()
-    const startTime = new Date(appointment.start).getTime()
-    const diff = startTime - now
-    return !appointment.is_confirmed && diff > 0 && diff <= 48 * 3600 * 1000
-})
-
-// Log confirmation when the button is clicked
-const confirmAppointment = async () => {
-    emit('confirmed', appointment.id)
-}
-
-const handleCancel = async () => {
-    emit('cancelled', appointment.id)
-}
-
-const handleReschedule = async () => {
-    emit('rescheduled', appointment.id)
-}
-
-</script>
-
+<template>
+    <template v-if="appointment.status === 'upcoming'">
+        <div class="actions-grid">
+            <Button class="action-button" variant="outlined" prependIcon="heroicons:x-circle" :disabled="disabled"
+                :label="t('wl.appointment_card.cancel')" size="small" @click="handleCancel" />
+            <Button class="action-button" :variant="confirmable ? 'outlined' : 'flat'"
+                prependIcon="heroicons:arrows-up-down" :disabled="disabled" :label="t('wl.appointment_card.reschedule')"
+                size="small" @click="handleReschedule" />
+        </div>
+        <Button v-if="confirmable" class="full-width-button" :label="t('wl.appointment_card.confirm')"
+            :disabled="disabled" @click="confirmAppointment" />
+
+    </template>
+    <template v-if="appointment.status === 'cancelled'">
+        <div>
+            <p class="text-center font-weight-bold status-error mb-5">
+                <v-icon size="26" icon="heroicons:x-circle" />
+                {{ t('appointments.status.cancelled') }}
+            </p>
+            <div class="actions-grid">
+                <Button class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path"
+                    :disabled="disabled" :label="t('wl.appointment_card.reschedule_after_cancellation')"
+                    @click="handleReschedule" />
+            </div>
+        </div>
+    </template>
+    <template v-if="appointment.status === 'done' && appointment.for_patient">
+        <div class="actions-grid">
+            <Button class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path"
+                :disabled="disabled" :label="t('wl.appointment_card.reschedule_after_cancellation')"
+                @click="handleReschedule" />
+        </div>
+    </template>
+    <template v-if="appointment.status === 'missed'">
+        <p class="text-center font-weight-bold status-error mb-5">
+            <v-icon size="26" icon="heroicons:x-circle" />
+            {{ t('appointments.status.missed') }}
+        </p>
+        <div class="actions-grid justify-center align-center missed-info-box border border-rounded-md p-4">
+            <div>
+                <v-icon size="46" icon="heroicons:calendar-days" />
+            </div>
+            <div>
+                <h4>{{ t('appointment.missed.title') }}</h4>
+                <p>{{ t('phone') }}: <a rel="stylesheet" class="action-link" href="tel:030/495 20 10">030/495 20
+                        10</a>
+                    <br />
+                    {{ t('email') }}: <a rel="stylesheet" class="action-link"
+                        href="mailto:info@wunschlachen.de">info@wunschlachen.de</a>
+                </p>
+            </div>
+        </div>
+    </template>
+</template>
+
+
+<script setup lang="ts">
+import { AppointmentData } from '@/types';
+import { computed } from 'vue';
+import Button from '../../Button/Button.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const { appointment, disabled } = defineProps<{
+    appointment: AppointmentData,
+    disabled?: boolean,
+}>();
+
+// Emit events upward when actions occur
+const emit = defineEmits<{
+    (e: 'confirmed', id: string): void
+    (e: 'cancelled', id: string): void
+    (e: 'rescheduled', id: string): void
+}>()
+
+// Determine visibility: only show confirm button when unconfirmed and appointment is within next 48h
+const confirmable = computed(() => {
+    const now = Date.now()
+    const startTime = new Date(appointment.start).getTime()
+    const diff = startTime - now
+    return !appointment.is_confirmed && diff > 0 && diff <= 48 * 3600 * 1000
+})
+
+// Log confirmation when the button is clicked
+const confirmAppointment = async () => {
+    emit('confirmed', appointment.id)
+}
+
+const handleCancel = async () => {
+    emit('cancelled', appointment.id)
+}
+
+const handleReschedule = async () => {
+    emit('rescheduled', appointment.id)
+}
+
+</script>
+
 <style src="./Actions.css" scoped></style>

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

@@ -1,21 +1,21 @@
-.main-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--Power-Red--4);
-  border-radius: 8px;
-  padding: 15px 10px;
-  margin-top: 10px;
-  color: var(--appointment_card_title);
-}
-
-.text-container {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.text-container p {
-  color: inherit;
+.main-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--Power-Red--4);
+  border-radius: 8px;
+  padding: 15px 10px;
+  margin-top: 10px;
+  color: var(--appointment_card_title);
+}
+
+.text-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.text-container p {
+  color: inherit;
 }

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

@@ -1,24 +1,24 @@
-<template>
-  <div class="main-container">
-    <div class="text-container">
-      <p>{{ t('wl.appointment_card.fill_form_title') }}</p>
-      <p class="p-small">{{ t('wl.appointment_card.fill_form_description') }}</p>
-    </div>
-
-    <Button variant="outlined" :label="t('wl.appointment_card.anamnese_form')" @click="emit('fillAnamnese')"/>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '../../Button/Button.vue';
-import { useI18n } from 'vue-i18n';
-
-const emit = defineEmits<{
-    (e: 'fillAnamnese'): void
-}>()
-
-const { t } = useI18n();
-
-</script>
-
+<template>
+  <div class="main-container">
+    <div class="text-container">
+      <p>{{ t('wl.appointment_card.fill_form_title') }}</p>
+      <p class="p-small">{{ t('wl.appointment_card.fill_form_description') }}</p>
+    </div>
+
+    <Button variant="outlined" :label="t('wl.appointment_card.anamnese_form')" @click="emit('fillAnamnese')"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '../../Button/Button.vue';
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits<{
+    (e: 'fillAnamnese'): void
+}>()
+
+const { t } = useI18n();
+
+</script>
+
 <style src="./AnamneseNotification.css" scoped></style>

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

@@ -1,100 +1,100 @@
-/* Card component styles */
-.appointment-card {
-  display: block;
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-  overflow: hidden;
-  text-decoration: none;
-}
-
-.card-opacity {
-  opacity: 0.5;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  color: var(--appointment_card_header_text);
-}
-
-.card-header--default {
-  background-color: var(--appointment_card_header_default_bg);
-}
-
-.card-header--cancelled {
-  background-color: var(--Error-Red--1);
-}
-
-.header-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: inherit;
-}
-
-.header-item p {
-  color: inherit;
-}
-
-.header-icon {
-  flex-shrink: 0;
-  color: inherit;
-  width: 16px;
-  height: 16px;
-}
-
-.card-body {
-  background-color: var(--appointment_card_default_bg);
-  padding: 1rem;
-  gap: 1rem;
-  display: flex;
-  flex-direction: column;
-  color: var(--appointment_card_title);
-}
-
-.card-body h3 {
-  color: inherit;
-}
-
-.card-footer {
-  background-color: var(--appointment_card_default_bg);
-  padding: 1rem;
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  color: var(--appointment_card_title);
-}
-
-.card-body hr {
-  border-color: var(--appointment_card_delimiter);
-}
-
-.appointment-detail {
-  margin: 0;
-  font-weight: 600;
-  font-size: 1.125rem; /* text-lg */
-  line-height: 1.75rem; /* leading-7 */
-  text-align: left;
-}
-.card-body .flex {
-  display: flex;
-}
-.card-body .items-center {
-  align-items: center;
-}
-.card-body .gap-3 {
-  gap: 0.75rem;
-}
-.card-body .flex-1 {
-  flex: 1 1 0%;
-}
-.min-w-0{
-  min-width: 0;
-}
-.truncate{
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* Card component styles */
+.appointment-card {
+  display: block;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.card-opacity {
+  opacity: 0.5;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  color: var(--appointment_card_header_text);
+}
+
+.card-header--default {
+  background-color: var(--appointment_card_header_default_bg);
+}
+
+.card-header--cancelled {
+  background-color: var(--Error-Red--1);
+}
+
+.header-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: inherit;
+}
+
+.header-item p {
+  color: inherit;
+}
+
+.header-icon {
+  flex-shrink: 0;
+  color: inherit;
+  width: 16px;
+  height: 16px;
+}
+
+.card-body {
+  background-color: var(--appointment_card_default_bg);
+  padding: 1rem;
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  color: var(--appointment_card_title);
+}
+
+.card-body h3 {
+  color: inherit;
+}
+
+.card-footer {
+  background-color: var(--appointment_card_default_bg);
+  padding: 1rem;
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  color: var(--appointment_card_title);
+}
+
+.card-body hr {
+  border-color: var(--appointment_card_delimiter);
+}
+
+.appointment-detail {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.125rem; /* text-lg */
+  line-height: 1.75rem; /* leading-7 */
+  text-align: left;
+}
+.card-body .flex {
+  display: flex;
+}
+.card-body .items-center {
+  align-items: center;
+}
+.card-body .gap-3 {
+  gap: 0.75rem;
+}
+.card-body .flex-1 {
+  flex: 1 1 0%;
+}
+.min-w-0{
+  min-width: 0;
+}
+.truncate{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }