@zap-wunschlachen/wl-shared-components 1.0.59 → 1.0.61

package/App.vue

@@ -1848,6 +1848,7 @@
   import NotificationBubble from '@/components/NotificationBubble/NotificationBubble.vue';
   import PhoneInput from '@/components/PhoneInput/PhoneInput.vue';
   import Select from '@/components/Select/Select.vue';
+  import SelectAutocomplete from '@/components/SelectAutocomplete/SelectAutocomplete.vue';
   import TextArea from '@/components/TextArea/TextArea.vue';
   import TickBox from '@/components/TickBox/TickBox.vue';
   import AccordionGroup from '@/components/Accordion/AccordionGroup.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.59",
+  "version": "1.0.61",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/Select/Select.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-autocomplete
+  <v-combobox
     ref="inputRef"
     class="wl-select"
     :class="{
@@ -38,7 +38,6 @@
     @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>
@@ -59,7 +58,7 @@
     <template v-if="$slots['append-inner']" #append-inner>
       <slot name="append-inner"></slot>
     </template>
-  </v-autocomplete>
+  </v-combobox>
 </template>
 
 <script setup>

package/src/components/SelectAutocomplete/SelectAutocomplete.css

@@ -0,0 +1,167 @@
+.wl-select .v-field__outline {
+  opacity: 1 !important; /* Set the opacity to 1 */
+  --v-field-border-opacity: 1 !important; /* Ensure full opacity for the border */
+  color: var(--Soft-Concrete-2) !important; /*  border color */
+}
+
+/* Active state border color */
+.wl-select .v-field--active .v-field__outline {
+  color: var(--Soft-Concrete-2) !important; /* Active border color */
+  opacity: 1 !important;
+  --v-field-border-opacity: 1 !important;
+}
+
+.wl-select .v-label.v-field-label {
+  color: var(--Dental-Blue--3) !important;
+  opacity: 1 !important;
+}
+
+/* Default input text color */
+.wl-select .v-field__input {
+  color: var(--primary-color);
+  opacity: 1;
+}
+
+.wl-select .v-field--focused .v-field__input {
+  color: var(--primary-color);
+  opacity: 1;
+}
+
+/* Select item - default state (uses CSS variables from menuProps) */
+.wl-select-menu .v-list-item {
+  color: var(--select-item-text, var(--primary-color));
+  background: var(--select-item-default-bg, var(--bg_0));
+}
+
+/* Select item - hover and active state */
+.wl-select-menu .v-list-item:hover,
+.wl-select-menu .v-list-item.v-list-item--active {
+  color: var(--select-item-text, var(--primary-color));
+  border-left: 4px solid var(--select-item-selected-left-border, var(--primary-color));
+  padding-left: 12px; /* Adjust padding to make space for the border */
+  background: var(--select-item-hovered-bg, var(--bg_0)) !important;
+}
+
+/* Select item - selected state */
+.wl-select-menu .v-list-item--active {
+  background: var(--select-item-selected-bg, var(--bg_0)) !important;
+}
+
+.wl-select-menu .v-list-item__overlay {
+  background: var(--select-item-default-bg, var(--bg_0)) !important;
+}
+
+.wl-select-menu .v-list-item:hover .v-list-item__overlay {
+  background: var(--select-item-hovered-bg, var(--bg_0)) !important;
+}
+
+.wl-select-menu .v-list-item__content {
+  color: var(--select-item-text, var(--primary-color));
+}
+
+/* Focused state border color */
+.v-field[aria-expanded='true'] .v-field__outline {
+  color: var(--Soft-Concrete-2) !important;
+  opacity: 1 !important;
+
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.wl-select-menu .v-combobox__content {
+  border: 2px solid var(--Soft-Concrete-2);
+  border-bottom-left-radius: 8px !important;
+  border-bottom-right-radius: 8px !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+  box-shadow: none;
+}
+
+.v-combobox__selection .v-chip {
+  background: var(--bg_0);
+  color: var(--primary-color);
+  border-radius: 8px;
+}
+
+.wl-select .v-icon {
+  color: var(--primary-color);
+}
+
+/* Disabled state styles */
+.wl-select .v-field--disabled,
+.wl-select .v-field--disabled .v-label.v-field-label,
+.wl-select .v-field--disabled .v-field__input,
+.wl-select .v-field--disabled .v-icon {
+  color: #bdbdbd !important;           /* Grey text and icon */
+  background-color: #f5f5f5 !important; /* Light grey background */
+  opacity: 1 !important;               /* Ensure full opacity */
+  cursor: not-allowed !important;
+}
+
+.wl-select .v-field--disabled .v-field__outline {
+  border-color: #e0e0e0 !important;    /* Lighter grey border */
+}
+
+.wl-select .v-field--disabled .v-combobox__selection .v-chip {
+  background: #e0e0e0 !important;
+  color: #bdbdbd !important;
+  border: 1px solid #bdbdbd !important;
+}
+
+/* Optionally, dim the dropdown if open while disabled */
+.wl-select .v-field--disabled .v-combobox__content {
+  background: #f5f5f5 !important;
+  color: #bdbdbd !important;
+  pointer-events: none;
+}
+
+/* Error state styles */
+.wl-select .v-field--error,
+.wl-select .v-field--error .v-label.v-field-label,
+.wl-select .v-field--error .v-field__input,
+.wl-select .v-field--error .v-icon {
+  background-color: #fdeaea !important; /* Light red background */
+  color: #b71c1c !important;            /* Dark red text and icon */
+  border-color: #b71c1c !important;     /* Dark red border */
+}
+
+.wl-select .v-field--error .v-field__outline {
+  --v-field-border-opacity: 1 !important;
+}
+
+.wl-select .v-field--error .v-combobox__selection .v-chip {
+  background: #fdeaea !important; /* Light red background */
+  color: #b71c1c !important;      /* Dark red text */
+  border: 1px solid #b71c1c !important;
+}
+
+.wl-select .v-field--error .v-combobox__content {
+  background: #fdeaea !important;
+  color: #b71c1c !important;
+  border-color: #b71c1c !important;
+}
+
+.wl-select .v-field--error .v-field__input {
+  color: #b71c1c !important;
+  background: #fdeaea !important;
+}
+
+.wl-select .v-field--disabled .v-field__input {
+  color: #bdbdbd !important;
+  background: #f5f5f5 !important;
+}
+
+.wl-select.border-on-hover .v-field__outline {
+  opacity: 0 !important;
+  --v-field-border-opacity: 0 !important;
+}
+
+.wl-select.border-on-hover:hover .v-field__outline {
+  opacity: 1 !important;
+  --v-field-border-opacity: 1 !important;
+}
+
+.wl-select.border-on-hover .v-field--focused .v-field__outline {
+  opacity: 1 !important;
+  --v-field-border-opacity: 1 !important;
+}

package/src/components/SelectAutocomplete/SelectAutocomplete.vue

@@ -0,0 +1,340 @@
+<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"
+    :hide-details="true"
+    :clearable="clearable"
+    :items="items"
+    :disabled="disabled"
+    :error="error"
+    :item-title="'title'"
+    :item-value="'value'"
+    :return-object="returnObject"
+    :placeholder="placeholder"
+    :persistent-placeholder="persistentPlaceholder"
+    :aria-invalid="error || 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['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 './Select2.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: undefined,
+  },
+
+  /**
+   * The property name of the item to use as the value.
+   */
+  itemValue: {
+    type: String,
+    default: undefined,
+  },
+
+  variant: {
+    type: String,
+    default: 'outlined',
+  },
+
+  borderOnHover: {
+    type: Boolean,
+    default: false
+  },
+
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  persistentPlaceholder:{
+    type: Boolean,
+    default: false
+  }
+});
+
+// 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>

package/src/components/index.ts

@@ -31,6 +31,7 @@ export { default as NotificationBubble } from './NotificationBubble/Notification
 export { default as OtpInput } from './OtpInput/OtpInput.vue';
 export { default as PhoneInput } from './PhoneInput/PhoneInput.vue';
 export { default as Select } from './Select/Select.vue';
+export { default as SelectAutocomplete } from './SelectAutocomplete/SelectAutocomplete.vue';
 export { default as TextArea } from './TextArea/TextArea.vue';
 export { default as TickBox } from './TickBox/TickBox.vue';