bfg-common 1.0.0

package/components/atoms/notificationBar/NotificationBar.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="notification-bar">
+    <div class="alerts" :style="{ 'background-color': bgPageControl }">
+      <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`"
+              class="alerts-pager-button"
+              @click="prevPage"
+            >
+              <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`"
+              class="alerts-pager-button"
+              @click="nextPage"
+            >
+              <atoms-the-icon class="page-control__next" name="angle" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="alert-text-truncate">
+        <div class="alert alert-app-level" :class="currentPage.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">{{ setMessage }}</span>
+
+              <div class="alert-actions" @click="clickButton">
+                <button
+                  :id="`${props.testId}-action-button`"
+                  class="btn alert-action"
+                >
+                  {{ setActionText }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <button
+            :id="`${props.testId}-remove-button`"
+            class="close"
+            @click="removeCurrentNotificationByKey(currentPage.id)"
+          >
+            <atoms-the-icon name="close" fill="#fff" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLocal } from '~/composables/useLocal'
+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[]
+    testId?: string
+  }>(),
+  { testId: 'ui-notification-bar' }
+)
+
+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 prevPage = (): void => {
+  if (stepPosition.value === 1) {
+    stepPosition.value = props.items.length
+  } else {
+    stepPosition.value--
+  }
+}
+const nextPage = (): void => {
+  if (stepPosition.value === props.items.length) {
+    stepPosition.value = 1
+  } else {
+    stepPosition.value++
+  }
+}
+const clickButton = (): void => {
+  console.log('action')
+}
+
+const currentPage = computed(() => {
+  return props.items.find((_, i) => i + 1 === stepPosition.value)
+})
+
+const status = computed<UI_T_ColorsPageControlKey>(
+  () => currentPage.value?.status || 'alert-success'
+)
+const setActionText = computed<string>(
+  () => localization.value[UI_E_ActionTextByStatus[status.value]]
+)
+
+const setMessage = computed<string>(
+  () => localization.value[UI_E_MsgByStatus[status.value]]
+)
+
+const iconName = computed<string>(
+  () => UI_E_IconsByStatus[currentPage.value.status]
+)
+
+const bgPageControl = 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/notificationBar/models/enums.ts

@@ -0,0 +1,27 @@
+export enum UI_E_IconsByStatus {
+  'alert-danger' = 'exclamation-circle',
+  'alert-warning' = 'exclamation-triangle',
+  'alert-info' = 'info-circle',
+  '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' = '',
+}

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

@@ -0,0 +1,6 @@
+export interface UI_I_NotificationItem {
+  id: number
+  status: 'alert-danger' | 'alert-warning' | 'alert-info' | 'alert-success'
+  message: string
+  action?: string
+}

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

@@ -0,0 +1 @@
+export type UI_T_ColorsPageControlKey = 'alert-warning' | 'alert-info' | 'alert-danger' | 'alert-success'

