bfg-common 1.0.21 → 1.0.22

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

@@ -1,139 +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>
+<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

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

package/components/atoms/loader/BarLoader.vue

@@ -1,21 +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>
+<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

@@ -1,26 +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>
+<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

@@ -1,34 +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>
+<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

@@ -1,24 +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()
-  })
-})
+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

@@ -1,55 +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)
-//   })
-// })
+// 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)
+//   })
+// })