bfg-common 1.0.80 → 1.0.82

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

@@ -1,68 +1,68 @@
-<template>
-  <ul class="file-view__container">
-    <template v-for="file in props.selectedFolderFiles" :key="file.name">
-      <li
-        :class="[
-          'file-view',
-          { selected: file.name === props.selectedFile?.name },
-        ]"
-        @click="onSelectFile(file)"
-      >
-        <span :class="file.iconClassName"></span>
-        <span>{{ 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) => {
-  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;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <ul class="file-view__container">
+    <template v-for="file in props.selectedFolderFiles" :key="file.name">
+      <li
+        :class="[
+          'file-view',
+          { selected: file.name === props.selectedFile?.name },
+        ]"
+        @click="onSelectFile(file)"
+      >
+        <span :class="file.iconClassName"></span>
+        <span>{{ 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) => {
+  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;
+      }
+    }
+  }
+}
+</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) =>
-  format(new Date(dateAlias), 'MM/dd/yyyy HH:mm:ss a')
-
-const formattedDateString = computed(() => 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) =>
+  format(new Date(dateAlias), 'MM/dd/yyyy HH:mm:ss a')
+
+const formattedDateString = computed(() => 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(() => $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(() => $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/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/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/content/navbar/left/Left.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="left-navbar">
+    <div class="header-content">
+      <button
+        class="btn-trigger-collapsed-all"
+        @click="onToggleAccordionShowType"
+      >
+        <atoms-the-icon
+          :class="[
+            'trigger-icon',
+            {
+              isOpen: isCollapsed,
+            },
+          ]"
+          name="angle"
+        />
+        <span v-if="isCollapsed">{{ localization.collapseAll }}</span>
+        <span v-else>{{ localization.expandAll }}</span>
+      </button>
+    </div>
+    <common-accordion
+      :accordion="accordionItems"
+      :show-type="accordionShowType"
+      test-id="accordion-left-navbar"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_T_ShowType } from '~/components/common/accordion/models/types'
+import type { UI_I_AccordionRecursion } from '~/components/common/accordion/models/interfaces'
+import type { UI_I_Navigation } from '~/components/common/content/navbar/left/models/interfaces'
+import { constructItems } from '~/components/common/content/navbar/left/utils/constructAccordion'
+
+const props = defineProps<{
+  items: UI_I_Navigation[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const accordionShowType = ref<UI_T_ShowType>('default')
+const isCollapsed = computed<boolean>(
+  () => accordionShowType.value === 'collapse'
+)
+
+const onToggleAccordionShowType = (): void => {
+  accordionShowType.value =
+    accordionShowType.value === 'collapse' ? 'expand' : 'collapse'
+}
+
+const accordionItems = ref<UI_I_AccordionRecursion[]>([])
+
+watch(
+  () => props.items,
+  (newValue) => {
+    accordionItems.value = constructItems(newValue)
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="scss">
+.left-navbar {
+  width: 350px;
+  overflow: auto;
+  position: sticky;
+  top: 0;
+  border: 0.5px solid #e8e8e8;
+
+  .header-content {
+    border-bottom: 0.5px solid #e8e8e8;
+    padding: 11px 16px 11px 5px;
+    background-color: #fff;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+
+    .btn-trigger-collapsed-all {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      cursor: pointer;
+      background-color: unset;
+      border: unset;
+
+      .trigger-icon {
+        width: 16px;
+        height: 16px;
+        transform: rotate(180deg);
+        fill: var(--triger-icon-color);
+        &.isOpen {
+          transform: rotate(0deg);
+        }
+      }
+
+      span {
+        color: #0079b8;
+        font-size: 12px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .accordion {
+    .accordion-item.active {
+      background-color: #fafafa;
+      color: unset;
+    }
+
+    .router-link-exact-active {
+      & .text {
+        font-weight: bold !important;
+        background-color: #e6f4fb !important;
+      }
+    }
+
+    .heading-wrap {
+      flex-direction: row-reverse;
+      border: unset !important;
+      margin-bottom: 0 !important;
+      background-color: unset !important;
+
+      .btn-trigger {
+        flex: 0;
+      }
+    }
+
+    .text {
+      font-weight: normal !important;
+      font-size: 14px;
+      width: 100%;
+      padding: 6px 6px 6px 0;
+    }
+  }
+}
+</style>

package/components/common/content/navbar/left/models/interfaces.ts

@@ -0,0 +1,5 @@
+export interface UI_I_Navigation {
+  title: string
+  children: UI_I_Navigation[]
+  _path: string
+}

package/components/common/content/navbar/left/utils/constructAccordion.ts

@@ -0,0 +1,27 @@
+import type { UI_I_Navigation } from '~/components/common/content/navbar/left/models/interfaces'
+import type { UI_I_AccordionRecursion } from '~/components/common/accordion/models/interfaces'
+
+export const constructItems = (
+  items?: UI_I_Navigation[],
+  parent?: UI_I_Navigation
+): UI_I_AccordionRecursion[] => {
+  if (!items) return []
+
+  return items
+    .filter((item) => {
+      return (
+        !parent || (item.title !== parent.title && item._path !== parent._path)
+      )
+    })
+    .map((item: UI_I_Navigation): UI_I_AccordionRecursion => {
+      const children = constructItems(item.children, item)
+      return {
+        children,
+        id: item._path,
+        path: item._path,
+        name: item.title,
+        hasChild: !!children.length,
+        isOpen: !parent,
+      }
+    })
+}

package/components/common/content/navbar/right/Right.vue

@@ -0,0 +1,139 @@
+<template>
+  <div :class="['navbar', { open: isShow }]">
+    <button v-if="!isShow" class="open-icon-button" @click="isShow = !isShow">
+      <atoms-the-icon name="arrow" />
+    </button>
+    <div v-else class="height-100">
+      <div class="navbar__header">
+        <p class="title">{{ props.title }}</p>
+        <button class="close-icon-button" @click="isShow = !isShow">
+          <atoms-the-icon name="close" />
+        </button>
+      </div>
+      <div class="navbar__content content-links">
+        <a
+          v-for="item in props.items"
+          :key="item.text"
+          :href="item.to"
+          :class="['link-item', { active: route.hash === item.to }]"
+          >{{ item.text }}</a
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_NavbarItem } from '~/components/common/content/navbar/right/models/interfaces'
+
+const props = defineProps<{
+  title: string
+  items: UI_I_NavbarItem[]
+}>()
+
+const route = useRoute()
+
+const isShow = ref<boolean>(true)
+
+const checkActiveLink = (): void => {
+  const links = document.querySelectorAll('.content-links .link-item')
+
+  if (!links.length) return
+
+  links.forEach((item) => {
+    const linkElement = item as HTMLLinkElement
+
+    linkElement.classList.remove('active')
+    const linkHref = linkElement.getAttribute('href')
+    if (linkHref && route.hash === linkHref) linkElement.classList.add('active')
+    else if (!route.hash) links[0].classList.add('active')
+  })
+}
+
+const parentCurrentScrollPosition = (): void => {
+  const parentElement = document.querySelector('.help__content')
+  if (!parentElement || route.hash) return
+
+  parentElement.scrollTop = 0
+}
+
+onUpdated(() => {
+  parentCurrentScrollPosition()
+  checkActiveLink()
+})
+
+onMounted(() => {
+  checkActiveLink()
+})
+</script>
+
+<style scoped lang="scss">
+.navbar {
+  position: sticky;
+  top: 0;
+  height: inherit;
+  border-left: 0.5px solid #e8e8e8;
+  border-top: 0.5px solid #e8e8e8;
+  max-width: 308px;
+  overflow: hidden;
+
+  &.open {
+    min-width: 308px;
+  }
+
+  .open-icon-button {
+    transform: rotate(270deg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    background-color: unset;
+    cursor: pointer;
+    margin: 12px 6px;
+  }
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    gap: 50px;
+    padding: 12px 12px 6px 18px;
+
+    .title {
+      font-weight: bold;
+      color: black;
+      font-size: 16px;
+    }
+
+    .close-icon-button {
+      transform: rotate(270deg);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: none;
+      background-color: unset;
+      cursor: pointer;
+
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+  &__content {
+    height: 100%;
+    overflow: auto;
+  }
+  .link-item {
+    display: block;
+    color: #737373;
+    padding: 6px 12px 6px 18px;
+    font-size: 14px;
+    text-decoration: unset;
+    cursor: pointer;
+
+    &.active {
+      font-weight: bold;
+      border-left: 5px solid #0079b8;
+    }
+  }
+}
+</style>

package/components/common/content/navbar/right/models/interfaces.ts

@@ -0,0 +1,4 @@
+export interface UI_I_NavbarItem {
+  text: string
+  to: string
+}

package/components/common/context/Context.spec.ts

@@ -1,20 +1,20 @@
-import { describe, test, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Context from './Context.vue'
-
-describe('Context.vue', () => {
-  test('testing popup position', () => {
-    const wrapper = mount(Context, {
-      props: {
-        contextMenu: {
-          x: 100,
-          y: 200,
-        },
-      },
-    })
-
-    const popup = wrapper.find('.context-popup')
-    expect(popup.attributes().style).toContain('100px')
-    expect(popup.attributes().style).toContain('200px')
-  })
-})
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Context from './Context.vue'
+
+describe('Context.vue', () => {
+  test('testing popup position', () => {
+    const wrapper = mount(Context, {
+      props: {
+        contextMenu: {
+          x: 100,
+          y: 200,
+        },
+      },
+    })
+
+    const popup = wrapper.find('.context-popup')
+    expect(popup.attributes().style).toContain('100px')
+    expect(popup.attributes().style).toContain('200px')
+  })
+})