bfg-common 1.5.874 → 1.5.876

package/assets/localization/local_be.json

@@ -1059,6 +1059,7 @@
     "noCertificatesAdded": "Сертыфікаты не дададзены.",
     "noConfigurableDeviceIsSelected": "Наладжвальнае прылада не абрана.",
     "noDataProvided": "Ніякіх дадзеных не прадастаўлена",
+    "noDataProvidedMessage": "У цяперашні час няма дадзеных для адлюстравання.",
     "noDhcpEnabledVmKernelNetAdapters": "Сеткавых адаптараў VMkernel з падтрымкай DHCP не існуе.",
     "noFreeNetworkAdaptersAddSwitch": "Бясплатных сеткавых адаптараў для дадання да камутатара няма.",
     "noAdaptersTitle": "Няма бясплатных сеткавых адаптараў для дадання",

package/assets/localization/local_en.json

@@ -1058,6 +1058,7 @@
     "noCertificatesAdded": "No certificates added.",
     "noConfigurableDeviceIsSelected": "No configurable device is selected.",
     "noDataProvided": "No Data Provided",
+    "noDataProvidedMessage": "There is currently no data to display.",
     "noDhcpEnabledVmKernelNetAdapters": "There are no DHCP-enabled VMkernel network adapters.",
     "noFreeNetworkAdaptersAddSwitch": "There are no free network adapters to add to the switch.",
     "noAdaptersTitle": "No Free Network Adapters to Add",

package/assets/localization/local_hy.json

@@ -1058,6 +1058,7 @@
     "noCertificatesAdded": "Վկայականներ չեն ավելացվել:",
     "noConfigurableDeviceIsSelected": "Ընտրովի սարքը ընտրված չէ:",
     "noDataProvided": "Տվյալներ չեն տրամադրվել",
+    "noDataProvidedMessage": "Ներկայումս ցուցադրման համար տվյալներ չկան:",
     "noDhcpEnabledVmKernelNetAdapters": "DHCP-ով միացված VMkernel ցանցային ադապտերներ գոյություն չունեն:",
     "noFreeNetworkAdaptersAddSwitch": "Անջատիչին ավելացնելու համար անվճար ցանցային ադապտերներ չկան:",
     "noAdaptersTitle": "Հասանելի ցանցային ադապտերներ չկան",

package/assets/localization/local_kk.json

@@ -1058,6 +1058,7 @@
     "noCertificatesAdded": "Ешқандай сертификаттар қосылмаған.",
     "noConfigurableDeviceIsSelected": "Теңшелетін құрылғы таңдалмаған.",
     "noDataProvided": "Деректер жоқ",
+    "noDataProvidedMessage": "Қазіргі уақытта көрсетілетін деректер жоқ.",
     "noDhcpEnabledVmKernelNetAdapters": "DHCP қолдайтын vmkernel желілік адаптерлері жоқ.",
     "noFreeNetworkAdaptersAddSwitch": "Коммутаторға қосу үшін тегін Желілік адаптерлер жоқ.",
     "noAdaptersTitle": "Қосылатын Тегін Желілік Адаптерлер жоқ",

package/assets/localization/local_ru.json

@@ -1058,6 +1058,7 @@
     "noCertificatesAdded": "Сертификаты не добавлены.",
     "noConfigurableDeviceIsSelected": "Настраиваемое устройство не выбрано.",
     "noDataProvided": "Никаких данных не предоставлено",
+    "noDataProvidedMessage": "В настоящее время нет данных для отображения.",
     "noDhcpEnabledVmKernelNetAdapters": "Сетевых адаптеров VMkernel с поддержкой DHCP не существует.",
     "noFreeNetworkAdaptersAddSwitch": "Нет свободных сетевых адаптеров, которые можно добавить к коммутатору.",
     "noAdaptersTitle": "Нет доступных сетевых адаптеров для добавления",

package/assets/localization/local_zh.json

@@ -1057,6 +1057,7 @@
     "noCertificatesAdded": "未添加证书。",
     "noConfigurableDeviceIsSelected": "未选择可配置设备。",
     "noDataProvided": "没有提供资料",
