bfg-common 1.0.0

package/components/atoms/list/dragDropList/DragDropList.vue

@@ -0,0 +1,139 @@
+<template>
+  <div :class="['drag-drop-list', { grab: isGrab }]">
+    <div
+      v-for="(item, key) in presentItems"
+      :key="key"
+      :class="['drag-drop-item', { grab: grabItemKey === key }]"
+      @mouseenter="hoveredItemPosition = key"
+      @mouseleave="hoveredItemPosition = -1"
+    >
+      <slot :name="`leftSide${key}`" />
+
+      <div class="icon-drag-handle" @mousedown="grab(item, $event)" />
+
+      <slot :name="`rightSide${key}`" />
+    </div>
+
+    <Teleport to="body">
+      <div v-show="isGrab" id="drag-drop-item-grab">
+        <div
+          v-if="grabItem?.iconClassName"
+          :class="['drag-drop-item-grab-icon', grabItem?.iconClassName]"
+        />
+        <span>{{ dragDropItemGrab }}</span>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/config/events'
+
+const props = defineProps<{
+  items: any
+  grabItemKey: string
+}>()
+const emits = defineEmits<{
+  ( event: 'drop', obj: UI_I_DropEvent ): void
+}>()
+
+const presentItems = computed(() => props.items)
+
+const dragDropItemGrab = computed(() => grabItem.value?.[props.grabItemKey])
+let dragDropItemGrabElem: HTMLElement
+
+const hoveredItemPosition = ref(-1)
+const isGrab = ref<boolean>(false)
+const grabItem = ref(null)
+const grab = (item: any, e: Event): void => {
+  isGrab.value = true
+  grabItem.value = item
+
+  setDragDropItemGrabElemPosition(e)
+}
+
+let setDragDropItemGrabElemPosition = (e: any): void => {
+  if (!dragDropItemGrabElem) return
+
+  dragDropItemGrabElem.style.top = `${e.clientY + 2}px`
+  dragDropItemGrabElem.style.left = `${e.clientX + 2}px`
+}
+setDragDropItemGrabElemPosition = useThrottle(setDragDropItemGrabElemPosition)
+
+const windowMousemove = (e: Event): void => {
+  if (!isGrab.value) { return }
+
+  setDragDropItemGrabElemPosition(e)
+}
+const windowMouseup = (): void => {
+  if (!isGrab.value) { return }
+  isGrab.value = false
+  if (hoveredItemPosition.value === -1) { return }
+
+  emits('drop', {
+    target: grabItem.value,
+    toPosition: hoveredItemPosition.value
+  })
+}
+onMounted(() => {
+  dragDropItemGrabElem = document.getElementById('drag-drop-item-grab') as HTMLDivElement || null
+  window.addEventListener('mousemove', windowMousemove)
+  window.addEventListener('mouseup', windowMouseup)
+})
+onUnmounted(() => {
+  window.removeEventListener('mousemove', windowMouseup)
+  window.removeEventListener('mouseup', windowMouseup)
+})
+</script>
+
+<style scoped lang="scss">
+.drag-drop-list {
+  user-select: none;
+
+  &.grab {
+    cursor: grabbing;
+
+    .drag-drop-item {
+      .icon-drag-handle {
+        cursor: grabbing;
+      }
+    }
+  }
+
+  .drag-drop-item {
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background-color: #dddddd;
+    }
+
+    .icon-drag-handle {
+      cursor: grab;
+      &:active {
+        cursor: grabbing;
+      }
+    }
+  }
+}
+
+#drag-drop-item-grab {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  border-radius: 3px 0 0 3px;
+  border: 1px solid #cccccc;
+  border-left-color: #781da0;
+  background-color: #ffffff;
+  padding: 0 10px;
+  cursor: grabbing;
+  display: flex;
+  align-items: center;
+  opacity: 0.4;
+
+  .drag-drop-item-grab-icon {
+    margin-right: 6px;
+  }
+}
+</style>

package/components/atoms/list/dragDropList/config/events.ts

@@ -0,0 +1,4 @@
+export interface UI_I_DropEvent {
+  target: any
+  toPosition: number
+}

package/components/atoms/loader/BarLoader.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="loader"></div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped lang="scss">
+.loader {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(-45deg, rgba(1, 157, 255, 0.5) 1.88% 6%, rgba(179, 217, 243, 0.5) 0 5%, rgba(179, 217, 243, 0.5) 5% 10%, rgba(1, 157, 255, 0.5) 5% 10%) left/400% 100%;
+  animation: i3 10s infinite linear;
+}
+
+@keyframes i3 {
+  100% {
+    background-position: 400% 0;
+  }
+}
+</style>

package/components/atoms/loader/Loader.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="loader"><div class="spinner"></div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins';
+.loader {
+  position: absolute;
+  @include flex($just: center, $align: center);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--table-spinner-bg-color);
+  z-index: 590;
+
+  .spinner {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+  }
+}
+</style>

