oxy-uni-ui 1.2.3 → 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-status-tip/index.scss

@@ -23,15 +23,15 @@
 
   @include edeep(image) {
     margin: 0 auto;
-    width: 160px;
-    height: 160px;
+    width: 320rpx;
+    height: 320rpx;
   }
   @include e(text) {
-    margin: 20px auto 0;
+    margin: 40rpx auto 0;
     font-size: $-statustip-fs;
     line-height: $-statustip-line-height;
     color: $-statustip-color;
     text-align: center;
     overflow-wrap: break-word;
   }
-}
+}

package/components/oxy-status-tip/oxy-status-tip.vue

@@ -24,7 +24,7 @@ import ImgContent from './images/content.png'
 import ImgNetwork from './images/network.png'
 import ImgSearch from './images/search.png'
 import { computed, type CSSProperties } from 'vue'
-import { addUnit, isDef, isObj, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, isObj, objToStyle } from '../common/util'
 import { statusTipProps } from './types'
 
 const imgs: AnyObject = {
@@ -54,12 +54,12 @@ const imgStyle = computed(() => {
   let style: CSSProperties = {}
   if (props.imageSize) {
     if (isObj(props.imageSize)) {
-      isDef(props.imageSize.height) && (style.height = addUnit(props.imageSize.height))
-      isDef(props.imageSize.width) && (style.width = addUnit(props.imageSize.width))
+      isDef(props.imageSize.height) && (style.height = withDefaultUnit(props.imageSize.height))
+      isDef(props.imageSize.width) && (style.width = withDefaultUnit(props.imageSize.width))
     } else {
       style = {
-        height: addUnit(props.imageSize),
-        width: addUnit(props.imageSize)
+        height: withDefaultUnit(props.imageSize),
+        width: withDefaultUnit(props.imageSize)
       }
     }
   }

package/components/oxy-status-tip/types.ts

@@ -4,11 +4,11 @@ import type { ImageMode } from '../oxy-img/types'
 
 export type ImageSize = {
   /**
-   * 宽度
+   * 宽度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   width: number | string
   /**
-   * 高度
+   * 高度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   height: number | string
 }
@@ -25,7 +25,7 @@ export const statusTipProps = {
   image: makeStringProp('network'),
 
   /**
-   * 图片大小，默认单位为 `px`。
+   * 图片大小，number 类型按 `rpx` 语义处理，也支持 `px/rpx`。
    * 类型: string 或 number 或 ImageSize
    * 默认值: 空字符串
    */

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) {
@@ -78,12 +78,12 @@
     color: $-steps-inactive-color;
   }
   @include e(icon-outer) {
-    width: calc($-steps-icon-size - 2px);
-    height: calc($-steps-icon-size - 2px);
+    width: calc($-steps-icon-size - 4rpx);
+    height: calc($-steps-icon-size - 4rpx);
     border: 1px solid $-steps-inactive-color;
     color: $-steps-inactive-color;
     text-align: center;
-    line-height: calc($-steps-icon-size - 2px);
+    line-height: calc($-steps-icon-size - 4rpx);
     border-radius: 50%;
     font-size: $-steps-icon-text-fs;
   }
@@ -105,7 +105,7 @@
     background: $-steps-line-color;
   }
   @include e(content){
-    margin-top: 7px;
+    margin-top: 16rpx;
     color: $-steps-inactive-color;
     font-size: $-steps-label-fs;
   }
@@ -118,8 +118,8 @@
     }
   }
   @include e(description) {
-    margin-top: 5px;
-    padding: 0 2px;
+    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;
     }
@@ -163,10 +163,10 @@
         &::after {
           position: absolute;
           content: '';
-          width: $-steps-dot-size + 10px;
-          height: $-steps-dot-size + 10px;
-          left: -5px;
-          top: -5px;
+          width: $-steps-dot-size + 20rpx;
+          height: $-steps-dot-size + 20rpx;
+          left: -10rpx;
+          top: -10rpx;
           border-radius: 50%;
           background: $-steps-finished-color;
           opacity: 0.2;
@@ -207,7 +207,7 @@
       height: 100%;
 
       &.is-dot {
-        top: 6px;
+        top: 12rpx;
 
         .oxy-step__line {
           margin-left: -1px;
@@ -216,9 +216,9 @@
       }
     }
     .oxy-step__content {
-      margin-left: 30px;
+      margin-left: 60rpx;
       margin-top: 0;
-      padding-bottom: 20px;
+      padding-bottom: 40rpx;
     }
     .oxy-step__line {
       top: 0;
@@ -232,4 +232,4 @@
       margin-top: -1px;
     }
   }
-}
+}

package/components/oxy-sticky/oxy-sticky.vue

@@ -24,7 +24,7 @@ export default {
 <script lang="ts" setup>
 import OxyResize from '../oxy-resize/oxy-resize.vue'
 import { computed, getCurrentInstance, reactive, ref, type CSSProperties } from 'vue'
-import { addUnit, getRect, objToStyle, pause, uuid } from '../common/util'
+import { getRect, objToStyle, pause, unitConvert, uuid } from '../common/util'
 import { stickyProps } from './types'
 import { useParent } from '../composables/useParent'
 import { STICKY_BOX_KEY } from '../oxy-sticky-box/types'
@@ -49,8 +49,8 @@ const { proxy } = getCurrentInstance() as any
 const rootStyle = computed(() => {
   const style: CSSProperties = {
     'z-index': props.zIndex,
-    height: addUnit(stickyState.height),
-    width: addUnit(stickyState.width)
+    height: unitConvert(stickyState.height, 0, { output: 'px' }),
+    width: unitConvert(stickyState.width, 0, { output: 'px' })
   }
   if (!stickyState.boxLeaved) {
     style['position'] = 'relative'
@@ -61,8 +61,8 @@ const rootStyle = computed(() => {
 const stickyStyle = computed(() => {
   const style: CSSProperties = {
     'z-index': props.zIndex,
-    height: addUnit(stickyState.height),
-    width: addUnit(stickyState.width)
+    height: unitConvert(stickyState.height, 0, { output: 'px' }),
+    width: unitConvert(stickyState.width, 0, { output: 'px' })
   }
   if (!stickyState.boxLeaved) {
     style['position'] = 'relative'
@@ -73,7 +73,7 @@ const stickyStyle = computed(() => {
 const containerStyle = computed(() => {
   const style: CSSProperties = {
     position: stickyState.position as 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed',
-    top: addUnit(stickyState.top)
+    top: unitConvert(stickyState.top, 0, { output: 'px' })
   }
   return objToStyle(style)
 })