@zap-wunschlachen/wl-shared-components 1.0.12 → 1.0.14

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

@@ -1,152 +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>
+<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

@@ -1,33 +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;
-}
+.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

@@ -1,75 +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>
+<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>