@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.18

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

package/src/components/Modal/Modal.css

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

@@ -1,23 +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 });
+<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

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

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