@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/components/SelectAutocomplete/SelectAutocomplete.vue

@@ -1,414 +1,414 @@
-<template>
-  <v-autocomplete
-    ref="inputRef"
-    class="wl-select"
-    :class="{
-      'border-on-hover': borderOnHover
-    }"
-    rounded="lg"
-    :density="density"
-    :variant="props.variant"
-    :label="label"
-    :chips="chips"
-    :append-icon="appendIcon"
-    :append-inner-icon="appendInnerIcon"
-    :prepend-icon="prependIcon"
-    :prepend-inner-icon="prependInnerIcon"
-    :menu-icon="menuIcon"
-    :clear-icon="clearIcon"
-    :closable-chips="closableChips"
-    :multiple="multiple"
-    :clearable="clearable"
-    :items="items"
-    :disabled="disabled"
-    :error="error"
-    :item-title="itemTitle"
-    :item-value="itemValue"
-    :return-object="returnObject"
-    :placeholder="placeholder"
-    :persistent-placeholder="persistentPlaceholder"
-    :auto-select-first="autoSelectFirst"
-    :custom-filter="customFilter"
-    :hide-no-data="hideNoData"
-    :hide-details="hideDetails"
-    :aria-invalid="error || undefined"
-    :aria-label="ariaLabel || undefined"
-    :aria-describedby="ariaDescribedby || undefined"
-    :menu-props="computedMenuProps"
-    v-model="internalValue"
-    @click:append="onClickAppend"
-    @click:append-inner="onClickAppendInner"
-    @click:clear="onClickClear"
-    @click:prepend="onClickPrepend"
-    @click:prepend-inner="onClickPrependInner"
-    @update:search="onUpdateSearch"
-    data-testid="root"
-    :rules="[v => !!v || 'Please select a value from the list']"
-  >
-    <template v-slot:menu>
-      <slot name="menu"></slot>
-    </template>
-
-    <template v-if="$slots['item']" #item="slotProps">
-      <slot name="item" v-bind="slotProps"></slot>
-    </template>
-
-    <template v-if="$slots['selection']" #selection="slotProps">
-      <slot name="selection" v-bind="slotProps"></slot>
-    </template>
-
-    <template v-if="$slots['no-data']" #no-data>
-      <slot name="no-data"></slot>
-    </template>
-
-    <template v-if="$slots['prepend']" #prepend>
-      <slot name="prepend"></slot>
-    </template>
-
-    <template v-if="$slots['prepend-inner']" #prepend-inner>
-      <slot name="prepend-inner"></slot>
-    </template>
-
-    <template v-if="$slots['append']" #append>
-      <slot name="append"></slot>
-    </template>
-
-    <template v-if="$slots['append-inner']" #append-inner>
-      <slot name="append-inner"></slot>
-    </template>
-  </v-autocomplete>
-</template>
-
-<script setup>
-import './SelectAutocomplete.css';
-import { ref, watch, nextTick, computed, inject } from 'vue';
-import { defineProps, defineEmits } from 'vue';
-import { siteColors } from "../../utils/index";
-
-// Inject theme colors from ThemeProvider, fallback to global siteColors
-const injectedThemeColors = inject('themeColors', null);
-const colors = computed(() => {
-  if (injectedThemeColors) {
-    return injectedThemeColors.value;
-  }
-  return siteColors;
-});
-
-// Compute menu props with domain-specific class and inline CSS variables for dropdown styling
-const computedMenuProps = computed(() => ({
-  class: 'wl-select-menu',
-  style: {
-    '--select-item-text': colors.value['select_item_text'],
-    '--select-item-default-bg': colors.value['select_item_default_bg'],
-    '--select-item-hovered-bg': colors.value['select_item_hovered_bg'],
-    '--select-item-selected-left-border': colors.value['select_item_selected_left_border'],
-    '--select-item-selected-bg': colors.value['select_item_selected_bg']
-  }
-}));
-
-// Define component props with default values and descriptions
-const props = defineProps({
-  /**
-   * Disables the select input when true, making it non-interactive.
-   * Default is false.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-    /**
-   * Changes the select input state, when true, put it into error state.
-   * Default is false.
-   */
-  error: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Allows clearing the selected value when true.
-   * Default is true.
-   */
-  clearable: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * The label displayed above the select input.
-   * Default is 'Label'.
-   */
-  label: {
-    type: String,
-    default: 'Label',
-  },
-
-  /**
-   * Enables the display of selected items as chips when true.
-   * Default is false.
-   */
-  chips: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Icon to append to the select field.
-   */
-  appendIcon: {
-    type: String,
-  },
-
-  /**
-   * Inner icon to append inside the select field.
-   */
-  appendInnerIcon: {
-    type: String,
-  },
-
-  /**
-   * Icon to prepend to the select field.
-   */
-  prependIcon: {
-    type: String,
-  },
-
-  /**
-   * Inner icon to prepend inside the select field.
-   */
-  prependInnerIcon: {
-    type: String,
-  },
-
-  /**
-   * The icon for the menu toggle.
-   * Default is an empty string (no icon).
-   */
-  menuIcon: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * The icon to use for the clear button.
-   * Default is 'x-mark'.
-   */
-  clearIcon: {
-    type: String,
-    default: 'x-mark',
-  },
-
-  /**
-   * Enables closing chips when true.
-   * Default is false.
-   */
-  closableChips: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Allows multiple selections when true.
-   * Default is false.
-   */
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * The items available for selection.
-   * Default is an empty array.
-   */
-  items: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * The selected value (can be a string, array, or object).
-   */
-  modelValue: {
-    type: [String, Array, Object],
-    default: undefined,
-  },
-
-  /**
-   * The density of the select input.
-   * Controls spacing and size. Default is 'compact'.
-   */
-  density: {
-    type: String,
-    default: 'compact',
-  },
-
-  /**
-   * When true, the selected item is returned as an object.
-   * Default is true.
-   */
-  returnObject: {
-    type: Boolean,
-    default: true,
-  },
-
-  /**
-   * The property name of the item to display as the title.
-   */
-  itemTitle: {
-    type: String,
-    default: 'title',
-  },
-
-  /**
-   * The property name of the item to use as the value.
-   */
-  itemValue: {
-    type: String,
-    default: 'value',
-  },
-
-  variant: {
-    type: String,
-    default: 'outlined',
-  },
-
-  borderOnHover: {
-    type: Boolean,
-    default: false
-  },
-
-  placeholder: {
-    type: String,
-    default: ''
-  },
-  persistentPlaceholder:{
-    type: Boolean,
-    default: false
-  },
-
-  /**
-   * Automatically highlights the first matching item so it gets selected
-   * when the user blurs or presses Enter without manually picking an item.
-   * Default is false.
-   */
-  autoSelectFirst: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Custom filter function for matching items against the search query.
-   * Signature: (value: string, query: string, item: { raw: object }) => boolean
-   * When not provided, Vuetify's default filter (item-title match) is used.
-   */
-  customFilter: {
-    type: Function,
-    default: undefined,
-  },
-
-  /**
-   * Hides the menu when there are no items to display.
-   * Default is false.
-   */
-  hideNoData: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Controls whether validation messages (errors, hints) are displayed below the field.
-   * Default is true (hidden) for backwards compatibility.
-   * Set to false or 'auto' to show validation/error messages.
-   */
-  hideDetails: {
-    type: [Boolean, String],
-    default: true,
-  },
-
-  /**
-   * Accessible label for screen readers. Use when the visible label is empty
-   * or not descriptive enough (WCAG 4.1.2).
-   */
-  ariaLabel: {
-    type: String,
-    default: undefined,
-  },
-
-  /**
-   * ID of the element(s) that describe this input (e.g. error messages, hints).
-   * Links the input to supplementary information for screen readers (WCAG 1.3.1).
-   */
-  ariaDescribedby: {
-    type: String,
-    default: undefined,
-  },
-});
-
-// Define events that can be emitted by the component
-const emits = defineEmits([
-  'update:modelValue', // Emit when the model value is updated
-  'click:append', // Emit when the append icon is clicked
-  'click:appendInner', // Emit when the append inner icon is clicked
-  'click:clear', // Emit when the clear button is clicked
-  'click:prepend', // Emit when the prepend icon is clicked
-  'click:prependInner', // Emit when the prepend inner icon is clicked
-  'update:search', // Emit search updates for filtering items
-]);
-
-// Define a reactive reference for internal value based on the modelValue prop
-const internalValue = ref(props.modelValue);
-
-// Watch for changes in modelValue prop and update internalValue accordingly
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    internalValue.value = newValue;
-  },
-);
-
-// Watch for changes in internalValue and emit updated modelValue to parent
-watch(internalValue, (newValue) => {
-  emits('update:modelValue', newValue);
-});
-
-// Emit click events for various icon and button interactions
-const onClickAppend = (event) => emits('click:append', event);
-const onClickAppendInner = (event) => emits('click:appendInner', event);
-const onClickClear = (event) => emits('click:clear', event);
-const onClickPrepend = (event) => emits('click:prepend', event);
-const onClickPrependInner = (event) => emits('click:prependInner', event);
-
-// Emit search updates for filtering or searching items
-const onUpdateSearch = (searchValue) => emits('update:search', searchValue);
-
-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-autocomplete
+    ref="inputRef"
+    class="wl-select"
+    :class="{
+      'border-on-hover': borderOnHover
+    }"
+    rounded="lg"
+    :density="density"
+    :variant="props.variant"
+    :label="label"
+    :chips="chips"
+    :append-icon="appendIcon"
+    :append-inner-icon="appendInnerIcon"
+    :prepend-icon="prependIcon"
+    :prepend-inner-icon="prependInnerIcon"
+    :menu-icon="menuIcon"
+    :clear-icon="clearIcon"
+    :closable-chips="closableChips"
+    :multiple="multiple"
+    :clearable="clearable"
+    :items="items"
+    :disabled="disabled"
+    :error="error"
+    :item-title="itemTitle"
+    :item-value="itemValue"
+    :return-object="returnObject"
+    :placeholder="placeholder"
+    :persistent-placeholder="persistentPlaceholder"
+    :auto-select-first="autoSelectFirst"
+    :custom-filter="customFilter"
+    :hide-no-data="hideNoData"
+    :hide-details="hideDetails"
+    :aria-invalid="error || undefined"
+    :aria-label="ariaLabel || undefined"
+    :aria-describedby="ariaDescribedby || undefined"
+    :menu-props="computedMenuProps"
+    v-model="internalValue"
+    @click:append="onClickAppend"
+    @click:append-inner="onClickAppendInner"
+    @click:clear="onClickClear"
+    @click:prepend="onClickPrepend"
+    @click:prepend-inner="onClickPrependInner"
+    @update:search="onUpdateSearch"
+    data-testid="root"
+    :rules="[v => !!v || 'Please select a value from the list']"
+  >
+    <template v-slot:menu>
+      <slot name="menu"></slot>
+    </template>
+
+    <template v-if="$slots['item']" #item="slotProps">
+      <slot name="item" v-bind="slotProps"></slot>
+    </template>
+
+    <template v-if="$slots['selection']" #selection="slotProps">
+      <slot name="selection" v-bind="slotProps"></slot>
+    </template>
+
+    <template v-if="$slots['no-data']" #no-data>
+      <slot name="no-data"></slot>
+    </template>
+
+    <template v-if="$slots['prepend']" #prepend>
+      <slot name="prepend"></slot>
+    </template>
+
+    <template v-if="$slots['prepend-inner']" #prepend-inner>
+      <slot name="prepend-inner"></slot>
+    </template>
+
+    <template v-if="$slots['append']" #append>
+      <slot name="append"></slot>
+    </template>
+
+    <template v-if="$slots['append-inner']" #append-inner>
+      <slot name="append-inner"></slot>
+    </template>
+  </v-autocomplete>
+</template>
+
+<script setup>
+import './SelectAutocomplete.css';
+import { ref, watch, nextTick, computed, inject } from 'vue';
+import { defineProps, defineEmits } from 'vue';
+import { siteColors } from "../../utils/index";
+
+// Inject theme colors from ThemeProvider, fallback to global siteColors
+const injectedThemeColors = inject('themeColors', null);
+const colors = computed(() => {
+  if (injectedThemeColors) {
+    return injectedThemeColors.value;
+  }
+  return siteColors;
+});
+
+// Compute menu props with domain-specific class and inline CSS variables for dropdown styling
+const computedMenuProps = computed(() => ({
+  class: 'wl-select-menu',
+  style: {
+    '--select-item-text': colors.value['select_item_text'],
+    '--select-item-default-bg': colors.value['select_item_default_bg'],
+    '--select-item-hovered-bg': colors.value['select_item_hovered_bg'],
+    '--select-item-selected-left-border': colors.value['select_item_selected_left_border'],
+    '--select-item-selected-bg': colors.value['select_item_selected_bg']
+  }
+}));
+
+// Define component props with default values and descriptions
+const props = defineProps({
+  /**
+   * Disables the select input when true, making it non-interactive.
+   * Default is false.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+    /**
+   * Changes the select input state, when true, put it into error state.
+   * Default is false.
+   */
+  error: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Allows clearing the selected value when true.
+   * Default is true.
+   */
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The label displayed above the select input.
+   * Default is 'Label'.
+   */
+  label: {
+    type: String,
+    default: 'Label',
+  },
+
+  /**
+   * Enables the display of selected items as chips when true.
+   * Default is false.
+   */
+  chips: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Icon to append to the select field.
+   */
+  appendIcon: {
+    type: String,
+  },
+
+  /**
+   * Inner icon to append inside the select field.
+   */
+  appendInnerIcon: {
+    type: String,
+  },
+
+  /**
+   * Icon to prepend to the select field.
+   */
+  prependIcon: {
+    type: String,
+  },
+
+  /**
+   * Inner icon to prepend inside the select field.
+   */
+  prependInnerIcon: {
+    type: String,
+  },
+
+  /**
+   * The icon for the menu toggle.
+   * Default is an empty string (no icon).
+   */
+  menuIcon: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * The icon to use for the clear button.
+   * Default is 'x-mark'.
+   */
+  clearIcon: {
+    type: String,
+    default: 'x-mark',
+  },
+
+  /**
+   * Enables closing chips when true.
+   * Default is false.
+   */
+  closableChips: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Allows multiple selections when true.
+   * Default is false.
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The items available for selection.
+   * Default is an empty array.
+   */
+  items: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * The selected value (can be a string, array, or object).
+   */
+  modelValue: {
+    type: [String, Array, Object],
+    default: undefined,
+  },
+
+  /**
+   * The density of the select input.
+   * Controls spacing and size. Default is 'compact'.
+   */
+  density: {
+    type: String,
+    default: 'compact',
+  },
+
+  /**
+   * When true, the selected item is returned as an object.
+   * Default is true.
+   */
+  returnObject: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * The property name of the item to display as the title.
+   */
+  itemTitle: {
+    type: String,
+    default: 'title',
+  },
+
+  /**
+   * The property name of the item to use as the value.
+   */
+  itemValue: {
+    type: String,
+    default: 'value',
+  },
+
+  variant: {
+    type: String,
+    default: 'outlined',
+  },
+
+  borderOnHover: {
+    type: Boolean,
+    default: false
+  },
+
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  persistentPlaceholder:{
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   * Automatically highlights the first matching item so it gets selected
+   * when the user blurs or presses Enter without manually picking an item.
+   * Default is false.
+   */
+  autoSelectFirst: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Custom filter function for matching items against the search query.
+   * Signature: (value: string, query: string, item: { raw: object }) => boolean
+   * When not provided, Vuetify's default filter (item-title match) is used.
+   */
+  customFilter: {
+    type: Function,
+    default: undefined,
+  },
+
+  /**
+   * Hides the menu when there are no items to display.
+   * Default is false.
+   */
+  hideNoData: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Controls whether validation messages (errors, hints) are displayed below the field.
+   * Default is true (hidden) for backwards compatibility.
+   * Set to false or 'auto' to show validation/error messages.
+   */
+  hideDetails: {
+    type: [Boolean, String],
+    default: true,
+  },
+
+  /**
+   * Accessible label for screen readers. Use when the visible label is empty
+   * or not descriptive enough (WCAG 4.1.2).
+   */
+  ariaLabel: {
+    type: String,
+    default: undefined,
+  },
+
+  /**
+   * ID of the element(s) that describe this input (e.g. error messages, hints).
+   * Links the input to supplementary information for screen readers (WCAG 1.3.1).
+   */
+  ariaDescribedby: {
+    type: String,
+    default: undefined,
+  },
+});
+
+// Define events that can be emitted by the component
+const emits = defineEmits([
+  'update:modelValue', // Emit when the model value is updated
+  'click:append', // Emit when the append icon is clicked
+  'click:appendInner', // Emit when the append inner icon is clicked
+  'click:clear', // Emit when the clear button is clicked
+  'click:prepend', // Emit when the prepend icon is clicked
+  'click:prependInner', // Emit when the prepend inner icon is clicked
+  'update:search', // Emit search updates for filtering items
+]);
+
+// Define a reactive reference for internal value based on the modelValue prop
+const internalValue = ref(props.modelValue);
+
+// Watch for changes in modelValue prop and update internalValue accordingly
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    internalValue.value = newValue;
+  },
+);
+
+// Watch for changes in internalValue and emit updated modelValue to parent
+watch(internalValue, (newValue) => {
+  emits('update:modelValue', newValue);
+});
+
+// Emit click events for various icon and button interactions
+const onClickAppend = (event) => emits('click:append', event);
+const onClickAppendInner = (event) => emits('click:appendInner', event);
+const onClickClear = (event) => emits('click:clear', event);
+const onClickPrepend = (event) => emits('click:prepend', event);
+const onClickPrependInner = (event) => emits('click:prependInner', event);
+
+// Emit search updates for filtering or searching items
+const onUpdateSearch = (searchValue) => emits('update:search', searchValue);
+
+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>