oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-calendar-view/year/index.scss

@@ -27,7 +27,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 45px;
+    height: 90rpx;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
   }
@@ -58,7 +58,7 @@
     }
 
     @include when(selected) {
-      color: #fff;
+      color: $-calendar-selected-color;
 
       .oxy-year__month-text {
         border-radius: $-calendar-active-border;
@@ -133,7 +133,7 @@
 
   @include e(month-top) {
     position: absolute;
-    top: 10px;
+    top: 20rpx;
     left: 0;
     right: 0;
     line-height: 1.1;
@@ -143,11 +143,11 @@
 
   @include e(month-bottom) {
     position: absolute;
-    bottom: 10px;
+    bottom: 20rpx;
     left: 0;
     right: 0;
     line-height: 1.1;
     font-size: $-calendar-info-fs;
     text-align: center;
   }
-}
+}

package/components/oxy-calendar-view/yearPanel/index.scss

@@ -5,7 +5,7 @@
   @include b(year-panel) {
     @include e(title) {
       color: $-dark-color;
-      box-shadow: 0px 4px 8px 0 rgba(255, 255,255, 0.02);
+      box-shadow: $-calendar-panel-shadow-dark;
     }
   }
 }
@@ -15,10 +15,10 @@
   padding: $-calendar-panel-padding;
 
   @include e(title) {
-    padding: 5px 0;
+    padding: 16rpx 0;
     text-align: center;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
-    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+    box-shadow: $-calendar-panel-shadow-light;
   }
-}
+}

package/components/oxy-calendar-view/yearPanel/year-panel.vue

@@ -1,7 +1,13 @@
 <template>
   <view class="oxy-year-panel">
     <view v-if="showPanelTitle" class="oxy-year-panel__title">{{ title }}</view>
-    <scroll-view class="oxy-year-panel__container" :style="`height: ${scrollHeight}px`" scroll-y @scroll="yearScroll" :scroll-top="scrollTop">
+    <scroll-view
+      class="oxy-year-panel__container"
+      :style="`height: ${unitConvert(scrollHeight, 0, { output: 'px' })}`"
+      scroll-y
+      @scroll="yearScroll"
+      :scroll-top="scrollTop"
+    >
       <view v-for="(item, index) in years" :key="index" :id="`year${index}`">
         <year
           :type="type"
@@ -34,7 +40,7 @@ export default {
 <script lang="ts" setup>
 import { computed, ref, onMounted } from 'vue'
 import { compareYear, formatYearTitle, getYears } from '../utils'
-import { isArray, isNumber, pause } from '../../common/util'
+import { isArray, isNumber, pause, unitConvert } from '../../common/util'
 import Year from '../year/year.vue'
 import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
 
@@ -44,9 +50,19 @@ const emit = defineEmits(['change'])
 const scrollTop = ref<number>(0) // 滚动位置
 const scrollIndex = ref<number>(0) // 当前显示的年份索引
 
+const designPxToRuntimePx = (designPx: number): number => unitConvert(`${designPx * 2}rpx`)
+const YEAR_MONTH_HEIGHT = designPxToRuntimePx(64)
+const YEAR_MONTH_GAP = designPxToRuntimePx(4)
+const YEAR_TITLE_HEIGHT = designPxToRuntimePx(45)
+const PANEL_EXTRA_WITH_TITLE = designPxToRuntimePx(26)
+const PANEL_EXTRA_NO_TITLE = designPxToRuntimePx(16)
+const YEAR_HEIGHT_WITHOUT_TITLE = YEAR_MONTH_HEIGHT * 3 + YEAR_MONTH_GAP * 2
+const YEAR_HEIGHT_WITH_TITLE = YEAR_HEIGHT_WITHOUT_TITLE + YEAR_TITLE_HEIGHT
+
 // 滚动区域的高度
 const scrollHeight = computed(() => {
-  const scrollHeight: number = props.panelHeight + (props.showPanelTitle ? 26 : 16)
+  const panelHeight = designPxToRuntimePx(props.panelHeight)
+  const scrollHeight: number = panelHeight + (props.showPanelTitle ? PANEL_EXTRA_WITH_TITLE : PANEL_EXTRA_NO_TITLE)
   return scrollHeight
 })
 
@@ -55,7 +71,7 @@ const years = computed<YearInfo[]>(() => {
   return getYears(props.minDate, props.maxDate).map((year, index) => {
     return {
       date: year,
-      height: index === 0 ? 200 : 245
+      height: index === 0 ? YEAR_HEIGHT_WITHOUT_TITLE : YEAR_HEIGHT_WITH_TITLE
     }
   })
 })
@@ -92,7 +108,7 @@ async function scrollIntoView() {
   scrollTop.value = 0
   if (top > 0) {
     await pause()
-    scrollTop.value = top + 45
+    scrollTop.value = top + YEAR_TITLE_HEIGHT
   }
 }
 

package/components/oxy-card/index.scss

@@ -31,7 +31,7 @@
   border-radius: $-card-radius;
   box-shadow: $-card-shadow-color;
   font-size: $-card-fs;
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
 
   @include when(rectangle) {
     margin-left: 0;
@@ -56,7 +56,7 @@
     }
   }
   @include e(title-content) {
-    padding: 16px 0;
+    padding: 32rpx 0;
     color: $-card-title-color;
     font-size: $-card-title-fs;
   }

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: 8rpx;
     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

@@ -39,16 +39,16 @@
 
       @include when(button) {
         .oxy-checkbox__label {
-          border-color: #c8c9cc;
-          background: #3a3a3c;
+          border-color: $-color-gray-5;
+          background: $-dark-border-color;
           color: $-dark-color-gray;
         }
 
         @include when(checked) {
           .oxy-checkbox__label {
-            border-color: #c8c9cc;
-            background: #3a3a3c;
-            color: #c8c9cc;
+            border-color: $-color-gray-5;
+            background: $-dark-border-color;
+            color: $-color-gray-5;
           }
         }
       }
@@ -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: 48rpx;
     @include lineEllipsis;
   }
 
@@ -211,7 +211,7 @@
       height: $-checkbox-button-height;
       font-size: $-checkbox-button-font-size;
       margin-left: 0;
-      padding: 5px 15px;
+      padding: 16rpx 32rpx;
       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: 32rpx 32rpx;
     margin: 0;
 
     @include when(large) {
-      padding: 14px 15px;
+      padding: 32rpx 32rpx;
     }
   }
 
   @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
+  // 顶部与两侧留白适当放大，避免按钮组在16px基准字号下过于紧凑
   @include when(button) {
     width: 100%;
-    padding: 8px 3px 20px 15px;
+    padding: 24rpx 32rpx 40rpx 32rpx;
     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: 12rpx;
     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: 8rpx;
     font-size: $-col-picker-list-fs-tip;
     color: $-col-picker-list-color-tip;
   }
 
   @include e(confirm) {
-    padding: 12px 25px 14px;
+    padding: 28rpx 52rpx 32rpx;
   }
 
   @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)
 })