oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-signature/types.ts

@@ -1,65 +1,122 @@
 import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
-import { baseProps, numericProp } from '../common/props'
+import { baseProps, makeNumericProp, numericProp } from '../common/props'
 
 export const signatureProps = {
   ...baseProps,
+  /**
+   * 画笔颜色
+   */
   penColor: {
     type: String,
     default: '#000'
   },
-  lineWidth: {
-    type: Number,
-    default: 3
-  },
+  /**
+   * 画笔线宽，支持 number / string（如 '6rpx'、'3px'），number 与纯数字字符串按 rpx 处理
+   */
+  lineWidth: makeNumericProp(6),
+  /**
+   * 清空按钮文案
+   */
   clearText: String,
+  /**
+   * 撤销按钮文案
+   */
   revokeText: String,
+  /**
+   * 恢复按钮文案
+   */
   restoreText: String,
+  /**
+   * 确认按钮文案
+   */
   confirmText: String,
+  /**
+   * 导出图片格式
+   */
   fileType: {
     type: String,
     default: 'png'
   },
+  /**
+   * 导出质量
+   */
   quality: {
     type: Number,
     default: 1
   },
+  /**
+   * 导出缩放比例
+   */
   exportScale: {
     type: Number,
     default: 1
   },
+  /**
+   * 是否禁用签名操作
+   */
   disabled: {
     type: Boolean,
     default: false
   },
+  /**
+   * 画布高度，支持 number / string（如 '600rpx'、'300px'），number 与纯数字字符串按 rpx 处理
+   */
   height: numericProp,
+  /**
+   * 画布宽度，支持 number / string（如 '100%'、'700rpx'），number 与纯数字字符串按 rpx 处理
+   */
   width: numericProp,
+  /**
+   * 画布背景色
+   */
   backgroundColor: String,
+  /**
+   * 是否禁用页面滚动
+   */
   disableScroll: {
     type: Boolean,
     default: true
   },
+  /**
+   * 是否启用历史记录
+   */
   enableHistory: {
     type: Boolean,
     default: false
   },
+  /**
+   * 每次记录步进
+   */
   step: {
     type: Number,
     default: 1
   },
+  /**
+   * 撤销文案
+   */
   undoText: String,
+  /**
+   * 重做文案
+   */
   redoText: String,
+  /**
+   * 是否启用压感
+   */
   pressure: {
     type: Boolean,
     default: false
   },
-  minWidth: {
-    type: Number,
-    default: 2
-  },
-  maxWidth: {
-    type: Number,
-    default: 6
-  },
+  /**
+   * 压感最小线宽，支持 number / string（如 '4rpx'、'2px'），number 与纯数字字符串按 rpx 处理
+   */
+  minWidth: makeNumericProp(4),
+  /**
+   * 压感最大线宽，支持 number / string（如 '12rpx'、'6px'），number 与纯数字字符串按 rpx 处理
+   */
+  maxWidth: makeNumericProp(12),
+  /**
+   * 压感最小速度阈值
+   */
   minSpeed: {
     type: Number,
     default: 1.5
@@ -67,23 +124,59 @@ export const signatureProps = {
 }
 
 export type SignatureResult = {
+  /**
+   * 临时文件路径
+   */
   tempFilePath: string
+  /**
+   * 导出是否成功
+   */
   success: boolean
+  /**
+   * 导出宽度
+   */
   width: number
+  /**
+   * 导出高度
+   */
   height: number
 }
 
 export interface Line {
+  /**
+   * 线段点集合
+   */
   points: Point[]
+  /**
+   * 线段颜色
+   */
   color: string
+  /**
+   * 线段宽度
+   */
   width: number
+  /**
+   * 背景色
+   */
   backgroundColor?: string
+  /**
+   * 是否启用压感
+   */
   isPressure?: boolean
 }
 
 export interface Point {
+  /**
+   * x 坐标
+   */
   x: number
+  /**
+   * y 坐标
+   */
   y: number
+  /**
+   * 时间戳
+   */
   t: number
   speed?: number
   distance?: number

package/components/oxy-skeleton/oxy-skeleton.vue

@@ -24,16 +24,16 @@ import type { CSSProperties } from 'vue'
 import { ref, computed, watch } from 'vue'
 import type { SkeletonRowCol, SkeletonRowColObj } from './types'
 import { skeletonProps } from './types'
-import { isNumber, addUnit } from '../common/util'
+import { isNumber, withDefaultUnit } from '../common/util'
 
 const themeMap = {
-  avatar: [{ type: 'circle', height: '64px', width: '64px' }],
-  image: [{ type: 'rect', height: '64px', width: '64px' }],
+  avatar: [{ type: 'circle', height: '128rpx', width: '128rpx' }],
+  image: [{ type: 'rect', height: '128rpx', width: '128rpx' }],
   text: [
     1,
     [
-      { width: '24%', height: '16px', marginRight: '16px' },
-      { width: '76%', height: '16px' }
+      { width: '24%', height: '32rpx', marginRight: '32rpx' },
+      { width: '76%', height: '32rpx' }
     ]
   ],
   paragraph: [1, 1, 1, { width: '55%' }]
@@ -81,7 +81,7 @@ function getColItemStyle(rowCol: SkeletonRowColObj) {
 
   for (const name of styleName) {
     if (Object.prototype.hasOwnProperty.call(rowCol, name)) {
-      const px = addUnit(rowCol[name])
+      const px = withDefaultUnit(rowCol[name])
 
       if (name === 'size') {
         style.width = px

package/components/oxy-skeleton/types.ts

@@ -36,7 +36,7 @@ export const skeletonProps = {
    * 用于设置行列数量、宽度高度、间距等。
    * @example
    * 【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。
-   * 【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。
+   * 【示例二】，`[1, 1, { width: '200rpx' }]` 表示自定义第三行的宽度为 `200rpx`。
    * 【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距
    */
   rowCol: makeArrayProp<SkeletonRowCol>(),

package/components/oxy-slider/index.scss

@@ -41,7 +41,7 @@
     background-color: rgba($color: #fff, $alpha: 0.5);
     border-radius: 100%;
     position: absolute;
-    bottom: calc($-slider-handle-radius * 2 + 8px);
+    bottom: calc($-slider-handle-radius * 2 + 16rpx);
   }
   @include e(bar-wrapper) {
     flex: 1;
@@ -70,7 +70,7 @@
     }
   }
   @include e(has-label) {
-    padding-top: calc($-slider-fs * 1.2 + 8px);
+    padding-top: calc($-slider-fs * 1.2 + 16rpx);
   }
   @include e(button) {
     height: calc($-slider-handle-radius * 2);
@@ -79,7 +79,7 @@
     border-radius: 100%;
     border: 1px solid $-slider-axie-bg;
     box-sizing: border-box;
-    box-shadow: 0 2px 4px 0 rgba($color: #9b9b9b, $alpha: 0.5);
+    box-shadow: 0 4rpx 8rpx 0 rgba($color: #9b9b9b, $alpha: 0.5);
   }
   @include e(label-min) {
     margin-right: calc($-slider-handle-radius * 2);

package/components/oxy-sort-button/index.scss

@@ -20,9 +20,9 @@
       &::after {
         position: absolute;
         content: '';
-        width: 19px;
-        height: 3px;
-        bottom: 6px;
+        width: 38rpx;
+        height: 6rpx;
+        bottom: 12rpx;
         left: 50%;
         transform: translate(-50%, 0);
         background: $-sort-button-line-color;
@@ -61,8 +61,8 @@
 
   @include e(right) {
     display: inline-block;
-    min-width: 14px;
-    margin-left: 2px;
+    min-width: 28rpx;
+    margin-left: 4rpx;
     vertical-align: middle;
     line-height: 1.1;
 
@@ -78,12 +78,12 @@
   @include edeep(icon-up) {
     display: block !important;
     line-height: 1.1;
-    transform: scale(calc((10 / 14))) translate(0, 7px);
+    transform: scale(calc((10 / 14))) translate(0, 14rpx);
   }
 
   @include edeep(icon-down) {
     display: block !important;
     line-height: 1.1;
-    transform: scale(calc((10 / 14))) translate(0, -7px);
+    transform: scale(calc((10 / 14))) translate(0, -14rpx);
   }
-}
+}

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

@@ -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: 14rpx;
     color: $-steps-inactive-color;
     font-size: $-steps-label-fs;
   }
@@ -118,8 +118,8 @@
     }
   }
   @include e(description) {
-    margin-top: 5px;
-    padding: 0 2px;
+    margin-top: 10rpx;
+    padding: 0 4rpx;
     color: $-steps-description-color;
   }
   @include when(wait) {
@@ -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)
 })

package/components/oxy-stream-render/index.scss

@@ -0,0 +1,6 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(stream-render) {
+  display: none;
+}