@zap-wunschlachen/wl-shared-components 1.0.3 → 1.0.5

package/src/components/Laboratory/AppointmentCard/AppointmentCard.vue

@@ -1,116 +1,116 @@
-<template>
-  <v-card elevation="0" class="appointment-card" rounded="lg" data-testid="root">
-    <template #title>
-      <div class="d-flex flex-row align-center pa-1">
-        <h5 class="mr-auto">{{ date }}</h5>
-        <h5 class="mr-2">Status:</h5>
-        <TagLabel :status="status" />
-      </div>
-    </template>
-
-    <template #text>
-      <div class="d-flex flex-column ga-4">
-        <p>{{ treatmentName }}</p>
-        <div class="d-flex">
-          <v-btn
-            rounded="lg"
-            readonly
-            variant="outlined"
-            prepend-icon="heroicons:document-check"
-            class="mr-auto text-none"
-            size="compact"
-            :style="{
-              color: `var(${buttonTextColor})`,
-              backgroundColor: buttonBackgroundColor,
-              border: `2px solid var(${buttonBorderColor})`,
-            }"
-          >
-            <p class="p-small">{{ treatmentName }}</p>
-          </v-btn>
-          <v-btn
-            rounded="lg"
-            readonly
-            prepend-icon="heroicons:user-circle"
-            variant="text"
-            size="compact"
-            class="text-none"
-          >
-            <p class="p-small ml-1">{{ dentistName }}</p>
-          </v-btn>
-        </div>
-      </div>
-    </template>
-  </v-card>
-</template>
-
-<script setup>
-import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
-import { defineProps } from 'vue';
-import './AppointmentCard.css';
-
-// Define props for the component
-defineProps({
-  /**
-   * The date associated with the treatment or appointment.
-   * This prop is required and should be a string.
-   */
-  date: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * The current status of the treatment or process.
-   * This prop is required and is expected to be a string representing the status.
-   */
-  status: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * The name of the treatment being performed.
-   * This prop is required and should be a string.
-   */
-  treatmentName: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * The name of the dentist associated with the treatment.
-   * If no dentist name is provided, the default value will be 'Martin Paetz'.
-   */
-  dentistName: {
-    type: String,
-    default: 'Martin Paetz',
-  },
-
-  /**
-   * The color of the text on the button.
-   * Default is the CSS variable '--Dental-Blue-0'.
-   */
-  buttonTextColor: {
-    type: String,
-    default: '--Dental-Blue-0',
-  },
-
-  /**
-   * The background color of the button.
-   * Default is a semi-transparent turquoise color.
-   */
-  buttonBackgroundColor: {
-    type: String,
-    default: 'rgba(186, 230, 234, 0.10)',
-  },
-
-  /**
-   * The border color of the button.
-   * Default is the CSS variable '--Trkis'.
-   */
-  buttonBorderColor: {
-    type: String,
-    default: '--Trkis',
-  },
-});
-</script>
+<template>
+  <v-card elevation="0" class="appointment-card" rounded="lg" data-testid="root">
+    <template #title>
+      <div class="d-flex flex-row align-center pa-1">
+        <h5 class="mr-auto">{{ date }}</h5>
+        <h5 class="mr-2">Status:</h5>
+        <TagLabel :status="status" />
+      </div>
+    </template>
+
+    <template #text>
+      <div class="d-flex flex-column ga-4">
+        <p>{{ treatmentName }}</p>
+        <div class="d-flex">
+          <v-btn
+            rounded="lg"
+            readonly
+            variant="outlined"
+            prepend-icon="heroicons:document-check"
+            class="mr-auto text-none"
+            size="compact"
+            :style="{
+              color: `var(${buttonTextColor})`,
+              backgroundColor: buttonBackgroundColor,
+              border: `2px solid var(${buttonBorderColor})`,
+            }"
+          >
+            <p class="p-small">{{ treatmentName }}</p>
+          </v-btn>
+          <v-btn
+            rounded="lg"
+            readonly
+            prepend-icon="heroicons:user-circle"
+            variant="text"
+            size="compact"
+            class="text-none"
+          >
+            <p class="p-small ml-1">{{ dentistName }}</p>
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </v-card>
+</template>
+
+<script setup>
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+import { defineProps } from 'vue';
+import './AppointmentCard.css';
+
+// Define props for the component
+defineProps({
+  /**
+   * The date associated with the treatment or appointment.
+   * This prop is required and should be a string.
+   */
+  date: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * The current status of the treatment or process.
+   * This prop is required and is expected to be a string representing the status.
+   */
+  status: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * The name of the treatment being performed.
+   * This prop is required and should be a string.
+   */
+  treatmentName: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * The name of the dentist associated with the treatment.
+   * If no dentist name is provided, the default value will be 'Martin Paetz'.
+   */
+  dentistName: {
+    type: String,
+    default: 'Martin Paetz',
+  },
+
+  /**
+   * The color of the text on the button.
+   * Default is the CSS variable '--Dental-Blue-0'.
+   */
+  buttonTextColor: {
+    type: String,
+    default: '--Dental-Blue-0',
+  },
+
+  /**
+   * The background color of the button.
+   * Default is a semi-transparent turquoise color.
+   */
+  buttonBackgroundColor: {
+    type: String,
+    default: 'rgba(186, 230, 234, 0.10)',
+  },
+
+  /**
+   * The border color of the button.
+   * Default is the CSS variable '--Trkis'.
+   */
+  buttonBorderColor: {
+    type: String,
+    default: '--Trkis',
+  },
+});
+</script>

