oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-cell/index.scss

@@ -40,7 +40,7 @@
   -webkit-tap-highlight-color: transparent;
   box-sizing: border-box;
   width: 100%;
-  overflow: hidden;
+  // overflow: hidden;
 
   @include when(border) {
     .oxy-cell__wrapper {
@@ -54,7 +54,7 @@
     padding: $-cell-wrapper-padding $-cell-padding $-cell-wrapper-padding 0;
     justify-content: space-between;
     align-items: flex-start;
-    overflow: hidden;
+    // overflow: hidden;
 
     @include when(vertical) {
       display: block;
@@ -109,7 +109,7 @@
   }
 
   @include e(label) {
-    margin-top: 2px;
+    margin-top: 4rpx;
     font-size: $-cell-label-fs;
     color: $-cell-label-color;
   }
@@ -134,15 +134,15 @@
     font-size: $-cell-value-fs;
     color: $-cell-value-color;
     vertical-align: middle;
-    
+
     @include m(left) {
       text-align: left;
     }
-    
+
     @include m(right) {
       text-align: right;
     }
-    
+
     @include m(ellipsis) {
       @include lineEllipsis;
       min-width: 0;
@@ -151,7 +151,7 @@
 
   @include edeep(arrow-right) {
     display: block;
-    margin-left: 8px;
+    margin-left: 16rpx;
     width: $-cell-arrow-size;
     font-size: $-cell-arrow-size;
     color: $-cell-arrow-color;
@@ -203,4 +203,4 @@
       align-items: center;
     }
   }
-}
+}

package/components/oxy-checkbox/index.scss

@@ -84,7 +84,7 @@
     display: inline-block;
     width: $-checkbox-size;
     height: $-checkbox-size;
-    border: 2px solid $-checkbox-border-color;
+    border: 4rpx solid $-checkbox-border-color;
     border-radius: 50%;
     color: $-checkbox-check-color;
     background: $-checkbox-bg;
@@ -108,14 +108,14 @@
   @include edeep(btn-check) {
     display: inline-block;
     font-size: $-checkbox-icon-size;
-    margin-right: 4px;
+    margin-right: 8rpx;
     vertical-align: middle;
   }
 
   @include e(txt) {
     display: inline-block;
     vertical-align: middle;
-    line-height: 20px;
+    line-height: 40rpx;
     @include lineEllipsis;
   }
 
@@ -211,7 +211,7 @@
       height: $-checkbox-button-height;
       font-size: $-checkbox-button-font-size;
       margin-left: 0;
-      padding: 5px 15px;
+      padding: 10rpx 30rpx;
       border: 1px solid $-checkbox-button-border;
       background-color: $-checkbox-button-bg;
       border-radius: $-checkbox-button-radius;
@@ -276,18 +276,18 @@
 
   // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-box) {
