bfg-common 1.0.0

package/components/common/context/Context.spec.ts

@@ -0,0 +1,20 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Context from './Context.vue'
+
+describe('Context.vue', () => {
+  test('testing popup position', () => {
+    const wrapper = mount(Context, {
+      props: {
+        contextMenu: {
+          x: 100,
+          y: 200,
+        },
+      },
+    })
+
+    const popup = wrapper.find('.context-popup')
+    expect(popup.attributes().style).toContain('100px')
+    expect(popup.attributes().style).toContain('200px')
+  })
+})

package/components/common/context/Context.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="context-popup"
+    :style="{
+      top: currentContextMenuY,
+      left: currentContextMenuX,
+    }"
+  >
+    <common-context-recursion
+      :action-loading="props.actionLoading"
+      :items="props.contextMenu.items"
+      @select-item="selectItem"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_ContextMenuItem,
+  UI_I_ContextMenu,
+} from '~/components/common/context/models/interfaces'
+
+const props = defineProps<{
+  contextMenu: UI_I_ContextMenu
+  actionLoading: string | null
+}>()
+const emits = defineEmits<{
+  (event: 'select-item', value: UI_I_ContextMenuItem): void
+  (event: 'hide'): void
+}>()
+const selectItem = (item: UI_I_ContextMenuItem): void => {
+  emits('select-item', item)
+}
+
+const windowMousedown = () => {
+  emits('hide')
+}
+onMounted(() => {
+  window.addEventListener('mousedown', windowMousedown)
+})
+onUnmounted(() => {
+  window.removeEventListener('mousedown', windowMousedown)
+})
+
+const currentContextMenuY = ref('')
+const currentContextMenuX = ref('')
+const setCurrentPositionsPopup = (): void => {
+  const contextMenuY = props.contextMenu.y
+  const contextMenuX = props.contextMenu.x
+
+  const contextWrap: HTMLElement | null =
+    document.querySelector('.context-wrap')
+  const contextW = contextWrap?.offsetWidth || 0
+  const contextH = contextWrap?.offsetHeight || 0
+
+  const windowW = window.innerWidth
+  const windowH = window.innerHeight
+
+  if (contextMenuY + contextH >= windowH) {
+    currentContextMenuY.value = 'auto'
+  } else {
+    currentContextMenuY.value = `${contextMenuY}px`
+  }
+
+  if (contextMenuX + contextW >= windowW) {
+    const divisionW = windowW - contextW
+    currentContextMenuX.value = `${divisionW}px`
+  } else {
+    currentContextMenuX.value = `${contextMenuX}px`
+  }
+}
+
+watch(
+  () => props.contextMenu.y,
+  (val) => {
+    if (!val) return
+
+    setTimeout(() => {
+      setCurrentPositionsPopup()
+    }, 0)
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.context-popup {
+  top: -9999px;
+  left: -9999px;
+  bottom: 0;
+  border: none;
+  box-sizing: content-box;
+  overflow: visible;
+  display: block;
+  position: fixed;
+  z-index: 10002;
+}
+</style>

package/components/common/context/ContextRecursion.spec.ts

@@ -0,0 +1,55 @@
+// import { describe, test, expect } from 'vitest'
+// import { mount } from '@vue/test-utils'
+// import ContextRecursion from './ContextRecursion.vue'
+//
+// const items = [
+//   {
+//     text: 'parent',
+//     actionType: 'addParent',
+//     iconClassName: 'icon-parent',
+//     isHeader: false,
+//     disabled: false,
+//     isShowItems: false,
+//     items: [
+//       {
+//         text: 'child',
+//         actionType: 'addChild',
+//         iconClassName: 'icon-child',
+//         isHeader: false,
+//         disabled: true,
+//         isShowItems: false,
+//         items: []
+//       }
+//     ]
+//   }
+// ]
+//
+// const factory = () => {
+//   return mount(ContextRecursion, {
+//     props: {
+//       items
+//     }
+//   })
+// }
+//
+// describe('ContextRecursion.vue', () => {
+//   test('testing select item', async () => {
+//     const wrapper = await factory()
+//
+//     const item = wrapper.find('.menu-item')
+//     await item.trigger('click')
+//     expect(wrapper.emitted().selectItem[0][0].actionType).toBe('addParent')
+//   })
+//   test('testing show items', async () => {
+//     const wrapper = await factory()
+//
+//     const item = wrapper.find('.context-link')
+//     await item.trigger('mouseenter')
+//     const popupContextRecursion1 = wrapper.find('atoms-popup-context-recursion')
+//     expect(popupContextRecursion1.exists()).toBe(true)
+//
+//     await item.trigger('mouseleave')
+//     const popupContextRecursion2 = wrapper.find('atoms-popup-context-recursion')
+//     expect(popupContextRecursion2.exists()).toBe(false)
+//   })
+// })

package/components/common/context/ContextRecursion.vue

@@ -0,0 +1,251 @@
+<template>
+  <ul class="context-wrap">
+    <span v-if="isLoading">
+      <atoms-loader-pre-loader
+        id="loader"
+        class="absolute-center tree-view__loading"
+        :show="true"
+      />
+    </span>
+    <li
+      v-for="(item, key) in props.items"
+      :key="key"
+      :class="[
+        'menu-item',
+        { disabled: item.disabled || isLoading },
+        { 'item-header': item.isHeader },
+        { 'has-border-top': item.hasBorderTop },
+      ]"
+      @mouseenter="toggleItems(item, true, $event)"
+      @mouseleave="toggleItems(item, false, $event)"
+    >
+      <span class="context-link" @mousedown="selectItem(item)">
+        <span :class="['context-icon', item.iconClassName]" />
+        <span class="menu-item-text">{{ item.name }}</span>
+        <span v-if="item.items.length" class="arrow-icon" />
+        <span v-if="item.shortcut" class="shortcut">{{ item.shortcut }}</span>
+      </span>
+
+      <div class="context-children">
+        <common-context-recursion
+          v-show="item.isShowItems"
+          :action-loading="props.actionLoading"
+          :class="[{ 'child-show': item.isShowItems }]"
+          :items="item.items"
+          @select-item="selectItem"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ContextMenuItem } from '~/components/common/context/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_ContextMenuItem[]
+  actionLoading: string | null
+}>()
+const emits = defineEmits<{
+  (event: 'select-item', value: UI_I_ContextMenuItem): void
+}>()
+
+const isLoading = computed<boolean>(
+  () => !!props.items.find((item) => item.actionType === props.actionLoading)
+)
+
+const selectItem = (item: UI_I_ContextMenuItem): void => {
+  if (item.disabled) return
+
+  emits('select-item', item)
+}
+
+interface HTMLLiElement extends Event {
+  target: HTMLInputElement
+}
+const setElementPosition = (event: HTMLLiElement): void => {
+  const top = event.target.getBoundingClientRect().top
+  const childMenu = event.target.children[1].children[0]
+  childMenu.style.top = `${top}px`
+
+  const childMenuRect = (childMenu.getBoundingClientRect() as DOMRect) || null
+
+  // Обрабатываем, если попап вишел за viewport (с права)
+  if (childMenuRect.right > window.innerWidth) {
+    event.target.classList.add('left')
+  } else {
+    event.target.classList.remove('left')
+  }
+
+  // Обрабатываем, если попап вишел за viewport (с низу)
+  if (childMenuRect.bottom > window.innerHeight) {
+    childMenu.style.top = 'auto'
+    childMenu.style.bottom = '0px'
+  } else {
+    childMenu.style.bottom = 'unset'
+  }
+}
+
+const toggleItems = (
+  item: UI_I_ContextMenuItem,
+  show: boolean,
+  e: HTMLLiElement
+): void => {
+  if (!item.items.length || item.disabled) {
+    return
+  }
+  item.isShowItems = show
+
+  nextTick(() => {
+    setElementPosition(e)
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.loader-wrapper {
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+
+.tree-view__loading {
+  :deep(.spinner) {
+    width: 45px;
+    height: 45px;
+    min-width: 45px;
+    min-height: 45px;
+    z-index: 1000;
+  }
+}
+.context-wrap {
+  width: auto;
+  max-width: 400px;
+  background: var(--global-bg-color);
+  border-radius: 0;
+  color: #333;
+  border: 1px solid var(--context-menu-border-color);
+  user-select: none;
+  list-style: none;
+  max-height: 100vh;
+  overflow-y: auto;
+
+  .menu-item {
+    position: relative;
+    color: #565656;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+    padding: 5px 0 3px;
+
+    &.has-border-top {
+      border-top: 1px solid var(--context-menu-inset-border-color);
+    }
+
+    &.item-header {
+      font-size: 11px;
+      background-color: var(--context-menu-item-header-color);
+      cursor: default;
+    }
+    &:not(.item-header):not(.disabled):hover {
+      background-color: var(--context-menu-hover-bg-color);
+      color: #454545;
+      border-bottom: 1px solid var(--context-menu-hover-border-color);
+    }
+    &.disabled {
+      opacity: 0.5;
+      user-select: none;
+      cursor: default;
+    }
+    &.left {
+      :deep(.context-children) {
+        left: 0;
+        background: red;
+
+        .context-wrap {
+          transform: translateX(-100%);
+          left: auto;
+        }
+      }
+    }
+
+    .context-link {
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      user-select: none;
+      padding: 3px 20px 4px 10px;
+
+      .menu-item-text {
+        flex: 1 1 0;
+      }
+
+      .context-icon {
+        display: inline-block;
+        margin: -2px 4px 0 0;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+      }
+
+      .arrow-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -8px;
+        right: 4px;
+        background-image: url('assets/img/icons/sprite.png');
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        overflow: hidden;
+        background-repeat: no-repeat;
+        font-size: 0;
+        line-height: 0;
+        text-align: center;
+        transform: rotate(90deg);
+      }
+
+      .shortcut {
+        padding-left: 10px;
+      }
+    }
+
+    .context-children {
+      position: absolute;
+      top: 0;
+      left: 100%;
+
+      .context-wrap {
+        position: fixed;
+      }
+    }
+  }
+}
+.tree-view__loading {
+  :deep(.spinner) {
+    width: 45px;
+    height: 45px;
+    min-width: 45px;
+    min-height: 45px;
+    z-index: 1000;
+  }
+}
+</style>
+<style>
+:root {
+  --context-menu-hover-bg-color: #e8e8e8;
+  --context-menu-border-color: #949494;
+  --context-menu-inset-border-color: #d4d5d6;
+  --context-menu-item-header-color: #eceff2;
+  --context-menu-hover-border-color: #666;
+}
+:root.dark-theme {
+  --context-menu-hover-bg-color: #324f61;
+  --context-menu-border-color: #495865;
+  --context-menu-inset-border-color: #485764;
+  --context-menu-item-header-color: #29414e;
+  --context-menu-hover-border-color: #fff;
+}
+</style>

package/components/common/context/models/interfaces.ts

@@ -0,0 +1,26 @@
+import { UI_I_TreeNode } from '~/components/common/recursionTree/models/interfaces'
+
+export interface UI_I_ContextMenuByEvent {
+  event: any
+  node: UI_I_TreeNode
+}
+export interface UI_I_ContextMenu {
+  x: number
+  y: number
+  id: string | number
+  type: string
+  titleText: string
+  titleIconClassName: string
+  items: UI_I_ContextMenuItem[]
+}
+export interface UI_I_ContextMenuItem {
+  name: string
+  actionType: string
+  iconClassName: string
+  shortcut?: string
+  hasBorderTop?: boolean
+  isHeader?: boolean
+  disabled?: boolean
+  isShowItems?: boolean
+  items: UI_I_ContextMenuItem[]
+}

package/components/common/details/DetailsItem.vue

@@ -0,0 +1,106 @@
+<template>
+  <div
+    :class="[
+      'stack-block',
+      { 'not-children': !props.hasChildren, open: isOpen },
+    ]"
+  >
+    <div class="stack-block__label">
+      <atoms-the-icon
+        name="angle"
+        class="stack-block__icon"
+        @click="onToggle"
+      />
+
+      <div class="stack-view-key">
+        <slot name="stackBlockKey" />
+      </div>
+      <div class="stack-block-content">
+        <slot name="stackBlockContent" />
+      </div>
+    </div>
+
+    <div v-show="isOpen" class="stack-children">
+      <div style="height: auto">
+        <slot name="stackChildren" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    openByDefault?: boolean
+    hasChildren: boolean
+  }>(),
+  {
+    openByDefault: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+}>()
+const isOpen = ref<boolean>(props.openByDefault || false)
+const onToggle = (): void => {
+  isOpen.value = !isOpen.value
+  emits('toggle', isOpen.value)
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+.stack-block {
+  &.open {
+    .stack-block__icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__label {
+    //padding: 7px 0 6px;
+    @include flex($align: center);
+    max-width: unset;
+
+    &::before {
+      display: none;
+    }
+
+    .stack-view-key {
+      max-width: 40%;
+    }
+
+    .stack-block-content {
+      padding: 0;
+      flex: 1 1 auto;
+      width: 60%;
+      background-color: transparent;
+    }
+  }
+  &__icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    transform: rotate(90deg);
+    align-self: center;
+    fill: var(--triger-icon-color);
+    cursor: pointer;
+  }
+
+  &.not-children {
+    .stack-block__label {
+      padding: 0 0 3px 0;
+      background-color: transparent;
+
+      .stack-view-key {
+        max-width: 20%;
+        flex: 1 1 130px;
+      }
+    }
+
+    .stack-block__icon {
+      opacity: 0;
+    }
+  }
+}
+</style>

package/components/common/details/DetailsList.vue

@@ -0,0 +1,23 @@
+<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 lang="ts" setup>
+import { UI_I_DetailsItem } from '~/components/common/details/model/interfaces'
+
+const props = defineProps<{
+  items: UI_I_DetailsItem[]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.list {
+  padding: 0 12px 10px;
+}
+</style>

package/components/common/details/model/interfaces.ts

@@ -0,0 +1,9 @@
+import type { UI_I_Button } from '~/components/common/tools/models/interfaces'
+
+export interface UI_I_DetailsItem {
+    label: string,
+    value: string,
+    items: UI_I_DetailsItem[]
+    actions?: UI_I_Button[]
+    permission?: string[]
+}