@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.6

package/src/components/Laboratory/TagLabelGroup/TagLabelGroup.vue

@@ -1,97 +1,97 @@
-<template>
-  <div class="tag-label-group d-flex ga-1 flex-row align-center" data-testid="root">
-    <!-- Dynamically render icons before the label -->
-    <p>{{ text }}</p>
-    <template v-for="(icon, index) in iconsBefore" :key="'before-' + index">
-      <v-icon
-        :size="iconSize"
-        icon="heroicons:outline"
-        :style="getIconStyle(icon)"
-      ></v-icon>
-    </template>
-
-    <!-- TagLabel -->
-    <TagLabel :status="status" />
-
-    <!-- Dynamically render icons after the label -->
-    <template v-for="(icon, index) in iconsAfter" :key="'after-' + index">
-      <v-icon
-        :size="iconSize"
-        icon="heroicons:outline"
-        :style="getIconStyle(icon)"
-      ></v-icon>
-    </template>
-  </div>
-</template>
-
-<script setup>
-import { defineProps, computed } from 'vue';
-import TagLabel from '../TagLabel/TagLabel.vue';
-
-// Define props to control the number of icons, their colors, and the label status
-const props = defineProps({
-  /**
-   * The text to be displayed alongside the icons.
-   * Default is an empty string.
-   */
-  text: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * The status label to be displayed, such as 'Done', 'In Progress', etc.
-   * Default is 'Done'.
-   */
-  status: {
-    type: String,
-    default: 'Done',
-  },
-
-  /**
-   * The size of the icons displayed before and after the text.
-   * Default is '30' (typically in pixels).
-   */
-  iconSize: {
-    type: String,
-    default: '29', // Default size of the icons
-  },
-
-  /**
-   * An array of objects representing the icons to be displayed before the text.
-   * Each icon object can have properties like backgroundColor and borderColor.
-   * Default is an empty array.
-   */
-  iconsBefore: {
-    type: Array,
-    default: () => [], // Default empty array for icons before the text
-  },
-
-  /**
-   * An array of objects representing the icons to be displayed after the text.
-   * Each icon object can have properties like backgroundColor and borderColor.
-   * Default is an empty array.
-   */
-  iconsAfter: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-// Function to compute the inline style for each icon based on its properties
-const getIconStyle = (icon) => {
-  return {
-    '--v-icon-fill': icon.backgroundColor, // Set custom background color
-    '--v-icon-stroke': icon.borderColor, // Set custom border color
-  };
-};
-</script>
-
-<style>
-/* Use the following CSS to target the internal SVG rect rendered by v-icon */
-.tag-label-group .v-icon rect {
-  fill: var(--v-icon-fill); /* Dynamic background color */
-  stroke: var(--v-icon-stroke); /* Dynamic border color */
-  stroke-width: 0.5px; /* Adjust stroke width if needed */
-}
-</style>
+<template>
+  <div class="tag-label-group d-flex ga-1 flex-row align-center" data-testid="root">
+    <!-- Dynamically render icons before the label -->
+    <p>{{ text }}</p>
+    <template v-for="(icon, index) in iconsBefore" :key="'before-' + index">
+      <v-icon
+        :size="iconSize"
+        icon="heroicons:outline"
+        :style="getIconStyle(icon)"
+      ></v-icon>
+    </template>
+
+    <!-- TagLabel -->
+    <TagLabel :status="status" />
+
+    <!-- Dynamically render icons after the label -->
+    <template v-for="(icon, index) in iconsAfter" :key="'after-' + index">
+      <v-icon
+        :size="iconSize"
+        icon="heroicons:outline"
+        :style="getIconStyle(icon)"
+      ></v-icon>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+import TagLabel from '../TagLabel/TagLabel.vue';
+
+// Define props to control the number of icons, their colors, and the label status
+const props = defineProps({
+  /**
+   * The text to be displayed alongside the icons.
+   * Default is an empty string.
+   */
+  text: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * The status label to be displayed, such as 'Done', 'In Progress', etc.
+   * Default is 'Done'.
+   */
+  status: {
+    type: String,
+    default: 'Done',
+  },
+
+  /**
+   * The size of the icons displayed before and after the text.
+   * Default is '30' (typically in pixels).
+   */
+  iconSize: {
+    type: String,
+    default: '29', // Default size of the icons
+  },
+
+  /**
+   * An array of objects representing the icons to be displayed before the text.
+   * Each icon object can have properties like backgroundColor and borderColor.
+   * Default is an empty array.
+   */
+  iconsBefore: {
+    type: Array,
+    default: () => [], // Default empty array for icons before the text
+  },
+
+  /**
+   * An array of objects representing the icons to be displayed after the text.
+   * Each icon object can have properties like backgroundColor and borderColor.
+   * Default is an empty array.
+   */
+  iconsAfter: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+// Function to compute the inline style for each icon based on its properties
+const getIconStyle = (icon) => {
+  return {
+    '--v-icon-fill': icon.backgroundColor, // Set custom background color
+    '--v-icon-stroke': icon.borderColor, // Set custom border color
+  };
+};
+</script>
+
+<style>
+/* Use the following CSS to target the internal SVG rect rendered by v-icon */
+.tag-label-group .v-icon rect {
+  fill: var(--v-icon-fill); /* Dynamic background color */
+  stroke: var(--v-icon-stroke); /* Dynamic border color */
+  stroke-width: 0.5px; /* Adjust stroke width if needed */
+}
+</style>

package/src/components/Laboratory/TicketCard/TicketCard.css

@@ -1,3 +1,3 @@
-.ticket-card .v-btn--size-default {
-  padding: 0 4px;
-}
+.ticket-card .v-btn--size-default {
+  padding: 0 4px;
+}

package/src/components/Laboratory/TicketCard/TicketCard.vue

@@ -1,143 +1,143 @@
-<template>
-  <v-hover data-testid="root">
-    <template v-slot:default="{ isHovering, props }">
-      <v-card
-        @click="toggle"
-        v-bind="props"
-        color="white"
-        rounded="lg"
-        class="ticket-card"
-        variant="outlined"
-        :style="{
-          background: 'white',
-          borderWidth: isHovering || isSelected ? '2px' : '1px',
-          borderColor: isSelected
-            ? 'var(--Dental-Blue-0)'
-            : isHovering
-              ? 'var(--Dental-Light-Blue-1)'
-              : 'var(--Soft-Concrete-2)',
-        }"
-      >
-        <template #title>
-          <div class="d-flex flex-row align-center py-1 ga-2">
-            <!-- TagLabel uses dynamic status prop -->
-            <TagLabel :status="status" />
-            <!-- Dynamic number displayed in the fab button -->
-
-            <NotificationBubble
-              v-if="number"
-              textColor="white"
-              color="pink"
-              :text="number"
-              size="28"
-              :readonly="true"
-            />
-            <!-- Dynamic tag number -->
-            <p
-              :style="{ color: 'var(--Soft-Concrete-2)' }"
-              class="p-medium ml-auto"
-            >
-              #{{ tagNumber }}
-            </p>
-          </div>
-        </template>
-
-        <template #text>
-          <div class="d-flex flex-column ga-2 align-start">
-            <!-- Dynamic name -->
-            <h4>{{ name }}</h4>
-            <!-- Dynamic description -->
-            <p>{{ description }}</p>
-            <Button
-              v-if="taskNumber"
-              variant="text"
-              prependIcon="heroicons:inbox"
-              :label="taskNumber"
-              readonly
-            />
-          </div>
-        </template>
-      </v-card>
-    </template>
-  </v-hover>
-</template>
-
-<script setup>
-import './TicketCard.css';
-
-import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
-import NotificationBubble from '@components/NotificationBubble/NotificationBubble.vue';
-import { defineProps } from 'vue';
-import Button from '@components/Button/Button.vue';
-
-// Define props to make the component generic
-defineProps({
-  /**
-   * The current status of the ticket (e.g., 'Open', 'In Progress', 'Closed').
-   * This prop is required.
-   */
-  status: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * The ticket number or ID.
-   * Can be either a string or a number. Default is '1'.
-   */
-  number: {
-    type: [String, Number],
-  },
-
-  /**
-   * The tag number associated with the ticket.
-   * Can be either a string or a number. This prop is required.
-   */
-  tagNumber: {
-    type: [String, Number],
-    required: true,
-  },
-
-  /**
-   * The name associated with the ticket (e.g., the customer or task name).
-   * This prop is required.
-   */
-  name: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * A brief description of the ticket.
-   * This prop is required and provides additional context or details.
-   */
-  description: {
-    type: String,
-    required: true,
-  },
-  /**
-   * Indicates whether the current item is selected within the `v-item-group`.
-   * When true, this applies the selected styling (e.g., specific border color).
-   * This prop is controlled by the parent component and toggled by the `toggle` function.
-   */
-  isSelected: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * A function to toggle the selected state of the card within the `v-item-group`.
-   * This function is triggered on the card’s click event to allow selection toggling.
-   */
-  toggle: Function,
-
-  /**
-   * The task number associated with this card, shown as a button label if specified.
-   * When provided, the button is displayed with this label.
-   */
-  taskNumber: {
-    type: String,
-    default: null,
-  },
-});
-</script>
+<template>
+  <v-hover data-testid="root">
+    <template v-slot:default="{ isHovering, props }">
+      <v-card
+        @click="toggle"
+        v-bind="props"
+        color="white"
+        rounded="lg"
+        class="ticket-card"
+        variant="outlined"
+        :style="{
+          background: 'white',
+          borderWidth: isHovering || isSelected ? '2px' : '1px',
+          borderColor: isSelected
+            ? 'var(--Dental-Blue-0)'
+            : isHovering
+              ? 'var(--Dental-Light-Blue-1)'
+              : 'var(--Soft-Concrete-2)',
+        }"
+      >
+        <template #title>
+          <div class="d-flex flex-row align-center py-1 ga-2">
+            <!-- TagLabel uses dynamic status prop -->
+            <TagLabel :status="status" />
+            <!-- Dynamic number displayed in the fab button -->
+
+            <NotificationBubble
+              v-if="number"
+              textColor="white"
+              color="pink"
+              :text="number"
+              size="28"
+              :readonly="true"
+            />
+            <!-- Dynamic tag number -->
+            <p
+              :style="{ color: 'var(--Soft-Concrete-2)' }"
+              class="p-medium ml-auto"
+            >
+              #{{ tagNumber }}
+            </p>
+          </div>
+        </template>
+
+        <template #text>
+          <div class="d-flex flex-column ga-2 align-start">
+            <!-- Dynamic name -->
+            <h4>{{ name }}</h4>
+            <!-- Dynamic description -->
+            <p>{{ description }}</p>
+            <Button
+              v-if="taskNumber"
+              variant="text"
+              prependIcon="heroicons:inbox"
+              :label="taskNumber"
+              readonly
+            />
+          </div>
+        </template>
+      </v-card>
+    </template>
+  </v-hover>
+</template>
+
+<script setup>
+import './TicketCard.css';
+
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+import NotificationBubble from '@components/NotificationBubble/NotificationBubble.vue';
+import { defineProps } from 'vue';
+import Button from '@components/Button/Button.vue';
+
+// Define props to make the component generic
+defineProps({
+  /**
+   * The current status of the ticket (e.g., 'Open', 'In Progress', 'Closed').
+   * This prop is required.
+   */
+  status: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * The ticket number or ID.
+   * Can be either a string or a number. Default is '1'.
+   */
+  number: {
+    type: [String, Number],
+  },
+
+  /**
+   * The tag number associated with the ticket.
+   * Can be either a string or a number. This prop is required.
+   */
+  tagNumber: {
+    type: [String, Number],
+    required: true,
+  },
+
+  /**
+   * The name associated with the ticket (e.g., the customer or task name).
+   * This prop is required.
+   */
+  name: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * A brief description of the ticket.
+   * This prop is required and provides additional context or details.
+   */
+  description: {
+    type: String,
+    required: true,
+  },
+  /**
+   * Indicates whether the current item is selected within the `v-item-group`.
+   * When true, this applies the selected styling (e.g., specific border color).
+   * This prop is controlled by the parent component and toggled by the `toggle` function.
+   */
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * A function to toggle the selected state of the card within the `v-item-group`.
+   * This function is triggered on the card’s click event to allow selection toggling.
+   */
+  toggle: Function,
+
+  /**
+   * The task number associated with this card, shown as a button label if specified.
+   * When provided, the button is displayed with this label.
+   */
+  taskNumber: {
+    type: String,
+    default: null,
+  },
+});
+</script>

package/src/components/Laboratory/TimeLine/TimeLineEvent.css

@@ -1,18 +1,18 @@
-/* Step content styling */
-.step-item {
-  position: relative;
-  padding-left: 20px; /* Space for the point */
-  margin-bottom: 10px;
-}
-
-/* Point before each step */
-.step-item::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 8px; /* Adjust based on the font-size to vertically center */
-  width: 5px;
-  height: 5px;
-  background-color: var(--Dental-Blue-0); /* Customize this color */
-  border-radius: 50%; /* Makes it a circle */
-}
+/* Step content styling */
+.step-item {
+  position: relative;
+  padding-left: 20px; /* Space for the point */
+  margin-bottom: 10px;
+}
+
+/* Point before each step */
+.step-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 8px; /* Adjust based on the font-size to vertically center */
+  width: 5px;
+  height: 5px;
+  background-color: var(--Dental-Blue-0); /* Customize this color */
+  border-radius: 50%; /* Makes it a circle */
+}