@zap-wunschlachen/wl-shared-components 1.0.11 → 1.0.13

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

@@ -1,53 +1,53 @@
-<template>
-  <div class="d-flex flex-column">
-    <div class="d-flex flex-row align-center">
-      <h5 class="flex-grow-1">{{ header }}</h5>
-
-      <NotificationBubble
-        @click="handleIconClick"
-        iconSize="16"
-        color="transparent"
-        icon="heroicons:arrow-down-tray"
-      />
-    </div>
-
-    <!-- Display the subheader passed as a prop -->
-    <p>{{ subheader }}</p>
-  </div>
-</template>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import NotificationBubble from '@components/NotificationBubble/NotificationBubble.vue';
-
-// Define props for the component
-const props = defineProps({
-  /**
-   * The main header text for the component.
-   * This prop is required.
-   */
-  header: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * The subheader text that appears below the main header.
-   * This prop is required.
-   */
-  subheader: {
-    type: String,
-    required: true,
-  },
-});
-
-// Define the custom event for when the icon is clicked
-const emit = defineEmits(['click:icon']);
-
-/**
- * Function to emit the 'click:icon' event when the icon is clicked.
- */
-function handleIconClick() {
-  emit('click:icon');
-}
-</script>
+<template>
+  <div class="d-flex flex-column">
+    <div class="d-flex flex-row align-center">
+      <h5 class="flex-grow-1">{{ header }}</h5>
+
+      <NotificationBubble
+        @click="handleIconClick"
+        iconSize="16"
+        color="transparent"
+        icon="heroicons:arrow-down-tray"
+      />
+    </div>
+
+    <!-- Display the subheader passed as a prop -->
+    <p>{{ subheader }}</p>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import NotificationBubble from '@components/NotificationBubble/NotificationBubble.vue';
+
+// Define props for the component
+const props = defineProps({
+  /**
+   * The main header text for the component.
+   * This prop is required.
+   */
+  header: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * The subheader text that appears below the main header.
+   * This prop is required.
+   */
+  subheader: {
+    type: String,
+    required: true,
+  },
+});
+
+// Define the custom event for when the icon is clicked
+const emit = defineEmits(['click:icon']);
+
+/**
+ * Function to emit the 'click:icon' event when the icon is clicked.
+ */
+function handleIconClick() {
+  emit('click:icon');
+}
+</script>

package/src/components/Laboratory/InfoCard/InfoCard.vue

