bfg-common 1.2.53 → 1.2.55

package/components/common/addNetworking/Wizard.vue

@@ -1,286 +1,286 @@
-<template>
-  <div v-if="props.show" class="modal clr-wizard wizard-xl">
-    <div class="modal-dialog modal-xl relative">
-      <div class="modal-content-wrapper">
-        <nav class="modal-nav clr-wizard-stepnav-wrapper">
-          <h1 class="clr-wizard-title">
-            {{ props.title }}
-          </h1>
-          <div :class="['clr-wizard-stepnav']">
-            <div class="clr-wizard-stepnav-list">
-              <div
-                v-for="currentStep in props.stepsWithStatus"
-                :key="currentStep.id"
-                :class="[
-                  'clr-wizard clr-wizard-stepnav-item clr-nav-link nav-item',
-                  { disabled: currentStep.status === UI_E_StepStatus.Disabled },
-                  {
-                    active:
-                      currentStep.status === UI_E_StepStatus.Selected ||
-                      currentStep.status === UI_E_StepStatus.CompleteSelected,
-                  },
-                  {
-                    complete:
-                      currentStep.status === UI_E_StepStatus.Complete ||
-                      currentStep.status === UI_E_StepStatus.CompleteSelected,
-                  },
-                ]"
-              >
-                <atoms-the-icon
-                  v-if="false"
-                  :style="{
-                    opacity:
-                      currentStep.status === UI_E_StepStatus.Complete ||
-                      currentStep.status === UI_E_StepStatus.CompleteSelected
-                        ? 1
-                        : 0,
-                  }"
-                  width="14px"
-                  fill="#3aab24"
-                  name="check"
-                />
-                <button
-                  class="btn btn-link clr-wizard-stepnav-link wizard-ml-8"
-                  :disabled="currentStep.status === UI_E_StepStatus.Disabled"
-                  @click="onSelectStep(currentStep.id)"
-                >
-                  <span class="clr-wizard-stepnav-link-title">
-                    {{ currentStep.name }}
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </nav>
-        <div class="modal-content">
-          <div class="modal-header--accessible">
-            <div class="modal-title-wrapper">
-              <h2 class="modal-title">
-                <span class="modal-title-text">{{ props.secondTitle }}</span>
-              </h2>
-            </div>
-            <button class="close" @click="onHideModal">
-              <atoms-the-icon class="close-icon" name="close" />
-            </button>
-          </div>
-          <div class="modal-body">
-            <slot name="modalBody" />
-          </div>
-          <div class="modal-footer">
-            <slot name="modalFooter">
-              <button class="btn btn-link" @click="onHideModal">
-                {{ localization.cancel }}
-              </button>
-              <button
-                v-show="!props.wizard.isSelectedStep(0)"
-                class="btn btn-outline"
-                @click="onBackStep"
-              >
-                {{ localization.back }}
-              </button>
-              <button
-                v-if="props.wizard.isSelectedStep(7)"
-                class="btn btn-success"
-                @click="onFinish"
-              >
-                {{ localization.finish }}
-              </button>
-              <button v-else class="btn btn-primary" @click="onNextStep">
-                {{ localization.next }}
-              </button>
-            </slot>
-          </div>
-        </div>
-      </div>
-
-      <div v-show="props.isShowLoader" class="loader">
-        <i class="fa clr-tree-node-caret-icon spinner spinner" />
-      </div>
-    </div>
-    <div class="modal-backdrop" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Step } from '~/components/common/addNetworking/models/interfaces'
-import { Wizard } from '~/components/common/addNetworking/utils'
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_E_StepStatus } from '~/components/common/addNetworking/models/enums'
-
-const props = defineProps<{
-  wizard: Wizard
-  stepsWithStatus: UI_I_Step[]
-  width: string
-  height: string
-  show: boolean
-  title: string
-  isShowLoader: boolean
-  secondTitle: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-step', id: number): void
-  (event: 'hide'): void
-  (event: 'next-step'): void
-  (event: 'finish'): void
-}>()
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onHideModal = (): void => emits('hide')
-const onSelectStep = (id: number): void => emits('select-step', id)
-const onNextStep = (): void => emits('next-step')
-const onBackStep = (): void => props.wizard.goToBackStep()
-const onFinish = (): void => emits('finish')
-</script>
-
-<style scoped lang="scss">
-.modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 1050;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 48px;
-  overflow-y: auto;
-
-  .modal-nav {
-    background-color: var(--block-view-bg-color4);
-    .clr-wizard-title {
-      color: var(--main-color-mode);
-      font-size: 22px;
-      padding: 24px 12px 24px 24px;
-      //line-height: 1.2rem;
-    }
-  }
-
-  .modal-content-wrapper {
-    position: relative;
-    -webkit-animation-name: animateTop;
-    -webkit-animation-duration: 0.4s;
-    animation-name: animateTop;
-    animation-duration: 0.4s;
-  }
-
-  .modal-content {
-    background-color: var(--modal-bg-color);
-
-    .modal-header--accessible {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      width: 100%;
-      padding: 24px 19px 6px 24px;
-
-      .modal-title-text {
-        color: var(--main-color-mode);
-        font-size: 22px;
-      }
-
-      .close-icon {
-        fill: var(--close-icon);
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    .modal-body {
-      padding: 0 3px;
-    }
-
-    .modal-footer {
-      display: flex;
-      justify-content: flex-end;
-      padding: 24px;
-      flex: unset;
-      min-height: 0;
-      height: auto;
-    }
-  }
-
-  .loader {
-    position: absolute;
-    z-index: 1000;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.3);
-
-    .spinner {
-      left: unset;
-    }
-  }
-
-  .modal-backdrop {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-}
-h1,
-h2 {
-  // просмотреть если нигде не ломается переместит глобально
-  line-height: inherit;
-}
-
-.clr-wizard-stepnav {
-  &.check {
-    .clr-wizard-stepnav-item {
-      box-shadow: none;
-      display: flex;
-      align-items: center;
-
-      button {
-        height: auto;
-        font-size: 13px;
-        border-radius: 3px;
-        //margin-left: 4px;
-      }
-    }
-  }
-  .clr-wizard-stepnav-item {
-    padding: 0.3rem 0 0.4rem;
-
-    .wizard-ml-8 {
-      margin-left: 8px;
-    }
-
-    &.active {
-      button:hover,
-      button {
-        color: var(--vertical-steps-active-color);
-        background-color: var(--vertical-steps-active-bg-color);
-        cursor: default;
-        span {
-          color: var(--checkbox-mark-color);
-        }
-      }
-    }
-    &.complete:not(&.active) {
-      button {
-        background: var(--block-view-bg-color3);
-      }
-      button:hover {
-        color: var(--vertical-steps-complete-color);
-        background-color: var(--vertical-steps-complete-bg-color);
-        border-bottom: 1px solid var(--vertical-steps-hover-border-color);
-      }
-    }
-    button {
-      color: var(--add-vm-context-title);
-      .clr-wizard-stepnav-link-title {
-        font-size: 14px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div v-if="props.show" class="modal clr-wizard wizard-xl">
+    <div class="modal-dialog modal-xl relative">
+      <div class="modal-content-wrapper">
+        <nav class="modal-nav clr-wizard-stepnav-wrapper">
+          <h1 class="clr-wizard-title">
+            {{ props.title }}
+          </h1>
+          <div :class="['clr-wizard-stepnav']">
+            <div class="clr-wizard-stepnav-list">
+              <div
+                v-for="currentStep in props.stepsWithStatus"
+                :key="currentStep.id"
+                :class="[
+                  'clr-wizard clr-wizard-stepnav-item clr-nav-link nav-item',
+                  { disabled: currentStep.status === UI_E_StepStatus.Disabled },
+                  {
+                    active:
+                      currentStep.status === UI_E_StepStatus.Selected ||
+                      currentStep.status === UI_E_StepStatus.CompleteSelected,
+                  },
+                  {
+                    complete:
+                      currentStep.status === UI_E_StepStatus.Complete ||
+                      currentStep.status === UI_E_StepStatus.CompleteSelected,
+                  },
+                ]"
+              >
+                <atoms-the-icon
+                  v-if="false"
+                  :style="{
+                    opacity:
+                      currentStep.status === UI_E_StepStatus.Complete ||
+                      currentStep.status === UI_E_StepStatus.CompleteSelected
+                        ? 1
+                        : 0,
+                  }"
+                  width="14px"
+                  fill="#3aab24"
+                  name="check"
+                />
+                <button
+                  class="btn btn-link clr-wizard-stepnav-link wizard-ml-8"
+                  :disabled="currentStep.status === UI_E_StepStatus.Disabled"
+                  @click="onSelectStep(currentStep.id)"
+                >
+                  <span class="clr-wizard-stepnav-link-title">
+                    {{ currentStep.name }}
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </nav>
+        <div class="modal-content">
+          <div class="modal-header--accessible">
+            <div class="modal-title-wrapper">
+              <h2 class="modal-title">
+                <span class="modal-title-text">{{ props.secondTitle }}</span>
+              </h2>
+            </div>
+            <button class="close" @click="onHideModal">
+              <atoms-the-icon class="close-icon" name="close" />
+            </button>
+          </div>
+          <div class="modal-body">
+            <slot name="modalBody" />
+          </div>
+          <div class="modal-footer">
+            <slot name="modalFooter">
+              <button class="btn btn-link" @click="onHideModal">
+                {{ localization.cancel }}
+              </button>
+              <button
+                v-show="!props.wizard.isSelectedStep(0)"
+                class="btn btn-outline"
+                @click="onBackStep"
+              >
+                {{ localization.back }}
+              </button>
+              <button
+                v-if="props.wizard.isSelectedStep(7)"
+                class="btn btn-success"
+                @click="onFinish"
+              >
+                {{ localization.finish }}
+              </button>
+              <button v-else class="btn btn-primary" @click="onNextStep">
+                {{ localization.next }}
+              </button>
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="props.isShowLoader" class="loader">
+        <i class="fa clr-tree-node-caret-icon spinner spinner" />
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Step } from '~/components/common/addNetworking/models/interfaces'
+import { Wizard } from '~/components/common/addNetworking/utils'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_E_StepStatus } from '~/components/common/addNetworking/models/enums'
+
+const props = defineProps<{
+  wizard: Wizard
+  stepsWithStatus: UI_I_Step[]
+  width: string
+  height: string
+  show: boolean
+  title: string
+  isShowLoader: boolean
+  secondTitle: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-step', id: number): void
+  (event: 'hide'): void
+  (event: 'next-step'): void
+  (event: 'finish'): void
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onHideModal = (): void => emits('hide')
+const onSelectStep = (id: number): void => emits('select-step', id)
+const onNextStep = (): void => emits('next-step')
+const onBackStep = (): void => props.wizard.goToBackStep()
+const onFinish = (): void => emits('finish')
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  overflow-y: auto;
+
+  .modal-nav {
+    background-color: var(--block-view-bg-color4);
+    .clr-wizard-title {
+      color: var(--main-color-mode);
+      font-size: 22px;
+      padding: 24px 12px 24px 24px;
+      //line-height: 1.2rem;
+    }
+  }
+
+  .modal-content-wrapper {
+    position: relative;
+    -webkit-animation-name: animateTop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animateTop;
+    animation-duration: 0.4s;
+  }
+
+  .modal-content {
+    background-color: var(--modal-bg-color);
+
+    .modal-header--accessible {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 100%;
+      padding: 24px 19px 6px 24px;
+
+      .modal-title-text {
+        color: var(--main-color-mode);
+        font-size: 22px;
+      }
+
+      .close-icon {
+        fill: var(--close-icon);
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .modal-body {
+      padding: 0 3px;
+    }
+
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      padding: 24px;
+      flex: unset;
+      min-height: 0;
+      height: auto;
+    }
+  }
+
+  .loader {
+    position: absolute;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.3);
+
+    .spinner {
+      left: unset;
+    }
+  }
+
+  .modal-backdrop {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+h1,
+h2 {
+  // просмотреть если нигде не ломается переместит глобально
+  line-height: inherit;
+}
+
+.clr-wizard-stepnav {
+  &.check {
+    .clr-wizard-stepnav-item {
+      box-shadow: none;
+      display: flex;
+      align-items: center;
+
+      button {
+        height: auto;
+        font-size: 13px;
+        border-radius: 3px;
+        //margin-left: 4px;
+      }
+    }
+  }
+  .clr-wizard-stepnav-item {
+    padding: 0.3rem 0 0.4rem;
+
+    .wizard-ml-8 {
+      margin-left: 8px;
+    }
+
+    &.active {
+      button:hover,
+      button {
+        color: var(--vertical-steps-active-color);
+        background-color: var(--vertical-steps-active-bg-color);
+        cursor: default;
+        span {
+          color: var(--checkbox-mark-color);
+        }
+      }
+    }
+    &.complete:not(&.active) {
+      button {
+        background: var(--block-view-bg-color3);
+      }
+      button:hover {
+        color: var(--vertical-steps-complete-color);
+        background-color: var(--vertical-steps-complete-bg-color);
+        border-bottom: 1px solid var(--vertical-steps-hover-border-color);
+      }
+    }
+    button {
+      color: var(--add-vm-context-title);
+      .clr-wizard-stepnav-link-title {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>