bfg-common 1.4.574 → 1.4.576

package/components/common/split/horizontal/HorizontalNew.vue

@@ -1,331 +1,354 @@
-<template>
-  <!--  TODO нужно объеденить с компонентой Horizontal.vue-->
-  <div
-    :id="elementId"
-    :class="['fill-parent horizontal', { dragging: isDrag }]"
-  >
-    <div class="firstPanel" :style="leftPanelStyle">
-      <div class="left-panel">
-        <div
-          v-if="props.showToggleButton"
-          :class="['panel-toggle', { collapsed: leftPanelCollapsed }]"
-        >
-          <div v-show="!leftPanelCollapsed">
-            <slot name="toggleContent" />
-          </div>
-          <button
-            id="collapse-left-panel-button"
-            data-id="collapse-left-panel-button"
-            class="btn-trigger"
-            @click="collapseLeftPanel"
-          >
-            <ui-icon-icon2 name="tree-arrow" />
-          </button>
-        </div>
-
-        <div v-show="!leftPanelCollapsed" class="navigator">
-          <slot name="firstPanel" />
-        </div>
-      </div>
-    </div>
-    <div
-      v-show="!leftPanelCollapsed"
-      :id="`gutter-${elementId}`"
-      class="gutter gutter-horizontal"
-      tabindex="0"
-      @mousedown="isGrab = true"
-      @focus="isFocus = true"
-      @blur="isFocus = false"
-    >
-      <div class="gutter-horizontal-handler"></div>
-    </div>
-
-    <div class="secondPanel right" :style="rightPanelStyle">
-      <slot name="secondPanel" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    parentElementSelector: string
-    leftPanelW?: number
-    leftPanelMinWidth?: number
-    rightPanelMinWidth?: number
-    showToggleButton?: boolean
-    hideLeftPanel?: boolean
-  }>(),
-  {
-    leftPanelMinWidth: 200, // 200px
-    rightPanelMinWidth: 200, // 200px
-    leftPanelW: undefined,
-    showToggleButton: true,
-    hideLeftPanel: false,
-  }
-)
-const emits = defineEmits<{
-  (event: 'dragend', value: number): void
-}>()
-
-const leftPanelStyle = computed(() => {
-  let width = `calc(${leftPanelWLocal.value}% - 1.5px)`
-  if (props.showToggleButton && leftPanelCollapsed.value) {
-    width = '20px'
-  }
-  if (props.hideLeftPanel && leftPanelCollapsed.value) width = '0px'
-
-  return { width }
-})
-const rightPanelStyle = computed(() => {
-  let width = `calc(${100 - leftPanelWLocal.value}% - 1.5px)`
-  if (props.showToggleButton && leftPanelCollapsed.value) {
-    width = 'calc(100% - 20px)'
-  }
-
-  if (props.hideLeftPanel && leftPanelCollapsed.value)
-    width = 'calc(100% - 0px)'
-
-  return { width }
-})
-const leftPanelCollapsed = ref<boolean>(false)
-const collapseLeftPanel = (): void => {
-  leftPanelCollapsed.value = !leftPanelCollapsed.value
-}
-
-const isGrab = ref<boolean>(false)
-const isFocus = ref<boolean>(false)
-const isDrag = ref<boolean>(false)
-const leftPanelWLocal = ref<number>(20) // 0%
-watch(
-  () => props.leftPanelW,
-  (newValue) => {
-    if (newValue === undefined) return
-    leftPanelWLocal.value = newValue
-  },
-  { immediate: true }
-)
-
-watch(
-  () => props.hideLeftPanel,
-  () => {
-    collapseLeftPanel()
-  }
-)
-
-let parentElem: HTMLElement | null
-const mouseup = (): void => {
-  if (!isGrab.value) {
-    return
-  }
-
-  isGrab.value = false
-  isDrag.value = false
-
-  emits('dragend', leftPanelWLocal.value)
-}
-
-let mousemove = (e: MouseEvent): void => {
-  if (!isGrab.value) return
-
-  e.preventDefault()
-  isDrag.value = true
-  doDrag(e.clientX)
-}
-mousemove = useThrottle(mousemove)
-
-const doDrag = (clientX: number): void => {
-  const parentElemRect = parentElem?.getBoundingClientRect()
-  const parentElemWidth = parentElemRect?.width || 0
-  const parentElemLeft = parentElemRect?.left || 0
-  const onePercent = parentElemWidth / 100
-  const layerX = clientX - parentElemLeft
-
-  const leftLimit = layerX <= props.leftPanelMinWidth
-  const rightLimit = parentElemWidth - layerX <= props.rightPanelMinWidth
-  if (leftLimit || rightLimit) return
-
-  leftPanelWLocal.value = layerX / onePercent
-}
-
-const elementId = `horizontal${useUniqueId()}`
-
-const keydown = (e: KeyboardEvent): void => {
-  if (!isFocus.value) return
-
-  const gutter = document.getElementById(`gutter-${elementId}`)
-
-  if (!gutter) return
-
-  const gutterLeft = ~~(gutter.getBoundingClientRect().left + 1.5)
-
-  if (e.keyCode === 39) {
-    doDrag(gutterLeft + 10)
-  }
-  if (e.keyCode === 37) {
-    doDrag(gutterLeft - 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>
-:root {
-  --split-horizontal-border-color: #e9ebed;
-}
-:root.dark-theme {
-  --split-horizontal-border-color: #e9ebed1f;
-}
-</style>
-
-<style scoped lang="scss">
-@import '@/assets/scss/common/mixins';
-.horizontal {
-  &.dragging {
-    .gutter-horizontal.gutter {
-      background-color: var(--gutter-active-bg-color);
-    }
-  }
-  .firstPanel {
-    width: calc(50% - 1.5px);
-    background-color: var(--center-pane-container);
-
-    .left-panel {
-      @include flex($dir: column);
-      width: 100%;
-      height: 100%;
-
-      .panel-toggle {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        min-height: 48px;
-        border-bottom: 1px solid var(--split-horizontal-border-color);
-        background-color: var(--horizontal-panel-bg-color);
-
-        &.collapsed {
-          border: none;
-
-          .btn-trigger {
-            border-radius: 0 4px 4px 0;
-
-            :deep(svg) {
-              transform: rotate(-90deg);
-            }
-          }
-        }
-
-        .btn-trigger {
-          @include flex($align: center, $just: center);
-          width: 16px;
-          height: 32px;
-          flex: 0 0 16px;
-          border: 0;
-          padding: 0;
-          margin: 0;
-          background-color: var(--trigger-bg-color);
-          color: var(--trigger-color);
-          outline: none;
-          cursor: pointer;
-          border-radius: 4px 0 0 4px;
-
-          :deep(svg) {
-            transform: rotate(90deg);
-          }
-        }
-      }
-      .navigator {
-        overflow: hidden;
-        height: 100%;
-
-        .panel-inner {
-          position: relative;
-          height: 100%;
-          background: var(--horizontal-panel-bg-color);
-          border-radius: 0;
-          border: 0;
-
-          &.inventory-tree {
-            padding-left: 4px;
-            padding-top: 6px;
-          }
-        }
-      }
-    }
-  }
-  .gutter-horizontal {
-    position: relative;
-    width: 3px;
-    background-color: var(--gutter-bg-color);
-    transition-delay: 0.25s;
-    transition-duration: 0.25s;
-
-    &-handler {
-      position: absolute;
-      height: 100%;
-      width: 10px;
-      background: transparent;
-      top: 0;
-      left: -3.5px;
-      z-index: 2;
-    }
-
-    &:focus {
-      background-color: var(--gutter-active-bg-color);
-      outline: none;
-    }
-
-    &:hover {
-      background-color: var(--gutter-hover-bg-color);
-      cursor: col-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);
-      transition-delay: 0.25s;
-      transition-duration: 0.25s;
-      width: 100%;
-      height: 25px;
-      top: calc(50% - 12.5px);
-    }
-  }
-  .secondPanel {
-    width: calc(50% - 1.5px);
-    &.right {
-      overflow: hidden;
-      height: 100%;
-    }
-  }
-}
-</style>
-
-<style>
-:root.is-new-view {
-  --horizontal-panel-bg-color: #fff;
-  --trigger-bg-color: #e9ebed;
-  --trigger-color: #213444;
-}
-:root.is-new-view.dark-theme {
-  --horizontal-panel-bg-color: #213444;
-  --trigger-bg-color: #314352;
-  --trigger-color: #e9ebed;
-}
-</style>
+<template>
+  <!--  TODO нужно объеденить с компонентой Horizontal.vue-->
+  <div
+    :id="elementId"
+    :class="['fill-parent horizontal', { dragging: isDrag }]"
+  >
+    <div class="firstPanel" :style="leftPanelStyle">
+      <div class="left-panel">
+        <div
+          v-if="props.showToggleButton"
+          :class="['panel-toggle', { collapsed: leftPanelCollapsed }]"
+        >
+          <div v-show="!leftPanelCollapsed">
+            <slot name="toggleContent" />
+          </div>
+          <button
+            id="collapse-left-panel-button"
+            data-id="collapse-left-panel-button"
+            class="btn-trigger"
+            @click="collapseLeftPanel"
+          >
+            <ui-icon-icon2 name="tree-arrow" />
+          </button>
+        </div>
+
+        <div v-show="!leftPanelCollapsed" class="navigator">
+          <slot name="firstPanel" />
+        </div>
+      </div>
+    </div>
+    <div
+      v-show="!leftPanelCollapsed"
+      :id="`gutter-${elementId}`"
+      class="gutter gutter-horizontal"
+      tabindex="0"
+      @mousedown="isGrab = true"
+      @focus="isFocus = true"
+      @blur="isFocus = false"
+    >
+      <div class="gutter-horizontal-handler"></div>
+    </div>
+
+    <div class="secondPanel right" :style="rightPanelStyle">
+      <slot name="secondPanel" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    parentElementSelector: string
+    leftPanelW?: number
+    leftPanelMinWidth?: number
+    rightPanelMinWidth?: number
+    showToggleButton?: boolean
+    hideLeftPanel?: boolean
+  }>(),
+  {
+    leftPanelMinWidth: 200, // 200px
+    rightPanelMinWidth: 200, // 200px
+    leftPanelW: undefined,
+    showToggleButton: true,
+    hideLeftPanel: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'dragend', value: number): void
+}>()
+
+const leftPanelStyle = computed(() => {
+  let width = `calc(${leftPanelWLocal.value}% - 1.5px)`
+  if (props.showToggleButton && leftPanelCollapsed.value) {
+    width = '20px'
+  }
+  if (props.hideLeftPanel && leftPanelCollapsed.value) width = '0px'
+
+  return { width }
+})
+const rightPanelStyle = computed(() => {
+  let width = `calc(${100 - leftPanelWLocal.value}% - 1.5px)`
+  if (props.showToggleButton && leftPanelCollapsed.value) {
+    width = 'calc(100% - 20px)'
+  }
+
+  if (props.hideLeftPanel && leftPanelCollapsed.value)
+    width = 'calc(100% - 0px)'
+
+  return { width }
+})
+const leftPanelCollapsed = ref<boolean>(false)
+const collapseLeftPanel = (): void => {
+  leftPanelCollapsed.value = !leftPanelCollapsed.value
+}
+
+const isGrab = ref<boolean>(false)
+const isFocus = ref<boolean>(false)
+const isDrag = ref<boolean>(false)
+const leftPanelWLocal = ref<number>(20) // 0%
+watch(
+  () => props.leftPanelW,
+  (newValue) => {
+    if (newValue === undefined) return
+    leftPanelWLocal.value = newValue
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.hideLeftPanel,
+  () => {
+    collapseLeftPanel()
+  }
+)
+
+let parentElem: HTMLElement | null
+const mouseup = (): void => {
+  if (!isGrab.value) {
+    return
+  }
+
+  isGrab.value = false
+  isDrag.value = false
+
+  emits('dragend', leftPanelWLocal.value)
+}
+
+let mousemove = (e: MouseEvent): void => {
+  if (!isGrab.value) return
+
+  e.preventDefault()
+  isDrag.value = true
+  doDrag(e.clientX)
+}
+mousemove = useThrottle(mousemove)
+
+const doDrag = (clientX: number): void => {
+  const parentElemRect = parentElem?.getBoundingClientRect()
+  const parentElemWidth = parentElemRect?.width || 0
+  const parentElemLeft = parentElemRect?.left || 0
+  const onePercent = parentElemWidth / 100
+  const layerX = clientX - parentElemLeft
+
+  const leftLimit = layerX <= props.leftPanelMinWidth
+  const rightLimit = parentElemWidth - layerX <= props.rightPanelMinWidth
+  if (leftLimit || rightLimit) return
+
+  leftPanelWLocal.value = layerX / onePercent
+}
+
+const elementId = `horizontal${useUniqueId()}`
+
+const keydown = (e: KeyboardEvent): void => {
+  if (!isFocus.value) return
+
+  const gutter = document.getElementById(`gutter-${elementId}`)
+
+  if (!gutter) return
+
+  const gutterLeft = ~~(gutter.getBoundingClientRect().left + 1.5)
+
+  if (e.keyCode === 39) {
+    doDrag(gutterLeft + 10)
+  }
+  if (e.keyCode === 37) {
+    doDrag(gutterLeft - 10)
+  }
+}
+const checkLeftPanelWidth = (): void => {
+  const firstElem = document.querySelector(
+    `${props.parentElementSelector} .firstPanel`
+  )
+
+  if (!firstElem) return
+
+  firstElem.style.minWidth = props.leftPanelMinWidth + 'px'
+}
+onMounted(() => {
+  parentElem = document.querySelector(props.parentElementSelector)
+
+  window.addEventListener('mousemove', mousemove)
+  window.addEventListener('mouseup', mouseup)
+  window.addEventListener('keydown', keydown)
+  checkLeftPanelWidth()
+})
+onUnmounted(() => {
+  window.removeEventListener('mouseup', mouseup)
+  window.removeEventListener('mousemove', mousemove)
+  window.removeEventListener('keydown', keydown)
+})
+</script>
+
+<style>
+:root {
+  --split-horizontal-border-color: #e9ebed;
+}
+:root.dark-theme {
+  --split-horizontal-border-color: #e9ebed1f;
+}
+</style>
+
+<style scoped lang="scss">
+@import '@/assets/scss/common/mixins';
+.horizontal {
+  &.dragging {
+    .gutter-horizontal.gutter {
+      background-color: var(--gutter-active-bg-color);
+
+      &:before {
+        background-color: var(--new-gutter-before-bg-color);
+      }
+    }
+  }
+  .firstPanel {
+    width: calc(50% - 1.5px);
+    background-color: var(--center-pane-container);
+
+    .left-panel {
+      @include flex($dir: column);
+      width: 100%;
+      height: 100%;
+
+      .panel-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 48px;
+        border-bottom: 1px solid var(--split-horizontal-border-color);
+        background-color: var(--horizontal-panel-bg-color);
+
+        &.collapsed {
+          border: none;
+
+          .btn-trigger {
+            border-radius: 0 4px 4px 0;
+
+            :deep(svg) {
+              transform: rotate(-90deg);
+            }
+          }
+        }
+
+        .btn-trigger {
+          @include flex($align: center, $just: center);
+          width: 16px;
+          height: 32px;
+          flex: 0 0 16px;
+          border: 0;
+          padding: 0;
+          margin: 0;
+          background-color: var(--trigger-bg-color);
+          color: var(--trigger-color);
+          outline: none;
+          cursor: pointer;
+          border-radius: 4px 0 0 4px;
+
+          :deep(svg) {
+            transform: rotate(90deg);
+          }
+        }
+      }
+      .navigator {
+        overflow: hidden;
+        height: 100%;
+
+        .panel-inner {
+          position: relative;
+          height: 100%;
+          background: var(--horizontal-panel-bg-color);
+          border-radius: 0;
+          border: 0;
+
+          &.inventory-tree {
+            padding-left: 4px;
+            padding-top: 6px;
+          }
+        }
+      }
+    }
+  }
+  .gutter-horizontal {
+    position: relative;
+    width: 4px;
+    //background-color: var(--gutter-bg-color);
+    background-color: var(--new-gutter-bg-color);
+    transition-delay: 0.25s;
+    transition-duration: 0.25s;
+
+    &-handler {
+      position: absolute;
+      height: 100%;
+      width: 10px;
+      background: transparent;
+      top: 0;
+      left: -3.5px;
+      z-index: 2;
+    }
+
+    &:focus {
+      background-color: var(--gutter-active-bg-color);
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--new-gutter-hover-bg-color);
+      cursor: col-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: var(--gutter-before-bg);
+      transition-delay: 0.25s;
+      transition-duration: 0.25s;
+      width: 2px;
+      margin-left: 1px;
+      border-radius: 4px;
+      height: 24px;
+      top: calc(50% - 12.5px);
+    }
+  }
+  .secondPanel {
+    width: calc(50% - 1.5px);
+    &.right {
+      overflow: hidden;
+      height: 100%;
+    }
+  }
+}
+</style>
+
+<style>
+:root.is-new-view {
+  --horizontal-panel-bg-color: #fff;
+  --trigger-bg-color: #e9ebed;
+  --trigger-color: #213444;
+  --new-gutter-bg-color: #e9ebed;
+  --new-gutter-hover-bg-color: #008fd6;
+  --new-gutter-before-bg-color: rgba(255, 255, 255, 0.8);
+}
+:root.is-new-view.dark-theme {
+  --horizontal-panel-bg-color: #213444;
+  --trigger-bg-color: #314352;
+  --trigger-color: #e9ebed;
+  --new-gutter-bg-color: #394a58;
+  --new-gutter-hover-bg-color: #2ba2de;
+  --new-gutter-before-bg-color: rgba(33, 52, 68, 0.8);
+}
+</style>