{"version":3,"file":"BwwDKQBc.js","sources":["../../../../node_modules/@smenaspace/ui-layer/types/shared.ts","../../../../node_modules/@smenaspace/ui-layer/components/autocomplete/Autocomplete.vue"],"sourcesContent":["export type PrimitivesValue = string | number | boolean\n\nexport type Theme = 'light' | 'dark'\n\nexport namespace Size {\n  export type ExtraSmall = 'xs'\n  export type Small = 'sm'\n  export type Medium = 'md'\n  export type Large = 'lg'\n}\n\nexport namespace Variant {\n  export type Primary = 'primary'\n  export type Secondary = 'secondary'\n  export type Tertiary = 'tertiary'\n  export type Transparent = 'transparent'\n}\n\nexport const enum Position {\n  TOP = 'top',\n  BOTTOM = 'bottom',\n}\n","<script setup lang=\"ts\">\nimport { Position } from '../../types/shared'\nimport type {\n  AutocompleteItem,\n  AutocompleteLocalItem,\n  AutocompleteModel,\n} from './types'\n\ntype Props = {\n  items: AutocompleteItem[]\n  itemTitle?: string\n  itemValue?: string\n  itemId?: string\n  label?: string | undefined\n  placeholder?: string\n  width?: string | number\n  errorMessages?: string | string[] | null\n  disabled?: boolean\n  hideDetails?: boolean\n  dynamicDetails?: boolean\n  loading?: boolean\n  returnObject?: boolean\n  class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  itemTitle: 'title',\n  itemValue: 'value',\n  itemId: 'id',\n  label: undefined,\n  placeholder: undefined,\n  width: undefined,\n  errorMessages: null,\n  returnObject: true,\n  class: '',\n})\n\nconst emit = defineEmits(['clear'])\n\nconst search = defineModel<string>('search', { required: false, default: '' })\nconst model = defineModel<AutocompleteModel>()\n\nconst isVisibleList = ref(false)\n\nconst autocompleteElement = ref<HTMLElement | null>(null)\nconst autocompleteListElement = ref<HTMLElement | null>(null)\nconst autocompleteListPosition = ref(Position.BOTTOM)\n\nconst transformedModel = computed(() => {\n  if (model.value !== null && typeof model.value === 'object') {\n    return model.value[props.itemValue]\n  }\n\n  return model.value\n})\n\nconst transformedItems = computed<AutocompleteLocalItem[]>(() => {\n  if (!Array.isArray(props.items)) return []\n\n  return props.items.map((item, index) => {\n    return {\n      ...item,\n      uuid: item[props.itemId] || index,\n      isActive: item[props.itemValue] === transformedModel.value,\n    }\n  })\n})\n\nconst isVisibleListState = computed(() => {\n  return transformedItems.value.length > 0 && isVisibleList.value\n})\n\nconst componentsClasses = computed(() => {\n  const classes = ['app-autocomplete']\n\n  if (props.class) classes.push(props.class)\n\n  if (props.label) classes.push('app-autocomplete--label-offset')\n\n  return classes\n})\n\nconst autocompleteListClasses = computed(() => {\n  return [\n    'app-autocomplete__list',\n    `app-autocomplete__list--position-${autocompleteListPosition.value}`,\n  ]\n})\n\nconst updatePosition = async () => {\n  await nextTick()\n\n  if (!autocompleteListElement.value || !window) return\n\n  const viewportHeight = window.innerHeight\n\n  const { top, bottom } = autocompleteListElement.value.getBoundingClientRect()\n\n  if (bottom > viewportHeight) {\n    autocompleteListPosition.value = Position.TOP\n\n    return\n  }\n\n  if (top < 0) {\n    autocompleteListPosition.value = Position.BOTTOM\n  }\n}\n\nconst getItemClasses = (item: AutocompleteItem) => {\n  return computed(() => {\n    const classes = ['app-autocomplete__item']\n\n    if (item.isActive) classes.push('app-autocomplete__item--active')\n\n    return classes\n  }).value\n}\n\nconst onSelect = (item: AutocompleteItem) => {\n  const itemModel = { ...item }\n\n  delete itemModel.isActive\n  delete itemModel.uuid\n\n  model.value = props.returnObject ? itemModel : item[props.itemValue]\n  search.value = item[props.itemValue]\n}\n\n// На андроиде v-model работает как change, поэтому нужно явно указать чтобы слушал input\nconst onInput = (event: Event) => {\n  search.value = (event.target as HTMLInputElement).value\n}\n\nconst onFocus = () => {\n  isVisibleList.value = true\n}\n\nconst onBlur = () => {\n  isVisibleList.value = false\n\n  autocompleteListPosition.value = Position.BOTTOM\n}\n\nconst onClickClear = () => {\n  model.value = null\n  search.value = ''\n\n  emit('clear')\n}\n\nconst onClickOutside = (event: Event) => {\n  if (!autocompleteElement.value) return\n\n  if (autocompleteElement.value.contains(event.target as HTMLElement)) return\n\n  // При закрытии выпадающего списка устанавливаем значение в строке поиска в зависимости от состояния modelValue (поведение с прода)\n  if (model.value) {\n    search.value = transformedModel.value\n  } else {\n    search.value = ''\n  }\n}\n\nwatch(isVisibleListState, () => updatePosition())\n\n// Следим за строкой поиска и при пустом поле очищаем выбранный элемент\nwatch(\n  () => search.value,\n  (value) => value.length === 0 && (model.value = null),\n)\n\nonMounted(() => {\n  window.parent.document.addEventListener('click', onClickOutside)\n  window.addEventListener('click', onClickOutside)\n})\n\nonBeforeUnmount(() => {\n  window.parent.document.removeEventListener('click', onClickOutside)\n  window.removeEventListener('click', onClickOutside)\n})\n</script>\n\n<template>\n  <div ref=\"autocompleteElement\" :class=\"componentsClasses\">\n    <the-input\n      :model-value=\"search\"\n      v-bind=\"$attrs\"\n      class=\"app-autocomplete__input\"\n      data-test-id=\"autocomplete-input\"\n      type=\"search\"\n      :label=\"label\"\n      :placeholder=\"placeholder\"\n      :width=\"width\"\n      :disabled=\"disabled\"\n      :error-messages=\"errorMessages\"\n      :hide-details=\"hideDetails\"\n      :dynamic-details=\"dynamicDetails\"\n      :loading=\"loading\"\n      @focus=\"onFocus\"\n      @blur=\"onBlur\"\n      @clear=\"onClickClear\"\n      @input=\"onInput\"\n    />\n\n    <transition name=\"ui-fade\">\n      <ul\n        v-if=\"isVisibleListState\"\n        ref=\"autocompleteListElement\"\n        data-test-id=\"autocomplete-list\"\n        :class=\"autocompleteListClasses\"\n        role=\"listbox\"\n        aria-labelledby=\"listbox-button\"\n      >\n        <li\n          v-for=\"item in transformedItems\"\n          :key=\"item.uuid\"\n          data-test-id=\"autocomplete-item\"\n          role=\"option\"\n          :class=\"getItemClasses(item)\"\n          :aria-selected=\"item.isActive\"\n          @click=\"onSelect(item)\"\n        >\n          <span>{{ item[itemTitle] }}</span>\n\n          <the-icon\n            v-if=\"item.isActive\"\n            data-test-id=\"autocomplete-icon\"\n            class=\"app-autocomplete__icon\"\n            name=\"check\"\n            color=\"var(--ui-primary)\"\n          />\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n\n<style lang=\"scss\">\n@import '../../assets/ui-layer/styles/mixins';\n\n.app-autocomplete {\n  --autocomplete-label-offset: 0px;\n\n  position: relative;\n\n  &__list {\n    position: absolute;\n    right: 0;\n    left: 0;\n    z-index: 3;\n    max-height: 200px;\n    overflow: hidden;\n    overflow-y: auto;\n    background-color: var(--ui-white);\n    border-radius: 10px;\n    box-shadow: var(--ui-card-shadow);\n    @include invisible-scroll-bar();\n\n    &--position-top {\n      bottom: calc(100% + 4px - var(--autocomplete-label-offset));\n    }\n\n    &--position-bottom {\n      top: calc(44px + var(--autocomplete-label-offset));\n    }\n  }\n\n  &__item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    min-height: 40px;\n    padding: 8px 16px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 18px;\n    color: var(--ui-text-primary);\n    cursor: pointer;\n    transition: color 0.2s ease-in, background-color 0.2s ease-in;\n\n    @include media('>=desktop-mini') {\n      &:hover {\n        background-color: var(--ui-grey);\n      }\n    }\n\n    &--active {\n      padding-right: 8px;\n      color: var(--ui-primary);\n    }\n  }\n\n  &__icon {\n    flex-shrink: 0;\n    flex-basis: 24px;\n    width: 24px;\n    height: 24px;\n  }\n\n  &--label-offset {\n    --autocomplete-label-offset: 18px;\n  }\n}\n</style>\n"],"names":["Position","props","__props","emit","__emit","search","_useModel","model","isVisibleList","ref","autocompleteElement","autocompleteListElement","autocompleteListPosition","transformedModel","computed","transformedItems","item","index","isVisibleListState","componentsClasses","classes","autocompleteListClasses","updatePosition","nextTick","viewportHeight","top","bottom","getItemClasses","onSelect","itemModel","onInput","event","onFocus","onBlur","onClickClear","onClickOutside","watch","value","onMounted","onBeforeUnmount"],"mappings":"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","debug_id":"4f85a376-670f-5ca5-a42e-a5c1ae3f75f8"}