bfg-common 1.6.77 → 1.6.78

package/components/common/diagramMain/modals/viewSettings/viewSettings/ViewSettingsOld.vue

@@ -1,203 +1,203 @@
-<template>
-  <div>
-    <div class="table-wrapper">
-      <table class="settings-table">
-        <tbody>
-          <tr>
-            <td colspan="2">
-              <atoms-the-icon
-                v-if="props.withCollapse && props.viewSettingsField.title"
-                :class="[
-                  'virtual-switch__arrow-icon',
-                  {
-                    open: isOpen,
-                  },
-                ]"
-                name="angle"
-                :data-id="`virtual-switch-toggle-icon-${props.viewSettingsField.id}`"
-                @click="onToggle"
-              />
-              <span :class="{ 'title-with-collapse': props.withCollapse }">
-                {{ props.viewSettingsField.title }}
-              </span>
-            </td>
-          </tr>
-          <template v-if="props.viewSettingsField.rows.length > 0">
-            <tr
-              v-for="(row, rowKey) in props.viewSettingsField.rows"
-              v-show="isOpen"
-              :key="row.name"
-            >
-              <td
-                :class="[
-                  'row-name-container',
-                  {
-                    'row-name-container-with-collapse': props.withCollapse,
-                  },
-                ]"
-              >
-                <span
-                  :class="{ 'row-name-with-collapse': props.withCollapse }"
-                  :data-id="`view-settings-${props.viewSettingsField.id}-${rowKey}`"
-                >
-                  {{ row.name }}
-                </span>
-              </td>
-              <td
-                :class="[
-                  'row-value-container',
-                  {
-                    'row-value-container-with-collapse': props.withCollapse,
-                  },
-                ]"
-              >
-                <span class="settings-table__values">
-                  <template v-if="Array.isArray(row.value)">
-                    <template v-if="row.value.length > 0">
-                      <span
-                        v-for="(value, key) in row.value"
-                        :key="value"
-                        :data-id="`view-settings-value-${props.viewSettingsField.id}-${rowKey}-${key}`"
-                        class="settings-table__value"
-                      >
-                        {{ value }}
-                      </span>
-                    </template>
-                    <template v-else>
-                      <span
-                        :data-id="`view-settings-value-${props.viewSettingsField.id}-${rowKey}`"
-                        class="settings-table__value"
-                        >--</span
-                      >
-                    </template>
-                  </template>
-                  <span
-                    v-else
-                    :data-id="`view-settings-value-${props.viewSettingsField.id}-${rowKey}`"
-                    class="settings-table__value"
-                  >
-                    {{ row.value || '--' }}
-                  </span>
-                </span>
-              </td>
-            </tr>
-            <tr v-show="!isOpen"></tr>
-          </template>
-          <tr v-else-if="props.viewSettingsField.rows.length === 0">
-            <td colspan="2">
-              <span>
-                <atoms-diagram-icon width="16" height="16" name="info-circle" />
-                {{ props.viewSettingsField.title }}
-                {{ localization.common.isNotAvailableOnThis }}
-                {{ props.viewName }}
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ViewSettingsFields } from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    viewSettingsField: UI_I_ViewSettingsFields
-    viewName?: string
-    withCollapse?: boolean
-  }>(),
-  {
-    viewName: '',
-    withCollapse: undefined,
-  }
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// View switchable item toggle
-const isOpen = ref<boolean>(true)
-const onToggle = (): void => {
-  isOpen.value = !isOpen.value
-}
-</script>
-
-<style scoped lang="scss">
-.table-wrapper {
-  flex: 1 1 auto;
-  width: 100%;
-  height: auto;
-  padding: 10px;
-  box-sizing: border-box;
-  .title-with-collapse {
-    margin-left: -6px;
-  }
-  .row-name-with-collapse {
-    font-weight: 500;
-  }
-  .virtual-switch__arrow-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 4px;
-    transform: rotate(90deg) translate(3px, 5px);
-    align-self: center;
-    fill: var(--triger-icon-color);
-    cursor: pointer;
-    &.open {
-      transform: rotate(180deg) translate(5px, -3px);
-    }
-  }
-
-  .settings-table {
-    min-width: 480px;
-    width: 100%;
-    box-sizing: border-box;
-    border-collapse: collapse;
-    background-color: transparent;
-    border-right: 15px solid transparent;
-
-    tr:first-of-type {
-      span {
-        font-weight: 700;
-      }
-    }
-
-    tr:not(:first-of-type) {
-      border-left: 30px solid transparent;
-      vertical-align: top;
-      td {
-        border-right: 15px solid transparent;
-        width: 200px;
-        white-space: normal;
-        padding: 0;
-        line-height: 18px;
-
-        .settings-table {
-          &__values {
-            display: inline-block;
-            table-layout: auto;
-            word-break: break-word;
-          }
-          &__value {
-            white-space: pre-wrap;
-            width: 100%;
-            display: inline-block;
-          }
-        }
-      }
-    }
-    tr td.row-name-container,
-    tr td.row-value-container {
-      padding: 2px 0;
-    }
-    tr td.row-name-container-with-collapse,
-    tr td.row-value-container-with-collapse {
-      padding: 6px 0;
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="table-wrapper">
+      <table class="settings-table">
+        <tbody>
+          <tr>
+            <td colspan="2">
+              <atoms-the-icon
+                v-if="props.withCollapse && props.viewSettingsField.title"
+                :class="[
+                  'virtual-switch__arrow-icon',
+                  {
+                    open: isOpen,
+                  },
+                ]"
+                name="angle"
+                :data-id="`virtual-switch-toggle-icon-${props.viewSettingsField.id}`"
+                @click="onToggle"
+              />
+              <span :class="{ 'title-with-collapse': props.withCollapse }">
+                {{ props.viewSettingsField.title }}
+              </span>
+            </td>
+          </tr>
+          <template v-if="props.viewSettingsField.rows.length > 0">
+            <tr
+              v-for="(row, rowKey) in props.viewSettingsField.rows"
+              v-show="isOpen"
+              :key="row.name"
+            >
+              <td
+                :class="[
+                  'row-name-container',
+                  {
+                    'row-name-container-with-collapse': props.withCollapse,
+                  },
+                ]"
+              >
+                <span
+                  :class="{ 'row-name-with-collapse': props.withCollapse }"
+                  :data-id="`view-settings-${props.viewSettingsField.id}-${rowKey}`"
+                >
+                  {{ row.name }}
+                </span>
+              </td>
+              <td
+                :class="[
+                  'row-value-container',
+                  {
+                    'row-value-container-with-collapse': props.withCollapse,
+                  },
+                ]"
+              >
+                <span class="settings-table__values">
+                  <template v-if="Array.isArray(row.value)">
+                    <template v-if="row.value.length > 0">
+                      <span
+                        v-for="(value, key) in row.value"
+                        :key="value"
+                        :data-id="`view-settings-value-${props.viewSettingsField.id}-${rowKey}-${key}`"
+                        class="settings-table__value"
+                      >
+                        {{ value }}
+                      </span>
+                    </template>
+                    <template v-else>
+                      <span
+                        :data-id="`view-settings-value-${props.viewSettingsField.id}-${rowKey}`"
+                        class="settings-table__value"
+                        >--</span
+                      >
+                    </template>
+                  </template>
+                  <span
+                    v-else
+                    :data-id="`view-settings-value-${props.viewSettingsField.id}-${rowKey}`"
+                    class="settings-table__value"
+                  >
+                    {{ row.value || '--' }}
+                  </span>
+                </span>
+              </td>
+            </tr>
+            <tr v-show="!isOpen"></tr>
+          </template>
+          <tr v-else-if="props.viewSettingsField.rows.length === 0">
+            <td colspan="2">
+              <span>
+                <atoms-diagram-icon width="16" height="16" name="info-circle" />
+                {{ props.viewSettingsField.title }}
+                {{ localization.common.isNotAvailableOnThis }}
+                {{ props.viewName }}
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ViewSettingsFields } from '~/components/common/diagramMain/lib/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    viewSettingsField: UI_I_ViewSettingsFields
+    viewName?: string
+    withCollapse?: boolean
+  }>(),
+  {
+    viewName: '',
+    withCollapse: undefined,
+  }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// View switchable item toggle
+const isOpen = ref<boolean>(true)
+const onToggle = (): void => {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<style scoped lang="scss">
+.table-wrapper {
+  flex: 1 1 auto;
+  width: 100%;
+  height: auto;
+  padding: 10px;
+  box-sizing: border-box;
+  .title-with-collapse {
+    margin-left: -6px;
+  }
+  .row-name-with-collapse {
+    font-weight: 500;
+  }
+  .virtual-switch__arrow-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    transform: rotate(90deg) translate(3px, 5px);
+    align-self: center;
+    fill: var(--triger-icon-color);
+    cursor: pointer;
+    &.open {
+      transform: rotate(180deg) translate(5px, -3px);
+    }
+  }
+
+  .settings-table {
+    min-width: 480px;
+    width: 100%;
+    box-sizing: border-box;
+    border-collapse: collapse;
+    background-color: transparent;
+    border-right: 15px solid transparent;
+
+    tr:first-of-type {
+      span {
+        font-weight: 700;
+      }
+    }
+
+    tr:not(:first-of-type) {
+      border-left: 30px solid transparent;
+      vertical-align: top;
+      td {
+        border-right: 15px solid transparent;
+        width: 200px;
+        white-space: normal;
+        padding: 0;
+        line-height: 18px;
+
+        .settings-table {
+          &__values {
+            display: inline-block;
+            table-layout: auto;
+            word-break: break-word;
+          }
+          &__value {
+            white-space: pre-wrap;
+            width: 100%;
+            display: inline-block;
+          }
+        }
+      }
+    }
+    tr td.row-name-container,
+    tr td.row-value-container {
+      padding: 2px 0;
+    }
+    tr td.row-name-container-with-collapse,
+    tr td.row-value-container-with-collapse {
+      padding: 6px 0;
+    }
+  }
+}
+</style>

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

