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

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

@@ -1,99 +1,99 @@
-<template>
-  <v-badge :color="badgeColor">
-    <!-- Badge Slot for Icon -->
-    <template v-slot:badge>
-      <v-icon :color="iconColor" :icon="icon"></v-icon>
-    </template>
-
-    <!-- Floating Action Button (FAB) with Custom Text and Icon -->
-    <v-fab
-      :base-color="fabBaseColor"
-      :color="fabColor"
-      readonly
-      :icon="fabIcon"
-      size="x-small"
-    >
-      <span :style="{ color: textColor }">{{ fabText }}</span>
-    </v-fab>
-  </v-badge>
-</template>
-
-<script setup>
-import { defineProps } from 'vue';
-import './ChatMessageBadge.css';
-
-// Define props for the ChatMessageBadge component
-const props = defineProps({
-  /**
-   * The background color of the badge.
-   * Default is a CSS variable 'var(--Power-Red-0)'.
-   */
-  badgeColor: {
-    type: String,
-    default: 'var(--Power-Red-0)', // Default badge color
-  },
-
-  /**
-   * The name of the icon displayed on the badge.
-   * Default is 'mdi-mail' from the Material Design Icons.
-   */
-  icon: {
-    type: String,
-    default: 'mdi-mail', // Default icon name
-  },
-
-  /**
-   * The color of the icon on the badge.
-   * Default is 'white'.
-   */
-  iconColor: {
-    type: String,
-    default: 'white', // Default icon color
-  },
-
-  /**
-   * The base color of the Floating Action Button (FAB).
-   * Default is 'white'.
-   */
-  fabBaseColor: {
-    type: String,
-    default: 'white', // Default FAB base color
-  },
-
-  /**
-   * The color of the Floating Action Button (FAB).
-   * Default is a CSS variable 'var(--Dental-Blue-0)'.
-   */
-  fabColor: {
-    type: String,
-    default: 'var(--Dental-Blue-0)', // Default FAB color
-  },
-
-  /**
-   * The icon to display on the Floating Action Button (FAB).
-   * Default is '$vuetify', which is Vuetify's default FAB icon.
-   */
-  fabIcon: {
-    type: String,
-    default: '$vuetify', // Default FAB icon
-  },
-
-  /**
-   * The text displayed on the Floating Action Button (FAB).
-   * Default is 'Mj'.
-   */
-  fabText: {
-    type: String,
-    default: 'Mj', // Default FAB text
-  },
-
-  /**
-   * The color of the text inside the Floating Action Button (FAB).
-   * Default is 'white'.
-   */
-  textColor: {
-    type: String,
-    default: 'white', // Default color for the text inside the FAB
-  },
-});
-</script>
+<template>
+  <v-badge :color="badgeColor">
+    <!-- Badge Slot for Icon -->
+    <template v-slot:badge>
+      <v-icon :color="iconColor" :icon="icon"></v-icon>
+    </template>
+
+    <!-- Floating Action Button (FAB) with Custom Text and Icon -->
+    <v-fab
+      :base-color="fabBaseColor"
+      :color="fabColor"
+      readonly
+      :icon="fabIcon"
+      size="x-small"
+    >
+      <span :style="{ color: textColor }">{{ fabText }}</span>
+    </v-fab>
+  </v-badge>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import './ChatMessageBadge.css';
+
+// Define props for the ChatMessageBadge component
+const props = defineProps({
+  /**
+   * The background color of the badge.
+   * Default is a CSS variable 'var(--Power-Red-0)'.
+   */
+  badgeColor: {
+    type: String,
+    default: 'var(--Power-Red-0)', // Default badge color
+  },
+
+  /**
+   * The name of the icon displayed on the badge.
+   * Default is 'mdi-mail' from the Material Design Icons.
+   */
+  icon: {
+    type: String,
+    default: 'mdi-mail', // Default icon name
+  },
+
+  /**
+   * The color of the icon on the badge.
+   * Default is 'white'.
+   */
+  iconColor: {
+    type: String,
+    default: 'white', // Default icon color
+  },
+
+  /**
+   * The base color of the Floating Action Button (FAB).
+   * Default is 'white'.
+   */
+  fabBaseColor: {
+    type: String,
+    default: 'white', // Default FAB base color
+  },
+
+  /**
+   * The color of the Floating Action Button (FAB).
+   * Default is a CSS variable 'var(--Dental-Blue-0)'.
+   */
+  fabColor: {
+    type: String,
+    default: 'var(--Dental-Blue-0)', // Default FAB color
+  },
+
+  /**
+   * The icon to display on the Floating Action Button (FAB).
+   * Default is '$vuetify', which is Vuetify's default FAB icon.
+   */
+  fabIcon: {
+    type: String,
+    default: '$vuetify', // Default FAB icon
+  },
+
+  /**
+   * The text displayed on the Floating Action Button (FAB).
+   * Default is 'Mj'.
+   */
+  fabText: {
+    type: String,
+    default: 'Mj', // Default FAB text
+  },
+
+  /**
+   * The color of the text inside the Floating Action Button (FAB).
+   * Default is 'white'.
+   */
+  textColor: {
+    type: String,
+    default: 'white', // Default color for the text inside the FAB
+  },
+});
+</script>

