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

package/src/components/Input/Input.vue

@@ -1,247 +1,253 @@
-<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>
+<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"
+    :error="error"
+    :aria-invalid="error || undefined"
+    :aria-describedby="hint ? inputHintId : undefined"
+    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 v-if="hint" class="d-flex flex-row ga-1 align-center" :id="inputHintId" role="alert" aria-hidden="true">
+        <v-icon icon="heroicons:exclamation-circle" aria-hidden="true"></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');
+ });
+
+// Generate unique ID for accessibility - connects input to hint/error message
+const inputHintId = `input-hint-${Math.random().toString(36).slice(2, 11)}`;
+
+// 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

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