@zap-wunschlachen/wl-shared-components 1.0.0

package/src/components/Input/Input.css

@@ -0,0 +1,187 @@
+.v-icon {
+  opacity: 1 !important;
+}
+
+.v-input__details {
+  color: var(--Dental-Blue-0);
+  opacity: 1 !important;
+}
+
+/* -------- Active and Focused Border States -------- */
+/* Custom border color for v-text-field */
+.v-field__outline {
+  opacity: 1; /* Set the opacity to 1 */
+  --v-field-border-opacity: 1; /* Ensure full opacity for the border */
+  color: var(--Soft-Concrete-1); /*  border color */
+}
+
+/* Active state border color */
+.v-field--active .v-field__outline {
+  color: var(--Soft-Concrete-1); /* Active border color */
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+/* Focused state border color */
+.v-field--focused .v-field__outline {
+  color: var(--Dental-Light-Blue-1); /* Focused border color */
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+/* Default placeholder color */
+.v-field__input::placeholder {
+  color: var(--Dental-Blue--4);
+  opacity: 1 !important;
+}
+
+.v-field--active .v-field__input::placeholder {
+  color: var(--Dental-Blue--4);
+  opacity: 1;
+}
+
+/* Default input text color */
+.v-field__input {
+  color: var(--Dental-Blue--4) !important;
+}
+
+.v-field--active .v-field__input {
+  color: var(--Dental-Blue-0) !important;
+}
+
+.v-field--focused .v-field__input {
+  color: var(--Dental-Blue-0) !important;
+}
+
+/* -------- Success State -------- */
+/* Text and border color for success */
+.is-success .v-field__input {
+  color: var(--Success-Green-1) !important; /* Text color */
+}
+
+/* Success state outline */
+.is-success .v-field__outline,
+.is-success .v-field__outline__start,
+.is-success .v-field__outline__end {
+  border-color: var(
+    --Success-Green-0
+  ) !important ; /* Apply success border color */
+  opacity: 1; /* Ensure visibility */
+}
+
+/* Also, for good measure, let's ensure the focus state works too */
+.is-success .v-field--focused .v-field__outline {
+  border-color: var(
+    --Success-Green-0
+  ); /* Apply success border color when focused */
+}
+
+/* Success state placeholder */
+.is-success .v-field__input::placeholder {
+  color: var(--Success-Green-1); /* Placeholder color */
+}
+
+.is-success .v-field--variant-outlined {
+  background: var(--Success-Green--1, #f3fdfc);
+}
+
+.is-success .v-icon {
+  color: var(--Success-Green-0); /* Your custom color */
+  opacity: 1;
+}
+
+.is-success .v-input__details {
+  color: var(--Success-Green-0);
+  opacity: 1 !important;
+}
+
+/* -------- Error State -------- */
+/* Text and border color for error */
+.is-error .v-field__input {
+  color: var(--Error-Red-0) !important; /* Text color */
+  opacity: 1;
+}
+
+/* Error border color */
+.is-error .v-field__outline,
+.is-error .v-field__outline__start,
+.is-error .v-field__outline__end {
+  border-color: var(--Error-Red-0) !important; /* Error border color */
+  opacity: 1; /* Ensure visibility */
+}
+
+/* Error state placeholder */
+.is-error .v-field__input::placeholder {
+  color: var(--Error-Red-0); /* Placeholder color */
+}
+
+.is-error .v-field--variant-outlined {
+  background: var(--Light-Gum--3, #fef9f9);
+}
+
+.is-error .v-icon {
+  color: var(--Error-Red-0); /* Your custom color */
+  opacity: 1;
+}
+
+.is-error .v-input__details {
+  color: var(--Error-Red-0);
+  opacity: 1;
+}
+
+/* -------- Warning State -------- */
+/* Text and border color for warning */
+.is-warning .v-field__input {
+  color: var(--Warm-Light-3) !important; /* Text color */
+}
+
+/* Warning border color */
+.is-warning .v-field__outline,
+.is-warning .v-field__outline__start,
+.is-warning .v-field__outline__end {
+  border-color: var(--Warning-0) !important ; /* Warning border color */
+}
+/* Warning state placeholder */
+.is-warning .v-field__input::placeholder {
+  color: var(--Warm-Light-3); /* Placeholder color */
+}
+
+.is-warning .v-field--variant-outlined {
+  background: var(--Warm-Light--2, #fffbf4);
+}
+
+.is-warning .v-icon {
+  color: var(--Warm-Light-3); /* Your custom color */
+}
+
+.is-warning .v-input__details {
+  color: var(--Warm-Light-3);
+  opacity: 1 !important;
+}
+
+.v-messages {
+  display: none;
+}
+
+.v-input__details {
+  justify-content: start !important;
+}
+
+.v-field--variant-outlined {
+  background: white;
+}
+
+.border-on-hover .v-field__outline {
+  opacity: 0;
+  --v-field-border-opacity: 0;
+}
+
+.border-on-hover:hover .v-field__outline {
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+.border-on-hover .v-field--focused .v-field__outline {
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}

package/src/components/Input/Input.vue

@@ -0,0 +1,247 @@
+<template>
+  <v-text-field
+    :class="{
+      'is-success': success,
+      'is-error': error,
+      'is-warning': warning,
+      'custom-prepend-icon': true,
+      'border-on-hover': borderOnHover,
+    }"
+    ref="inputRef"
+    :placeholder="computedPlaceholder"
+    :variant="variant"
+    rounded="lg"
+    :prepend-icon="prependIcon"
+    :prepend-inner-icon="prependInnerIcon"
+    :append-inner-icon="appendInnerIcon"
+    :append-icon="appendIcon"
+    :disabled="disabled"
+    :density="density"
+    :hide-details="hideDetails"
+    :model-value="modelValue"
+    @update:modelValue="onInput"
+    :persistent-hint="persistentHint"
+    @click:prepend="onPrependClick"
+    @click:prepend-inner="onPrependInnerClick"
+    @click:append="onAppendClick"
+    @click:append-inner="onAppendInnerClick"
+    data-testid="root"
+  >
+    <!-- Prepend Slot (before v-field) -->
+    <template v-if="$slots.prepend" #prepend>
+      <slot name="prepend"></slot>
+    </template>
+
+    <!-- Prepend Inner Slot (at the start of v-field) -->
+    <template v-if="$slots['prepend-inner']" #prepend-inner>
+      <slot name="prepend-inner"></slot>
+    </template>
+
+    <!-- Append Inner Slot (at the end of v-field) -->
+    <template v-if="$slots['append-inner']" #append-inner>
+      <slot name="append-inner"></slot>
+    </template>
+
+    <!-- Append Slot (after v-field) -->
+    <template v-if="$slots.append" #append>
+      <slot name="append"></slot>
+    </template>
+
+    <!-- Details Slot (for messages, hints, etc.) -->
+    <template #details>
+      <div class="d-flex flex-row ga-1 align-center">
+        <v-icon icon="heroicons:exclamation-circle"></v-icon>
+        <span>{{ hint }}</span>
+      </div>
+    </template>
+  </v-text-field>
+</template>
+<script setup>
+import { ref, nextTick, computed } from 'vue';
+import './Input.css';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// Define events that the component can emit
+const emit = defineEmits([
+  'update:modelValue', // Emits when the input value is updated
+  'click:prepend', // Emits when the prepend icon is clicked
+  'click:append', // Emits when the append icon is clicked
+  'click:prepend-inner', // Emits when the prepend inner icon is clicked
+  'click:append-inner', // Emits when the append inner icon is clicked
+]);
+
+ const computedPlaceholder = computed(() => {
+   return props.placeholder || t('wl.input.placeholder');
+ });
+
+// Define the component props
+const props = defineProps({
+  /**
+   * Indicates if the input is in a success state.
+   * When true, the success style will be applied.
+   */
+  success: Boolean,
+
+  /**
+   * Indicates if the input is in an error state.
+   * When true, the error style will be applied.
+   */
+  error: Boolean,
+
+  /**
+   * Indicates if the input is in a warning state.
+   * When true, the warning style will be applied.
+   */
+  warning: Boolean,
+
+  /**
+   * Disables the input if true, making it non-interactive.
+   */
+  disabled: Boolean,
+
+  /**
+   * The value of the input. It will be synced with v-model.
+   */
+  modelValue: String,
+
+  /**
+   * Controls the size and spacing of the input.
+   * Accepts 'compact' (default) or other values depending on the UI framework.
+   */
+  density: {
+    type: String,
+    default: 'compact',
+  },
+
+  /**
+   * The placeholder text that appears when the input is empty.
+   */
+  placeholder: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * Hides the details or additional text when true.
+   */
+  hideDetails: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * Icon to display before the input field.
+   */
+  prependIcon: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * Inner icon to display before the input field, but within the field itself.
+   */
+  prependInnerIcon: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * Icon to display after the input field.
+   */
+  appendIcon: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * Inner icon to display after the input field, but within the field itself.
+   */
+  appendInnerIcon: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * Hint text to display below the input.
+   */
+  hint: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * Keeps the hint text visible even when the input is focused.
+   */
+  persistentHint: {
+    type: Boolean,
+    default: false,
+  },
+
+  variant: {
+    type: String,
+    default: 'outlined',
+  },
+
+  borderOnHover: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+// Handle the event when the prepend icon is clicked
+const onPrependClick = () => {
+  emit('click:prepend');
+};
+
+// Handle the event when the prepend inner icon is clicked
+const onPrependInnerClick = () => {
+  emit('click:prepend-inner');
+};
+
+// Handle the event when the append icon is clicked
+const onAppendClick = () => {
+  emit('click:append');
+};
+
+// Handle the event when the append inner icon is clicked
+const onAppendInnerClick = () => {
+  emit('click:append-inner');
+};
+
+// Emit the updated value when the input changes, syncing with v-model
+const onInput = (value) => {
+  emit('update:modelValue', value);
+};
+
+const inputRef = ref(null)
+
+const getNativeInput = () => {
+  return inputRef.value?.$el?.querySelector('input');
+}
+
+const blur = () => {
+ nextTick(() => {
+    getNativeInput()?.blur();
+  });
+};
+
+const select = () => {
+  nextTick(() => {
+    getNativeInput()?.select();
+  });
+};
+
+const focus = () => {
+  nextTick(() => {
+    getNativeInput()?.focus();
+  });
+};
+
+defineExpose({
+  blur,
+  select,
+  focus
+});
+</script>

package/src/components/Laboratory/AppointmentCard/AppointmentCard.css

@@ -0,0 +1,7 @@
+.appointment-card .v-btn {
+  padding: 6px 8px !important;
+}
+
+.appointment-card .v-icon {
+  color: var(--Dental-Blue-0) !important;
+}

package/src/components/Laboratory/AppointmentCard/AppointmentCard.vue

@@ -0,0 +1,116 @@
+<template>
+  <v-card elevation="0" class="appointment-card" rounded="lg" data-testid="root">
+    <template #title>
+      <div class="d-flex flex-row align-center pa-1">
+        <h5 class="mr-auto">{{ date }}</h5>
+        <h5 class="mr-2">Status:</h5>
+        <TagLabel :status="status" />
+      </div>
+    </template>
+
+    <template #text>
+      <div class="d-flex flex-column ga-4">
+        <p>{{ treatmentName }}</p>
+        <div class="d-flex">
+          <v-btn
+            rounded="lg"
+            readonly
+            variant="outlined"
+            prepend-icon="heroicons:document-check"
+            class="mr-auto text-none"
+            size="compact"
+            :style="{
+              color: `var(${buttonTextColor})`,
+              backgroundColor: buttonBackgroundColor,
+              border: `2px solid var(${buttonBorderColor})`,
+            }"
+          >
+            <p class="p-small">{{ treatmentName }}</p>
+          </v-btn>
+          <v-btn
+            rounded="lg"
+            readonly
+            prepend-icon="heroicons:user-circle"
+            variant="text"
+            size="compact"
+            class="text-none"
+          >
+            <p class="p-small ml-1">{{ dentistName }}</p>
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </v-card>
+</template>
+
+<script setup>
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+import { defineProps } from 'vue';
+import './AppointmentCard.css';
+
+// Define props for the component
+defineProps({
+  /**
+   * The date associated with the treatment or appointment.
+   * This prop is required and should be a string.
+   */
+  date: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * The current status of the treatment or process.
+   * This prop is required and is expected to be a string representing the status.
+   */
+  status: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * The name of the treatment being performed.
+   * This prop is required and should be a string.
+   */
+  treatmentName: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * The name of the dentist associated with the treatment.
+   * If no dentist name is provided, the default value will be 'Martin Paetz'.
+   */
+  dentistName: {
+    type: String,
+    default: 'Martin Paetz',
+  },
+
+  /**
+   * The color of the text on the button.
+   * Default is the CSS variable '--Dental-Blue-0'.
+   */
+  buttonTextColor: {
+    type: String,
+    default: '--Dental-Blue-0',
+  },
+
+  /**
+   * The background color of the button.
+   * Default is a semi-transparent turquoise color.
+   */
+  buttonBackgroundColor: {
+    type: String,
+    default: 'rgba(186, 230, 234, 0.10)',
+  },
+
+  /**
+   * The border color of the button.
+   * Default is the CSS variable '--Trkis'.
+   */
+  buttonBorderColor: {
+    type: String,
+    default: '--Trkis',
+  },
+});
+</script>

package/src/components/Laboratory/ChatBoxImage/ChatBoxImage.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-card :elevation="0" class="pa-2 chat-box-image" rounded="lg">
+    <!-- Title slot for dynamic image rendering -->
+    <template #title>
+      <div class="d-flex flex-wrap">
+        <!-- Loop through the imageSources array prop to dynamically display images -->
+        <v-img
+          v-for="(image, index) in imageSources"
+          :key="index"
+          class="ma-2 pa-2"
+          aspect-ratio="16/9"
+          rounded="lg"
+          cover
+          :src="image"
+        ></v-img>
+      </div>
+    </template>
+
+    <!-- Text slot for dynamic paragraph -->
+    <template #text>
+      <p>{{ paragraphText }}</p>
+    </template>
+
+    <!-- Card actions with buttons -->
+    <v-card-actions>
+      <div class="d-flex flex-row align-center ga-3 w-100 justify-center">
+        <Button
+          style="width: 150px"
+          label="Approved"
+          density="default"
+          size="large"
+          @click="$emit('click:approved')"
+        ></Button>
+        <Button
+          style="width: 150px"
+          label="Not Approved"
+          density="default"
+          size="large"
+          variant="outlined"
+          @click="$emit('click:not-approved')"
+        ></Button>
+      </div>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import Button from '@components/Button/Button.vue';
+import { defineProps } from 'vue';
+
+// Define props for the paragraph text and an array of image sources
+const props = defineProps({
+  /**
+   * The text content to be displayed in the paragraph.
+   * Default value is a placeholder text ('Lorem ipsum...').
+   */
+  paragraphText: {
+    type: String,
+    default: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr...',
+  },
+
+  /**
+   * An array of image sources to be used in the component.
+   * Each element in the array should be a valid image URL.
+   * The default is two example images from Vuetify's CDN.
+   */
+  imageSources: {
+    type: Array,
+    default: () => [
+      'https://cdn.vuetifyjs.com/images/parallax/material.jpg',
+      'https://cdn.vuetifyjs.com/images/parallax/material.jpg',
+    ],
+  },
+});
+</script>
+
+<style>
+.chat-box-image .v-img__img--cover {
+  border: 1px solid var(--Soft-Concrete-1);
+}
+</style>