bfg-common 1.4.582 → 1.4.583

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

@@ -1,223 +1,160 @@
-<template>
-  <div :id="elementId" :class="['fill-parent vertical', { dragging: isDrag }]">
-    <div class="vui-horizontal-panel firstPanel" :style="topPanelStyle">
-      <div class="vui-horizontal-panel sec-nav-container">
-        <slot name="firstPanel" />
-      </div>
-    </div>
-
-    <div
-      :id="`gutter-${elementId}`"
-      class="gutter gutter-vertical"
-      tabindex="0"
-      @mousedown="isGrab = true"
-      @focus="isFocus = true"
-      @blur="isFocus = false"
-    >
-      <div class="gutter-vertical-handler"></div>
-    </div>
-
-    <div class="secondPanel bottom" :style="bottomPanelStyle">
-      <slot name="secondPanel" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_SplitVerticalStyle } from '~/components/common/split/vertical/lib/models/interfaces'
-
-interface UI_I_SplitVerticalProps {
-  parentElementSelector: string
-  topPanelHForce?: string
-  topPanelH?: number
-  topPanelMinHeight?: number
-  bottomPanelMinHeight?: number
-}
-const props = withDefaults(defineProps<UI_I_SplitVerticalProps>(), {
-  topPanelMinHeight: 200, // 200px
-  bottomPanelMinHeight: 200, // 200px
-  topPanelHForce: '',
-  topPanelH: undefined,
-})
-const emits = defineEmits<{
-  (event: 'dragend', value: number): void
-}>()
-
-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">
-.fill-parent {
-  &.dragging {
-    .gutter-vertical.gutter {
-      background-color: var(--gutter-active-bg-color);
-    }
-  }
-
-  .vui-horizontal-panel.firstPanel {
-    max-height: calc(100% - 36px);
-    height: calc(100vh - 36px);
-
-    .sec-nav-container {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-  }
-
-  .gutter-vertical {
-    position: relative;
-    //min-height: 3px; // for old
-    min-height: 4px; // for new
-    background-color: var(--gutter-bg-color);
-    transition-delay: 0.25s;
-    transition-duration: 0.25s;
-
-    &-handler {
-      position: absolute;
-      width: 100%;
-      height: 10px;
-      background: transparent;
-      left: 0;
-      top: -3.5px;
-      z-index: 2;
-    }
-
-    &:focus {
-      background-color: var(--gutter-active-bg-color);
-      outline: none;
-    }
-
-    &:hover {
-      background-color: var(--gutter-hover-bg-color);
-      cursor: row-resize;
-
-      &:before {
-        // for old
-        //background-color: hsla(0, 0%, 100%, 0.5);
-        //box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
-
-        // for new
-        background-color: rgba(255, 255, 255, 0.8)
-      }
-    }
-
-    &:before {
-      content: '';
-      position: relative;
-      display: block;
-      //background: rgba(0, 0, 0, 0.1); // for old
-      background: #9da6ad;
-      transition-delay: 0.25s;
-      transition-duration: 0.25s;
-      width: 24px;
-      height: 100%;
-      left: calc(50% - 12px);
-    }
-  }
-  .secondPanel {
-    height: auto;
-    overflow: hidden;
-    flex: 1;
-
-    // for new
-    box-shadow: 0 4px 20px 0 #0000001F;
-    z-index: 1;
-  }
-}
-</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>

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

@@ -0,0 +1,123 @@
+<template>
+  <div :id="props.elementId" :class="['fill-parent vertical', { dragging: props.isDrag }]">
+    <div class="vui-horizontal-panel firstPanel" :style="props.topPanelStyle">
+      <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"
+    >
+      <div class="gutter-vertical-handler"></div>
+    </div>
+
+    <div class="secondPanel bottom" :style="props.bottomPanelStyle">
+      <slot name="secondPanel" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const isGrab = defineModel<boolean>('isGrab')
+const isFocus = defineModel<boolean>('isFocus')
+
+const props = defineProps<{
+  elementId: number
+  isDrag: number
+  topPanelStyle: number
+  bottomPanelStyle: number
+}>()
+</script>
+
+<style>
+:root {
+  --gutter-handler-bg-color: #9da6ad;
+  --gutter-handler-active-bg-color: #FFFFFFCC;
+  --second-panel-box-shadow: 0 4px 20px 0 #0000001F, 0 -1px 12px 0 #00000014;
+}
+:root.dark-theme {
+  --gutter-handler-bg-color: #9DA6AD52;
+  --gutter-handler-active-bg-color: #213444CC;
+  --second-panel-box-shadow: 0 4px 20px 0 #0000001F;
+}
+</style>
+
+<style scoped lang="scss">
+.fill-parent {
+  &.dragging {
+    .gutter-vertical.gutter {
+      background-color: var(--gutter-active-bg-color);
+    }
+  }
+
+  .vui-horizontal-panel.firstPanel {
+    max-height: calc(100% - 36px);
+    height: calc(100vh - 36px);
+
+    .sec-nav-container {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  .gutter-vertical {
+    position: relative;
+    min-height: 4px;
+    background-color: var(--gutter-bg-color);
+    transition-delay: 0.25s;
+    transition-duration: 0.25s;
+
+    &-handler {
+      position: absolute;
+      width: 100%;
+      height: 10px;
+      background: transparent;
+      left: 0;
+      top: -3.5px;
+      z-index: 2;
+    }
+
+    &:focus {
+      background-color: var(--gutter-active-bg-color);
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--gutter-hover-bg-color);
+      cursor: row-resize;
+
+      &:before {
+        background-color: var(--gutter-handler-active-bg-color);
+      }
+    }
+
+    &:before {
+      content: '';
+      position: relative;
+      display: block;
+      background: var(--gutter-handler-bg-color);
+      transition-delay: 0.25s;
+      transition-duration: 0.25s;
+      width: 24px;
+      height: 2px;
+      left: calc(50% - 12px);
+      top: calc(50% - 1px);
+      border-radius: 4px;
+    }
+  }
+  .secondPanel {
+    height: auto;
+    overflow: hidden;
+    flex: 1;
+    box-shadow: var(--second-panel-box-shadow);
+    z-index: 1;
+  }
+}
+</style>

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

@@ -0,0 +1,108 @@
+<template>
+  <div :id="props.elementId" :class="['fill-parent vertical', { dragging: props.isDrag }]">
+    <div class="vui-horizontal-panel firstPanel" :style="props.topPanelStyle">
+      <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"
+    >
+      <div class="gutter-vertical-handler"></div>
+    </div>
+
+    <div class="secondPanel bottom" :style="props.bottomPanelStyle">
+      <slot name="secondPanel" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const isGrab = defineModel<boolean>('isGrab')
+const isFocus = defineModel<boolean>('isFocus')
+
+const props = defineProps<{
+  elementId: number
+  isDrag: number
+  topPanelStyle: number
+  bottomPanelStyle: number
+}>()
+</script>
+
+<style scoped lang="scss">
+.fill-parent {
+  &.dragging {
+    .gutter-vertical.gutter {
+      background-color: var(--gutter-active-bg-color);
+    }
+  }
+
+  .vui-horizontal-panel.firstPanel {
+    max-height: calc(100% - 36px);
+    height: calc(100vh - 36px);
+
+    .sec-nav-container {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  .gutter-vertical {
+    position: relative;
+    min-height: 3px;
+    background-color: var(--gutter-bg-color);
+    transition-delay: 0.25s;
+    transition-duration: 0.25s;
+
+    &-handler {
+      position: absolute;
+      width: 100%;
+      height: 10px;
+      background: transparent;
+      left: 0;
+      top: -3.5px;
+      z-index: 2;
+    }
+
+    &:focus {
+      background-color: var(--gutter-active-bg-color);
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--gutter-hover-bg-color);
+      cursor: row-resize;
+
+      &:before {
+        background-color: hsla(0, 0%, 100%, 0.5);
+        box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
+      }
+    }
+
+    &:before {
+      content: '';
+      position: relative;
+      display: block;
+      background: rgba(0, 0, 0, 0.1);
+      background: #9da6ad;
+      transition-delay: 0.25s;
+      transition-duration: 0.25s;
+      width: 24px;
+      height: 100%;
+      left: calc(50% - 12px);
+    }
+  }
+  .secondPanel {
+    height: auto;
+    overflow: hidden;
+    flex: 1;
+  }
+}
+</style>