package/src/components/Laboratory/ChatBoxImage/ChatBoxImage.vue

@@ -1,81 +1,81 @@
-<template>
-  <v-card :elevation="0" class="pa-2 chat-box-image" rounded="lg">
-    <!-- Title slot for dynamic image rendering -->
-    <template #title>
-      <div class="d-flex flex-wrap">
-        <!-- Loop through the imageSources array prop to dynamically display images -->
-        <v-img
-          v-for="(image, index) in imageSources"
-          :key="index"
-          class="ma-2 pa-2"
-          aspect-ratio="16/9"
-          rounded="lg"
-          cover
-          :src="image"
-        ></v-img>
-      </div>
-    </template>
-
-    <!-- Text slot for dynamic paragraph -->
-    <template #text>
-      <p>{{ paragraphText }}</p>
-    </template>
-
-    <!-- Card actions with buttons -->
-    <v-card-actions>
-      <div class="d-flex flex-row align-center ga-3 w-100 justify-center">
-        <Button
-          style="width: 150px"
-          label="Approved"
-          density="default"
-          size="large"
-          @click="$emit('click:approved')"
-        ></Button>
-        <Button
-          style="width: 150px"
-          label="Not Approved"
-          density="default"
-          size="large"
-          variant="outlined"
-          @click="$emit('click:not-approved')"
-        ></Button>
-      </div>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script setup>
-import Button from '@components/Button/Button.vue';
-import { defineProps } from 'vue';
-
-// Define props for the paragraph text and an array of image sources
-const props = defineProps({
-  /**
-   * The text content to be displayed in the paragraph.
-   * Default value is a placeholder text ('Lorem ipsum...').
-   */
-  paragraphText: {
-    type: String,
-    default: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr...',
-  },
-
-  /**
-   * An array of image sources to be used in the component.
-   * Each element in the array should be a valid image URL.
-   * The default is two example images from Vuetify's CDN.
-   */
-  imageSources: {
-    type: Array,
-    default: () => [
-      'https://cdn.vuetifyjs.com/images/parallax/material.jpg',
-      'https://cdn.vuetifyjs.com/images/parallax/material.jpg',
-    ],
-  },
-});
-</script>
-
-<style>
-.chat-box-image .v-img__img--cover {
-  border: 1px solid var(--Soft-Concrete-1);
-}
-</style>
+<template>
+  <v-card :elevation="0" class="pa-2 chat-box-image" rounded="lg">
+    <!-- Title slot for dynamic image rendering -->
+    <template #title>
+      <div class="d-flex flex-wrap">
+        <!-- Loop through the imageSources array prop to dynamically display images -->
+        <v-img
+          v-for="(image, index) in imageSources"
+          :key="index"
+          class="ma-2 pa-2"
+          aspect-ratio="16/9"
+          rounded="lg"
+          cover
+          :src="image"
+        ></v-img>
+      </div>
+    </template>
+
+    <!-- Text slot for dynamic paragraph -->
+    <template #text>
+      <p>{{ paragraphText }}</p>
+    </template>
+
+    <!-- Card actions with buttons -->
+    <v-card-actions>
+      <div class="d-flex flex-row align-center ga-3 w-100 justify-center">
+        <Button
+          style="width: 150px"
+          label="Approved"
+          density="default"
+          size="large"
+          @click="$emit('click:approved')"
+        ></Button>
+        <Button
+          style="width: 150px"
+          label="Not Approved"
+          density="default"
+          size="large"
+          variant="outlined"
+          @click="$emit('click:not-approved')"
+        ></Button>
+      </div>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import Button from '@components/Button/Button.vue';
+import { defineProps } from 'vue';
+
+// Define props for the paragraph text and an array of image sources
+const props = defineProps({
+  /**
+   * The text content to be displayed in the paragraph.
+   * Default value is a placeholder text ('Lorem ipsum...').
+   */
+  paragraphText: {
+    type: String,
+    default: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr...',
+  },
+
+  /**
+   * An array of image sources to be used in the component.
+   * Each element in the array should be a valid image URL.
+   * The default is two example images from Vuetify's CDN.
+   */
+  imageSources: {
+    type: Array,
+    default: () => [
+      'https://cdn.vuetifyjs.com/images/parallax/material.jpg',
+      'https://cdn.vuetifyjs.com/images/parallax/material.jpg',
+    ],
+  },
+});
+</script>
+
+<style>
+.chat-box-image .v-img__img--cover {
+  border: 1px solid var(--Soft-Concrete-1);
+}
+</style>