-    padding: 13px 15px;
+    padding: 26rpx 30rpx;
     margin: 0;
 
     @include when(large) {
-      padding: 14px 15px;
+      padding: 28rpx 30rpx;
     }
   }
 
   @include when(button-box) {
     display: inline-flex;
     width: 33.3333%;
-    padding: 12px 12px 0 0;
+    padding: 24rpx 24rpx 0 0;
     box-sizing: border-box;
 
     .oxy-checkbox__label {

package/components/oxy-checkbox-group/index.scss

@@ -9,10 +9,10 @@
 @include b(checkbox-group) {
   background-color: $-checkbox-bg;
 
-  // 上下20px 左右15px 内部间隔12px
+  // 上下40rpx 左右30rpx 内部间隔24rpx
   @include when(button) {
     width: 100%;
-    padding: 8px 3px 20px 15px;
+    padding: 16rpx 6rpx 40rpx 30rpx;
     box-sizing: border-box;
     overflow: hidden;
     height: auto;

package/components/oxy-circle/oxy-circle.vue

@@ -29,7 +29,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
-import { addUnit, isObj, objToStyle, uuid } from '../common/util'
+import { isObj, objToStyle, unitConvert, unitConvertWithDefault, withDefaultUnit, uuid } from '../common/util'
 import { circleProps } from './types'
 // #ifdef MP-WEIXIN
 import { canvas2dAdapter } from '../common/canvasHelper'
@@ -55,10 +55,12 @@ const interval = ref<any>(null) // 定时器
 const pixelRatio = ref<number>(1) // 像素比
 const canvasId = ref<string>(`oxy-circle${uuid()}`) // canvasId
 let ctx: UniApp.CanvasContext | null = null
+const toNumber = (value: number | string | null | undefined) => unitConvertWithDefault(value, { defaultUnit: 'rpx' })
+const toPx = (value: number | string | null | undefined) => unitConvert(withDefaultUnit(value, 'rpx'), 0, { output: 'px' })
 
 // canvas渲染大小
 const canvasSize = computed(() => {
-  let size = props.size
+  let size = toNumber(props.size)
   // #ifdef MP-ALIPAY
   size = size * pixelRatio.value
   // #endif
@@ -68,7 +70,7 @@ const canvasSize = computed(() => {
 
 // 进度条宽度
 const sWidth = computed(() => {
-  let sWidth = props.strokeWidth
+  let sWidth = toNumber(props.strokeWidth)
   // #ifdef MP-ALIPAY
   sWidth = sWidth * pixelRatio.value
   // #endif
@@ -78,8 +80,8 @@ const sWidth = computed(() => {
 // Circle 样式
 const canvasStyle = computed(() => {
   const style = {
-    width: addUnit(props.size),
-    height: addUnit(props.size)
+    width: toPx(props.size),
+    height: toPx(props.size)
   }
   return `${objToStyle(style)}`
 })
@@ -148,8 +150,9 @@ function getContext() {
         if (res && res.node) {
           const canvas = res.node
           ctx = canvas2dAdapter(canvas.getContext('2d') as CanvasRenderingContext2D)
-          canvas.width = props.size * pixelRatio.value
-          canvas.height = props.size * pixelRatio.value
+          const size = toNumber(props.size)
+          canvas.width = size * pixelRatio.value
+          canvas.height = size * pixelRatio.value
           ctx.scale(pixelRatio.value, pixelRatio.value)
           resolve(ctx)
         }

package/components/oxy-circle/types.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 
 // 进度条端点的形状，可选值为 "butt" | "round" | "square"
 export type StrokeLinecapType = 'butt' | 'round' | 'square'
@@ -11,9 +11,9 @@ export const circleProps = {
    */
   modelValue: makeNumberProp(0),
   /**
-   * 圆环直径，默认单位为 px
+   * 圆环直径，支持 number / string（如 `200rpx`、`100px`），number 与纯数字字符串按 rpx 处理
    */
-  size: makeNumberProp(100),
+  size: makeNumericProp(200),
   /**
    * 进度条颜色，传入对象格式可以定义渐变色
    */
@@ -38,9 +38,9 @@ export const circleProps = {
    */
   text: String,
   /**
-   * 进度条宽度 单位px
+   * 进度条宽度，支持 number / string（如 `20rpx`、`10px`），number 与纯数字字符串按 rpx 处理
    */
-  strokeWidth: makeNumberProp(10),
+  strokeWidth: makeNumericProp(20),
   /**
    * 进度条端点的形状，可选值为 "butt" | "round" | "square"
    */

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

@@ -20,14 +20,14 @@ import { computed, watch } from 'vue'
 import { useParent } from '../composables/useParent'
 import { ROW_KEY } from '../oxy-row/types'
 import { colProps } from './types'
-import { isDef } from '../common/util'
+import { isDef, withDefaultUnit } from '../common/util'
 
 const props = defineProps(colProps)
 const { parent: row } = useParent(ROW_KEY)
 
 const rootStyle = computed(() => {
   const gutter = isDef(row) ? row.props.gutter || 0 : 0
-  const padding = `${gutter / 2}px`
+  const padding = withDefaultUnit(gutter / 2)
   const style = gutter > 0 ? `padding-left: ${padding}; padding-right: ${padding};background-clip: content-box;` : ''
   return `${style}${props.customStyle}`
 })

package/components/oxy-col-picker/index.scss

@@ -95,7 +95,7 @@
 
   @include e(selected-line) {
     position: absolute;
-    bottom: 5px;
+    bottom: 10rpx;
     width: $-col-picker-line-width;
     left: 0;
     height: $-col-picker-line-height;
@@ -141,18 +141,18 @@
   }
 
   @include e(list-item-tip) {
-    margin-top: 2px;
+    margin-top: 4rpx;
     font-size: $-col-picker-list-fs-tip;
     color: $-col-picker-list-color-tip;
   }
 
   @include e(confirm) {
-    padding: 12px 25px 14px;
+    padding: 24rpx 50rpx 28rpx;
   }
 
   @include edeep(checked) {
     display: block;
-    margin-left: 4px;
+    margin-left: 8rpx;
     font-size: $-col-picker-list-checked-icon-size;
     color: $-col-picker-list-color-checked;
     opacity: 0;

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

@@ -36,6 +36,7 @@
       :title="title || translate('title')"
       :close-on-click-modal="closeOnClickModal"
       :z-index="zIndex"
+      :max-width="popupMaxWidth"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       :root-portal="rootPortal"
       @open="handlePickerOpend"
@@ -106,7 +107,7 @@ import OxyLoading from '../oxy-loading/oxy-loading.vue'
 import OxyActionSheet from '../oxy-action-sheet/oxy-action-sheet.vue'
 import OxyCell from '../oxy-cell/oxy-cell.vue'
 import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties, type ComponentPublicInstance, reactive } from 'vue'
-import { addUnit, debounce, getRect, isArray, isBoolean, isDef, isFunction, objToStyle } from '../common/util'
+import { withDefaultUnit, debounce, getRect, isArray, isBoolean, isDef, isFunction, objToStyle, unitConvert } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import { colPickerProps, type ColPickerExpose } from './types'
 
@@ -453,15 +454,15 @@ function setLineStyle(animation: boolean = true) {
     .then((rects) => {
       const lineStyle: CSSProperties = {}
       if (isDef(lineWidth)) {
-        lineStyle.width = addUnit(lineWidth)
+        lineStyle.width = withDefaultUnit(lineWidth)
       }
       if (isDef(lineHeight)) {
-        lineStyle.height = addUnit(lineHeight)
-        lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
+        lineStyle.height = withDefaultUnit(lineHeight)
+        lineStyle.borderRadius = `calc(${withDefaultUnit(lineHeight)} / 2)`
       }
       const rect = rects[currentCol.value]
       let left = rects.slice(0, currentCol.value).reduce((prev, curr) => prev + Number(curr.width), 0) + Number(rect.width) / 2
-      lineStyle.transform = `translateX(${left}px) translateX(-50%)`
+      lineStyle.transform = `translateX(${unitConvert(left, 0, { output: 'px' })}) translateX(-50%)`
 
       if (animation) {
         lineStyle.transition = 'width 300ms ease, transform 300ms ease'

package/components/oxy-col-picker/types.ts

@@ -100,6 +100,11 @@ export const colPickerProps = {
    * 弹窗层级
    */
   zIndex: makeNumberProp(15),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 是否显示确定按钮
    */
@@ -129,11 +134,11 @@ export const colPickerProps = {
    */
   rules: makeArrayProp<FormItemRule>(),
   /**
-   * 底部条宽度，单位像素
+   * 底部条宽度，支持 `px/rpx`
    */
   lineWidth: numericProp,
   /**
-   * 底部条高度，单位像素
+   * 底部条高度，支持 `px/rpx`
    */
   lineHeight: numericProp,
   /**

package/components/oxy-collapse/index.scss

@@ -31,14 +31,14 @@
   @include e(more) {
     display: inline-block;
     font-size: $-collapse-retract-fs;
-    margin-top: 8px;
+    margin-top: 16rpx;
     color: $-collapse-more-color;
     user-select: none;
   }
   @include e(more-txt) {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 4px;
+    margin-right: 8rpx;
   }
   @include e(arrow) {
     display: inline-block;

package/components/oxy-collapse-item/oxy-collapse-item.vue

@@ -32,7 +32,7 @@ export default {
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties } from 'vue'
-import { addUnit, getRect, isArray, isDef, isPromise, isString, objToStyle, pause, uuid } from '../common/util'
+import { getRect, isArray, isDef, isPromise, isString, objToStyle, pause, unitConvert, uuid } from '../common/util'
 import { useParent } from '../composables/useParent'
 import { COLLAPSE_KEY } from '../oxy-collapse/types'
 import { collapseItemProps, type CollapseItemExpose } from './types'
@@ -64,9 +64,9 @@ const contentStyle = computed(() => {
     style.transition = 'height 0.3s ease-in-out'
   }
   if (!expanded.value) {
-    style.height = '0px'
+    style.height = '0'
   } else if (height.value) {
-    style.height = addUnit(height.value)
+    style.height = unitConvert(height.value, 0, { output: 'px' })
   }
   return objToStyle(style)
 })

package/components/oxy-corner/index.scss

@@ -11,8 +11,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    width: 80px;
-    height: 80px;
+    width: 160rpx;
+    height: 160rpx;
     overflow: hidden;
     @include when(round) {
       border-top-right-radius: $-corner-radius;
@@ -103,8 +103,8 @@
         }
         .oxy-corner__text {
           transform: rotate(-45deg);
-          top: 10px;
-          left: -26px;
+          top: 20rpx;
+          left: -52rpx;
         }
       }
       &.is-bottom-left{
@@ -117,8 +117,8 @@
         }
         .oxy-corner__text {
           transform: rotate(-135deg);
-          bottom: 10px;
-          left: -26px;
+          bottom: 20rpx;
+          left: -52rpx;
           top: auto;
           > span{
             transform: rotate(180deg);
@@ -136,8 +136,8 @@
         }
         .oxy-corner__text {
           transform: rotate(135deg);
-          bottom: 10px;
-          right: -26px;
+          bottom: 20rpx;
+          right: -52rpx;
           top: auto;
           > span{
             transform: rotate(180deg);
@@ -149,7 +149,7 @@
         &.is-top-left{
           &::after {
             left: auto;
-            right: -6px;
+            right: -12rpx;
             bottom: 0;
             transform: skewX(-30deg);
           }
@@ -158,15 +158,15 @@
             top: 0;
             left: 0;
             border-bottom-left-radius: 0;
-            border-bottom-right-radius: 32px;
+            border-bottom-right-radius: 64rpx;
             padding-left: 0;
-            padding-right: 12px;
+            padding-right: 24rpx;
           }
         }
         &.is-bottom-left{
           &::after {
             left: auto;
-            right: -6px;
+            right: -12rpx;
             bottom: 0;
             transform: skewX(30deg);
           }
@@ -175,9 +175,9 @@
             bottom: 0;
             left: 0;
             border-bottom-left-radius: 0;
-            border-top-right-radius: 32px;
+            border-top-right-radius: 64rpx;
             padding-left: 0;
-            padding-right: 12px;
+            padding-right: 24rpx;
             > span{
               transform: none;
             }
@@ -185,7 +185,7 @@
         }
         &.is-bottom-right{
           &::after {
-            left: -6px;
+            left: -12rpx;
             bottom: 0;
             transform: skewX(-30deg);
           }
@@ -194,7 +194,7 @@
             bottom: 0;
             right: 0;
             border-bottom-left-radius: 0;
-            border-top-left-radius: 32px;
+            border-top-left-radius: 64rpx;
             > span{
               transform: none;
             }
@@ -202,13 +202,13 @@
         }
       }
       .oxy-corner__text {
-        width: 106px;
-        height: 32px;
+        width: 212rpx;
+        height: 64rpx;
         position: absolute;
-        right: -26px;
-        top: 10px;
+        right: -52rpx;
+        top: 20rpx;
         text-align: center;
-        line-height: 32px;
+        line-height: 64rpx;
         overflow: hidden;
         transform: rotate(45deg);
         box-sizing: border-box;
@@ -219,27 +219,27 @@
       }
     }
     &.is-horizontal {
-      width: 160px;
-      height: 40px;
+      width: 320rpx;
+      height: 80rpx;
       .oxy-corner__text {
-        padding-right: 20px;
+        padding-right: 40rpx;
         box-sizing: border-box;
         font-size: $-corner-horizontal-font-size;
         font-weight: $-corner-horizontal-font-weight;
-        line-height: 40px;
+        line-height: 80rpx;
         text-align: right;
       }
     }
     &.is-embedded {
-      width: 106px;
-      height: 32px;
+      width: 212rpx;
+      height: 64rpx;
       &::after {
         content: '';
         position: absolute;
-        left: -6px;
+        left: -12rpx;
         bottom: 0;
-        width: 16px;
-        height: 32px;
+        width: 32rpx;
+        height: 64rpx;
         background-color: #ffffff;
         transform: skewX(30deg);
       }
@@ -247,11 +247,11 @@
         right: 0;
         top: 0;
         transform: none;
-        padding-left: 12px;
+        padding-left: 24rpx;
         box-sizing: border-box;
         font-size: $-corner-embedded-font-size;
         font-weight: $-corner-embedded-font-weight;
-        border-bottom-left-radius: 32px;
+        border-bottom-left-radius: 64rpx;
       }
     }
   }

package/components/oxy-count-to/oxy-count-to.vue

@@ -2,15 +2,15 @@
   <view :class="rootClass">
     <!-- 前缀插槽 -->
     <slot name="prefix">
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.prefix"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 1.4}rpx`" :text="props.prefix"></oxy-text>
     </slot>
     <!-- 默认文本插槽 -->
     <slot>
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize}px`" :text="timeText"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 2}rpx`" :text="timeText"></oxy-text>
     </slot>
     <!-- 后缀插槽 -->
     <slot name="suffix">
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.suffix"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 1.4}rpx`" :text="props.suffix"></oxy-text>
     </slot>
   </view>
 </template>

package/components/oxy-curtain/index.scss

@@ -33,53 +33,53 @@
   @include edeep(content-close) {
     position: absolute;
     margin: 0;
-    padding: 6px;
-    top: 10px;
-    right: 10px;
+    padding: 12rpx;
+    top: 20rpx;
+    right: 20rpx;
     color: $-curtain-content-close-color;
     font-size: $-curtain-content-close-fs;
     -webkit-tap-highlight-color: transparent;
     &.top {
-      margin: 0 0 0 -18px;
-      top: -62px;
+      margin: 0 0 0 -36rpx;
+      top: -124rpx;
       right: unset;
       left: 50%;
       bottom: unset;
     }
     &.top-left {
       margin: 0;
-      top: -62px;
+      top: -124rpx;
       right: unset;
-      left: -6px;
+      left: -12rpx;
       bottom: unset;
     }
     &.top-right {
       margin: 0;
-      top: -62px;
-      right: -6px;
+      top: -124rpx;
+      right: -12rpx;
       left: unset;
       bottom: unset;
     }
     &.bottom {
-      margin: 0 0 0 -18px;
+      margin: 0 0 0 -36rpx;
       top: unset;
       right: unset;
       left: 50%;
-      bottom: -62px;
+      bottom: -124rpx;
     }
     &.bottom-left {
       margin: 0;
       top: unset;
       right: unset;
-      left: -6px;
-      bottom: -62px;
+      left: -12rpx;
+      bottom: -124rpx;
     }
     &.bottom-right {
       margin: 0;
       top: unset;
-      right: -6px;
+      right: -12rpx;
       left: unset;
-      bottom: -62px;
+      bottom: -124rpx;
     }
   }
 }

package/components/oxy-curtain/oxy-curtain.vue

@@ -6,6 +6,7 @@
       position="center"
       :close-on-click-modal="closeOnClickModal"
       :hide-when-close="hideWhenClose"
+      :max-width="popupMaxWidth"
       :z-index="zIndex"
       :root-portal="rootPortal"
       @before-enter="beforeenter"
@@ -57,6 +58,7 @@ export default {
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyPopup from '../oxy-popup/oxy-popup.vue'
 import { computed, ref, watch } from 'vue'
+import { withDefaultUnit } from '../common/util'
 import { curtainProps } from './types'
 
 const props = defineProps(curtainProps)
@@ -105,8 +107,8 @@ const imgScale = ref<number>(1)
 const imgStyle = computed(() => {
   let style = ''
   if (props.width) {
-    style += `width: ${props.width}px ;`
-    style += `height: ${props.width / imgScale.value}px`
+    style += `width: ${withDefaultUnit(props.width)};`
+    style += `height: ${withDefaultUnit(props.width / imgScale.value)}`
   }
   return style
 })

package/components/oxy-curtain/types.ts

@@ -27,7 +27,7 @@ export const curtainProps = {
    */
   to: String,
   /**
-   * 幕帘图片宽度
+   * 幕帘图片宽度，number 类型按 `rpx` 语义处理
    */
   width: Number,
   /**
@@ -44,6 +44,11 @@ export const curtainProps = {
    * 默认值：10
    */
   zIndex: makeNumberProp(10),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 自定义关闭按钮的类名
    * 类型：string