@zap-wunschlachen/wl-shared-components 1.0.0

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

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

package/src/components/Laboratory/ProgressCircle/ProgressCircle.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="custom-icon-wrapper" data-testid="root">
+    <!-- Your customized SVG that changes based on props -->
+    <svg
+      :width="size"
+      viewBox="0 0 41 45"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <!-- Segment 1 -->
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        :fill="bgColors[0]"
+        :stroke="borderColors[0]"
+        d="M34.7023 16.1214C32.7846 10.4974 27.6246 6.37999 21.4629 5.99002L21.7787 1C30.0113 1.52105 36.8805 7.01704 39.4347 14.5078L34.7023 16.1214Z"
+        stroke-width="0.5"
+        stroke-miterlimit="10"
+        transform="rotate(0, 20, 21)"
+      />
+
+      <!-- Segment 2 -->
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        :fill="bgColors[1]"
+        :stroke="borderColors[1]"
+        d="M34.7023 16.1214C32.7846 10.4974 27.6246 6.37999 21.4629 5.99002L21.7787 1C30.0113 1.52105 36.8805 7.01704 39.4347 14.5078L34.7023 16.1214Z"
+        stroke-width="0.5"
+        stroke-miterlimit="10"
+        transform="rotate(72, 20, 21)"
+      />
+
+      <!-- Segment 3 -->
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        :fill="bgColors[2]"
+        :stroke="borderColors[2]"
+        d="M34.7023 16.1214C32.7846 10.4974 27.6246 6.37999 21.4629 5.99002L21.7787 1C30.0113 1.52105 36.8805 7.01704 39.4347 14.5078L34.7023 16.1214Z"
+        stroke-width="0.5"
+        stroke-miterlimit="10"
+        transform="rotate(144, 20, 21)"
+      />
+
+      <!-- Segment 4 -->
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        :fill="bgColors[3]"
+        :stroke="borderColors[3]"
+        d="M34.7023 16.1214C32.7846 10.4974 27.6246 6.37999 21.4629 5.99002L21.7787 1C30.0113 1.52105 36.8805 7.01704 39.4347 14.5078L34.7023 16.1214Z"
+        stroke-width="0.5"
+        stroke-miterlimit="10"
+        transform="rotate(216, 20.3, 21)"
+      />
+
+      <!-- Segment 5 -->
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        :fill="bgColors[4]"
+        :stroke="borderColors[4]"
+        d="M34.7023 16.1214C32.7846 10.4974 27.6246 6.37999 21.4629 5.99002L21.7787 1C30.0113 1.52105 36.8805 7.01704 39.4347 14.5078L34.7023 16.1214Z"
+        stroke-width="0.5"
+        stroke-miterlimit="10"
+        transform="rotate(288, 20, 21)"
+      />
+
+      <!-- Add your text in the center of the circle -->
+      <text
+        x="50%"
+        y="50%"
+        text-anchor="middle"
+        dominant-baseline="middle"
+        font-size="16"
+        fill="var(--Check-0)"
+      >
+        {{ text }}
+      </text>
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+// Define props to accept colors for each segment
+const props = defineProps({
+  /**
+   * The size of the component, typically used for defining width and height.
+   * Default is '40'.
+   */
+  size: {
+    type: String,
+    default: '40',
+  },
+
+  /**
+   * The text to be displayed inside the component.
+   * Default is '1'.
+   */
+  text: {
+    type: String,
+    default: '1',
+  },
+
+  /**
+   * An array of background colors for each segment of the component.
+   * Each entry corresponds to a segment's background color.
+   * Default is an array of 'var(--Soft-Concrete-1)' for five segments.
+   * This prop is required.
+   */
+  bgColors: {
+    type: Array,
+    required: true,
+    default: () => [
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+    ], // Default colors for each segment
+  },
+
+  /**
+   * An array of border (stroke) colors for each segment of the component.
+   * Each entry corresponds to a segment's border color.
+   * Default is an array of 'transparent' for five segments.
+   * This prop is required.
+   */
+  borderColors: {
+    type: Array,
+    required: true,
+    default: () => [
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+    ], // Default stroke colors
+  },
+});
+</script>
+
+<style scoped>
+.custom-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/src/components/Laboratory/ProgressLinear/ProgressLinear.css