package/src/components/Laboratory/ChatMessage/ChatMessage.vue

@@ -1,113 +1,113 @@
-<template>
-  <div class="d-flex flex-row ga-2 align-end" data-testid="root">
-    <!-- Conditional Rendering: Display the badge before the message if it's an 'income' type -->
-    <template v-if="type === 'income'">
-      <div style="width: 40px; margin-bottom: 20px">
-        <ChatMessageBadge :fabText="fabText" />
-      </div>
-    </template>
-
-    <!-- Message Content -->
-    <v-alert rounded="lg" :color="messageColor">
-      <!-- Title Slot with Username and Time -->
-      <template #title>
-        <div class="d-flex flex-row w-100 align-center mb-1">
-          <slot name="title">
-            <!-- Default Title Content (Username and Time) -->
-            <h5 :style="{ color: textColor }" style="margin-right: auto">
-              {{ username }}
-            </h5>
-            <p class="p-regular" :style="{ color: textColor }">{{ time }}</p>
-          </slot>
-        </div>
-      </template>
-
-      <!-- Text Slot for Message -->
-      <template #text>
-        <slot name="text">
-          <!-- Default Message Content -->
-          <p class="p-regular" :style="{ color: textColor }">
-            {{ message }}
-          </p>
-        </slot>
-      </template>
-    </v-alert>
-
-    <!-- Conditional Rendering: Display the badge after the message if it's an 'outcome' type -->
-    <template v-if="type === 'outcome'">
-      <div style="width: 50px; margin-bottom: 20px">
-        <ChatMessageBadge :fabText="fabText" />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup>
-import { defineProps, computed } from 'vue';
-import ChatMessageBadge from './ChatMessageBadge.vue';
-
-// Define props to control the type, username, time, and message
-const props = defineProps({
-  /**
-   * The type of the message, either 'income' (received) or 'outcome' (sent).
-   * This prop is required and validated to only accept 'income' or 'outcome'.
-   */
-  type: {
-    type: String,
-    required: true,
-    validator: (value) => ['income', 'outcome'].includes(value), // Only allow 'income' or 'outcome'
-  },
-
-  /**
-   * The username of the person sending or receiving the message.
-   * Default is 'Martin Paetz'.
-   */
-  username: {
-    type: String,
-    default: 'Martin Paetz',
-  },
-
-  /**
-   * The time when the message was sent or received.
-   * Default is '11:24'.
-   */
-  time: {
-    type: String,
-    default: '11:24',
-  },
-
-  /**
-   * The text content of the message.
-   * Default is 'Lorem ipsum dolor sit amet...'.
-   */
-  message: {
-    type: String,
-    default: 'Lorem ipsum dolor sit amet...',
-  },
-});
-
-// Compute the background color of the message bubble based on the type
-const messageColor = computed(() =>
-  props.type === 'income' ? 'var(--Dental-Light-Blue--2)' : 'white',
-);
-
-/**
- * Compute the text color of the message based on the type.
- * Income messages will use '--Dental-Blue-0', outcome messages will use 'var(--Dental-Blue-0)'.
- */
-const textColor = computed(() =>
-  props.type === 'income' ? '--Dental-Blue-0' : 'var(--Dental-Blue-0)',
-);
-
-/**
- * Compute the FAB text based on the username by taking the first letter
- * of the first name and the first letter of the last name, and combining them.
- * If the name is not provided or incomplete, default values will be used.
- */
-const fabText = computed(() => {
-  const nameParts = props.username.split(' ');
-  const firstLetter = nameParts[0]?.charAt(0) || ''; // First letter of the first name
-  const lastLetter = nameParts[nameParts.length - 1]?.charAt(0) || ''; // First letter of the last name
-  return `${firstLetter}${lastLetter}`.toUpperCase(); // Combine and convert to uppercase
-});
-</script>
+<template>
+  <div class="d-flex flex-row ga-2 align-end" data-testid="root">
+    <!-- Conditional Rendering: Display the badge before the message if it's an 'income' type -->
+    <template v-if="type === 'income'">
+      <div style="width: 40px; margin-bottom: 20px">
+        <ChatMessageBadge :fabText="fabText" />
+      </div>
+    </template>
+
+    <!-- Message Content -->
+    <v-alert rounded="lg" :color="messageColor">
+      <!-- Title Slot with Username and Time -->
+      <template #title>
+        <div class="d-flex flex-row w-100 align-center mb-1">
+          <slot name="title">
+            <!-- Default Title Content (Username and Time) -->
+            <h5 :style="{ color: textColor }" style="margin-right: auto">
+              {{ username }}
+            </h5>
+            <p class="p-regular" :style="{ color: textColor }">{{ time }}</p>
+          </slot>
+        </div>
+      </template>
+
+      <!-- Text Slot for Message -->
+      <template #text>
+        <slot name="text">
+          <!-- Default Message Content -->
+          <p class="p-regular" :style="{ color: textColor }">
+            {{ message }}
+          </p>
+        </slot>
+      </template>
+    </v-alert>
+
+    <!-- Conditional Rendering: Display the badge after the message if it's an 'outcome' type -->
+    <template v-if="type === 'outcome'">
+      <div style="width: 50px; margin-bottom: 20px">
+        <ChatMessageBadge :fabText="fabText" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+import ChatMessageBadge from './ChatMessageBadge.vue';
+
+// Define props to control the type, username, time, and message
+const props = defineProps({
+  /**
+   * The type of the message, either 'income' (received) or 'outcome' (sent).
+   * This prop is required and validated to only accept 'income' or 'outcome'.
+   */
+  type: {
+    type: String,
+    required: true,
+    validator: (value) => ['income', 'outcome'].includes(value), // Only allow 'income' or 'outcome'
+  },
+
+  /**
+   * The username of the person sending or receiving the message.
+   * Default is 'Martin Paetz'.
+   */
+  username: {
+    type: String,
+    default: 'Martin Paetz',
+  },
+
+  /**
+   * The time when the message was sent or received.
+   * Default is '11:24'.
+   */
+  time: {
+    type: String,
+    default: '11:24',
+  },
+
+  /**
+   * The text content of the message.
+   * Default is 'Lorem ipsum dolor sit amet...'.
+   */
+  message: {
+    type: String,
+    default: 'Lorem ipsum dolor sit amet...',
+  },
+});
+
+// Compute the background color of the message bubble based on the type
+const messageColor = computed(() =>
+  props.type === 'income' ? 'var(--Dental-Light-Blue--2)' : 'white',
+);
+
+/**
+ * Compute the text color of the message based on the type.
+ * Income messages will use '--Dental-Blue-0', outcome messages will use 'var(--Dental-Blue-0)'.
+ */
+const textColor = computed(() =>
+  props.type === 'income' ? '--Dental-Blue-0' : 'var(--Dental-Blue-0)',
+);
+
+/**
+ * Compute the FAB text based on the username by taking the first letter
+ * of the first name and the first letter of the last name, and combining them.
+ * If the name is not provided or incomplete, default values will be used.
+ */
+const fabText = computed(() => {
+  const nameParts = props.username.split(' ');
+  const firstLetter = nameParts[0]?.charAt(0) || ''; // First letter of the first name
+  const lastLetter = nameParts[nameParts.length - 1]?.charAt(0) || ''; // First letter of the last name
+  return `${firstLetter}${lastLetter}`.toUpperCase(); // Combine and convert to uppercase
+});
+</script>

package/src/components/Laboratory/ChatMessage/ChatMessageBadge.css

@@ -1,4 +1,4 @@
-.v-badge__badge {
-  bottom: calc(100% - 25px) !important;
-  left: calc(100% + 20px) !important;
-}
+.v-badge__badge {
+  bottom: calc(100% - 25px) !important;
+  left: calc(100% + 20px) !important;
+}