bfg-common 1.4.178 → 1.4.180

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

@@ -1,105 +1,105 @@
-<template>
-  <div :class="`title-block__${props.type}-container`">
-    <slot name="firstBlock"></slot>
-    <div
-      class="move-separator"
-      :data-id="`${props.testId}-first`"
-      :style="leftPosition"
-      @mousedown="onMouseDown($event, 'first')"
-    ></div>
-    <slot name="secondBlock"></slot>
-    <div
-      class="move-separator"
-      :data-id="`${props.testId}-second`"
-      :style="rightPosition"
-      @mousedown="onMouseDown($event, 'second')"
-    ></div>
-    <slot name="thirdBlock"></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
-
-const props = defineProps<{
-  type: 'horizontal' | 'vertical'
-  blocksWidth: UI_T_BlocksWidth
-  testId?: string
-}>()
-
-const sectionSelected = ref<boolean>(false)
-const sectionSelectedName = ref<string>('')
-
-const positionOnDown = ref<number>(0)
-
-const leftPosition = computed(() => ({
-  left: `${props.blocksWidth[0] + 28}px`,
-}))
-const rightPosition = computed(() => ({
-  right: `${props.blocksWidth[2] + 28}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
-  if (event.stopPropagation) event.stopPropagation()
-  if (event.preventDefault) event.preventDefault()
-  event.cancelBubble = true
-
-  getSeparatorPosition(event, 0, 1, 'first')
-  getSeparatorPosition(event, 1, 2, 'second')
-}
-const onMouseUp = (): void => {
-  sectionSelected.value = false
-}
-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 < 30 || blockWidth1 < 30) return
-    blockWidth0 >= 30 && emits('change-widths', blockWidth0, firstBlock)
-    blockWidth1 >= 30 && 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;
-}
-.move-separator {
-  position: absolute;
-  width: 3px;
-  height: 400px;
-  background-color: var(--modal-bg-color);
-  cursor: e-resize;
-}
-</style>
+<template>
+  <div :class="`title-block__${props.type}-container`">
+    <slot name="firstBlock"></slot>
+    <div
+      class="move-separator"
+      :data-id="`${props.testId}-first`"
+      :style="leftPosition"
+      @mousedown="onMouseDown($event, 'first')"
+    ></div>
+    <slot name="secondBlock"></slot>
+    <div
+      class="move-separator"
+      :data-id="`${props.testId}-second`"
+      :style="rightPosition"
+      @mousedown="onMouseDown($event, 'second')"
+    ></div>
+    <slot name="thirdBlock"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
+
+const props = defineProps<{
+  type: 'horizontal' | 'vertical'
+  blocksWidth: UI_T_BlocksWidth
+  testId?: string
+}>()
+
+const sectionSelected = ref<boolean>(false)
+const sectionSelectedName = ref<string>('')
+
+const positionOnDown = ref<number>(0)
+
+const leftPosition = computed(() => ({
+  left: `${props.blocksWidth[0] + 28}px`,
+}))
+const rightPosition = computed(() => ({
+  right: `${props.blocksWidth[2] + 28}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
+  if (event.stopPropagation) event.stopPropagation()
+  if (event.preventDefault) event.preventDefault()
+  event.cancelBubble = true
+
+  getSeparatorPosition(event, 0, 1, 'first')
+  getSeparatorPosition(event, 1, 2, 'second')
+}
+const onMouseUp = (): void => {
+  sectionSelected.value = false
+}
+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 < 30 || blockWidth1 < 30) return
+    blockWidth0 >= 30 && emits('change-widths', blockWidth0, firstBlock)
+    blockWidth1 >= 30 && 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;
+}
+.move-separator {
+  position: absolute;
+  width: 3px;
+  height: 400px;
+  background-color: var(--modal-bg-color);
+  cursor: e-resize;
+}
+</style>

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