package/components/atoms/perPage/PerPage.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="page-size">
+    {{ selectLabel }}
+
+    <div class="clr-select-wrapper">
+      <select
+        :id="`${props.testId}-select`"
+        :value="props.pageSize"
+        class="clr-page-size-select"
+        @change="change"
+      >
+        <option
+          v-for="(item, key) in props.options"
+          :key="key"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    pageSize: number
+    options: UI_I_OptionItem[]
+    label?: string
+    testId?: string
+  }>(),
+  {
+    testId: 'ui-per-page',
+    label: 'itemsPerPage',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', num: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const selectLabel = computed<string>(() => localization.value[props.label])
+
+const change = (e: InputEvent): void => {
+  emits('change', +(e.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped></style>

package/components/atoms/popover/Popover.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="popover">
+    <div :id="id" @click="handleClick">
+      <slot name="elem" />
+    </div>
+
+    <Teleport to="body">
+      <div class="popover__content" :style="popoverPosition">
+        <slot name="content" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits<{
+  (event: 'click'): void
+}>()
+
+interface UI_I_PositionEl {
+  top: string
+  left: string
+}
+const popoverPosition = ref<UI_I_PositionEl | null>(null)
+
+const id = `popover${useUniqueId()}`
+
+const handleClick = (): void => {
+  emits('click')
+
+  const elem = document.getElementById(id) 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: 1000000;
+  }
+}
+</style>

package/components/atoms/popup/SimplePopup.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    v-show="modelValue"
+    :style="{ top, bottom, left, right }"
+    class="simple-popup clr-popover-content"
+    @click.stop
+  >
+    <div class="close-wrapper">
+      <button
+        :id="`${props.testId}-close-icon`"
+        class="close clr-smart-close-button"
+        @click="hide"
+      >
+        <atoms-the-icon name="close" class="close-icon" />
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    top?: string
+    bottom?: string
+    left?: string
+    right?: string
+    testId?: string
+  }>(),
+  { testId: 'ui-simple-popup' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', status: boolean): void
+}>()
+const hide = (): void => {
+  emits('update:model-value', false)
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      setTimeout(() => {
+        window.addEventListener('click', hide)
+      }, 0)
+      return
+    }
+    window.removeEventListener('click', hide)
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.simple-popup {
+  background: var(--popup-bgcolor);
+  margin-top: 5px;
+  border: 1px solid var(--table-border-color);
+  padding: 18px;
+  box-shadow: 0 1px 3px hsl(0deg 0% 55% / 25%);
+  border-radius: 3px;
+  font-weight: 400;
+  position: absolute;
+  z-index: 5000;
+  cursor: default;
+  opacity: 1;
+
+  .close-wrapper {
+    text-align: right;
+
+    .clr-smart-close-button {
+      .close-icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+}
+</style>
+
+<style>
+:root {
+  --popup-bgcolor: #fafafa;
+  --table-border-color: #ccc;
+}
+:root.dark-theme {
+  --popup-bgcolor: #29414e;
+  --table-border-color: #495865;
+}
+</style>

package/components/atoms/select/TheSelect.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="select">
+    <button
+      :id="props.testId"
+      class="btn btn-link nav-link select-toggle text-ellipsis"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+      @mousedown="showMenu"
+    >
+      <slot></slot>
+      {{ selectedItem?.text }}
+      <atoms-the-icon
+        name="arrow"
+        :class="['select-arrow', { active: open }]"
+      />
+    </button>
+    <Teleport to="body">
+      <ul v-show="open" class="select-menu" :style="selectMenuStyles">
+        <li
+          v-for="item in props.options"
+          :id="`${props.testId}-item`"
+          :key="item.value"
+          class="select-item"
+          @mousedown.stop
+          @click="select(item.value)"
+        >
+          {{ item.text }}
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Option } from '~/components/atoms/select/models/interfaces'
+const props = withDefaults(
+  defineProps<{
+    modelValue: number | string
+    options: UI_I_Option[]
+    testId?: string
+  }>(),
+  { testId: 'ui-select' }
+)
+
+const emits = defineEmits<{
+  (event: 'update:model-value', num: string | number): void
+}>()
+
+const open = ref(false)
+const hover = ref(false)
+const selectMenuStyles = ref({})
+
+const selectedItem = computed<UI_I_Option | undefined>(() => {
+  return props.options.find((option) => option.value === props.modelValue)
+})
+
+const select = (value: number | string): void => {
+  const selectedItem = props.options.find((option) => option.value === value)
+  if (!selectedItem) return
+
+  emits('update:model-value', selectedItem.value)
+}
+const showMenu = (): void => {
+  if (open.value) {
+    hideMenu(true)
+    return
+  }
+
+  open.value = true
+
+  const btn = document.querySelector(`#${props.testId}`)
+  if (!btn) return
+  const { top, height, right } = btn.getBoundingClientRect()
+
+  selectMenuStyles.value = {
+    top: `${top + height}px`,
+    left: `${right}px`,
+  }
+}
+const hideMenu = (force?: boolean): void => {
+  if (hover.value && !force) return
+
+  open.value = false
+}
+
+const windowClick = () => {
+  hideMenu()
+}
+const windowScroll = () => {
+  hideMenu()
+}
+onMounted(() => {
+  window.addEventListener('click', windowClick)
+  window.addEventListener('scroll', windowScroll, true)
+})
+onUnmounted(() => {
+  window.removeEventListener('click', windowClick)
+  window.removeEventListener('scroll', windowScroll)
+})
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins';
+%hover-effect {
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--row-hover-border-color);
+  background-color: var(--row-hover-bg-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+%active-mode {
+  background-color: var(--row-selected-bg-color);
+  color: var(--row-selected-text-color);
+}
+%border-effect {
+  box-shadow: 0 -0.15rem 0 var(--nav-active-box-shadow-color) inset;
+}
+
+.select {
+  position: relative;
+
+  .select-toggle {
+    display: block;
+    gap: 4px;
+    text-transform: uppercase;
+    cursor: pointer;
+    padding: 0 24px 0 12px;
+    margin: 0;
+    background-color: transparent;
+    color: var(--global-font-color);
+    max-width: 360px;
+
+    &:hover {
+      color: var(--global-font-color);
+    }
+  }
+
+  .select-arrow {
+    width: 12px;
+    height: 12px;
+    transform: rotate(180deg);
+    color: inherit;
+    fill: var(--arrows-icon);
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+.select-menu {
+  position: fixed;
+  z-index: 1000000000;
+  transform: translateX(-100%);
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  margin-top: 2px;
+  background-color: var(--global-bg-color);
+  padding: 12px 0;
+
+  .select-item {
+    color: var(--global-font-color3);
+    padding: 3px 24px;
+    font-size: 14px;
+    font-weight: 400;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--row-hover-bg-color);
+      border-color: var(--row-hover-border-color);
+    }
+  }
+}
+</style>

package/components/atoms/select/models/interfaces.ts

@@ -0,0 +1,4 @@
+export interface UI_I_Option {
+  text: string
+  value: number | string
+}