bfg-common 1.4.180 → 1.4.181

package/components/atoms/datepicker/lib/config/{datapicker.ts → datepicker.ts}

@@ -1,43 +1,46 @@
-import type{ UI_I_Localization } from '~/lib/models/interfaces'
-
-export const getMonthsFunc = (localization: UI_I_Localization): string[] => {
-  return [
-    localization.common.january,
-    localization.common.february,
-    localization.common.march,
-    localization.common.april,
-    localization.common.may,
-    localization.common.june,
-    localization.common.july,
-    localization.common.august,
-    localization.common.september,
-    localization.common.october,
-    localization.common.november,
-    localization.common.december,
-  ]
-}
-
-export const getWeekdaysFunc = (
-  localization: UI_I_Localization,
-  languageCode: string
-): string[] => {
-  let result = [
-    localization.common.sunday,
-    localization.common.monday,
-    localization.common.tuesday,
-    localization.common.wednesday,
-    localization.common.thursday,
-    localization.common.friday,
-    localization.common.saturday,
-  ]
-  result = result.map((week: string, key: number) =>
-    languageCode === 'hy_AM' && key === 5 ? week[0] + week[1] : week[0]
-  )
-
-  if (languageCode !== 'en_US') {
-    const first = result.shift()
-    first && result.push(first)
-  }
-
-  return result
-}
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+export const getMonthsFunc = (localization: UI_I_Localization): string[] => {
+  return [
+    localization.common.january,
+    localization.common.february,
+    localization.common.march,
+    localization.common.april,
+    localization.common.may,
+    localization.common.june,
+    localization.common.july,
+    localization.common.august,
+    localization.common.september,
+    localization.common.october,
+    localization.common.november,
+    localization.common.december,
+  ]
+}
+
+export const getWeekdaysFunc = (
+  localization: UI_I_Localization,
+  languageCode: string
+): string[] => {
+  let result = [
+    localization.common.sunday,
+    localization.common.monday,
+    localization.common.tuesday,
+    localization.common.wednesday,
+    localization.common.thursday,
+    localization.common.friday,
+    localization.common.saturday,
+  ]
+  result = result.map((week: string, key: number) =>
+    languageCode === 'hy_AM' && key === 5 ? week[0] + week[1] : week[0]
+  )
+
+  if (languageCode !== 'en_US') {
+    const first = result.shift()
+    first && result.push(first)
+  }
+
+  return result
+}
+
+export const datepickerWidth = 314
+export const datepickerHeight = 278

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.180",
+  "version": "1.4.181",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",

package/components/atoms/comboDropdownMenu/ComboDropdownMenu.vue

@@ -1,357 +0,0 @@
-<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`"
-              type="search"
-              autocomplete="off"
-              maxlength="300"
-              class="form-control dropdown-search-box"
-              :placeholder="localization.common.search"
-              @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>

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

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