bfg-common 1.0.0

package/components/atoms/datepicker/config/datapicker.ts

@@ -0,0 +1,43 @@
+import { UI_I_Localization } from '~/models/interfaces'
+
+export const getMonthsFunc = (localization: UI_I_Localization): string[] => {
+  return [
+    localization.january,
+    localization.february,
+    localization.march,
+    localization.april,
+    localization.may,
+    localization.june,
+    localization.july,
+    localization.august,
+    localization.september,
+    localization.october,
+    localization.november,
+    localization.december,
+  ]
+}
+
+export const getWeekdaysFunc = (
+  localization: UI_I_Localization,
+  languageCode: string
+): string[] => {
+  let result = [
+    localization.sunday,
+    localization.monday,
+    localization.tuesday,
+    localization.wednesday,
+    localization.thursday,
+    localization.friday,
+    localization.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
+}

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

@@ -0,0 +1,8 @@
+export interface UI_I_Items {
+  text: number | string
+  class: string
+}
+
+export interface UI_I_AllShortMonths {
+  [key: string]: string[]
+}

package/components/atoms/dropdown/Portlet.spec.ts

@@ -0,0 +1,26 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Portlet from './Portlet.vue'
+
+const factory = () => {
+  return mount(Portlet, {
+    props: {
+      title: 'Title'
+    }
+  })
+}
+
+describe('Portlet.vue', () => {
+  test('test props', async () => {
+    const wrapper = await factory()
+
+    expect(wrapper.find('.titlebar-text').text()).toBe('Title')
+  })
+  test('test portlet collapse', async () => {
+    const wrapper = await factory()
+
+    expect(wrapper.find('.portlet-content').attributes().style).not.toBe('display: none;')
+    await wrapper.find('.portlet-titlebar').trigger('click')
+    expect(wrapper.find('.portlet-content').attributes().style).toBe('display: none;')
+  })
+})

package/components/atoms/dropdown/Portlet.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="portlet">
+    <div
+      class="portlet-titlebar"
+      :class="{ disabled }"
+      @click="togglePortlet"
+    >
+      <atoms-the-icon
+        :class="['arrow-icon', { collapsed: portletCollapsed }]"
+        name="arrow"
+      />
+
+      <span class="titlebar-text">{{ title }}</span>
+    </div>
+
+    <div v-show="!portletCollapsed" class="portlet-content">
+      <slot name="portletBody" />
+    </div>
+    <div v-show="!portletCollapsed" class="portlet-footer">
+      <slot name="portletFooter" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string,
+  disabled?: boolean
+}>()
+
+const isOpen = ref(false)
+
+const portletCollapsed = computed<boolean>(() => {
+  if (props.disabled) { return true }
+  return isOpen.value
+})
+
+const togglePortlet = () => (isOpen.value = !isOpen.value)
+</script>
+
+<style scoped lang="scss">
+.portlet {
+  box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 10%);
+  min-height: 30px;
+  border: 1px solid var(--portlet-border-color);
+  border-radius: 3px;
+  overflow: auto;
+  background: var(--portlet-bg-color);
+  margin: 0 0 12px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  .portlet-titlebar {
+    cursor: pointer;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    margin: 0;
+    padding: 12px 10px;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+
+    &.disabled {
+      opacity: 0.3;
+      pointer-events: none;
+    }
+
+    .titlebar-text {
+      flex: 1 1 100%;
+      display: inline-flex!important;
+      white-space: nowrap;
+      overflow: hidden!important;
+      padding: 0!important;
+      box-sizing: border-box;
+      max-width: none!important;
+      font-size: 14px;
+    }
+
+    .arrow-icon {
+      transition: all 0.2s ease-in 0s;
+      fill: #0079b8;
+
+      &.collapsed {
+        transform: rotate(180deg);
+      }
+    }
+    &:hover {
+      .arrow-icon {
+        fill: #004a70;
+      }
+    }
+
+  }
+
+  .portlet-content {
+    padding: 0 10px 5px;
+  }
+}
+</style>
+
+<style>
+:root {
+  --portlet-bg-color: #fff;
+  --portlet-border-color: #d3d3d3;
+}
+:root.dark-theme {
+  --portlet-bg-color: transparent;
+  --portlet-border-color: #000000;
+}
+</style>

package/components/atoms/dropdown/dropdown/Dropdown.vue

