bfg-common 1.5.92 → 1.5.94

package/components/atoms/comboDropdownMenu/ComboDropdownMenu.vue

@@ -1,357 +1,357 @@
-<template>
-  <div class="combo-dropdown-content">
-    <div>
-      <div>
-        <div
-          :class="['alarm-trigger-combo-box dropdown', { open: isShowList }]"
-          @mouseenter="isHover = true"
-          @mouseleave="isHover = false"
-        >
-          <div class="select dropdown-toggle">
-            <input
-              v-model="selectedLocal"
-              :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">
-            <input
-              id="search-input"
-              v-model="search"
-              :data-id="`${props.testId}-search-field`"
-              :placeholder="localization.common.search"
-              type="search"
-              autocomplete="off"
-              maxlength="300"
-              class="form-control dropdown-search-box"
-              @input="onInputSearch"
-            />
-            <div class="dropdown-result-holder">
-              <p v-if="search && !filteredData.length" class="empty-text">
-                <i>{{ localization.common.noItemsDisplay }}</i>
-              </p>
-              <div>
-                <div
-                  v-for="(item, key) in filteredData"
-                  :key="key"
-                  :data-id="item.text"
-                  :class="[
-                    'clr-tree-node item-row dropdown-parent-item',
-                    { open: arrowKeys[key] },
-                    { searched: isSearched },
-                  ]"
-                >
-                  <div
-                    v-if="!isSearched"
-                    class="clr-tree-node-content-container"
-                  >
-                    <button
-                      :data-id="`${item.testId}-toggle-button`"
-                      aria-hidden="true"
-                      type="button"
-                      class="clr-treenode-caret"
-                      @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.text} (${item.itemsCount})`"
-                        class="dropdown-item-text category-name"
-                      >
-                        {{ item.text }} </b
-                      ><b
-                        :title="`${item.text} (${item.itemsCount})`"
-                        class="dropdown-item-text category-size"
-                      >
-                        &nbsp;({{ item.itemsCount }})</b
-                      >
-                    </div>
-                  </div>
-                  <div
-                    :class="[
-                      'clr-treenode-children children-content',
-                      { open: arrowKeys[key] },
-                    ]"
-                  >
-                    <div
-                      v-for="(item2, key2) in item.childs"
-                      :key="key2"
-                      :data-id="item2.testId"
-                      class="clr-tree-node"
-                      @click="onSelect(item2.value)"
-                    >
-                      <div class="clr-tree-node-content-container">
-                        <div class="clr-treenode-content item-title-content">
-                          <button
-                            :title="item2.text"
-                            :data-id="item2.text"
-                            type="button"
-                            class="btn-link dropdown-child-item"
-                          >
-                            <span :title="item2.text" 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_ComboDropdownChild,
-  UI_I_ComboDropdownSearched,
-  UI_I_ComboDropdownSearchedItem,
-} from '~/components/atoms/comboDropdownMenu/lib/models/interfaces'
-
-const props = defineProps<{
-  selected: string
-  items: UI_I_ComboDropdown[]
-  testId: string
-}>()
-const emits = defineEmits<{
-  (event: 'select', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedLocal = ref<string>(props.selected)
-watch(
-  () => props.selected,
-  (newValue) => {
-    selectedLocal.value = newValue
-  }
-)
-const search = ref<string>('')
-const isSearched = ref<boolean>(false)
-const onInputSearch = (): void => {
-  isSearched.value = !!search.value
-}
-
-// New Function for search
-// const text = ref<string>('Hello Worlds!')
-// const searchQuery = ref<string>('')
-//
-// const highlightText = computed<string>((): any => {
-//   if (!searchQuery.value) return text.value
-//   const regex = new RegExp(`(${searchQuery.value})`, 'gi')
-//   return text.value.replace(regex, '<bold style="font-weight: 500">$1</bold>')
-// })
-const constructChildesBySearch = (
-  data: UI_I_ComboDropdownChild[]
-): UI_I_ComboDropdownSearchedItem[] => {
-  if (!isSearched.value)
-    return data.map((item) => {
-      return {
-        text: item.text,
-        value: item.value,
-        firstText: item.text,
-        secondText: '',
-        thirdText: '',
-        testId: `${item.text}-child`,
-      }
-    })
-
-  const searchLower = search.value.toLowerCase()
-  const searchLength = searchLower.length
-  const result: UI_I_ComboDropdownSearchedItem[] = []
-  data.forEach((item) => {
-    const showTextLower = item.text.toLowerCase()
-    const showText = item.text
-    if (showTextLower.includes(searchLower)) {
-      const getIndex = showTextLower.indexOf(searchLower)
-
-      const newValue = {
-        text: item.text,
-        value: item.value,
-        firstText: showText.slice(0, getIndex),
-        secondText: showText.slice(getIndex, getIndex + searchLength),
-        thirdText: showText.slice(getIndex + searchLength, showText.length),
-        testId: `${item.text}-child`,
-      }
-
-      result.push(newValue)
-    }
-  })
-  return result
-}
-
-const filteredData = computed<UI_I_ComboDropdownSearched[]>(() => {
-  const result: UI_I_ComboDropdownSearched[] = []
-
-  props.items.forEach((item) => {
-    const filteredChilds = constructChildesBySearch(item.childs)
-
-    if (filteredChilds.length)
-      result.push({
-        text: item.text,
-        itemsCount: item.itemsCount,
-        childs: filteredChilds,
-        testId: item.testId,
-      })
-  })
-  return result
-})
-
-const arrowKeys = ref<boolean[]>([])
-watch(
-  () => props.items,
-  (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) {
-    isSearched.value = false
-    return
-  }
-
-  setTimeout(() => {
-    document.getElementById('search-input')?.focus()
-  }, 0)
-  selectedLocal.value && (search.value = selectedLocal.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 => {
-  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;
-
-      #search-input {
-        margin: 5px 2px 3px;
-        width: calc(100% - 4px);
-        height: 34px;
-        padding: 6px 12px;
-        color: #333;
-        font-size: 13px;
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-        border: 1px solid #949494;
-        background-image: none;
-
-        &:focus {
-          outline: none;
-          border-color: #3cf;
-        }
-      }
-      .dropdown-result-holder {
-        padding-top: 10px;
-        max-height: 18rem;
-        overflow-x: hidden;
-        overflow-y: auto;
-
-        .empty-text {
-          padding: 0 0.24rem 1.2rem 0.72rem;
-        }
-
-        .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>
+<template>
+  <div class="combo-dropdown-content">
+    <div>
+      <div>
+        <div
+          :class="['alarm-trigger-combo-box dropdown', { open: isShowList }]"
+          @mouseenter="isHover = true"
+          @mouseleave="isHover = false"
+        >
+          <div class="select dropdown-toggle">
+            <input
+              v-model="selectedLocal"
+              :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">
+            <input
+              id="search-input"
+              v-model="search"
+              :data-id="`${props.testId}-search-field`"
+              :placeholder="localization.common.search"
+              type="search"
+              autocomplete="off"
+              maxlength="300"
+              class="form-control dropdown-search-box"
+              @input="onInputSearch"
+            />
+            <div class="dropdown-result-holder">
+              <p v-if="search && !filteredData.length" class="empty-text">
+                <i>{{ localization.common.noItemsDisplay }}</i>
+              </p>
+              <div>
+                <div
+                  v-for="(item, key) in filteredData"
+                  :key="key"
+                  :data-id="item.text"
+                  :class="[
+                    'clr-tree-node item-row dropdown-parent-item',
+                    { open: arrowKeys[key] },
+                    { searched: isSearched },
+                  ]"
+                >
+                  <div
+                    v-if="!isSearched"
+                    class="clr-tree-node-content-container"
+                  >
+                    <button
+                      :data-id="`${item.testId}-toggle-button`"
+                      aria-hidden="true"
+                      type="button"
+                      class="clr-treenode-caret"
+                      @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.text} (${item.itemsCount})`"
+                        class="dropdown-item-text category-name"
+                      >
+                        {{ item.text }} </b
+                      ><b
+                        :title="`${item.text} (${item.itemsCount})`"
+                        class="dropdown-item-text category-size"
+                      >
+                        &nbsp;({{ item.itemsCount }})</b
+                      >
+                    </div>
+                  </div>
+                  <div
+                    :class="[
+                      'clr-treenode-children children-content',
+                      { open: arrowKeys[key] },
+                    ]"
+                  >
+                    <div
+                      v-for="(item2, key2) in item.childs"
+                      :key="key2"
+                      :data-id="item2.testId"
+                      class="clr-tree-node"
+                      @click="onSelect(item2.value)"
+                    >
+                      <div class="clr-tree-node-content-container">
+                        <div class="clr-treenode-content item-title-content">
+                          <button
+                            :title="item2.text"
+                            :data-id="item2.text"
+                            type="button"
+                            class="btn-link dropdown-child-item"
+                          >
+                            <span :title="item2.text" 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_ComboDropdownChild,
+  UI_I_ComboDropdownSearched,
+  UI_I_ComboDropdownSearchedItem,
+} from '~/components/atoms/comboDropdownMenu/lib/models/interfaces'
+
+const props = defineProps<{
+  selected: string
+  items: UI_I_ComboDropdown[]
+  testId: string
+}>()
+const emits = defineEmits<{
+  (event: 'select', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedLocal = ref<string>(props.selected)
+watch(
+  () => props.selected,
+  (newValue) => {
+    selectedLocal.value = newValue
+  }
+)
+const search = ref<string>('')
+const isSearched = ref<boolean>(false)
+const onInputSearch = (): void => {
+  isSearched.value = !!search.value
+}
+
+// New Function for search
+// const text = ref<string>('Hello Worlds!')
+// const searchQuery = ref<string>('')
+//
+// const highlightText = computed<string>((): any => {
+//   if (!searchQuery.value) return text.value
+//   const regex = new RegExp(`(${searchQuery.value})`, 'gi')
+//   return text.value.replace(regex, '<bold style="font-weight: 500">$1</bold>')
+// })
+const constructChildesBySearch = (
+  data: UI_I_ComboDropdownChild[]
+): UI_I_ComboDropdownSearchedItem[] => {
+  if (!isSearched.value)
+    return data.map((item) => {
+      return {
+        text: item.text,
+        value: item.value,
+        firstText: item.text,
+        secondText: '',
+        thirdText: '',
+        testId: `${item.text}-child`,
+      }
+    })
+
+  const searchLower = search.value.toLowerCase()
+  const searchLength = searchLower.length
+  const result: UI_I_ComboDropdownSearchedItem[] = []
+  data.forEach((item) => {
+    const showTextLower = item.text.toLowerCase()
+    const showText = item.text
+    if (showTextLower.includes(searchLower)) {
+      const getIndex = showTextLower.indexOf(searchLower)
+
+      const newValue = {
+        text: item.text,
+        value: item.value,
+        firstText: showText.slice(0, getIndex),
+        secondText: showText.slice(getIndex, getIndex + searchLength),
+        thirdText: showText.slice(getIndex + searchLength, showText.length),
+        testId: `${item.text}-child`,
+      }
+
+      result.push(newValue)
+    }
+  })
+  return result
+}
+
+const filteredData = computed<UI_I_ComboDropdownSearched[]>(() => {
+  const result: UI_I_ComboDropdownSearched[] = []
+
+  props.items.forEach((item) => {
+    const filteredChilds = constructChildesBySearch(item.childs)
+
+    if (filteredChilds.length)
+      result.push({
+        text: item.text,
+        itemsCount: item.itemsCount,
+        childs: filteredChilds,
+        testId: item.testId,
+      })
+  })
+  return result
+})
+
+const arrowKeys = ref<boolean[]>([])
+watch(
+  () => props.items,
+  (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) {
+    isSearched.value = false
+    return
+  }
+
+  setTimeout(() => {
+    document.getElementById('search-input')?.focus()
+  }, 0)
+  selectedLocal.value && (search.value = selectedLocal.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 => {
+  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;
+
+      #search-input {
+        margin: 5px 2px 3px;
+        width: calc(100% - 4px);
+        height: 34px;
+        padding: 6px 12px;
+        color: #333;
+        font-size: 13px;
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+        border: 1px solid #949494;
+        background-image: none;
+
+        &:focus {
+          outline: none;
+          border-color: #3cf;
+        }
+      }
+      .dropdown-result-holder {
+        padding-top: 10px;
+        max-height: 18rem;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        .empty-text {
+          padding: 0 0.24rem 1.2rem 0.72rem;
+        }
+
+        .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>