@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +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>

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

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

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

@@ -0,0 +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>

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

@@ -0,0 +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 */
+}

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

@@ -0,0 +1,119 @@
+<template>
+  <div class="d-flex flex-column ga-6">
+    <div class="d-flex flex-row ga-10 mx-4">
+      <div class="flex flex-col">
+        <div class="d-flex flex-row align-center ga-1">
+          <p>
+            {{ firstHeader }}
+          </p>
+          <v-icon
+            v-if="urgent"
+            color="var(--Power-Red-0)"
+            icon="heroicons:exclamation-circle"
+          ></v-icon>
+        </div>
+
+        <h3
+          :style="{
+            color: urgent ? 'var(--Power-Red-0)' : 'var(--Dental-Blue-0)',
+          }"
+        >
+          {{ firstDuration }}
+        </h3>
+      </div>
+
+      <div class="flex flex-col">
+        <p>{{ secondHeader }}</p>
+        <h3>{{ secondDuration }}</h3>
+      </div>
+    </div>
+
+    <div style="max-width: 250px" class="d-flex flex-column ga-4 w-100">
+      <div v-for="(step, index) in steps" :key="index" class="step-item">
+        <div class="step-content">
+          <h3>{{ step.date }}</h3>
+          <p>{{ step.description }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import './TimeLineEvent.css';
+import { defineProps } from 'vue';
+
+// Define props for the TimelineEvent component
+const props = defineProps({
+  /**
+   * Indicates if the event is urgent.
+   * When true, it will apply special styling for urgent events.
+   * Default is false.
+   */
+  urgent: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The first header text to display for the timeline event.
+   * Default is 'Projectdauer'.
+   * This prop is required.
+   */
+  firstHeader: {
+    type: String,
+    required: true,
+    default: 'Projectdauer',
+  },
+
+  /**
+   * The second header text to display for the timeline event.
+   * Default is 'Projectdauer'.
+   * This prop is required.
+   */
+  secondHeader: {
+    type: String,
+    required: true,
+    default: 'Projectdauer',
+  },
+
+  /**
+   * The duration text displayed under the first header.
+   * Default is '6 Tage 1 Stunde'.
+   * This prop is required.
+   */
+  firstDuration: {
+    type: String,
+    required: true,
+    default: '6 Tage 1 Stunde',
+  },
+
+  /**
+   * The duration text displayed under the second header.
+   * Default is '6 Tage 1 Stunde'.
+   * This prop is required.
+   */
+  secondDuration: {
+    type: String,
+    required: true,
+    default: '6 Tage 1 Stunde',
+  },
+
+  /**
+   * The steps array containing details about each timeline step.
+   * Each step includes a date and description.
+   * Default is an array with a single step.
+   * This prop is required.
+   */
+  steps: {
+    type: Array,
+    required: true,
+    default: () => [
+      {
+        date: '12. Sept. 2024',
+        description:
+          'Lorem ipsum dolorem exusum latisim beruma estuf kenuria lerumi',
+      },
+    ],
+  },
+});
+</script>

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

@@ -0,0 +1,4 @@
+.v-timeline-divider__dot--size-small {
+  height: 0;
+  width: 200px;
+}

package/src/components/Laboratory/TimeLine/Timeline.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-timeline density="compact" align="start" data-testid="root">
+    <v-timeline-item v-for="(event, index) in events" :key="index" size="big">
+      <!-- Use TagLabel for the icon and bind status dynamically -->
+      <template #icon>
+        <TagLabel :status="event.status" />
+      </template>
+
+      <!-- Use a slot to allow passing content dynamically -->
+      <slot name="content" :event="event"></slot>
+    </v-timeline-item>
+  </v-timeline>
+</template>
+
+<script setup>
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+// Define props for the component
+const props = defineProps({
+  /**
+   * An array of event objects, where each event contains key-value pairs.
+   * The event object structure can vary, hence the use of a generic key-value pair type.
+   * This prop is required.
+   */
+  events: {
+    type: Array, // Array of objects with any key-value pair
+    required: true,
+  },
+});
+</script>

package/src/components/Modal/Modal.css

@@ -0,0 +1,6 @@
+.wl-modal .v-overlay__scrim {
+  fill: rgba(217, 217, 217, 0.55) !important;
+  backdrop-filter: blur(4px) !important;
+  opacity: 1 !important;
+  background: transparent !important;
+}

package/src/components/Modal/Modal.vue

@@ -0,0 +1,23 @@
+<template>
+  <teleport to="body" data-testid="root">
+    <v-dialog class="wl-modal" v-model="dialog" width="auto">
+      <slot name="content" :closeDialog="closeDialog"/>
+    </v-dialog>
+  </teleport>
+</template>
+
+<script setup>
+import { ref, defineExpose } from 'vue';
+import './Modal.css';
+
+const dialog = ref(false);
+
+function openDialog() {
+  dialog.value = true;
+}
+function closeDialog() {
+  dialog.value = false;
+}
+
+defineExpose({ openDialog, closeDialog });
+</script>

package/src/components/NotificationBubble/NotificationBubble.css

@@ -0,0 +1,4 @@
+.notification-bubble.v-btn:hover > .v-btn__overlay {
+  color: var(--Dental-Blue-0) !important;
+  background: var(--Dental-Blue-0) !important;
+}

package/src/components/NotificationBubble/NotificationBubble.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-btn
+    class="notification-bubble"
+    elevation="0"
+    :flat="true"
+    :color="color"
+    :size="size"
+    rounded="xl"
+    :variant="variant"
+    :readonly="readonly"
+    data-testid="root"
+  >
+    <!-- Render either text or vIcon based on the props -->
+    <h4 v-if="text" :style="{ color: textColor }">
+      {{ text }}
+    </h4>
+    <v-icon v-else :size="iconSize" :color="textColor" :icon="icon"></v-icon>
+  </v-btn>
+</template>
+
+<script setup>
+import './NotificationBubble.css';
+
+// Define the component props
+defineProps({
+  /**
+   * The background color of the component.
+   * Can be any valid CSS color string (hex, rgb, etc.).
+   * Default is an empty string, which means no background color will be applied.
+   */
+  color: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * The size of the component.
+   * Can be a string or a number representing the size in pixels or other CSS units.
+   * Default is '30'.
+   */
+  size: {
+    type: [String, Number],
+    default: '30',
+  },
+
+  /**
+   * The text displayed within the component.
+   * If no text is provided, it will be empty by default.
+   */
+  text: {
+    type: String,
+  },
+
+  /**
+   * The color of the text.
+   * Accepts any valid CSS color string (hex, rgb, etc.).
+   * Default is 'var(--Dental-Blue-0)', a custom CSS variable for the text color.
+   */
+  textColor: {
+    type: String,
+    default: 'var(--Dental-Blue-0)',
+  },
+
+  /**
+   * The name or path of the icon to be displayed in the component.
+   * This can be an icon name if using an icon library.
+   */
+  icon: {
+    type: String,
+  },
+
+  /**
+   * The size of the icon.
+   * Can be any valid CSS size value, such as '20' (pixels) by default.
+   */
+  iconSize: {
+    type: String,
+    default: '20',
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+
+  variant: {
+    type: String,
+    default: 'flat',
+  },
+});
+</script>

package/src/components/OtpInput/OtpInput.css

@@ -0,0 +1,39 @@
+.wl-otp-input {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.wl-otp-input .phone-number {
+  text-decoration: underline;
+}
+
+.wl-otp-input .button-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  width: 80%;
+  padding-top: 43px;
+}
+
+.wl-otp-input .title-container {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+}
+
+.wl-otp-input .input-container {
+  padding-top: 60px;
+}
+
+.wl-otp-input .message-container {
+  padding-top: 16px;
+}