bfg-common 1.4.580 → 1.4.581

package/components/common/diagramMain/adapter/Contents.vue

@@ -1,207 +1,207 @@
-<template>
-  <g data-title="adapter-block-contents">
-    <foreignObject
-      v-if="isShowArrow"
-      :data-id="`${props.testId}-adapters-toggle`"
-      data-title="adapter-toggle"
-      :width="positions.arrowIconSize"
-      :height="positions.arrowIconSize"
-      :x="positions.arrowIconX"
-      :y="arrawIconPosition"
-      :cursor="hasAdapters && 'pointer'"
-      @click="onToggleAdapters"
-    >
-      <div class="diagram-block__toggle">
-        <ui-icon
-          v-if="isNewView"
-          name="arrow"
-          width="20"
-          height="20"
-          :class="[
-            'virtual-switch__arrow-icon',
-            {
-              'is-new': isNewView,
-              open: hasAdapters ? props.adaptersWithPositions.toggle : false,
-              'without-adapters': !hasAdapters,
-            },
-          ]"
-        />
-        <atoms-the-icon
-          v-else
-          name="angle"
-          :class="[
-            'virtual-switch__arrow-icon',
-            {
-              open: props.adaptersWithPositions.toggle,
-            },
-          ]"
-        />
-        {{ hasAdapters }}
-      </div>
-    </foreignObject>
-    <text
-      data-title="adapter-main-text"
-      dy="14px"
-      font-size="14"
-      font-weight="500"
-      :x="positions.adapterTextX"
-      :y="props.adaptersWithPositions.titlePosition"
-      :class="['diagram__heading', { 'is-new': isNewView }]"
-    >
-      {{ headerText }}
-    </text>
-
-    <foreignObject
-      v-if="!isNewView && !hasAdapters"
-      data-title="no-adapter-text"
-      dy="11px"
-      height="20"
-      width="230"
-      x="462"
-      y="53"
-    >
-      <span
-        data-title="no-physical-adapters"
-        class="no-physical-adapters text-ellipsis"
-      >
-        {{ localization.common.noPhysicalNetworkAdapters }}
-      </span>
-    </foreignObject>
-  </g>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_AdaptersWithPositions } from '~/components/common/diagramMain/lib/models/interfaces'
-import type {
-  UI_I_Localization,
-  UI_I_ArbitraryObject,
-} from '~/lib/models/interfaces'
-import { adapterContentPositionsFunc } from '~/components/common/diagramMain/lib/config'
-
-const props = defineProps<{
-  adaptersWithPositions: UI_I_AdaptersWithPositions
-  testId?: string
-}>()
-const emits = defineEmits<{
-  (event: 'toggle-adapters', networkId: string, portId: string): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const positions = computed<UI_I_ArbitraryObject<number>>(() =>
-  adapterContentPositionsFunc(isNewView.value)
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const hasAdapters = computed<boolean>(
-  () => props.adaptersWithPositions.adaptersCount > 0
-)
-
-const isShowArrow = computed<boolean>(() =>
-  isNewView.value ? true : hasAdapters.value
-)
-
-const headerText = computed<string>(() =>
-  isNewView.value
-    ? `${localization.value.common.physicalAdapters} (${
-        props.adaptersWithPositions.adaptersCount || 0
-      })`
-    : localization.value.common.physicalAdapters
-)
-
-const arrawIconPosition = computed<number>(
-  () => props.adaptersWithPositions.titlePosition - 0.5
-)
-
-const onToggleAdapters = (networkId: string, portId: string): void => {
-  emits('toggle-adapters', networkId, portId)
-}
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-
-:root.dark-theme {
-  .diagram__heading {
-    fill: #c1cdd4;
-    &.is-new {
-      fill: var(--diagram-content-text);
-    }
-  }
-  .no-physical-adapters {
-    fill: #c1cdd4;
-  }
-  .text-ellipsis {
-    color: #c1cdd4;
-  }
-}
-
-.text-ellipsis {
-  display: block;
-  max-width: 230px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-weight: 400;
-  font-size: 12px;
-  color: #565656;
-}
-
-.virtual-switch__arrow-icon {
-  width: 16px;
-  height: 16px;
-  margin-right: 4px;
-  transform: rotate(90deg);
-  align-self: center;
-  fill: var(--triger-icon-color);
-
-  &.is-new {
-    width: 20px;
-    height: 20px;
-    fill: none;
-    color: var(--diagram-content-second-text);
-  }
-
-  &.open:not(.without-adapters) {
-    transform: rotate(180deg);
-  }
-
-  &.without-adapters {
-    color: var(--diagram-content-second-disabled-text);
-    fill: none;
-    pointer-events: none;
-  }
-}
-.diagram__heading {
-  @include text($fs: 14px, $fw: 500);
-  fill: #565656;
-  letter-spacing: normal;
-  line-height: 1.2rem;
-
-  &.is-new {
-    line-height: 16.94px;
-    fill: var(--diagram-content-text);
-  }
-}
-.no-physical-adapters {
-  fill: #565656;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: normal;
-}
-
-:root.is-new-view {
-  .text-ellipsis {
-    color: var(--diagram-content-text);
-  }
-}
-
-:root.is-new-view.dark-theme {
-  .text-ellipsis {
-    color: var(--diagram-content-text);
-  }
-}
-</style>
+<template>
+  <g data-title="adapter-block-contents">
+    <foreignObject
+      v-if="isShowArrow"
+      :data-id="`${props.testId}-adapters-toggle`"
+      data-title="adapter-toggle"
+      :width="positions.arrowIconSize"
+      :height="positions.arrowIconSize"
+      :x="positions.arrowIconX"
+      :y="arrawIconPosition"
+      :cursor="hasAdapters && 'pointer'"
+      @click="onToggleAdapters"
+    >
+      <div class="diagram-block__toggle">
+        <ui-icon
+          v-if="isNewView"
+          name="arrow"
+          width="20"
+          height="20"
+          :class="[
+            'virtual-switch__arrow-icon',
+            {
+              'is-new': isNewView,
+              open: hasAdapters ? props.adaptersWithPositions.toggle : false,
+              'without-adapters': !hasAdapters,
+            },
+          ]"
+        />
+        <atoms-the-icon
+          v-else
+          name="angle"
+          :class="[
+            'virtual-switch__arrow-icon',
+            {
+              open: props.adaptersWithPositions.toggle,
+            },
+          ]"
+        />
+        {{ hasAdapters }}
+      </div>
+    </foreignObject>
+    <text
+      data-title="adapter-main-text"
+      dy="14px"
+      font-size="14"
+      font-weight="500"
+      :x="positions.adapterTextX"
+      :y="props.adaptersWithPositions.titlePosition"
+      :class="['diagram__heading', { 'is-new': isNewView }]"
+    >
+      {{ headerText }}
+    </text>
+
+    <foreignObject
+      v-if="!isNewView && !hasAdapters"
+      data-title="no-adapter-text"
+      dy="11px"
+      height="20"
+      width="230"
+      x="462"
+      y="53"
+    >
+      <span
+        data-title="no-physical-adapters"
+        class="no-physical-adapters text-ellipsis"
+      >
+        {{ localization.common.noPhysicalNetworkAdapters }}
+      </span>
+    </foreignObject>
+  </g>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_AdaptersWithPositions } from '~/components/common/diagramMain/lib/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+} from '~/lib/models/interfaces'
+import { adapterContentPositionsFunc } from '~/components/common/diagramMain/lib/config'
+
+const props = defineProps<{
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+  testId?: string
+}>()
+const emits = defineEmits<{
+  (event: 'toggle-adapters', networkId: string, portId: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const positions = computed<UI_I_ArbitraryObject<number>>(() =>
+  adapterContentPositionsFunc(isNewView.value)
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const hasAdapters = computed<boolean>(
+  () => props.adaptersWithPositions.adaptersCount > 0
+)
+
+const isShowArrow = computed<boolean>(() =>
+  isNewView.value ? true : hasAdapters.value
+)
+
+const headerText = computed<string>(() =>
+  isNewView.value
+    ? `${localization.value.common.physicalAdapters} (${
+        props.adaptersWithPositions.adaptersCount || 0
+      })`
+    : localization.value.common.physicalAdapters
+)
+
+const arrawIconPosition = computed<number>(
+  () => props.adaptersWithPositions.titlePosition - 0.5
+)
+
+const onToggleAdapters = (networkId: string, portId: string): void => {
+  emits('toggle-adapters', networkId, portId)
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+
+:root.dark-theme {
+  .diagram__heading {
+    fill: #c1cdd4;
+    &.is-new {
+      fill: var(--diagram-content-text);
+    }
+  }
+  .no-physical-adapters {
+    fill: #c1cdd4;
+  }
+  .text-ellipsis {
+    color: #c1cdd4;
+  }
+}
+
+.text-ellipsis {
+  display: block;
+  max-width: 230px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 12px;
+  color: #565656;
+}
+
+.virtual-switch__arrow-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  transform: rotate(90deg);
+  align-self: center;
+  fill: var(--triger-icon-color);
+
+  &.is-new {
+    width: 20px;
+    height: 20px;
+    fill: none;
+    color: var(--diagram-content-second-text);
+  }
+
+  &.open:not(.without-adapters) {
+    transform: rotate(180deg);
+  }
+
+  &.without-adapters {
+    color: var(--diagram-content-second-disabled-text);
+    fill: none;
+    pointer-events: none;
+  }
+}
+.diagram__heading {
+  @include text($fs: 14px, $fw: 500);
+  fill: #565656;
+  letter-spacing: normal;
+  line-height: 1.2rem;
+
+  &.is-new {
+    line-height: 16.94px;
+    fill: var(--diagram-content-text);
+  }
+}
+.no-physical-adapters {
+  fill: #565656;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: normal;
+}
+
+:root.is-new-view {
+  .text-ellipsis {
+    color: var(--diagram-content-text);
+  }
+}
+
+:root.is-new-view.dark-theme {
+  .text-ellipsis {
+    color: var(--diagram-content-text);
+  }
+}
+</style>