@@ -1,60 +1,60 @@
-<template>
-  <template v-if="props.show">
-    <common-diagram-main-modals-view-settings-view-settings-modal-new
-      v-if="isNewView"
-      :view-name="props.viewName"
-      :height="props.height"
-      :title="props.title"
-      :second-title="props.secondTitle"
-      :show="props.show"
-      :modal-tabs="props.modalTabs"
-      :view-settings-fields="props.viewSettingsFields"
-      :width="props.width || '560px'"
-      :info-height="props.infoHeight"
-      :initial-data="props.initialData"
-      :without-footer-padding="props.withoutFooterPadding"
-      @hide="emits('hide')"
-    />
-    <common-diagram-main-modals-view-settings-view-settings-modal-old
-      v-else
-      :view-name="props.viewName"
-      :height="props.height"
-      :title="props.title"
-      :second-title="props.secondTitle"
-      :show="props.show"
-      :modal-tabs="props.modalTabs"
-      :view-settings-fields="props.viewSettingsFields"
-      :width="props.width || '576px'"
-      :info-height="props.infoHeight"
-      :initial-data="props.initialData"
-      :without-footer-padding="props.withoutFooterPadding"
-      :with-collapse="props.withCollapse"
-      @hide="emits('hide')"
-    />
-  </template>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_PortViewSettingsModalProps } from '~/components/common/diagramMain/modals/viewSettings/viewSettingsModal/lib/models/interfaces'
-
-const props = withDefaults(defineProps<UI_I_PortViewSettingsModalProps>(), {
-  initialData: () => ({}),
-  title: '',
-  width: '',
-  height: '420px',
-  modalTabs: () => [],
-  infoHeight: '390px',
-  secondTitle: '',
-  withoutFooterPadding: false,
-})
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <template v-if="props.show">
+    <common-diagram-main-modals-view-settings-view-settings-modal-new
+      v-if="isNewView"
+      :view-name="props.viewName"
+      :height="props.height"
+      :title="props.title"
+      :second-title="props.secondTitle"
+      :show="props.show"
+      :modal-tabs="props.modalTabs"
+      :view-settings-fields="props.viewSettingsFields"
+      :width="props.width || '560px'"
+      :info-height="props.infoHeight"
+      :initial-data="props.initialData"
+      :without-footer-padding="props.withoutFooterPadding"
+      @hide="emits('hide')"
+    />
+    <common-diagram-main-modals-view-settings-view-settings-modal-old
+      v-else
+      :view-name="props.viewName"
+      :height="props.height"
+      :title="props.title"
+      :second-title="props.secondTitle"
+      :show="props.show"
+      :modal-tabs="props.modalTabs"
+      :view-settings-fields="props.viewSettingsFields"
+      :width="props.width || '576px'"
+      :info-height="props.infoHeight"
+      :initial-data="props.initialData"
+      :without-footer-padding="props.withoutFooterPadding"
+      :with-collapse="props.withCollapse"
+      @hide="emits('hide')"
+    />
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_PortViewSettingsModalProps } from '~/components/common/diagramMain/modals/viewSettings/viewSettingsModal/lib/models/interfaces'
+
+const props = withDefaults(defineProps<UI_I_PortViewSettingsModalProps>(), {
+  initialData: () => ({}),
+  title: '',
+  width: '',
+  height: '420px',
+  modalTabs: () => [],
+  infoHeight: '390px',
+  secondTitle: '',
+  withoutFooterPadding: false,
+})
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -1,50 +1,50 @@
-<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 type { UI_I_PortViewSettingsNewModalProps } from '~/components/common/diagramMain/modals/viewSettings/viewSettingsModal/lib/models/interfaces'
-
-const props = withDefaults(defineProps<UI_I_PortViewSettingsNewModalProps>(), {
-  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 type { UI_I_PortViewSettingsNewModalProps } from '~/components/common/diagramMain/modals/viewSettings/viewSettingsModal/lib/models/interfaces'
+
+const props = withDefaults(defineProps<UI_I_PortViewSettingsNewModalProps>(), {
+  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>