bfg-common 1.5.92 → 1.5.94

package/components/atoms/wizard/Wizard.vue

@@ -1,341 +1,341 @@
-<template>
-  <div v-if="props.show" class="modal clr-wizard wizard-xl">
-    <div
-      :style="{ 'max-height': props.maxHeight }"
-      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>
-          <atoms-wizard-step
-            :test-id="props.testId"
-            :selected-scheme="props.selectedScheme"
-            :steps="props.wizard.stepsInSelectedSchemeWithStatus.value"
-            @change="onSelectStep"
-          />
-        </nav>
-        <div class="modal-content">
-          <div class="modal-header--accessible">
-            <slot name="contentHeading">
-              <div class="modal-title-wrapper">
-                <h2 class="modal-title">
-                  <span class="modal-title-text">
-                    {{ props.wizard.selectedStepCom.value.title }}
-                  </span>
-                </h2>
-              </div>
-            </slot>
-            <button
-              :id="`${props.testId}-close-icon`"
-              :data-id="`${hideTestId}-close-button`"
-              class="close"
-              @click="onHide"
-            >
-              <atoms-the-icon class="close-icon" name="close" />
-            </button>
-          </div>
-          <div class="modal-body" style="padding: 16px 15px 10px 10px">
-            <div
-              v-if="props.wizard.selectedStepCom.value.subTitle"
-              class="content-heading"
-            >
-              <div
-                v-if="props.wizard.selectedStepCom.value.subTitle !== 'border'"
-              >
-                <slot
-                  name="description"
-                  :selected-step="props.wizard.selectedStepCom.value"
-                >
-                  <h2>{{ props.wizard.selectedStepCom.value.subTitle }}</h2>
-                </slot>
-              </div>
-            </div>
-            <slot
-              name="modalBody"
-              :selected-step="props.wizard.selectedStepCom.value"
-            />
-          </div>
-          <div class="modal-footer">
-            <slot name="modalFooterContent"></slot>
-            <slot name="modalFooter">
-              <button
-                :id="`${props.testId}-cancel-button`"
-                :data-id="`${hideTestId}-cancel-button`"
-                class="btn btn-link"
-                @click="onHide"
-              >
-                {{ props.localization.common.cancel }}
-              </button>
-              <button
-                v-if="!props.wizard.isFirstStepCom.value"
-                :id="`${props.testId}-back-button`"
-                :data-id="`${backTestId}-back-button`"
-                class="btn btn-outline"
-                @click="onPreviousStep"
-              >
-                {{ props.localization.common.back }}
-              </button>
-              <button
-                v-if="props.wizard.isLastStepCom.value"
-                :id="`${props.testId}-finish-button`"
-                :data-id="`${finishTestId}-finish-button`"
-                class="btn btn-success"
-                @click="emits('submit')"
-              >
-                {{ props.localization.common.finish }}
-              </button>
-              <button
-                v-else
-                :id="`${props.testId}-next-button`"
-                :data-id="`${nextTestId}-next-button`"
-                :disabled="
-                  props.isDisabledFinish ||
-                  props.wizard.isDisabledNextButton.value
-                "
-                class="btn btn-primary"
-                @click="onNextStep"
-              >
-                {{ props.localization.common.next }}
-              </button>
-            </slot>
-          </div>
-        </div>
-      </div>
-
-      <div v-show="props.wizard.wizardLoader.status" class="loader">
-        <i class="fa clr-tree-node-caret-icon spinner" />
-        <div v-if="props.wizard.wizardLoader.messages.length" class="text">
-          <p
-            v-for="message in props.wizard.wizardLoader.messages"
-            :key="message"
-          >
-            {{ message }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="modal-backdrop" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_WizardStep,
-  UI_I_WizardStepNavigation,
-  UI_I_WizardSchemeData,
-} from '~/components/atoms/wizard/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    title: string
-    show: boolean
-    selectedScheme: (number | UI_I_WizardSchemeData)[]
-    isDisabledNext?: boolean
-    isDisabledFinish?: boolean
-    localization?: UI_I_Localization
-    testId?: string
-    maxHeight?: string
-    wizard: any
-  }>(),
-  {
-    isDisabledNext: false,
-    isDisabledFinish: false,
-    localization: () => ({}),
-    testId: '',
-    maxHeight: '',
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'submit'): void
-  (event: 'hide'): void
-  (event: 'change-steps', value: UI_I_WizardStep[]): void
-}>()
-
-const hideTestId = computed<string>(
-  () =>
-    (props.wizard.selectedStepCom.value?.accessDynamicTestIdForHide &&
-      props.wizard.selectedStepDataFromScheme.value?.dataId) ||
-    props.testId
-)
-
-const backTestId = computed<string>(
-  () =>
-    (props.wizard.selectedStepCom.value?.accessDynamicTestIdForBack &&
-      props.wizard.selectedStepDataFromScheme.value?.dataId) ||
-    props.testId
-)
-
-const finishTestId = computed<string>(
-  () =>
-    (props.wizard.selectedStepCom.value?.accessDynamicTestIdForFinish &&
-      props.wizard.selectedStepDataFromScheme.value?.dataId) ||
-    props.testId
-)
-
-const nextTestId = computed<string>(
-  () =>
-    (props.wizard.selectedStepCom.value?.accessDynamicTestIdForNext &&
-      props.wizard.selectedStepDataFromScheme.value?.dataId) ||
-    props.testId
-)
-
-const onHide = (): void => {
-  emits('hide')
-}
-
-const onSelectStep = (step: UI_I_WizardStepNavigation): void => {
-  emits('change-steps', props.wizard.selectedStepData(step))
-}
-
-const onNextStep = (): void => {
-  emits('change-steps', props.wizard.nextStepData)
-}
-
-const onPreviousStep = (): void => {
-  emits('change-steps', props.wizard.previousStepData)
-}
-</script>
-
-<style scoped lang="scss">
-.modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: var(--z-modal);
-  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: var(--z-fixed);
-    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;
-    }
-
-    .text {
-      position: absolute;
-      top: calc(40% + 75px);
-      text-align: center;
-      background-color: rgba(0, 0, 0, 0.3);
-      padding: 5px 10px;
-      border-radius: 3px;
-
-      p {
-        color: white;
-      }
-    }
-  }
-
-  .modal-backdrop {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-}
-h1,
-h2 {
-  // просмотреть если нигде не ломается переместит глобально
-  line-height: inherit;
-}
-
-.content-heading {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  border-bottom: 1px solid #a6a6a6;
-
-  & > div h2 {
-    font-weight: 400;
-    font-size: 13px;
-    line-height: inherit;
-    color: var(--add-vm-context-sub-title);
-  }
-}
-
-:root.dark-theme {
-  .loader .text {
-    position: absolute;
-    top: calc(40% + 75px);
-    text-align: center;
-    background-color: rgba(250, 250, 250, 0.5);
-    padding: 5px 10px;
-    border-radius: 5px;
-
-    p {
-      color: black;
-    }
-  }
-}
-</style>
+<template>
+  <div v-if="props.show" class="modal clr-wizard wizard-xl">
+    <div
+      :style="{ 'max-height': props.maxHeight }"
+      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>
+          <atoms-wizard-step
+            :test-id="props.testId"
+            :selected-scheme="props.selectedScheme"
+            :steps="props.wizard.stepsInSelectedSchemeWithStatus.value"
+            @change="onSelectStep"
+          />
+        </nav>
+        <div class="modal-content">
+          <div class="modal-header--accessible">
+            <slot name="contentHeading">
+              <div class="modal-title-wrapper">
+                <h2 class="modal-title">
+                  <span class="modal-title-text">
+                    {{ props.wizard.selectedStepCom.value.title }}
+                  </span>
+                </h2>
+              </div>
+            </slot>
+            <button
+              :id="`${props.testId}-close-icon`"
+              :data-id="`${hideTestId}-close-button`"
+              class="close"
+              @click="onHide"
+            >
+              <atoms-the-icon class="close-icon" name="close" />
+            </button>
+          </div>
+          <div class="modal-body" style="padding: 16px 15px 10px 10px">
+            <div
+              v-if="props.wizard.selectedStepCom.value.subTitle"
+              class="content-heading"
+            >
+              <div
+                v-if="props.wizard.selectedStepCom.value.subTitle !== 'border'"
+              >
+                <slot
+                  name="description"
+                  :selected-step="props.wizard.selectedStepCom.value"
+                >
+                  <h2>{{ props.wizard.selectedStepCom.value.subTitle }}</h2>
+                </slot>
+              </div>
+            </div>
+            <slot
+              name="modalBody"
+              :selected-step="props.wizard.selectedStepCom.value"
+            />
+          </div>
+          <div class="modal-footer">
+            <slot name="modalFooterContent"></slot>
+            <slot name="modalFooter">
+              <button
+                :id="`${props.testId}-cancel-button`"
+                :data-id="`${hideTestId}-cancel-button`"
+                class="btn btn-link"
+                @click="onHide"
+              >
+                {{ props.localization.common.cancel }}
+              </button>
+              <button
+                v-if="!props.wizard.isFirstStepCom.value"
+                :id="`${props.testId}-back-button`"
+                :data-id="`${backTestId}-back-button`"
+                class="btn btn-outline"
+                @click="onPreviousStep"
+              >
+                {{ props.localization.common.back }}
+              </button>
+              <button
+                v-if="props.wizard.isLastStepCom.value"
+                :id="`${props.testId}-finish-button`"
+                :data-id="`${finishTestId}-finish-button`"
+                class="btn btn-success"
+                @click="emits('submit')"
+              >
+                {{ props.localization.common.finish }}
+              </button>
+              <button
+                v-else
+                :id="`${props.testId}-next-button`"
+                :data-id="`${nextTestId}-next-button`"
+                :disabled="
+                  props.isDisabledFinish ||
+                  props.wizard.isDisabledNextButton.value
+                "
+                class="btn btn-primary"
+                @click="onNextStep"
+              >
+                {{ props.localization.common.next }}
+              </button>
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="props.wizard.wizardLoader.status" class="loader">
+        <i class="fa clr-tree-node-caret-icon spinner" />
+        <div v-if="props.wizard.wizardLoader.messages.length" class="text">
+          <p
+            v-for="message in props.wizard.wizardLoader.messages"
+            :key="message"
+          >
+            {{ message }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_WizardStep,
+  UI_I_WizardStepNavigation,
+  UI_I_WizardSchemeData,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    show: boolean
+    selectedScheme: (number | UI_I_WizardSchemeData)[]
+    isDisabledNext?: boolean
+    isDisabledFinish?: boolean
+    localization?: UI_I_Localization
+    testId?: string
+    maxHeight?: string
+    wizard: any
+  }>(),
+  {
+    isDisabledNext: false,
+    isDisabledFinish: false,
+    localization: () => ({}),
+    testId: '',
+    maxHeight: '',
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'submit'): void
+  (event: 'hide'): void
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+}>()
+
+const hideTestId = computed<string>(
+  () =>
+    (props.wizard.selectedStepCom.value?.accessDynamicTestIdForHide &&
+      props.wizard.selectedStepDataFromScheme.value?.dataId) ||
+    props.testId
+)
+
+const backTestId = computed<string>(
+  () =>
+    (props.wizard.selectedStepCom.value?.accessDynamicTestIdForBack &&
+      props.wizard.selectedStepDataFromScheme.value?.dataId) ||
+    props.testId
+)
+
+const finishTestId = computed<string>(
+  () =>
+    (props.wizard.selectedStepCom.value?.accessDynamicTestIdForFinish &&
+      props.wizard.selectedStepDataFromScheme.value?.dataId) ||
+    props.testId
+)
+
+const nextTestId = computed<string>(
+  () =>
+    (props.wizard.selectedStepCom.value?.accessDynamicTestIdForNext &&
+      props.wizard.selectedStepDataFromScheme.value?.dataId) ||
+    props.testId
+)
+
+const onHide = (): void => {
+  emits('hide')
+}
+
+const onSelectStep = (step: UI_I_WizardStepNavigation): void => {
+  emits('change-steps', props.wizard.selectedStepData(step))
+}
+
+const onNextStep = (): void => {
+  emits('change-steps', props.wizard.nextStepData)
+}
+
+const onPreviousStep = (): void => {
+  emits('change-steps', props.wizard.previousStepData)
+}
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: var(--z-modal);
+  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: var(--z-fixed);
+    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;
+    }
+
+    .text {
+      position: absolute;
+      top: calc(40% + 75px);
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.3);
+      padding: 5px 10px;
+      border-radius: 3px;
+
+      p {
+        color: white;
+      }
+    }
+  }
+
+  .modal-backdrop {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+h1,
+h2 {
+  // просмотреть если нигде не ломается переместит глобально
+  line-height: inherit;
+}
+
+.content-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid #a6a6a6;
+
+  & > div h2 {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: inherit;
+    color: var(--add-vm-context-sub-title);
+  }
+}
+
+:root.dark-theme {
+  .loader .text {
+    position: absolute;
+    top: calc(40% + 75px);
+    text-align: center;
+    background-color: rgba(250, 250, 250, 0.5);
+    padding: 5px 10px;
+    border-radius: 5px;
+
+    p {
+      color: black;
+    }
+  }
+}
+</style>