bfg-common 1.0.0

package/components/atoms/autocomplete/Autocomplete.vue

@@ -0,0 +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>

package/components/atoms/collapse/CollapseNav.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="tabs-overflow bottom-right">
+    <button
+      :id="collapsedBtnId"
+      :class="[
+        'btn btn-link nav-link dropdown-toggle',
+        { active: collapsedBtnActive },
+      ]"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+      @mousedown="showMenu"
+    >
+      <atoms-the-icon
+        name="ellipsis-horizontal"
+        :class="['collapse-icon', { active: open }]"
+        width="16px"
+        height="16px"
+      />
+    </button>
+
+    <Teleport to="body">
+      <ul
+        v-show="open"
+        :class="['navbar-dropdown-menu', props.popupClass]"
+        :style="dropdownMenuStyles"
+      >
+        <li
+          v-for="(item, key) in items"
+          :key="key"
+          class="navbar-dropdown-menu-item"
+          @mousedown.stop
+        >
+          <div
+            v-if="item.separate"
+            class="navbar-dropdown-menu-separator"
+          ></div>
+          <atoms-collapse-nav-item
+            v-else
+            :test-id="collapsedBtnId"
+            :is-link="props.isLink"
+            :item="item"
+            :value="value"
+            btn-class="btn"
+            @change="change"
+            @select-file="onSelectFile"
+          />
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_CollapseNavItem[]
+  isLink?: boolean
+  value?: number | string
+  popupClass?: string
+  closeAfterClick?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+  (event: 'select-file', value1: Event, value2: string): void
+}>()
+
+const change = (value: number): void => {
+  emits('change', value)
+  props.closeAfterClick && (open.value = false)
+}
+const onSelectFile = (event: Event, type: string): void => {
+  emits('select-file', event, type)
+}
+
+const collapsedBtnId = ref<string>('')
+
+const route = useRoute()
+const collapsedBtnActive = computed<boolean>(() => {
+  if (props.isLink)
+    return props.items.some((item) => route.path.includes(item.path || ''))
+
+  return props.items.some((item) => item.value === props.value)
+})
+
+const open = ref<boolean>(false)
+const hover = ref<boolean>(false)
+const dropdownMenuStyles = ref({})
+const showMenu = (): void => {
+  if (open.value) {
+    hideMenu(true)
+    return
+  }
+
+  open.value = true
+
+  const btn = document.querySelector(`#${collapsedBtnId.value}`)
+  const { top, height, right } = btn!.getBoundingClientRect()
+  dropdownMenuStyles.value = {
+    top: `${top + height}px`,
+    left: `${right}px`,
+  }
+}
+const hideMenu = (force?: boolean): void => {
+  if (hover.value && !force) return
+
+  open.value = false
+}
+
+const windowClick = () => {
+  hideMenu()
+}
+onMounted(() => {
+  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
+  window.addEventListener('mousedown', windowClick)
+})
+onUnmounted(() => {
+  window.removeEventListener('mousedown', windowClick)
+})
+</script>
+
+<style scoped lang="scss">
+.tabs-overflow {
+  position: absolute;
+  top: 0;
+  right: 24px;
+
+  .dropdown-toggle {
+    .collapse-icon {
+      fill: var(--main-color-mode);
+
+      &.active {
+        fill: #0077b8;
+      }
+    }
+  }
+}
+
+.navbar-dropdown-menu {
+  position: fixed;
+  z-index: 1000000000;
+  transform: translateX(-100%);
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  margin-top: 2px;
+  background-color: var(--global-bg-color);
+  padding: 12px 0;
+}
+.navbar-dropdown-menu-separator {
+  margin: 6px 0;
+  border-bottom: 0.8px solid #e8e8e8;
+}
+</style>

package/components/atoms/collapse/CollapseNavItem.vue

