bfg-common 1.2.20 → 1.2.21

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>

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

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

package/components/common/home/Card.vue

@@ -1,63 +1,63 @@
-<template>
-  <div class="card">
-    <div class="header flex-align-center flex-space-between">
-      <div class="flex-align-center">
-        <i :class="['card-icon', props.iconName]" />
-        <p>{{ props.title }}</p>
-      </div>
-      <div class="pull-right">
-        {{ props.count }}
-      </div>
-    </div>
-    <div class="block">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    title: string
-    count: number
-    iconName: string
-  }>(),
-  { count: 0 }
-)
-</script>
-<style scoped lang="scss">
-.card {
-  color: var(--global-font-color);
-  background-color: var(--global-bg-color);
-
-  .block {
-    color: inherit;
-    background-color: inherit;
-    padding: 12px 18px;
-  }
-  .header {
-    color: var(--global-font-color2);
-    background-color: inherit;
-    padding: 12px 18px;
-    height: auto;
-    border-bottom: 1px solid var(--global-border-color);
-
-    i {
-      margin: 1px 4px 0;
-    }
-    p {
-      font-size: 18px;
-      margin-left: 4px;
-    }
-    .pull-right {
-      font-size: 18px;
-    }
-
-    .card-icon {
-      width: 18px;
-      height: 18px;
-      fill: var(--global-font-color2);
-    }
-  }
-}
-</style>
+<template>
+  <div class="card">
+    <div class="header flex-align-center flex-space-between">
+      <div class="flex-align-center">
+        <i :class="['card-icon', props.iconName]" />
+        <p>{{ props.title }}</p>
+      </div>
+      <div class="pull-right">
+        {{ props.count }}
+      </div>
+    </div>
+    <div class="block">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title: string
+    count: number
+    iconName: string
+  }>(),
+  { count: 0 }
+)
+</script>
+<style scoped lang="scss">
+.card {
+  color: var(--global-font-color);
+  background-color: var(--global-bg-color);
+
+  .block {
+    color: inherit;
+    background-color: inherit;
+    padding: 12px 18px;
+  }
+  .header {
+    color: var(--global-font-color2);
+    background-color: inherit;
+    padding: 12px 18px;
+    height: auto;
+    border-bottom: 1px solid var(--global-border-color);
+
+    i {
+      margin: 1px 4px 0;
+    }
+    p {
+      font-size: 18px;
+      margin-left: 4px;
+    }
+    .pull-right {
+      font-size: 18px;
+    }
+
+    .card-icon {
+      width: 18px;
+      height: 18px;
+      fill: var(--global-font-color2);
+    }
+  }
+}
+</style>

package/components/common/home/ResourceBlock.vue

