bfg-common 1.5.92 → 1.5.94

package/components/atoms/notificationBar/NotificationBar.vue

@@ -1,178 +1,178 @@
-<template>
-  <div class="notification-bar">
-    <div :style="{ 'background-color': color }" class="alerts">
-      <div v-if="props.items.length > 1" class="alerts-pager ng-star-inserted">
-        <div class="alerts-pager-control page-control">
-          <div class="alerts-page-down">
-            <button
-              :id="`${props.testId}-prev-button`"
-              :data-id="`${props.testId}-prev-button`"
-              class="alerts-pager-button"
-              @click="onPrev"
-            >
-              <atoms-the-icon class="page-control__prev" name="angle" />
-            </button>
-          </div>
-
-          <div class="alerts-pager-text">
-            {{ stepPosition }} / {{ props.items.length }}
-          </div>
-
-          <div class="alerts-page-up">
-            <button
-              :id="`${props.testId}-next-button`"
-              :data-id="`${props.testId}-next-button`"
-              class="alerts-pager-button"
-              @click="onNext"
-            >
-              <atoms-the-icon class="page-control__next" name="angle" />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="alert-text-truncate">
-        <div :class="['alert alert-app-level', currentNotification.status]">
-          <div class="alert-items">
-            <div class="alert-item">
-              <div class="alert-icon-wrapper">
-                <atoms-the-icon
-                  :class="['alert-icon', iconName]"
-                  :name="iconName"
-                  stroke="none"
-                  fill="#fff"
-                />
-              </div>
-
-              <span class="alert-text">{{ message }}</span>
-
-              <div
-                v-if="isShowAction"
-                :data-id="`${props.testId}-alert-actions`"
-                class="alert-actions"
-                @click="onAction"
-              >
-                <button
-                  :id="`${props.testId}-action-button`"
-                  class="btn alert-action"
-                >
-                  {{ actionText }}
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <button
-            :id="`${props.testId}-remove-button`"
-            :data-id="`${props.testId}-remove-button`"
-            class="close"
-            @click="removeCurrentNotification"
-          >
-            <atoms-the-icon name="close" fill="#fff" />
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_NotificationItem } from '~/components/atoms/notificationBar/lib/models/interfaces'
-import {
-  UI_E_ColorsPageControl,
-  UI_E_IconsByStatus,
-} from '~/components/atoms/notificationBar/lib/models/enums'
-import type { UI_T_ColorsPageControlKey } from '~/components/atoms/notificationBar/lib/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_NotificationItem[]
-    testId?: string
-  }>(),
-  { testId: 'ui-notification-bar' }
-)
-const emits = defineEmits<{
-  (event: 'action'): void
-  (event: 'remove', value: number): void
-}>()
-
-const stepPosition = ref<number>(1)
-
-const removeCurrentNotification = (): void => {
-  currentNotification.value && emits('remove', currentNotification.value.id)
-}
-const onPrev = (): void => {
-  if (stepPosition.value === 1) {
-    stepPosition.value = props.items.length
-  } else {
-    stepPosition.value--
-  }
-}
-const onNext = (): void => {
-  if (stepPosition.value === props.items.length) {
-    stepPosition.value = 1
-  } else {
-    stepPosition.value++
-  }
-}
-const onAction = (): void => {
-  emits('action')
-}
-
-const currentNotification = computed<UI_I_NotificationItem | undefined>(() => {
-  return props.items.find((_, i) => i + 1 === stepPosition.value)
-})
-
-const status = computed<UI_T_ColorsPageControlKey>(
-  () => currentNotification.value?.status || 'alert-success'
-)
-const actionText = computed<string>(
-  () => currentNotification.value?.action || ''
-)
-
-const message = computed<string>(() => currentNotification.value?.message || '')
-const isShowAction = computed<boolean>(
-  () => !!currentNotification.value?.action
-)
-
-const iconName = computed<string>(() =>
-  currentNotification.value
-    ? UI_E_IconsByStatus[currentNotification.value.status]
-    : ''
-)
-
-const color = computed<string>(() => UI_E_ColorsPageControl[status.value])
-</script>
-
-<style lang="scss" scoped>
-@import '~/assets/scss/common/mixins';
-.notification-bar {
-  .alert {
-    &-app-level {
-      .close {
-        &:focus {
-          box-shadow: none;
-        }
-      }
-    }
-  }
-}
-.page-control {
-  :is(.alerts-page-down, .alerts-page-up) {
-    @include flex($align: center, $just: center);
-  }
-  .alerts-pager-button {
-    @include flex($align: center);
-  }
-  svg {
-    width: 15px;
-    fill: #fff;
-  }
-  &__prev {
-    transform: rotate(-90deg);
-  }
-  &__next {
-    transform: rotate(90deg);
-  }
-}
-</style>
+<template>
+  <div class="notification-bar">
+    <div :style="{ 'background-color': color }" class="alerts">
+      <div v-if="props.items.length > 1" class="alerts-pager ng-star-inserted">
+        <div class="alerts-pager-control page-control">
+          <div class="alerts-page-down">
+            <button
+              :id="`${props.testId}-prev-button`"
+              :data-id="`${props.testId}-prev-button`"
+              class="alerts-pager-button"
+              @click="onPrev"
+            >
+              <atoms-the-icon class="page-control__prev" name="angle" />
+            </button>
+          </div>
+
+          <div class="alerts-pager-text">
+            {{ stepPosition }} / {{ props.items.length }}
+          </div>
+
+          <div class="alerts-page-up">
+            <button
+              :id="`${props.testId}-next-button`"
+              :data-id="`${props.testId}-next-button`"
+              class="alerts-pager-button"
+              @click="onNext"
+            >
+              <atoms-the-icon class="page-control__next" name="angle" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="alert-text-truncate">
+        <div :class="['alert alert-app-level', currentNotification.status]">
+          <div class="alert-items">
+            <div class="alert-item">
+              <div class="alert-icon-wrapper">
+                <atoms-the-icon
+                  :class="['alert-icon', iconName]"
+                  :name="iconName"
+                  stroke="none"
+                  fill="#fff"
+                />
+              </div>
+
+              <span class="alert-text">{{ message }}</span>
+
+              <div
+                v-if="isShowAction"
+                :data-id="`${props.testId}-alert-actions`"
+                class="alert-actions"
+                @click="onAction"
+              >
+                <button
+                  :id="`${props.testId}-action-button`"
+                  class="btn alert-action"
+                >
+                  {{ actionText }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <button
+            :id="`${props.testId}-remove-button`"
+            :data-id="`${props.testId}-remove-button`"
+            class="close"
+            @click="removeCurrentNotification"
+          >
+            <atoms-the-icon name="close" fill="#fff" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_NotificationItem } from '~/components/atoms/notificationBar/lib/models/interfaces'
+import {
+  UI_E_ColorsPageControl,
+  UI_E_IconsByStatus,
+} from '~/components/atoms/notificationBar/lib/models/enums'
+import type { UI_T_ColorsPageControlKey } from '~/components/atoms/notificationBar/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_NotificationItem[]
+    testId?: string
+  }>(),
+  { testId: 'ui-notification-bar' }
+)
+const emits = defineEmits<{
+  (event: 'action'): void
+  (event: 'remove', value: number): void
+}>()
+
+const stepPosition = ref<number>(1)
+
+const removeCurrentNotification = (): void => {
+  currentNotification.value && emits('remove', currentNotification.value.id)
+}
+const onPrev = (): void => {
+  if (stepPosition.value === 1) {
+    stepPosition.value = props.items.length
+  } else {
+    stepPosition.value--
+  }
+}
+const onNext = (): void => {
+  if (stepPosition.value === props.items.length) {
+    stepPosition.value = 1
+  } else {
+    stepPosition.value++
+  }
+}
+const onAction = (): void => {
+  emits('action')
+}
+
+const currentNotification = computed<UI_I_NotificationItem | undefined>(() => {
+  return props.items.find((_, i) => i + 1 === stepPosition.value)
+})
+
+const status = computed<UI_T_ColorsPageControlKey>(
+  () => currentNotification.value?.status || 'alert-success'
+)
+const actionText = computed<string>(
+  () => currentNotification.value?.action || ''
+)
+
+const message = computed<string>(() => currentNotification.value?.message || '')
+const isShowAction = computed<boolean>(
+  () => !!currentNotification.value?.action
+)
+
+const iconName = computed<string>(() =>
+  currentNotification.value
+    ? UI_E_IconsByStatus[currentNotification.value.status]
+    : ''
+)
+
+const color = computed<string>(() => UI_E_ColorsPageControl[status.value])
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/scss/common/mixins';
+.notification-bar {
+  .alert {
+    &-app-level {
+      .close {
+        &:focus {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}
+.page-control {
+  :is(.alerts-page-down, .alerts-page-up) {
+    @include flex($align: center, $just: center);
+  }
+  .alerts-pager-button {
+    @include flex($align: center);
+  }
+  svg {
+    width: 15px;
+    fill: #fff;
+  }
+  &__prev {
+    transform: rotate(-90deg);
+  }
+  &__next {
+    transform: rotate(90deg);
+  }
+}
+</style>

package/components/atoms/popover/Popover.vue

@@ -1,58 +1,58 @@
-<template>
-  <div class="popover">
-    <div
-      :id="id"
-      :data-id="`${props.testId}-click-handler`"
-      @click="handleClick"
-    >
-      <slot name="elem" />
-    </div>
-    <Teleport to="body">
-      <div :style="popoverPosition" class="popover__content">
-        <slot name="content" />
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_PositionEl } from '~/components/atoms/popover/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string | number
-  }>(),
-  {
-    testId: '',
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'click'): void
-}>()
-
-const popoverPosition = ref<UI_I_PositionEl | null>(null)
-
-const id = ref<string>(`popover${useUniqueId()}`)
-
-const handleClick = (): void => {
-  emits('click')
-
-  const elem = document.getElementById(id.value) as HTMLDivElement
-  const { x, y, height, width } = elem.getBoundingClientRect()
-
-  popoverPosition.value = {
-    top: `${y + height / 2}px`,
-    left: `${x + width}px`,
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.popover {
-  &__content {
-    position: fixed;
-    z-index: var(--z-popover);
-  }
-}
-</style>
+<template>
+  <div class="popover">
+    <div
+      :id="id"
+      :data-id="`${props.testId}-click-handler`"
+      @click="handleClick"
+    >
+      <slot name="elem" />
+    </div>
+    <Teleport to="body">
+      <div :style="popoverPosition" class="popover__content">
+        <slot name="content" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_PositionEl } from '~/components/atoms/popover/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string | number
+  }>(),
+  {
+    testId: '',
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'click'): void
+}>()
+
+const popoverPosition = ref<UI_I_PositionEl | null>(null)
+
+const id = ref<string>(`popover${useUniqueId()}`)
+
+const handleClick = (): void => {
+  emits('click')
+
+  const elem = document.getElementById(id.value) as HTMLDivElement
+  const { x, y, height, width } = elem.getBoundingClientRect()
+
+  popoverPosition.value = {
+    top: `${y + height / 2}px`,
+    left: `${x + width}px`,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.popover {
+  &__content {
+    position: fixed;
+    z-index: var(--z-popover);
+  }
+}
+</style>

package/components/atoms/popover/lib/models/interfaces.ts

@@ -1,4 +1,4 @@
-export interface UI_I_PositionEl {
-  top: string
-  left: string
-}
+export interface UI_I_PositionEl {
+  top: string
+  left: string
+}