oxy-uni-ui 2.0.0 → 2.1.1

package/components/oxy-splitter/oxy-splitter.vue

@@ -0,0 +1,409 @@
+<template>
+  <view :id="splitterId" :class="rootClass" :style="customStyle">
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-splitter',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { getRect, isDef, isNumber, isString, unitConvert, uuid } from '../common/util'
+import { SPLITTER_KEY, splitterProps, type SplitterCollapseType, type SplitterPanelSize, type SplitterPanelState, type SplitterExpose } from './types'
+
+const props = defineProps(splitterProps)
+const emit = defineEmits(['resize-start', 'resize', 'resize-end', 'collapse'])
+
+const { proxy } = getCurrentInstance() as any
+
+const splitterId = ref<string>(`splitter-${uuid()}`)
+const containerSize = ref<number>(0)
+const panels = ref<SplitterPanelState[]>([])
+const percentSizes = ref<number[]>([])
+const movingIndex = ref<number>(-1)
+const lazyOffset = ref<number>(0)
+
+const cacheSizes = ref<number[]>([])
+const cacheCollapsedSize = ref<number[]>([])
+const confirmedMovingIndex = ref<number>(-1)
+
+const rootClass = computed(() => `oxy-splitter oxy-splitter--${props.layout} ${props.customClass}`)
+
+const pxSizes = computed(() => {
+  return percentSizes.value.map((item) => item * containerSize.value)
+})
+
+const getContainerSize = () => containerSize.value
+
+const isPercentSize = (size: SplitterPanelSize | undefined): size is string => isString(size) && size.trim().endsWith('%')
+
+const getPercentValue = (size: string) => {
+  const value = Number.parseFloat(size)
+  return Number.isFinite(value) ? value / 100 : 0
+}
+
+const getPixelValue = (size: SplitterPanelSize) => {
+  return unitConvert(size, containerSize.value)
+}
+
+const normalizePanelPercent = (size?: SplitterPanelSize) => {
+  if (!isDef(size)) {
+    return undefined
+  }
+
+  if (!containerSize.value) {
+    return undefined
+  }
+
+  if (isPercentSize(size)) {
+    return getPercentValue(size)
+  }
+
+  return getPixelValue(size) / containerSize.value
+}
+
+const normalizePercentList = (percentList: Array<number | undefined>) => {
+  const list = [...percentList]
+  const undefinedCount = list.filter((item) => !isDef(item)).length
+  const definedTotal = list.reduce<number>((total, item) => total + (item ?? 0), 0)
+
+  if (definedTotal > 1 || undefinedCount === 0) {
+    const total = list.reduce<number>((sum, item) => sum + (item ?? 0), 0)
+    if (total > 0) {
+      return list.map((item) => (item ?? 0) / total)
+    }
+
+    const equal = list.length ? 1 / list.length : 0
+    return list.map(() => equal)
+  }
+
+  const fill = undefinedCount ? (1 - definedTotal) / undefinedCount : 0
+  return list.map((item) => (isDef(item) ? item : fill))
+}
+
+const syncPercentSizes = () => {
+  if (!panels.value.length) {
+    percentSizes.value = []
+    return
+  }
+
+  if (!containerSize.value) {
+    const equal = 1 / panels.value.length
+    percentSizes.value = panels.value.map(() => equal)
+    return
+  }
+
+  const rawPercent = panels.value.map((panel) => normalizePanelPercent(panel.size))
+  percentSizes.value = normalizePercentList(rawPercent)
+}
+
+const getPanelSize = (index: number) => {
+  return pxSizes.value[index] || 0
+}
+
+const toPx = (value: SplitterPanelSize | undefined, defaultValue: number) => {
+  if (!isDef(value)) {
+    return defaultValue
+  }
+
+  if (isPercentSize(value)) {
+    return getPercentValue(value) * containerSize.value
+  }
+
+  return getPixelValue(value)
+}
+
+const getLimitSize = (size: SplitterPanelSize | undefined, defaultValue: number) => {
+  if (!containerSize.value) {
+    return defaultValue
+  }
+  return toPx(size, defaultValue)
+}
+
+const clamp = (value: number, min: number, max: number) => {
+  return Math.min(Math.max(value, min), max)
+}
+
+const isDraggable = (index: number) => {
+  const panel = panels.value[index]
+  const nextPanel = panels.value[index + 1]
+  return Boolean(panel?.resizable && nextPanel?.resizable)
+}
+
+const registerPanel = (panel: SplitterPanelState) => {
+  panels.value.push(panel)
+  nextTick(syncPercentSizes)
+}
+
+const unregisterPanel = (uid: number) => {
+  const index = panels.value.findIndex((item) => item.uid === uid)
+  if (index < 0) {
+    return
+  }
+  panels.value.splice(index, 1)
+  nextTick(syncPercentSizes)
+}
+
+const updatePanel = (uid: number, patch: Partial<SplitterPanelState>) => {
+  const panel = panels.value.find((item) => item.uid === uid)
+  if (!panel) {
+    return
+  }
+  Object.assign(panel, patch)
+  nextTick(syncPercentSizes)
+}
+
+const getPanelIndex = (uid: number) => {
+  return panels.value.findIndex((item) => item.uid === uid)
+}
+
+const movePanelSize = (index: number, offset: number) => {
+  const panel = panels.value[index]
+  const nextPanel = panels.value[index + 1]
+  if (!panel || !nextPanel) {
+    return
+  }
+
+  const panelSize = cacheSizes.value[index] || 0
+  const nextSize = cacheSizes.value[index + 1] || 0
+  const panelMin = getLimitSize(panel.min, 0)
+  const panelMax = getLimitSize(panel.max, Number.MAX_SAFE_INTEGER)
+  const nextMin = getLimitSize(nextPanel.min, 0)
+  const nextMax = getLimitSize(nextPanel.max, Number.MAX_SAFE_INTEGER)
+
+  const minOffset = -Math.min(panelSize - panelMin, nextMax - nextSize)
+  const maxOffset = Math.min(nextSize - nextMin, panelMax - panelSize)
+  const mergedOffset = clamp(offset, minOffset, maxOffset)
+
+  const nextPanelSize = nextSize - mergedOffset
+  panel.size = panelSize + mergedOffset
+  nextPanel.size = nextPanelSize
+
+  syncPercentSizes()
+  emit('resize', index, [panel.size, nextPanel.size])
+}
+
+const onMoveStart = (index: number) => {
+  cacheSizes.value = [...pxSizes.value]
+  confirmedMovingIndex.value = -1
+  movingIndex.value = index
+  lazyOffset.value = 0
+  emit('resize-start', index)
+}
+
+const onMoving = (index: number, offset: number) => {
+  if (movingIndex.value < 0) {
+    return
+  }
+
+  const currentPanelSize = getPanelSize(index)
+  const nextPanelSize = getPanelSize(index + 1)
+
+  if (confirmedMovingIndex.value === -1) {
+    const isCurrentZero = currentPanelSize === 0
+    const isNextZero = nextPanelSize === 0
+    if (isCurrentZero || isNextZero) {
+      confirmedMovingIndex.value = isCurrentZero ? index - 1 : index + 1
+      cacheSizes.value = [...pxSizes.value]
+    } else {
+      confirmedMovingIndex.value = index
+    }
+  }
+
+  const mergedIndex = confirmedMovingIndex.value
+  if (mergedIndex < 0) {
+    return
+  }
+
+  if (props.lazy) {
+    lazyOffset.value = offset
+    return
+  }
+
+  movePanelSize(mergedIndex, offset)
+}
+
+const onMoveEnd = (index: number) => {
+  if (movingIndex.value < 0) {
+    return
+  }
+
+  if (props.lazy) {
+    movePanelSize(confirmedMovingIndex.value > -1 ? confirmedMovingIndex.value : index, lazyOffset.value)
+  }
+
+  lazyOffset.value = 0
+  movingIndex.value = -1
+  confirmedMovingIndex.value = -1
+  cacheSizes.value = []
+  emit('resize-end', index)
+}
+
+const onCollapse = (index: number, type: SplitterCollapseType) => {
+  const panel = panels.value[index]
+  const nextPanel = panels.value[index + 1]
+  if (!panel || !nextPanel) {
+    return
+  }
+
+  const panelSize = getPanelSize(index)
+  const nextPanelSize = getPanelSize(index + 1)
+  const panelCollapsed = panelSize === 0
+  const nextPanelCollapsed = nextPanelSize === 0
+
+  // 交互约定：
+  // 只要任一侧已折叠，点击任意折叠按钮都优先执行“还原已折叠侧”
+  if (panelCollapsed || nextPanelCollapsed) {
+    if (panelCollapsed) {
+      const panelMin = getLimitSize(panel.min, 0)
+      const panelMax = getLimitSize(panel.max, Number.MAX_SAFE_INTEGER)
+      const cached = cacheCollapsedSize.value[index]
+      const fallback = panelMin > 0 ? panelMin : nextPanelSize / 2
+      const restore = clamp(cached || fallback, panelMin, Math.min(panelMax, nextPanelSize))
+
+      if (restore > 0) {
+        panel.size = restore
+        nextPanel.size = nextPanelSize - restore
+      }
+    } else {
+      const nextMin = getLimitSize(nextPanel.min, 0)
+      const nextMax = getLimitSize(nextPanel.max, Number.MAX_SAFE_INTEGER)
+      const cached = cacheCollapsedSize.value[index]
+      const fallback = nextMin > 0 ? nextMin : panelSize / 2
+      const restore = clamp(cached || fallback, nextMin, Math.min(nextMax, panelSize))
+
+      if (restore > 0) {
+        panel.size = panelSize - restore
+        nextPanel.size = restore
+      }
+    }
+
+    syncPercentSizes()
+    emit('collapse', index, type)
+    return
+  }
+
+  const isStart = type === 'start'
+  const collapseSize = isStart ? panelSize : nextPanelSize
+  const expandSize = isStart ? nextPanelSize : panelSize
+  const collapsed = collapseSize === 0
+
+  if (!collapsed) {
+    cacheCollapsedSize.value[index] = collapseSize
+  }
+
+  if (collapsed) {
+    const mergedSize = cacheCollapsedSize.value[index] || 0
+    const targetSize = getLimitSize(isStart ? panel.max : nextPanel.max, Number.MAX_SAFE_INTEGER)
+
+    if (targetSize <= mergedSize) {
+      return
+    }
+
+    if (expandSize < mergedSize) {
+      return
+    }
+
+    if (isStart) {
+      panel.size = mergedSize
+      nextPanel.size = expandSize - mergedSize
+    } else {
+      panel.size = expandSize - mergedSize
+      nextPanel.size = mergedSize
+    }
+  } else {
+    if (isStart) {
+      panel.size = 0
+      nextPanel.size = expandSize + collapseSize
+    } else {
+      panel.size = expandSize + collapseSize
+      nextPanel.size = 0
+    }
+  }
+
+  syncPercentSizes()
+  emit('collapse', index, type)
+}
+
+const refresh = async () => {
+  try {
+    const rect = await getRect(`#${splitterId.value}`, false, proxy)
+    const nextSize = props.layout === 'horizontal' ? Number(rect.width) : Number(rect.height)
+    if (isNumber(nextSize) && Number.isFinite(nextSize) && nextSize > 0) {
+      containerSize.value = nextSize
+      syncPercentSizes()
+    }
+  } catch (error) {
+    // empty
+  }
+}
+
+const onWindowResize = () => {
+  refresh()
+}
+
+watch(
+  () => panels.value.length,
+  () => {
+    nextTick(refresh)
+  }
+)
+
+watch(
+  () => props.layout,
+  () => {
+    nextTick(refresh)
+  }
+)
+
+provide(SPLITTER_KEY, {
+  layout: computed(() => props.layout),
+  lazy: computed(() => props.lazy),
+  panels,
+  pxSizes,
+  movingIndex,
+  lazyOffset,
+  registerPanel,
+  unregisterPanel,
+  updatePanel,
+  getPanelIndex,
+  getPanelSize,
+  getContainerSize,
+  isDraggable,
+  onMoveStart,
+  onMoving,
+  onMoveEnd,
+  onCollapse,
+  refresh
+})
+
+onMounted(() => {
+  nextTick(refresh)
+  // #ifdef H5
+  window.addEventListener('resize', onWindowResize)
+  // #endif
+})
+
+onUnmounted(() => {
+  // #ifdef H5
+  window.removeEventListener('resize', onWindowResize)
+  // #endif
+})
+
+defineExpose<SplitterExpose>({
+  refresh
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-splitter/types.ts

@@ -0,0 +1,75 @@
+import type { ComputedRef, ComponentPublicInstance, ExtractPropTypes, InjectionKey, Ref } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type SplitterLayout = 'horizontal' | 'vertical'
+
+export type SplitterPanelSize = number | string
+
+export type SplitterCollapsible = boolean
+
+export type SplitterCollapseType = 'start' | 'end'
+
+export type SplitterPanelState = {
+  /** panel 唯一标识 */
+  uid: number
+  /** 当前 size，支持 number(px) / string(px|rpx|%) */
+  size?: SplitterPanelSize
+  /** 最小尺寸 */
+  min?: SplitterPanelSize
+  /** 最大尺寸 */
+  max?: SplitterPanelSize
+  /** 是否允许拖拽 */
+  resizable: boolean
+  /** 是否支持折叠 */
+  collapsible: SplitterCollapsible
+}
+
+export type SplitterProvide = {
+  layout: ComputedRef<SplitterLayout>
+  lazy: ComputedRef<boolean>
+  panels: Ref<SplitterPanelState[]>
+  pxSizes: ComputedRef<number[]>
+  movingIndex: Ref<number>
+  lazyOffset: Ref<number>
+  registerPanel: (panel: SplitterPanelState) => void
+  unregisterPanel: (uid: number) => void
+  updatePanel: (uid: number, patch: Partial<SplitterPanelState>) => void
+  getPanelIndex: (uid: number) => number
+  getPanelSize: (index: number) => number
+  getContainerSize: () => number
+  isDraggable: (index: number) => boolean
+  onMoveStart: (index: number) => void
+  onMoving: (index: number, offset: number) => void
+  onMoveEnd: (index: number) => void
+  onCollapse: (index: number, type: SplitterCollapseType) => void
+  refresh: () => void
+}
+
+export const SPLITTER_KEY: InjectionKey<SplitterProvide> = Symbol('oxy-splitter')
+
+export const splitterProps = {
+  ...baseProps,
+
+  /**
+   * 分隔方向
+   * `horizontal` 为左右布局，`vertical` 为上下布局
+   */
+  layout: makeStringProp<SplitterLayout>('horizontal'),
+
+  /**
+   * 是否启用懒更新
+   * 拖拽中仅更新分割线，松手后再提交尺寸
+   */
+  lazy: makeBooleanProp(false)
+}
+
+export type SplitterProps = ExtractPropTypes<typeof splitterProps>
+
+export type SplitterExpose = {
+  /**
+   * 手动刷新尺寸（例如在 popup 打开后调用）
+   */
+  refresh: () => void
+}
+
+export type SplitterInstance = ComponentPublicInstance<SplitterProps, SplitterExpose>