bfg-common 1.4.591 → 1.4.592

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

@@ -1,160 +1,160 @@
-<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 = (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>