bfg-common 1.2.20 → 1.2.21

package/components/common/context/ContextRecursion.vue

@@ -1,251 +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>
+<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

@@ -1,26 +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[]
-}
+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[]
+}