bfg-common 1.1.2 → 1.1.4

package/components/atoms/autocomplete/Autocomplete.vue

@@ -1,236 +1,236 @@
-<template>
-  <div class="autocomplete" @click.stop>
-    <div class="content-search">
-      <div v-show="props.loading" class="loader">
-        <atoms-loader-pre-loader
-          id="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>
-      <input
-        :id="`${props.testId}-search-input`"
-        v-model.trim="search"
-        type="text"
-        class="search-input"
-        :placeholder="props.placeholder"
-        @input="onSearch"
-      />
-    </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 }]"
-          @mouseenter="selectedTabIndex = key"
-          @click="onSelect(key)"
-        >
-          {{ item.firstText }}<b>{{ item.secondText }}</b
-          >{{ item.thirdText }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    placeholder: string
-    items: string[]
-    loading: boolean
-    ms?: number
-  }>(),
-  {
-    testId: 'ui-autocomplete',
-    ms: 500,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'search', value: string): void
-  (event: 'select', value: string): void
-}>()
-
-const search = ref<string>('')
-
-let timer: NodeJS.Timeout
-const onSearch = (): void => {
-  clearTimeout(timer)
-  timer = setTimeout(
-    (value) => {
-      emits('search', value)
-    },
-    props.ms,
-    search.value
-  )
-}
-
-const items = computed<any[]>(() => {
-  return [...props.items].map((text) => {
-    const term = search.value.toLowerCase()
-    const texts = text.toLowerCase().split(term)
-    return {
-      firstText: texts[0],
-      secondText: term,
-      thirdText: texts[1],
-    }
-  })
-})
-
-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':
-      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,
-  (value) => {
-    if (value.length) {
-      isHide.value = false
-    }
-  }
-)
-window.addEventListener('keydown', onKeyDown, true)
-watch(isHide, (value) => {
-  if (!value) {
-    window.addEventListener('keydown', onKeyDown, true)
-  } else {
-    window.removeEventListener('keydown', onKeyDown, 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;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="autocomplete" @click.stop>
+    <div class="content-search">
+      <div v-show="props.loading" class="loader">
+        <atoms-loader-pre-loader
+          id="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>
+      <input
+        :id="`${props.testId}-search-input`"
+        v-model.trim="search"
+        type="text"
+        class="search-input"
+        :placeholder="props.placeholder"
+        @input="onSearch"
+      />
+    </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 }]"
+          @mouseenter="selectedTabIndex = key"
+          @click="onSelect(key)"
+        >
+          {{ item.firstText }}<b>{{ item.secondText }}</b
+          >{{ item.thirdText }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    placeholder: string
+    items: string[]
+    loading: boolean
+    ms?: number
+  }>(),
+  {
+    testId: 'ui-autocomplete',
+    ms: 500,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'search', value: string): void
+  (event: 'select', value: string): void
+}>()
+
+const search = ref<string>('')
+
+let timer: NodeJS.Timeout
+const onSearch = (): void => {
+  clearTimeout(timer)
+  timer = setTimeout(
+    (value) => {
+      emits('search', value)
+    },
+    props.ms,
+    search.value
+  )
+}
+
+const items = computed<any[]>(() => {
+  return [...props.items].map((text) => {
+    const term = search.value.toLowerCase()
+    const texts = text.toLowerCase().split(term)
+    return {
+      firstText: texts[0],
+      secondText: term,
+      thirdText: texts[1],
+    }
+  })
+})
+
+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':
+      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,
+  (value) => {
+    if (value.length) {
+      isHide.value = false
+    }
+  }
+)
+window.addEventListener('keydown', onKeyDown, true)
+watch(isHide, (value) => {
+  if (!value) {
+    window.addEventListener('keydown', onKeyDown, true)
+  } else {
+    window.removeEventListener('keydown', onKeyDown, 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;
+        }
+      }
+    }
+  }
+}
+</style>