bfg-common 1.6.63 → 1.6.65

package/components/common/diagramMain/adapter/secondBlock/SecondBlockOld.vue

@@ -1,51 +1,51 @@
-<template>
-  <g data-title="adapter-second-block-group">
-    <path
-      data-title="adapter-second-block"
-      :d="`M 411.5 ${props.adaptersWithPositions.rectPosition} H 391.5 V ${rectBottomPosition} H 411.5 `"
-      shape-rendering="geometricprecision"
-      class="panel"
-    />
-
-    <common-diagram-main-highlights
-      data-title="adapter-second"
-      type="second-orange"
-      :d="`M 411.5 ${props.adaptersWithPositions.rectPosition} H 391.5 V ${rectBottomPosition} H 411.5 `"
-      :hide="!props.isHighlightedClosedAdapterBlock"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_AdaptersWithPositions } from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  adaptersWithPositions: UI_I_AdaptersWithPositions
-  isHighlightedClosedAdapterBlock: boolean
-}>()
-
-const rectBottomPosition = computed<number>(
-  () =>
-    props.adaptersWithPositions.rectPosition +
-    props.adaptersWithPositions.height
-)
-</script>
-
-<style scoped lang="scss">
-:root.dark-theme {
-  .panel {
-    fill: #1b2a32;
-    stroke: #adbbc4;
-  }
-}
-
-.panel {
-  fill: #fff;
-  stroke: #888;
-  margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-radius: 0;
-  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
-}
-</style>
+<template>
+  <g data-title="adapter-second-block-group">
+    <path
+      data-title="adapter-second-block"
+      :d="`M 411.5 ${props.adaptersWithPositions.rectPosition} H 391.5 V ${rectBottomPosition} H 411.5 `"
+      shape-rendering="geometricprecision"
+      class="panel"
+    />
+
+    <common-diagram-main-highlights
+      data-title="adapter-second"
+      type="second-orange"
+      :d="`M 411.5 ${props.adaptersWithPositions.rectPosition} H 391.5 V ${rectBottomPosition} H 411.5 `"
+      :hide="!props.isHighlightedClosedAdapterBlock"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_AdaptersWithPositions } from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+  isHighlightedClosedAdapterBlock: boolean
+}>()
+
+const rectBottomPosition = computed<number>(
+  () =>
+    props.adaptersWithPositions.rectPosition +
+    props.adaptersWithPositions.height
+)
+</script>
+
+<style scoped lang="scss">
+:root.dark-theme {
+  .panel {
+    fill: #1b2a32;
+    stroke: #adbbc4;
+  }
+}
+
+.panel {
+  fill: #fff;
+  stroke: #888;
+  margin-bottom: 20px;
+  background-color: #fff;
+  border: 1px solid transparent;
+  border-radius: 0;
+  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
+}
+</style>

package/components/common/diagramMain/header/Header.vue

