bfg-common 1.5.348 → 1.5.349

package/components/atoms/nav/NavBar.vue

@@ -1,147 +1,151 @@
-<template>
-  <nav :id="id" :class="['nav', { 'not-collapse': notCollapse }]">
-    <ul>
-      <li
-        v-for="(item, key) in props.items"
-        :key="key"
-        v-permission="item.permission"
-        class="nav-item"
-      >
-        <atoms-collapse-nav-item
-          :is-link="props.isLink"
-          :item="item"
-          :value="props.modelValue"
-          :title="item.title"
-          btn-class="btn btn-link nav-link"
-          @change="change"
-        />
-      </li>
-      <atoms-collapse-nav
-        v-show="collapsedItems.length && !notCollapse"
-        :test-id="`${props.testId}-container`"
-        :items="collapsedItems"
-        :is-link="props.isLink"
-        :value="props.modelValue"
-        @change="change"
-      />
-    </ul>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_CollapseNavItem[]
-    testId?: string
-    modelValue?: number | string
-    isLink?: boolean
-    notCollapse?: boolean
-  }>(),
-  { testId: 'ui-nav-bar' }
-)
-const emits = defineEmits<{
-  (event: 'update:model-value', value: number): void
-  (event: 'change', value: number): void
-}>()
-
-const change = (value: number): void => {
-  emits('update:model-value', value)
-  emits('change', value)
-}
-
-const visibleCount = ref<number>(props.items.length)
-const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
-  return props.items.filter((_, index) => {
-    return index >= visibleCount.value
-  })
-})
-
-let triggerElementWidth = 0
-const setTriggerElementWidth = (): void => {
-  if (!id.value || !props.testId) return
-
-  const element = document.querySelector(
-    `#${id.value} #${props.testId}-container`
-  )
-  triggerElementWidth =
-    element && element?.style?.display !== 'none'
-      ? element.getBoundingClientRect().width
-      : 0
-}
-
-const spaceForCollapseBtn = ref<number>(60)
-
-let outputSize = (): void => {
-  const el = document.getElementById(id.value)
-  if (!el) return
-
-  const elWidth = el.clientWidth
-  const elItems = el.children[0].children
-
-  setTriggerElementWidth()
-  const elItemsMarginLeft = parseInt(getComputedStyle(elItems[0]).marginLeft)
-  const elItemsMarginRight = parseInt(getComputedStyle(elItems[0]).marginRight)
-  const childrenMarginY = elItemsMarginLeft + elItemsMarginRight
-
-  let childrenWidth = spaceForCollapseBtn.value
-  let count = 0
-  for (let i = 0; i < elItems.length; i++) {
-    childrenWidth += elItems[i].clientWidth + childrenMarginY
-    const isWrap = elWidth - triggerElementWidth < childrenWidth
-
-    if (isWrap) break
-    count++
-  }
-
-  visibleCount.value = count
-
-  const element = document.querySelector(`#${id.value} ul`)
-  if (element) {
-    element.style.paddingRight =
-      collapsedItems.value.length && !props.notCollapse
-        ? `${spaceForCollapseBtn.value}px`
-        : ''
-  }
-}
-outputSize = useThrottle(outputSize)
-
-const id = ref<string>('')
-const setResizeObserve = (): void => {
-  const el = document.getElementById(id.value)
-
-  if (!el) {
-    setTimeout(setResizeObserve, 0)
-    return
-  }
-
-  new ResizeObserver(outputSize).observe(el)
-}
-onMounted(() => {
-  setTriggerElementWidth()
-  setResizeObserve()
-  id.value = `nav-bar${useUniqueId()}`
-})
-</script>
-
-<style scoped lang="scss">
-.nav {
-  box-shadow: inset 0 -0.05rem 0 var(--nav-panel-border-color);
-  align-items: flex-start;
-
-  &.not-collapse {
-    ul {
-      flex-wrap: nowrap;
-    }
-  }
-
-  ul {
-    position: relative;
-    height: 36px;
-    overflow: hidden;
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
-</style>
+<template>
+  <nav :id="id" :class="['nav', { 'not-collapse': notCollapse }]">
+    <ul>
+      <li
+        v-for="(item, key) in props.items"
+        :key="key"
+        v-permission="item.permission"
+        class="nav-item"
+      >
+        <atoms-collapse-nav-item
+          :is-link="props.isLink"
+          :item="item"
+          :value="props.modelValue"
+          :title="item.title"
+          btn-class="btn btn-link nav-link"
+          @change="change"
+        />
+      </li>
+      <atoms-collapse-nav
+        v-show="collapsedItems.length && !notCollapse"
+        :test-id="`${props.testId}-container`"
+        :items="collapsedItems"
+        :is-link="props.isLink"
+        :value="props.modelValue"
+        @change="change"
+      />
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_CollapseNavItem[]
+    testId?: string
+    modelValue?: number | string
+    isLink?: boolean
+    notCollapse?: boolean
+  }>(),
+  { testId: 'ui-nav-bar' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', value: number): void
+  (event: 'change', value: number): void
+}>()
+
+const change = (value: number): void => {
+  emits('update:model-value', value)
+  emits('change', value)
+}
+
+const visibleCount = ref<number>(props.items.length)
+const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
+  return props.items.filter((_, index) => {
+    return index >= visibleCount.value
+  })
+})
+
+let triggerElementWidth = 0
+const setTriggerElementWidth = (): void => {
+  if (!id.value || !props.testId) return
+
+  const element = document.querySelector(
+    `#${id.value} #${props.testId}-container`
+  )
+  triggerElementWidth =
+    element && element?.style?.display !== 'none'
+      ? element.getBoundingClientRect().width
+      : 0
+}
+
+const spaceForCollapseBtn = ref<number>(60)
+
+let outputSize = (): void => {
+  const el = document.getElementById(id.value)
+  if (!el) return
+
+  const elWidth = el.clientWidth
+  const elItems = el.children[0].children
+
+  setTriggerElementWidth()
+  const elItemsMarginLeft = parseInt(getComputedStyle(elItems[0]).marginLeft)
+  const elItemsMarginRight = parseInt(getComputedStyle(elItems[0]).marginRight)
+  const childrenMarginY = elItemsMarginLeft + elItemsMarginRight
+
+  let childrenWidth = spaceForCollapseBtn.value
+  let count = 0
+  for (let i = 0; i < elItems.length; i++) {
+    childrenWidth += elItems[i].clientWidth + childrenMarginY
+    const isWrap = elWidth - triggerElementWidth < childrenWidth
+
+    if (isWrap) break
+    count++
+  }
+
+  visibleCount.value = count
+
+  const element = document.querySelector(`#${id.value} ul`)
+  if (element) {
+    element.style.paddingRight =
+      collapsedItems.value.length && !props.notCollapse
+        ? `${spaceForCollapseBtn.value}px`
+        : ''
+  }
+}
+outputSize = useThrottle(outputSize)
+
+const id = ref<string>('')
+const setResizeObserve = (): void => {
+  const el = document.getElementById(id.value)
+
+  if (!el) {
+    setTimeout(setResizeObserve, 0)
+    return
+  }
+
+  new ResizeObserver(outputSize).observe(el)
+}
+watch(
+  () => props.items,
+  () => {
+    setTriggerElementWidth()
+    setResizeObserve()
+    id.value = `nav-bar${useUniqueId()}`
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.nav {
+  box-shadow: inset 0 -0.05rem 0 var(--nav-panel-border-color);
+  align-items: flex-start;
+
+  &.not-collapse {
+    ul {
+      flex-wrap: nowrap;
+    }
+  }
+
+  ul {
+    position: relative;
+    height: 36px;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+</style>

package/components/common/browse/blocks/lib/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/lib/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/diagramMain/adapter/AdapterItems.vue

@@ -1,61 +1,61 @@
-<template>
-  <g data-title="adapter-items-group">
-    <template v-if="props.adaptersWithPositions.toggle">
-      <template
-        v-for="(adapter, key) in props.adaptersWithPositions.adapters"
-        :key="adapter.id"
-      >
-        <common-diagram-main-adapter-item
-          :adapter="adapter"
-          :selected-port="props.selectedPort"
-          :selected-adapter="props.selectedAdapter"
-          :networks-count="props.networksCount"
-          :is-dark-mode="props.isDarkMode"
-          :networks-with-positions="props.networksWithPositions"
-          @select-adapter="onSelectAdapter"
-          @show-modal="onShowModal"
-        />
-      </template>
-    </template>
-  </g>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_AdaptersWithPositions,
-  UI_I_ModalsInitialData,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_NetworksWithPositions,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  adaptersWithPositions: UI_I_AdaptersWithPositions
-  networksWithPositions: UI_I_NetworksWithPositions[]
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  networksCount: number
-  isDarkMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-adapter', adapterId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const onSelectAdapter = (adapterId: string): void => {
-  emits('select-adapter', adapterId)
-}
-const onShowModal = (
-  value: string,
-  properties?: UI_I_ModalsInitialData
-): void => {
-  emits('show-modal', value, properties)
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <g data-title="adapter-items-group">
+    <template v-if="props.adaptersWithPositions.toggle">
+      <template
+        v-for="(adapter, key) in props.adaptersWithPositions.adapters"
+        :key="adapter.id"
+      >
+        <common-diagram-main-adapter-item
+          :adapter="adapter"
+          :selected-port="props.selectedPort"
+          :selected-adapter="props.selectedAdapter"
+          :networks-count="props.networksCount"
+          :is-dark-mode="props.isDarkMode"
+          :networks-with-positions="props.networksWithPositions"
+          @select-adapter="onSelectAdapter"
+          @show-modal="onShowModal"
+        />
+      </template>
+    </template>
+  </g>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_AdaptersWithPositions,
+  UI_I_ModalsInitialData,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_NetworksWithPositions,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+  networksWithPositions: UI_I_NetworksWithPositions[]
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  networksCount: number
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-adapter', adapterId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const onSelectAdapter = (adapterId: string): void => {
+  emits('select-adapter', adapterId)
+}
+const onShowModal = (
+  value: string,
+  properties?: UI_I_ModalsInitialData
+): void => {
+  emits('show-modal', value, properties)
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/diagramMain/lib/config/initial.ts

@@ -1,50 +1,50 @@
-import type {
-  UI_I_AdapterStatus,
-  UI_I_MainRectHeights,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_SwitchLine,
-  UI_I_NetworkPositionsConst,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-export const managePhysicalAdapterStatusInitial: UI_I_AdapterStatus = {
-  active: [],
-  standby: [],
-  unused: [],
-}
-
-export const mainRectHeightsInitial: UI_I_MainRectHeights = {
-  networksHeight: 0,
-  adaptersHeight: 0,
-}
-
-export const switchLineInitial: UI_I_SwitchLine = {
-  y1: 0,
-  y2: 0,
-  ay: 0,
-}
-
-export const selectedPortInitial: UI_I_SelectedPort = {
-  networkId: '-1',
-  portId: '-1',
-  activeAdapters: [],
-}
-
-export const selectedAdapterInitial: UI_I_SelectedAdapter = {
-  adapterId: '-1',
-  connectedPorts: [],
-}
-
-export const selectedSwitchLineYInitial: UI_I_SwitchLine = {
-  y1: 0,
-  y2: 0,
-}
-
-export const NETWORK_POSITIONS: UI_I_NetworkPositionsConst = {
-  EMPTY_PORTS_PADDING_BOTTOM: 7.5,
-  FROM_VLAN_ID_TO_GROUP_NAME: 22,
-  VMS_AND_PORTS_HEIGHT: 22,
-  V_CENTER_HEIGHT: 32,
-  BETWEEN_VMS_AND_PORTS: 7.5,
-  BETWEEN_V_CENTERS: 12.5,
-} as const
+import type {
+  UI_I_AdapterStatus,
+  UI_I_MainRectHeights,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_SwitchLine,
+  UI_I_NetworkPositionsConst,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+export const managePhysicalAdapterStatusInitial: UI_I_AdapterStatus = {
+  active: [],
+  standby: [],
+  unused: [],
+}
+
+export const mainRectHeightsInitial: UI_I_MainRectHeights = {
+  networksHeight: 0,
+  adaptersHeight: 0,
+}
+
+export const switchLineInitial: UI_I_SwitchLine = {
+  y1: 0,
+  y2: 0,
+  ay: 0,
+}
+
+export const selectedPortInitial: UI_I_SelectedPort = {
+  networkId: '-1',
+  portId: '-1',
+  activeAdapters: [],
+}
+
+export const selectedAdapterInitial: UI_I_SelectedAdapter = {
+  adapterId: '-1',
+  connectedPorts: [],
+}
+
+export const selectedSwitchLineYInitial: UI_I_SwitchLine = {
+  y1: 0,
+  y2: 0,
+}
+
+export const NETWORK_POSITIONS: UI_I_NetworkPositionsConst = {
+  EMPTY_PORTS_PADDING_BOTTOM: 7.5,
+  FROM_VLAN_ID_TO_GROUP_NAME: 22,
+  VMS_AND_PORTS_HEIGHT: 22,
+  V_CENTER_HEIGHT: 32,
+  BETWEEN_VMS_AND_PORTS: 7.5,
+  BETWEEN_V_CENTERS: 12.5,
+} as const

package/components/common/diagramMain/lib/models/types.ts

@@ -1,21 +1,21 @@
-import type {
-  UI_I_Adapter,
-  UI_I_AdapterWithError,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-export type UI_T_AdapterStatusNames = 'active' | 'standby' | 'unused'
-export type UI_T_PropertiesFieldName = 'vlanId' | 'networkLabel'
-export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
-export type UI_T_PortPropertiesFieldName = 'mtu'
-
-export type UI_T_LoadBalancingMode =
-  | 'inherit'
-  | 'active-backup'
-  | 'balance-slb'
-  | 'balance-tcp'
-export type UI_T_IYN = 'inherit' | 'yes' | 'no'
-export type UI_T_Carier = 'inherit' | 'carier' | 'beakon'
-
-export type UI_T_Adapters = (UI_I_Adapter | UI_I_AdapterWithError) & {
-  adapterPosition: number
-}
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterWithError,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+export type UI_T_AdapterStatusNames = 'active' | 'standby' | 'unused'
+export type UI_T_PropertiesFieldName = 'vlanId' | 'networkLabel'
+export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
+export type UI_T_PortPropertiesFieldName = 'mtu'
+
+export type UI_T_LoadBalancingMode =
+  | 'inherit'
+  | 'active-backup'
+  | 'balance-slb'
+  | 'balance-tcp'
+export type UI_T_IYN = 'inherit' | 'yes' | 'no'
+export type UI_T_Carier = 'inherit' | 'carier' | 'beakon'
+
+export type UI_T_Adapters = (UI_I_Adapter | UI_I_AdapterWithError) & {
+  adapterPosition: number
+}