bfg-common 1.4.747 → 1.4.748

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

@@ -1,96 +1,96 @@
-<template>
-  <common-browse-blocks-contents-files-new-skeleton v-if="props.browseLoading" />
-
-  <ul
-    v-else-if="props.selectedFolderFiles.length"
-    class="file-view__container"
-  >
-    <template v-for="file in props.selectedFolderFiles" :key="file.name">
-      <li
-        :data-id="file.testId"
-        :class="[
-          'file-view',
-          { active: file.name === props.selectedFile?.name },
-        ]"
-        @click="onSelectFile(file)"
-      >
-        <span class="file-view__icon" :class="file.iconClassName"></span>
-        <span class="file-view__text">{{ file.name }}</span>
-      </li>
-    </template>
-  </ul>
-
-  <div v-else class="not-found-wrap">
-    <ui-not-found :text="localization.common.noItemsFound" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  selectedFolderFiles: any[]
-  selectedFile: any
-  browseLoading: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-file', file: any): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onSelectFile = (file: any): void => {
-  emits('select-file', file)
-}
-</script>
-
-<style scoped lang="scss">
-.file-view__container {
-  list-style-position: inside;
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-
-  .file-view {
-    display: flex;
-    align-items: center;
-    padding: 4px 8px;
-    cursor: pointer;
-    border-radius: 4px;
-    height: 26px;
-    margin-bottom: 2px;
-    color: var(--select-file-text-color);
-
-    &:hover {
-      background-color: var(--select-file-hover-bg);
-    }
-    &.active {
-      background-color: var(--select-file-selected-bg);
-      color: var(--select-file-selected-text-color);
-    }
-    span {
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 14.52px;
-
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    span:first-of-type {
-      width: 16px;
-      height: 16px;
-      margin-right: 8px;
-    }
-  }
-}
-.not-found-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-</style>
+<template>
+  <common-browse-blocks-contents-files-new-skeleton v-if="props.browseLoading" />
+
+  <ul
+    v-else-if="props.selectedFolderFiles.length"
+    class="file-view__container"
+  >
+    <template v-for="file in props.selectedFolderFiles" :key="file.name">
+      <li
+        :data-id="file.testId"
+        :class="[
+          'file-view',
+          { active: file.name === props.selectedFile?.name },
+        ]"
+        @click="onSelectFile(file)"
+      >
+        <span class="file-view__icon" :class="file.iconClassName"></span>
+        <span class="file-view__text">{{ file.name }}</span>
+      </li>
+    </template>
+  </ul>
+
+  <div v-else class="not-found-wrap">
+    <ui-not-found :text="localization.common.noItemsFound" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  selectedFolderFiles: any[]
+  selectedFile: any
+  browseLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-file', file: any): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onSelectFile = (file: any): void => {
+  emits('select-file', file)
+}
+</script>
+
+<style scoped lang="scss">
+.file-view__container {
+  list-style-position: inside;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  .file-view {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: 4px;
+    height: 26px;
+    margin-bottom: 2px;
+    color: var(--select-file-text-color);
+
+    &:hover {
+      background-color: var(--select-file-hover-bg);
+    }
+    &.active {
+      background-color: var(--select-file-selected-bg);
+      color: var(--select-file-selected-text-color);
+    }
+    span {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 14.52px;
+
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    span:first-of-type {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
+  }
+}
+.not-found-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+</style>

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/Context.vue

@@ -1,99 +1,106 @@
-<template>
-  <div
-    :id="elementId"
-    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 type {
-  UI_I_ContextMenuItem,
-  UI_I_ContextMenu,
-} from '~/components/common/context/lib/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 elementId = ref<string>(`context-${useUniqueId()}`)
-
-const currentContextMenuY = ref<string>('')
-const currentContextMenuX = ref<string>('')
-const setCurrentPositionsPopup = (): void => {
-  const contextMenuY = props.contextMenu.y
-  const contextMenuX = props.contextMenu.x
-
-  const contextWrap: HTMLElement | null =
-    document.querySelector(`#${elementId.value} .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`
-  }
-}
-
-const windowMousedown = (): void => {
-  emits('hide')
-}
-watch(
-  () => props.contextMenu.y,
-  (newValue: number) => {
-    if (!newValue) return
-
-    if (newValue < 0) {
-      window.removeEventListener('mousedown', windowMousedown)
-    } else {
-      window.addEventListener('mousedown', windowMousedown)
-    }
-
-    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>
+<template>
+  <div
+    :id="elementId"
+    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 type {
+  UI_I_ContextMenuItem,
+  UI_I_ContextMenu,
+} from '~/components/common/context/lib/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 { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const selectItem = (item: UI_I_ContextMenuItem): void => {
+  emits('select-item', item)
+}
+
+const elementId = ref<string>(`context-${useUniqueId()}`)
+
+const currentContextMenuY = ref<string>('')
+const currentContextMenuX = ref<string>('')
+const setCurrentPositionsPopup = (): void => {
+  let contextMenuY = props.contextMenu.y
+  const contextMenuX = props.contextMenu.x
+
+  const contextWrap: HTMLElement | null = document.querySelector(
+    `#${elementId.value} .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 {
+    if (isNewView.value) contextMenuY += 8
+    currentContextMenuY.value = `${contextMenuY}px`
+  }
+
+  if (contextMenuX + contextW >= windowW) {
+    let divisionW = windowW - contextW
+    if (isNewView.value) divisionW -= 16
+    currentContextMenuX.value = `${divisionW}px`
+  } else {
+    currentContextMenuX.value = `${contextMenuX}px`
+  }
+}
+
+const windowMousedown = (): void => {
+  emits('hide')
+}
+watch(
+  () => props.contextMenu.y,
+  (newValue: number) => {
+    if (!newValue) return
+
+    if (newValue < 0) {
+      window.removeEventListener('mousedown', windowMousedown)
+    } else {
+      window.addEventListener('mousedown', windowMousedown)
+    }
+
+    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/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
+  }
+}