bfg-common 1.4.176 → 1.4.177

package/components/atoms/comboDropdownMenu/ComboDropdownMenu.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="combo-dropdown-content">
+    <div class="ng-star-inserted">
+      <div class="ng-pristine ng-invalid ng-touched">
+        <div
+          :class="['alarm-trigger-combo-box dropdown', { open: isShowList }]"
+          @mouseenter="isHover = true"
+          @mouseleave="isHover = false"
+        >
+          <div
+            class="select dropdown-toggle"
+            aria-haspopup="menu"
+            aria-expanded="false"
+          >
+            <input
+              v-model="modelValue"
+              :placeholder="localization.inventoryConfigure.selectTrigger"
+              :data-id="`${props.testId}-selected-field`"
+              type="text"
+              class="form-control dropdown-host"
+              @click="isShowList = !isShowList"
+            />
+          </div>
+          <div
+            v-if="isShowList"
+            class="combo-dropdown-menu dropdown-menu ng-star-inserted"
+            tabindex="0"
+            role="menu"
+          >
+            <input
+              id="search-input"
+              v-model="search"
+              type="search"
+              autocomplete="off"
+              maxlength="300"
+              class="form-control dropdown-search-box ng-pristine ng-valid ng-touched"
+              placeholder="Search"
+            />
+            <div class="dropdown-result-holder ng-star-inserted">
+              <div
+                tabindex="0"
+                role="tree"
+                aria-multiselectable="false"
+                class="ng-star-inserted"
+              >
+                <div
+                  v-for="(item, key) in filteredData"
+                  :key="key"
+                  :data-id="item.title"
+                  :class="[
+                    'clr-tree-node ng-star-inserted item-row dropdown-parent-item',
+                    { open: arrowKeys[key] },
+                    { searched: isSearched },
+                  ]"
+                  role="treeitem"
+                >
+                  <div
+                    v-if="!isSearched"
+                    role="treeitem"
+                    tabindex="-1"
+                    class="clr-tree-node-content-container"
+                    aria-expanded="true"
+                  >
+                    <button
+                      :data-id="`${item.testId}-toggle-button`"
+                      aria-hidden="true"
+                      type="button"
+                      tabindex="-1"
+                      class="clr-treenode-caret ng-star-inserted"
+                      @click="arrowKeys[key] = !arrowKeys[key]"
+                    >
+                      <atoms-the-icon
+                        :class="[
+                          'trigger-icon clr-icon',
+                          { open: arrowKeys[key] },
+                        ]"
+                        name="angle"
+                      />
+                    </button>
+                    <div class="clr-treenode-content item-title-content">
+                      <b
+                        :title="`${item.title} (${item.itemsCount})`"
+                        class="dropdown-item-text category-name"
+                      >
+                        {{ item.title }} </b
+                      ><b
+                        :title="`${item.title} (${item.itemsCount})`"
+                        class="dropdown-item-text category-size"
+                      >
+                        &nbsp;({{ item.itemsCount }})</b
+                      >
+                    </div>
+                  </div>
+                  <div
+                    :class="[
+                      'clr-treenode-children ng-trigger ng-trigger-toggleChildrenAnim children-content',
+                      { open: arrowKeys[key] },
+                    ]"
+                    role="group"
+                  >
+                    <div
+                      v-for="(item2, key2) in item.childs"
+                      :key="key2"
+                      :data-id="item2.testId"
+                      class="clr-tree-node ng-star-inserted"
+                      role="treeitem"
+                      @click="onSelect(item2.title)"
+                    >
+                      <div
+                        role="treeitem"
+                        tabindex="-1"
+                        class="clr-tree-node-content-container"
+                      >
+                        <div class="clr-treenode-content item-title-content">
+                          <button
+                            :title="item2.title"
+                            :data-id="item2.title"
+                            type="button"
+                            class="btn-link dropdown-child-item"
+                            tabindex="-1"
+                            role="menuitem"
+                            aria-disabled="false"
+                          >
+                            <span
+                              :title="item2.title"
+                              class="dropdown-item-text"
+                              >{{ item2.firstText }}<b>{{ item2.secondText }}</b
+                              >{{ item2.thirdText }}</span
+                            >
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_ComboDropdown,
+  UI_I_ComboDropdownSearched,
+  UI_I_ComboDropdownSearchedItem,
+} from '~/components/atoms/comboDropdownMenu/lib/models/interfaces'
+
+const props = defineProps<{
+  exportData: UI_I_ComboDropdown[]
+  testId: string
+}>()
+const modelValue = defineModel<string>()
+const emits = defineEmits<{
+  (event: 'select', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const search = ref<string>('')
+const isSearched = computed<boolean>(() => modelValue.value !== search.value)
+
+const constructChildesBySearch = (
+  data: string[]
+): UI_I_ComboDropdownSearchedItem[] => {
+  if (!isSearched.value)
+    return data.map((item) => {
+      return {
+        title: item,
+        firstText: item,
+        secondText: '',
+        thirdText: '',
+        testId: `${item}-child`,
+      }
+    })
+
+  const searchLower = search.value.toLowerCase()
+  const searchLength = searchLower.length
+  const result: UI_I_ComboDropdownSearchedItem[] = []
+  data.forEach((item) => {
+    const showTextLower = item.toLowerCase()
+    const showText = item
+    if (showTextLower.includes(searchLower)) {
+      const getIndex = showTextLower.indexOf(searchLower)
+
+      const newValue = {
+        title: item,
+        firstText: showText.slice(0, getIndex),
+        secondText: showText.slice(getIndex, getIndex + searchLength),
+        thirdText: showText.slice(getIndex + searchLength, showText.length),
+        testId: `${item}-child`,
+      }
+
+      result.push(newValue)
+    }
+  })
+  return result
+}
+
+const filteredData = computed<UI_I_ComboDropdownSearched[]>(() => {
+  return [...props.exportData].map((item) => {
+    return {
+      title: item.title,
+      itemsCount: item.itemsCount,
+      childs: constructChildesBySearch(item.childs),
+      testId: item.testId,
+    }
+  })
+})
+
+const arrowKeys = ref<boolean[]>([])
+watch(
+  () => props.exportData,
+  (newValue) => {
+    if (!newValue.length) return
+
+    newValue.forEach((_, key) => {
+      const currentValue = key === 0
+      arrowKeys.value.push(currentValue)
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+const isShowList = ref<boolean>(false)
+watch(isShowList, (newValue) => {
+  if (!newValue) return
+
+  setTimeout(() => {
+    document.getElementById('search-input')?.focus()
+  }, 0)
+  modelValue.value && (search.value = modelValue.value)
+})
+const isHover = ref<boolean>(false)
+
+const hideMenu = (force?: boolean): void => {
+  if (isHover.value && !force) return
+
+  isShowList.value = false
+}
+const windowClick = (): void => {
+  hideMenu()
+}
+const windowScroll = (): void => {
+  hideMenu()
+}
+
+const onSelect = (value: string): void => {
+  modelValue.value = value
+
+  emits('select', value)
+  hideMenu(true)
+}
+
+onMounted(() => {
+  window.addEventListener('click', windowClick)
+  window.addEventListener('scroll', windowScroll, true)
+})
+onUnmounted(() => {
+  window.removeEventListener('click', windowClick)
+  window.removeEventListener('scroll', windowScroll)
+})
+</script>
+
+<style scoped lang="scss">
+.combo-dropdown-content {
+  .alarm-trigger-combo-box {
+    position: static;
+
+    .combo-dropdown-menu {
+      position: absolute;
+      inset: 0 auto auto 0;
+      transform: translateX(15px) translateY(24px);
+      margin-top: -15px;
+      width: 30rem;
+
+      .dropdown-result-holder {
+        padding-top: 10px;
+        max-height: 18rem;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        .dropdown-parent-item {
+          &.open {
+            &.searched {
+              .children-content {
+                .item-title-content {
+                  .dropdown-child-item {
+                    padding-left: 14px;
+                  }
+                }
+              }
+            }
+
+            .trigger-icon {
+              transform: rotate(180deg);
+            }
+            .children-content {
+              overflow-y: visible;
+              height: auto;
+            }
+          }
+
+          .trigger-icon {
+            transform: rotate(90deg);
+          }
+          .children-content {
+            overflow-x: hidden;
+            margin-left: 0;
+            height: 0;
+            overflow-y: visible;
+
+            .item-title-content {
+              &:first-child {
+                padding-left: 0;
+              }
+
+              .dropdown-child-item {
+                padding-left: 28px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/components/atoms/comboDropdownMenu/lib/models/interfaces.ts

@@ -0,0 +1,21 @@
+export interface UI_I_ComboDropdown {
+  title: string
+  itemsCount: number
+  childs: string[]
+  testId: string
+}
+
+export interface UI_I_ComboDropdownSearchedItem {
+  title: string
+  firstText: string
+  secondText: string
+  thirdText: string
+  testId: string
+}
+
+export interface UI_I_ComboDropdownSearched {
+  title: string
+  itemsCount: number
+  childs: UI_I_ComboDropdownSearchedItem[]
+  testId: string
+}