bfg-common 1.3.212 → 1.3.215

package/components/atoms/alert/Alert.vue

@@ -1,95 +1,95 @@
-<template>
-  <div :class="['alert', status]">
-    <div class="alert-items">
-      <slot v-if="$slots.headline" name="headline" :icon="iconName" />
-
-      <slot name="body">
-        <div v-for="(item, key) in items" :key="key" class="alert-item">
-          <div v-if="!$slots.headline" class="alert-icon-wrapper">
-            <atoms-the-icon
-              :class="['alert-icon', iconName]"
-              :name="iconName"
-            />
-          </div>
-
-          <slot :item="item" :index="key">
-            <span class="alert-text">{{ item }}</span>
-          </slot>
-        </div>
-      </slot>
-    </div>
-    <button
-      v-if="!hideCloseIcon"
-      :id="`${props.testId}-close-button`"
-      class="close"
-      @click="removeAlert"
-    >
-      <atoms-the-icon class="alert-icon" name="close" />
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_E_IconsByStatus } from '~/components/atoms/alert/lib/models/enums'
-import type {
-  UI_T_AlertStatus,
-  UI_T_AlertIcon,
-} from '~/components/atoms/alert/lib/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    status: UI_T_AlertStatus
-    items: string[] | any
-    testId?: string
-    hideCloseIcon?: boolean
-  }>(),
-  { testId: 'ui-alert' }
-)
-const emits = defineEmits<{
-  (event: 'remove'): void
-}>()
-
-const removeAlert = (): void => {
-  emits('remove')
-}
-const iconName = computed<UI_T_AlertIcon>(
-  () => UI_E_IconsByStatus[props.status as UI_T_AlertStatus]
-)
-</script>
-
-<style scoped lang="scss">
-.alert {
-  &-info {
-    fill: #004d8a;
-  }
-  &-warning {
-    background-color: var(--alert-warning-bg-color);
-    border: 1px solid var(--alert-warning-border-color);
-    fill: var(--alert-warning-icon-color);
-  }
-
-  &-icon {
-    width: 20px;
-    height: 20px;
-  }
-  &-text {
-    color: var(--global-font-color5);
-  }
-
-  button.close:focus {
-    box-shadow: none;
-  }
-}
-</style>
-<style>
-:root {
-  --alert-warning-icon-color: #d28f00;
-  --alert-warning-bg-color: #fef3b5;
-  --alert-warning-border-color: #d28f00;
-}
-:root.dark-theme {
-  --alert-warning-icon-color: currentColor;
-  --alert-warning-bg-color: #816709;
-  --alert-warning-border-color: transparent;
-}
-</style>
+<template>
+  <div :class="['alert', status]">
+    <div class="alert-items">
+      <slot v-if="$slots.headline" name="headline" :icon="iconName" />
+
+      <slot name="body">
+        <div v-for="(item, key) in items" :key="key" class="alert-item">
+          <div v-if="!$slots.headline" class="alert-icon-wrapper">
+            <atoms-the-icon
+              :class="['alert-icon', iconName]"
+              :name="iconName"
+            />
+          </div>
+
+          <slot :item="item" :index="key">
+            <span class="alert-text">{{ item }}</span>
+          </slot>
+        </div>
+      </slot>
+    </div>
+    <button
+      v-if="!hideCloseIcon"
+      :id="`${props.testId}-close-button`"
+      class="close"
+      @click="removeAlert"
+    >
+      <atoms-the-icon class="alert-icon" name="close" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_E_IconsByStatus } from '~/components/atoms/alert/lib/models/enums'
+import type {
+  UI_T_AlertStatus,
+  UI_T_AlertIcon,
+} from '~/components/atoms/alert/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    status: UI_T_AlertStatus
+    items: string[] | any
+    testId?: string
+    hideCloseIcon?: boolean
+  }>(),
+  { testId: 'ui-alert' }
+)
+const emits = defineEmits<{
+  (event: 'remove'): void
+}>()
+
+const removeAlert = (): void => {
+  emits('remove')
+}
+const iconName = computed<UI_T_AlertIcon>(
+  () => UI_E_IconsByStatus[props.status as UI_T_AlertStatus]
+)
+</script>
+
+<style scoped lang="scss">
+.alert {
+  &-info {
+    fill: #004d8a;
+  }
+  &-warning {
+    background-color: var(--alert-warning-bg-color);
+    border: 1px solid var(--alert-warning-border-color);
+    fill: var(--alert-warning-icon-color);
+  }
+
+  &-icon {
+    width: 20px;
+    height: 20px;
+  }
+  &-text {
+    color: var(--global-font-color5);
+  }
+
+  button.close:focus {
+    box-shadow: none;
+  }
+}
+</style>
+<style>
+:root {
+  --alert-warning-icon-color: #d28f00;
+  --alert-warning-bg-color: #fef3b5;
+  --alert-warning-border-color: #d28f00;
+}
+:root.dark-theme {
+  --alert-warning-icon-color: currentColor;
+  --alert-warning-bg-color: #816709;
+  --alert-warning-border-color: transparent;
+}
+</style>

package/components/atoms/alert/Notification.vue

@@ -1,170 +1,170 @@
-<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 type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_T_NotificationStatus,
-  UI_T_NotificationIcon,
-} from '~/components/atoms/alert/lib/models/types'
-import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/lib/models/enums'
-
-const props = withDefaults(
-  defineProps<{
-    status: UI_T_NotificationStatus
-    id: number
-    show: boolean
-    title: string
-    description: string
-    testId?: string
-  }>(),
-  { testId: 'ui-notification' }
-)
-const emits = defineEmits<{
-  (event: 'hide', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const hide = (): void => {
-  isActive.value = false
-
-  setTimeout(() => {
-    emits('hide', props.id)
-  }, 200)
-}
-const isActive = ref<boolean>(false)
-
-const iconName = computed<UI_T_NotificationIcon>(
-  () => UI_E_IconsByStatusNotification[props.status as UI_T_NotificationStatus]
-)
-
-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 type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_T_NotificationStatus,
+  UI_T_NotificationIcon,
+} from '~/components/atoms/alert/lib/models/types'
+import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/lib/models/enums'
+
+const props = withDefaults(
+  defineProps<{
+    status: UI_T_NotificationStatus
+    id: number
+    show: boolean
+    title: string
+    description: string
+    testId?: string
+  }>(),
+  { testId: 'ui-notification' }
+)
+const emits = defineEmits<{
+  (event: 'hide', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const hide = (): void => {
+  isActive.value = false
+
+  setTimeout(() => {
+    emits('hide', props.id)
+  }, 200)
+}
+const isActive = ref<boolean>(false)
+
+const iconName = computed<UI_T_NotificationIcon>(
+  () => UI_E_IconsByStatusNotification[props.status as UI_T_NotificationStatus]
+)
+
+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>