bfg-common 1.5.375 → 1.5.377

package/components/common/browse/BrowseNew.vue

@@ -16,6 +16,7 @@
         <div class="container-columns-block">
           <common-browse-blocks-container
             type="horizontal"
+            class="columns-block"
             :blocks-width="props.blocksWidth"
             @change-widths="onChangeWidths"
           >
@@ -249,11 +250,16 @@ const selectedFileTypeLocal = computed<any>({
 
   .container-columns-block {
     overflow-y: hidden;
+    overflow-x: auto;
     height: 100%;
 
+    .columns-block {
+      width: 816px;
+    }
+
     .opacity-block {
-      height: 16px;
-      top: -16px;
+      height: 12px;
+      top: -12px;
       position: relative;
       background: linear-gradient(rgba(250, 250, 250, 0), var(--modal-bg));
     }

package/components/common/browse/blocks/Container.vue

@@ -1,231 +1,234 @@
-<template>
-  <div
-    ref="containerBlock"
-    :class="[
-      `title-block__${props.type}-container`,
-      {
-        'title-block__new-view': isNewView,
-      },
-    ]"
-  >
-    <slot name="firstBlock"></slot>
-    <div
-      ref="moveSeperator"
-      :class="[
-        'move-separator',
-        {
-          'move-separator-new-view': isNewView,
-          'move-separator-new-view_selected':
-            sectionSelected && sectionSelectedName === 'first',
-        },
-      ]"
-      :data-id="`${props.testId}-first`"
-      :style="seperatorStyles"
-      @mousedown="onMouseDown($event, 'first')"
-    >
-      <div :style="moveSeperatorBeforeStyles"></div>
-    </div>
-    <slot name="secondBlock"></slot>
-    <div
-      ref="secondMoveSeperator"
-      :class="[
-        'move-separator',
-        {
-          'move-separator-new-view': isNewView,
-          'move-separator-new-view_selected':
-            sectionSelected && sectionSelectedName === 'second',
-        },
-      ]"
-      :data-id="`${props.testId}-second`"
-      :style="secondSeperatorStyles"
-      @mousedown="onMouseDown($event, 'second')"
-    >
-      <div :style="secondMoveSeperatorBeforeStyles"></div>
-    </div>
-    <slot name="thirdBlock"></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
-import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    type: 'horizontal' | 'vertical'
-    blocksWidth: UI_T_BlocksWidth
-    testId?: string
-  }>(),
-  {
-    testId: '',
-  }
-)
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const sectionSelected = ref<boolean>(false)
-const sectionSelectedName = ref<string>('')
-
-const positionOnDown = ref<number>(0)
-
-const containerBlock = ref<HTMLElement | null>(null)
-const { height: heightContainerBlock } = useElementSize(containerBlock)
-
-const moveSeperator = ref<HTMLElement | null>(null)
-const { height: heightMoveSeperator } = useElementSize(moveSeperator)
-const moveSeperatorBeforeStyles = ref<any>({})
-watch(
-  heightMoveSeperator,
-  (newValue) => {
-    if (!newValue) return
-
-    moveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
-  },
-  { immediate: true, deep: true }
-)
-
-const secondMoveSeperator = ref<HTMLElement | null>(null)
-const { height: heightSecondMoveSeperator } =
-  useElementSize(secondMoveSeperator)
-const secondMoveSeperatorBeforeStyles = ref<any>({})
-watch(
-  heightSecondMoveSeperator,
-  (newValue) => {
-    if (!newValue) return
-
-    secondMoveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
-  },
-  { immediate: true, deep: true }
-)
-
-const translation1 = computed<number>(() => (isNewView.value ? 31 : 28))
-const translation2 = computed<number>(() => (isNewView.value ? 47 : 28))
-
-const seperatorStyles = computed(() => ({
-  left: `${props.blocksWidth[0] + translation1.value}px`,
-  height: `${heightContainerBlock.value}px`,
-}))
-const secondSeperatorStyles = computed(() => ({
-  right: `${props.blocksWidth[2] + translation2.value}px`,
-  height: `${heightContainerBlock.value}px`,
-}))
-
-const emits = defineEmits<{
-  (event: 'change-widths', width: number, index: number): void
-}>()
-const onMouseDown = (event: MouseEvent, section: string): void => {
-  sectionSelected.value = true
-  sectionSelectedName.value = section
-  positionOnDown.value = (
-    event.target as HTMLDivElement
-  ).getBoundingClientRect().x
-}
-
-const onMouseMove = (event: MouseEvent): void => {
-  if (!sectionSelected.value) return
-  event.stopPropagation()
-  event.preventDefault()
-  event.cancelBubble = true
-
-  getSeparatorPosition(event, 0, 1, 'first')
-  getSeparatorPosition(event, 1, 2, 'second')
-}
-const onMouseUp = (): void => {
-  sectionSelected.value = false
-}
-
-const minWidth = computed<number>(() => (isNewView.value ? 120 : 30))
-
-const getSeparatorPosition = (
-  event: MouseEvent,
-  firstBlock: number,
-  secondBlock: number,
-  separator: string
-): void => {
-  if (sectionSelected.value && sectionSelectedName.value === separator) {
-    const blockWidth0 =
-      props.blocksWidth[firstBlock] - (positionOnDown.value - event.x)
-    const blockWidth1 =
-      props.blocksWidth[secondBlock] + (positionOnDown.value - event.x)
-    if (blockWidth0 < minWidth.value || blockWidth1 < minWidth.value) return
-    blockWidth0 >= minWidth.value &&
-      emits('change-widths', blockWidth0, firstBlock)
-    blockWidth1 >= minWidth.value &&
-      emits('change-widths', blockWidth1, secondBlock)
-    positionOnDown.value = event.x
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
-})
-onUnmounted(() => {
-  document.removeEventListener('mousemove', onMouseMove)
-  document.removeEventListener('mouseup', onMouseUp)
-})
-</script>
-
-<style scoped lang="scss">
-.title-block__horizontal-container {
-  display: flex;
-  flex-direction: row;
-  gap: 5px;
-}
-
-.title-block__horizontal-container.title-block__new-view {
-  gap: 0;
-  height: inherit;
-}
-.move-separator {
-  position: absolute;
-  width: 3px;
-  height: inherit;
-  background-color: var(--modal-bg-color);
-  cursor: col-resize;
-  z-index: var(--z-fixed);
-
-  &-new-view {
-    width: 3px;
-    background: linear-gradient(
-      to right,
-      transparent 0,
-      transparent 1px,
-      var(--select-file-sprt-color) 1px,
-      var(--select-file-sprt-color) 2px,
-      transparent 2px,
-      transparent 100%
-    );
-
-    div {
-      position: relative;
-
-      &::before {
-        content: '';
-        width: 2px;
-        height: 16px;
-        background-color: var(--select-file-sprt-handler-color);
-        position: absolute;
-        left: 0.5px;
-        border-radius: 2px;
-      }
-    }
-
-    &:hover {
-      div::before {
-        background-color: var(--select-file-sprt-handler-hover-color);
-      }
-    }
-
-    &_selected {
-      div::before {
-        background-color: var(
-          --select-file-sprt-handler-selected-color
-        ) !important;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    ref="containerBlock"
+    :class="[
+      `title-block__${props.type}-container`,
+      {
+        'title-block__new-view': isNewView,
+      },
+    ]"
+  >
+    <slot name="firstBlock"></slot>
+    <div
+      ref="moveSeperator"
+      :class="[
+        'move-separator',
+        {
+          'move-separator-new-view': isNewView,
+          'move-separator-new-view_selected':
+            sectionSelected && sectionSelectedName === 'first',
+        },
+      ]"
+      :data-id="`${props.testId}-first`"
+      :style="seperatorStyles"
+      @mousedown="onMouseDown($event, 'first')"
+    >
+      <div :style="moveSeperatorBeforeStyles"></div>
+    </div>
+    <slot name="secondBlock"></slot>
+    <div
+      ref="secondMoveSeperator"
+      :class="[
+        'move-separator',
+        {
+          'move-separator-new-view': isNewView,
+          'move-separator-new-view_selected':
+            sectionSelected && sectionSelectedName === 'second',
+        },
+      ]"
+      :data-id="`${props.testId}-second`"
+      :style="secondSeperatorStyles"
+      @mousedown="onMouseDown($event, 'second')"
+    >
+      <div :style="secondMoveSeperatorBeforeStyles"></div>
+    </div>
+    <slot name="thirdBlock"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    type: 'horizontal' | 'vertical'
+    blocksWidth: UI_T_BlocksWidth
+    testId?: string
+  }>(),
+  {
+    testId: '',
+  }
+)
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const sectionSelected = ref<boolean>(false)
+const sectionSelectedName = ref<string>('')
+
+const positionOnDown = ref<number>(0)
+
+const containerBlock = ref<HTMLElement | null>(null)
+const { height: heightContainerBlock } = useElementSize(containerBlock)
+
+const moveSeperator = ref<HTMLElement | null>(null)
+const { height: heightMoveSeperator } = useElementSize(moveSeperator)
+const moveSeperatorBeforeStyles = ref<any>({})
+watch(
+  heightMoveSeperator,
+  (newValue) => {
+    if (!newValue) return
+
+    moveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
+  },
+  { immediate: true, deep: true }
+)
+
+const secondMoveSeperator = ref<HTMLElement | null>(null)
+const { height: heightSecondMoveSeperator } =
+  useElementSize(secondMoveSeperator)
+const secondMoveSeperatorBeforeStyles = ref<any>({})
+watch(
+  heightSecondMoveSeperator,
+  (newValue) => {
+    if (!newValue) return
+
+    secondMoveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
+  },
+  { immediate: true, deep: true }
+)
+
+// const translation1 = computed<number>(() => (isNewView.value ? 31 : 28))
+// const translation2 = computed<number>(() => (isNewView.value ? 47 : 28))
+const translation = computed<number>(() => (isNewView.value ? 31 : 28))
+
+const seperatorStyles = computed(() => ({
+  // left: `${props.blocksWidth[0] + translation1.value}px`,
+  left: `${props.blocksWidth[0] + translation.value}px`,
+  height: `${heightContainerBlock.value}px`,
+}))
+const secondSeperatorStyles = computed(() => ({
+  // right: `${props.blocksWidth[2] + translation2.value}px`,
+  left: `${props.blocksWidth[0] + props.blocksWidth[1] + translation.value}px`,
+  height: `${heightContainerBlock.value}px`,
+}))
+
+const emits = defineEmits<{
+  (event: 'change-widths', width: number, index: number): void
+}>()
+const onMouseDown = (event: MouseEvent, section: string): void => {
+  sectionSelected.value = true
+  sectionSelectedName.value = section
+  positionOnDown.value = (
+    event.target as HTMLDivElement
+  ).getBoundingClientRect().x
+}
+
+const onMouseMove = (event: MouseEvent): void => {
+  if (!sectionSelected.value) return
+  event.stopPropagation()
+  event.preventDefault()
+  event.cancelBubble = true
+
+  getSeparatorPosition(event, 0, 1, 'first')
+  getSeparatorPosition(event, 1, 2, 'second')
+}
+const onMouseUp = (): void => {
+  sectionSelected.value = false
+}
+
+const minWidth = computed<number>(() => (isNewView.value ? 120 : 30))
+
+const getSeparatorPosition = (
+  event: MouseEvent,
+  firstBlock: number,
+  secondBlock: number,
+  separator: string
+): void => {
+  if (sectionSelected.value && sectionSelectedName.value === separator) {
+    const blockWidth0 =
+      props.blocksWidth[firstBlock] - (positionOnDown.value - event.x)
+    const blockWidth1 =
+      props.blocksWidth[secondBlock] + (positionOnDown.value - event.x)
+    if (blockWidth0 < minWidth.value || blockWidth1 < minWidth.value) return
+    blockWidth0 >= minWidth.value &&
+      emits('change-widths', blockWidth0, firstBlock)
+    blockWidth1 >= minWidth.value &&
+      emits('change-widths', blockWidth1, secondBlock)
+    positionOnDown.value = event.x
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+})
+</script>
+
+<style scoped lang="scss">
+.title-block__horizontal-container {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+}
+
+.title-block__horizontal-container.title-block__new-view {
+  gap: 0;
+  height: inherit;
+}
+.move-separator {
+  position: absolute;
+  width: 3px;
+  height: inherit;
+  background-color: var(--modal-bg-color);
+  cursor: col-resize;
+  z-index: var(--z-fixed);
+
+  &-new-view {
+    width: 3px;
+    background: linear-gradient(
+      to right,
+      transparent 0,
+      transparent 1px,
+      var(--select-file-sprt-color) 1px,
+      var(--select-file-sprt-color) 2px,
+      transparent 2px,
+      transparent 100%
+    );
+
+    div {
+      position: relative;
+
+      &::before {
+        content: '';
+        width: 2px;
+        height: 16px;
+        background-color: var(--select-file-sprt-handler-color);
+        position: absolute;
+        left: 0.5px;
+        border-radius: 2px;
+      }
+    }
+
+    &:hover {
+      div::before {
+        background-color: var(--select-file-sprt-handler-hover-color);
+      }
+    }
+
+    &_selected {
+      div::before {
+        background-color: var(
+          --select-file-sprt-handler-selected-color
+        ) !important;
+      }
+    }
+  }
+}
+</style>