@@ -1,162 +1,162 @@
-<template>
-  <v-card elevation="0" class="info-card" rounded="lg" data-testid="root">
-    <template #title>
-      <div class="d-flex flex-row">
-        <div class="mr-auto"><slot name="tagLabel"></slot></div>
-        <div class="d-flex flex-row ga-2 align-center">
-          <v-icon
-            @click="handlePencilClick"
-            class="cursor-pointer"
-            size="20"
-            color="var(--Dental-Blue-0)"
-            icon="heroicons:pencil"
-          ></v-icon>
-          <v-icon
-            @click="handlePrinterClick"
-            class="cursor-pointer"
-            size="20"
-            color="var(--Dental-Blue-0)"
-            icon="heroicons:printer"
-          ></v-icon>
-        </div>
-      </div>
-    </template>
-    <template #text>
-      <div class="d-flex flex-column w-100 ga-6">
-        <div class="d-flex flex-row ga-2 w-100">
-          <div class="mr-auto d-flex flex-column ga-2 w-100">
-            <h4>{{ patientName }}</h4>
-            <p>#{{ patientNumber }}</p>
-          </div>
-          <div><slot name="progress"></slot></div>
-        </div>
-        <v-divider thickness="2"></v-divider>
-        <div class="mr-auto d-flex flex-column ga-2 w-100">
-          <h4>{{ header }}</h4>
-          <p>{{ subHeader }}</p>
-          <div class="d-flex flex-row ga-2 align-center w-100">
-            <div class="d-flex flex-row align-center ga-2">
-              <h4>Color</h4>
-              <p>{{ color }}</p>
-            </div>
-            <div class="d-flex flex-row align-center ga-2 mr-auto">
-              <h4>Material</h4>
-              <p>{{ material }}</p>
-            </div>
-            <div class="d-flex flex-row align-center ga-2">
-              <v-icon
-                color="var(--Dental-Blue-0)"
-                icon="heroicons:user-circle"
-              ></v-icon>
-              <p>{{ dentist }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </v-card>
-</template>
-
-<script setup>
-import { defineEmits, defineProps } from 'vue';
-
-// Correct defineEmits function usage to emit events for printer and pencil icon clicks
-const emit = defineEmits(['click:printer', 'click:pencil']);
-
-// Define props for the component
-const props = defineProps({
-  /**
-   * The name of the dentist associated with the task.
-   * Default is 'Martin Paetz'.
-   */
-  dentist: {
-    type: String,
-    default: 'Martin Paetz',
-  },
-
-  /**
-   * The material associated with the task (e.g., the type of material used).
-   * Default is 'color'.
-   */
-  material: {
-    type: String,
-    default: 'color',
-  },
-
-  /**
-   * The color associated with the material or task.
-   * Default is 'material'.
-   */
-  color: {
-    type: String,
-    default: 'material',
-  },
-
-  /**
-   * The name of the patient related to the task or case.
-   * Default is 'Rainer Zufall'.
-   */
-  patientName: {
-    type: String,
-    default: 'Rainer Zufall',
-  },
-
-  /**
-   * The unique patient number associated with the task.
-   * Default is 'numbeer'.
-   */
-  patientNumber: {
-    type: String,
-    default: 'numbeer',
-  },
-
-  /**
-   * The header text for the task or case.
-   * Default is 'header'.
-   */
-  header: {
-    type: String,
-    default: 'header',
-  },
-
-  /**
-   * The sub-header text for the task or case.
-   * Default is 'subHeader'.
-   */
-  subHeader: {
-    type: String,
-    default: 'subHeader',
-  },
-});
-
-// Emit functions to handle button clicks
-
-/**
- * Emit 'click:printer' when the printer icon is clicked.
- */
-const handlePrinterClick = () => {
-  emit('click:printer');
-};
-
-/**
- * Emit 'click:pencil' when the pencil icon is clicked.
- */
-const handlePencilClick = () => {
-  emit('click:pencil');
-};
-</script>
-
-<style>
-.info-card .v-card-item {
-  padding: 16px 16px !important;
-}
-
-.info-card .v-card-text {
-  margin-top: -10px;
-  padding: 16px 20px !important;
-}
-
-.info-card .v-icon {
-  color: var(--Dental-Blue-0);
-}
-</style>
+<template>
+  <v-card elevation="0" class="info-card" rounded="lg" data-testid="root">
+    <template #title>
+      <div class="d-flex flex-row">
+        <div class="mr-auto"><slot name="tagLabel"></slot></div>
+        <div class="d-flex flex-row ga-2 align-center">
+          <v-icon
+            @click="handlePencilClick"
+            class="cursor-pointer"
+            size="20"
+            color="var(--Dental-Blue-0)"
+            icon="heroicons:pencil"
+          ></v-icon>
+          <v-icon
+            @click="handlePrinterClick"
+            class="cursor-pointer"
+            size="20"
+            color="var(--Dental-Blue-0)"
+            icon="heroicons:printer"
+          ></v-icon>
+        </div>
+      </div>
+    </template>
+    <template #text>
+      <div class="d-flex flex-column w-100 ga-6">
+        <div class="d-flex flex-row ga-2 w-100">
+          <div class="mr-auto d-flex flex-column ga-2 w-100">
+            <h4>{{ patientName }}</h4>
+            <p>#{{ patientNumber }}</p>
+          </div>
+          <div><slot name="progress"></slot></div>
+        </div>
+        <v-divider thickness="2"></v-divider>
+        <div class="mr-auto d-flex flex-column ga-2 w-100">
+          <h4>{{ header }}</h4>
+          <p>{{ subHeader }}</p>
+          <div class="d-flex flex-row ga-2 align-center w-100">
+            <div class="d-flex flex-row align-center ga-2">
+              <h4>Color</h4>
+              <p>{{ color }}</p>
+            </div>
+            <div class="d-flex flex-row align-center ga-2 mr-auto">
+              <h4>Material</h4>
+              <p>{{ material }}</p>
+            </div>
+            <div class="d-flex flex-row align-center ga-2">
+              <v-icon
+                color="var(--Dental-Blue-0)"
+                icon="heroicons:user-circle"
+              ></v-icon>
+              <p>{{ dentist }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </v-card>
+</template>
+
+<script setup>
+import { defineEmits, defineProps } from 'vue';
+
+// Correct defineEmits function usage to emit events for printer and pencil icon clicks
+const emit = defineEmits(['click:printer', 'click:pencil']);
+
+// Define props for the component
+const props = defineProps({
+  /**
+   * The name of the dentist associated with the task.
+   * Default is 'Martin Paetz'.
+   */
+  dentist: {
+    type: String,
+    default: 'Martin Paetz',
+  },
+
+  /**
+   * The material associated with the task (e.g., the type of material used).
+   * Default is 'color'.
+   */
+  material: {
+    type: String,
+    default: 'color',
+  },
+
+  /**
+   * The color associated with the material or task.
+   * Default is 'material'.
+   */
+  color: {
+    type: String,
+    default: 'material',
+  },
+
+  /**
+   * The name of the patient related to the task or case.
+   * Default is 'Rainer Zufall'.
+   */
+  patientName: {
+    type: String,
+    default: 'Rainer Zufall',
+  },
+
+  /**
+   * The unique patient number associated with the task.
+   * Default is 'numbeer'.
+   */
+  patientNumber: {
+    type: String,
+    default: 'numbeer',
+  },
+
+  /**
+   * The header text for the task or case.
+   * Default is 'header'.
+   */
+  header: {
+    type: String,
+    default: 'header',
+  },
+
+  /**
+   * The sub-header text for the task or case.
+   * Default is 'subHeader'.
+   */
+  subHeader: {
+    type: String,
+    default: 'subHeader',
+  },
+});
+
+// Emit functions to handle button clicks
+
+/**
+ * Emit 'click:printer' when the printer icon is clicked.
+ */
+const handlePrinterClick = () => {
+  emit('click:printer');
+};
+
+/**
+ * Emit 'click:pencil' when the pencil icon is clicked.
+ */
+const handlePencilClick = () => {
+  emit('click:pencil');
+};
+</script>
+
+<style>
+.info-card .v-card-item {
+  padding: 16px 16px !important;
+}
+
+.info-card .v-card-text {
+  margin-top: -10px;
+  padding: 16px 20px !important;
+}
+
+.info-card .v-icon {
+  color: var(--Dental-Blue-0);
+}
+</style>

package/src/components/Laboratory/MainColumnsBar/MainColumnsBar.vue

@@ -1,102 +1,102 @@
-<template>
-  <div class="d-flex flex-row justify-space-between">
-    <v-divider vertical></v-divider>
-
-    <!-- Draft Button: Emit 'click:draft' -->
-    <v-btn
-      color="var(--Dental-Blue-0)"
-      class="text-none"
-      append-icon="heroicons:arrows-pointing-in"
-      variant="text"
-      @click="emit('click:draft')"
-    >
-      <h4>Draft</h4>
-    </v-btn>
-
-    <v-divider vertical></v-divider>
-
-    <!-- Design Button: Emit 'click:design' -->
-    <v-btn
-      color="var(--Dental-Blue-0)"
-      class="text-none"
-      append-icon="heroicons:arrows-pointing-in"
-      variant="text"
-      @click="emit('click:design')"
-    >
-      <h4>Design</h4>
-    </v-btn>
-
-    <v-divider vertical></v-divider>
-
-    <!-- Production Button: Emit 'click:production' -->
-    <v-btn
-      color="var(--Dental-Blue-0)"
-      class="text-none"
-      append-icon="heroicons:arrows-pointing-in"
-      variant="text"
-      @click="emit('click:production')"
-    >
-      <h4>Production</h4>
-    </v-btn>
-
-    <v-divider vertical></v-divider>
-
-    <!-- Shipping Button: Emit 'click:shipping' -->
-    <v-btn
-      color="var(--Dental-Blue-0)"
-      class="text-none"
-      append-icon="heroicons:arrows-pointing-in"
-      variant="text"
-      @click="emit('click:shipping')"
-    >
-      <h4>Shipping</h4>
-    </v-btn>
-
-    <v-divider vertical></v-divider>
-
-    <!-- Treatment Button: Emit 'click:treatment' -->
-    <v-btn
-      color="var(--Dental-Blue-0)"
-      class="text-none"
-      append-icon="heroicons:arrows-pointing-in"
-      variant="text"
-      @click="emit('click:treatment')"
-    >
-      <h4>Treatment</h4>
-    </v-btn>
-
-    <v-divider vertical></v-divider>
-  </div>
-</template>
-
-<script setup>
-import { defineEmits } from 'vue';
-
-// Define emits for all the buttons representing different stages of a process
-const emit = defineEmits([
-  /**
-   * Emit event when the "Draft" button is clicked.
-   */
-  'click:draft',
-
-  /**
-   * Emit event when the "Design" button is clicked.
-   */
-  'click:design',
-
-  /**
-   * Emit event when the "Production" button is clicked.
-   */
-  'click:production',
-
-  /**
-   * Emit event when the "Shipping" button is clicked.
-   */
-  'click:shipping',
-
-  /**
-   * Emit event when the "Treatment" button is clicked.
-   */
-  'click:treatment',
-]);
-</script>
+<template>
+  <div class="d-flex flex-row justify-space-between">
+    <v-divider vertical></v-divider>
+
+    <!-- Draft Button: Emit 'click:draft' -->
+    <v-btn
+      color="var(--Dental-Blue-0)"
+      class="text-none"
+      append-icon="heroicons:arrows-pointing-in"
+      variant="text"
+      @click="emit('click:draft')"
+    >
+      <h4>Draft</h4>
+    </v-btn>
+
+    <v-divider vertical></v-divider>
+
+    <!-- Design Button: Emit 'click:design' -->
+    <v-btn
+      color="var(--Dental-Blue-0)"
+      class="text-none"
+      append-icon="heroicons:arrows-pointing-in"
+      variant="text"
+      @click="emit('click:design')"
+    >
+      <h4>Design</h4>
+    </v-btn>
+
+    <v-divider vertical></v-divider>
+
+    <!-- Production Button: Emit 'click:production' -->
+    <v-btn
+      color="var(--Dental-Blue-0)"
+      class="text-none"
+      append-icon="heroicons:arrows-pointing-in"
+      variant="text"
+      @click="emit('click:production')"
+    >
+      <h4>Production</h4>
+    </v-btn>
+
+    <v-divider vertical></v-divider>
+
+    <!-- Shipping Button: Emit 'click:shipping' -->
+    <v-btn
+      color="var(--Dental-Blue-0)"
+      class="text-none"
+      append-icon="heroicons:arrows-pointing-in"
+      variant="text"
+      @click="emit('click:shipping')"
+    >
+      <h4>Shipping</h4>
+    </v-btn>
+
+    <v-divider vertical></v-divider>
+
+    <!-- Treatment Button: Emit 'click:treatment' -->
+    <v-btn
+      color="var(--Dental-Blue-0)"
+      class="text-none"
+      append-icon="heroicons:arrows-pointing-in"
+      variant="text"
+      @click="emit('click:treatment')"
+    >
+      <h4>Treatment</h4>
+    </v-btn>
+
+    <v-divider vertical></v-divider>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits } from 'vue';
+
+// Define emits for all the buttons representing different stages of a process
+const emit = defineEmits([
+  /**
+   * Emit event when the "Draft" button is clicked.
+   */
+  'click:draft',
+
+  /**
+   * Emit event when the "Design" button is clicked.
+   */
+  'click:design',
+
+  /**
+   * Emit event when the "Production" button is clicked.
+   */
+  'click:production',
+
+  /**
+   * Emit event when the "Shipping" button is clicked.
+   */
+  'click:shipping',
+
+  /**
+   * Emit event when the "Treatment" button is clicked.
+   */
+  'click:treatment',
+]);
+</script>