@@ -0,0 +1,33 @@
+.progress-container {
+  position: relative;
+  width: 100%;
+  height: 30px;
+}
+
+.custom-progress-linear {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+}
+
+.progress-label {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+
+.start-icon {
+  position: absolute;
+  transform: translateY(-50%);
+  font-size: 20px;
+  left: -10px;
+  z-index: 10;
+}
+
+.end-icon {
+  position: absolute;
+  right: 0;
+  transform: translateY(-50%);
+  font-size: 20px;
+}

package/src/components/Laboratory/ProgressLinear/ProgressLinear.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="d-flex flex-column align-center ga-6">
+    <div class="d-flex flex-row ga-2">
+      <p>Geschätzte Projektdauer ca.</p>
+      <h3>{{ date }}</h3>
+    </div>
+    <div v-if="status != 'Treatment Done'" class="progress-container">
+      <v-icon
+        size="25"
+        class="start-icon"
+        icon="heroicons:solid-arrow-right"
+      ></v-icon>
+
+      <v-progress-linear
+        :model-value="progressValue"
+        :height="3"
+        color="var(--Check-0)"
+        bg-color="var(--Warm-Light-3)"
+        bg-opacity="0.55"
+        class="custom-progress-linear"
+      ></v-progress-linear>
+
+      <TagLabel
+        class="progress-label"
+        :style="{ left: `${progressValue}%` }"
+        :status="status"
+      />
+
+      <v-icon
+        size="30"
+        class="end-icon"
+        icon="heroicons:filled-circle"
+      ></v-icon>
+    </div>
+    <TagLabel v-else class="w-100" :status="status" />
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+import SolidArrowRight from '@components/Icons/SolidArrowRight.vue';
+import Circle from '@components/Icons/Circle.vue';
+import './ProgressLinear.css';
+
+// Define props for date, progress value, and status
+const props = defineProps({
+  /**
+   * The date associated with the progress (e.g., start or completion date).
+   * Default is an empty string.
+   */
+  date: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * The numeric value representing the progress percentage (0-100).
+   * Default is 55.
+   */
+  progressValue: {
+    type: Number,
+    default: 55,
+  },
+
+  /**
+   * The current status of the progress (e.g., 'In Progress', 'Done').
+   * Default is 'Done'.
+   */
+  status: {
+    type: String,
+    default: 'Done',
+  },
+});
+</script>

package/src/components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue

@@ -0,0 +1,92 @@
+<template>
+  <v-sheet
+    style="border-color: var(--Dental-Blue-0)"
+    border
+    rounded
+    :elevation="0"
+  >
+    <div class="d-flex flex-row justify-space-between">
+      <!-- Emit 'click:last' when the 'Vorheriges Board' button is clicked -->
+      <v-btn
+        :rounded="false"
+        color="var(--Dental-Blue-0)"
+        class="text-none"
+        prepend-icon="heroicons:chevron-left"
+        variant="text"
+        :disabled="disableLast"
+        @click="emit('click:last')"
+      >
+        <p>Vorheriges Board</p>
+      </v-btn>
+
+      <!-- The draft board title is now dynamic with the 'title' prop -->
+      <v-btn
+        readonly
+        color="var(--Dental-Blue-0)"
+        class="text-none"
+        prepend-icon="heroicons:arrows-pointing-in"
+        variant="text"
+      >
+        <h4>{{ title }}</h4>
+      </v-btn>
+
+      <!-- Emit 'click:next' when the 'Nächstes Board' button is clicked -->
+      <v-btn
+        :rounded="false"
+        color="var(--Dental-Blue-0)"
+        class="text-none"
+        append-icon="heroicons:chevron-right"
+        variant="text"
+        :disabled="disableNext"
+        @click="emit('click:next')"
+      >
+        <p>Nächstes Board</p>
+      </v-btn>
+    </div>
+  </v-sheet>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+// Define props for the component
+const props = defineProps({
+  /**
+   * The title to be displayed for the draft.
+   * Default is 'Title'.
+   */
+  title: {
+    type: String,
+    default: 'Title',
+  },
+
+  /**
+   * Disable the "Vorheriges Board" button when true.
+   */
+  disableLast: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Disable the "Nächstes Board" button when true.
+   */
+  disableNext: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// Emit events for 'click:last' and 'click:next' navigation
+const emit = defineEmits([
+  /**
+   * Emit event when the "Last" button is clicked.
+   */
+  'click:last',
+
+  /**
+   * Emit event when the "Next" button is clicked.
+   */
+  'click:next',
+]);
+</script>

package/src/components/Laboratory/StatusNotification/StatusNotification.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="d-flex flex-column ga-4 align-center">
+    <div class="d-flex flex-column ga-1 align-center">
+      <h6 style="color: var(--Soft-Concrete-2)">
+        {{ header }}
+      </h6>
+      <p class="p-small" style="color: var(--Soft-Concrete-2)">
+        {{ subheader }}
+      </p>
+    </div>
+
+    <TagLabel :status="status" />
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import TagLabel from '../TagLabel/TagLabel.vue';
+
+// Define props for header, subheader, and status
+const props = defineProps({
+  /**
+   * The main header text of the component.
+   * Default is 'Default Header'.
+   */
+  header: {
+    type: String,
+    default: 'Default Header',
+  },
+
+  /**
+   * The subheader text that appears below the main header.
+   * Default is 'Default Subheader'.
+   */
+  subheader: {
+    type: String,
+    default: 'Default Subheader',
+  },
+
+  /**
+   * The status text, typically used to represent the current state (e.g., 'Draft', 'Published').
+   * Default is 'Draft'.
+   */
+  status: {
+    type: String,
+    default: 'Draft',
+  },
+});
+</script>

package/src/components/Laboratory/TagLabel/TagLabel.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-btn
+    :style="{
+      backgroundColor: `var(--${currentColors.backgroundColor})`,
+      border: `1.4px solid var(--${currentColors.borderColor}) !important`,
+    }"
+    readonly
+    size="small"
+    rounded="lg"
+    variant="outlined"
+    data-testid="root"
+  >
+    <p
+      :style="{
+        color: `var(--${currentColors.textColor})`,
+      }"
+      class="p-small text-none"
+    >
+      {{ statusText }}
+    </p>
+  </v-btn>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * The current status of the item (e.g., 'Draft', 'Done', 'Ready').
+   * This prop is required and should be a string.
+   */
+  status: {
+    type: String,
+    required: true,
+  },
+});
+
+// Define color schemes for groups of statuses
+const colorGroups = {
+  blueScheme: {
+    statuses: [, 'Draft', 'Proof'],
+    colors: {
+      backgroundColor: 'Dental-Blue--5',
+      borderColor: 'Dental-Blue-0',
+      textColor: 'Dental-Blue-0',
+    },
+  },
+  redScheme: {
+    statuses: [
+      'Ready',
+      'Design Ready',
+      'Production Ready',
+      'Ready for Treatment',
+    ],
+    colors: {
+      backgroundColor: 'Power-Red--4',
+      borderColor: 'Dental-Blue-0',
+      textColor: 'Dental-Blue-0',
+    },
+  },
+  yellowScheme: {
+    statuses: [
+      'Started',
+      'Dispatched',
+      'Design Started',
+      'Production Started',
+      'Shipping Dispatched',
+    ],
+    colors: {
+      backgroundColor: 'Treatment-Yellow',
+      borderColor: 'Warning-1',
+      textColor: 'Warning-1',
+    },
+  },
+  greenScheme: {
+    statuses: ['Treatment Done', 'Done', 'Follow-up Case Created', 'Arrived'],
+    colors: {
+      backgroundColor: 'Check--1',
+      borderColor: 'Check-0',
+      textColor: 'Check-0',
+    },
+  },
+  skyBlueScheme: {
+    statuses: ['Took', 'Design Proof', 'Treatment Took'], // New scheme specifically for 'Took' status
+    colors: {
+      backgroundColor: 'Treatment-SkyBlue',
+      borderColor: 'Dental-Blue-0',
+      textColor: 'Dental-Blue-0',
+    },
+  },
+  RedWhiteScheme: {
+    statuses: ['Warning'], // New scheme specifically for 'Took' status
+    colors: {
+      backgroundColor: 'Power-Red--4',
+      borderColor: 'Power-Red-0',
+      textColor: 'Power-Red-0',
+    },
+  },
+};
+
+// Default color configuration for unknown status
+const defaultColor = {
+  backgroundColor: 'Check-0',
+  borderColor: 'Check-1',
+  textColor: 'Check-1',
+};
+
+// Computed property to find the color scheme based on status
+const currentColors = computed(() => {
+  // Find the group containing the current status
+  const group = Object.values(colorGroups).find((group) =>
+    group.statuses.includes(props.status),
+  );
+  // Return the colors from the group, or the default colors if not found
+  return group ? group.colors : defaultColor;
+});
+
+// Set the text to the status itself
+const statusText = computed(() => props.status || 'Unknown');
+</script>
+
+<style scoped>
+.v-btn {
+  padding: 6px 8px !important;
+}
+</style>