package/components/common/browse/blocks/TitleNew.vue

@@ -76,7 +76,7 @@ const blockTitleWidth = computed<any>(() => ({
       padding-right: 12px;
 
       .title-block__body {
-        padding: 0 4px;
+        padding: 0 4px 12px;
       }
     }
 
@@ -85,7 +85,7 @@ const blockTitleWidth = computed<any>(() => ({
       padding-left: 12px;
 
       .title-block__body {
-        padding: 0 4px;
+        padding: 0 4px 12px;
       }
     }
 

package/components/common/browse/blocks/contents/filesNew/Skeleton.vue

@@ -1,18 +1,18 @@
-<template>
-  <div class="skeleton-wrap">
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.skeleton-wrap {
-  display: grid;
-  grid-gap: 12px;
-}
-</style>
+<template>
+  <div class="skeleton-wrap">
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.skeleton-wrap {
+  display: grid;
+  grid-gap: 12px;
+}
+</style>

package/components/common/browse/blocks/lib/models/types.ts

@@ -1 +1 @@
-export type UI_T_BlocksWidth = [number, number, number]
+export type UI_T_BlocksWidth = [number, number, number]

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

@@ -1,5 +1,5 @@
-export interface UI_I_FileInfo {
-  type: string
-  title: string
-  value: string | number
-}
+export interface UI_I_FileInfo {
+  type: string
+  title: string
+  value: string | number
+}

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

@@ -1,33 +1,33 @@
-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> {
-  key: number
-  name: string
-  actionType: T | ''
-  iconClassName: string
-  items: UI_I_ContextMenuItem<T>[]
-  shortcut?: string
-  hasBorderTop?: boolean
-  isHeader?: boolean
-  disabled?: boolean
-  development?: boolean
-  permission?: string
-  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> {
+  key: number
+  name: string
+  actionType: T | ''
+  iconClassName: string
+  items: UI_I_ContextMenuItem<T>[]
+  shortcut?: string
+  hasBorderTop?: boolean
+  isHeader?: boolean
+  disabled?: boolean
+  development?: boolean
+  permission?: string
+  isShowItems?: boolean
+  testId?: string
+  style?: {
+    color: string
+  }
+}