package/src/components/Laboratory/ChatNotification/ChatNotification.vue

@@ -1,130 +1,130 @@
-<template>
-  <div class="w-100 d-flex flex-column align-center ga-4" data-testid="root">
-    <p class="p-small" style="color: var(--Soft-Concrete-2)">
-      <!-- Display CTA, Date, or Tag Content based on the "type" prop -->
-      <span v-if="type === 'cta'"
-        >Hier klicken um nächsten Arbeitsschritt zu starten</span
-      >
-      <span v-if="type === 'date'">{{ date }}</span>
-      <span v-if="type === 'tag'">{{ date }}</span>
-    </p>
-
-    <div class="w-100 d-flex flex-row align-center ga-4">
-      <!-- Conditionally styled line based on "type" prop -->
-      <div :style="{ backgroundColor: lineColor }" class="line"></div>
-
-      <!-- CTA Section -->
-      <div v-if="type === 'cta'" class="d-flex flex-row ga-2 align-center">
-        <h5>Nachster Schritt</h5>
-        <TagLabel :status="status" />
-      </div>
-
-      <!-- Date Section -->
-      <div v-if="type === 'date'" class="d-flex flex-row ga-2 align-center">
-        <h6 style="color: var(--Soft-Concrete-2)">
-          Es gibt neue Update Notifications
-        </h6>
-      </div>
-
-      <!-- Tag Section -->
-      <div v-if="type === 'tag'" class="d-flex flex-row ga-2 align-center">
-        <h6 style="color: var(--Soft-Concrete-2)">
-          {{ patient }} wurde zurück nach
-        </h6>
-        <TagLabel :status="status" />
-        <h6 style="color: var(--Soft-Concrete-2)">verschoben</h6>
-        <v-icon
-          style="margin-left: -5px"
-          color="var(--Soft-Concrete-2)"
-          icon="heroicons:information-circle"
-        ></v-icon>
-      </div>
-
-      <!-- Default Notification Section -->
-      <div v-if="type === ''" class="d-flex flex-row ga-2 align-center">
-        <h6 style="color: var(--Soft-Concrete-2)">
-          Es gibt neue Update Notifications
-        </h6>
-      </div>
-
-      <!-- Another line with conditional styling -->
-      <div :style="{ backgroundColor: lineColor }" class="line"></div>
-    </div>
-
-    <!-- Button Section for Different Actions -->
-
-    <!-- Start Button for CTA: Emits "click:start" when clicked -->
-    <Button
-      v-if="
-        type === 'cta' &&
-        status !== 'Treatment Done' &&
-        status !== 'Follow-up Case Created'
-      "
-      label="Starten"
-      @click="$emit('click:start')"
-    />
-
-    <!-- Weiter (Further) Button for Follow-up Case Created: Emits "click:further" when clicked -->
-    <Button
-      v-if="type === 'cta' && status === 'Follow-up Case Created'"
-      label="Weiter"
-      @click="$emit('click:further')"
-    />
-
-    <!-- Dual Buttons for TreatmentDone: "Zurücklegen" and "Abschließen" -->
-    <div
-      v-if="type === 'cta' && status === 'Treatment Done'"
-      class="d-flex flex-row align-center justify-between ga-4"
-    >
-      <!-- Cancel Button: Emits "click:cancel" when clicked -->
-      <Button
-        variant="outlined"
-        style="width: 120px"
-        label="Zurücklegen"
-        @click="$emit('click:cancel')"
-      />
-
-      <!-- Finish Button: Emits "click:finish" when clicked -->
-      <Button
-        style="width: 120px"
-        label="Abschließen"
-        @click="$emit('click:finish')"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-import TagLabel from '../TagLabel/TagLabel.vue';
-import Button from '../../Button/Button.vue';
-
-// Define event emitters with the specific format like "click:start", "click:cancel", etc.
-const emit = defineEmits([
-  'click:start',
-  'click:further',
-  'click:cancel',
-  'click:finish',
-]);
-
-const props = defineProps({
-  type: { type: String, default: '' },
-  date: { type: String, default: '' },
-  patient: { type: String, default: 'Patient' },
-  status: { type: String, default: 'Done' },
-});
-
-// Computed property for line color based on "type" prop
-const lineColor = computed(() => {
-  return props.type === 'cta'
-    ? 'var(--Dental-Blue-0)'
-    : 'var(--Soft-Concrete-2)';
-});
-</script>
-
-<style scoped>
-.line {
-  height: 2px;
-  flex-grow: 1;
-}
-</style>
+<template>
+  <div class="w-100 d-flex flex-column align-center ga-4" data-testid="root">
+    <p class="p-small" style="color: var(--Soft-Concrete-2)">
+      <!-- Display CTA, Date, or Tag Content based on the "type" prop -->
+      <span v-if="type === 'cta'"
+        >Hier klicken um nächsten Arbeitsschritt zu starten</span
+      >
+      <span v-if="type === 'date'">{{ date }}</span>
+      <span v-if="type === 'tag'">{{ date }}</span>
+    </p>
+
+    <div class="w-100 d-flex flex-row align-center ga-4">
+      <!-- Conditionally styled line based on "type" prop -->
+      <div :style="{ backgroundColor: lineColor }" class="line"></div>
+
+      <!-- CTA Section -->
+      <div v-if="type === 'cta'" class="d-flex flex-row ga-2 align-center">
+        <h5>Nachster Schritt</h5>
+        <TagLabel :status="status" />
+      </div>
+
+      <!-- Date Section -->
+      <div v-if="type === 'date'" class="d-flex flex-row ga-2 align-center">
+        <h6 style="color: var(--Soft-Concrete-2)">
+          Es gibt neue Update Notifications
+        </h6>
+      </div>
+
+      <!-- Tag Section -->
+      <div v-if="type === 'tag'" class="d-flex flex-row ga-2 align-center">
+        <h6 style="color: var(--Soft-Concrete-2)">
+          {{ patient }} wurde zurück nach
+        </h6>
+        <TagLabel :status="status" />
+        <h6 style="color: var(--Soft-Concrete-2)">verschoben</h6>
+        <v-icon
+          style="margin-left: -5px"
+          color="var(--Soft-Concrete-2)"
+          icon="heroicons:information-circle"
+        ></v-icon>
+      </div>
+
+      <!-- Default Notification Section -->
+      <div v-if="type === ''" class="d-flex flex-row ga-2 align-center">
+        <h6 style="color: var(--Soft-Concrete-2)">
+          Es gibt neue Update Notifications
+        </h6>
+      </div>
+
+      <!-- Another line with conditional styling -->
+      <div :style="{ backgroundColor: lineColor }" class="line"></div>
+    </div>
+
+    <!-- Button Section for Different Actions -->
+
+    <!-- Start Button for CTA: Emits "click:start" when clicked -->
+    <Button
+      v-if="
+        type === 'cta' &&
+        status !== 'Treatment Done' &&
+        status !== 'Follow-up Case Created'
+      "
+      label="Starten"
+      @click="$emit('click:start')"
+    />
+
+    <!-- Weiter (Further) Button for Follow-up Case Created: Emits "click:further" when clicked -->
+    <Button
+      v-if="type === 'cta' && status === 'Follow-up Case Created'"
+      label="Weiter"
+      @click="$emit('click:further')"
+    />
+
+    <!-- Dual Buttons for TreatmentDone: "Zurücklegen" and "Abschließen" -->
+    <div
+      v-if="type === 'cta' && status === 'Treatment Done'"
+      class="d-flex flex-row align-center justify-between ga-4"
+    >
+      <!-- Cancel Button: Emits "click:cancel" when clicked -->
+      <Button
+        variant="outlined"
+        style="width: 120px"
+        label="Zurücklegen"
+        @click="$emit('click:cancel')"
+      />
+
+      <!-- Finish Button: Emits "click:finish" when clicked -->
+      <Button
+        style="width: 120px"
+        label="Abschließen"
+        @click="$emit('click:finish')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import TagLabel from '../TagLabel/TagLabel.vue';
+import Button from '../../Button/Button.vue';
+
+// Define event emitters with the specific format like "click:start", "click:cancel", etc.
+const emit = defineEmits([
+  'click:start',
+  'click:further',
+  'click:cancel',
+  'click:finish',
+]);
+
+const props = defineProps({
+  type: { type: String, default: '' },
+  date: { type: String, default: '' },
+  patient: { type: String, default: 'Patient' },
+  status: { type: String, default: 'Done' },
+});
+
+// Computed property for line color based on "type" prop
+const lineColor = computed(() => {
+  return props.type === 'cta'
+    ? 'var(--Dental-Blue-0)'
+    : 'var(--Soft-Concrete-2)';
+});
+</script>
+
+<style scoped>
+.line {
+  height: 2px;
+  flex-grow: 1;
+}
+</style>

