oxy-uni-ui 2.0.0 → 2.1.0

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

@@ -0,0 +1,432 @@
+<template>
+  <view class="oxy-splitter-panel" :style="panelStyle">
+    <view class="oxy-splitter-panel__content">
+      <slot />
+    </view>
+  </view>
+  <view
+    v-if="showBar"
+    :class="barClass"
+    :style="barStyle"
+    @touchstart.stop="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+    @mousedown.stop.prevent="onMouseDown"
+  >
+    <view v-if="isBarDraggable" class="oxy-splitter-panel__grip" />
+
+    <view v-if="showActionGroup" class="oxy-splitter-panel__action-group" @touchstart.stop="noop" @mousedown.stop="noop">
+      <view class="oxy-splitter-panel__action-segment oxy-splitter-panel__action-segment--start" @tap.stop="onCollapse('start')">
+        <slot name="start-collapsible">
+          <oxy-icon :name="startIconName" size="24rpx" custom-class="oxy-splitter-panel__icon"></oxy-icon>
+        </slot>
+      </view>
+      <view class="oxy-splitter-panel__action-separator"></view>
+      <view class="oxy-splitter-panel__action-segment oxy-splitter-panel__action-segment--end" @tap.stop="onCollapse('end')">
+        <slot name="end-collapsible">
+          <oxy-icon :name="endIconName" size="24rpx" custom-class="oxy-splitter-panel__icon"></oxy-icon>
+        </slot>
+      </view>
+    </view>
+
+    <view
+      v-if="showSingleStartAction"
+      class="oxy-splitter-panel__action oxy-splitter-panel__action--start"
+      @tap.stop="onCollapse('start')"
+      @touchstart.stop="noop"
+      @mousedown.stop="noop"
+    >
+      <slot name="start-collapsible">
+        <oxy-icon :name="startIconName" size="24rpx" custom-class="oxy-splitter-panel__icon"></oxy-icon>
+      </slot>
+    </view>
+
+    <view
+      v-if="showSingleEndAction"
+      class="oxy-splitter-panel__action oxy-splitter-panel__action--end"
+      @tap.stop="onCollapse('end')"
+      @touchstart.stop="noop"
+      @mousedown.stop="noop"
+    >
+      <slot name="end-collapsible">
+        <oxy-icon :name="endIconName" size="24rpx" custom-class="oxy-splitter-panel__icon"></oxy-icon>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-splitter-panel',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import { isDef, objToStyle, unitConvert } from '../common/util'
+import { useTouch } from '../composables/useTouch'
+import { SPLITTER_KEY, type SplitterCollapseType } from '../oxy-splitter/types'
+import { splitterPanelProps, type SplitterPanelEmits, type SplitterPanelExpose } from './types'
+
+const props = defineProps(splitterPanelProps)
+const emit = defineEmits<SplitterPanelEmits>()
+
+const splitter = inject(SPLITTER_KEY, null)
+const { uid } = getCurrentInstance()!
+
+const startPosition = ref(0)
+const dragging = ref(false)
+const touchPending = ref(false)
+const touch = useTouch()
+
+const TOUCH_DRAG_SLOP = 6
+
+const noop = () => {}
+
+const syncPanelState = () => {
+  splitter?.updatePanel(uid, {
+    size: props.size,
+    min: props.min,
+    max: props.max,
+    resizable: props.resizable,
+    collapsible: props.collapsible
+  })
+}
+
+onMounted(() => {
+  splitter?.registerPanel({
+    uid,
+    size: props.size,
+    min: props.min,
+    max: props.max,
+    resizable: props.resizable,
+    collapsible: props.collapsible
+  })
+  splitter?.refresh()
+})
+
+onUnmounted(() => {
+  splitter?.unregisterPanel(uid)
+})
+
+watch(
+  () => [props.size, props.min, props.max, props.resizable, props.collapsible],
+  () => {
+    syncPanelState()
+  },
+  { deep: true }
+)
+
+const index = computed(() => {
+  return splitter ? splitter.getPanelIndex(uid) : -1
+})
+
+const panelSize = computed(() => {
+  if (!splitter || index.value < 0) {
+    return 0
+  }
+  return splitter.getPanelSize(index.value)
+})
+
+const showBar = computed(() => {
+  if (!splitter || index.value < 0) {
+    return false
+  }
+  return index.value < splitter.panels.value.length - 1
+})
+
+const currentPanel = computed(() => {
+  if (!splitter || index.value < 0) {
+    return undefined
+  }
+  return splitter.panels.value[index.value]
+})
+
+const nextPanel = computed(() => {
+  if (!splitter || index.value < 0) {
+    return undefined
+  }
+  return splitter.panels.value[index.value + 1]
+})
+
+const startCollapsible = computed(() => {
+  return Boolean(currentPanel.value?.collapsible)
+})
+
+const endCollapsible = computed(() => {
+  return Boolean(nextPanel.value?.collapsible)
+})
+
+const nextPanelSize = computed(() => {
+  if (!splitter || index.value < 0) {
+    return 0
+  }
+  return splitter.getPanelSize(index.value + 1)
+})
+
+const isVertical = computed(() => splitter?.layout.value === 'vertical')
+const panelCollapsed = computed(() => panelSize.value === 0)
+const nextPanelCollapsed = computed(() => nextPanelSize.value === 0)
+
+const startIconName = computed(() => {
+  const isSingleStartCollapsed = showSingleStartAction.value && panelCollapsed.value
+  if (isVertical.value) {
+    return isSingleStartCollapsed ? 'arrow-down' : 'arrow-up'
+  }
+  return isSingleStartCollapsed ? 'arrow-right' : 'arrow-left'
+})
+
+const endIconName = computed(() => {
+  const isSingleEndCollapsed = showSingleEndAction.value && nextPanelCollapsed.value
+  if (isVertical.value) {
+    return isSingleEndCollapsed ? 'arrow-up' : 'arrow-down'
+  }
+  return isSingleEndCollapsed ? 'arrow-left' : 'arrow-right'
+})
+
+const panelStyle = computed(() => {
+  if (!splitter || index.value < 0) {
+    return ''
+  }
+
+  const style: Record<string, string> = {
+    'flex-grow': '0',
+    'flex-shrink': '0'
+  }
+
+  if (splitter.layout.value === 'horizontal') {
+    style.width = `${panelSize.value}px`
+    style.height = '100%'
+  } else {
+    style.height = `${panelSize.value}px`
+    style.width = '100%'
+  }
+
+  return objToStyle(style)
+})
+
+const barClass = computed(() => {
+  const draggable = splitter ? splitter.isDraggable(index.value) : false
+  const moving = splitter ? splitter.movingIndex.value === index.value : false
+  return [
+    'oxy-splitter-panel__bar',
+    `oxy-splitter-panel__bar--${splitter?.layout.value || 'horizontal'}`,
+    draggable ? 'is-draggable' : 'is-static',
+    showCollapseAction.value ? 'has-action' : '',
+    hasDoubleAction.value ? 'has-double-action' : '',
+    moving ? 'is-moving' : ''
+  ]
+    .filter(Boolean)
+    .join(' ')
+})
+
+const isBarDraggable = computed(() => {
+  return splitter ? splitter.isDraggable(index.value) : false
+})
+
+const hasDoubleAction = computed(() => {
+  return startCollapsible.value && endCollapsible.value
+})
+
+const actionDenseThreshold = computed(() => {
+  return unitConvert(hasDoubleAction.value ? '104rpx' : '76rpx')
+})
+
+const hideCollapseActionByDensity = computed(() => {
+  if (!splitter || index.value < 0) {
+    return false
+  }
+
+  if (!startCollapsible.value && !endCollapsible.value) {
+    return false
+  }
+
+  // 已折叠状态必须保留还原入口，避免交互“锁死”
+  if (panelSize.value === 0 || nextPanelSize.value === 0) {
+    return false
+  }
+
+  return Math.min(panelSize.value, nextPanelSize.value) < actionDenseThreshold.value
+})
+
+const showCollapseAction = computed(() => {
+  return (startCollapsible.value || endCollapsible.value) && !hideCollapseActionByDensity.value
+})
+
+const showActionGroup = computed(() => {
+  return showCollapseAction.value && hasDoubleAction.value
+})
+
+const showSingleStartAction = computed(() => {
+  return showCollapseAction.value && startCollapsible.value && !endCollapsible.value
+})
+
+const showSingleEndAction = computed(() => {
+  return showCollapseAction.value && endCollapsible.value && !startCollapsible.value
+})
+
+const barStyle = computed(() => {
+  if (!splitter || !splitter.lazy.value) {
+    return ''
+  }
+
+  if (splitter.movingIndex.value !== index.value) {
+    return ''
+  }
+
+  const offset = splitter.lazyOffset.value
+  if (!offset) {
+    return ''
+  }
+
+  if (splitter.layout.value === 'horizontal') {
+    return `transform: translateX(${offset}px);`
+  }
+
+  return `transform: translateY(${offset}px);`
+})
+
+const getClientPosition = (event: any) => {
+  if (event?.touches && event.touches[0]) {
+    return splitter?.layout.value === 'horizontal' ? event.touches[0].clientX : event.touches[0].clientY
+  }
+
+  if (event?.changedTouches && event.changedTouches[0]) {
+    return splitter?.layout.value === 'horizontal' ? event.changedTouches[0].clientX : event.changedTouches[0].clientY
+  }
+
+  if (isDef(event?.clientX) && isDef(event?.clientY)) {
+    return splitter?.layout.value === 'horizontal' ? event.clientX : event.clientY
+  }
+
+  return 0
+}
+
+const startMove = (position: number) => {
+  if (!splitter || index.value < 0 || !splitter.isDraggable(index.value)) {
+    return
+  }
+
+  dragging.value = true
+  startPosition.value = position
+  splitter.onMoveStart(index.value)
+}
+
+const move = (position: number) => {
+  if (!splitter || !dragging.value || index.value < 0) {
+    return
+  }
+
+  const offset = position - startPosition.value
+  splitter.onMoving(index.value, offset)
+}
+
+const endMove = () => {
+  if (!splitter || !dragging.value || index.value < 0) {
+    return
+  }
+
+  dragging.value = false
+  splitter.onMoveEnd(index.value)
+}
+
+const onTouchStart = (event: any) => {
+  if (!splitter || index.value < 0 || !splitter.isDraggable(index.value)) {
+    return
+  }
+
+  touch.touchStart(event)
+  touchPending.value = true
+  startPosition.value = getClientPosition(event)
+}
+
+const onTouchMove = (event: any) => {
+  if (!splitter || index.value < 0 || (!dragging.value && !touchPending.value)) {
+    return
+  }
+
+  touch.touchMove(event)
+  const expectedDirection = splitter.layout.value === 'horizontal' ? 'horizontal' : 'vertical'
+  const mainOffset = expectedDirection === 'horizontal' ? touch.offsetX.value : touch.offsetY.value
+
+  if (!dragging.value) {
+    if (touch.direction.value && touch.direction.value !== expectedDirection) {
+      touchPending.value = false
+      return
+    }
+
+    if (mainOffset < TOUCH_DRAG_SLOP) {
+      return
+    }
+
+    touchPending.value = false
+    startMove(startPosition.value)
+  }
+
+  move(getClientPosition(event))
+}
+
+const onTouchEnd = () => {
+  touchPending.value = false
+  endMove()
+}
+
+const onMouseMove = (event: MouseEvent) => {
+  move(getClientPosition(event))
+}
+
+const onMouseUp = () => {
+  endMove()
+  if (typeof document !== 'undefined') {
+    document.removeEventListener('mousemove', onMouseMove)
+    document.removeEventListener('mouseup', onMouseUp)
+  }
+}
+
+const onMouseDown = (event: MouseEvent) => {
+  // #ifdef H5
+  startMove(getClientPosition(event))
+  if (typeof document !== 'undefined') {
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+  }
+  // #endif
+}
+
+const onCollapse = (type: SplitterCollapseType) => {
+  if (!splitter || index.value < 0) {
+    return
+  }
+  splitter.onCollapse(index.value, type)
+}
+
+watch(
+  panelSize,
+  (value) => {
+    emit('update:size', value)
+  },
+  { immediate: true }
+)
+
+onUnmounted(() => {
+  if (typeof document !== 'undefined') {
+    document.removeEventListener('mousemove', onMouseMove)
+    document.removeEventListener('mouseup', onMouseUp)
+  }
+})
+
+defineExpose<SplitterPanelExpose>({
+  getSize: () => panelSize.value
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-splitter-panel/types.ts

@@ -0,0 +1,63 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp } from '../common/props'
+import type { SplitterPanelSize } from '../oxy-splitter/types'
+
+export const splitterPanelProps = {
+  ...baseProps,
+
+  /**
+   * 面板尺寸
+   * 支持 `number(px)`、`px`、`rpx`、`%`
+   */
+  size: {
+    type: [Number, String] as PropType<SplitterPanelSize>,
+    default: undefined
+  },
+
+  /**
+   * 面板最小尺寸
+   * 支持 `number(px)`、`px`、`rpx`、`%`
+   */
+  min: {
+    type: [Number, String] as PropType<SplitterPanelSize>,
+    default: undefined
+  },
+
+  /**
+   * 面板最大尺寸
+   * 支持 `number(px)`、`px`、`rpx`、`%`
+   */
+  max: {
+    type: [Number, String] as PropType<SplitterPanelSize>,
+    default: undefined
+  },
+
+  /**
+   * 是否允许拖拽调整
+   */
+  resizable: makeBooleanProp(true),
+
+  /**
+   * 是否可折叠
+   * 默认 `false`，允许在相邻分割条上显示折叠入口
+   */
+  collapsible: makeBooleanProp(false)
+}
+
+export type SplitterPanelProps = ExtractPropTypes<typeof splitterPanelProps>
+
+export type SplitterPanelEmits = {
+  /**
+   * 面板尺寸变化（单位 px）
+   */
+  'update:size': [size: number]
+}
+
+export type SplitterPanelExpose = {
+  /**
+   * 当前面板 size（px）
+   */
+  getSize: () => number
+}
+
+export type SplitterPanelInstance = ComponentPublicInstance<SplitterPanelProps, SplitterPanelExpose>

package/components/oxy-step/index.scss

@@ -57,7 +57,7 @@
     position: relative;
     width: $-steps-icon-size;
     height: $-steps-icon-size;
-    background: #fff;
+    background: $-color-white;
     z-index: 1;
 
     @include when(icon) {
@@ -105,7 +105,7 @@
     background: $-steps-line-color;
   }
   @include e(content){
-    margin-top: 14rpx;
+    margin-top: 16rpx;
     color: $-steps-inactive-color;
     font-size: $-steps-label-fs;
   }
@@ -118,8 +118,8 @@
     }
   }
   @include e(description) {
-    margin-top: 10rpx;
-    padding: 0 4rpx;
+    margin-top: 12rpx;
+    padding: 0 8rpx;
     color: $-steps-description-color;
   }
   @include when(wait) {
@@ -149,7 +149,7 @@
       }
     }
     .oxy-step__icon-outer {
-      color: #fff;
+      color: $-color-white;
       background: $-steps-finished-color;
       border-color: $-steps-finished-color;
     }