@@ -1,49 +1,49 @@
-<template>
-  <component
-    :is="currentComponent"
-    :project="props.project"
-    :is-show-diagram="props.isShowDiagram"
-    :diagram-name="props.diagramName"
-    :test-id="props.testId"
-    @toggle-diagram="emits('toggle-diagram')"
-    @show-modal="onShowModal"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    isShowDiagram: boolean
-    diagramName: string
-    testId: string
-    project?: UI_T_Project
-  }>(),
-  {
-    project: undefined,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'toggle-diagram'): void
-  (event: 'show-modal', modalName: string, data?: { switch_name: string }): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./HeaderNew.vue'))
-    : defineAsyncComponent(() => import('./HeaderOld.vue'))
-)
-
-const onShowModal = (modalName: string, data?: { switch_name: string }) => {
-  emits('show-modal', modalName, data)
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <component
+    :is="currentComponent"
+    :project="props.project"
+    :is-show-diagram="props.isShowDiagram"
+    :diagram-name="props.diagramName"
+    :test-id="props.testId"
+    @toggle-diagram="emits('toggle-diagram')"
+    @show-modal="onShowModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    isShowDiagram: boolean
+    diagramName: string
+    testId: string
+    project?: UI_T_Project
+  }>(),
+  {
+    project: undefined,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'toggle-diagram'): void
+  (event: 'show-modal', modalName: string, data?: { switch_name: string }): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./HeaderNew.vue'))
+    : defineAsyncComponent(() => import('./HeaderOld.vue'))
+)
+
+const onShowModal = (modalName: string, data?: { switch_name: string }) => {
+  emits('show-modal', modalName, data)
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/diagramMain/header/HeaderNew.vue

@@ -1,155 +1,155 @@
-<template>
-  <div class="diagram-header">
-    <div class="diagram-header-left">
-      <span
-        class="diagram-header-left-icon"
-        :data-id="`${props.testId}-toggle-icon`"
-      >
-        <ui-icon
-          name="arrow"
-          width="20"
-          height="20"
-          :class="[
-            'diagram-header-left-icon-arrow',
-            {
-              open: props.isShowDiagram,
-            },
-          ]"
-          @click="emits('toggle-diagram')"
-        />
-      </span>
-
-      <span class="diagram-header-left-title" @click="emits('toggle-diagram')">
-        {{ localization.common.standardSwitch }}:
-        {{ props.diagramName }}
-      </span>
-    </div>
-    <div v-if="props.isShowDiagram" class="diagram-header-right">
-      <ui-button-group
-        :buttons="buttons"
-        :left-line="true"
-        :group-id="props.diagramName"
-        class="switch-actions"
-        @action="onSelectAction"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Button } from '~/node_modules/bfg-common/components/common/tools/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import { switchMainNavigationNewFunc } from '~/components/common/diagramMain/modals/lib/config'
-
-const props = withDefaults(
-  defineProps<{
-    isShowDiagram: boolean
-    diagramName: string
-    testId: string
-    project?: UI_T_Project
-  }>(),
-  {
-    project: undefined,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'toggle-diagram'): void
-  (
-    event: 'show-modal',
-    modalName: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const buttons = computed<UI_I_Button[]>(() =>
-  switchMainNavigationNewFunc(localization.value, props.testId)
-)
-
-const onShowModal = (modalName: string, diagramName?: string) => {
-  diagramName
-    ? emits(
-        'show-modal',
-        modalName,
-        diagramName && { switch_name: diagramName }
-      )
-    : emits('show-modal', modalName)
-}
-
-const onSelectAction = (event: string): void => {
-  onShowModal(event, event === 'add-networking' && props.diagramName)
-}
-</script>
-
-<style scoped lang="scss">
-.diagram-header {
-  display: flex;
-  height: 20px;
-
-  &-left {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    column-gap: 12px;
-    height: 20px;
-    min-width: max-content;
-
-    &-icon {
-      width: 20px;
-      height: 20px;
-      color: var(--select-arrow);
-
-      &-arrow {
-        transform: rotate(90deg);
-        cursor: pointer;
-
-        &.open {
-          transform: rotate(180deg);
-        }
-      }
-    }
-
-    &-title {
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 19px;
-      letter-spacing: 0;
-      color: var(--title-form-first-color);
-      cursor: pointer;
-
-      &:hover {
-        color: var(--dropdown-item-hover-color);
-      }
-    }
-  }
-
-  &-right {
-    height: 20px;
-    width: 100%;
-
-    :deep(.ui-button-group) {
-      .ui-button-group-line {
-        height: 20px;
-        top: 0;
-      }
-
-      .ui-button-group-items {
-        height: 20px !important;
-
-        .button-from-group {
-          height: 20px !important;
-        }
-      }
-      .ui-button-group-dots {
-        margin-top: 0;
-        padding-top: 0;
-        height: 20px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="diagram-header">
+    <div class="diagram-header-left">
+      <span
+        class="diagram-header-left-icon"
+        :data-id="`${props.testId}-toggle-icon`"
+      >
+        <ui-icon
+          name="arrow"
+          width="20"
+          height="20"
+          :class="[
+            'diagram-header-left-icon-arrow',
+            {
+              open: props.isShowDiagram,
+            },
+          ]"
+          @click="emits('toggle-diagram')"
+        />
+      </span>
+
+      <span class="diagram-header-left-title" @click="emits('toggle-diagram')">
+        {{ localization.common.standardSwitch }}:
+        {{ props.diagramName }}
+      </span>
+    </div>
+    <div v-if="props.isShowDiagram" class="diagram-header-right">
+      <ui-button-group
+        :buttons="buttons"
+        :left-line="true"
+        :group-id="props.diagramName"
+        class="switch-actions"
+        @action="onSelectAction"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Button } from '~/node_modules/bfg-common/components/common/tools/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import { switchMainNavigationNewFunc } from '~/components/common/diagramMain/modals/lib/config'
+
+const props = withDefaults(
+  defineProps<{
+    isShowDiagram: boolean
+    diagramName: string
+    testId: string
+    project?: UI_T_Project
+  }>(),
+  {
+    project: undefined,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'toggle-diagram'): void
+  (
+    event: 'show-modal',
+    modalName: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const buttons = computed<UI_I_Button[]>(() =>
+  switchMainNavigationNewFunc(localization.value, props.testId)
+)
+
+const onShowModal = (modalName: string, diagramName?: string) => {
+  diagramName
+    ? emits(
+        'show-modal',
+        modalName,
+        diagramName && { switch_name: diagramName }
+      )
+    : emits('show-modal', modalName)
+}
+
+const onSelectAction = (event: string): void => {
+  onShowModal(event, event === 'add-networking' && props.diagramName)
+}
+</script>
+
+<style scoped lang="scss">
+.diagram-header {
+  display: flex;
+  height: 20px;
+
+  &-left {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    column-gap: 12px;
+    height: 20px;
+    min-width: max-content;
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      color: var(--select-arrow);
+
+      &-arrow {
+        transform: rotate(90deg);
+        cursor: pointer;
+
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    &-title {
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 19px;
+      letter-spacing: 0;
+      color: var(--title-form-first-color);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--dropdown-item-hover-color);
+      }
+    }
+  }
+
+  &-right {
+    height: 20px;
+    width: 100%;
+
+    :deep(.ui-button-group) {
+      .ui-button-group-line {
+        height: 20px;
+        top: 0;
+      }
+
+      .ui-button-group-items {
+        height: 20px !important;
+
+        .button-from-group {
+          height: 20px !important;
+        }
+      }
+      .ui-button-group-dots {
+        margin-top: 0;
+        padding-top: 0;
+        height: 20px;
+      }
+    }
+  }
+}
+</style>