bfg-common 1.4.580 → 1.4.581

package/components/common/diagramMain/modals/viewSettings/info/InfoNew.vue

@@ -1,156 +1,156 @@
-<template>
-  <div v-if="props.show" class="info-container">
-    <div class="tabs-container">
-      <ui-tabs
-        v-if="modalTabsLocal && modalTabsLocal.length > 0"
-        v-model="selectedTabViewSettings"
-        test-id="main-tabs"
-        :tabs="modalTabsLocal"
-        type="underline"
-      />
-    </div>
-    <template v-if="modalTabsLocal && modalTabsLocal.length > 0">
-      <template v-for="tab in modalTabsLocal" :key="tab.value">
-        <template v-if="selectedTabViewSettings === tab.value">
-          <div
-            :class="[
-              'table-fixed-height',
-              { 'table-fixed-full-height': props.fullMode },
-            ]"
-          >
-            <template
-              v-for="viewSettingsField in viewSettingsTabContent(tab.value)"
-              :key="viewSettingsField.id"
-            >
-              <div class="info-block-container">
-                <div class="info-block-container-inner">
-                  <common-diagram-main-modals-view-settings-view-settings
-                    :view-name="props.viewName"
-                    :view-settings-field="viewSettingsField"
-                  />
-                </div>
-              </div>
-            </template>
-          </div>
-        </template>
-      </template>
-    </template>
-    <template v-else>
-      <div class="table-fixed-height" :style="{ 'min-height': props.height }">
-        <template
-          v-for="viewSettingsField in props.viewSettingsFields"
-          :key="viewSettingsField.id"
-        >
-          <div class="info-block-container">
-            <div class="info-block-container-inner">
-              <common-diagram-main-modals-view-settings-view-settings
-                :view-name="props.viewName"
-                :view-settings-field="viewSettingsField"
-              />
-            </div>
-          </div>
-        </template>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_ViewSettingsFields,
-  UI_I_ModalTab,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    modalTabs?: UI_I_ModalTab[]
-    viewSettingsFields: UI_I_ViewSettingsFields[]
-    viewName?: string
-    fullMode?: boolean
-    height?: string
-    selectedTab?: number
-  }>(),
-  {
-    modalTabs: undefined,
-    height: undefined,
-    viewName: '',
-    selectedTab: 0,
-  }
-)
-
-const modalTabsLocal = computed(() =>
-  props.modalTabs.map((tab) => ({ ...tab, name: tab.text }))
-)
-// Selected tab id on the view settings modal
-const selectedTabViewSettings = ref<number>(props.selectedTab)
-
-// Filtering the selected tab content
-const viewSettingsTabContent = (tab: number): UI_I_ViewSettingsFields[] =>
-  tab === 0
-    ? props.viewSettingsFields
-    : props.viewSettingsFields.filter(
-        (field: UI_I_ViewSettingsFields): boolean => field.type === tab
-      )
-</script>
-
-<style scoped lang="scss">
-.info-container {
-  padding: 8px 0px 0 32px;
-  background-color: #fafafa;
-
-  .tabs-container {
-    padding-right: 32px;
-  }
-}
-
-.table-fixed-height {
-  min-height: min(calc(100vh - 270px), 400px);
-  max-height: min(calc(100vh - 270px), 400px);
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-right: 32px;
-  padding-top: 16px;
-
-  &.table-fixed-full-height {
-    max-height: 312px;
-  }
-
-  .info-block-container {
-    padding-bottom: 24px;
-
-    &-inner {
-      padding-bottom: 32px;
-      border-bottom: 1px solid #e9ebeda3;
-    }
-  }
-  & > div:last-of-type {
-    padding-bottom: 16px;
-
-    .info-block-container-inner {
-      padding-bottom: 0;
-      border-bottom: none;
-    }
-  }
-}
-
-:root.dark-theme {
-  .info-container {
-    background-color: #213444;
-  }
-  .info-block-container .info-block-container-inner {
-    border-bottom: 1px solid #e9ebed1f;
-  }
-
-  .table-fixed-height {
-    & > div:last-of-type {
-      .info-block-container-inner {
-        padding-bottom: 0;
-        border-bottom: none;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div v-if="props.show" class="info-container">
+    <div class="tabs-container">
+      <ui-tabs
+        v-if="modalTabsLocal && modalTabsLocal.length > 0"
+        v-model="selectedTabViewSettings"
+        test-id="main-tabs"
+        :tabs="modalTabsLocal"
+        type="underline"
+      />
+    </div>
+    <template v-if="modalTabsLocal && modalTabsLocal.length > 0">
+      <template v-for="tab in modalTabsLocal" :key="tab.value">
+        <template v-if="selectedTabViewSettings === tab.value">
+          <div
+            :class="[
+              'table-fixed-height',
+              { 'table-fixed-full-height': props.fullMode },
+            ]"
+          >
+            <template
+              v-for="viewSettingsField in viewSettingsTabContent(tab.value)"
+              :key="viewSettingsField.id"
+            >
+              <div class="info-block-container">
+                <div class="info-block-container-inner">
+                  <common-diagram-main-modals-view-settings-view-settings
+                    :view-name="props.viewName"
+                    :view-settings-field="viewSettingsField"
+                  />
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </template>
+    </template>
+    <template v-else>
+      <div class="table-fixed-height" :style="{ 'min-height': props.height }">
+        <template
+          v-for="viewSettingsField in props.viewSettingsFields"
+          :key="viewSettingsField.id"
+        >
+          <div class="info-block-container">
+            <div class="info-block-container-inner">
+              <common-diagram-main-modals-view-settings-view-settings
+                :view-name="props.viewName"
+                :view-settings-field="viewSettingsField"
+              />
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_ViewSettingsFields,
+  UI_I_ModalTab,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+// Props from up
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    modalTabs?: UI_I_ModalTab[]
+    viewSettingsFields: UI_I_ViewSettingsFields[]
+    viewName?: string
+    fullMode?: boolean
+    height?: string
+    selectedTab?: number
+  }>(),
+  {
+    modalTabs: undefined,
+    height: undefined,
+    viewName: '',
+    selectedTab: 0,
+  }
+)
+
+const modalTabsLocal = computed(() =>
+  props.modalTabs.map((tab) => ({ ...tab, name: tab.text }))
+)
+// Selected tab id on the view settings modal
+const selectedTabViewSettings = ref<number>(props.selectedTab)
+
+// Filtering the selected tab content
+const viewSettingsTabContent = (tab: number): UI_I_ViewSettingsFields[] =>
+  tab === 0
+    ? props.viewSettingsFields
+    : props.viewSettingsFields.filter(
+        (field: UI_I_ViewSettingsFields): boolean => field.type === tab
+      )
+</script>
+
+<style scoped lang="scss">
+.info-container {
+  padding: 8px 0px 0 32px;
+  background-color: #fafafa;
+
+  .tabs-container {
+    padding-right: 32px;
+  }
+}
+
+.table-fixed-height {
+  min-height: min(calc(100vh - 270px), 400px);
+  max-height: min(calc(100vh - 270px), 400px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 32px;
+  padding-top: 16px;
+
+  &.table-fixed-full-height {
+    max-height: 312px;
+  }
+
+  .info-block-container {
+    padding-bottom: 24px;
+
+    &-inner {
+      padding-bottom: 32px;
+      border-bottom: 1px solid #e9ebeda3;
+    }
+  }
+  & > div:last-of-type {
+    padding-bottom: 16px;
+
+    .info-block-container-inner {
+      padding-bottom: 0;
+      border-bottom: none;
+    }
+  }
+}
+
+:root.dark-theme {
+  .info-container {
+    background-color: #213444;
+  }
+  .info-block-container .info-block-container-inner {
+    border-bottom: 1px solid #e9ebed1f;
+  }
+
+  .table-fixed-height {
+    & > div:last-of-type {
+      .info-block-container-inner {
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>

package/components/common/diagramMain/modals/viewSettings/viewSettingsModal/ViewSettingsModalNew.vue

@@ -1,68 +1,68 @@
-<template>
-  <div class="view-settings-modal__container">
-    <ui-modal
-      v-if="props.show"
-      :width="props.width"
-      :title="props.title"
-      :subtitle="props.secondTitle"
-      @hide="emits('hide')"
-    >
-      <template #content>
-        <common-diagram-main-modals-view-settings-info
-          :show="true"
-          :height="props.infoHeight"
-          :view-name="props.viewName"
-          :modal-tabs="props.modalTabs"
-          :full-mode="false"
-          :view-settings-fields="props.viewSettingsFields"
-        />
-      </template>
-      <template #footer>
-        <div style="height: 32px"></div>
-      </template>
-    </ui-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_ViewSettingsFields,
-  UI_I_ModalTab,
-  UI_I_ModalsInitialData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-interface UI_I_PortViewSettingsModalProps {
-  show: boolean
-  modalTabs?: UI_I_ModalTab[]
-  viewSettingsFields: UI_I_ViewSettingsFields[]
-  viewName: string
-  title?: string
-  width?: string
-  height?: string
-  infoHeight?: string
-  initialData?: UI_I_ModalsInitialData
-  secondTitle?: string
-}
-
-const props = withDefaults(defineProps<UI_I_PortViewSettingsModalProps>(), {
-  initialData: () => ({}),
-  title: '',
-  width: '560px',
-  height: '553px',
-  modalTabs: () => [],
-  infoHeight: '390px',
-  secondTitle: '',
-})
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-</script>
-
-<style scoped lang="scss">
-:deep(.modal-body) {
-  max-height: unset;
-  overflow-y: unset;
-}
-</style>
+<template>
+  <div class="view-settings-modal__container">
+    <ui-modal
+      v-if="props.show"
+      :width="props.width"
+      :title="props.title"
+      :subtitle="props.secondTitle"
+      @hide="emits('hide')"
+    >
+      <template #content>
+        <common-diagram-main-modals-view-settings-info
+          :show="true"
+          :height="props.infoHeight"
+          :view-name="props.viewName"
+          :modal-tabs="props.modalTabs"
+          :full-mode="false"
+          :view-settings-fields="props.viewSettingsFields"
+        />
+      </template>
+      <template #footer>
+        <div style="height: 32px"></div>
+      </template>
+    </ui-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_ViewSettingsFields,
+  UI_I_ModalTab,
+  UI_I_ModalsInitialData,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+// Props from up
+interface UI_I_PortViewSettingsModalProps {
+  show: boolean
+  modalTabs?: UI_I_ModalTab[]
+  viewSettingsFields: UI_I_ViewSettingsFields[]
+  viewName: string
+  title?: string
+  width?: string
+  height?: string
+  infoHeight?: string
+  initialData?: UI_I_ModalsInitialData
+  secondTitle?: string
+}
+
+const props = withDefaults(defineProps<UI_I_PortViewSettingsModalProps>(), {
+  initialData: () => ({}),
+  title: '',
+  width: '560px',
+  height: '553px',
+  modalTabs: () => [],
+  infoHeight: '390px',
+  secondTitle: '',
+})
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+</script>
+
+<style scoped lang="scss">
+:deep(.modal-body) {
+  max-height: unset;
+  overflow-y: unset;
+}
+</style>