@zap-wunschlachen/wl-shared-components 1.0.37 → 1.0.38

package/src/components/Accordion/Accordion.css

@@ -1,59 +1,59 @@
-/* The default styles will apply conditionally based on the plain prop */
-
-.outlined-style .v-expansion-panel__shadow {
-  box-shadow:
-    0px -2px 0px 0px var(--Dental-Blue-0),
-    /* Top border-like shadow */ 0px 2px 0px 0px var(--Dental-Blue-0); /* Bottom border-like shadow */
-}
-
-.outlined-style .v-expansion-panel-title {
-  border-radius: 0 !important;
-}
-
-.outlined-style .v-expansion-panel-title:hover {
-  background: var(--Dental-Light-Blue--3) !important;
-}
-
-.outlined-style .v-expansion-panel-text {
-  background: transparent;
-  border-radius: 0px;
-}
-
-.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
-  opacity: 0;
-}
-
-.plain-style .v-expansion-panel__shadow {
-  box-shadow: none !important;
-}
-
-.plain-style.v-expansion-panel {
-  background: transparent !important;
-}
-
-.v-expansion-panel-title {
-  background-color: transparent !important;
-}
-
-.plain-style .v-expansion-panel-text {
-  background: transparent;
-  border-radius: 8px;
-}
-
-.plain-style .v-expansion-panel-text__wrapper {
-  padding: 0px !important;
-}
-
-.plain-style
-  .v-expansion-panel--active
-  > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
-  min-height: none !important;
-}
-
-.plain-style .v-expansion-panel-title {
-  padding: 0px !important;
-}
-
-.wl-accordion .v-icon {
-  color: var(--Dental-Blue-0);
-}
+/* The default styles will apply conditionally based on the plain prop */
+
+.outlined-style .v-expansion-panel__shadow {
+  box-shadow:
+    0px -2px 0px 0px var(--Dental-Blue-0),
+    /* Top border-like shadow */ 0px 2px 0px 0px var(--Dental-Blue-0); /* Bottom border-like shadow */
+}
+
+.outlined-style .v-expansion-panel-title {
+  border-radius: 0 !important;
+}
+
+.outlined-style .v-expansion-panel-title:hover {
+  background: var(--Dental-Light-Blue--3) !important;
+}
+
+.outlined-style .v-expansion-panel-text {
+  background: transparent;
+  border-radius: 0px;
+}
+
+.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
+  opacity: 0;
+}
+
+.plain-style .v-expansion-panel__shadow {
+  box-shadow: none !important;
+}
+
+.plain-style.v-expansion-panel {
+  background: transparent !important;
+}
+
+.v-expansion-panel-title {
+  background-color: transparent !important;
+}
+
+.plain-style .v-expansion-panel-text {
+  background: transparent;
+  border-radius: 8px;
+}
+
+.plain-style .v-expansion-panel-text__wrapper {
+  padding: 0px !important;
+}
+
+.plain-style
+  .v-expansion-panel--active
+  > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
+  min-height: none !important;
+}
+
+.plain-style .v-expansion-panel-title {
+  padding: 0px !important;
+}
+
+.wl-accordion .v-icon {
+  color: var(--Dental-Blue-0);
+}

package/src/components/Accordion/AccordionGroup.vue

