@zap-wunschlachen/wl-shared-components 1.0.34 → 1.0.37

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

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

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

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

@@ -1,30 +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>
+<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/Loader/Loader.css

@@ -1,51 +1,71 @@
-/* Loader container */
-.loader-container {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 10;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-}
-
-/* Loader content wrapper */
-.loader-content {
-    text-align: center;
-}
-
-/* Loader spinner SVG */
-.loader-svg {
-    color: #e5e7eb; /* text-gray-200 */
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-    .loader-svg {
-        color: #e5e7eb; /* dark:text-gray-200 */
-    }
-}
-
-/* Rotating arc animation - only applied to the spinning element */
-.loader-spinner-arc {
-    animation: spin 1s linear infinite;
-    transform-origin: center;
-}
-
-/* Spin animation */
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* Ensure focus-visible styles for accessibility */
-div:focus-visible {
-    outline: 2px solid;
-    outline-offset: 2px;
-}
+/* Loader container */
+.loader-container {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+}
+
+/* Loader content wrapper */
+.loader-content {
+    text-align: center;
+}
+
+/* Loader spinner SVG */
+.loader-svg {
+    color: #e5e7eb; /* text-gray-200 */
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .loader-svg {
+        color: #e5e7eb; /* dark:text-gray-200 */
+    }
+}
+
+/* Rotating arc animation - only applied to the spinning element */
+.loader-spinner-arc {
+    animation: spin 1s linear infinite;
+    transform-origin: center;
+}
+
+/* Spin animation */
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Ensure focus-visible styles for accessibility */
+div:focus-visible {
+    outline: 2px solid;
+    outline-offset: 2px;
+}
+
+/* Screen reader only text - visually hidden but accessible */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    .loader-spinner-arc {
+        animation: none;
+    }
+}

package/src/components/Loader/Loader.vue

@@ -5,6 +5,7 @@
         <!-- Spinner and loading text -->
         <div class="loader-content">
             <div role="status">
+                <span class="sr-only">Loading, please wait...</span>
                 <svg
                     aria-hidden="true"
                     class="loader-svg"