bfg-common 1.0.76 → 1.0.78

package/components/atoms/modal/Modal.vue

@@ -1,241 +1,241 @@
-<template>
-  <div
-    v-if="props.show"
-    :class="[
-      'modal',
-      {
-        'without-footer-padding': props.withoutFooterPadding,
-      },
-    ]"
-  >
-    <div
-      :class="['modal-dialog', props.sizeClass]"
-      :style="{ width: props.width, height: props.height }"
-    >
-      <div class="modal-content">
-        <div class="modal-header">
-          <slot name="modalHeader">
-            <div class="flex-align-center">
-              <h3 class="modal-title">
-                {{ props.title }}
-              </h3>
-              <span v-if="props.secondTitle" class="separator" />
-              <h4 v-if="props.secondTitle" class="secondary-title">
-                {{ props.secondTitle }}
-              </h4>
-            </div>
-            <button
-              v-if="!props.isHideCloseIcon"
-              :id="`${props.testId}-close-icon`"
-              class="close"
-              @click="hide"
-            >
-              <atoms-the-icon class="close-icon" name="close" />
-            </button>
-          </slot>
-        </div>
-        <div class="modal-body">
-          <slot name="modalBody" />
-        </div>
-        <div class="modal-footer">
-          <slot name="modalFooter">
-            <button
-              :id="`${props.testId}-cancel-button`"
-              class="btn btn-outline"
-              @click="hide"
-            >
-              {{ localization.cancel }}
-            </button>
-            <button
-              :id="`${props.testId}-apply-button`"
-              class="btn btn-primary"
-              :class="props.loading && 'modal-dialog__loader'"
-              :disabled="props.disabledSubmit"
-              @click="submit"
-            >
-              <atoms-loader-pre-loader
-                v-if="props.loading"
-                id="loader"
-                class="absolute-center button__loading"
-                :show="props.loading"
-              />
-              <span v-else>
-                {{ localization.ok }}
-              </span>
-            </button>
-          </slot>
-        </div>
-        <div v-show="props.modalLoading" class="loader">
-          <i class="fa clr-tree-node-caret-icon spinner" />
-        </div>
-      </div>
-    </div>
-    <div class="modal-backdrop" />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    title: string
-    testId?: string
-    secondTitle?: string
-    width?: string
-    height?: string
-    disabledSubmit?: boolean
-    submitText?: string
-    loading?: boolean
-    modalLoading?: boolean
-    isHideCloseIcon?: boolean
-    withoutFooterPadding?: boolean
-    sizeClass?: string
-  }>(),
-  {
-    testId: 'ui-modal',
-    width: '',
-    height: '',
-    submitText: '',
-    secondTitle: '',
-    withoutFooterPadding: false,
-    sizeClass: '',
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'submit'): void
-  (event: 'hide'): void
-}>()
-const localization = computed(() => useLocal())
-const hide = (): void => {
-  emits('hide')
-}
-
-const submit = (): void => {
-  emits('submit')
-}
-</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;
-
-  &.without-footer-padding {
-    .modal-dialog .modal-content .modal-footer {
-      padding: 0;
-    }
-  }
-
-  .modal-dialog {
-    .modal-content {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      background-color: var(--modal-bg-color);
-      box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
-      border: 1px solid rgba(0, 0, 0, 0.2);
-      border-radius: 3px;
-      background-clip: padding-box;
-      padding: 24px;
-      height: 100%;
-      -webkit-animation-name: animateTop;
-      -webkit-animation-duration: 0.4s;
-      animation-name: animateTop;
-      animation-duration: 0.4s;
-
-      .modal-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-
-        .modal-title {
-          color: var(--main-color-mode);
-        }
-        .secondary-title {
-          color: var(--modal-secondary-title);
-        }
-        .separator {
-          content: '';
-          border-left: 1px solid #ccc;
-          margin: 0 18px;
-          height: 22px;
-        }
-
-        .close-icon {
-          fill: var(--close-icon);
-          width: 24px;
-          height: 24px;
-        }
-      }
-      .modal-footer {
-        margin-top: auto;
-        .btn:last-child {
-          margin-left: 5px;
-        }
-      }
-    }
-    &__loader {
-      position: relative;
-      pointer-events: none;
-    }
-  }
-
-  .modal-backdrop {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-  .button {
-    &__loading {
-      display: flex;
-      :deep(.spinner) {
-        width: 25px;
-        height: 25px;
-        min-width: 25px;
-        min-height: 25px;
-      }
-    }
-  }
-}
-:deep(.view-settings-modal__container.without-footer-padding) {
-  .modal-dialog .modal-content .modal-footer {
-    padding: 0;
-    margin: 0;
-  }
-}
-
-.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;
-  }
-}
-</style>
-<style>
-:root {
-  --modal-secondary-title: #565656;
-}
-:root.dark-theme {
-  --modal-secondary-title: #e9ecef;
-}
-</style>
+<template>
+  <div
+    v-if="props.show"
+    :class="[
+      'modal',
+      {
+        'without-footer-padding': props.withoutFooterPadding,
+      },
+    ]"
+  >
+    <div
+      :class="['modal-dialog', props.sizeClass]"
+      :style="{ width: props.width, height: props.height }"
+    >
+      <div class="modal-content">
+        <div class="modal-header">
+          <slot name="modalHeader">
+            <div class="flex-align-center">
+              <h3 class="modal-title">
+                {{ props.title }}
+              </h3>
+              <span v-if="props.secondTitle" class="separator" />
+              <h4 v-if="props.secondTitle" class="secondary-title">
+                {{ props.secondTitle }}
+              </h4>
+            </div>
+            <button
+              v-if="!props.isHideCloseIcon"
+              :id="`${props.testId}-close-icon`"
+              class="close"
+              @click="hide"
+            >
+              <atoms-the-icon class="close-icon" name="close" />
+            </button>
+          </slot>
+        </div>
+        <div class="modal-body">
+          <slot name="modalBody" />
+        </div>
+        <div class="modal-footer">
+          <slot name="modalFooter">
+            <button
+              :id="`${props.testId}-cancel-button`"
+              class="btn btn-outline"
+              @click="hide"
+            >
+              {{ localization.cancel }}
+            </button>
+            <button
+              :id="`${props.testId}-apply-button`"
+              class="btn btn-primary"
+              :class="props.loading && 'modal-dialog__loader'"
+              :disabled="props.disabledSubmit"
+              @click="submit"
+            >
+              <atoms-loader-pre-loader
+                v-if="props.loading"
+                id="loader"
+                class="absolute-center button__loading"
+                :show="props.loading"
+              />
+              <span v-else>
+                {{ localization.ok }}
+              </span>
+            </button>
+          </slot>
+        </div>
+        <div v-show="props.modalLoading" class="loader">
+          <i class="fa clr-tree-node-caret-icon spinner" />
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    title: string
+    testId?: string
+    secondTitle?: string
+    width?: string
+    height?: string
+    disabledSubmit?: boolean
+    submitText?: string
+    loading?: boolean
+    modalLoading?: boolean
+    isHideCloseIcon?: boolean
+    withoutFooterPadding?: boolean
+    sizeClass?: string
+  }>(),
+  {
+    testId: 'ui-modal',
+    width: '',
+    height: '',
+    submitText: '',
+    secondTitle: '',
+    withoutFooterPadding: false,
+    sizeClass: '',
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'submit'): void
+  (event: 'hide'): void
+}>()
+const localization = computed(() => useLocal())
+const hide = (): void => {
+  emits('hide')
+}
+
+const submit = (): void => {
+  emits('submit')
+}
+</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;
+
+  &.without-footer-padding {
+    .modal-dialog .modal-content .modal-footer {
+      padding: 0;
+    }
+  }
+
+  .modal-dialog {
+    .modal-content {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      background-color: var(--modal-bg-color);
+      box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+      background-clip: padding-box;
+      padding: 24px;
+      height: 100%;
+      -webkit-animation-name: animateTop;
+      -webkit-animation-duration: 0.4s;
+      animation-name: animateTop;
+      animation-duration: 0.4s;
+
+      .modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        .modal-title {
+          color: var(--main-color-mode);
+        }
+        .secondary-title {
+          color: var(--modal-secondary-title);
+        }
+        .separator {
+          content: '';
+          border-left: 1px solid #ccc;
+          margin: 0 18px;
+          height: 22px;
+        }
+
+        .close-icon {
+          fill: var(--close-icon);
+          width: 24px;
+          height: 24px;
+        }
+      }
+      .modal-footer {
+        margin-top: auto;
+        .btn:last-child {
+          margin-left: 5px;
+        }
+      }
+    }
+    &__loader {
+      position: relative;
+      pointer-events: none;
+    }
+  }
+
+  .modal-backdrop {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+  .button {
+    &__loading {
+      display: flex;
+      :deep(.spinner) {
+        width: 25px;
+        height: 25px;
+        min-width: 25px;
+        min-height: 25px;
+      }
+    }
+  }
+}
+:deep(.view-settings-modal__container.without-footer-padding) {
+  .modal-dialog .modal-content .modal-footer {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.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;
+  }
+}
+</style>
+<style>
+:root {
+  --modal-secondary-title: #565656;
+}
+:root.dark-theme {
+  --modal-secondary-title: #e9ecef;
+}
+</style>

