@zap-wunschlachen/wl-shared-components 1.0.11 → 1.0.13

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/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>

package/src/components/OtpInput/OtpInput.css

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