bfg-common 1.5.442 → 1.5.443

package/components/common/diagramMain/modals/lib/config/vmKernelAdapter.ts

@@ -1,90 +1,90 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_ModalTabs,
-  UI_I_VmkernelAdapterTableData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type {
-  UI_I_BodyItems,
-  UI_I_ReadyCompleteFields,
-  UI_I_TableHead,
-} from '~/components/common/wizards/network/add/lib/models/interfaces'
-
-export const vmKernelAdapterViewSettingsFunc = (
-  localization: UI_I_Localization
-): UI_I_ReadyCompleteFields[] => [
-  {
-    id: 0,
-    title: localization.common.portProperties,
-    type: 0,
-    rows: [
-      { name: localization.common.networkLabel, value: '' },
-      { name: localization.common.vlanId, value: 'None (0)' },
-      { name: localization.common.tcpIpStack, value: 'Default' },
-      { name: localization.common.enabledServices },
-    ],
-  },
-  {
-    id: 1,
-    title: localization.common.nicSettings,
-    type: 0,
-    rows: [
-      { name: localization.common.macAddress, value: '00:50:56:62:d7:8d' },
-      { name: localization.common.mtu, value: '1500' },
-    ],
-  },
-  {
-    id: 2,
-    title: localization.common.ipV4Settings,
-    type: 1,
-    rows: [
-      { name: localization.common.dhcp, value: 'Enabled' },
-      { name: localization.common.ipv4address, value: '169.254.195.224 (DHCP)' },
-      { name: localization.common.subnetMask, value: '255.255.0.0' },
-      { name: localization.common.defaultGateway, value: '10.10.101.1' },
-      { name: localization.common.dnsServerAddresses, value: '10.10.101.1' },
-    ],
-  },
-]
-
-export const vmKernelAdapterViewSettingsModalTabsFunc = (
-  localization: UI_I_Localization
-): UI_I_ModalTabs[] => [
-  { text: localization.common.properties, value: 0 },
-  { text: localization.common.ipSettings, value: 1 },
-]
-
-export const vmKernelAdapterViewSettingsTableHeadFunc = (
-  localization: UI_I_Localization
-): UI_I_TableHead[] => [
-  { text: localization.common.device },
-  { text: localization.common.networkLabel },
-  { text: localization.common.switch },
-  { text: localization.common.ipAddress },
-  { text: localization.common.tcpIpStack },
-]
-
-export const vmKernelAdapterTableBodyMapperFunc = (
-  vmkernelAdapterData: UI_I_VmkernelAdapterTableData
-): UI_I_BodyItems[] => [
-  {
-    editable: false,
-    text: vmkernelAdapterData.name,
-    id: vmkernelAdapterData.name,
-  },
-  {
-    editable: false,
-    text: vmkernelAdapterData.networkLabel,
-  },
-  {
-    editable: false,
-    text: vmkernelAdapterData.switch,
-  },
-  {
-    editable: false,
-    text: vmkernelAdapterData.ipAddress,
-  },
-  {
-    editable: false,
-    text: vmkernelAdapterData.tcp,
-  },
-]
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_ModalTabs,
+  UI_I_VmkernelAdapterTableData,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type {
+  UI_I_BodyItems,
+  UI_I_ReadyCompleteFields,
+  UI_I_TableHead,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+
+export const vmKernelAdapterViewSettingsFunc = (
+  localization: UI_I_Localization
+): UI_I_ReadyCompleteFields[] => [
+  {
+    id: 0,
+    title: localization.common.portProperties,
+    type: 0,
+    rows: [
+      { name: localization.common.networkLabel, value: '' },
+      { name: localization.common.vlanId, value: 'None (0)' },
+      { name: localization.common.tcpIpStack, value: 'Default' },
+      { name: localization.common.enabledServices },
+    ],
+  },
+  {
+    id: 1,
+    title: localization.common.nicSettings,
+    type: 0,
+    rows: [
+      { name: localization.common.macAddress, value: '00:50:56:62:d7:8d' },
+      { name: localization.common.mtu, value: '1500' },
+    ],
+  },
+  {
+    id: 2,
+    title: localization.common.ipV4Settings,
+    type: 1,
+    rows: [
+      { name: localization.common.dhcp, value: 'Enabled' },
+      { name: localization.common.ipv4address, value: '169.254.195.224 (DHCP)' },
+      { name: localization.common.subnetMask, value: '255.255.0.0' },
+      { name: localization.common.defaultGateway, value: '10.10.101.1' },
+      { name: localization.common.dnsServerAddresses, value: '10.10.101.1' },
+    ],
+  },
+]
+
+export const vmKernelAdapterViewSettingsModalTabsFunc = (
+  localization: UI_I_Localization
+): UI_I_ModalTabs[] => [
+  { text: localization.common.properties, value: 0 },
+  { text: localization.common.ipSettings, value: 1 },
+]
+
+export const vmKernelAdapterViewSettingsTableHeadFunc = (
+  localization: UI_I_Localization
+): UI_I_TableHead[] => [
+  { text: localization.common.device },
+  { text: localization.common.networkLabel },
+  { text: localization.common.switch },
+  { text: localization.common.ipAddress },
+  { text: localization.common.tcpIpStack },
+]
+
+export const vmKernelAdapterTableBodyMapperFunc = (
+  vmkernelAdapterData: UI_I_VmkernelAdapterTableData
+): UI_I_BodyItems[] => [
+  {
+    editable: false,
+    text: vmkernelAdapterData.name,
+    id: vmkernelAdapterData.name,
+  },
+  {
+    editable: false,
+    text: vmkernelAdapterData.networkLabel,
+  },
+  {
+    editable: false,
+    text: vmkernelAdapterData.switch,
+  },
+  {
+    editable: false,
+    text: vmkernelAdapterData.ipAddress,
+  },
+  {
+    editable: false,
+    text: vmkernelAdapterData.tcp,
+  },
+]

package/components/common/diagramMain/modals/lib/mappers/mappers.ts

@@ -1,87 +1,87 @@
-import type {
-  UI_I_EditFieldsData,
-  UI_I_PortEditSendData,
-  UI_I_PortPropertiesFields,
-  UI_I_IpvFourSettingsFields,
-  UI_I_SwitchEditSendData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-export const portEditDataFunc = (
-  editFieldsData: UI_I_EditFieldsData,
-  id: string
-): UI_I_PortEditSendData => {
-  const { $binary } = useNuxtApp()
-
-  const properties = editFieldsData.properties as UI_I_PortPropertiesFields
-  const ipvFourSettings: UI_I_IpvFourSettingsFields | undefined =
-    editFieldsData.ipvFourSettings
-
-  const body: UI_I_PortEditSendData = {
-    id,
-    mtu: properties?.mtu,
-    services: {
-      Management: !!properties?.services.management,
-      Provisioning: !!properties?.services.provisioning,
-      VSAN: !!properties?.services.vSAN,
-    },
-    tcp_stack: properties?.tcpIp,
-    ipv4_settings: {
-      auto: ipvFourSettings?.ipv4Settings === '0',
-    },
-  }
-
-  if (ipvFourSettings?.ipv4Settings === '1') {
-    body.ipv4_settings = {
-      auto: false,
-      ipv4: ipvFourSettings?.ipv4Address
-        ? $binary.stringToByteIP(ipvFourSettings?.ipv4Address)
-        : 0,
-      mask: ipvFourSettings?.subnetMask
-        ? $binary.stringToByteIP(ipvFourSettings?.subnetMask)
-        : 0,
-      gateway_override: !!ipvFourSettings?.defaultGateway?.checked,
-      gateway: ipvFourSettings?.defaultGateway?.checked
-        ? ipvFourSettings?.defaultGateway?.value
-          ? $binary.stringToByteIP(ipvFourSettings?.defaultGateway?.value)
-          : 0
-        : 0,
-    }
-  }
-
-  return body
-}
-
-export const switchEditDataFunc = (
-  editFieldsData: UI_I_EditFieldsData,
-  id: string
-): UI_I_SwitchEditSendData => {
-  const body: UI_I_SwitchEditSendData = {
-    id,
-    mtu: editFieldsData.properties?.mtu,
-    nics: editFieldsData.teamingFailover?.adapters || {},
-    security: {
-      forged_transmits: editFieldsData.security?.forgedTransmits.selected,
-      mac_change: editFieldsData.security?.macAddressChanges.selected,
-      promiscuous: editFieldsData.security?.promiscuousMode.selected,
-    },
-    shaping: {},
-    teaming: {
-      mode: editFieldsData.teamingFailover?.loadBalancing.selected,
-      link_detection_mode:
-        editFieldsData.teamingFailover?.networkFailureDetection.selected,
-      notify_switches: editFieldsData.teamingFailover?.notifySwitches.selected,
-      failback: editFieldsData.teamingFailover?.failback.selected,
-    },
-  }
-
-  if (editFieldsData.trafficShaping?.status?.selected) {
-    body.shaping = {
-      enabled: true,
-      average_bw: editFieldsData.trafficShaping?.average,
-      peak_bw: editFieldsData.trafficShaping?.peak,
-      burst_size: editFieldsData.trafficShaping?.burstSize,
-    }
-  }
-
-  return body
-}
+import type {
+  UI_I_EditFieldsData,
+  UI_I_PortEditSendData,
+  UI_I_PortPropertiesFields,
+  UI_I_IpvFourSettingsFields,
+  UI_I_SwitchEditSendData,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+export const portEditDataFunc = (
+  editFieldsData: UI_I_EditFieldsData,
+  id: string
+): UI_I_PortEditSendData => {
+  const { $binary } = useNuxtApp()
+
+  const properties = editFieldsData.properties as UI_I_PortPropertiesFields
+  const ipvFourSettings: UI_I_IpvFourSettingsFields | undefined =
+    editFieldsData.ipvFourSettings
+
+  const body: UI_I_PortEditSendData = {
+    id,
+    mtu: properties?.mtu,
+    services: {
+      Management: !!properties?.services.management,
+      Provisioning: !!properties?.services.provisioning,
+      VSAN: !!properties?.services.vSAN,
+    },
+    tcp_stack: properties?.tcpIp,
+    ipv4_settings: {
+      auto: ipvFourSettings?.ipv4Settings === '0',
+    },
+  }
+
+  if (ipvFourSettings?.ipv4Settings === '1') {
+    body.ipv4_settings = {
+      auto: false,
+      ipv4: ipvFourSettings?.ipv4Address
+        ? $binary.stringToByteIP(ipvFourSettings?.ipv4Address)
+        : 0,
+      mask: ipvFourSettings?.subnetMask
+        ? $binary.stringToByteIP(ipvFourSettings?.subnetMask)
+        : 0,
+      gateway_override: !!ipvFourSettings?.defaultGateway?.checked,
+      gateway: ipvFourSettings?.defaultGateway?.checked
+        ? ipvFourSettings?.defaultGateway?.value
+          ? $binary.stringToByteIP(ipvFourSettings?.defaultGateway?.value)
+          : 0
+        : 0,
+    }
+  }
+
+  return body
+}
+
+export const switchEditDataFunc = (
+  editFieldsData: UI_I_EditFieldsData,
+  id: string
+): UI_I_SwitchEditSendData => {
+  const body: UI_I_SwitchEditSendData = {
+    id,
+    mtu: editFieldsData.properties?.mtu,
+    nics: editFieldsData.teamingFailover?.adapters || {},
+    security: {
+      forged_transmits: editFieldsData.security?.forgedTransmits.selected,
+      mac_change: editFieldsData.security?.macAddressChanges.selected,
+      promiscuous: editFieldsData.security?.promiscuousMode.selected,
+    },
+    shaping: {},
+    teaming: {
+      mode: editFieldsData.teamingFailover?.loadBalancing.selected,
+      link_detection_mode:
+        editFieldsData.teamingFailover?.networkFailureDetection.selected,
+      notify_switches: editFieldsData.teamingFailover?.notifySwitches.selected,
+      failback: editFieldsData.teamingFailover?.failback.selected,
+    },
+  }
+
+  if (editFieldsData.trafficShaping?.status?.selected) {
+    body.shaping = {
+      enabled: true,
+      average_bw: editFieldsData.trafficShaping?.average,
+      peak_bw: editFieldsData.trafficShaping?.peak,
+      burst_size: editFieldsData.trafficShaping?.burstSize,
+    }
+  }
+
+  return body
+}

package/components/common/diagramMain/modals/lib/utils/index.ts

@@ -1,24 +1,24 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_EditSettingsErrorMessage } from '~/components/common/diagramMain/lib/models/interfaces'
-
-export const validationMessagesArrayFunc = (
-  arr: (keyof UI_I_EditSettingsErrorMessage)[],
-  errorMessages: UI_I_EditSettingsErrorMessage
-) =>
-  arr
-    .map((ar: keyof UI_I_EditSettingsErrorMessage) => errorMessages[ar])
-    .filter((err) => err !== '')
-
-export const getNicSpeed = (
-  speedInitial: number = 0,
-  localization: UI_I_Localization,
-  defaultValue: string = '--'
-): string => {
-  const speed = Number(speedInitial)
-
-  return speed > 0
-    ? speed >= 1000
-      ? `${speed / 1000} ${localization.common.gbitS}`
-      : `${speed} ${localization.common.mbits}`
-    : defaultValue
-}
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_EditSettingsErrorMessage } from '~/components/common/diagramMain/lib/models/interfaces'
+
+export const validationMessagesArrayFunc = (
+  arr: (keyof UI_I_EditSettingsErrorMessage)[],
+  errorMessages: UI_I_EditSettingsErrorMessage
+) =>
+  arr
+    .map((ar: keyof UI_I_EditSettingsErrorMessage) => errorMessages[ar])
+    .filter((err) => err !== '')
+
+export const getNicSpeed = (
+  speedInitial: number = 0,
+  localization: UI_I_Localization,
+  defaultValue: string = '--'
+): string => {
+  const speed = Number(speedInitial)
+
+  return speed > 0
+    ? speed >= 1000
+      ? `${speed / 1000} ${localization.common.gbitS}`
+      : `${speed} ${localization.common.mbits}`
+    : defaultValue
+}

package/components/common/diagramMain/modals/migrateVmkernelAdapter/MigrateVmkernelAdapter.vue

@@ -42,6 +42,11 @@
 </template>
 
 <script setup lang="ts">
+import type {
+  UI_I_WizardStep,
+  UI_I_ValidationReturn,
+} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type {
   UI_I_Network,
@@ -52,10 +57,6 @@ import type {
   UI_I_ConnectionSettings,
   UI_I_SelectVmkernelAdapter,
 } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type {
-  UI_I_WizardStep,
-  UI_I_ValidationReturn,
-} from '~/components/atoms/wizard/lib/models/interfaces'
 import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/lib/models/enums'
 import {
   stepsFunc,
@@ -66,7 +67,6 @@ import {
   checkConnectionSettingsSync,
   checkSelectedVmSync,
 } from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations'
-import Wizard from '~/components/atoms/wizard/lib/utils/utils'
 import { readyCompleteInitial } from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps'
 
 const props = withDefaults(

package/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps.ts

@@ -1,8 +1,8 @@
+import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/enums'
 import type { UI_I_MigrationVmkernelAdapterReadyComplete } from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/lib/models/enums'
-import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
 
 export const stepsFunc = (
   localization: UI_I_Localization

package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/ConnectionSettings.vue

@@ -88,14 +88,14 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type {
   UI_I_ArbitraryObject,
   UI_I_Localization,
 } from '~/lib/models/interfaces'
 import type { UI_I_ConnectionSettings } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type { UI_I_ErrorFields } from '~/components/atoms/wizard/lib/models/interfaces'
 import { vlanIdSelectData } from '~/components/common/wizards/network/add/lib/config/config'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
 import {
   validateNetworkConnectionSettingsLocal,
   validateVlanIdConnectionSettingsLocal,

package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/common.ts

@@ -1,14 +1,14 @@
-export const isIntegerNumberInRange = (
-  value: number | string | undefined,
-  down: number,
-  up: number
-): boolean =>
-  isNaN(Number(value)) ||
-  Number(value) < down ||
-  Number(value) > up ||
-  Number(value) !== Math.round(Number(value))
-
-export const checkVlanId = (vlanId: string): boolean =>
-  vlanId !== 'None (0)' &&
-  vlanId !== 'All (4095)' &&
-  (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId === '')
+export const isIntegerNumberInRange = (
+  value: number | string | undefined,
+  down: number,
+  up: number
+): boolean =>
+  isNaN(Number(value)) ||
+  Number(value) < down ||
+  Number(value) > up ||
+  Number(value) !== Math.round(Number(value))
+
+export const checkVlanId = (vlanId: string): boolean =>
+  vlanId !== 'None (0)' &&
+  vlanId !== 'All (4095)' &&
+  (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId === '')

package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings.ts

@@ -1,13 +1,13 @@
-import type { UI_I_ConnectionSettings } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type { UI_I_MigrateVmkernelAdapterEmits } from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type {
   UI_I_AsyncCheckReturn,
   UI_I_ValidationReturn,
   UI_I_WizardStep,
-} from '~/components/atoms/wizard/lib/models/interfaces'
+} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type { UI_I_ConnectionSettings } from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type { UI_I_MigrateVmkernelAdapterEmits } from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/lib/models/enums'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
 import { checkVlanId } from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/common'
 
 export const validateVlanIdConnectionSettingsLocal = (

package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter.ts

@@ -1,8 +1,8 @@
+import type { UI_I_WizardStep, UI_I_ValidationReturn } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type { UI_I_SelectVmkernelAdapter } from '~/components/common/wizards/network/add/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_WizardStep, UI_I_ValidationReturn } from '~/components/atoms/wizard/lib/models/interfaces'
 import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/lib/models/enums'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
 
 export const validateSelectedVmLocal = (
   localization: UI_I_Localization,

package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations.ts

@@ -1,19 +1,19 @@
-import {
-  validateVlanIdConnectionSettingsLocal,
-  validateNetworkConnectionSettingsLocal,
-  checkConnectionSettingsSync,
-  checkNetworkAsync,
-} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings'
-import {
-  checkSelectedVmSync,
-  validateSelectedVmLocal,
-} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter'
-
-export {
-  validateVlanIdConnectionSettingsLocal,
-  validateNetworkConnectionSettingsLocal,
-  checkConnectionSettingsSync,
-  checkNetworkAsync,
-  checkSelectedVmSync,
-  validateSelectedVmLocal,
-}
+import {
+  validateVlanIdConnectionSettingsLocal,
+  validateNetworkConnectionSettingsLocal,
+  checkConnectionSettingsSync,
+  checkNetworkAsync,
+} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings'
+import {
+  checkSelectedVmSync,
+  validateSelectedVmLocal,
+} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter'
+
+export {
+  validateVlanIdConnectionSettingsLocal,
+  validateNetworkConnectionSettingsLocal,
+  checkConnectionSettingsSync,
+  checkNetworkAsync,
+  checkSelectedVmSync,
+  validateSelectedVmLocal,
+}

package/components/common/diagramMain/port/Ports.vue

@@ -1,47 +1,47 @@
-<template>
-  <g>
-    <template v-if="props.network.toggle">
-      <template v-for="port in props.network.ports" :key="port.id">
-        <common-diagram-main-port
-          :network="props.network"
-          :port="port"
-          :is-dark-mode="props.isDarkMode"
-          :selected-port="props.selectedPort"
-          :selected-adapter="props.selectedAdapter"
-          @select-port="onSelectPort"
-          @show-modal="onShowModal"
-        />
-      </template>
-    </template>
-  </g>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ModalsInitialData,
-  UI_I_NetworkFullWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  isDarkMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-port', networkId: string, portId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const onSelectPort = (networkId: string, portId: string) =>
-  emits('select-port', networkId, portId)
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
-  emits('show-modal', value, properties)
-</script>
+<template>
+  <g>
+    <template v-if="props.network.toggle">
+      <template v-for="port in props.network.ports" :key="port.id">
+        <common-diagram-main-port
+          :network="props.network"
+          :port="port"
+          :is-dark-mode="props.isDarkMode"
+          :selected-port="props.selectedPort"
+          :selected-adapter="props.selectedAdapter"
+          @select-port="onSelectPort"
+          @show-modal="onShowModal"
+        />
+      </template>
+    </template>
+  </g>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ModalsInitialData,
+  UI_I_NetworkFullWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-port', networkId: string, portId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const onSelectPort = (networkId: string, portId: string) =>
+  emits('select-port', networkId, portId)
+const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
+  emits('show-modal', value, properties)
+</script>