package/components/atoms/loader/PreLoader.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="loading-container" :hidden="!props.show">
+    <div class="spinner spinner-inverse">
+      {{ localization.loading }}...
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const localization = computed(() => useLocal())
+const props = defineProps<{
+  show: boolean
+}>()
+</script>
+
+<style scoped lang="scss">
+#loading-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  z-index: 99999;
+
+  .spinner {
+    opacity: 0.5;
+    white-space: nowrap;
+  }
+}
+</style>

package/components/atoms/loader/Preloader.spec.ts

@@ -0,0 +1,24 @@
+import { describe, test, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PreLoader from './PreLoader.vue'
+
+vi.stubGlobal('useLocal', () => {
+  return {
+    loading: 'Loading'
+  }
+})
+
+describe('PreLoader.vue', () => {
+  test('check props', async () => {
+    const wrapper = mount(PreLoader, {
+      props: {
+        show: true
+      }
+    })
+
+    expect(wrapper.attributes().hidden).toBeUndefined()
+
+    await wrapper.setProps({ show: false })
+    expect(wrapper.attributes().hidden).toBeDefined()
+  })
+})

package/components/atoms/modal/Modal.spec.ts

@@ -0,0 +1,55 @@
+// import { describe, test, expect, vi } from 'vitest'
+// import { mount } from '@vue/test-utils'
+// import Modal from './Modal.vue'
+//
+// vi.stubGlobal('useLocal', () => {
+//   return {
+//     loading: 'Loading'
+//   }
+// })
+//
+// const factory = () => {
+//   return mount(Modal, {
+//     props: {
+//       show: true,
+//       title: 'title'
+//     }
+//   })
+// }
+//
+// describe('Modal.vue', () => {
+//   test('testing show prop', async () => {
+//     const wrapper = await factory()
+//
+//     expect(wrapper.find('.modal').exists()).toBe(true)
+//
+//     await wrapper.setProps({ show: false })
+//     expect(wrapper.find('.modal').exists()).toBe(false)
+//   })
+//   test('testing title and secondTitle props', async () => {
+//     const wrapper = await factory()
+//
+//     expect(wrapper.find('.modal-title').text()).toBe('title')
+//     expect(wrapper.find('.secondary-title').exists()).toBe(false)
+//     expect(wrapper.find('.separator').exists()).toBe(false)
+//
+//     await wrapper.setProps({ secondTitle: 'secondTitle' })
+//     expect(wrapper.find('.secondary-title').text()).toBe('secondTitle')
+//     expect(wrapper.find('.separator').exists()).toBe(true)
+//   })
+//   test('testing hide emit', async () => {
+//     const wrapper = await factory()
+//
+//     await wrapper.find('.close').trigger('click')
+//     expect(wrapper.emitted().hide.length).toBe(1)
+//
+//     await wrapper.find('.btn-outline').trigger('click')
+//     expect(wrapper.emitted().hide.length).toBe(2)
+//   })
+//   test('testing submit emit', async () => {
+//     const wrapper = await factory()
+//
+//     await wrapper.find('.btn-primary').trigger('click')
+//     expect(wrapper.emitted().submit.length).toBe(1)
+//   })
+// })

package/components/atoms/modal/Modal.vue

@@ -0,0 +1,241 @@
+<template>
+  <div
+    v-if="props.show"
+    :class="[
+      'modal',
+      {
+        'without-footer-padding': props.withoutFooterPadding,
+      },
+    ]"
+  >
+    <div
+      :class="['modal-dialog', props.sizeClass]"
+      :style="{ width: props.width, height: props.height }"
+    >
+      <div class="modal-content">
+        <div class="modal-header">
+          <slot name="modalHeader">
+            <div class="flex-align-center">
+              <h3 class="modal-title">
+                {{ props.title }}
+              </h3>
+              <span v-if="props.secondTitle" class="separator" />
+              <h4 v-if="props.secondTitle" class="secondary-title">
+                {{ props.secondTitle }}
+              </h4>
+            </div>
+            <button
+              v-if="!props.isHideCloseIcon"
+              :id="`${props.testId}-close-icon`"
+              class="close"
+              @click="hide"
+            >
+              <atoms-the-icon class="close-icon" name="close" />
+            </button>
+          </slot>
+        </div>
+        <div class="modal-body">
+          <slot name="modalBody" />
+        </div>
+        <div class="modal-footer">
+          <slot name="modalFooter">
+            <button
+              :id="`${props.testId}-cancel-button`"
+              class="btn btn-outline"
+              @click="hide"
+            >
+              {{ localization.cancel }}
+            </button>
+            <button
+              :id="`${props.testId}-apply-button`"
+              class="btn btn-primary"
+              :class="props.loading && 'modal-dialog__loader'"
+              :disabled="props.disabledSubmit"
+              @click="submit"
+            >
+              <atoms-loader-pre-loader
+                v-if="props.loading"
+                id="loader"
+                class="absolute-center button__loading"
+                :show="props.loading"
+              />
+              <span v-else>
+                {{ localization.ok }}
+              </span>
+            </button>
+          </slot>
+        </div>
+        <div v-show="props.modalLoading" class="loader">
+          <i class="fa clr-tree-node-caret-icon spinner" />
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    title: string
+    testId?: string
+    secondTitle?: string
+    width?: string
+    height?: string
+    disabledSubmit?: boolean
+    submitText?: string
+    loading?: boolean
+    modalLoading?: boolean
+    isHideCloseIcon?: boolean
+    withoutFooterPadding?: boolean
+    sizeClass?: string
+  }>(),
+  {
+    testId: 'ui-modal',
+    width: '',
+    height: '',
+    submitText: '',
+    secondTitle: '',
+    withoutFooterPadding: false,
+    sizeClass: '',
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'submit'): void
+  (event: 'hide'): void
+}>()
+const localization = computed(() => useLocal())
+const hide = (): void => {
+  emits('hide')
+}
+
+const submit = (): void => {
+  emits('submit')
+}
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  overflow-y: auto;
+
+  &.without-footer-padding {
+    .modal-dialog .modal-content .modal-footer {
+      padding: 0;
+    }
+  }
+
+  .modal-dialog {
+    .modal-content {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      background-color: var(--modal-bg-color);
+      box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+      background-clip: padding-box;
+      padding: 24px;
+      height: 100%;
+      -webkit-animation-name: animateTop;
+      -webkit-animation-duration: 0.4s;
+      animation-name: animateTop;
+      animation-duration: 0.4s;
+
+      .modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        .modal-title {
+          color: var(--main-color-mode);
+        }
+        .secondary-title {
+          color: var(--modal-secondary-title);
+        }
+        .separator {
+          content: '';
+          border-left: 1px solid #ccc;
+          margin: 0 18px;
+          height: 22px;
+        }
+
+        .close-icon {
+          fill: var(--close-icon);
+          width: 24px;
+          height: 24px;
+        }
+      }
+      .modal-footer {
+        margin-top: auto;
+        .btn:last-child {
+          margin-left: 5px;
+        }
+      }
+    }
+    &__loader {
+      position: relative;
+      pointer-events: none;
+    }
+  }
+
+  .modal-backdrop {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+  .button {
+    &__loading {
+      display: flex;
+      :deep(.spinner) {
+        width: 25px;
+        height: 25px;
+        min-width: 25px;
+        min-height: 25px;
+      }
+    }
+  }
+}
+:deep(.view-settings-modal__container.without-footer-padding) {
+  .modal-dialog .modal-content .modal-footer {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.loader {
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  .spinner {
+    left: unset;
+  }
+}
+</style>
+<style>
+:root {
+  --modal-secondary-title: #565656;
+}
+:root.dark-theme {
+  --modal-secondary-title: #e9ecef;
+}
+</style>

package/components/atoms/modal/bySteps/BySteps.spec.ts

@@ -0,0 +1,66 @@
+// import { describe, test, expect, vi } from 'vitest'
+// import { mount } from '@vue/test-utils'
+// import ModalBySteps from './ModalBySteps.vue'
+// import VerticalStepItems from '~/types/common/step/verticalStepItems'
+//
+// vi.stubGlobal('useLocal', () => {
+//   return {
+//     loading: 'Loading'
+//   }
+// })
+//
+// const stepItems: VerticalStepItems[] = [
+//   { text: 'step 1', disabled: false, complete: false },
+//   { text: 'step 2', disabled: true, complete: false }
+// ]
+//
+// const factory = () => {
+//   return mount(ModalBySteps, {
+//     props: {
+//       show: true,
+//       title: 'title',
+//       secondTitle: 'second title',
+//       stepPosition: 0,
+//       stepItems
+//     }
+//   })
+// }
+//
+// describe('ModalBySteps.vue', () => {
+//   test('testing show prop', async () => {
+//     const wrapper = await factory()
+//
+//     expect(wrapper.find('.modal').exists()).toBe(true)
+//
+//     await wrapper.setProps({ show: false })
+//     expect(wrapper.find('.modal').exists()).toBe(false)
+//   })
+//   test('testing title and secondTitle props', async () => {
+//     const wrapper = await factory()
+//
+//     expect(wrapper.find('.clr-wizard-title').text()).toBe('title')
+//     expect(wrapper.find('.modal-title').text()).toBe('second title')
+//   })
+//   test('testing hide emit', async () => {
+//     const wrapper = await factory()
+//
+//     await wrapper.find('.close').trigger('click')
+//     expect(wrapper.emitted().hide.length).toBe(1)
+//
+//     await wrapper.find('.btn-link').trigger('click')
+//     expect(wrapper.emitted().hide.length).toBe(2)
+//   })
+//   test('testing next, back and finish emits', async () => {
+//     const wrapper = await factory()
+//
+//     await wrapper.find('.btn-primary').trigger('click')
+//     expect(wrapper.emitted().next.length).toBe(1)
+//
+//     await wrapper.setProps({ stepPosition: 1 })
+//     await wrapper.find('.btn-success').trigger('click')
+//     expect(wrapper.emitted().finish.length).toBe(1)
+//
+//     await wrapper.find('.btn-outline').trigger('click')
+//     expect(wrapper.emitted().back.length).toBe(1)
+//   })
+// })