bfg-common 1.1.2 → 1.1.4

package/components/common/feedback/VisitPortal.vue

@@ -1,54 +1,54 @@
-<template>
-  <div>
-    <div class="modal-body">
-      <div>
-        {{ localization.useOurExternalIdeasPortal }}
-      </div>
-      <a id="portal-link" :href="portalLink" target="_blank">
-        <button id="visit-ideas-portal-button" class="btn btn-outline wrap">
-          <span class="text"> {{ localization.visitIdeasPortal }} </span>
-          <atoms-the-icon2 class="btn-icon" name="pop-out" />
-        </button>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-const localization = computed<UI_I_Localization>(() => useLocal())
-const portalLink = ref<string>('#')
-</script>
-
-<style scoped lang="scss">
-.modal-body {
-  padding: 0;
-  a {
-    text-decoration: none;
-
-    .btn.btn-outline.wrap {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .text {
-        color: var(--icon-fill-hover-color);
-      }
-      & .btn-icon {
-        width: 16px;
-        height: 16px;
-        margin-left: 5px;
-        fill: var(--icon-fill-hover-color);
-      }
-    }
-  }
-}
-</style>
-<style>
-:root {
-  --icon-fill-hover-color: rgb(0, 121, 184);
-}
-:root.dark-theme {
-  --icon-fill-hover-color: rgb(73, 175, 217);
-}
-</style>
+<template>
+  <div>
+    <div class="modal-body">
+      <div>
+        {{ localization.useOurExternalIdeasPortal }}
+      </div>
+      <a id="portal-link" :href="portalLink" target="_blank">
+        <button id="visit-ideas-portal-button" class="btn btn-outline wrap">
+          <span class="text"> {{ localization.visitIdeasPortal }} </span>
+          <atoms-the-icon2 class="btn-icon" name="pop-out" />
+        </button>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+const localization = computed<UI_I_Localization>(() => useLocal())
+const portalLink = ref<string>('#')
+</script>
+
+<style scoped lang="scss">
+.modal-body {
+  padding: 0;
+  a {
+    text-decoration: none;
+
+    .btn.btn-outline.wrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .text {
+        color: var(--icon-fill-hover-color);
+      }
+      & .btn-icon {
+        width: 16px;
+        height: 16px;
+        margin-left: 5px;
+        fill: var(--icon-fill-hover-color);
+      }
+    }
+  }
+}
+</style>
+<style>
+:root {
+  --icon-fill-hover-color: rgb(0, 121, 184);
+}
+:root.dark-theme {
+  --icon-fill-hover-color: rgb(73, 175, 217);
+}
+</style>

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

@@ -1,139 +1,139 @@
-<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_ContentNavigation } from '~/components/common/help/navbar/left/models/interfaces'
-import { constructItems } from '~/components/common/help/navbar/left/utils/constructAccordion'
-
-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'
-}
-
-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 #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>
+<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_ContentNavigation } from '~/components/common/help/navbar/left/models/interfaces'
+import { constructItems } from '~/components/common/help/navbar/left/utils/constructAccordion'
+
+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'
+}
+
+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 #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/help/navbar/left/utils/constructAccordion.ts

@@ -1,27 +1,27 @@
-import type { UI_I_ContentNavigation } from '~/components/common/help/navbar/left/models/interfaces'
-import type { UI_I_AccordionRecursion } from '~/components/common/accordion/models/interfaces'
-
-export const constructItems = (
-  items?: UI_I_ContentNavigation[],
-  parent?: UI_I_ContentNavigation
-): UI_I_AccordionRecursion[] => {
-  if (!items) return []
-
-  return items
-    .filter((item) => {
-      return (
-        !parent || (item.title !== parent.title && item._path !== parent._path)
-      )
-    })
-    .map((item: UI_I_ContentNavigation): 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,
-      }
-    })
-}
+import type { UI_I_ContentNavigation } from '~/components/common/help/navbar/left/models/interfaces'
+import type { UI_I_AccordionRecursion } from '~/components/common/accordion/models/interfaces'
+
+export const constructItems = (
+  items?: UI_I_ContentNavigation[],
+  parent?: UI_I_ContentNavigation
+): UI_I_AccordionRecursion[] => {
+  if (!items) return []
+
+  return items
+    .filter((item) => {
+      return (
+        !parent || (item.title !== parent.title && item._path !== parent._path)
+      )
+    })
+    .map((item: UI_I_ContentNavigation): 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/home/Card.vue

@@ -0,0 +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>

package/components/common/home/ResourceBlock.vue

@@ -0,0 +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>

package/components/common/home/StatusContent.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="entity-status-content">
+    <div v-for="(text, value) in props.items" :key="value" class="item">
+      <h3 class="entity-status-item-value">
+        {{ text }}
+      </h3>
+      <div class="entity-status-item-status">{{ localization[value] }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_Card } from '~/components/common/home/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_Card
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.entity-status-content {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  min-height: 100px;
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: inherit;
+    background-color: inherit;
+
+    .entity-status-item-value {
+      font-size: 22px;
+      font-weight: 200;
+    }
+    .entity-status-item-status {
+      font-size: 13px;
+      margin-top: 5px;
+    }
+  }
+}
+</style>