@@ -1,91 +1,91 @@
-<template>
-  <div class="title-block" :style="blockWidth">
-    <div class="title-block__container" :style="blockWidth">
-      <div
-        class="title-block__title pointer"
-        :style="blockTitleWidth"
-        @click="emits('sort')"
-      >
-        <b>{{ props.title }}</b>
-        <atoms-the-icon
-          v-show="props.sorting[0]"
-          :class="['sort-arrow', { down: !props.sorting[1] }]"
-          width="14px"
-          height="14px"
-          name="sort-arrow"
-        />
-      </div>
-      <div class="title-block__body">
-        <slot name="content"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    title: string
-    width: number
-    sorting?: [boolean, boolean]
-  }>(),
-  {
-    sorting: () => [false, false],
-  }
-)
-const emits = defineEmits<{
-  (event: 'sort'): void
-}>()
-
-const blockWidth = computed(() => ({ width: `${props.width}px` }))
-const blockTitleWidth = computed(() => ({ width: `${props.width - 2}px` }))
-</script>
-
-<style scoped lang="scss">
-.title-block {
-  width: 100%;
-  min-height: 400px;
-  position: relative;
-
-  &__container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    height: 400px;
-    border-width: 1px;
-    border-style: solid;
-    border-image: initial;
-    background: var(--block-view-bg-color5);
-    border-color: var(--block-border-color2);
-  }
-  &__title {
-    display: inline-block;
-    flex: 0 0 auto;
-    background-color: var(--block-view-bg-color6);
-    border-bottom: 1px solid var(--block-border-color2);
-    padding: 8px;
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-
-    b {
-      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
-      font-size: 13px;
-      color: var(--global-font-color9);
-      font-weight: bolder;
-      letter-spacing: normal;
-    }
-    .sort-arrow {
-      &.down {
-        transform: rotate(180deg);
-      }
-    }
-  }
-  &__body {
-    flex: 1 1 auto;
-    overflow-y: auto;
-  }
-}
-</style>
+<template>
+  <div class="title-block" :style="blockWidth">
+    <div class="title-block__container" :style="blockWidth">
+      <div
+        class="title-block__title pointer"
+        :style="blockTitleWidth"
+        @click="emits('sort')"
+      >
+        <b>{{ props.title }}</b>
+        <atoms-the-icon
+          v-show="props.sorting[0]"
+          :class="['sort-arrow', { down: !props.sorting[1] }]"
+          width="14px"
+          height="14px"
+          name="sort-arrow"
+        />
+      </div>
+      <div class="title-block__body">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title: string
+    width: number
+    sorting?: [boolean, boolean]
+  }>(),
+  {
+    sorting: () => [false, false],
+  }
+)
+const emits = defineEmits<{
+  (event: 'sort'): void
+}>()
+
+const blockWidth = computed(() => ({ width: `${props.width}px` }))
+const blockTitleWidth = computed(() => ({ width: `${props.width - 2}px` }))
+</script>
+
+<style scoped lang="scss">
+.title-block {
+  width: 100%;
+  min-height: 400px;
+  position: relative;
+
+  &__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    height: 400px;
+    border-width: 1px;
+    border-style: solid;
+    border-image: initial;
+    background: var(--block-view-bg-color5);
+    border-color: var(--block-border-color2);
+  }
+  &__title {
+    display: inline-block;
+    flex: 0 0 auto;
+    background-color: var(--block-view-bg-color6);
+    border-bottom: 1px solid var(--block-border-color2);
+    padding: 8px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+
+    b {
+      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
+      font-size: 13px;
+      color: var(--global-font-color9);
+      font-weight: bolder;
+      letter-spacing: normal;
+    }
+    .sort-arrow {
+      &.down {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  &__body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+}
+</style>

package/components/common/browse/blocks/contents/Files.vue

@@ -1,72 +1,72 @@
-<template>
-  <ul class="file-view__container">
-    <template v-for="file in props.selectedFolderFiles" :key="file.name">
-      <li
-        :data-id="file.testId"
-        :class="[
-          'file-view',
-          { selected: 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>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  selectedFolderFiles: any[]
-  selectedFile: any
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-file', file: any): void
-}>()
-
-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;
-
-    li {
-      line-height: 20px;
-      padding: 2px;
-      border-bottom: 1px solid #eee;
-      cursor: pointer;
-
-      &:hover {
-        background-color: #c6e7ff;
-        line-height: 20px;
-        padding: 2px;
-        border-bottom: 1px solid #eee;
-        cursor: pointer;
-      }
-      &.selected {
-        background-color: #a3d7ff;
-      }
-      span {
-        line-height: 20px;
-      }
-      span:first-of-type {
-        width: 16px;
-        height: 16px;
-        line-height: 20px;
-      }
-    }
-  }
-  &__text {
-    color: var(--global-font-color9);
-  }
-}
-</style>
+<template>
+  <ul class="file-view__container">
+    <template v-for="file in props.selectedFolderFiles" :key="file.name">
+      <li
+        :data-id="file.testId"
+        :class="[
+          'file-view',
+          { selected: 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>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  selectedFolderFiles: any[]
+  selectedFile: any
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-file', file: any): void
+}>()
+
+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;
+
+    li {
+      line-height: 20px;
+      padding: 2px;
+      border-bottom: 1px solid #eee;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #c6e7ff;
+        line-height: 20px;
+        padding: 2px;
+        border-bottom: 1px solid #eee;
+        cursor: pointer;
+      }
+      &.selected {
+        background-color: #a3d7ff;
+      }
+      span {
+        line-height: 20px;
+      }
+      span:first-of-type {
+        width: 16px;
+        height: 16px;
+        line-height: 20px;
+      }
+    }
+  }
+  &__text {
+    color: var(--global-font-color9);
+  }
+}
+</style>

