bfg-common 1.5.92 → 1.5.94

package/components/atoms/modal/Modal.vue

@@ -1,250 +1,250 @@
-<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`"
-              :data-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`"
-              :data-id="`${props.testId}-cancel-button`"
-              class="btn btn-outline"
-              @click="hide"
-            >
-              {{ localization.common.cancel }}
-            </button>
-            <button
-              :id="`${props.testId}-apply-button`"
-              :data-id="`${props.testId}-apply-button`"
-              :class="[
-                'btn btn-primary',
-                props.loading && 'modal-dialog__loader',
-              ]"
-              :disabled="props.disabledSubmit"
-              @click="submit"
-            >
-              <atoms-loader-pre-loader
-                v-if="props.loading"
-                id="loader"
-                :test-id="`${props.testId}-button-loader`"
-                :show="props.loading"
-                class="absolute-center button__loading"
-              />
-              <span v-else>
-                {{ localization.common.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">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-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<UI_I_Localization>(() => 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: var(--z-modal);
-  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: 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;
-  }
-}
-</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`"
+              :data-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`"
+              :data-id="`${props.testId}-cancel-button`"
+              class="btn btn-outline"
+              @click="hide"
+            >
+              {{ localization.common.cancel }}
+            </button>
+            <button
+              :id="`${props.testId}-apply-button`"
+              :data-id="`${props.testId}-apply-button`"
+              :class="[
+                'btn btn-primary',
+                props.loading && 'modal-dialog__loader',
+              ]"
+              :disabled="props.disabledSubmit"
+              @click="submit"
+            >
+              <atoms-loader-pre-loader
+                v-if="props.loading"
+                id="loader"
+                :test-id="`${props.testId}-button-loader`"
+                :show="props.loading"
+                class="absolute-center button__loading"
+              />
+              <span v-else>
+                {{ localization.common.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">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+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<UI_I_Localization>(() => 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: var(--z-modal);
+  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: 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;
+  }
+}
+</style>
+<style>
+:root {
+  --modal-secondary-title: #565656;
+}
+:root.dark-theme {
+  --modal-secondary-title: #e9ecef;
+}
+</style>