bfg-common 1.5.111 → 1.5.113

package/components/common/split/vertical/Vertical.vue

@@ -1,160 +1,162 @@
-<template>
-  <common-split-vertical-new
-    v-if="isNewView"
-    v-model:is-grab="isGrab"
-    v-model:is-focus="isFocus"
-    :element-id="elementId"
-    :is-drag="isDrag"
-    :top-panel-style="topPanelStyle"
-    :bottom-panel-style="bottomPanelStyle"
-  >
-    <template #firstPanel>
-      <slot name="firstPanel" />
-    </template>
-
-    <template #secondPanel>
-      <slot name="secondPanel" />
-    </template>
-  </common-split-vertical-new>
-
-  <common-split-vertical-old
-    v-else
-    v-model:is-grab="isGrab"
-    v-model:is-focus="isFocus"
-    :element-id="elementId"
-    :is-drag="isDrag"
-    :top-panel-style="topPanelStyle"
-    :bottom-panel-style="bottomPanelStyle"
-  >
-    <template #firstPanel>
-      <slot name="firstPanel" />
-    </template>
-
-    <template #secondPanel>
-      <slot name="secondPanel" />
-    </template>
-  </common-split-vertical-old>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_SplitVerticalStyle } from '~/components/common/split/vertical/lib/models/interfaces'
-
-const props = withDefaults(defineProps<{
-  parentElementSelector: string
-  topPanelHForce?: string
-  topPanelH?: number
-  topPanelMinHeight?: number
-  bottomPanelMinHeight?: number
-}>(), {
-  topPanelMinHeight: 200, // 200px
-  bottomPanelMinHeight: 200, // 200px
-  topPanelHForce: '',
-  topPanelH: undefined,
-})
-const emits = defineEmits<{
-  (event: 'dragend', value: number): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const topPanelStyle = computed<UI_I_SplitVerticalStyle>(() => {
-  let height = `calc(${topPanelH.value}% - 1.5px)`
-  if (props.topPanelHForce) {
-    height = props.topPanelHForce
-  }
-  return { height }
-})
-
-const bottomPanelStyle = computed<UI_I_SplitVerticalStyle>(() => {
-  let height = `calc(${100 - topPanelH.value}% - 1.5px)`
-
-  return { height }
-})
-
-const isGrab = ref<boolean>(false)
-const isFocus = ref<boolean>(false)
-const isDrag = ref<boolean>(false)
-const topPanelH = ref<number>(80) // 80%
-watch(
-  () => props.topPanelH,
-  (newValue) => {
-    if (newValue === undefined) return
-    topPanelH.value = newValue
-  },
-  { immediate: true }
-)
-
-let parentElem: HTMLDivElement | null
-const mouseup = (): void => {
-  if (!isGrab.value) {
-    return
-  }
-
-  isGrab.value = false
-  isDrag.value = false
-
-  emits('dragend', topPanelH.value)
-}
-let mousemove = (e: MouseEvent): void => {
-  if (!isGrab.value) {
-    return
-  }
-
-  e.preventDefault()
-  isDrag.value = true
-
-  doDrag(e.clientY)
-}
-mousemove = useThrottle(mousemove)
-
-const doDrag = (clientY: number): void => {
-  const parentElemTop = parentElem?.getBoundingClientRect().top || 0
-  const parentHeight = parentElem?.clientHeight || 0
-  const onePercent = parentHeight / 100
-
-  const topLimit = clientY <= props.topPanelMinHeight + parentElemTop + 1.5
-  const bottomLimit =
-    clientY >= parentHeight + parentElemTop - props.bottomPanelMinHeight - 1.5
-
-  if (topLimit || bottomLimit) {
-    return
-  }
-
-  topPanelH.value = (clientY - parentElemTop) / onePercent
-}
-
-const elementId = `vertical${useUniqueId()}`
-const keydown = (e: KeyboardEvent): void => {
-  if (!isFocus.value) return
-
-  const gutter = document.getElementById(`gutter-${elementId}`)
-
-  if (!gutter) return
-
-  const gutterTop = ~~(gutter.getBoundingClientRect().top + 1.5)
-
-  if (e.keyCode === 40) {
-    doDrag(gutterTop + 10)
-  }
-  if (e.keyCode === 38) {
-    doDrag(gutterTop - 10)
-  }
-}
-
-onMounted(() => {
-  parentElem = document.querySelector(props.parentElementSelector)
-
-  window.addEventListener('mousemove', mousemove)
-  window.addEventListener('mouseup', mouseup)
-  window.addEventListener('keydown', keydown)
-})
-onUnmounted(() => {
-  window.removeEventListener('mouseup', mouseup)
-  window.removeEventListener('mousemove', mousemove)
-  window.removeEventListener('keydown', keydown)
-})
-</script>
-
-<style scoped lang="scss">
-</style>
+<template>
+  <common-split-vertical-new
+    v-if="isNewView"
+    v-model:is-grab="isGrab"
+    v-model:is-focus="isFocus"
+    :element-id="elementId"
+    :is-drag="isDrag"
+    :top-panel-style="topPanelStyle"
+    :bottom-panel-style="bottomPanelStyle"
+  >
+    <template #firstPanel>
+      <slot name="firstPanel" />
+    </template>
+
+    <template #secondPanel>
+      <slot name="secondPanel" />
+    </template>
+  </common-split-vertical-new>
+
+  <common-split-vertical-old
+    v-else
+    v-model:is-grab="isGrab"
+    v-model:is-focus="isFocus"
+    :element-id="elementId"
+    :is-drag="isDrag"
+    :top-panel-style="topPanelStyle"
+    :bottom-panel-style="bottomPanelStyle"
+  >
+    <template #firstPanel>
+      <slot name="firstPanel" />
+    </template>
+
+    <template #secondPanel>
+      <slot name="secondPanel" />
+    </template>
+  </common-split-vertical-old>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_SplitVerticalStyle } from '~/components/common/split/vertical/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    parentElementSelector: string
+    topPanelHForce?: string
+    topPanelH?: number
+    topPanelMinHeight?: number
+    bottomPanelMinHeight?: number
+  }>(),
+  {
+    topPanelMinHeight: 200, // 200px
+    bottomPanelMinHeight: 200, // 200px
+    topPanelHForce: '',
+    topPanelH: undefined,
+  }
+)
+const emits = defineEmits<{
+  (event: 'dragend', value: number): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const topPanelStyle = computed<UI_I_SplitVerticalStyle>(() => {
+  let height = `calc(${topPanelH.value}% - 1.5px)`
+  if (props.topPanelHForce) {
+    height = props.topPanelHForce
+  }
+  return { height }
+})
+
+const bottomPanelStyle = computed<UI_I_SplitVerticalStyle>(() => {
+  let height = `calc(${100 - topPanelH.value}% - 1.5px)`
+
+  return { height }
+})
+
+const isGrab = ref<boolean>(false)
+const isFocus = ref<boolean>(false)
+const isDrag = ref<boolean>(false)
+const topPanelH = ref<number>(80) // 80%
+watch(
+  () => props.topPanelH,
+  (newValue) => {
+    if (newValue === undefined) return
+    topPanelH.value = newValue
+  },
+  { immediate: true }
+)
+
+let parentElem: HTMLDivElement | null
+const mouseup = (): void => {
+  if (!isGrab.value) {
+    return
+  }
+
+  isGrab.value = false
+  isDrag.value = false
+
+  emits('dragend', topPanelH.value)
+}
+let mousemove = (event: MouseEvent): void => {
+  if (!isGrab.value) {
+    return
+  }
+
+  event.preventDefault()
+  isDrag.value = true
+
+  doDrag(event.clientY)
+}
+mousemove = useThrottle(mousemove)
+
+const doDrag = (clientY: number): void => {
+  const parentElemTop = parentElem?.getBoundingClientRect().top || 0
+  const parentHeight = parentElem?.clientHeight || 0
+  const onePercent = parentHeight / 100
+
+  const topLimit = clientY <= props.topPanelMinHeight + parentElemTop + 1.5
+  const bottomLimit =
+    clientY >= parentHeight + parentElemTop - props.bottomPanelMinHeight - 1.5
+
+  if (topLimit || bottomLimit) {
+    return
+  }
+
+  topPanelH.value = (clientY - parentElemTop) / onePercent
+}
+
+const elementId = `vertical${useUniqueId()}`
+const keydown = (event: KeyboardEvent): void => {
+  if (!isFocus.value) return
+
+  const gutter = document.getElementById(`gutter-${elementId}`)
+
+  if (!gutter) return
+
+  const gutterTop = ~~(gutter.getBoundingClientRect().top + 1.5)
+
+  if (event.keyCode === 40) {
+    doDrag(gutterTop + 10)
+  }
+  if (event.keyCode === 38) {
+    doDrag(gutterTop - 10)
+  }
+}
+
+onMounted(() => {
+  parentElem = document.querySelector(props.parentElementSelector)
+
+  window.addEventListener('mousemove', mousemove)
+  window.addEventListener('mouseup', mouseup)
+  window.addEventListener('keydown', keydown)
+})
+onUnmounted(() => {
+  window.removeEventListener('mouseup', mouseup)
+  window.removeEventListener('mousemove', mousemove)
+  window.removeEventListener('keydown', keydown)
+})
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/split/vertical/VerticalNew.vue

@@ -1,6 +1,9 @@
 <template>
-  <div :id="props.elementId" :class="['fill-parent vertical', { dragging: props.isDrag }]">
-    <div class="vui-horizontal-panel firstPanel" :style="props.topPanelStyle">
+  <div
+    :id="props.elementId"
+    :class="['fill-parent vertical', { dragging: props.isDrag }]"
+  >
+    <div :style="props.topPanelStyle" class="vui-horizontal-panel firstPanel">
       <div class="vui-horizontal-panel sec-nav-container">
         <slot name="firstPanel" />
       </div>
@@ -17,7 +20,7 @@
       <div class="gutter-vertical-handler"></div>
     </div>
 
-    <div class="secondPanel bottom" :style="props.bottomPanelStyle">
+    <div :style="props.bottomPanelStyle" class="secondPanel bottom">
       <slot name="secondPanel" />
     </div>
   </div>
@@ -37,12 +40,12 @@ const props = defineProps<{
 
 <style>
 :root {
-  --gutter-handler-active-bg-color: #FFFFFFCC;
-  --second-panel-box-shadow: 0 4px 20px 0 #0000001F;
+  --gutter-handler-active-bg-color: #ffffffcc;
+  --second-panel-box-shadow: 0 4px 20px 0 #0000001f;
 }
 :root.dark-theme {
-  --gutter-handler-active-bg-color: #213444CC;
-  --second-panel-box-shadow: 0 4px 20px 0 #0000001F, 0 -1px 12px 0 #00000014;
+  --gutter-handler-active-bg-color: #213444cc;
+  --second-panel-box-shadow: 0 4px 20px 0 #0000001f, 0 -1px 12px 0 #00000014;
 }
 </style>
 

package/components/common/split/vertical/VerticalOld.vue

@@ -1,18 +1,21 @@
 <template>
-  <div :id="props.elementId" :class="['fill-parent vertical', { dragging: props.isDrag }]">
-    <div class="vui-horizontal-panel firstPanel" :style="props.topPanelStyle">
+  <div
+    :id="props.elementId"
+    :class="['fill-parent vertical', { dragging: props.isDrag }]"
+  >
+    <div :style="props.topPanelStyle" class="vui-horizontal-panel firstPanel">
       <div class="vui-horizontal-panel sec-nav-container">
         <slot name="firstPanel" />
       </div>
     </div>
 
     <div
-        :id="`gutter-${props.elementId}`"
-        class="gutter gutter-vertical"
-        tabindex="0"
-        @mousedown="isGrab = true"
-        @focus="isFocus = true"
-        @blur="isFocus = false"
+      :id="`gutter-${props.elementId}`"
+      class="gutter gutter-vertical"
+      tabindex="0"
+      @mousedown="isGrab = true"
+      @focus="isFocus = true"
+      @blur="isFocus = false"
     >
       <div class="gutter-vertical-handler"></div>
     </div>

package/components/common/summary/notification/NotificationOld.vue

@@ -1,9 +1,9 @@
 <template>
   <atoms-alert
     v-show="props.notifications.length"
+    :items="props.notifications"
     test-id="summary-notification"
     status="alert-warning"
-    :items="props.notifications"
     hide-close-icon
     class="notification"
   >
@@ -29,10 +29,11 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
 const props = defineProps<{
   notifications: string[]
 }>()
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>

package/components/common/titleBar/titleBarNew/notification/Notification.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="notification-content">
     <ui-button
+      :class="{ active: isShowNotificationDropdown }"
       test-id="notification-toggle"
       is-without-sizes
       is-without-height
       variant="text"
-      :class="{ active: isShowNotificationDropdown }"
       @click="isShowNotificationDropdown = !isShowNotificationDropdown"
     >
       <ui-icon name="notification" width="18" height="18" />
     </ui-button>
     <ui-popup-window
       v-model="isShowNotificationDropdown"
+      :margin-between-trigger="8"
       elem-id="notification-toggle"
       width="382px"
       max-height="410px"
-      :margin-between-trigger="8"
     >
       <div class="notification-body">
         <div class="top-content grid items-center">
@@ -32,8 +32,8 @@
         <div class="tabs-content">
           <ui-tabs
             v-model="selectedTab"
-            test-id="notifications-tab-list"
             :tabs="tabs"
+            test-id="notifications-tab-list"
             type="underline"
           >
             <template #default="{ item }">
@@ -77,8 +77,8 @@
                 @click="onToggleActionDropdown(key)"
               >
                 <atoms-the-icon
-                  name="ellipsis-vertical"
                   :class="['action-icon', { active: actionsIsShow[key] }]"
+                  name="ellipsis-vertical"
                 />
               </ui-button>
               <template v-if="item.actions.length">