bfg-common 1.1.2 → 1.1.4

package/components/atoms/alert/Notification.vue

@@ -1,167 +1,167 @@
-<template>
-  <div class="notification">
-    <div
-      class="notification-container-wrap animation"
-      :class="{ active: isActive }"
-    >
-      <div class="notification-container">
-        <div v-show="props.show" class="toast">
-          <atoms-the-icon
-            class="toast-icon"
-            :class="iconName !== 'info' && 'with'"
-            :name="iconName"
-          />
-          <div class="toast-content">
-            <div class="flex-align-center flex-space-between">
-              <h4>{{ props.title }}</h4>
-              <button
-                :id="`${props.testId}-close-button`"
-                :title="localization.closeNotification"
-                @click="hide"
-              >
-                <atoms-the-icon name="close" />
-              </button>
-            </div>
-            <div class="description">
-              <slot>
-                <p class="pre-line">{{ props.description }}</p>
-              </slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/models/enums'
-import { UI_T_Status } from '~/components/atoms/alert/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    status: UI_T_Status
-    id: number
-    show: boolean
-    title: string
-    description: string
-  }>(),
-  { testId: 'ui-notification' }
-)
-const emits = defineEmits<{
-  (event: 'hide', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const hide = () => {
-  isActive.value = false
-
-  setTimeout(() => {
-    emits('hide', props.id)
-  }, 200)
-}
-const isActive = ref<boolean>(false)
-
-const iconName = computed<string>(
-  () => UI_E_IconsByStatusNotification[props.status]
-)
-
-setTimeout(() => {
-  isActive.value = true
-}, 1000)
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-
-.notification {
-  .notification-container-wrap {
-    display: block;
-    margin-top: 10px;
-    width: 414px;
-    position: relative;
-    right: -600px;
-    opacity: 0;
-
-    &.active {
-      right: 0;
-      opacity: 1;
-    }
-
-    .notification-container {
-      @include flex($dir: column, $just: flex-end);
-      margin-right: 0;
-
-      .toast {
-        @include flex($dir: row);
-        background-color: #25333d;
-        border-radius: 3px;
-        box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
-        margin: 0;
-        padding: 12px;
-        transform: scale(1);
-        transform-origin: 100% 0;
-        width: 100%;
-
-        .toast-icon {
-          width: 36px;
-          height: 36px;
-          &.with {
-            width: 26px;
-            height: 26px;
-          }
-        }
-
-        .toast-content {
-          padding-left: 12px;
-          width: 100%;
-
-          h4 {
-            color: #e9ecef;
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 24px;
-            margin-top: 0;
-            max-width: 240px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          button {
-            background: transparent;
-            border: none;
-            border-radius: 100%;
-            cursor: pointer;
-            display: inline-block;
-            height: 30px;
-            position: absolute;
-            right: 8px;
-            top: 8px;
-            width: 30px;
-
-            svg {
-              width: 16px;
-              height: 16px;
-              fill: #adbbc4;
-              margin-left: 1px;
-              margin-top: -8px;
-            }
-          }
-
-          .description {
-            max-height: 60vh;
-            overflow: auto;
-
-            p {
-              color: var(--global-font-color6);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="notification">
+    <div
+      class="notification-container-wrap animation"
+      :class="{ active: isActive }"
+    >
+      <div class="notification-container">
+        <div v-show="props.show" class="toast">
+          <atoms-the-icon
+            class="toast-icon"
+            :class="iconName !== 'info' && 'with'"
+            :name="iconName"
+          />
+          <div class="toast-content">
+            <div class="flex-align-center flex-space-between">
+              <h4>{{ props.title }}</h4>
+              <button
+                :id="`${props.testId}-close-button`"
+                :title="localization.closeNotification"
+                @click="hide"
+              >
+                <atoms-the-icon name="close" />
+              </button>
+            </div>
+            <div class="description">
+              <slot>
+                <p class="pre-line">{{ props.description }}</p>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/models/enums'
+import { UI_T_Status } from '~/components/atoms/alert/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    status: UI_T_Status
+    id: number
+    show: boolean
+    title: string
+    description: string
+  }>(),
+  { testId: 'ui-notification' }
+)
+const emits = defineEmits<{
+  (event: 'hide', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const hide = () => {
+  isActive.value = false
+
+  setTimeout(() => {
+    emits('hide', props.id)
+  }, 200)
+}
+const isActive = ref<boolean>(false)
+
+const iconName = computed<string>(
+  () => UI_E_IconsByStatusNotification[props.status]
+)
+
+setTimeout(() => {
+  isActive.value = true
+}, 1000)
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+
+.notification {
+  .notification-container-wrap {
+    display: block;
+    margin-top: 10px;
+    width: 414px;
+    position: relative;
+    right: -600px;
+    opacity: 0;
+
+    &.active {
+      right: 0;
+      opacity: 1;
+    }
+
+    .notification-container {
+      @include flex($dir: column, $just: flex-end);
+      margin-right: 0;
+
+      .toast {
+        @include flex($dir: row);
+        background-color: #25333d;
+        border-radius: 3px;
+        box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
+        margin: 0;
+        padding: 12px;
+        transform: scale(1);
+        transform-origin: 100% 0;
+        width: 100%;
+
+        .toast-icon {
+          width: 36px;
+          height: 36px;
+          &.with {
+            width: 26px;
+            height: 26px;
+          }
+        }
+
+        .toast-content {
+          padding-left: 12px;
+          width: 100%;
+
+          h4 {
+            color: #e9ecef;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 24px;
+            margin-top: 0;
+            max-width: 240px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          button {
+            background: transparent;
+            border: none;
+            border-radius: 100%;
+            cursor: pointer;
+            display: inline-block;
+            height: 30px;
+            position: absolute;
+            right: 8px;
+            top: 8px;
+            width: 30px;
+
+            svg {
+              width: 16px;
+              height: 16px;
+              fill: #adbbc4;
+              margin-left: 1px;
+              margin-top: -8px;
+            }
+          }
+
+          .description {
+            max-height: 60vh;
+            overflow: auto;
+
+            p {
+              color: var(--global-font-color6);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>