bfg-common 1.6.76 → 1.6.78

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

@@ -1,323 +1,323 @@
-<template>
-  <div class="table-wrapper">
-    <ui-line v-if="props.viewSettingsField.separator" margin="24px 0 16px" />
-    <table
-      :class="['settings-table', { 'ready-complete': props.isReadyComplete }]"
-    >
-      <tbody>
-        <tr>
-          <td colspan="2">
-            <span class="row-sub-title">
-              {{ props.viewSettingsField.title }}
-            </span>
-          </td>
-        </tr>
-        <template v-if="props.viewSettingsField.rows.length > 0">
-          <tr
-            v-for="(row, rowKey) in props.viewSettingsField.rows"
-            :key="row.name"
-            class="table-block"
-          >
-            <td
-              class="row-name-container"
-              :style="
-                props.isReadyComplete && {
-                  width: props.namesWidth?.[0] + 'px',
-                  minWidth: props.namesWidth?.[0] + 'px',
-                }
-              "
-            >
-              <span>
-                {{ row.name
-                }}<template v-if="props.isLabelsWithDots">:</template>
-              </span>
-            </td>
-            <td class="row-value-container">
-              <span
-                :class="[
-                  'settings-table__values',
-                  row.status && {
-                    'is-status-yes': row.color,
-                    'is-status-no': !row.color,
-                  },
-                  {
-                    'is-array':
-                      Array.isArray(row.value) && row.value.length > 0,
-                  },
-                ]"
-              >
-                <span
-                  v-if="row.icon"
-                  :class="['settings-table__value-icon', row.icon]"
-                ></span>
-                <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-${rowKey}-${key}`"
-                      class="settings-table__value array-items"
-                    >
-                      {{ value }}
-                    </span>
-                  </template>
-                  <template v-else>
-                    <span
-                      :data-id="`view-settings-${rowKey}`"
-                      class="settings-table__value"
-                      >--</span
-                    >
-                  </template>
-                </template>
-                <span
-                  v-else
-                  :data-id="`view-settings-${rowKey}`"
-                  class="settings-table__value"
-                >
-                  {{ row.value || '--' }}
-                </span>
-              </span>
-            </td>
-          </tr>
-        </template>
-        <tr v-else-if="props.viewSettingsField.rows.length === 0">
-          <td colspan="2">
-            <div class="not-available">
-              <span><ui-icon width="16" height="16" name="info" /></span>
-              <span>
-                {{ props.viewSettingsField.title }}
-                {{ localization.common.isNotAvailableOnThis }}
-                {{ props.viewName }}
-              </span>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </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
-    isLabelsWithDots?: boolean
-    isReadyComplete?: boolean
-    namesWidth: number[]
-  }>(),
-  {
-    viewName: '',
-    isLabelsWithDots: false,
-    isReadyComplete: false,
-  }
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-.table-wrapper {
-  flex: 1 1 auto;
-  width: 100%;
-  height: auto;
-  box-sizing: border-box;
-  overflow: hidden;
-
-  .settings-table {
-    &:not(.ready-complete) {
-      .table-block {
-        display: grid;
-        grid-template-columns: 50% 50%;
-      }
-    }
-    width: 100%;
-    box-sizing: border-box;
-    background-color: transparent;
-
-    tr:first-of-type {
-      span {
-        display: inline-block;
-        color: var(--title-form-first-color);
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 20px;
-      }
-      td {
-        padding-bottom: 16px;
-      }
-    }
-
-    tr:not(:first-of-type) {
-      vertical-align: top;
-
-      td {
-        &.row-name-container {
-          border-right: 16px solid transparent;
-          //width: 256px;
-          //min-width: 256px;
-          color: var(--diagram-info-second-text);
-          font-size: 13px;
-          font-weight: 400;
-          padding-bottom: 12px;
-
-          span {
-            line-height: 16px;
-          }
-        }
-        &.row-value-container {
-          padding-bottom: 12px;
-
-          span {
-            line-height: 16px;
-          }
-        }
-
-        //width: 240px;
-        white-space: normal;
-        padding: 0;
-
-        .settings-table {
-          &__values {
-            display: inline-block;
-            table-layout: auto;
-            word-break: break-word;
-            //width: 240px;
-
-            font-size: 13px;
-            font-weight: 400;
-            line-height: 16px;
-            color: var(--diagram-info-text);
-
-            &.is-status-yes {
-              color: var(--text-green);
-            }
-            &.is-status-no {
-              color: var(--text-red);
-            }
-
-            .array-items {
-              padding-bottom: 8px;
-
-              &:last-of-type {
-                padding-bottom: 0;
-              }
-            }
-          }
-          &__value {
-            white-space: pre-wrap;
-            width: 100%;
-            display: inline-block;
-          }
-          &__value-icon {
-            width: 20px;
-            height: 20px;
-            min-width: 20px;
-            min-height: 20px;
-          }
-        }
-      }
-
-      &:last-of-type {
-        td {
-          padding-bottom: 0;
-        }
-      }
-    }
-    tr td.row-name-container,
-    tr td.row-value-container {
-      //max-width: 240px;
-      word-break: break-word;
-    }
-
-    .not-available {
-      color: var(--diagram-info-second-text);
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 16px;
-      display: flex;
-
-      span {
-        line-height: 16px;
-
-        &:first-of-type {
-          margin-right: 8px;
-          height: 16px;
-        }
-      }
-    }
-
-    &.ready-complete {
-      .table-block {
-        display: flex;
-      }
-
-      .row-name-container {
-        border-right: 24px solid transparent !important;
-        white-space: nowrap;
-
-        span {
-          font-weight: 400;
-          font-size: 13px;
-          line-height: 20px;
-          letter-spacing: 0;
-          vertical-align: middle;
-          width: 100%;
-          display: block;
-        }
-      }
-      .row-value-container {
-        & > .settings-table__values {
-          display: flex;
-          //align-items: center;
-          column-gap: 8px;
-        }
-        & > .settings-table__values.is-array {
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-          gap: 8px;
-          //width: 100%;
-
-          .settings-table__value {
-            width: auto;
-            padding: 2.5px 12px;
-            height: 20px;
-            background: var(--horizontal-line);
-            border-radius: 16px;
-            line-height: unset;
-            font-weight: 400;
-            font-size: 12px;
-            line-height: 15px;
-            letter-spacing: 0;
-            text-align: center;
-          }
-        }
-      }
-      .settings-table__value {
-        font-weight: 400;
-        font-size: 13px;
-        line-height: 20px;
-        letter-spacing: 0;
-        vertical-align: middle;
-        //max-width: max-content;
-      }
-      .settings-table__value-icon {
-        //width: 20px;
-        //height: 20px;
-      }
-    }
-  }
-}
-table,
-th,
-td {
-  border: 0;
-  border-collapse: collapse;
-}
-</style>
+<template>
+  <div class="table-wrapper">
+    <ui-line v-if="props.viewSettingsField.separator" margin="24px 0 16px" />
+    <table
+      :class="['settings-table', { 'ready-complete': props.isReadyComplete }]"
+    >
+      <tbody>
+        <tr>
+          <td colspan="2">
+            <span class="row-sub-title">
+              {{ props.viewSettingsField.title }}
+            </span>
+          </td>
+        </tr>
+        <template v-if="props.viewSettingsField.rows.length > 0">
+          <tr
+            v-for="(row, rowKey) in props.viewSettingsField.rows"
+            :key="row.name"
+            class="table-block"
+          >
+            <td
+              class="row-name-container"
+              :style="
+                props.isReadyComplete && {
+                  width: props.namesWidth?.[0] + 'px',
+                  minWidth: props.namesWidth?.[0] + 'px',
+                }
+              "
+            >
+              <span>
+                {{ row.name
+                }}<template v-if="props.isLabelsWithDots">:</template>
+              </span>
+            </td>
+            <td class="row-value-container">
+              <span
+                :class="[
+                  'settings-table__values',
+                  row.status && {
+                    'is-status-yes': row.color,
+                    'is-status-no': !row.color,
+                  },
+                  {
+                    'is-array':
+                      Array.isArray(row.value) && row.value.length > 0,
+                  },
+                ]"
+              >
+                <span
+                  v-if="row.icon"
+                  :class="['settings-table__value-icon', row.icon]"
+                ></span>
+                <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-${rowKey}-${key}`"
+                      class="settings-table__value array-items"
+                    >
+                      {{ value }}
+                    </span>
+                  </template>
+                  <template v-else>
+                    <span
+                      :data-id="`view-settings-${rowKey}`"
+                      class="settings-table__value"
+                      >--</span
+                    >
+                  </template>
+                </template>
+                <span
+                  v-else
+                  :data-id="`view-settings-${rowKey}`"
+                  class="settings-table__value"
+                >
+                  {{ row.value || '--' }}
+                </span>
+              </span>
+            </td>
+          </tr>
+        </template>
+        <tr v-else-if="props.viewSettingsField.rows.length === 0">
+          <td colspan="2">
+            <div class="not-available">
+              <span><ui-icon width="16" height="16" name="info" /></span>
+              <span>
+                {{ props.viewSettingsField.title }}
+                {{ localization.common.isNotAvailableOnThis }}
+                {{ props.viewName }}
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </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
+    isLabelsWithDots?: boolean
+    isReadyComplete?: boolean
+    namesWidth: number[]
+  }>(),
+  {
+    viewName: '',
+    isLabelsWithDots: false,
+    isReadyComplete: false,
+  }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.table-wrapper {
+  flex: 1 1 auto;
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .settings-table {
+    &:not(.ready-complete) {
+      .table-block {
+        display: grid;
+        grid-template-columns: 50% 50%;
+      }
+    }
+    width: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+
+    tr:first-of-type {
+      span {
+        display: inline-block;
+        color: var(--title-form-first-color);
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+      }
+      td {
+        padding-bottom: 16px;
+      }
+    }
+
+    tr:not(:first-of-type) {
+      vertical-align: top;
+
+      td {
+        &.row-name-container {
+          border-right: 16px solid transparent;
+          //width: 256px;
+          //min-width: 256px;
+          color: var(--diagram-info-second-text);
+          font-size: 13px;
+          font-weight: 400;
+          padding-bottom: 12px;
+
+          span {
+            line-height: 16px;
+          }
+        }
+        &.row-value-container {
+          padding-bottom: 12px;
+
+          span {
+            line-height: 16px;
+          }
+        }
+
+        //width: 240px;
+        white-space: normal;
+        padding: 0;
+
+        .settings-table {
+          &__values {
+            display: inline-block;
+            table-layout: auto;
+            word-break: break-word;
+            //width: 240px;
+
+            font-size: 13px;
+            font-weight: 400;
+            line-height: 16px;
+            color: var(--diagram-info-text);
+
+            &.is-status-yes {
+              color: var(--text-green);
+            }
+            &.is-status-no {
+              color: var(--text-red);
+            }
+
+            .array-items {
+              padding-bottom: 8px;
+
+              &:last-of-type {
+                padding-bottom: 0;
+              }
+            }
+          }
+          &__value {
+            white-space: pre-wrap;
+            width: 100%;
+            display: inline-block;
+          }
+          &__value-icon {
+            width: 20px;
+            height: 20px;
+            min-width: 20px;
+            min-height: 20px;
+          }
+        }
+      }
+
+      &:last-of-type {
+        td {
+          padding-bottom: 0;
+        }
+      }
+    }
+    tr td.row-name-container,
+    tr td.row-value-container {
+      //max-width: 240px;
+      word-break: break-word;
+    }
+
+    .not-available {
+      color: var(--diagram-info-second-text);
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 16px;
+      display: flex;
+
+      span {
+        line-height: 16px;
+
+        &:first-of-type {
+          margin-right: 8px;
+          height: 16px;
+        }
+      }
+    }
+
+    &.ready-complete {
+      .table-block {
+        display: flex;
+      }
+
+      .row-name-container {
+        border-right: 24px solid transparent !important;
+        white-space: nowrap;
+
+        span {
+          font-weight: 400;
+          font-size: 13px;
+          line-height: 20px;
+          letter-spacing: 0;
+          vertical-align: middle;
+          width: 100%;
+          display: block;
+        }
+      }
+      .row-value-container {
+        & > .settings-table__values {
+          display: flex;
+          //align-items: center;
+          column-gap: 8px;
+        }
+        & > .settings-table__values.is-array {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 8px;
+          //width: 100%;
+
+          .settings-table__value {
+            width: auto;
+            padding: 2.5px 12px;
+            height: 20px;
+            background: var(--horizontal-line);
+            border-radius: 16px;
+            line-height: unset;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 15px;
+            letter-spacing: 0;
+            text-align: center;
+          }
+        }
+      }
+      .settings-table__value {
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: 0;
+        vertical-align: middle;
+        //max-width: max-content;
+      }
+      .settings-table__value-icon {
+        //width: 20px;
+        //height: 20px;
+      }
+    }
+  }
+}
+table,
+th,
+td {
+  border: 0;
+  border-collapse: collapse;
+}
+</style>