@@ -0,0 +1,148 @@
+<template>
+  <div :class="['dropdown', { open }]">
+    <div
+      v-on-click-outside="onClickOutsideHandler"
+      class="dropdown-toggle-container"
+      @click="showDropMenu"
+    >
+      <span class="nav-link">
+        <span class="nav-icon user-menu-large">
+          <slot name="icon">
+            <atoms-the-icon class="user-icon" name="user" />
+          </slot>
+          <span v-if="props.title">{{ title }}</span>
+          <atoms-the-icon class="angle-icon down" name="angle" />
+        </span>
+      </span>
+    </div>
+    <div
+      v-show="open && dropMenu?.length"
+      ref="ignoreElRef"
+      class="dropdown-menu position-right"
+    >
+      <div v-for="(item, key) in dropMenu" :key="key">
+        <button
+            :id="`${props.testId}-item`"
+          class="dropdown-item"
+          :class="item.disabled && 'disabled'"
+          @click="onSelect(key)"
+        >
+          <a v-if="item.href" :id="`${props.testId}-link`" :href="item.href">{{ item.text }}</a>
+          <a v-else>{{ item.text }} </a>
+        </button>
+        <div v-if="item.divider" class="dropdown-divider" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+import { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/models/interfaces'
+
+const emits = defineEmits(['select'])
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    title?: string
+    dropMenu: UI_I_DropMenu<string>[]
+  }>(),
+  { testId: 'ui-dropdown' }
+)
+
+const open = ref<boolean>(false)
+const showDropMenu = (): void => {
+  open.value = !open.value
+}
+const onSelect = (key: number): void => {
+  const { dropMenu } = props
+
+  if (dropMenu[key].disabled) return
+
+  if (dropMenu[key].closeAfterClick) open.value = false
+  emits('select', props.dropMenu[key])
+}
+const hide = (): void => {
+  open.value = false
+}
+
+const ignoreElRef = ref<Event | null>(null)
+const onClickOutsideHandler = [hide, { ignore: [ignoreElRef] }]
+</script>
+
+<style scoped lang="scss">
+.dropdown {
+  height: 100%;
+
+  .dropdown-toggle-container {
+    height: 100%;
+    cursor: pointer;
+
+    .nav-link {
+      height: 100%;
+      padding: 0;
+
+      .user-menu-large {
+        width: auto;
+        display: flex;
+        align-items: center;
+        padding: 0 9px;
+        font-size: inherit;
+        line-height: 3rem;
+        &.nav-icon {
+          line-height: 3rem;
+        }
+
+        .user-icon {
+          width: 24px;
+          height: 24px;
+          fill: #fafafa;
+        }
+        .angle-icon {
+          width: 16px;
+          height: 16px;
+          fill: #fafafa;
+
+          &.down {
+            transform: rotate(-180deg);
+          }
+        }
+        span {
+          margin-right: 4px;
+          margin-left: 4px;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+  .dropdown-menu {
+    background-color: var(--dropdown-bg-color);
+    border-color: var(--block-border-color);
+    z-index: 10000;
+
+    .dropdown-item {
+      font-size: 0.7rem;
+      border-bottom: 1px solid transparent;
+      &:hover {
+        background-color: var(--row-hover-bg-color);
+        border-color: var(--row-hover-border-color);
+      }
+      & > a {
+        color: var(--dropdown-item-color);
+        &:active {
+          color: #004a70;
+        }
+      }
+      &.disabled {
+        border-bottom: none;
+        > a {
+          text-decoration: none;
+        }
+      }
+    }
+    .dropdown-divider {
+      border-color: var(--block-border-color);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,8 @@
+export interface UI_I_DropMenu<Action> {
+  text: string
+  action: Action
+  href?: string
+  disabled?: boolean
+  divider?: boolean
+  closeAfterClick?: boolean
+}

package/components/atoms/dropdown/tree/Tree.vue

@@ -0,0 +1,134 @@
+<template>
+  <div :class="['dropdown-tree dropdown', { open }]">
+    <button
+      :id="`${props.testId}`"
+      class="btn btn-outline-primary dropdown-toggle"
+      @click.stop="toggle"
+    >
+      <span class="title">{{ props.title }}</span>
+      <atoms-the-icon name="arrow" class="dropdown-arrow" />
+    </button>
+    <div v-show="open" id="dropdown-menu" class="dropdown-menu">
+      <div v-for="(item, key) in props.items" :key="key">
+        <h4>{{ item.text }}</h4>
+        <button
+          v-for="(item2, key2) in item.children"
+          :id="`${props.testId}-item-${key}-${key2}`"
+          :key="key2"
+          class="btn dropdown-item"
+          @click="select(item2)"
+        >
+          {{ item2.text }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_DropdownTreeItem,
+  UI_I_DropdownTreeItemChild,
+} from '~/components/atoms/dropdown/tree/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    items: UI_I_DropdownTreeItem[]
+    title: string
+  }>(),
+  { testId: 'ui-dropdown-tree' }
+)
+const emits = defineEmits(['select'])
+
+const select = (item: UI_I_DropdownTreeItemChild): void => {
+  emits('select', item)
+}
+
+const open = ref(false)
+const toggle = (): void => {
+  open.value = !open.value
+  if (open.value) {
+    setMenuPosition()
+  }
+}
+const setMenuPosition = (): void => {
+  const menu = document.getElementById('dropdown-menu') as HTMLDivElement | null
+  const btnEl = document.getElementById(
+    props.testId
+  ) as HTMLButtonElement | null
+  const btnRect = btnEl?.getBoundingClientRect() as DOMRect | undefined
+
+  if (!menu || !btnRect) return
+  menu.style.top = `${btnRect.bottom}px`
+  menu.style.left = `${btnRect.right}px`
+}
+
+const hide = (): void => {
+  open.value = false
+}
+const windowClick = (): void => {
+  hide()
+}
+const windowScroll = (): void => {
+  hide()
+}
+onMounted(() => {
+  window.addEventListener('click', windowClick)
+  window.addEventListener('scroll', windowScroll, true)
+})
+onUnmounted(() => {
+  window.removeEventListener('click', windowClick)
+  window.removeEventListener('scroll', windowScroll, true)
+})
+</script>
+
+<style scoped lang="scss">
+.dropdown-tree {
+  position: static;
+
+  .dropdown-toggle {
+    border-color: transparent;
+    position: relative;
+
+    &:hover {
+      background-color: transparent;
+    }
+    &:active {
+      box-shadow: unset;
+    }
+
+    .title {
+      font-size: 12px;
+    }
+
+    .dropdown-arrow {
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      transform: translateY(-50%) rotate(180deg);
+      top: 50%;
+      right: 12px;
+      fill: #007cbb;
+    }
+  }
+
+  .dropdown-menu {
+    position: fixed;
+    transform: translateX(-100%);
+
+    h4 {
+      font-size: 12px;
+      padding: 0 12px;
+      color: #333;
+      font-weight: 600;
+    }
+
+    button {
+      &:hover {
+        border-bottom: 1px solid #666;
+      }
+    }
+  }
+}
+</style>

package/components/atoms/dropdown/tree/models/interfaces.ts

@@ -0,0 +1,9 @@
+export interface UI_I_DropdownTreeItemChild {
+  text: string
+  value: number
+}
+
+export interface UI_I_DropdownTreeItem {
+  text: string
+  children: UI_I_DropdownTreeItemChild[]
+}

package/components/atoms/input/Search.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="search-input">
+    <div class="flex-header-container" />
+  </div>
+</template>
+
+<script></script>
+
+<style scoped lang="scss">
+.flex-header-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+}
+</style>

package/components/atoms/list/SelectList.vue

@@ -0,0 +1,62 @@
+<template>
+  <select
+    :id="`${props.testId}-select`"
+    v-model="selectedItem"
+    size="15"
+    class="list"
+  >
+    <option
+      v-for="(item, key) in props.items"
+      :key="key"
+      :disabled="item.disabled"
+      class="item"
+      :value="item.value"
+    >
+      <slot :name="`item${key}`">
+        {{ item.text }}
+      </slot>
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    items: UI_I_OptionItem[]
+    modelValue: string
+  }>(),
+  { testId: 'ui-select-list' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string): void
+}>()
+
+const selectedItem = computed<string>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.list {
+  outline: none;
+
+  .item {
+    padding: 3px 6px;
+    color: #000;
+
+    &:disabled {
+      color: #565656;
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+}
+</style>

package/components/atoms/list/SimpleList.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="list">
+    <div v-for="(item, key) in props.items" :key="key" class="item">
+      <slot :key="key" :item="item">
+        {{ item }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps<{
+  items: any[]
+}>()
+</script>
+
+<style scoped lang="scss">
+.list {
+  background-color: var(--block-view-bg-color);
+  border-radius: 3px;
+  font-weight: 500;
+  border: 1px solid var(--global-border-color);
+
+  .item {
+    padding: 6px 12px;
+  }
+}
+</style>