bfg-common 1.2.111 → 1.2.113

package/components/common/details/DetailsItem.vue

@@ -1,106 +1,106 @@
-<template>
-  <div
-    :class="[
-      'stack-block',
-      { 'not-children': !props.hasChildren, open: isOpen },
-    ]"
-  >
-    <div class="stack-block__label">
-      <atoms-the-icon
-        name="angle"
-        class="stack-block__icon"
-        @click="onToggle"
-      />
-
-      <div class="stack-view-key">
-        <slot name="stackBlockKey" />
-      </div>
-      <div class="stack-block-content">
-        <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
-  }>(),
-  {
-    openByDefault: false,
-  }
-)
-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
+        name="angle"
+        class="stack-block__icon"
+        @click="onToggle"
+      />
+
+      <div class="stack-view-key">
+        <slot name="stackBlockKey" />
+      </div>
+      <div class="stack-block-content">
+        <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
+  }>(),
+  {
+    openByDefault: false,
+  }
+)
+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/details/DetailsList.vue

@@ -1,23 +1,23 @@
-<template>
-  <div class="list">
-    <div v-for="(item, key) in props.items" :key="key" class="item">
-      <slot :key="key" :item="item">
-        {{ item }}
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { UI_I_DetailsItem } from '~/components/common/details/model/interfaces'
-
-const props = defineProps<{
-  items: UI_I_DetailsItem[]
-}>()
-</script>
-
-<style lang="scss" scoped>
-.list {
-  padding: 0 12px 10px;
-}
-</style>
+<template>
+  <div class="list">
+    <div v-for="(item, key) in props.items" :key="key" class="item">
+      <slot :key="key" :item="item">
+        {{ item }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_DetailsItem } from '~/components/common/details/model/interfaces'
+
+const props = defineProps<{
+  items: UI_I_DetailsItem[]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.list {
+  padding: 0 12px 10px;
+}
+</style>

package/components/common/details/model/interfaces.ts

@@ -1,9 +1,9 @@
-import type { UI_I_Button } from '~/components/common/tools/models/interfaces'
-
-export interface UI_I_DetailsItem {
-    label: string,
-    value: string,
-    items: UI_I_DetailsItem[]
-    actions?: UI_I_Button[]
-    permission?: string[]
-}
+import type { UI_I_Button } from '~/components/common/tools/models/interfaces'
+
+export interface UI_I_DetailsItem {
+    label: string,
+    value: string,
+    items: UI_I_DetailsItem[]
+    actions?: UI_I_Button[]
+    permission?: string[]
+}

package/components/common/diagramMain/Diagram.vue

@@ -1,192 +1,192 @@
-<template>
-  <div class="diagram-container">
-    <svg
-      v-if="props.diagramData && props.isShowDiagram"
-      xmlns="http://www.w3.org/2000/svg"
-      :height="diagramHeight"
-      :width="diagramWidth"
-      :viewBox="viewBox"
-      :preserveAspectRatio="preserveAspectRatio"
-      :class="svgClasses"
-      @click.capture="onClickDiagram"
-    >
-      <common-diagram-main-switch
-        :networks-count="props.networksWithPositions.length"
-        :main-rect-height="props.mainRectHeight"
-        :main-switch-line="props.mainSwitchLine"
-        :selected-main-line="props.selectedMainLine"
-        :is-visible-line="hasActiveAdapter"
-      />
-      <common-diagram-main-adapter
-        :networks-count="props.networksWithPositions.length"
-        :adapters-with-positions="props.adaptersWithPositions"
-        :selected-main-line="props.selectedMainLine"
-        :selected-port="props.selectedPort"
-        :selected-adapter="props.selectedAdapter"
-        :selected-network="props.selectedNetwork"
-        :is-visible-line="hasActiveAdapter"
-        :is-dark-mode="props.isDarkMode"
-        @toggle-adapters="onToggleAdapters"
-        @select-adapter="onSelectAdapter"
-        @show-modal="onShowModal"
-      />
-      <template v-if="!!props.networksWithPositions.length">
-        <template
-          v-for="network in props.networksWithPositions"
-          :key="network.id"
-        >
-          <common-diagram-main-network
-            :network="network"
-            :selected-port="props.selectedPort"
-            :selected-adapter="props.selectedAdapter"
-            :selected-network="props.selectedNetwork"
-            :selected-main-line="props.selectedMainLine"
-            :diagram-id="props.diagramData.id"
-            :in-portlet="props.inPortlet"
-            :is-visible-line="hasActiveAdapter"
-            @toggle-ports="onTogglePorts"
-            @select-port="onSelectPort"
-            @select-network="onSelectNetwork"
-            @show-modal="onShowModal"
-          />
-        </template>
-      </template>
-      <common-diagram-main-network-no-network v-else />
-      <common-diagram-main-switch-selected
-        :selected-switch-line-y="props.selectedSwitchLineY"
-        :is-visible-line="hasActiveAdapter"
-      />
-    </svg>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_Adapter,
-  UI_I_AdaptersWithPositions,
-  UI_I_DiagramDataFull,
-  UI_I_ModalsInitialData,
-  UI_I_NetworksWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_SwitchLine,
-} from '~/components/common/diagramMain/models/interfaces'
-import { UI_E_PositionsY } from '~/components/common/diagramMain/models/enums'
-
-const props = defineProps<{
-  diagramData: UI_I_DiagramDataFull | null
-  isShowDiagram: boolean
-  inPortlet: boolean
-  networksWithPositions: UI_I_NetworksWithPositions[]
-  mainRectHeight: number
-  mainSwitchLine: UI_I_SwitchLine
-  selectedMainLine: boolean
-  adaptersWithPositions: UI_I_AdaptersWithPositions
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  selectedNetwork: string
-  selectedSwitchLineY: UI_I_SwitchLine
-  isDarkMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'click-diagram', ev: MouseEvent): void
-  (event: 'toggle-adapters'): void
-  (event: 'select-adapter', adapterId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-  (
-    event: 'toggle-ports',
-    id: string,
-    newState: boolean,
-    diagramId: string
-  ): void
-  (event: 'select-port', networkId: string, portId: string): void
-  (event: 'select-network', networkId: string): void
-}>()
-
-const svgClasses = computed(() => ({
-  'diagram-margin-top': !props.inPortlet,
-}))
-
-const preserveAspectRatio = computed<string | undefined>(() =>
-  props.inPortlet ? 'xMinYMin' : undefined
-)
-
-const svgHeight = computed<number>(
-  () =>
-    UI_E_PositionsY.DIAGRAM_TOP +
-    props.mainRectHeight +
-    UI_E_PositionsY.DIAGRAM_BOTTOM
-)
-
-const viewBox = computed<string>(() =>
-  props.inPortlet ? '0 0 750 1' : `0 0 740 ${svgHeight.value}`
-)
-
-const diagramHeight = computed<number>(() =>
-  props.inPortlet ? svgHeight.value / 1.35 : svgHeight.value
-)
-
-const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 740))
-
-const hasActiveAdapter = computed<boolean>(() => {
-  return !!props.diagramData?.physicalAdapters?.adapters.filter(
-    (adapter: UI_I_Adapter) => {
-      return adapter.status === 'active'
-    }
-  ).length
-})
-
-const onClickDiagram = (ev: MouseEvent) => emits('click-diagram', ev)
-const onToggleAdapters = () => emits('toggle-adapters')
-const onSelectAdapter = (adapterId: string) =>
-  emits('select-adapter', adapterId)
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
-  emits('show-modal', value, properties)
-const onTogglePorts = (
-  id: string,
-  isToggle: boolean,
-  diagramId: string
-): void => {
-  emits('toggle-ports', id, isToggle, diagramId)
-}
-const onSelectPort = (networkId: string, portId: string): void => {
-  emits('select-port', networkId, portId)
-}
-const onSelectNetwork = (networkId: string): void => {
-  emits('select-network', networkId)
-}
-</script>
-
-<style scoped lang="scss">
-.diagram {
-  &-container {
-    display: flex;
-    justify-content: center;
-  }
-  &-margin-top {
-    margin-top: 10px;
-  }
-}
-</style>
-<style lang="scss">
-.diagram-actions__popup.navbar-dropdown-menu {
-  transform: translate(-30px, -20px);
-
-  .btn {
-    border-radius: 0;
-    border-bottom: 1px solid transparent;
-
-    span {
-      font-size: 14px;
-    }
-    &:active {
-      box-shadow: none;
-    }
-  }
-}
-</style>
+<template>
+  <div class="diagram-container">
+    <svg
+      v-if="props.diagramData && props.isShowDiagram"
+      xmlns="http://www.w3.org/2000/svg"
+      :height="diagramHeight"
+      :width="diagramWidth"
+      :viewBox="viewBox"
+      :preserveAspectRatio="preserveAspectRatio"
+      :class="svgClasses"
+      @click.capture="onClickDiagram"
+    >
+      <common-diagram-main-switch
+        :networks-count="props.networksWithPositions.length"
+        :main-rect-height="props.mainRectHeight"
+        :main-switch-line="props.mainSwitchLine"
+        :selected-main-line="props.selectedMainLine"
+        :is-visible-line="hasActiveAdapter"
+      />
+      <common-diagram-main-adapter
+        :networks-count="props.networksWithPositions.length"
+        :adapters-with-positions="props.adaptersWithPositions"
+        :selected-main-line="props.selectedMainLine"
+        :selected-port="props.selectedPort"
+        :selected-adapter="props.selectedAdapter"
+        :selected-network="props.selectedNetwork"
+        :is-visible-line="hasActiveAdapter"
+        :is-dark-mode="props.isDarkMode"
+        @toggle-adapters="onToggleAdapters"
+        @select-adapter="onSelectAdapter"
+        @show-modal="onShowModal"
+      />
+      <template v-if="!!props.networksWithPositions.length">
+        <template
+          v-for="network in props.networksWithPositions"
+          :key="network.id"
+        >
+          <common-diagram-main-network
+            :network="network"
+            :selected-port="props.selectedPort"
+            :selected-adapter="props.selectedAdapter"
+            :selected-network="props.selectedNetwork"
+            :selected-main-line="props.selectedMainLine"
+            :diagram-id="props.diagramData.id"
+            :in-portlet="props.inPortlet"
+            :is-visible-line="hasActiveAdapter"
+            @toggle-ports="onTogglePorts"
+            @select-port="onSelectPort"
+            @select-network="onSelectNetwork"
+            @show-modal="onShowModal"
+          />
+        </template>
+      </template>
+      <common-diagram-main-network-no-network v-else />
+      <common-diagram-main-switch-selected
+        :selected-switch-line-y="props.selectedSwitchLineY"
+        :is-visible-line="hasActiveAdapter"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_Adapter,
+  UI_I_AdaptersWithPositions,
+  UI_I_DiagramDataFull,
+  UI_I_ModalsInitialData,
+  UI_I_NetworksWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_SwitchLine,
+} from '~/components/common/diagramMain/models/interfaces'
+import { UI_E_PositionsY } from '~/components/common/diagramMain/models/enums'
+
+const props = defineProps<{
+  diagramData: UI_I_DiagramDataFull | null
+  isShowDiagram: boolean
+  inPortlet: boolean
+  networksWithPositions: UI_I_NetworksWithPositions[]
+  mainRectHeight: number
+  mainSwitchLine: UI_I_SwitchLine
+  selectedMainLine: boolean
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  selectedNetwork: string
+  selectedSwitchLineY: UI_I_SwitchLine
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'click-diagram', ev: MouseEvent): void
+  (event: 'toggle-adapters'): void
+  (event: 'select-adapter', adapterId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+  (
+    event: 'toggle-ports',
+    id: string,
+    newState: boolean,
+    diagramId: string
+  ): void
+  (event: 'select-port', networkId: string, portId: string): void
+  (event: 'select-network', networkId: string): void
+}>()
+
+const svgClasses = computed(() => ({
+  'diagram-margin-top': !props.inPortlet,
+}))
+
+const preserveAspectRatio = computed<string | undefined>(() =>
+  props.inPortlet ? 'xMinYMin' : undefined
+)
+
+const svgHeight = computed<number>(
+  () =>
+    UI_E_PositionsY.DIAGRAM_TOP +
+    props.mainRectHeight +
+    UI_E_PositionsY.DIAGRAM_BOTTOM
+)
+
+const viewBox = computed<string>(() =>
+  props.inPortlet ? '0 0 750 1' : `0 0 740 ${svgHeight.value}`
+)
+
+const diagramHeight = computed<number>(() =>
+  props.inPortlet ? svgHeight.value / 1.35 : svgHeight.value
+)
+
+const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 740))
+
+const hasActiveAdapter = computed<boolean>(() => {
+  return !!props.diagramData?.physicalAdapters?.adapters.filter(
+    (adapter: UI_I_Adapter) => {
+      return adapter.status === 'active'
+    }
+  ).length
+})
+
+const onClickDiagram = (ev: MouseEvent) => emits('click-diagram', ev)
+const onToggleAdapters = () => emits('toggle-adapters')
+const onSelectAdapter = (adapterId: string) =>
+  emits('select-adapter', adapterId)
+const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
+  emits('show-modal', value, properties)
+const onTogglePorts = (
+  id: string,
+  isToggle: boolean,
+  diagramId: string
+): void => {
+  emits('toggle-ports', id, isToggle, diagramId)
+}
+const onSelectPort = (networkId: string, portId: string): void => {
+  emits('select-port', networkId, portId)
+}
+const onSelectNetwork = (networkId: string): void => {
+  emits('select-network', networkId)
+}
+</script>
+
+<style scoped lang="scss">
+.diagram {
+  &-container {
+    display: flex;
+    justify-content: center;
+  }
+  &-margin-top {
+    margin-top: 10px;
+  }
+}
+</style>
+<style lang="scss">
+.diagram-actions__popup.navbar-dropdown-menu {
+  transform: translate(-30px, -20px);
+
+  .btn {
+    border-radius: 0;
+    border-bottom: 1px solid transparent;
+
+    span {
+      font-size: 14px;
+    }
+    &:active {
+      box-shadow: none;
+    }
+  }
+}
+</style>