@@ -1,117 +1,117 @@
-<template>
-  <div class="card">
-    <div class="card-block">
-      <div class="clr-row vc-capacity-content">
-        <div
-          v-for="item in props.items"
-          :key="item.type"
-          class="clr-col-md clr-col-sm-12 clr-col-xs-12 capacity-entity"
-        >
-          <div class="capacity-entity-content">
-            <h3 class="capacity-entity-label">
-              {{ localization[item.type] }}
-            </h3>
-            <div class="capacity-entity-metrics-content">
-              <h4 class="capacity-entity-free">
-                {{ item.free.text }} {{ localization.free }}
-              </h4>
-              <progress
-                class="progress-block"
-                :max="item.capacity.value"
-                :value="item.used.value"
-              />
-              <div class="capacity-entity-used">
-                {{ item.used.text }} {{ localization.used?.toLowerCase() }} |
-                {{ item.capacity.text }} {{ localization.total?.toLowerCase() }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import type {
-  UI_I_ResourceMeter,
-  UI_I_MeterBlockItem,
-} from '~/components/common/home/models/interfaces'
-
-const props = defineProps<{
-  items: UI_I_ResourceMeter<UI_I_MeterBlockItem>[]
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-<style lang="scss" scoped>
-.card {
-  color: var(--global-font-color);
-  background-color: var(--global-bg-color);
-
-  &-block {
-    .capacity-entity {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin: 0;
-      padding: 0 10px;
-      border-left: 1px solid var(--global-border-color);
-
-      &:first-of-type {
-        border-left: none;
-      }
-
-      .capacity-entity-content {
-        min-height: 120px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-
-        h3 {
-          font-size: 18px;
-          font-weight: 200;
-          margin-bottom: 5px;
-        }
-
-        progress.progress-block {
-          width: 100%;
-          height: 0.6395rem;
-          line-height: 24px;
-          background-color: var(--progress-bg-color);
-        }
-        progress::-webkit-progress-value,
-        progress::-moz-progress-value {
-          background-color: var(--progress-value-bg-color);
-        }
-        progress::-webkit-progress-bar {
-          background-color: var(--progress-bg-color);
-        }
-        .capacity-entity-free {
-          font-size: 22px;
-          font-weight: 200;
-          margin-bottom: 10px;
-        }
-        .capacity-entity-used {
-          font-size: 12px;
-        }
-        .capacity-entity-label {
-          align-self: flex-start;
-          // font-size: 0.9rem;
-        }
-      }
-    }
-  }
-}
-.capacity-entity-content:nth-child(1) {
-  border-left: none;
-}
-.capacity-entity-metrics-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-}
-</style>
+<template>
+  <div class="card">
+    <div class="card-block">
+      <div class="clr-row vc-capacity-content">
+        <div
+          v-for="item in props.items"
+          :key="item.type"
+          class="clr-col-md clr-col-sm-12 clr-col-xs-12 capacity-entity"
+        >
+          <div class="capacity-entity-content">
+            <h3 class="capacity-entity-label">
+              {{ localization[item.type] }}
+            </h3>
+            <div class="capacity-entity-metrics-content">
+              <h4 class="capacity-entity-free">
+                {{ item.free.text }} {{ localization.free }}
+              </h4>
+              <progress
+                class="progress-block"
+                :max="item.capacity.value"
+                :value="item.used.value"
+              />
+              <div class="capacity-entity-used">
+                {{ item.used.text }} {{ localization.used?.toLowerCase() }} |
+                {{ item.capacity.text }} {{ localization.total?.toLowerCase() }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import type {
+  UI_I_ResourceMeter,
+  UI_I_MeterBlockItem,
+} from '~/components/common/home/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_ResourceMeter<UI_I_MeterBlockItem>[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+<style lang="scss" scoped>
+.card {
+  color: var(--global-font-color);
+  background-color: var(--global-bg-color);
+
+  &-block {
+    .capacity-entity {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0 10px;
+      border-left: 1px solid var(--global-border-color);
+
+      &:first-of-type {
+        border-left: none;
+      }
+
+      .capacity-entity-content {
+        min-height: 120px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+
+        h3 {
+          font-size: 18px;
+          font-weight: 200;
+          margin-bottom: 5px;
+        }
+
+        progress.progress-block {
+          width: 100%;
+          height: 0.6395rem;
+          line-height: 24px;
+          background-color: var(--progress-bg-color);
+        }
+        progress::-webkit-progress-value,
+        progress::-moz-progress-value {
+          background-color: var(--progress-value-bg-color);
+        }
+        progress::-webkit-progress-bar {
+          background-color: var(--progress-bg-color);
+        }
+        .capacity-entity-free {
+          font-size: 22px;
+          font-weight: 200;
+          margin-bottom: 10px;
+        }
+        .capacity-entity-used {
+          font-size: 12px;
+        }
+        .capacity-entity-label {
+          align-self: flex-start;
+          // font-size: 0.9rem;
+        }
+      }
+    }
+  }
+}
+.capacity-entity-content:nth-child(1) {
+  border-left: none;
+}
+.capacity-entity-metrics-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>