bfg-common 1.5.260 → 1.5.261

package/components/common/backup/storage/actions/add/steps/readyComplete/ReadyCompleteNew.vue

@@ -1,160 +1,160 @@
-<template>
-  <div class="ready-complete">
-    <div
-      v-for="(section, sectionKey) in props.dataReadyView"
-      :key="sectionKey"
-      class="ready-complete__section details"
-    >
-      <div class="details__container">
-        <h2 class="details__heading">{{ section.label }}</h2>
-
-        <div class="details__list">
-          <div
-            v-for="(list, listKey) in section.items"
-            :key="listKey"
-            class="details-item"
-          >
-            <span
-              ref="detailsItemLabel"
-              :style="{ width: labelMaxWidth + 'px' }"
-              class="details-item-label"
-            >
-              {{ list.label }}:
-            </span>
-
-            <div class="details-list__col-right">
-              <!-- Если value — массив -->
-              <div
-                v-if="Array.isArray(list.value)"
-                class="details-item-container"
-              >
-                <span
-                  v-for="(item, itemKey) in list.value"
-                  :key="itemKey"
-                  class="details-item-value"
-                >
-                  <span
-                    v-if="item.iconClassName"
-                    :class="['icon', item.iconClassName]"
-                  ></span>
-                  {{ item.label }}
-                </span>
-              </div>
-
-              <!-- Если value — обычная строка -->
-              <span v-else class="details-item-value">
-                <span
-                  v-if="list.iconClassName"
-                  :class="['icon', list.iconClassName]"
-                ></span>
-                {{ list.value }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
-
-const props = defineProps<{
-  dataReadyView: UI_I_DetailsItem[]
-}>()
-
-const detailsItemLabel = ref([])
-const labelMaxWidth = computed(() => {
-  let maxWidth = 0
-  for (const key in detailsItemLabel.value) {
-    const node = detailsItemLabel.value[key]
-    if (node.scrollWidth > maxWidth) maxWidth = node.scrollWidth
-  }
-  return maxWidth
-})
-</script>
-
-<style>
-:root {
-  --ready-to-complate-border-color: #e9ebeda3;
-}
-:root.dark-theme {
-  --ready-to-complate-border-color: #e9ebed1f;
-}
-</style>
-<style lang="scss" scoped>
-.ready-complete {
-  &__section {
-    &:not(:last-child) {
-      color: var(--global-border-color);
-      border-bottom: 1px solid var(--ready-to-complate-border-color);
-    }
-  }
-
-  .details {
-    &:last-child {
-      .details__list {
-        padding-bottom: 16px;
-      }
-    }
-    &__container {
-      display: flex;
-      flex-direction: column;
-    }
-    &__heading {
-      font-family: 'Inter', sans-serif;
-      color: var(--title-form-first-color);
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 18px;
-      margin: 16px 0;
-    }
-
-    &__list {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      row-gap: 12px;
-      column-gap: 24px;
-      padding-bottom: 24px;
-
-      .details-item {
-        display: contents;
-        font-family: 'Inter', sans-serif;
-        &-container {
-          display: flex;
-          flex-direction: column;
-          row-gap: 12px;
-        }
-
-        &-label {
-          color: #9da6ad;
-          font-weight: 400;
-          font-size: 13px;
-          line-height: 20px;
-          letter-spacing: 0;
-          vertical-align: middle;
-          text-transform: capitalize;
-          white-space: nowrap;
-        }
-        &-value {
-          display: flex;
-          align-items: center;
-          color: var(--title-form-first-color);
-          font-weight: 400;
-          font-size: 13px;
-          line-height: 20px;
-          letter-spacing: 0;
-          vertical-align: middle;
-        }
-
-        .icon {
-          min-width: 20px;
-          min-height: 20px;
-          margin-right: 8px;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="ready-complete">
+    <div
+      v-for="(section, sectionKey) in props.dataReadyView"
+      :key="sectionKey"
+      class="ready-complete__section details"
+    >
+      <div class="details__container">
+        <h2 class="details__heading">{{ section.label }}</h2>
+
+        <div class="details__list">
+          <div
+            v-for="(list, listKey) in section.items"
+            :key="listKey"
+            class="details-item"
+          >
+            <span
+              ref="detailsItemLabel"
+              :style="{ width: labelMaxWidth + 'px' }"
+              class="details-item-label"
+            >
+              {{ list.label }}:
+            </span>
+
+            <div class="details-list__col-right">
+              <!-- Если value — массив -->
+              <div
+                v-if="Array.isArray(list.value)"
+                class="details-item-container"
+              >
+                <span
+                  v-for="(item, itemKey) in list.value"
+                  :key="itemKey"
+                  class="details-item-value"
+                >
+                  <span
+                    v-if="item.iconClassName"
+                    :class="['icon', item.iconClassName]"
+                  ></span>
+                  {{ item.label }}
+                </span>
+              </div>
+
+              <!-- Если value — обычная строка -->
+              <span v-else class="details-item-value">
+                <span
+                  v-if="list.iconClassName"
+                  :class="['icon', list.iconClassName]"
+                ></span>
+                {{ list.value }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
+
+const props = defineProps<{
+  dataReadyView: UI_I_DetailsItem[]
+}>()
+
+const detailsItemLabel = ref([])
+const labelMaxWidth = computed(() => {
+  let maxWidth = 0
+  for (const key in detailsItemLabel.value) {
+    const node = detailsItemLabel.value[key]
+    if (node.scrollWidth > maxWidth) maxWidth = node.scrollWidth
+  }
+  return maxWidth
+})
+</script>
+
+<style>
+:root {
+  --ready-to-complate-border-color: #e9ebeda3;
+}
+:root.dark-theme {
+  --ready-to-complate-border-color: #e9ebed1f;
+}
+</style>
+<style lang="scss" scoped>
+.ready-complete {
+  &__section {
+    &:not(:last-child) {
+      color: var(--global-border-color);
+      border-bottom: 1px solid var(--ready-to-complate-border-color);
+    }
+  }
+
+  .details {
+    &:last-child {
+      .details__list {
+        padding-bottom: 16px;
+      }
+    }
+    &__container {
+      display: flex;
+      flex-direction: column;
+    }
+    &__heading {
+      font-family: 'Inter', sans-serif;
+      color: var(--title-form-first-color);
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 18px;
+      margin: 16px 0;
+    }
+
+    &__list {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      row-gap: 12px;
+      column-gap: 24px;
+      padding-bottom: 24px;
+
+      .details-item {
+        display: contents;
+        font-family: 'Inter', sans-serif;
+        &-container {
+          display: flex;
+          flex-direction: column;
+          row-gap: 12px;
+        }
+
+        &-label {
+          color: #9da6ad;
+          font-weight: 400;
+          font-size: 13px;
+          line-height: 20px;
+          letter-spacing: 0;
+          vertical-align: middle;
+          text-transform: capitalize;
+          white-space: nowrap;
+        }
+        &-value {
+          display: flex;
+          align-items: center;
+          color: var(--title-form-first-color);
+          font-weight: 400;
+          font-size: 13px;
+          line-height: 20px;
+          letter-spacing: 0;
+          vertical-align: middle;
+        }
+
+        .icon {
+          min-width: 20px;
+          min-height: 20px;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+}
+</style>