bfg-common 1.4.877 → 1.4.879

package/components/atoms/autocomplete/Autocomplete.vue

@@ -1,301 +1,301 @@
-<template>
-  <div class="autocomplete" @click.stop>
-    <div class="content-search">
-      <div v-show="props.loading" class="loader">
-        <atoms-loader-pre-loader
-          id="loader"
-          :test-id="`${props.testId}-pre-loader`"
-          class="content-area__loading"
-          :show="true"
-        />
-      </div>
-      <div class="search-icon">
-        <atoms-the-icon
-          fill="#666"
-          stroke-width="10"
-          class="alert-icon search-icon"
-          name="search"
-        />
-      </div>
-
-      <div class="clr-error">
-        <div class="form-group__input">
-          <input
-            :id="`${props.testId}-search-input`"
-            v-model.trim="search"
-            :data-id="`${props.testId}-search-input`"
-            type="text"
-            class="search-input"
-            :class="fieldErrorText && 'clr-input'"
-            autocomplete="off"
-            :placeholder="props.placeholder"
-            @blur="onInitValidation"
-            @input="onSearch"
-          />
-          <div v-show="fieldErrorText" class="form-validate">
-            <atoms-the-icon class="is-error tooltip-trigger" name="info" />
-          </div>
-        </div>
-        <div
-          v-show="fieldErrorText"
-          class="form-group__input-error clr-subtext"
-        >
-          {{ fieldErrorText }}
-        </div>
-      </div>
-    </div>
-    <div
-      v-show="isShow"
-      :class="['content-filtered', { active: items.length }]"
-    >
-      <ul class="dropdown-menu filtered-items">
-        <li
-          v-for="(item, key) in items"
-          :key="`${item}_${key}`"
-          :class="['item', { active: key === selectedTabIndex }]"
-          :data-id="item.testId"
-          @mouseenter="selectedTabIndex = key"
-          @click="onSelect(key)"
-        >
-          {{ item.firstText }}<b>{{ item.secondText }}</b
-          >{{ item.thirdText }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    placeholder: string
-    items: string[]
-    loading?: boolean
-    testId?: string
-    ms?: number
-    showValidation?: boolean
-    errorText?: string
-  }>(),
-  {
-    testId: 'ui-autocomplete',
-    ms: 500,
-    loading: false,
-    showValidation: false,
-    errorText: '',
-  }
-)
-const emits = defineEmits<{
-  (event: 'search', value: string): void
-  (event: 'select', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const search = ref<string>('')
-
-let timer: NodeJS.Timeout
-const onSearch = (): void => {
-  onInitValidation()
-  clearTimeout(timer)
-  timer = setTimeout(
-    (value) => {
-      emits('search', value)
-    },
-    props.ms,
-    search.value
-  )
-  selectedTabIndex.value = 0
-}
-const isInitFieldValidation = ref<boolean>(false)
-const onInitValidation = (): void => {
-  isInitFieldValidation.value = true
-}
-const fieldErrorText = computed<string>(() => {
-  if (!isInitFieldValidation.value) return ''
-
-  if (!search.value) return localization.value.common.fieldRequired
-  else if (props.showValidation) return props.errorText
-})
-const items = computed<any[]>(() => {
-  return [...props.items].map((text) => {
-    const term = text.match(new RegExp(search.value, 'i'))?.[0]
-    const texts = term ? text.split(term) : text
-    return {
-      firstText: texts[0],
-      secondText: term,
-      thirdText: texts[1],
-      testId: `${term}-filtered-item`,
-    }
-  })
-})
-
-const selectedTabIndex = ref<number>(0)
-const onSelect = (key: number): void => {
-  search.value = props.items[key]
-  emits('select', search.value)
-  isHide.value = true
-}
-
-const isHide = ref<boolean>(false)
-const isShow = computed<boolean>(
-  () => Boolean(items.value.length) && !isHide.value
-)
-
-const onKeyDown = (event: KeyboardEvent): void => {
-  switch (event.code) {
-    case 'ArrowUp':
-      prevTabItem()
-      break
-    case 'ArrowDown':
-      nextTabItem()
-      break
-    case 'Enter':
-      event.preventDefault()
-      onSelect(selectedTabIndex.value)
-      break
-    case 'Tab':
-      isHide.value = true
-      break
-  }
-}
-
-const nextTabItem = (): void => {
-  if (selectedTabIndex.value === items.value.length - 1)
-    selectedTabIndex.value = 0
-  else selectedTabIndex.value++
-}
-
-const prevTabItem = (): void => {
-  if (selectedTabIndex.value === 0)
-    selectedTabIndex.value = items.value.length - 1
-  else selectedTabIndex.value--
-}
-
-watch(
-  () => props.items,
-  (newValue) => {
-    if (newValue.length) {
-      isHide.value = false
-    }
-  }
-)
-window.addEventListener('keydown', onKeyDown, true)
-watch(isHide, (newValue) => {
-  if (!newValue) {
-    window.addEventListener('keydown', onKeyDown, true)
-  } else {
-    window.removeEventListener('keydown', onKeyDown, true)
-  }
-})
-watch(
-  () => props.showValidation,
-  (newValue: boolean) => {
-    isInitFieldValidation.value = newValue
-  },
-  { immediate: true }
-)
-</script>
-
-<style scoped lang="scss">
-.autocomplete {
-  max-width: 180px;
-  position: relative;
-
-  .content-search {
-    .loader {
-      position: absolute;
-      top: 3px;
-      left: -6px;
-      z-index: 1;
-      height: 16px;
-      width: 16px;
-
-      #loader {
-        height: 100%;
-        width: 100%;
-
-        :deep(.spinner-inverse) {
-          min-width: auto;
-          min-height: auto;
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .search-icon {
-      position: absolute;
-      width: 17px;
-      top: 2px;
-      bottom: 0;
-    }
-    .search-input {
-      background-color: white;
-      padding: 0 6px 0 20px;
-    }
-  }
-
-  .content-filtered {
-    position: absolute;
-    display: block;
-    overflow-y: visible;
-    height: auto;
-    visibility: visible;
-    will-change: transform;
-    top: 0;
-    left: 0;
-    transform: translate3d(0px, 25px, 0px);
-    width: 250px;
-    z-index: 1000;
-
-    &.active .filtered-items {
-      max-height: 164px;
-      visibility: visible;
-      position: absolute;
-      top: 100%;
-      left: 0;
-      min-width: 96px;
-      max-width: 288px;
-      border: 0.8px solid #ccc;
-      padding: 9.6px 0;
-      z-index: 1060;
-      overflow: auto;
-      width: 100%;
-      margin: 1px 0 0;
-
-      .item {
-        line-height: 20px;
-        padding: 5px 0 0 5px;
-        color: #333;
-        cursor: pointer;
-        outline: unset;
-
-        &.active,
-        &:focus,
-        &:hover {
-          background-color: #2b5480;
-          color: #fff;
-        }
-      }
-    }
-  }
-  .form-group {
-    &__input {
-      display: flex;
-      .form-validate {
-        svg {
-          width: 24px;
-          height: 24px;
-        }
-      }
-      input {
-        width: 100%;
-      }
-      &-error {
-        margin-top: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="autocomplete" @click.stop>
+    <div class="content-search">
+      <div v-show="props.loading" class="loader">
+        <atoms-loader-pre-loader
+          id="loader"
+          :test-id="`${props.testId}-pre-loader`"
+          class="content-area__loading"
+          :show="true"
+        />
+      </div>
+      <div class="search-icon">
+        <atoms-the-icon
+          fill="#666"
+          stroke-width="10"
+          class="alert-icon search-icon"
+          name="search"
+        />
+      </div>
+
+      <div class="clr-error">
+        <div class="form-group__input">
+          <input
+            :id="`${props.testId}-search-input`"
+            v-model.trim="search"
+            :data-id="`${props.testId}-search-input`"
+            type="text"
+            class="search-input"
+            :class="fieldErrorText && 'clr-input'"
+            autocomplete="off"
+            :placeholder="props.placeholder"
+            @blur="onInitValidation"
+            @input="onSearch"
+          />
+          <div v-show="fieldErrorText" class="form-validate">
+            <atoms-the-icon class="is-error tooltip-trigger" name="info" />
+          </div>
+        </div>
+        <div
+          v-show="fieldErrorText"
+          class="form-group__input-error clr-subtext"
+        >
+          {{ fieldErrorText }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-show="isShow"
+      :class="['content-filtered', { active: items.length }]"
+    >
+      <ul class="dropdown-menu filtered-items">
+        <li
+          v-for="(item, key) in items"
+          :key="`${item}_${key}`"
+          :class="['item', { active: key === selectedTabIndex }]"
+          :data-id="item.testId"
+          @mouseenter="selectedTabIndex = key"
+          @click="onSelect(key)"
+        >
+          {{ item.firstText }}<b>{{ item.secondText }}</b
+          >{{ item.thirdText }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    placeholder: string
+    items: string[]
+    loading?: boolean
+    testId?: string
+    ms?: number
+    showValidation?: boolean
+    errorText?: string
+  }>(),
+  {
+    testId: 'ui-autocomplete',
+    ms: 500,
+    loading: false,
+    showValidation: false,
+    errorText: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'search', value: string): void
+  (event: 'select', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const search = ref<string>('')
+
+let timer: NodeJS.Timeout
+const onSearch = (): void => {
+  onInitValidation()
+  clearTimeout(timer)
+  timer = setTimeout(
+    (value) => {
+      emits('search', value)
+    },
+    props.ms,
+    search.value
+  )
+  selectedTabIndex.value = 0
+}
+const isInitFieldValidation = ref<boolean>(false)
+const onInitValidation = (): void => {
+  isInitFieldValidation.value = true
+}
+const fieldErrorText = computed<string>(() => {
+  if (!isInitFieldValidation.value) return ''
+
+  if (!search.value) return localization.value.common.fieldRequired
+  else if (props.showValidation) return props.errorText
+})
+const items = computed<any[]>(() => {
+  return [...props.items].map((text) => {
+    const term = text.match(new RegExp(search.value, 'i'))?.[0]
+    const texts = term ? text.split(term) : text
+    return {
+      firstText: texts[0],
+      secondText: term,
+      thirdText: texts[1],
+      testId: `${term}-filtered-item`,
+    }
+  })
+})
+
+const selectedTabIndex = ref<number>(0)
+const onSelect = (key: number): void => {
+  search.value = props.items[key]
+  emits('select', search.value)
+  isHide.value = true
+}
+
+const isHide = ref<boolean>(false)
+const isShow = computed<boolean>(
+  () => Boolean(items.value.length) && !isHide.value
+)
+
+const onKeyDown = (event: KeyboardEvent): void => {
+  switch (event.code) {
+    case 'ArrowUp':
+      prevTabItem()
+      break
+    case 'ArrowDown':
+      nextTabItem()
+      break
+    case 'Enter':
+      event.preventDefault()
+      onSelect(selectedTabIndex.value)
+      break
+    case 'Tab':
+      isHide.value = true
+      break
+  }
+}
+
+const nextTabItem = (): void => {
+  if (selectedTabIndex.value === items.value.length - 1)
+    selectedTabIndex.value = 0
+  else selectedTabIndex.value++
+}
+
+const prevTabItem = (): void => {
+  if (selectedTabIndex.value === 0)
+    selectedTabIndex.value = items.value.length - 1
+  else selectedTabIndex.value--
+}
+
+watch(
+  () => props.items,
+  (newValue) => {
+    if (newValue.length) {
+      isHide.value = false
+    }
+  }
+)
+window.addEventListener('keydown', onKeyDown, true)
+watch(isHide, (newValue) => {
+  if (!newValue) {
+    window.addEventListener('keydown', onKeyDown, true)
+  } else {
+    window.removeEventListener('keydown', onKeyDown, true)
+  }
+})
+watch(
+  () => props.showValidation,
+  (newValue: boolean) => {
+    isInitFieldValidation.value = newValue
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.autocomplete {
+  max-width: 180px;
+  position: relative;
+
+  .content-search {
+    .loader {
+      position: absolute;
+      top: 3px;
+      left: -6px;
+      z-index: 1;
+      height: 16px;
+      width: 16px;
+
+      #loader {
+        height: 100%;
+        width: 100%;
+
+        :deep(.spinner-inverse) {
+          min-width: auto;
+          min-height: auto;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .search-icon {
+      position: absolute;
+      width: 17px;
+      top: 2px;
+      bottom: 0;
+    }
+    .search-input {
+      background-color: white;
+      padding: 0 6px 0 20px;
+    }
+  }
+
+  .content-filtered {
+    position: absolute;
+    display: block;
+    overflow-y: visible;
+    height: auto;
+    visibility: visible;
+    will-change: transform;
+    top: 0;
+    left: 0;
+    transform: translate3d(0px, 25px, 0px);
+    width: 250px;
+    z-index: 1000;
+
+    &.active .filtered-items {
+      max-height: 164px;
+      visibility: visible;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      min-width: 96px;
+      max-width: 288px;
+      border: 0.8px solid #ccc;
+      padding: 9.6px 0;
+      z-index: 1060;
+      overflow: auto;
+      width: 100%;
+      margin: 1px 0 0;
+
+      .item {
+        line-height: 20px;
+        padding: 5px 0 0 5px;
+        color: #333;
+        cursor: pointer;
+        outline: unset;
+
+        &.active,
+        &:focus,
+        &:hover {
+          background-color: #2b5480;
+          color: #fff;
+        }
+      }
+    }
+  }
+  .form-group {
+    &__input {
+      display: flex;
+      .form-validate {
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
+      input {
+        width: 100%;
+      }
+      &-error {
+        margin-top: 0;
+      }
+    }
+  }
+}
+</style>