bfg-common 1.4.884 → 1.4.900

package/components/common/details/DetailsItem.vue

@@ -1,109 +1,109 @@
-<template>
-  <div
-    :class="[
-      'stack-block',
-      { 'not-children': !props.hasChildren, open: isOpen },
-    ]"
-  >
-    <div class="stack-block__label">
-      <atoms-the-icon
-        :data-id="`${props.testId}-toggle-icon`"
-        name="angle"
-        class="stack-block__icon"
-        @click="onToggle"
-      />
-
-      <div class="stack-view-key">
-        <slot name="stackBlockKey" />
-      </div>
-      <div class="stack-block-content" :data-id="props.testId">
-        <slot name="stackBlockContent" />
-      </div>
-    </div>
-
-    <div v-show="isOpen" class="stack-children">
-      <div style="height: auto">
-        <slot name="stackChildren" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    openByDefault?: boolean
-    hasChildren: boolean
-    testId?: string
-  }>(),
-  {
-    openByDefault: false,
-    testId: '',
-  }
-)
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-}>()
-const isOpen = ref<boolean>(props.openByDefault || false)
-const onToggle = (): void => {
-  isOpen.value = !isOpen.value
-  emits('toggle', isOpen.value)
-}
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-.stack-block {
-  &.open {
-    .stack-block__icon {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__label {
-    //padding: 7px 0 6px;
-    @include flex($align: center);
-    max-width: unset;
-
-    &::before {
-      display: none;
-    }
-
-    .stack-view-key {
-      max-width: 40%;
-    }
-
-    .stack-block-content {
-      padding: 0;
-      flex: 1 1 auto;
-      width: 60%;
-      background-color: transparent;
-    }
-  }
-  &__icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 4px;
-    transform: rotate(90deg);
-    align-self: center;
-    fill: var(--triger-icon-color);
-    cursor: pointer;
-  }
-
-  &.not-children {
-    .stack-block__label {
-      padding: 0 0 3px 0;
-      background-color: transparent;
-
-      .stack-view-key {
-        max-width: 20%;
-        flex: 1 1 130px;
-      }
-    }
-
-    .stack-block__icon {
-      opacity: 0;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="[
+      'stack-block',
+      { 'not-children': !props.hasChildren, open: isOpen },
+    ]"
+  >
+    <div class="stack-block__label">
+      <atoms-the-icon
+        :data-id="`${props.testId}-toggle-icon`"
+        name="angle"
+        class="stack-block__icon"
+        @click="onToggle"
+      />
+
+      <div class="stack-view-key">
+        <slot name="stackBlockKey" />
+      </div>
+      <div class="stack-block-content" :data-id="props.testId">
+        <slot name="stackBlockContent" />
+      </div>
+    </div>
+
+    <div v-show="isOpen" class="stack-children">
+      <div style="height: auto">
+        <slot name="stackChildren" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    openByDefault?: boolean
+    hasChildren: boolean
+    testId?: string
+  }>(),
+  {
+    openByDefault: false,
+    testId: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+}>()
+const isOpen = ref<boolean>(props.openByDefault || false)
+const onToggle = (): void => {
+  isOpen.value = !isOpen.value
+  emits('toggle', isOpen.value)
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+.stack-block {
+  &.open {
+    .stack-block__icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__label {
+    //padding: 7px 0 6px;
+    @include flex($align: center);
+    max-width: unset;
+
+    &::before {
+      display: none;
+    }
+
+    .stack-view-key {
+      max-width: 40%;
+    }
+
+    .stack-block-content {
+      padding: 0;
+      flex: 1 1 auto;
+      width: 60%;
+      background-color: transparent;
+    }
+  }
+  &__icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    transform: rotate(90deg);
+    align-self: center;
+    fill: var(--triger-icon-color);
+    cursor: pointer;
+  }
+
+  &.not-children {
+    .stack-block__label {
+      padding: 0 0 3px 0;
+      background-color: transparent;
+
+      .stack-view-key {
+        max-width: 20%;
+        flex: 1 1 130px;
+      }
+    }
+
+    .stack-block__icon {
+      opacity: 0;
+    }
+  }
+}
+</style>

package/components/common/graph/Graph.vue

@@ -1,104 +1,104 @@
-<template>
-  <common-graph-new v-if="isNewView" :chart-options="chartOptions" />
-  <common-graph-old v-else :chart-options="chartOptions" />
-</template>
-
-<script setup lang="ts">
-import type {
-  I_LineGraph,
-  I_DiskGraph,
-} from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
-
-const props = defineProps<{
-  chart?: any
-  data: I_LineGraph | I_DiskGraph
-  update: number
-  exportType?: string
-  selectedRow?: number[]
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-let localChart: any = null
-const exportChart = (type: string): void => {
-  if (type === 'png') {
-    localChart.exportChart({
-      type: 'image/png',
-    })
-  } else if (type === 'jpeg') {
-    localChart.exportChart({
-      type: 'image/jpeg',
-    })
-  } else if (type === 'svg') {
-    localChart.exportChart({
-      type: 'image/svg+xml',
-    })
-  } else if (type === 'csv') {
-    localChart.downloadCSV()
-  }
-}
-
-const chartOptions = ref<I_LineGraph | I_DiskGraph | null>(null)
-const initGraph = (): void => {
-  if (!props.data) return
-  setTimeout(() => {
-    chartOptions.value = props.data
-  }, 500)
-}
-
-watch(
-  () => props.update,
-  (newValue) => {
-    newValue && initGraph()
-  },
-  { immediate: true }
-)
-
-watch(
-  () => props.exportType,
-  (newValue) => {
-    if (!newValue) return
-
-    exportChart(newValue)
-  }
-)
-
-watch(
-  () => props.chart,
-  (newValue) => {
-    if (newValue.series) localChart = newValue
-  },
-  { deep: true }
-)
-
-const updateSeriesStrokeWidth = (data: number[]): void => {
-  if (!localChart) return
-
-  const newChartOptions = chartOptions.value
-  newChartOptions.series.forEach((_: any, key: number) => {
-    newChartOptions.series[key].lineWidth = 1.5
-
-    if (data.includes(key)) newChartOptions.series[key].lineWidth = 3
-  })
-
-  chartOptions.value = newChartOptions
-}
-
-watch(
-  () => props.selectedRow,
-  (newValue) => newValue && updateSeriesStrokeWidth(newValue)
-)
-</script>
-
-<style scoped lang="scss">
-.graph-content {
-  width: 100%;
-  //height: inherit;
-  height: 100%;
-
-  .graph-block {
-    height: 100%;
-  }
-}
-</style>
+<template>
+  <common-graph-new v-if="isNewView" :chart-options="chartOptions" />
+  <common-graph-old v-else :chart-options="chartOptions" />
+</template>
+
+<script setup lang="ts">
+import type {
+  I_LineGraph,
+  I_DiskGraph,
+} from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
+
+const props = defineProps<{
+  chart?: any
+  data: I_LineGraph | I_DiskGraph
+  update: number
+  exportType?: string
+  selectedRow?: number[]
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+let localChart: any = null
+const exportChart = (type: string): void => {
+  if (type === 'png') {
+    localChart.exportChart({
+      type: 'image/png',
+    })
+  } else if (type === 'jpeg') {
+    localChart.exportChart({
+      type: 'image/jpeg',
+    })
+  } else if (type === 'svg') {
+    localChart.exportChart({
+      type: 'image/svg+xml',
+    })
+  } else if (type === 'csv') {
+    localChart.downloadCSV()
+  }
+}
+
+const chartOptions = ref<I_LineGraph | I_DiskGraph | null>(null)
+const initGraph = (): void => {
+  if (!props.data) return
+  setTimeout(() => {
+    chartOptions.value = props.data
+  }, 500)
+}
+
+watch(
+  () => props.update,
+  (newValue) => {
+    newValue && initGraph()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.exportType,
+  (newValue) => {
+    if (!newValue) return
+
+    exportChart(newValue)
+  }
+)
+
+watch(
+  () => props.chart,
+  (newValue) => {
+    if (newValue.series) localChart = newValue
+  },
+  { deep: true }
+)
+
+const updateSeriesStrokeWidth = (data: number[]): void => {
+  if (!localChart) return
+
+  const newChartOptions = chartOptions.value
+  newChartOptions.series.forEach((_: any, key: number) => {
+    newChartOptions.series[key].lineWidth = 1.5
+
+    if (data.includes(key)) newChartOptions.series[key].lineWidth = 3
+  })
+
+  chartOptions.value = newChartOptions
+}
+
+watch(
+  () => props.selectedRow,
+  (newValue) => newValue && updateSeriesStrokeWidth(newValue)
+)
+</script>
+
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  .graph-block {
+    height: 100%;
+  }
+}
+</style>

package/components/common/graph/GraphNew.vue

@@ -41,7 +41,7 @@ const hiddenButtons = computed<string[]>(() => {
   --chart-menu-border-color: #e9ebed;
   --chart-menu-item-color: #4d5d69;
   --chart-menu-item-hover-color: #182531;
-  --chart-menu-item-hover-background-color: rgba(233, 235, 237, 0.4);
+  --chart-menu-item-hover-background-color: #e9ebed;
 
   --chart-menu-download-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66602 6.66675L7.99935 10.0001L11.3327 6.66675' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.33333V2' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   --chart-menu-download-icon-hover: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66602 6.66675L7.99935 10.0001L11.3327 6.66675' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.33333V2' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
@@ -92,8 +92,7 @@ const hiddenButtons = computed<string[]>(() => {
   .graph-block {
     height: 100%;
     border-radius: 8px;
-    box-shadow: 0 1px 4px 0 #00000014;
-    overflow: hidden;
+    box-shadow: 0px 1px 4px 0px #00000014;
   }
 }
 
@@ -172,7 +171,6 @@ const hiddenButtons = computed<string[]>(() => {
     border-color: var(--chart-menu-border-color);
     border-style: solid;
     margin: 0 8px;
-    border-width: 1px;
   }
 }
 </style>

package/components/common/layout/theHeader/helpMenu/About.vue

@@ -1,82 +1,82 @@
-<template>
-  <Teleport to="body">
-    <common-layout-the-header-help-menu-about-new
-      v-if="isNewView"
-      :title="title"
-      :subtitle="subtitle"
-      :about-heading-text="aboutHeadingText"
-      :about-desc-one="aboutDesc1"
-      :about-desc-second="aboutDesc2"
-      :project-name="props.projectName"
-      :url="companyWebSitePath"
-      @hide="emits('hide')"
-    />
-
-    <common-layout-the-header-help-menu-about-old
-      v-else
-      :title="title"
-      :subtitle="subtitle"
-      :about-heading-text="aboutHeadingText"
-      :about-desc-one="aboutDesc1"
-      :about-desc-second="aboutDesc2"
-      :project-name="props.projectName"
-      :url="companyWebSitePath"
-      @hide="emits('hide')"
-    />
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  version: string
-  projectName: string
-}>()
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store }: any = useNuxtApp()
-const config = useRuntimeConfig()
-
-const companyName = computed<string>(
-  () => config.public[`COMPANY_NAME_${useEnvLanguage()}`]
-)
-const brandName = computed<string>(
-  () => config.public[`TRADEMARK_${useEnvLanguage()}`]
-)
-
-const companyWebSitePath = ref<string>('https://iridium-soft.com/')
-
-const title = computed<string>(() => `${brandName.value}® ${props.projectName}`)
-const subtitle = computed<string>(() =>
-  localization.value.layout.aboutWebClientVersion
-    .replace('{0}', props.projectName)
-    .replace('{1}', props.version)
-)
-
-const aboutHeadingText = computed<string>(() =>
-  localization.value.layout.aboutHeading.replace(
-    '{companyName}',
-    companyName.value
-  ).replace(
-    '{year}',
-      new Date().getFullYear() + ''
-  )
-)
-
-const aboutDesc1 = computed<string>(() =>
-  localization.value.layout.aboutDesc1
-    .replaceAll('{companyName}', companyName.value)
-    .replaceAll('{trademark}', brandName.value)
-)
-const aboutDesc2 = computed<string>(() =>
-  localization.value.layout.aboutDesc2
-    .replaceAll('{companyName}', companyName.value)
-    .replaceAll('{trademark}', brandName.value)
-)
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-</script>
+<template>
+  <Teleport to="body">
+    <common-layout-the-header-help-menu-about-new
+      v-if="isNewView"
+      :title="title"
+      :subtitle="subtitle"
+      :about-heading-text="aboutHeadingText"
+      :about-desc-one="aboutDesc1"
+      :about-desc-second="aboutDesc2"
+      :project-name="props.projectName"
+      :url="companyWebSitePath"
+      @hide="emits('hide')"
+    />
+
+    <common-layout-the-header-help-menu-about-old
+      v-else
+      :title="title"
+      :subtitle="subtitle"
+      :about-heading-text="aboutHeadingText"
+      :about-desc-one="aboutDesc1"
+      :about-desc-second="aboutDesc2"
+      :project-name="props.projectName"
+      :url="companyWebSitePath"
+      @hide="emits('hide')"
+    />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  version: string
+  projectName: string
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+const config = useRuntimeConfig()
+
+const companyName = computed<string>(
+  () => config.public[`COMPANY_NAME_${useEnvLanguage()}`]
+)
+const brandName = computed<string>(
+  () => config.public[`TRADEMARK_${useEnvLanguage()}`]
+)
+
+const companyWebSitePath = ref<string>('https://iridium-soft.com/')
+
+const title = computed<string>(() => `${brandName.value}® ${props.projectName}`)
+const subtitle = computed<string>(() =>
+  localization.value.layout.aboutWebClientVersion
+    .replace('{0}', props.projectName)
+    .replace('{1}', props.version)
+)
+
+const aboutHeadingText = computed<string>(() =>
+  localization.value.layout.aboutHeading.replace(
+    '{companyName}',
+    companyName.value
+  ).replace(
+    '{year}',
+      new Date().getFullYear() + ''
+  )
+)
+
+const aboutDesc1 = computed<string>(() =>
+  localization.value.layout.aboutDesc1
+    .replaceAll('{companyName}', companyName.value)
+    .replaceAll('{trademark}', brandName.value)
+)
+const aboutDesc2 = computed<string>(() =>
+  localization.value.layout.aboutDesc2
+    .replaceAll('{companyName}', companyName.value)
+    .replaceAll('{trademark}', brandName.value)
+)
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>