bfg-common 1.6.66 → 1.6.68

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

@@ -1,174 +1,174 @@
-<template>
-  <div v-if="props.show" class="info-container">
-    <div class="tabs-container">
-      <ui-tabs
-        v-if="modalTabsLocal && modalTabsLocal.length > 0"
-        v-model="selectedTabViewSettings"
-        :tabs="modalTabsLocal"
-        test-id="main-tabs"
-        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 type {
-  UI_I_ViewSettingsFields,
-  UI_I_ModalTab,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    viewSettingsFields: UI_I_ViewSettingsFields[]
-    modalTabs?: UI_I_ModalTab[]
-    viewName?: string
-    fullMode?: boolean
-    height?: string
-    selectedTab?: number
-  }>(),
-  {
-    modalTabs: undefined,
-    viewName: '',
-    fullMode: undefined,
-    height: undefined,
-    selectedTab: 0,
-  }
-)
-
-const modalTabsLocal = computed<UI_I_ModalTab[]>(() =>
-  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;
-      }
-    }
-  }
-}
-
-.tabs-container {
-  :deep(.tabs-wrapper) {
-    //    padding-left: 16px;
-    //    padding-right: 16px;
-    overflow-x: auto;
-    //
-    &::-webkit-scrollbar {
-      height: 0;
-    }
-    //
-    .tab-item {
-      white-space: nowrap;
-      display: inline-block;
-    }
-  }
-}
-</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"
+        :tabs="modalTabsLocal"
+        test-id="main-tabs"
+        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 type {
+  UI_I_ViewSettingsFields,
+  UI_I_ModalTab,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+// Props from up
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    viewSettingsFields: UI_I_ViewSettingsFields[]
+    modalTabs?: UI_I_ModalTab[]
+    viewName?: string
+    fullMode?: boolean
+    height?: string
+    selectedTab?: number
+  }>(),
+  {
+    modalTabs: undefined,
+    viewName: '',
+    fullMode: undefined,
+    height: undefined,
+    selectedTab: 0,
+  }
+)
+
+const modalTabsLocal = computed<UI_I_ModalTab[]>(() =>
+  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;
+      }
+    }
+  }
+}
+
+.tabs-container {
+  :deep(.tabs-wrapper) {
+    //    padding-left: 16px;
+    //    padding-right: 16px;
+    overflow-x: auto;
+    //
+    &::-webkit-scrollbar {
+      height: 0;
+    }
+    //
+    .tab-item {
+      white-space: nowrap;
+      display: inline-block;
+    }
+  }
+}
+</style>

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