+    "noDataProvidedMessage": "目前没有要显示的数据。",
     "noDhcpEnabledVmKernelNetAdapters": "没有启用DHCP的VMkernel网络适配器。",
     "noFreeNetworkAdaptersAddSwitch": "没有免费的网络适配器可以添加到交换机上。",
     "noAdaptersTitle": "无需添加免费网络适配器",

package/components/atoms/noDataProvided/NoDataProvided.vue

@@ -0,0 +1,21 @@
+<template>
+  <component :is="currentComponent" />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./NoDataProvidedNew.vue'))
+    : defineAsyncComponent(() => import('./NoDataProvidedOld.vue'))
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss"></style>

package/components/atoms/noDataProvided/NoDataProvidedNew.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="ui-no-data-provided">
+    <div class="ui-no-data-provided-center">
+      <div class="ui-no-data-provided-icon">
+        <ui-icon name="no-data-provided" width="92" height="92" />
+      </div>
+      <span class="ui-no-data-provided-title">
+        {{ localization.common.noDataProvided }}
+      </span>
+      <span class="ui-no-data-provided-subtitle">
+        {{ localization.common.noDataProvidedMessage }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.ui-no-data-provided {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .ui-no-data-provided-center {
+    position: absolute;
+
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .ui-no-data-provided-icon {
+      width: 92px;
+      height: 92px;
+    }
+
+    .ui-no-data-provided-title {
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 19px;
+      letter-spacing: 0;
+      text-align: center;
+      margin: 16px 0 6px;
+      color: var(--title-form-first-color);
+    }
+
+    .ui-no-data-provided-subtitle {
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 16px;
+      letter-spacing: 0;
+      text-align: center;
+      vertical-align: middle;
+      color: var(--form-icon-color);
+    }
+  }
+}
+</style>

package/components/atoms/noDataProvided/NoDataProvidedOld.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="summary__empty-block flex items-center justify-center">
+    {{ localization.common.noDataProvided }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.summary__empty-block {
+  height: inherit;
+  font-size: 25px;
+}
+</style>

package/components/common/context/recursion/RecursionOld.vue

@@ -120,7 +120,7 @@ const emits = defineEmits<{
     color: #565656;
     border-bottom: 1px solid transparent;
     cursor: pointer;
-    padding: 5px 0 3px;
+    //padding: 5px 0 3px;
 
     &.has-border-top {
       border-top: 1px solid var(--context-menu-inset-border-color);
@@ -161,7 +161,7 @@ const emits = defineEmits<{
       display: flex;
       align-items: center;
       user-select: none;
-      padding: 3px 20px 4px 10px;
+      padding: 8px 20px 7px 10px;
 
       .menu-item-text {
         flex: 1 1 0;

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

@@ -1,312 +1,312 @@
-<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>
-              {{ 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 {
-        color: var(--title-form-first-color);
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 18px;
-        margin: 16px 0;
-      }
-      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;
-          line-height: 16px;
-          padding-bottom: 12px;
-        }
-        &.row-value-container {
-          padding-bottom: 12px;
-        }
-
-        //width: 240px;
-        white-space: normal;
-        padding: 0;
-        line-height: 18px;
-
-        .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: 15.73px;
-      display: flex;
-
-      span:first-of-type {
-        margin-right: 8px;
-      }
-    }
-
-    &.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>
+              {{ 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 {
+        color: var(--title-form-first-color);
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 18px;
+        margin: 16px 0;
+      }
+      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;
+          line-height: 16px;
+          padding-bottom: 12px;
+        }
+        &.row-value-container {
+          padding-bottom: 12px;
+        }
+
+        //width: 240px;
+        white-space: normal;
+        padding: 0;
+        line-height: 18px;
+
+        .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: 15.73px;
+      display: flex;
+
+      span:first-of-type {
+        margin-right: 8px;
+      }
+    }
+
+    &.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>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.874",
+  "version": "1.5.876",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -18,7 +18,7 @@
     "@vueuse/core": "10.1.2",
     "@vueuse/nuxt": "10.1.2",
     "bfg-nuxt-3-graph": "1.0.27",
-    "bfg-uikit": "1.1.7",
+    "bfg-uikit": "1.1.8",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-myrules": "file:./eslint",
     "nuxt": "3.11.2",