@@ -1,51 +1,51 @@
-<template>
-  <v-expansion-panels
-    v-model="internalValue"
-    expand-icon="heroicons:chevron-down"
-    collapse-icon="heroicons:chevron-up"
-    :rounded="false"
-    :multiple="multiple"
-    class="wl-accordion"
-    :variant="variantGroup"
-    data-testid="root"
-  >
-    <slot />
-  </v-expansion-panels>
-</template>
-
-<script setup>
-import './Accordion.css';
-import { defineProps, defineEmits, computed } from 'vue';
-
-const props = defineProps({
-  /**
-   * The modelValue for v-model binding.
-   */
-  modelValue: {
-    type: [String, Number, Array],
-    default: null,
-  },
-  /**
-   * Allows multiple panels to be open simultaneously.
-   */
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  variantGroup: {
-    type: String,
-    default: 'accordion',
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const internalValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit('update:modelValue', value);
-  },
-});
-</script>
+<template>
+  <v-expansion-panels
+    v-model="internalValue"
+    expand-icon="heroicons:chevron-down"
+    collapse-icon="heroicons:chevron-up"
+    :rounded="false"
+    :multiple="multiple"
+    class="wl-accordion"
+    :variant="variantGroup"
+    data-testid="root"
+  >
+    <slot />
+  </v-expansion-panels>
+</template>
+
+<script setup>
+import './Accordion.css';
+import { defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * The modelValue for v-model binding.
+   */
+  modelValue: {
+    type: [String, Number, Array],
+    default: null,
+  },
+  /**
+   * Allows multiple panels to be open simultaneously.
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  variantGroup: {
+    type: String,
+    default: 'accordion',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const internalValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+</script>

package/src/components/Accordion/AccordionItem.vue

@@ -1,66 +1,66 @@
-<template>
-  <v-expansion-panel
-    :value="value"
-    :class="{
-      'plain-style': variant === 'plain',
-      'outlined-style': variant === 'outlined',
-    }"
-    :bg-color="bgColor"
-    data-testid="root"
-  >
-    <!-- Title Slot with Fallback to Prop -->
-    <template #title>
-      <slot name="title">
-        <h3>{{ title }}</h3>
-      </slot>
-    </template>
-
-    <!-- Content Slot with Fallback to Prop -->
-    <template #text>
-      <slot name="content">
-        <p>{{ text }}</p>
-      </slot>
-    </template>
-  </v-expansion-panel>
-</template>
-
-<script setup>
-import { defineProps } from 'vue';
-import './Accordion.css';
-
-const props = defineProps({
-  /**
-   * The variant of the panel ('plain' or 'outlined').
-   */
-  variant: {
-    type: String,
-    default: 'outlined',
-    validator: (value) => ['plain', 'outlined'].includes(value),
-  },
-  /**
-   * The title displayed in the panel header.
-   */
-  title: {
-    type: String,
-    default: 'Default Title',
-  },
-  /**
-   * The text content inside the panel.
-   */
-  text: {
-    type: String,
-    default: 'Default text',
-  },
-  /**
-   * Unique value identifying the panel.
-   */
-  value: {
-    type: [String, Number],
-    required: true,
-  },
-  bgColor: {
-    type: String,
-    default: 'var(--Soft-Concrete-0)',
-  },
-});
-</script>
+<template>
+  <v-expansion-panel
+    :value="value"
+    :class="{
+      'plain-style': variant === 'plain',
+      'outlined-style': variant === 'outlined',
+    }"
+    :bg-color="bgColor"
+    data-testid="root"
+  >
+    <!-- Title Slot with Fallback to Prop -->
+    <template #title>
+      <slot name="title">
+        <h3>{{ title }}</h3>
+      </slot>
+    </template>
+
+    <!-- Content Slot with Fallback to Prop -->
+    <template #text>
+      <slot name="content">
+        <p>{{ text }}</p>
+      </slot>
+    </template>
+  </v-expansion-panel>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import './Accordion.css';
+
+const props = defineProps({
+  /**
+   * The variant of the panel ('plain' or 'outlined').
+   */
+  variant: {
+    type: String,
+    default: 'outlined',
+    validator: (value) => ['plain', 'outlined'].includes(value),
+  },
+  /**
+   * The title displayed in the panel header.
+   */
+  title: {
+    type: String,
+    default: 'Default Title',
+  },
+  /**
+   * The text content inside the panel.
+   */
+  text: {
+    type: String,
+    default: 'Default text',
+  },
+  /**
+   * Unique value identifying the panel.
+   */
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  bgColor: {
+    type: String,
+    default: 'var(--Soft-Concrete-0)',
+  },
+});
+</script>

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(--Dental-Blue-0);
-}
-
-.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;
-}
-
-.bg-Soft-concrete-1 {
-  background-color: #F8FAFD;
-}
-
-.border-rounded-md {
-  border-radius: 0.375rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
-.text-dental-blue-3 {
-  color: var(--Dental-Blue--0) !important;
-}
-
-.text-error-red-0 {
-  color: #B00020 !important;
+/* Actions component styles */
+.actions-grid {
+  margin-bottom: 1.25rem;
+  display: flex;
+  gap: 20px;
+  color: var(--Dental-Blue-0);
+}
+
+.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;
+}
+
+.bg-Soft-concrete-1 {
+  background-color: #F8FAFD;
+}
+
+.border-rounded-md {
+  border-radius: 0.375rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.text-dental-blue-3 {
+  color: var(--Dental-Blue--0) !important;
+}
+
+.text-error-red-0 {
+  color: #B00020 !important;
 }

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 text-error-red-0 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 text-error-red-0 mb-5">
-            <v-icon size="26" icon="heroicons:x-circle" />
-            {{ t('appointments.status.missed') }}
-        </p>
-        <div class="actions-grid justify-center align-center bg-Soft-concrete-1 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="text-dental-blue-3" href="tel:030/495 20 10">030/495 20
-                        10</a>
-                    <br />
-                    {{ t('email') }}: <a rel="stylesheet" class="text-dental-blue-3"
-                        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 text-error-red-0 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 text-error-red-0 mb-5">
+            <v-icon size="26" icon="heroicons:x-circle" />
+            {{ t('appointments.status.missed') }}
+        </p>
+        <div class="actions-grid justify-center align-center bg-Soft-concrete-1 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="text-dental-blue-3" href="tel:030/495 20 10">030/495 20
+                        10</a>
+                    <br />
+                    {{ t('email') }}: <a rel="stylesheet" class="text-dental-blue-3"
+                        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>