package/src/components/Laboratory/DocumentCard/DocumentCard.css

@@ -1,3 +1,3 @@
-.document-card .v-card-item {
-  padding: 26px 16px !important;
-}
+.document-card .v-card-item {
+  padding: 26px 16px !important;
+}

package/src/components/Laboratory/DocumentCard/DocumentCard.vue

@@ -1,50 +1,50 @@
-<template>
-  <v-card elevation="0" class="document-card" rounded="lg" data-testid="root">
-    <template #title>
-      <div class="d-flex flex-row align-center">
-        <h4 class="mr-auto">{{ title }}</h4>
-        <Button
-          color="var(--Power-Red-0)"
-          @click="handleDownloadAll"
-          label="Download all"
-          variant="text"
-        >
-        </Button>
-      </div>
-    </template>
-
-    <template #text>
-      <div class="d-flex flex-column ga-4">
-        <slot />
-      </div>
-    </template>
-  </v-card>
-</template>
-
-<script setup>
-import './DocumentCard.css';
-import { defineProps, defineEmits } from 'vue';
-import Button from '../../Button/Button.vue';
-
-// Define props for the DocumentCard component
-const props = defineProps({
-  /**
-   * The title displayed at the top of the document card.
-   * Default is 'Attachments'.
-   */
-  title: {
-    type: String,
-    default: 'Attachments',
-  },
-});
-
-// Define the custom event for downloading all attachments
-const emit = defineEmits(['download:all']);
-
-/**
- * Function to emit the 'download-all' event when the "Download all" button is clicked.
- */
-function handleDownloadAll() {
-  emit('download:all');
-}
-</script>
+<template>
+  <v-card elevation="0" class="document-card" rounded="lg" data-testid="root">
+    <template #title>
+      <div class="d-flex flex-row align-center">
+        <h4 class="mr-auto">{{ title }}</h4>
+        <Button
+          color="var(--Power-Red-0)"
+          @click="handleDownloadAll"
+          label="Download all"
+          variant="text"
+        >
+        </Button>
+      </div>
+    </template>
+
+    <template #text>
+      <div class="d-flex flex-column ga-4">
+        <slot />
+      </div>
+    </template>
+  </v-card>
+</template>
+
+<script setup>
+import './DocumentCard.css';
+import { defineProps, defineEmits } from 'vue';
+import Button from '../../Button/Button.vue';
+
+// Define props for the DocumentCard component
+const props = defineProps({
+  /**
+   * The title displayed at the top of the document card.
+   * Default is 'Attachments'.
+   */
+  title: {
+    type: String,
+    default: 'Attachments',
+  },
+});
+
+// Define the custom event for downloading all attachments
+const emit = defineEmits(['download:all']);
+
+/**
+ * Function to emit the 'download-all' event when the "Download all" button is clicked.
+ */
+function handleDownloadAll() {
+  emit('download:all');
+}
+</script>