package/components/atoms/modal/bySteps/BySteps.spec.ts

@@ -1,66 +1,66 @@
-// import { describe, test, expect, vi } from 'vitest'
-// import { mount } from '@vue/test-utils'
-// import ModalBySteps from './ModalBySteps.vue'
-// import VerticalStepItems from '~/types/common/step/verticalStepItems'
-//
-// vi.stubGlobal('useLocal', () => {
-//   return {
-//     loading: 'Loading'
-//   }
-// })
-//
-// const stepItems: VerticalStepItems[] = [
-//   { text: 'step 1', disabled: false, complete: false },
-//   { text: 'step 2', disabled: true, complete: false }
-// ]
-//
-// const factory = () => {
-//   return mount(ModalBySteps, {
-//     props: {
-//       show: true,
-//       title: 'title',
-//       secondTitle: 'second title',
-//       stepPosition: 0,
-//       stepItems
-//     }
-//   })
-// }
-//
-// describe('ModalBySteps.vue', () => {
-//   test('testing show prop', async () => {
-//     const wrapper = await factory()
-//
-//     expect(wrapper.find('.modal').exists()).toBe(true)
-//
-//     await wrapper.setProps({ show: false })
-//     expect(wrapper.find('.modal').exists()).toBe(false)
-//   })
-//   test('testing title and secondTitle props', async () => {
-//     const wrapper = await factory()
-//
-//     expect(wrapper.find('.clr-wizard-title').text()).toBe('title')
-//     expect(wrapper.find('.modal-title').text()).toBe('second title')
-//   })
-//   test('testing hide emit', async () => {
-//     const wrapper = await factory()
-//
-//     await wrapper.find('.close').trigger('click')
-//     expect(wrapper.emitted().hide.length).toBe(1)
-//
-//     await wrapper.find('.btn-link').trigger('click')
-//     expect(wrapper.emitted().hide.length).toBe(2)
-//   })
-//   test('testing next, back and finish emits', async () => {
-//     const wrapper = await factory()
-//
-//     await wrapper.find('.btn-primary').trigger('click')
-//     expect(wrapper.emitted().next.length).toBe(1)
-//
-//     await wrapper.setProps({ stepPosition: 1 })
-//     await wrapper.find('.btn-success').trigger('click')
-//     expect(wrapper.emitted().finish.length).toBe(1)
-//
-//     await wrapper.find('.btn-outline').trigger('click')
-//     expect(wrapper.emitted().back.length).toBe(1)
-//   })
-// })
+// import { describe, test, expect, vi } from 'vitest'
+// import { mount } from '@vue/test-utils'
+// import ModalBySteps from './ModalBySteps.vue'
+// import VerticalStepItems from '~/types/common/step/verticalStepItems'
+//
+// vi.stubGlobal('useLocal', () => {
+//   return {
+//     loading: 'Loading'
+//   }
+// })
+//
+// const stepItems: VerticalStepItems[] = [
+//   { text: 'step 1', disabled: false, complete: false },
+//   { text: 'step 2', disabled: true, complete: false }
+// ]
+//
+// const factory = () => {
+//   return mount(ModalBySteps, {
+//     props: {
+//       show: true,
+//       title: 'title',
+//       secondTitle: 'second title',
+//       stepPosition: 0,
+//       stepItems
+//     }
+//   })
+// }
+//
+// describe('ModalBySteps.vue', () => {
+//   test('testing show prop', async () => {
+//     const wrapper = await factory()
+//
+//     expect(wrapper.find('.modal').exists()).toBe(true)
+//
+//     await wrapper.setProps({ show: false })
+//     expect(wrapper.find('.modal').exists()).toBe(false)
+//   })
+//   test('testing title and secondTitle props', async () => {
+//     const wrapper = await factory()
+//
+//     expect(wrapper.find('.clr-wizard-title').text()).toBe('title')
+//     expect(wrapper.find('.modal-title').text()).toBe('second title')
+//   })
+//   test('testing hide emit', async () => {
+//     const wrapper = await factory()
+//
+//     await wrapper.find('.close').trigger('click')
+//     expect(wrapper.emitted().hide.length).toBe(1)
+//
+//     await wrapper.find('.btn-link').trigger('click')
+//     expect(wrapper.emitted().hide.length).toBe(2)
+//   })
+//   test('testing next, back and finish emits', async () => {
+//     const wrapper = await factory()
+//
+//     await wrapper.find('.btn-primary').trigger('click')
+//     expect(wrapper.emitted().next.length).toBe(1)
+//
+//     await wrapper.setProps({ stepPosition: 1 })
+//     await wrapper.find('.btn-success').trigger('click')
+//     expect(wrapper.emitted().finish.length).toBe(1)
+//
+//     await wrapper.find('.btn-outline').trigger('click')
+//     expect(wrapper.emitted().back.length).toBe(1)
+//   })
+// })

package/components/atoms/modal/bySteps/BySteps.vue

@@ -15,11 +15,13 @@
         </nav>
         <div class="modal-content">
           <div class="modal-header--accessible">
-            <div class="modal-title-wrapper">
-              <h2 class="modal-title">
-                <span class="modal-title-text">{{ heading }}</span>
-              </h2>
-            </div>
+            <slot name="contentHeading">
+              <div class="modal-title-wrapper">
+                <h2 class="modal-title">
+                  <span class="modal-title-text">{{ heading }}</span>
+                </h2>
+              </div>
+            </slot>
             <button
               :id="`${props.testId}-close-icon`"
               class="close"
@@ -29,7 +31,7 @@
             </button>
           </div>
           <div class="modal-body">
-            <slot name="modalBody" />
+            <slot name="modalBody" :title="heading" />
           </div>
           <div class="modal-footer">
             <slot name="modalFooter">