bfg-common 1.2.112 → 1.2.113

package/components/common/headline/Headline.vue

@@ -1,32 +1,32 @@
-<template>
-  <div class="heading-block">
-    <h3 class="heading-block__title">{{ props.headline }}</h3>
-    <div v-if="$slots.action" class="heading-block__actions">
-      <slot name="action" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-  headline: string
-}>()
-</script>
-
-<style lang="scss" scoped>
-@import '~/assets/scss/common/mixins.scss';
-.heading-block {
-  @include flex($just: space-between, $align: flex-start);
-  padding: 4px 2px 0;
-  &__title {
-    @include text($fs: 22px, $fw: 400);
-    display: inline-block;
-    vertical-align: middle;
-  }
-  &__actions {
-    :deep(.btn) {
-      margin: 0;
-    }
-  }
-}
-</style>
+<template>
+  <div class="heading-block">
+    <h3 class="heading-block__title">{{ props.headline }}</h3>
+    <div v-if="$slots.action" class="heading-block__actions">
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  headline: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/scss/common/mixins.scss';
+.heading-block {
+  @include flex($just: space-between, $align: flex-start);
+  padding: 4px 2px 0;
+  &__title {
+    @include text($fs: 22px, $fw: 400);
+    display: inline-block;
+    vertical-align: middle;
+  }
+  &__actions {
+    :deep(.btn) {
+      margin: 0;
+    }
+  }
+}
+</style>

package/components/common/help/navbar/left/Left.vue

@@ -1,164 +1,164 @@
-<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"
-      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_ContentNavigation } from '~/components/common/help/navbar/left/models/interfaces'
-import { UI_E_ShowType } from '~/components/common/accordion/models/enums'
-import { constructItems } from '~/components/common/help/navbar/left/utils/constructAccordion'
-import { constructAccordionItems } from '~/components/common/accordion/utils/accordion'
-
-const props = defineProps<{
-  items: UI_I_ContentNavigation[] | null
-}>()
-
-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'
-  accordionItems.value = constructAccordionItems(
-    accordionItems.value,
-    UI_E_ShowType[accordionShowType.value]
-  )
-}
-
-const accordionItems = ref<UI_I_AccordionRecursion[]>([])
-
-watch(
-  () => props.items,
-  (newValue) => {
-    if (newValue === null) return
-
-    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 var(--global-border-color);
-
-  .header-content {
-    border-bottom: 0.5px solid var(--global-border-color);
-    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;
-    }
-  }
-}
-
-html.dark-theme {
-  .left-navbar {
-    .header-content {
-      background-color: transparent;
-    }
-
-    .accordion {
-      .accordion-item.active {
-        background-color: transparent;
-      }
-    }
-
-    .router-link-exact-active {
-      .text {
-        background-color: #29414e !important;
-      }
-    }
-  }
-}
-</style>
+<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"
+      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_ContentNavigation } from '~/components/common/help/navbar/left/models/interfaces'
+import { UI_E_ShowType } from '~/components/common/accordion/models/enums'
+import { constructItems } from '~/components/common/help/navbar/left/utils/constructAccordion'
+import { constructAccordionItems } from '~/components/common/accordion/utils/accordion'
+
+const props = defineProps<{
+  items: UI_I_ContentNavigation[] | null
+}>()
+
+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'
+  accordionItems.value = constructAccordionItems(
+    accordionItems.value,
+    UI_E_ShowType[accordionShowType.value]
+  )
+}
+
+const accordionItems = ref<UI_I_AccordionRecursion[]>([])
+
+watch(
+  () => props.items,
+  (newValue) => {
+    if (newValue === null) return
+
+    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 var(--global-border-color);
+
+  .header-content {
+    border-bottom: 0.5px solid var(--global-border-color);
+    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;
+    }
+  }
+}
+
+html.dark-theme {
+  .left-navbar {
+    .header-content {
+      background-color: transparent;
+    }
+
+    .accordion {
+      .accordion-item.active {
+        background-color: transparent;
+      }
+    }
+
+    .router-link-exact-active {
+      .text {
+        background-color: #29414e !important;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,6 +1,6 @@
-export interface UI_I_ContentNavigation {
-  title: string
-  children: UI_I_ContentNavigation[]
-  weight: number
-  _path: string
-}
+export interface UI_I_ContentNavigation {
+  title: string
+  children: UI_I_ContentNavigation[]
+  weight: number
+  _path: string
+}

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

@@ -1,139 +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_ContentNavbarItem } from '~/components/common/help/navbar/right/models/interfaces'
-
-const props = defineProps<{
-  title: string
-  items: UI_I_ContentNavbarItem[]
-}>()
-
-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 var(--global-border-color);
-  border-top: 0.5px solid var(--global-border-color);
-  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: var(--global-font-color);
-      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: var(--global-font-color);
-    padding: 6px 12px 6px 18px;
-    font-size: 14px;
-    text-decoration: unset;
-    cursor: pointer;
-
-    &.active {
-      font-weight: bold;
-      border-left: 5px solid #0079b8;
-    }
-  }
-}
-</style>
+<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_ContentNavbarItem } from '~/components/common/help/navbar/right/models/interfaces'
+
+const props = defineProps<{
+  title: string
+  items: UI_I_ContentNavbarItem[]
+}>()
+
+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 var(--global-border-color);
+  border-top: 0.5px solid var(--global-border-color);
+  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: var(--global-font-color);
+      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: var(--global-font-color);
+    padding: 6px 12px 6px 18px;
+    font-size: 14px;
+    text-decoration: unset;
+    cursor: pointer;
+
+    &.active {
+      font-weight: bold;
+      border-left: 5px solid #0079b8;
+    }
+  }
+}
+</style>