bfg-common 1.1.43 → 1.1.44

package/components/atoms/notificationBar/NotificationBar.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="notification-bar">
-    <div class="alerts" :style="{ 'background-color': bgPageControl }">
+    <div class="alerts" :style="{ 'background-color': color }">
       <div
         v-if="props.items.length > 1"
-        :class="['alerts-pager ng-star-inserted']"
+        class="alerts-pager ng-star-inserted"
       >
         <div class="alerts-pager-control page-control">
           <div class="alerts-page-down">
             <button
               :id="`${props.testId}-prev-button`"
               class="alerts-pager-button"
-              @click="prevPage"
+              @click="onPrev"
             >
               <atoms-the-icon class="page-control__prev" name="angle" />
             </button>
@@ -24,7 +24,7 @@
             <button
               :id="`${props.testId}-next-button`"
               class="alerts-pager-button"
-              @click="nextPage"
+              @click="onNext"
             >
               <atoms-the-icon class="page-control__next" name="angle" />
             </button>
@@ -33,7 +33,7 @@
       </div>
 
       <div class="alert-text-truncate">
-        <div class="alert alert-app-level" :class="currentPage.status">
+        <div class="alert alert-app-level" :class="currentNotification.status">
           <div class="alert-items">
             <div class="alert-item">
               <div class="alert-icon-wrapper">
@@ -52,7 +52,7 @@
                   :id="`${props.testId}-action-button`"
                   class="btn alert-action"
                 >
-                  {{ setActionText }}
+                  {{ actionText }}
                 </button>
               </div>
             </div>
@@ -61,7 +61,7 @@
           <button
             :id="`${props.testId}-remove-button`"
             class="close"
-            @click="removeCurrentNotificationByKey(currentPage.id)"
+            @click="removeCurrentNotification"
           >
             <atoms-the-icon name="close" fill="#fff" />
           </button>
@@ -74,16 +74,11 @@
 <script setup lang="ts">
 import { UI_I_NotificationItem } from '~/components/atoms/notificationBar/models/interfaces'
 import {
-  UI_E_ActionTextByStatus,
   UI_E_ColorsPageControl,
   UI_E_IconsByStatus,
-  UI_E_MsgByStatus,
 } from '~/components/atoms/notificationBar/models/enums'
 import { UI_T_ColorsPageControlKey } from '~/components/atoms/notificationBar/models/types'
 
-const { $store } = useNuxtApp()
-const localization = computed<any>(() => useLocal())
-
 const props = withDefaults(
   defineProps<{
     items: UI_I_NotificationItem[]
@@ -92,23 +87,23 @@ const props = withDefaults(
   { testId: 'ui-notification-bar' }
 )
 const emits = defineEmits<{
-  (event: 'action', value: string): void
+  (event: 'action'): void
+  (event: 'remove', value: number): void
 }>()
 
 const stepPosition = ref<number>(1)
 
-const removeCurrentNotificationByKey = (key: number | string): void => {
-  stepPosition.value = Math.min(props.items.length - 1, stepPosition.value)
-  $store.dispatch('main/A_REMOVE_NOTIFICATION_ITEM', key)
+const removeCurrentNotification = (): void => {
+  currentNotification.value && emits('remove', currentNotification.value.id)
 }
-const prevPage = (): void => {
+const onPrev = (): void => {
   if (stepPosition.value === 1) {
     stepPosition.value = props.items.length
   } else {
     stepPosition.value--
   }
 }
-const nextPage = (): void => {
+const onNext = (): void => {
   if (stepPosition.value === props.items.length) {
     stepPosition.value = 1
   } else {
@@ -116,34 +111,32 @@ const nextPage = (): void => {
   }
 }
 const onAction = (): void => {
-  emits('action', currentPage.value.action)
+  emits('action')
 }
 
-const currentPage = computed<UI_I_NotificationItem | null>(() => {
+const currentNotification = computed<UI_I_NotificationItem | undefined>(() => {
   return props.items.find((_, i) => i + 1 === stepPosition.value)
 })
 
 const status = computed<UI_T_ColorsPageControlKey>(
-  () => currentPage.value?.status || 'alert-success'
+  () => currentNotification.value?.status || 'alert-success'
 )
-const setActionText = computed<string>(
-  () => localization.value[UI_E_ActionTextByStatus[status.value]]
+const actionText = computed<string>(
+  () => currentNotification.value?.action || ''
 )
 
 const message = computed<string>(
-  // () => localization.value[UI_E_MsgByStatus[status.value]]
-  () => currentPage.value.message
+  () => currentNotification.value?.message || ''
 )
-const isShowAction = computed<string>(
-  // () => localization.value[UI_E_MsgByStatus[status.value]]
-  () => !!currentPage.value.action
+const isShowAction = computed<boolean>(
+  () => !!currentNotification.value?.action
 )
 
 const iconName = computed<string>(
-  () => UI_E_IconsByStatus[currentPage.value.status]
+  () => currentNotification.value ? UI_E_IconsByStatus[currentNotification.value.status] : ''
 )
 
-const bgPageControl = computed<string>(
+const color = computed<string>(
   () => UI_E_ColorsPageControl[status.value]
 )
 </script>

package/components/atoms/notificationBar/models/enums.ts

@@ -5,23 +5,9 @@ export enum UI_E_IconsByStatus {
   'alert-success' = 'success-circle',
 }
 
-export enum UI_E_ActionTextByStatus {
-  'alert-info' = 'notifyInfoActionText',
-  'alert-warning' = 'notifyWarningActionText',
-  'alert-danger' = '',
-  'alert-success' = '',
-}
-
-export enum UI_E_MsgByStatus {
-  'alert-info' = 'notifyInfoMsg',
-  'alert-warning' = 'notifyWarningMsg',
-  'alert-danger' = '',
-  'alert-success' = '',
-}
-
 export enum UI_E_ColorsPageControl {
-  'alert-warning' = '#c47d00',
-  'alert-info' = '#004d8a',
-  'alert-danger' = '',
-  'alert-success' = '',
+  'alert-warning' = '#c25400',
+  'alert-info' = '#0079b8',
+  'alert-danger' = '#c92100',
+  'alert-success' = '#2f8400',
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.1.43",
+  "version": "1.1.44",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",