@@ -1,141 +1,141 @@
-<template>
-  <div v-if="props.show" class="info-container">
-    <atoms-nav-bar
-      v-if="props.modalTabs && props.modalTabs.length > 0"
-      v-model="selectedTabViewSettings"
-      :items="props.modalTabs"
-    />
-    <template v-if="props.modalTabs && props.modalTabs.length > 0">
-      <template v-for="tab in props.modalTabs" :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"
-            >
-              <template v-if="viewSettingsField.slot">
-                <slot
-                  name="dynamic"
-                  :dynamic-name="viewSettingsField.slot"
-                  :data="viewSettingsField.data"
-                />
-              </template>
-              <common-diagram-main-modals-view-settings-view-settings
-                v-else
-                :view-name="props.viewName"
-                :view-settings-field="viewSettingsField"
-                :with-collapse="props.withCollapse"
-              />
-            </template>
-          </div>
-        </template>
-      </template>
-    </template>
-    <template v-else>
-      <div :style="{ 'min-height': props.height }" class="table-fixed-height">
-        <template
-          v-for="viewSettingsField in props.viewSettingsFields"
-          :key="viewSettingsField.id"
-        >
-          <template v-if="viewSettingsField.slot">
-            <slot
-              name="dynamic"
-              :dynamic-name="viewSettingsField.slot"
-              :data="viewSettingsField.data"
-            />
-          </template>
-          <common-diagram-main-modals-view-settings-view-settings
-            v-else
-            :view-name="props.viewName"
-            :view-settings-field="viewSettingsField"
-          />
-        </template>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ViewSettingsFields,
-  UI_I_ModalTab,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    viewSettingsFields: UI_I_ViewSettingsFields[]
-    modalTabs?: UI_I_ModalTab[]
-    viewName?: string
-    fullMode?: boolean
-    height?: string
-    withCollapse?: boolean
-    selectedTab?: number
-  }>(),
-  {
-    modalTabs: undefined,
-    viewName: '',
-    fullMode: undefined,
-    height: undefined,
-    withCollapse: undefined,
-    selectedTab: 0,
-  }
-)
-
-// 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">
-.table-fixed-height {
-  min-height: 287px;
-  max-height: 287px;
-  overflow-y: auto;
-
-  &.table-fixed-full-height {
-    max-height: 312px;
-  }
-}
-
-:root.dark-theme {
-  .info-container {
-    background-color: var(--pannel-bg-color);
-    color: var(--main-color-mode2);
-
-    &:has(.no-items-selected-container) {
-      background-color: transparent;
-    }
-
-    td span {
-      color: var(--main-color-mode2);
-    }
-
-    button span {
-      color: var(--main-color-mode2);
-
-      &:hover:not(.disabled) {
-        background-color: transparent;
-      }
-    }
-
-    button.active span {
-      color: #fff;
-    }
-  }
-}
-</style>
+<template>
+  <div v-if="props.show" class="info-container">
+    <atoms-nav-bar
+      v-if="props.modalTabs && props.modalTabs.length > 0"
+      v-model="selectedTabViewSettings"
+      :items="props.modalTabs"
+    />
+    <template v-if="props.modalTabs && props.modalTabs.length > 0">
+      <template v-for="tab in props.modalTabs" :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"
+            >
+              <template v-if="viewSettingsField.slot">
+                <slot
+                  name="dynamic"
+                  :dynamic-name="viewSettingsField.slot"
+                  :data="viewSettingsField.data"
+                />
+              </template>
+              <common-diagram-main-modals-view-settings-view-settings
+                v-else
+                :view-name="props.viewName"
+                :view-settings-field="viewSettingsField"
+                :with-collapse="props.withCollapse"
+              />
+            </template>
+          </div>
+        </template>
+      </template>
+    </template>
+    <template v-else>
+      <div :style="{ 'min-height': props.height }" class="table-fixed-height">
+        <template
+          v-for="viewSettingsField in props.viewSettingsFields"
+          :key="viewSettingsField.id"
+        >
+          <template v-if="viewSettingsField.slot">
+            <slot
+              name="dynamic"
+              :dynamic-name="viewSettingsField.slot"
+              :data="viewSettingsField.data"
+            />
+          </template>
+          <common-diagram-main-modals-view-settings-view-settings
+            v-else
+            :view-name="props.viewName"
+            :view-settings-field="viewSettingsField"
+          />
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ViewSettingsFields,
+  UI_I_ModalTab,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+// Props from up
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    viewSettingsFields: UI_I_ViewSettingsFields[]
+    modalTabs?: UI_I_ModalTab[]
+    viewName?: string
+    fullMode?: boolean
+    height?: string
+    withCollapse?: boolean
+    selectedTab?: number
+  }>(),
+  {
+    modalTabs: undefined,
+    viewName: '',
+    fullMode: undefined,
+    height: undefined,
+    withCollapse: undefined,
+    selectedTab: 0,
+  }
+)
+
+// 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">
+.table-fixed-height {
+  min-height: 287px;
+  max-height: 287px;
+  overflow-y: auto;
+
+  &.table-fixed-full-height {
+    max-height: 312px;
+  }
+}
+
+:root.dark-theme {
+  .info-container {
+    background-color: var(--pannel-bg-color);
+    color: var(--main-color-mode2);
+
+    &:has(.no-items-selected-container) {
+      background-color: transparent;
+    }
+
+    td span {
+      color: var(--main-color-mode2);
+    }
+
+    button span {
+      color: var(--main-color-mode2);
+
+      &:hover:not(.disabled) {
+        background-color: transparent;
+      }
+    }
+
+    button.active span {
+      color: #fff;
+    }
+  }
+}
+</style>