oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-stream-render/oxy-stream-render.vue

@@ -0,0 +1,204 @@
+<template>
+  <!-- #ifdef H5 || APP-PLUS -->
+  <view class="oxy-stream-render" :change:stream-request="appStreamHandler.handleStreamRequest" :stream-request="streamRequest" />
+  <!-- #endif -->
+</template>
+
+<script>
+export default {
+  name: 'oxy-stream-render',
+  props: {
+    streamRequest: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  },
+  data() {
+    return {
+      requestTask: null
+    }
+  },
+  watch: {
+    streamRequest: {
+      handler(newVal) {
+        // #ifndef H5 || APP-PLUS
+        this.handleStreamRequest(newVal)
+        // #endif
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleAppStreamData({ chunk, finished }) {
+      this.$emit('stream-data', { chunk, finished })
+    },
+    handleAppStreamError({ message, type }) {
+      this.$emit('stream-error', { message, type })
+    },
+    // #ifndef H5 || APP-PLUS
+    handleStreamRequest(newVal) {
+      if (newVal && newVal.cancel) {
+        if (this.requestTask) {
+          this.requestTask.abort()
+          this.requestTask = null
+        }
+        this.handleAppStreamData({
+          chunk: null,
+          finished: true
+        })
+        return
+      }
+
+      if (!newVal || !newVal.url) {
+        return
+      }
+
+      if (this.requestTask) {
+        this.requestTask.abort()
+        this.requestTask = null
+      }
+
+      const { url, method, headers, body } = newVal
+
+      this.requestTask = uni.request({
+        url,
+        method: method || 'GET',
+        header: headers || {},
+        data: body,
+        enableChunked: true,
+        success: (res) => {
+          this.handleAppStreamData({
+            chunk: null,
+            finished: true
+          })
+          this.requestTask = null
+        },
+        fail: (err) => {
+          this.handleAppStreamError({
+            message: err.errMsg || 'Request failed',
+            type: err.errMsg === 'request:fail abort' ? 'AbortError' : 'Error'
+          })
+          this.requestTask = null
+        }
+      })
+      // 这里监听消息
+      this.requestTask.onChunkReceived((res) => {
+        let decoder = new TextDecoder('utf-8')
+        let chunk = decoder.decode(new Uint8Array(res.data))
+        this.handleAppStreamData({
+          chunk,
+          finished: false
+        })
+      })
+    }
+    // #endif
+  }
+}
+</script>
+
+<script module="appStreamHandler" lang="renderjs">
+// #ifdef H5 || APP-PLUS
+module.exports = {
+  data() {
+    return {
+      abortController: null,
+    }
+  },
+  methods: {
+    handleStreamRequest(newVal, _oldVal, _ownerInstance) {
+      if (newVal && newVal.cancel) {
+        if (this.abortController) {
+          this.abortController.abort()
+          this.abortController = null
+        }
+        this.$ownerInstance.callMethod('handleAppStreamData', {
+          chunk: null,
+          finished: true,
+        })
+        return
+      }
+
+      if (!newVal || !newVal.url) {
+        return
+      }
+
+      if (this.abortController) {
+        this.abortController.abort()
+        this.abortController = null
+      }
+
+      this.abortController = new AbortController()
+
+      const { url, method, headers, body } = newVal
+
+      fetch(url, {
+        method,
+        headers,
+        body,
+        signal: this.abortController.signal,
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`)
+          }
+
+          if (!response.body || !response.body.getReader) {
+            throw new Error('ReadableStream not supported')
+          }
+          const reader = response.body.getReader()
+          const decoder = new TextDecoder()
+
+          const readStream = async () => {
+            try {
+              const { done, value } = await reader.read()
+
+              if (done) {
+                this.abortController = null
+                this.$ownerInstance.callMethod('handleAppStreamData', {
+                  chunk: null,
+                  finished: true,
+                })
+                return
+              }
+
+              const chunk = decoder.decode(value, { stream: true })
+
+              this.$ownerInstance.callMethod('handleAppStreamData', {
+                chunk,
+                finished: false,
+              })
+
+              return readStream()
+            }
+            catch (error) {
+              this.abortController = null
+              this.$ownerInstance.callMethod('handleAppStreamError', {
+                message: error.message,
+                type:error.name
+              })
+            }
+          }
+
+          return readStream()
+        })
+        .catch((error) => {
+          this.abortController = null
+          this.$ownerInstance.callMethod('handleAppStreamError', {
+            message: error.message,
+            type:error.name
+          })
+        })
+    },
+  },
+}
+// #endif
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-stream-render/types.ts

@@ -0,0 +1,8 @@
+import type { ExtractPropTypes } from 'vue'
+
+/**
+ * 流式渲染组件属性
+ */
+export const streamRenderProps = {}
+
+export type StreamRenderProps = ExtractPropTypes<typeof streamRenderProps>

package/components/oxy-swipe-action/oxy-swipe-action.vue

@@ -39,7 +39,7 @@ import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted,
 import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
 import { useTouch } from '../composables/useTouch'
-import { getRect } from '../common/util'
+import { getRect, unitConvert } from '../common/util'
 import { swipeActionProps, type SwipeActionPosition, type SwipeActionReason, type SwipeActionStatus } from './types'
 
 const props = defineProps(swipeActionProps)
@@ -55,6 +55,10 @@ const originOffset = ref<number>(0)
 const wrapperOffset = ref<number>(0)
 // 是否处于滑动状态
 const touching = ref<boolean>(false)
+// 标记本次触摸周期是否发生过横向滑动，用于抑制触摸后的合成 click
+const swiping = ref<boolean>(false)
+// 拖拽计算版本号，避免异步获取宽度结果乱序导致位移回退
+const dragVersion = ref<number>(0)
 
 const touch = useTouch()
 
@@ -139,7 +143,7 @@ function getWidths() {
  */
 function swipeMove(offset = 0) {
   // this.offset = offset
-  const transform = `translate3d(${offset}px, 0, 0)`
+  const transform = `translate3d(${unitConvert(offset, 0, { output: 'px' })}, 0, 0)`
   // 跟随手指滑动，不需要动画
   const transition = touching.value ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
   wrapperStyle.value = `
@@ -156,6 +160,11 @@ function swipeMove(offset = 0) {
  * @param event
  */
 function onClick(position?: SwipeActionPosition) {
+  if (swiping.value) {
+    swiping.value = false
+    return
+  }
+
   if (props.disabled || wrapperOffset.value === 0) {
     return
   }
@@ -172,6 +181,8 @@ function onClick(position?: SwipeActionPosition) {
 function startDrag(event: TouchEvent) {
   if (props.disabled) return
 
+  dragVersion.value += 1
+  swiping.value = false
   originOffset.value = wrapperOffset.value
   touch.touchStart(event)
   if (queue && queue.closeOther) {
@@ -196,10 +207,17 @@ function onDrag(event: TouchEvent) {
   }
 
   touching.value = true
+  swiping.value = true
+  const currentDragVersion = ++dragVersion.value
 
   // 本次滑动，wrapper应该设置的偏移量
   const offset = originOffset.value + touch.deltaX.value
   getWidths().then(([leftWidth, rightWidth]) => {
+    // 忽略过期的拖拽帧，避免异步返回顺序打乱造成回弹
+    if (!touching.value || currentDragVersion !== dragVersion.value) {
+      return
+    }
+
     // 如果需要想滑出来的按钮不存在，对应的按钮肯定滑不出来，容器处于初始状态。此时需要模拟一下位于此处的start事件。
     if ((leftWidth === 0 && offset > 0) || (rightWidth === 0 && offset < 0)) {
       swipeMove(0)
@@ -224,6 +242,7 @@ function endDrag() {
   // 滑出"操作按钮"的阈值
   const THRESHOLD = 0.3
   touching.value = false
+  dragVersion.value += 1
 
   getWidths().then(([leftWidth, rightWidth]) => {
     if (
@@ -261,6 +280,12 @@ function endDrag() {
       close('swipe')
     }
   })
+
+  if (swiping.value) {
+    setTimeout(() => {
+      swiping.value = false
+    }, 0)
+  }
 }
 /**
  * @description 关闭操过按钮，并在合适的时候调用 beforeClose

package/components/oxy-swiper/oxy-swiper.vue

@@ -14,11 +14,11 @@
         :circular="loop"
         :vertical="direction == 'vertical'"
         :easing-function="easingFunction"
-        :previous-margin="addUnit(previousMargin)"
-        :next-margin="addUnit(nextMargin)"
+        :previous-margin="withDefaultUnit(previousMargin)"
+        :next-margin="withDefaultUnit(nextMargin)"
         :snap-to-edge="snapToEdge"
         :display-multiple-items="displayMultipleItems"
-        :style="{ height: addUnit(height) }"
+        :style="{ height: withDefaultUnit(height) }"
         @change="handleChange"
         @animationfinish="handleAnimationfinish"
       >
@@ -27,7 +27,7 @@
             <video
               v-if="isVideo(item)"
               :id="`video-${index}-${uid}`"
-              :style="{ height: addUnit(height) }"
+              :style="{ height: withDefaultUnit(height) }"
               :src="isObj(item) ? item[valueKey] : item"
               :poster="isObj(item) ? item.poster : ''"
               :class="`oxy-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
@@ -44,7 +44,7 @@
               v-else
               :src="isObj(item) ? item[valueKey] : item"
               :class="`oxy-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
-              :style="{ height: addUnit(height) }"
+              :style="{ height: withDefaultUnit(height) }"
               :mode="imageMode"
               @click="handleClick(index, item)"
             />
@@ -89,7 +89,7 @@ export default {
 <script lang="ts" setup>
 import OxySwiperNav from '../oxy-swiper-nav/oxy-swiper-nav.vue'
 import { computed, watch, ref, getCurrentInstance, useSlots } from 'vue'
-import { addUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
+import { withDefaultUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
 import { swiperProps, type SwiperList } from './types'
 import type { SwiperNavProps } from '../oxy-swiper-nav/types'
 const slots = useSlots()

package/components/oxy-swiper/types.ts

@@ -86,10 +86,10 @@ export const swiperProps = {
 
   /**
    * 轮播的高度
-   * 类型：number 或 string（数字或可转换为数字的字符串）
-   * 默认值：'192'
+   * 类型：number 或 string（数字或纯数字字符串默认按 rpx 处理）
+   * 默认值：'384'
    */
-  height: makeNumericProp('192'),
+  height: makeNumericProp('384'),
 
   /**
    * 轮播间隔时间，单位为毫秒
@@ -131,7 +131,7 @@ export const swiperProps = {
 
   /**
    * 后边距
-   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 类型：number 或 string（数字或纯数字字符串默认按 rpx 处理）
    * 默认值：'0'
    */
   nextMargin: makeNumericProp('0'),
@@ -144,7 +144,7 @@ export const swiperProps = {
   indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
   /**
    * 前边距
-   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 类型：number 或 string（数字或纯数字字符串默认按 rpx 处理）
    * 默认值：'0'
    */
   previousMargin: makeNumericProp('0'),

package/components/oxy-switch/index.scss

@@ -24,22 +24,22 @@
     display: inline-block;
     width: $-switch-circle-size;
     height: $-switch-circle-size;
-    top: 2px;
-    left: 2px;
+    top: 4rpx;
+    left: 4rpx;
     background: #fff;
     border-radius: 50%;
     transition: left .3s ease-out;
-    box-shadow: 0 2px 4px 0 $-switch-inactive-shadow-color;
+    box-shadow: 0 4rpx 8rpx 0 $-switch-inactive-shadow-color;
 
     &::after {
       position: absolute;
       content: '';
-      width: calc(200% - 2px);
-      height: calc(200% - 2px);
+      width: calc(200% - 4rpx);
+      height: calc(200% - 4rpx);
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) scale(0.5);
-      border: 1px solid $-switch-border-color;
+      border: 2rpx solid $-switch-border-color;
       border-radius: 50%;
     }
   }
@@ -48,8 +48,8 @@
     border-color: $-switch-active-color;
 
     .oxy-switch__circle {
-      left: calc($-switch-width - $-switch-circle-size - 2px);
-      box-shadow: 0 2px 4px 0 $-switch-active-shadow-color
+      left: calc($-switch-width - $-switch-circle-size - 4rpx);
+      box-shadow: 0 4rpx 8rpx 0 $-switch-active-shadow-color
     }
   }
   @include when(disabled) {

package/components/oxy-switch/oxy-switch.vue

@@ -16,7 +16,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, type CSSProperties, onBeforeMount } from 'vue'
-import { addUnit, isFunction, objToStyle } from '../common/util'
+import { withDefaultUnit, isFunction, objToStyle } from '../common/util'
 import { switchProps } from './types'
 
 const props = defineProps(switchProps)
@@ -32,7 +32,7 @@ const rootStyle = computed(() => {
     'border-color': props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor
   }
   if (props.size) {
-    rootStyle['font-size'] = addUnit(props.size)
+    rootStyle['font-size'] = withDefaultUnit(props.size)
   }
   return `${objToStyle(rootStyle)}${props.customStyle}`
 })

package/components/oxy-switch/types.ts

@@ -45,7 +45,7 @@ export const switchProps = {
    */
   inactiveColor: String,
   /**
-   * 大小
+   * 大小，number 类型按 `rpx` 语义处理
    */
   size: {
     type: numericProp

package/components/oxy-tab/index.scss

@@ -13,4 +13,14 @@
       transition: height 0.3s ease-in-out;
     }
   }
-}
+}
+
+.is-fullscreen {
+  .oxy-tab {
+    height: 100%;
+    overflow: hidden;
+    .oxy-tab__body {
+      height: 100%;
+    }
+  }
+}

package/components/oxy-tabbar/index.scss

@@ -24,7 +24,7 @@
   @include m(round) {
     margin-left: 32rpx;
     margin-right: 32rpx;
-    border-radius: 999px;
+    border-radius: 999rpx;
     box-shadow: $-tabbar-box-shadow;
 
     @include when(fixed) {

package/components/oxy-tabbar/oxy-tabbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="{ 'oxy-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="{ height: addUnit(height) }">
+  <view :class="{ 'oxy-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="placeholderStyle">
     <view
       :class="`oxy-tabbar oxy-tabbar--${shape} ${customClass} ${fixed ? 'is-fixed' : ''} ${safeAreaInsetBottom ? 'is-safe' : ''} ${
         bordered ? 'is-border' : ''
@@ -23,14 +23,15 @@ export default {
 <script lang="ts" setup>
 import { getCurrentInstance, onMounted, ref, watch, nextTick, computed, type CSSProperties } from 'vue'
 import type { TabbarItem } from '../oxy-tabbar-item/types'
-import { addUnit, getRect, isDef, objToStyle } from '../common/util'
+import { getRect, isDef, objToStyle } from '../common/util'
 import { useChildren } from '../composables/useChildren'
+import { useWindowResize } from '../composables/useWindowResize'
 import { TABBAR_KEY, tabbarProps } from './types'
 
 const props = defineProps(tabbarProps)
 const emit = defineEmits(['change', 'update:modelValue'])
 
-const height = ref<number | string>('') // 占位高度
+const placeholderHeight = ref<number | string>('') // 占位高度（rpx 语义）
 const { proxy } = getCurrentInstance() as any
 
 const { linkChildren } = useChildren(TABBAR_KEY)
@@ -48,19 +49,26 @@ const rootStyle = computed(() => {
   return `${objToStyle(style)}${props.customStyle}`
 })
 
+const placeholderStyle = computed(() => {
+  if (!props.fixed || !props.placeholder) {
+    return {}
+  }
+  return {
+    height: `${Number(placeholderHeight.value) || 0}rpx`
+  }
+})
+
 watch(
-  [() => props.fixed, () => props.placeholder],
+  [() => props.fixed, () => props.placeholder, () => props.safeAreaInsetBottom, () => props.shape, () => props.customStyle],
   () => {
     setPlaceholderHeight()
   },
-  { deep: true, immediate: false }
+  { immediate: false }
 )
 
 onMounted(() => {
   if (props.fixed && props.placeholder) {
-    nextTick(() => {
-      setPlaceholderHeight()
-    })
+    setPlaceholderHeight()
   }
 })
 
@@ -76,13 +84,34 @@ function setChange(child: TabbarItem) {
   })
 }
 
+function handleWindowResize() {
+  if (props.fixed && props.placeholder) {
+    setPlaceholderHeight()
+  }
+}
+
+useWindowResize(handleWindowResize)
+
 function setPlaceholderHeight() {
   if (!props.fixed || !props.placeholder) {
+    placeholderHeight.value = ''
     return
   }
 
-  getRect('.oxy-tabbar', false, proxy).then((res) => {
-    height.value = Number(res.height)
+  nextTick(() => {
+    getRect('.oxy-tabbar', false, proxy)
+      .then((res) => {
+        const rectHeight = Number(res.height) || 0
+        const rectTop = Number(res.top)
+        const { windowHeight = 0, windowWidth = 0 } = uni.getSystemInfoSync()
+        const occupiedHeight = windowHeight && !Number.isNaN(rectTop) ? Math.max(windowHeight - rectTop, 0) : rectHeight
+        const occupiedHeightInRpx = windowWidth ? (occupiedHeight * 750) / windowWidth : occupiedHeight * 2
+
+        placeholderHeight.value = occupiedHeight ? occupiedHeightInRpx : ''
+      })
+      .catch(() => {
+        placeholderHeight.value = ''
+      })
   })
 }
 </script>

package/components/oxy-table/index.scss

@@ -55,7 +55,7 @@
 
   @include e(header) {
     width: 100%;
-    height: 50px;
+    height: 100rpx;
     position: sticky;
     top: 0;
     z-index: 2;
@@ -84,12 +84,12 @@
     align-items: center;
     box-sizing: border-box;
     background: $-table-bg;
-    width: 100px;
-    min-height: 50px;
-    padding: 8px 10px;
+    width: 200rpx;
+    min-height: 100rpx;
+    padding: 16rpx 20rpx;
     font-size: $-table-font-size;
     color: $-table-color;
-    --oxy-sort-button-height: 30px;
+    --oxy-sort-button-height: 60rpx;
 
     @include when(border) {
       border-right: 1px solid $-table-border-color;

package/components/oxy-table/oxy-table.vue

@@ -122,7 +122,7 @@ export default {
 import OxyTableCol from '../oxy-table-col/oxy-table-col.vue'
 import OxySortButton from '../oxy-sort-button/oxy-sort-button.vue'
 import { type CSSProperties, computed, reactive, ref } from 'vue'
-import { addUnit, debounce, isDef, isObj, objToStyle, uuid } from '../common/util'
+import { withDefaultUnit, debounce, isDef, isObj, objToStyle, uuid } from '../common/util'
 import type { SortDirection, TableColumn, TableColumnInstance, TableColumnProps } from '../oxy-table-col/types'
 import { TABLE_KEY, tableProps, type TableProvide } from './types'
 import { useTranslate } from '../composables/useTranslate'
@@ -160,7 +160,7 @@ const scroll = debounce(handleScroll, 100, { leading: false }) // 滚动事件
 const tableStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.height)) {
-    style['max-height'] = addUnit(props.height)
+    style['max-height'] = withDefaultUnit(props.height)
   }
   return `${objToStyle(style)}${props.customStyle}`
 })
@@ -171,7 +171,7 @@ const realWidthStyle = computed(() => {
   }
   let width: string | number = ''
   children.forEach((child) => {
-    width = width ? `${width} + ${addUnit(child.width)}` : addUnit(child.width)
+    width = width ? `${width} + ${withDefaultUnit(child.width)}` : withDefaultUnit(child.width)
   })
   style['width'] = `calc(${width})`
   return objToStyle(style)
@@ -180,7 +180,9 @@ const realWidthStyle = computed(() => {
 const bodyStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.height)) {
-    style['height'] = isDef(props.rowHeight) ? `calc(${props.data.length} * ${addUnit(props.rowHeight)})` : `calc(${props.data.length} * 50px)`
+    style['height'] = isDef(props.rowHeight)
+      ? `calc(${props.data.length} * ${withDefaultUnit(props.rowHeight)})`
+      : `calc(${props.data.length} * 100rpx)`
   }
   return `${objToStyle(style)}`
 })
@@ -208,7 +210,7 @@ function getIsLastFixed(column: { fixed: boolean; prop: string }) {
 function getCellStyle(columnIndex: number) {
   let style: CSSProperties = {}
   if (isDef(children[columnIndex].width)) {
-    style['width'] = addUnit(children[columnIndex].width)
+    style['width'] = withDefaultUnit(children[columnIndex].width)
   }
   if (children[columnIndex].fixed) {
     style = getFixedStyle(columnIndex, style)
@@ -225,7 +227,7 @@ function getFixedStyle(columnIndex: number, style: CSSProperties) {
     let left: string | number = ''
     children.forEach((column, index) => {
       if (index < columnIndex) {
-        left = left ? `${left} + ${addUnit(column.width)}` : addUnit(column.width)
+        left = left ? `${left} + ${withDefaultUnit(column.width)}` : withDefaultUnit(column.width)
       }
     })
     style['left'] = `calc(${left})`

package/components/oxy-table/types.ts

@@ -22,9 +22,9 @@ export const tableProps = {
    */
   height: numericProp,
   /**
-   * 行高
+   * 行高，number 类型按 `rpx` 语义处理
    */
-  rowHeight: makeNumericProp(50),
+  rowHeight: makeNumericProp(100),
   /**
    * 是否显示表头
    */

package/components/oxy-table-col/oxy-table-col.vue

@@ -28,7 +28,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { type CSSProperties, computed, ref } from 'vue'
-import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
+import { withDefaultUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
 import { tableColumnProps, type SortDirection } from './types'
 import { useParent } from '../composables/useParent'
 import { TABLE_KEY } from '../oxy-table/types'
@@ -87,7 +87,7 @@ const isLastFixed = computed(() => {
 const columnStyle = computed(() => {
   let style: CSSProperties = {}
   if (isDef(props.width)) {
-    style['width'] = addUnit(props.width)
+    style['width'] = withDefaultUnit(props.width)
   }
   if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
     style = table.getFixedStyle(columnIndex.value, style)
@@ -102,7 +102,7 @@ const cellStyle = computed(() => {
   let style: CSSProperties = {}
   const rowHeight: string | number = isDef(table) && isDef(table.props) ? table.props.rowHeight : 50 // 自定义行高
   if (isDef(rowHeight)) {
-    style['height'] = addUnit(rowHeight)
+    style['height'] = withDefaultUnit(rowHeight)
   }
   if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
     style = table.getFixedStyle(columnIndex.value, style)