@zap-wunschlachen/wl-shared-components 1.0.15 → 1.0.17

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

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

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

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