@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <NuxtLink v-if="props.isLink" :to="props.item.path">
+      <button
+        :id="`${props.testId}-button`"
+        :disabled="props.item.disabled"
+        :class="[
+          props.btnClass,
+          {
+            disabled: props.item.disabled,
+          },
+        ]"
+      >
+        <span
+          v-if="props.item.iconClassName"
+          :class="['icon', props.item.iconClassName]"
+        ></span>
+        <span v-else>{{ props.item.text }}</span>
+      </button>
+    </NuxtLink>
+    <label v-else-if="props.item.uploaded">
+      <span class="btn btn-link">
+        {{ props.item.text }}
+      </span>
+      <input
+        :id="`select-file-button-${props.item.type}`"
+        type="file"
+        :disabled="props.item.disabled"
+        :multiple="false"
+        class="input-file"
+        @change="(event) => onSelectFiles(event)"
+      />
+    </label>
+    <button
+      v-else
+      :id="`${props.testId}-button`"
+      :disabled="props.item.disabled"
+      :class="[
+        props.btnClass,
+        {
+          active: props.value === props.item.value,
+          disabled: props.item.disabled,
+        },
+      ]"
+      @click="change(props.item.value)"
+    >
+      <span
+        v-if="props.item.iconClassName"
+        :class="['icon', props.item.iconClassName]"
+      ></span>
+      <span v-else>{{ props.item.text }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    item: UI_I_CollapseNavItem
+    value?: number | string
+    isLink?: boolean
+    btnClass?: string
+  }>(),
+  { testId: 'ui-collapse-nav-item' }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number | string): void
+  (event: 'select-file', value1: Event, value2: string): void
+}>()
+
+const change = (value: number | string): void => {
+  emits('change', value)
+}
+
+const onSelectFiles = (event: Event): void => {
+  emits('select-file', event, '' + props.item.value || '')
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+%hover-effect {
+  border-bottom: 1px solid var(--row-hover-border-color);
+  background-color: var(--row-hover-bg-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+%active-mode {
+  background-color: var(--row-selected-bg-color);
+  color: var(--row-selected-text-color);
+}
+%border-effect {
+  box-shadow: 0 -0.15rem 0 var(--nav-active-box-shadow-color) inset;
+}
+
+.nav {
+  .router-link-active .nav-link:not(.nav-link.disabled) {
+    @extend %border-effect;
+    color: var(--nav-link-active-color);
+  }
+  &-link {
+    color: var(--nav-link-color);
+    &.active {
+      color: var(--nav-link-active-color);
+    }
+    &:hover:not(&.active) {
+      color: var(--nav-link-hover-color);
+    }
+    :is(&.active, &:hover) {
+      @extend %border-effect;
+    }
+    &.disabled {
+      cursor: not-allowed;
+      & > span {
+        pointer-events: none;
+      }
+      :is(&.active, &:hover) {
+        box-shadow: none;
+      }
+    }
+  }
+  .icon {
+    width: 24px;
+    height: 24px;
+    display: block;
+  }
+}
+
+.navbar-dropdown-menu {
+  &-item {
+    a {
+      text-decoration: none;
+    }
+    .btn {
+      @include text($fs: 14px, $fw: 200, $c: #666);
+      padding: 3px 24px;
+      background: transparent;
+      border: 0;
+      border-bottom: 1px solid transparent;
+      display: block;
+      height: auto;
+      line-height: inherit;
+      margin: 0;
+      text-transform: none;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      letter-spacing: normal;
+      text-align: left;
+
+      &.active {
+        @extend %active-mode;
+      }
+      &:hover {
+        @extend %hover-effect;
+      }
+      &:disabled {
+        cursor: not-allowed;
+        & > span {
+          pointer-events: none;
+        }
+      }
+    }
+    .router-link-active .btn {
+      @extend %active-mode;
+    }
+  }
+}
+.btn {
+  &--large {
+  }
+  &--medium {
+  }
+  &--small {
+    @include text($fs: 11px, $fw: 200, $c: #666);
+    height: 24px;
+    line-height: initial;
+    span {
+      @include text($fs: 11px, $fw: 200);
+    }
+  }
+}
+
+.input-file {
+  display: none;
+}
+</style>

package/components/atoms/collapse/models/interfaces.ts

@@ -0,0 +1,9 @@
+export interface UI_I_CollapseNavItem {
+  text: string
+  path?: string
+  iconClassName?: string
+  value?: number | string
+  disabled?: boolean
+  separate?: boolean
+  uploaded?: boolean
+}

package/components/atoms/combobox/Combobox.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    tabindex="-1"
+    :class="['tooltip-top-left combobox-container', { isOpen }]"
+  >
+    <atoms-the-icon
+      v-show="!isOpen"
+      class="angle-icon clr-icon"
+      name="angle"
+      @click="onFocusInput"
+    />
+    <input
+      :id="id"
+      v-model="modelValueLocal"
+      type="text"
+      tabindex="-1"
+      :disabled="props.disabled"
+      @focus="showMenu"
+      @blur="hideMenu"
+    />
+    <atoms-the-icon
+      v-show="isOpen"
+      class="close-icon clr-icon"
+      name="close-circle"
+      @mousedown="clear"
+    />
+
+    <Teleport to="body">
+      <div v-show="isOpen" class="dropdown-menu" :style="dropdownMenuStyles">
+        <button
+          v-for="(item, key) in props.items"
+          :key="key"
+          :id="`${id}-${key}`"
+          class="btn btn-link dropdown-item"
+          @mousedown="select(item.value)"
+        >
+          {{ item.text }}
+        </button>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_OptionItem[]
+  modelValue?: string | number
+  disabled?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string | number): void
+  (event: 'select', value: string | number): void
+}>()
+
+const modelValueLocal = computed<string | number | undefined>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    if (newValue === undefined) return
+    emits('update:model-value', newValue)
+  },
+})
+
+const id = `combobox${useUniqueId()}`
+
+const dropdownMenuStyles = ref({})
+const showMenu = (): void => {
+  isOpen.value = true
+
+  const input = document.querySelector(`#${id}`)
+  if (!input) return
+
+  const { top, height, left } = input.getBoundingClientRect()
+
+  dropdownMenuStyles.value = {
+    top: `${top + height}px`,
+    left: `${left}px`,
+  }
+}
+const hideMenu = (): void => {
+  isOpen.value = false
+}
+
+const select = (value: string | number): void => {
+  emits('update:model-value', value)
+  emits('select', value)
+}
+const clear = (): void => {
+  emits('update:model-value', '')
+}
+
+const isOpen = ref(false)
+
+const onFocusInput = (event: Event) => {
+  const target = event.target as HTMLElement
+  target && target.nextSibling && target.nextSibling.focus()
+}
+</script>
+
+<style scoped lang="scss">
+.combobox-container {
+  max-width: 800px;
+  position: relative;
+
+  .close-icon,
+  .angle-icon {
+    fill: #565656;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    transform: rotate(180deg);
+    cursor: pointer;
+  }
+}
+
+.stack-block-expanded > .stack-block-label {
+  .close-icon,
+  .angle-icon {
+    fill: #ffffff;
+  }
+}
+
+.dropdown-menu {
+  position: fixed;
+  z-index: 1000000000;
+  visibility: unset;
+}
+</style>