bfg-common 1.4.820 → 1.4.822

package/components/atoms/input/Search.vue

@@ -1,16 +1,16 @@
-<template>
-  <div class="search-input">
-    <div class="flex-header-container" />
-  </div>
-</template>
-
-<script></script>
-
-<style scoped lang="scss">
-.flex-header-container {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-}
-</style>
+<template>
+  <div class="search-input">
+    <div class="flex-header-container" />
+  </div>
+</template>
+
+<script></script>
+
+<style scoped lang="scss">
+.flex-header-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+}
+</style>

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

@@ -1,14 +1,14 @@
-export interface UI_I_VerticalStepItem {
-  text: string
-  disabled: boolean
-  complete: boolean
-  description?: string
-  testId?: string
-}
-
-export interface UI_I_OptionItem {
-  text: string
-  value: any
-  disabled?: boolean
-  testId?: string
-}
+export interface UI_I_VerticalStepItem {
+  text: string
+  disabled: boolean
+  complete: boolean
+  description?: string
+  testId?: string
+}
+
+export interface UI_I_OptionItem {
+  text: string
+  value: any
+  disabled?: boolean
+  testId?: string
+}

package/components/atoms/list/SelectList.vue

@@ -1,63 +1,63 @@
-<template>
-  <select
-    :id="`${props.testId}-select`"
-    v-model="selectedItem"
-    :data-id="props.testId"
-    size="15"
-    class="list"
-  >
-    <option
-      v-for="(item, key) in props.items"
-      :key="key"
-      :disabled="item.disabled"
-      class="item"
-      :value="item.value"
-    >
-      <slot :name="`item${key}`">
-        {{ item.text }}
-      </slot>
-    </option>
-  </select>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_OptionItem[]
-    modelValue: string
-    testId?: string
-  }>(),
-  { testId: 'ui-select-list' }
-)
-const emits = defineEmits<{
-  (event: 'update:model-value', value: string): void
-}>()
-
-const selectedItem = computed<string>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.list {
-  outline: none;
-
-  .item {
-    padding: 3px 6px;
-    color: #000;
-
-    &:disabled {
-      color: #565656;
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-  }
-}
-</style>
+<template>
+  <select
+    :id="`${props.testId}-select`"
+    v-model="selectedItem"
+    :data-id="props.testId"
+    size="15"
+    class="list"
+  >
+    <option
+      v-for="(item, key) in props.items"
+      :key="key"
+      :disabled="item.disabled"
+      class="item"
+      :value="item.value"
+    >
+      <slot :name="`item${key}`">
+        {{ item.text }}
+      </slot>
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_OptionItem[]
+    modelValue: string
+    testId?: string
+  }>(),
+  { testId: 'ui-select-list' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string): void
+}>()
+
+const selectedItem = computed<string>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.list {
+  outline: none;
+
+  .item {
+    padding: 3px 6px;
+    color: #000;
+
+    &:disabled {
+      color: #565656;
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+}
+</style>

package/components/atoms/list/SimpleList.vue

@@ -1,29 +1,29 @@
-<template>
-  <div class="list">
-    <div v-for="(item, key) in props.items" :key="key" class="item">
-      <slot :key="key" :item="item">
-        {{ item }}
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-const props = defineProps<{
-  items: any[]
-}>()
-</script>
-
-<style scoped lang="scss">
-.list {
-  background-color: var(--block-view-bg-color);
-  border-radius: 3px;
-  font-weight: 500;
-  border: 1px solid var(--global-border-color);
-
-  .item {
-    padding: 6px 12px;
-  }
-}
-</style>
+<template>
+  <div class="list">
+    <div v-for="(item, key) in props.items" :key="key" class="item">
+      <slot :key="key" :item="item">
+        {{ item }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps<{
+  items: any[]
+}>()
+</script>
+
+<style scoped lang="scss">
+.list {
+  background-color: var(--block-view-bg-color);
+  border-radius: 3px;
+  font-weight: 500;
+  border: 1px solid var(--global-border-color);
+
+  .item {
+    padding: 6px 12px;
+  }
+}
+</style>

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 type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
-
-const props = defineProps<{
-  items: any
-  grabItemKey: string
-}>()
-const emits = defineEmits<{
-  ( event: 'drop', value: UI_I_DropEvent ): void
-}>()
-
-const presentItems = computed(() => props.items)
-
-const dragDropItemGrab = computed(() => grabItem.value?.[props.grabItemKey])
-let dragDropItemGrabElem: HTMLElement
-
-const hoveredItemPosition = ref<number>(-1)
-const isGrab = ref<boolean>(false)
-const grabItem = ref(null)
-const grab = (item: any, event: Event): void => {
-  isGrab.value = true
-  grabItem.value = item
-
-  setDragDropItemGrabElemPosition(event)
-}
-
-let setDragDropItemGrabElemPosition = (event: any): void => {
-  if (!dragDropItemGrabElem) return
-
-  dragDropItemGrabElem.style.top = `${event.clientY + 2}px`
-  dragDropItemGrabElem.style.left = `${event.clientX + 2}px`
-}
-setDragDropItemGrabElemPosition = useThrottle(setDragDropItemGrabElemPosition)
-
-const windowMousemove = (event: Event): void => {
-  if (!isGrab.value) { return }
-
-  setDragDropItemGrabElemPosition(event)
-}
-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 type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
+
+const props = defineProps<{
+  items: any
+  grabItemKey: string
+}>()
+const emits = defineEmits<{
+  ( event: 'drop', value: UI_I_DropEvent ): void
+}>()
+
+const presentItems = computed(() => props.items)
+
+const dragDropItemGrab = computed(() => grabItem.value?.[props.grabItemKey])
+let dragDropItemGrabElem: HTMLElement
+
+const hoveredItemPosition = ref<number>(-1)
+const isGrab = ref<boolean>(false)
+const grabItem = ref(null)
+const grab = (item: any, event: Event): void => {
+  isGrab.value = true
+  grabItem.value = item
+
+  setDragDropItemGrabElemPosition(event)
+}
+
+let setDragDropItemGrabElemPosition = (event: any): void => {
+  if (!dragDropItemGrabElem) return
+
+  dragDropItemGrabElem.style.top = `${event.clientY + 2}px`
+  dragDropItemGrabElem.style.left = `${event.clientX + 2}px`
+}
+setDragDropItemGrabElemPosition = useThrottle(setDragDropItemGrabElemPosition)
+
+const windowMousemove = (event: Event): void => {
+  if (!isGrab.value) { return }
+
+  setDragDropItemGrabElemPosition(event)
+}
+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/lib/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,27 +1,27 @@
-<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,30 +1,30 @@
-<template>
-  <div class="loader"><div :data-id="props.testId" class="spinner"></div></div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  testId: string
-}>()
-</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 :data-id="props.testId" class="spinner"></div></div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  testId: string
+}>()
+</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>