bfg-common 1.0.0

package/components/atoms/tabs/VerticalTabs.vue

@@ -0,0 +1,81 @@
+<template>
+  <nav class="sidenav vertical-groups-sidenav">
+    <ul class="sidenav-content">
+      <li
+        v-for="(item, key) in props.items"
+        :id="`${props.testId}-item-${key}`"
+        :key="item.value"
+        :class="[
+          'vertical-nav-link group-nav-link',
+          { active: item.value === props.modelValue },
+        ]"
+        :title="item.text"
+        @click="selectItem(item.value)"
+      >
+        {{ item.text }}
+      </li>
+    </ul>
+  </nav>
+</template>
+<script setup lang="ts">
+import { UI_I_VerticalTabs } from '~/components/atoms/tabs/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | number
+    items: UI_I_VerticalTabs[]
+    hasErrorMessages?: number | boolean
+    testId?: string
+  }>(),
+  { testId: 'ui-vertical-tabs' }
+)
+
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string): void
+  (event: 'set-alert'): void
+}>()
+
+const selectItem = (value: string): void => {
+  if (
+    props.hasErrorMessages === undefined ||
+    props.hasErrorMessages === 0 ||
+    props.hasErrorMessages === false
+  ) {
+    emits('update:model-value', value)
+    return
+  }
+  emits('set-alert')
+}
+</script>
+
+<style lang="scss" scoped>
+.vertical-groups-sidenav {
+  min-height: 94%;
+  background-color: #fafafa;
+
+  .vertical-nav-link {
+    display: inline-block;
+    width: 100%;
+    margin-top: 5px;
+    padding-left: 12px;
+    color: var(--grey-100);
+    border-bottom: 1px solid transparent;
+    text-decoration: none;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 2.5px 0 0 2.5px;
+
+    &.active {
+      color: var(--vertical-nav-active-item-color);
+      background: var(--vertical-nav-active-bg-color);
+      border-bottom: 1px solid transparent;
+    }
+
+    &:hover:not(.active) {
+      background: var(--vertical-nav-hover-bg-color);
+      color: var(--blue-950);
+      border-bottom: 1px solid #666;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,4 @@
+export interface UI_I_VerticalTabs {
+    text: string
+    value: string | number
+}

package/components/atoms/tabs/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_ButtonSize = 'large' | 'medium' | 'small'

package/components/atoms/tooltip/Models/interfaces.ts

@@ -0,0 +1,4 @@
+export interface UI_I_ElPosition {
+  top: string
+  left: string
+}

package/components/atoms/tooltip/Signpost.vue

@@ -0,0 +1,224 @@
+<template>
+  <div
+    id="signpost"
+    :class="['signpost', signpostClass]"
+    :style="signpostStyles"
+    @click.stop
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
+  >
+    <div class="signpost-wrap">
+      <div class="popover-pointer" />
+      <div class="signpost-content-header">
+        <button
+          :id="`${props.testId}-close-icon`"
+          class="signpost-action close"
+          @click="hide"
+        >
+          <atoms-the-icon class="close-icon" name="close" />
+        </button>
+      </div>
+      <div class="signpost-content-body">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ElPosition } from '~/components/atoms/tooltip/Models/interfaces'
+const props = withDefaults(
+  defineProps<{
+    elemId: string
+    testId?: string
+  }>(),
+  { testId: 'ui-signpost' }
+)
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+const hide = (): void => {
+  emits('hide')
+}
+
+const signpostStyles = ref<UI_I_ElPosition | null>(null)
+watch(
+  () => props.elemId,
+  (id: string) => {
+    const elem = (document.getElementById(id) as HTMLDivElement) || null
+    const { width, x, y } = elem.getBoundingClientRect()
+
+    signpostStyles.value = {
+      top: `${y}px`,
+      left: `${x + width / 2}px`,
+    }
+    setTimeout(() => {
+      setSignpostPosition()
+    }, 0)
+  },
+  { immediate: true }
+)
+const signpostClass = ref<string[]>([])
+const setSignpostPosition = (): void => {
+  const signpost =
+    (document.getElementById('signpost') as HTMLDivElement) || null
+  const signpostRect = (signpost?.getBoundingClientRect() as DOMRect) || null
+
+  type PositionX = 'right' | 'left'
+  let positionX: PositionX = 'right'
+
+  type PositionY = 'top' | 'middle'
+  let positionY: PositionY = 'middle'
+
+  const isOutRight = signpostRect.left + signpostRect.width > window.innerWidth
+  const isOutTop = signpostRect.top < 0
+
+  if (isOutTop) {
+    positionY = 'top'
+  }
+  if (isOutRight) {
+    positionX = 'left'
+  }
+
+  signpostClass.value.push(positionY)
+  signpostClass.value.push(positionX)
+  signpostClass.value.push('show')
+}
+
+const hovered = ref(false)
+const windowClick = (): void => {
+  hide()
+}
+const windowScroll = (): void => {
+  if (hovered.value) {
+    return
+  }
+  hide()
+}
+onMounted(() => {
+  setTimeout(() => {
+    window.addEventListener('click', windowClick)
+    window.addEventListener('scroll', windowScroll, true)
+  })
+})
+onUnmounted(() => {
+  window.removeEventListener('click', windowClick)
+  window.removeEventListener('scroll', windowScroll, true)
+})
+</script>
+
+<style scoped lang="scss">
+.signpost {
+  opacity: 0;
+  position: fixed;
+  cursor: default;
+  transform: translateY(calc(-50% + 14px)) translateX(20px);
+  z-index: 1000000000;
+
+  &.show {
+    opacity: 1;
+  }
+  &.left {
+    transform: translateY(calc(-50% + 14px)) translateX(calc(-100% - 20px));
+
+    .signpost-wrap {
+      .popover-pointer {
+        left: 100%;
+        border-right: unset;
+        border-left: 12px solid var(--signpost-border-color);
+
+        &::before {
+          border-right: unset;
+          border-left: 12px solid var(--signpost-bgcolor);
+          left: unset;
+          right: 2px;
+        }
+      }
+    }
+  }
+  &.top {
+    transform: translateY(calc(0% + 10px)) translateX(20px);
+
+    &.left {
+      transform: translateY(calc(0% + 10px)) translateX(calc(-100% - 20px));
+
+      .popover-pointer {
+        top: 5px;
+      }
+    }
+
+    .signpost-wrap {
+      .popover-pointer {
+        top: 5px;
+      }
+    }
+  }
+
+  .signpost-wrap {
+    border-radius: 3px;
+    border: 1px solid var(--signpost-border-color);
+    background-color: var(--signpost-bgcolor);
+    position: relative;
+
+    .popover-pointer {
+      border-bottom: 12px solid transparent;
+      top: 50%;
+      transform: translateY(-50%);
+      border-right: 12px solid var(--signpost-border-color);
+      left: -12px;
+      height: 0;
+      width: 0;
+      position: absolute;
+
+      &::before {
+        border-bottom: 12px solid transparent;
+        top: 1px;
+        border-right: 12px solid var(--signpost-bgcolor);
+        left: 2px;
+        content: '';
+        height: 0;
+        width: 0;
+        position: absolute;
+      }
+    }
+
+    .signpost-content-header {
+      display: flex;
+      justify-content: flex-end;
+      position: absolute;
+      width: 100%;
+      background-color: inherit;
+      top: 0;
+
+      button {
+        line-height: 24px;
+
+        .close-icon {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+
+    .signpost-content-body {
+      padding: 24px;
+      max-height: 480px;
+      overflow-y: auto;
+      text-transform: none;
+    }
+  }
+}
+</style>
+
+<style>
+:root {
+  --signpost-bgcolor: #fff;
+  --signpost-border-color: #b3b3b3;
+  --signpost-color: #acbac3;
+}
+:root.dark-theme {
+  --signpost-bgcolor: #21333b;
+  --signpost-border-color: #000;
+  --signpost-color: #acbac3;
+}
+</style>

package/components/atoms/tooltip/Text.vue

@@ -0,0 +1,39 @@
+<template>
+  <span
+    :class="['icon-info-standart']"
+    @mouseover="hoverClass = true"
+    @mouseleave="hoverClass = false"
+  />
+  <span v-show="hoverClass" class="tooltip">
+    <span class="tooltiptext">
+      {{ props.text }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  text: string
+}>()
+
+const hoverClass = ref<boolean>(false)
+
+</script>
+<style lang="scss">
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+
+    & .tooltiptext {
+        text-align: center;
+        padding: 5px 2px;
+        border-radius: 2px;
+        border: 1px solid var(--global-font-color);
+        color: var(--global-font-color);
+        background-color: var(--global-bg-color);
+        position: absolute;
+        z-index: 1;
+    }
+}
+</style>

package/components/atoms/tooltip/Tooltip.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div
+      :id="id"
+      class="flex"
+      @mouseover="setPosition"
+      @mouseleave="show = false"
+    >
+      <slot name="elem" />
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-show="show"
+        class="tooltip-top-right tooltip-content"
+        :style="tooltipStyles"
+      >
+        <slot name="content" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ElPosition } from '~/components/atoms/tooltip/Models/interfaces'
+
+const tooltipStyles = ref<UI_I_ElPosition | null>(null)
+
+const id = `tooltip${useUniqueId()}`
+
+const show = ref<boolean>(false)
+const setPosition = (): void => {
+  const elem = (document.getElementById(id) as HTMLDivElement) || null
+  const { x, y, height, width } = elem.getBoundingClientRect()
+
+  tooltipStyles.value = {
+    top: `${y + height}px`,
+    left: `${x + width / 2}px`,
+  }
+  show.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.tooltip-top-right {
+  min-width: 200px;
+  padding: 9px 14px;
+  position: fixed;
+  z-index: 1000000;
+}
+.tooltip-content::before {
+  border-left: 0.25rem solid transparent;
+  border-top: 0.208333rem solid transparent;
+  border-right: 0.25rem solid transparent;
+  border-bottom: 0.208333rem solid transparent;
+}
+</style>

package/components/atoms/tooltip/TooltipError.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <div
+      :id="id"
+      class="flex element-content"
+      @mouseover="setPosition"
+      @mouseleave="show = false"
+    >
+      <slot name="elem" />
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-show="show"
+        :class="[
+          'vx-error-tooltip right in tooltip',
+          { 'has-error': props.hasError },
+        ]"
+        :style="tooltipStyles"
+      >
+        <slot name="content" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ElPosition } from '~/components/atoms/tooltip/Models/interfaces'
+const props = defineProps<{
+  hasError: boolean
+  selector?: string
+}>()
+const emits = defineEmits<{
+  (event: 'remove'): void
+}>()
+
+const tooltipStyles = ref<UI_I_ElPosition | null>(null)
+
+const id = `tooltip${useUniqueId()}`
+
+const show = ref<boolean>(false)
+const setPosition = (): void => {
+  const elem = (document.getElementById(id + '') as HTMLDivElement) || null
+  const { x, y, height, width } = elem.getBoundingClientRect()
+
+  tooltipStyles.value = {
+    top: `${y + height / 2}px`,
+    left: `${x + width}px`,
+  }
+  show.value = true
+}
+
+const remove = (): void => {
+  emits('remove')
+}
+
+watch(
+  () => props.hasError,
+  (value) => {
+    const selector = props.selector
+    if (!selector) return
+
+    setTimeout(() => {
+      const selectElement = document.querySelector(selector) as HTMLElement
+      if (!selectElement) return
+
+      if (!value) {
+        selectElement.style.borderColor = ''
+        selectElement.removeEventListener('blur', remove)
+        return
+      }
+      selectElement.addEventListener('blur', remove)
+      selectElement.style.borderColor = 'red'
+    }, 500)
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.element-content {
+  width: max-content;
+}
+.vx-error-tooltip {
+  max-width: 300px;
+  padding: 4px 8px;
+  position: fixed;
+  background-color: #db2100;
+  color: #ffffff;
+  z-index: 1000000;
+  transform: translateY(-50%);
+  text-align: center;
+  font-size: 12px;
+  line-height: 14px;
+  opacity: 0;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: calc(50% - 6px);
+    left: -5px;
+    border-bottom: 6px solid transparent;
+    border-top: 6px solid transparent;
+    border-right: 5px solid #db2100;
+    opacity: 0;
+  }
+
+  &.has-error,
+  &.has-error:before {
+    opacity: 1;
+  }
+}
+</style>

package/components/common/accordion/Accordion.vue

@@ -0,0 +1,176 @@
+<template>
+  <div
+    :class="['text-wrapper flex-align-center', { active: isActive }]"
+    @click="isActive = !isActive"
+  >
+    <template v-if="parentName">
+      <span class="parent-name text">{{ parentName }}</span>
+      <atoms-the-icon class="trigger-icon parent" name="angle" />
+    </template>
+    <template v-if="childName">
+      <span class="child-name text">{{ childName }}</span>
+      <atoms-the-icon class="trigger-icon child" name="angle" />
+    </template>
+  </div>
+  <div
+    v-on-click-outside="closeDropMenuMobile"
+    :class="['accordion-dropdown-block', { active: isActive }]"
+  >
+    <common-accordion-recursion
+      v-for="(item, key) in accordionLocal"
+      :id="`${props.testId}-${key}`"
+      :test-id="`${props.testId}-${key}`"
+      :key="item.id"
+      :accordion="item"
+      @change="onSelect"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+import { UI_I_AccordionRecursion } from '~/components/common/accordion/models/interfaces'
+
+const props = defineProps<{
+  testId: string
+  accordion: UI_I_AccordionRecursion[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'change', value: UI_I_AccordionRecursion): void
+}>()
+
+const parentName = ref<string>('')
+const childName = ref<string>('')
+const accordionLocal = computed<UI_I_AccordionRecursion[]>(
+  () => props.accordion
+)
+
+const closeDropMenuMobile = (): void => {
+  isActive.value = false
+}
+
+const route = useRoute()
+
+watch(
+  [route, accordionLocal],
+  () => {
+    if (!accordionLocal.value.length) return
+
+    const routePath = route.path
+    accordionLocal.value.forEach((item) => {
+      if (item?.path === routePath) {
+        childName.value = item.name
+      } else if (item.children) {
+        item.children.forEach((child) => {
+          if (child?.path === routePath) {
+            parentName.value = item.name
+            childName.value = child.name
+          }
+        })
+      }
+    })
+  },
+  { immediate: true }
+)
+
+const isActive = ref<boolean>(false)
+
+const onSelect = (item: UI_I_AccordionRecursion): void => {
+  if (item.children) return
+
+  emits('change', item)
+  isActive.value = false
+  childName.value = item.name
+
+  accordionLocal.value.forEach((accordion) => {
+    if (accordion.children) {
+      accordion.children.forEach((child) => {
+        if (child.name === item.name) parentName.value = accordion.name
+      })
+    }
+  })
+}
+</script>
+
+<style lang="scss">
+.text-wrapper {
+  border-bottom: 1px solid black;
+  width: max-content;
+  cursor: pointer;
+  margin: 10px 0;
+  padding: 0 0.6rem 0 0;
+  display: none;
+
+  .text {
+    font-size: 13px;
+
+    &.parent-name {
+      font-weight: 700;
+      margin-right: 7px;
+    }
+  }
+
+  .trigger-icon {
+    fill: var(--triger-icon-color);
+    width: 13px;
+
+    &.parent {
+      transform: rotate(90deg);
+      margin-right: 7px;
+    }
+    &.child {
+      margin-left: 15px;
+      transform: rotate(180deg);
+    }
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .accordion-parent {
+    flex-direction: column;
+
+    .accordion-view.sidenav {
+      overflow-y: unset !important;
+    }
+
+    .sidenav {
+      width: auto;
+      max-width: unset;
+    }
+    .content-area {
+      padding: 0;
+    }
+  }
+  .text-wrapper {
+    display: flex;
+
+    &.active {
+      border-bottom: 1px solid #0079b8;
+    }
+  }
+  .accordion-dropdown-block {
+    display: none;
+
+    &.active {
+      display: unset;
+      padding: 12px 0;
+      position: absolute;
+      background-color: var(--global-bg-color);
+      left: 0;
+      right: 0;
+      top: 0;
+      min-width: 96px;
+      max-width: 288px;
+      border: 1px solid (var(--global-border-color));
+      z-index: 10001;
+      overflow-y: auto;
+      inset: 0 auto auto 0;
+      max-height: calc(((((100% - 86px) - 12px) - 12px) - 1px) - 1px);
+      transform: translateX(10px) translateY(111px);
+      border-radius: 0.15rem;
+      box-shadow: 0 1px 0.125rem rgba(115, 115, 115, 0.25);
+    }
+  }
+}
+</style>