bfg-common 1.4.365 → 1.4.367

package/components/atoms/stack/StackBlock.vue

@@ -1,185 +1,185 @@
-<template>
-  <div
-    :class="[
-      'stack-block',
-      open ? 'stack-block-expanded' : 'stack-block-expandable',
-      { 'not-children': !props.hasChildren },
-    ]"
-  >
-    <div
-      :id="`${props.testId}-toggle`"
-      :data-id="`${props.testId}-toggle`"
-      class="stack-block-label"
-      @click="onToggle"
-    >
-      <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
-
-      <div class="stack-view-key">
-        <slot name="stackBlockKey" />
-      </div>
-      <div class="stack-block-content">
-        <slot name="stackBlockContent" />
-      </div>
-
-      <span
-        v-if="props.removable && props.isRollBack"
-        class="icon-roll-back"
-        :data-id="`${props.testId}-roll-back`"
-        @mousedown="onRollBack"
-        @click.stop
-      />
-      <atoms-the-icon
-        v-else-if="props.removable"
-        :data-id="`${props.testId}-remove`"
-        class="remove-icon"
-        name="close-circle"
-        @mousedown="onRemove"
-        @click.stop
-      />
-      <span v-else class="empty-icon"></span>
-    </div>
-
-    <div v-show="open" class="stack-children">
-      <div style="height: auto">
-        <slot name="stackChildren" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    hasChildren: boolean
-    removable?: boolean
-    testId?: string
-    openByDefault?: boolean
-    isRollBack?: boolean
-  }>(),
-  { testId: 'ui-stack-block', openByDefault: false }
-)
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-  (event: 'remove'): void
-  (event: 'roll-back'): void
-}>()
-
-const open = ref<boolean>(props.openByDefault || false)
-const onToggle = (): void => {
-  if (!props.hasChildren) return
-  setTimeout(() => {
-    open.value = !open.value
-    emits('toggle', open.value)
-  }, 0)
-}
-
-const onRemove = (): void => {
-  emits('remove')
-}
-const onRollBack = (): void => {
-  emits('roll-back')
-}
-</script>
-
-<style scoped lang="scss">
-.stack-block {
-  cursor: pointer;
-  background-color: var(--block-view-bg-color);
-  border-color: var(--global-border-color);
-
-  &.stack-block-expandable:hover {
-    border-bottom: 1px solid #666;
-
-    .stack-block-label {
-      background-color: var(--block-view-bg-color);
-      border-color: var(--global-border-color);
-    }
-  }
-
-  .stack-block-label {
-    padding: 6px 12px;
-    flex: 1 1 auto;
-    max-width: unset;
-    display: flex;
-    background-color: var(--block-view-bg-color);
-    border-color: var(--global-border-color);
-
-    &:hover {
-      .remove-icon {
-        opacity: 1;
-      }
-    }
-
-    &::before {
-      display: none;
-    }
-
-    .angle-icon {
-      width: 14px;
-      height: 14px;
-      margin-right: 4px;
-      transform: rotate(90deg);
-      align-self: center;
-    }
-
-    .remove-icon {
-      width: 18px;
-      height: 18px;
-      opacity: 0;
-      cursor: pointer;
-    }
-
-    .stack-view-key {
-      flex: 0 0 40%;
-      max-width: 40%;
-    }
-
-    .stack-block-content {
-      padding: 0;
-      flex: 1 1 auto;
-      width: 60%;
-      background-color: transparent;
-      word-break: break-all;
-    }
-
-    .empty-icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &.stack-block-expanded {
-    .stack-block-label {
-      color: #ffffff;
-      background-color: #29414e;
-
-      .angle-icon {
-        fill: #ffffff;
-        transform: rotate(180deg);
-      }
-
-      .remove-icon {
-        fill: #ffffff;
-      }
-    }
-  }
-
-  &.not-children {
-    cursor: default;
-    .stack-block-label {
-      background-color: transparent;
-      color: #333333;
-
-      &:hover {
-        cursor: default;
-        background-color: transparent;
-        border-bottom: none;
-      }
-
-      .angle-icon {
-        opacity: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="[
+      'stack-block',
+      open ? 'stack-block-expanded' : 'stack-block-expandable',
+      { 'not-children': !props.hasChildren },
+    ]"
+  >
+    <div
+      :id="`${props.testId}-toggle`"
+      :data-id="`${props.testId}-toggle`"
+      class="stack-block-label"
+      @click="onToggle"
+    >
+      <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
+
+      <div class="stack-view-key">
+        <slot name="stackBlockKey" />
+      </div>
+      <div class="stack-block-content">
+        <slot name="stackBlockContent" />
+      </div>
+
+      <span
+        v-if="props.removable && props.isRollBack"
+        class="icon-roll-back"
+        :data-id="`${props.testId}-roll-back`"
+        @mousedown="onRollBack"
+        @click.stop
+      />
+      <atoms-the-icon
+        v-else-if="props.removable"
+        :data-id="`${props.testId}-remove`"
+        class="remove-icon"
+        name="close-circle"
+        @mousedown="onRemove"
+        @click.stop
+      />
+      <span v-else class="empty-icon"></span>
+    </div>
+
+    <div v-show="open" class="stack-children">
+      <div style="height: auto">
+        <slot name="stackChildren" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    hasChildren: boolean
+    removable?: boolean
+    testId?: string
+    openByDefault?: boolean
+    isRollBack?: boolean
+  }>(),
+  { testId: 'ui-stack-block', openByDefault: false }
+)
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+  (event: 'remove'): void
+  (event: 'roll-back'): void
+}>()
+
+const open = ref<boolean>(props.openByDefault || false)
+const onToggle = (): void => {
+  if (!props.hasChildren) return
+  setTimeout(() => {
+    open.value = !open.value
+    emits('toggle', open.value)
+  }, 0)
+}
+
+const onRemove = (): void => {
+  emits('remove')
+}
+const onRollBack = (): void => {
+  emits('roll-back')
+}
+</script>
+
+<style scoped lang="scss">
+.stack-block {
+  cursor: pointer;
+  background-color: var(--block-view-bg-color);
+  border-color: var(--global-border-color);
+
+  &.stack-block-expandable:hover {
+    border-bottom: 1px solid #666;
+
+    .stack-block-label {
+      background-color: var(--block-view-bg-color);
+      border-color: var(--global-border-color);
+    }
+  }
+
+  .stack-block-label {
+    padding: 6px 12px;
+    flex: 1 1 auto;
+    max-width: unset;
+    display: flex;
+    background-color: var(--block-view-bg-color);
+    border-color: var(--global-border-color);
+
+    &:hover {
+      .remove-icon {
+        opacity: 1;
+      }
+    }
+
+    &::before {
+      display: none;
+    }
+
+    .angle-icon {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+      transform: rotate(90deg);
+      align-self: center;
+    }
+
+    .remove-icon {
+      width: 18px;
+      height: 18px;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    .stack-view-key {
+      flex: 0 0 40%;
+      max-width: 40%;
+    }
+
+    .stack-block-content {
+      padding: 0;
+      flex: 1 1 auto;
+      width: 60%;
+      background-color: transparent;
+      word-break: break-all;
+    }
+
+    .empty-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &.stack-block-expanded {
+    .stack-block-label {
+      color: #ffffff;
+      background-color: #29414e;
+
+      .angle-icon {
+        fill: #ffffff;
+        transform: rotate(180deg);
+      }
+
+      .remove-icon {
+        fill: #ffffff;
+      }
+    }
+  }
+
+  &.not-children {
+    cursor: default;
+    .stack-block-label {
+      background-color: transparent;
+      color: #333333;
+
+      &:hover {
+        cursor: default;
+        background-color: transparent;
+        border-bottom: none;
+      }
+
+      .angle-icon {
+        opacity: 0;
+      }
+    }
+  }
+}
+</style>

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

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

package/components/common/context/recursion/Recursion.vue

@@ -1,86 +1,86 @@
-<template>
-  <common-context-recursion-new
-    v-if="isNewView"
-    :items="props.items"
-    :action-loading="props.actionLoading"
-    :is-loading="isLoading"
-    :test-id="props.testId"
-    @select-item="selectItem"
-    @toggle-items="toggleItems"
-  />
-  <common-context-recursion-old
-    v-else
-    :items="props.items"
-    :action-loading="props.actionLoading"
-    :is-loading="isLoading"
-    :test-id="props.testId"
-    @select-item="selectItem"
-    @toggle-items="toggleItems"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ContextMenuItem } from '~/components/common/context/lib/models/interfaces'
-import type { I_HTMLLiElement } from '~/components/common/context/recursion/lib/models/interfaces'
-
-const props = defineProps<{
-  items: UI_I_ContextMenuItem[]
-  actionLoading: string | null
-  testId?: string
-}>()
-const emits = defineEmits<{
-  (event: 'select-item', value: UI_I_ContextMenuItem): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-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)
-}
-
-const setElementPosition = (event: I_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 = (
-  data: [UI_I_ContextMenuItem, boolean, I_HTMLLiElement]
-): void => {
-  const [item, show, e] = data
-  if (!item.items.length || item.disabled) {
-    return
-  }
-  item.isShowItems = show
-
-  nextTick(() => {
-    setElementPosition(e)
-  })
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-context-recursion-new
+    v-if="isNewView"
+    :items="props.items"
+    :action-loading="props.actionLoading"
+    :is-loading="isLoading"
+    :test-id="props.testId"
+    @select-item="selectItem"
+    @toggle-items="toggleItems"
+  />
+  <common-context-recursion-old
+    v-else
+    :items="props.items"
+    :action-loading="props.actionLoading"
+    :is-loading="isLoading"
+    :test-id="props.testId"
+    @select-item="selectItem"
+    @toggle-items="toggleItems"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ContextMenuItem } from '~/components/common/context/lib/models/interfaces'
+import type { I_HTMLLiElement } from '~/components/common/context/recursion/lib/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_ContextMenuItem[]
+  actionLoading: string | null
+  testId?: string
+}>()
+const emits = defineEmits<{
+  (event: 'select-item', value: UI_I_ContextMenuItem): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+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)
+}
+
+const setElementPosition = (event: I_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 = (
+  data: [UI_I_ContextMenuItem, boolean, I_HTMLLiElement]
+): void => {
+  const [item, show, e] = data
+  if (!item.items.length || item.disabled) {
+    return
+  }
+  item.isShowItems = show
+
+  nextTick(() => {
+    setElementPosition(e)
+  })
+}
+</script>
+
+<style scoped lang="scss"></style>