package/components/common/browse/blocks/info/Date.vue

@@ -1,21 +1,21 @@
-<template>
-  <div>
-    <span>{{ props.title }}:</span>
-    <span>{{ formattedDateString }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { format } from 'date-fns'
-const props = defineProps<{
-  title: string
-  value: number
-}>()
-
-const getDateString = (dateAlias: number): string =>
-  format(new Date(dateAlias), 'MM/dd/yyyy HH:mm:ss a')
-
-const formattedDateString = computed<string>(() => getDateString(props.value))
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div>
+    <span>{{ props.title }}:</span>
+    <span>{{ formattedDateString }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+const props = defineProps<{
+  title: string
+  value: number
+}>()
+
+const getDateString = (dateAlias: number): string =>
+  format(new Date(dateAlias), 'MM/dd/yyyy HH:mm:ss a')
+
+const formattedDateString = computed<string>(() => getDateString(props.value))
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/browse/blocks/info/Size.vue

@@ -1,17 +1,17 @@
-<template>
-  <div>
-    <span>{{ props.title }}:</span>
-    <span>{{ size }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  title: string
-  value: number
-}>()
-const { $binary } = useNuxtApp()
-const size = computed<string>(() => $binary.round(props.value, true))
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div>
+    <span>{{ props.title }}:</span>
+    <span>{{ size }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  value: number
+}>()
+const { $binary } = useNuxtApp()
+const size = computed<string>(() => $binary.round(props.value, true))
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/browse/blocks/info/Text.vue

@@ -1,17 +1,17 @@
-<template>
-  <div>
-    <span>{{ props.title }}:</span>
-    <span>{{ props.value }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  title: string
-  value: string
-}>()
-</script>
-
-<style scoped lang="scss">
-
+<template>
+  <div>
+    <span>{{ props.title }}:</span>
+    <span>{{ props.value }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  value: string
+}>()
+</script>
+
+<style scoped lang="scss">
+
 </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
+}