bfg-common 1.5.92 → 1.5.94

package/components/atoms/autocomplete/Autocomplete.vue

@@ -1,362 +1,361 @@
-<template>
-  <div class="autocomplete" @click.stop>
-    <div class="content-search">
-      <div v-show="props.loading" class="loader">
-        <atoms-loader-pre-loader
-          :show="true"
-          :test-id="`${props.testId}-pre-loader`"
-          id="loader"
-          class="content-area__loading"
-        />
-      </div>
-      <div class="search-icon">
-        <atoms-the-icon
-          stroke-width="10"
-          class="alert-icon search-icon"
-          name="search"
-        />
-      </div>
-
-      <div class="clr-error">
-        <div class="form-group__input">
-          <input
-            v-model.trim="searchLocal"
-            :id="`${props.testId}-search-input`"
-            :data-id="`${props.testId}-search-input`"
-            :class="fieldErrorText && 'clr-input'"
-            :placeholder="props.placeholder"
-            type="text"
-            class="search-input"
-            autocomplete="off"
-            @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 itemsLocal"
-          :key="`${item}_${key}`"
-          :class="['item', { active: key === selectedTabIndex }]"
-          :data-id="item.testId"
-          @mouseenter="selectedTabIndex = key"
-          @click="onSelect(key)"
-        >
-          <template v-for="(part, i) in item.parts" :key="i">
-            <span v-if="part.highlight" class="highlight">{{ part.text }}</span>
-            <span v-else>{{ part.text }}</span>
-          </template>
-          <!--          {{ 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 searchLocal = defineModel<string>()
-
-// let timer: NodeJS.Timeout
-const onSearch = (): void => {
-  // onInitValidation()
-  // clearTimeout(timer)
-  // timer = setTimeout(
-  //   (value) => {
-  //     emits('search', value)
-  //   },
-  //   props.ms,
-  // )
-  selectedTabIndex.value = 0
-}
-const isInitFieldValidation = ref<boolean>(false)
-const onInitValidation = (): void => {
-  isInitFieldValidation.value = true
-}
-const fieldErrorText = computed<string>(() => {
-  if (!isInitFieldValidation.value) return ''
-  // if (!searchLocal.value) return localization.value.common.fieldRequired
-  else if (props.showValidation) return props.errorText
-})
-const itemsLocal = computed<any[]>(() => {
-  const search = searchLocal.value
-  const regex = new RegExp(search, 'gi')
-
-  return [...props.items].map((text) => {
-    const parts: { text: string; highlight: boolean }[] = []
-
-    let lastIndex = 0
-    for (const match of text.matchAll(regex)) {
-      const index = match.index!
-      if (index > lastIndex) {
-        parts.push({ text: text.slice(lastIndex, index), highlight: false })
-      }
-      parts.push({ text: match[0], highlight: true })
-      lastIndex = index + match[0].length
-    }
-
-    // Остаток строки
-    if (lastIndex < text.length) {
-      parts.push({ text: text.slice(lastIndex), highlight: false })
-    }
-
-    return {
-      parts,
-      testId: `${search}-filtered-item`,
-    }
-  })
-})
-
-// const itemsLocal = computed<any[]>(() => {
-//   return [...props.items].map((text) => {
-//     const termMatch = text.match(new RegExp(searchLocal.value, 'i'))
-//     const term = termMatch?.[0]
-//
-//     // const term = text.match(new RegExp(searchLocal.value, 'i'))?.[0]
-//     // const texts = term ? text.split(term) : text
-//
-//     const index = text.toLowerCase().indexOf(term.toLowerCase())
-//     const firstText = text.slice(0, index)
-//     const secondText = text.slice(index, index + term.length)
-//     const thirdText = text.slice(index + term.length)
-//
-//     // console.log(texts, 'Mаrilyne.Sipes87@locаl')
-//
-//     return {
-//       firstText,
-//       secondText,
-//       thirdText,
-//       testId: `${term}-filtered-item`,
-//     }
-//   })
-// })
-
-const selectedTabIndex = ref<number>(0)
-const onSelect = (key: number): void => {
-  // searchLocal.value = props.items[key]
-  emits('select', props.items[key])
-  isHide.value = true
-}
-
-const isHide = ref<boolean>(false)
-const isShow = computed<boolean>(() => !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 === itemsLocal.value.length - 1)
-    selectedTabIndex.value = 0
-  else selectedTabIndex.value++
-}
-
-const prevTabItem = (): void => {
-  if (selectedTabIndex.value === 0)
-    selectedTabIndex.value = itemsLocal.value.length - 1
-  else selectedTabIndex.value--
-}
-
-watch(
-  () => props.items,
-  (newValue) => {
-    if (newValue.length > 1) {
-      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: var(--z-dropdown);
-      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;
-      height: 17px;
-      top: 5px;
-      bottom: 0;
-
-      .alert-icon.search-icon {
-        fill: #666;
-      }
-    }
-    .search-input {
-      background-color: var(--modal-bg-color);
-      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: var(--z-dropdown);
-
-    &.active .filtered-items {
-      max-height: 110px;
-      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: calc(var(--z-dropdown) + 1);
-      overflow: auto;
-      width: 100%;
-      margin: 1px 0 0;
-      background: var(--modal-bg-color);
-
-      .item {
-        line-height: 20px;
-        padding: 5px 0 0 5px;
-        color: #333;
-        cursor: pointer;
-        outline: unset;
-
-        &.active,
-        &:focus,
-        &:hover {
-          background-color: #2b5480;
-          color: #fff;
-        }
-
-        .highlight {
-          font-weight: bold;
-        }
-      }
-    }
-  }
-  .form-group {
-    &__input {
-      display: flex;
-      .form-validate {
-        svg {
-          width: 24px;
-          height: 24px;
-        }
-      }
-      input {
-        width: 100%;
-      }
-      &-error {
-        margin-top: 0;
-      }
-    }
-  }
-}
-:root.dark-theme {
-  .autocomplete .content-search .search-icon .alert-icon.search-icon {
-    fill: #adbbc4;
-  }
-
-  .autocomplete .content-filtered.active .filtered-items {
-    border: 0.8px solid #666;
-    .item {
-      color: #aaa;
-    }
-  }
-}
-</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`"
+          :show="true"
+          class="content-area__loading"
+        />
+      </div>
+      <div class="search-icon">
+        <atoms-the-icon
+          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="searchLocal"
+            :data-id="`${props.testId}-search-input`"
+            :class="['search-input', fieldErrorText && 'clr-input']"
+            :placeholder="props.placeholder"
+            type="text"
+            autocomplete="off"
+            @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 itemsLocal"
+          :key="`${item}_${key}`"
+          :class="['item', { active: key === selectedTabIndex }]"
+          :data-id="item.testId"
+          @mouseenter="selectedTabIndex = key"
+          @click="onSelect(key)"
+        >
+          <template v-for="(part, i) in item.parts" :key="i">
+            <span v-if="part.highlight" class="highlight">{{ part.text }}</span>
+            <span v-else>{{ part.text }}</span>
+          </template>
+          <!--          {{ 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 searchLocal = defineModel<string>()
+
+// let timer: NodeJS.Timeout
+const onSearch = (): void => {
+  // onInitValidation()
+  // clearTimeout(timer)
+  // timer = setTimeout(
+  //   (value) => {
+  //     emits('search', value)
+  //   },
+  //   props.ms,
+  // )
+  selectedTabIndex.value = 0
+}
+const isInitFieldValidation = ref<boolean>(false)
+const onInitValidation = (): void => {
+  isInitFieldValidation.value = true
+}
+const fieldErrorText = computed<string>(() => {
+  if (!isInitFieldValidation.value) return ''
+  // if (!searchLocal.value) return localization.value.common.fieldRequired
+  else if (props.showValidation) return props.errorText
+})
+const itemsLocal = computed<any[]>(() => {
+  const search = searchLocal.value
+  const regex = new RegExp(search, 'gi')
+
+  return [...props.items].map((text) => {
+    const parts: { text: string; highlight: boolean }[] = []
+
+    let lastIndex = 0
+    for (const match of text.matchAll(regex)) {
+      const index = match.index!
+      if (index > lastIndex) {
+        parts.push({ text: text.slice(lastIndex, index), highlight: false })
+      }
+      parts.push({ text: match[0], highlight: true })
+      lastIndex = index + match[0].length
+    }
+
+    // Остаток строки
+    if (lastIndex < text.length) {
+      parts.push({ text: text.slice(lastIndex), highlight: false })
+    }
+
+    return {
+      parts,
+      testId: `${search}-filtered-item`,
+    }
+  })
+})
+
+// const itemsLocal = computed<any[]>(() => {
+//   return [...props.items].map((text) => {
+//     const termMatch = text.match(new RegExp(searchLocal.value, 'i'))
+//     const term = termMatch?.[0]
+//
+//     // const term = text.match(new RegExp(searchLocal.value, 'i'))?.[0]
+//     // const texts = term ? text.split(term) : text
+//
+//     const index = text.toLowerCase().indexOf(term.toLowerCase())
+//     const firstText = text.slice(0, index)
+//     const secondText = text.slice(index, index + term.length)
+//     const thirdText = text.slice(index + term.length)
+//
+//     // console.log(texts, 'Mаrilyne.Sipes87@locаl')
+//
+//     return {
+//       firstText,
+//       secondText,
+//       thirdText,
+//       testId: `${term}-filtered-item`,
+//     }
+//   })
+// })
+
+const selectedTabIndex = ref<number>(0)
+const onSelect = (key: number): void => {
+  // searchLocal.value = props.items[key]
+  emits('select', props.items[key])
+  isHide.value = true
+}
+
+const isHide = ref<boolean>(false)
+const isShow = computed<boolean>(() => !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 === itemsLocal.value.length - 1)
+    selectedTabIndex.value = 0
+  else selectedTabIndex.value++
+}
+
+const prevTabItem = (): void => {
+  if (selectedTabIndex.value === 0)
+    selectedTabIndex.value = itemsLocal.value.length - 1
+  else selectedTabIndex.value--
+}
+
+watch(
+  () => props.items,
+  (newValue) => {
+    if (newValue.length > 1) {
+      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: var(--z-dropdown);
+      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;
+      height: 17px;
+      top: 5px;
+      bottom: 0;
+
+      .alert-icon.search-icon {
+        fill: #666;
+      }
+    }
+    .search-input {
+      background-color: var(--modal-bg-color);
+      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: var(--z-dropdown);
+
+    &.active .filtered-items {
+      max-height: 110px;
+      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: calc(var(--z-dropdown) + 1);
+      overflow: auto;
+      width: 100%;
+      margin: 1px 0 0;
+      background: var(--modal-bg-color);
+
+      .item {
+        line-height: 20px;
+        padding: 5px 0 0 5px;
+        color: #333;
+        cursor: pointer;
+        outline: unset;
+
+        &.active,
+        &:focus,
+        &:hover {
+          background-color: #2b5480;
+          color: #fff;
+        }
+
+        .highlight {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  .form-group {
+    &__input {
+      display: flex;
+      .form-validate {
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
+      input {
+        width: 100%;
+      }
+      &-error {
+        margin-top: 0;
+      }
+    }
+  }
+}
+:root.dark-theme {
+  .autocomplete .content-search .search-icon .alert-icon.search-icon {
+    fill: #adbbc4;
+  }
+
+  .autocomplete .content-filtered.active .filtered-items {
+    border: 0.8px solid #666;
+    .item {
+      color: #aaa;
+    }
+  }
+}
+</style>