oxy-uni-ui 1.2.3 → 2.1.0

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,39 +219,39 @@
       }
     }
     &.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;
-        background-color: #ffffff;
+        width: 32rpx;
+        height: 64rpx;
+        background-color: $-color-white;
         transform: skewX(30deg);
       }
       .oxy-corner__text {
         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

package/components/oxy-date-strip/oxy-date-strip.vue

@@ -58,7 +58,7 @@ export default {
 <script lang="ts" setup>
 import OxyDateStripItem from '../oxy-date-strip-item/oxy-date-strip-item.vue'
 import { ref, computed, watch, onMounted, nextTick, reactive } from 'vue'
-import { objToStyle, unitConvert } from '../common/util'
+import { objToStyle, unitConvertWithDefault } from '../common/util'
 import { getWeekRange, addDays, addWeeks, calcType, daysBetween } from './utils'
 import { dateStripProps, type WeekDateCollection, type DateStriPDay } from './types'
 
@@ -170,7 +170,7 @@ const onClick = (day: DateStriPDay) => {
 const scrollToDate = (date: Date) => {
   currentDate.value = date
   if (props.switchMode !== 'none') return
-  scrollLeft.value = unitConvert(props.gridWidth || 50) * daysBetween(date, minDate.value)
+  scrollLeft.value = unitConvertWithDefault(props.gridWidth, { defaultUnit: 'rpx' }) * daysBetween(date, minDate.value)
 }
 
 watch(

package/components/oxy-date-strip/types.ts

@@ -62,7 +62,7 @@ export const dateStripProps = {
     default: null
   },
   // 网格宽度
-  gridWidth: makeStringProp(''),
+  gridWidth: makeStringProp('100rpx'),
   // 主题色，对底部按钮和选中日期生效
   color: makeStringProp(''),
   // 选中日期的背景色

package/components/oxy-date-strip-item/index.scss

@@ -43,13 +43,13 @@
 		}
 		&--none {
 			.oxy-date-strip-item__grid-prefix {
-				padding-bottom: 4px;
-				padding-top: 4px;
+				padding-bottom: 8rpx;
+				padding-top: 8rpx;
 			}
 		}
 		&--circle {
 			.oxy-date-strip-item__grid-prefix {
-				padding-bottom: 4px;
+				padding-bottom: 8rpx;
 			}
 			.oxy-date-strip-item__grid-info {
 				border-radius: $-date-strip-grid-circle-radius;

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

@@ -21,7 +21,7 @@
 
     @include e(region) {
       color: $-dark-color;
-  
+
       @include when(active) {
         background: $-picker-region-bg-active-color;
         color: $-dark-color;
@@ -29,7 +29,7 @@
     }
   }
 }
- 
+
 
 @include b(datetime-picker) {
   @include edeep(cell) {
@@ -52,13 +52,13 @@
         font-size: $-cell-icon-size-large;
       }
     }
-    
+
     .oxy-cell__value--ellipsis {
       view {
         @include lineEllipsis;
         width: 100%;
       }
-      
+
       text {
         @include lineEllipsis;
         max-width: 100%;
@@ -69,7 +69,7 @@
   @include e(placeholder) {
     color: $-input-placeholder-color;
   }
-  
+
   @include edeep(arrow) {
     display: block;
     font-size: $-cell-icon-size;
@@ -85,7 +85,7 @@
   }
 
   @include edeep(popup) {
-    border-radius: 16px 16px 0px 0px;
+    border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
   }
 
   @include e(wraper) {
@@ -110,7 +110,7 @@
     font-size: $-picker-toolbar-fs;
     color: $-picker-toolbar-finish-color;
     background: transparent;
-    padding: 24px 15px 14px 15px;
+    padding: 48rpx 32rpx 32rpx 32rpx;
 
     @include m(cancel) {
       color: $-picker-toolbar-cancel-color;
@@ -135,9 +135,9 @@
     display: inline-block;
     color: $-picker-region-color;
     text-align: center;
-    padding: 14px 0;
+    padding: 32rpx 0;
     font-size: $-picker-region-fs;
-    line-height: 16px;
+    line-height: 32rpx;
     transition: all 0.15s ease-out;
 
     @include when(active) {
@@ -147,8 +147,8 @@
   }
 
   @include e(region-time) {
-    font-size: 16px;
-    margin-top: 2px;
+    font-size: $-picker-region-time-fs;
+    margin-top: 8rpx;
   }
 
   @include e(hidden) {

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

@@ -57,6 +57,7 @@
       position="bottom"
       :hide-when-close="false"
       :close-on-click-modal="closeOnClickModal"
+      :max-width="popupMaxWidth"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       :z-index="zIndex"
       :root-portal="rootPortal"

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

@@ -157,6 +157,11 @@ export const datetimePickerProps = {
    * 弹窗层级
    */
   zIndex: makeNumberProp(15),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
    */

package/components/oxy-drop-menu/index.scss

@@ -26,7 +26,7 @@
   @include e(list) {
     display: flex;
     text-align: center;
-    background-color: #fff;
+    background-color: $-drop-menu-bg;
   }
 
   @include e(item) {
@@ -66,9 +66,9 @@
     &::after {
       position: absolute;
       content: '';
-      width: 19px;
+      width: 38rpx;
       height: $-drop-menu-line-height;
-      bottom: 6px;
+      bottom: 12rpx;
       left: 50%;
       transform: translate(-50%, 0);
       background: $-drop-menu-line-color;
@@ -85,6 +85,6 @@
 
   @include edeep(arrow) {
     font-size: $-drop-menu-arrow-fs;
-    margin-left: 2px;
+    margin-left: 8rpx;
   }
-}
+}

package/components/oxy-drop-menu/oxy-drop-menu.vue

@@ -47,7 +47,7 @@ export default {
 import { computed, getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
 import { closeOther } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
-import { getRect, uuid } from '../common/util'
+import { getRect, unitConvert, uuid } from '../common/util'
 import { useChildren } from '../composables/useChildren'
 import { DROP_MENU_KEY, dropMenuProps } from './types'
 import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
@@ -59,10 +59,10 @@ const offset = ref<number>(0)
 const windowHeight = ref<number>(0)
 const modalStyle = computed(() => {
   return props.direction === 'down'
-    ? `top: calc(var(--window-top) + ${offset.value}px); bottom: 0;`
+    ? `top: calc(var(--window-top) + ${unitConvert(offset.value, 0, { output: 'px' })}); bottom: 0;`
     : props.direction === 'bottom'
     ? 'top: var(--window-top); bottom: 0;'
-    : `top: 0; bottom: calc(var(--window-bottom) + ${offset.value}px)`
+    : `top: 0; bottom: calc(var(--window-bottom) + ${unitConvert(offset.value, 0, { output: 'px' })})`
 })
 
 const { proxy } = getCurrentInstance() as any

package/components/oxy-drop-menu-item/index.scss

@@ -48,7 +48,7 @@
     display: inline-block;
     color: $-drop-menu-item-color-tip;
     font-size: $-drop-menu-item-fs-tip;
-    margin-left: 2px;
+    margin-left: 4rpx;
   }
 
   @include edeep(icon) {
@@ -60,7 +60,7 @@
     position: fixed;
     left: 0;
     right: 0;
-    background: rgba(0, 0, 0, 0.7);
+    background: $-drop-menu-modal-bg;
     height: 100%;
   }
-}
+}

package/components/oxy-drop-menu-item/oxy-drop-menu-item.vue

@@ -9,6 +9,7 @@
       :z-index="zIndex"
       :duration="duration"
       :position="position"
+      :max-width="popupMaxWidth"
       :custom-style="`position: absolute; pointer-events: auto; max-height: ${popupHeight ? popupHeight : '80%'}; ${customPopupStyle}`"
       :custom-class="customPopupClass"
       :modal="false"
@@ -61,7 +62,7 @@ import { type Queue, queueKey } from '../composables/useQueue'
 import type { PopupType } from '../oxy-popup/types'
 import { useParent } from '../composables/useParent'
 import { DROP_MENU_KEY } from '../oxy-drop-menu/types'
-import { isDef, isFunction } from '../common/util'
+import { isDef, isFunction, unitConvert } from '../common/util'
 import { dorpMenuItemProps, type DropMenuItemExpose } from './types'
 
 const props = defineProps(dorpMenuItemProps)
@@ -90,10 +91,10 @@ const positionStyle = computed(() => {
   if (showWrapper.value && dropMenu) {
     style =
       dropMenu.props.direction === 'down'
-        ? `top: calc(var(--window-top) + ${dropMenu.offset.value}px); bottom: 0;`
+        ? `top: calc(var(--window-top) + ${unitConvert(dropMenu.offset.value, 0, { output: 'px' })}); bottom: 0;`
         : dropMenu.props.direction === 'bottom'
         ? 'top: calc(var(--window-top); bottom: 0;'
-        : `top: 0; bottom: calc(var(--window-bottom) + ${dropMenu.offset.value}px)`
+        : `top: 0; bottom: calc(var(--window-bottom) + ${unitConvert(dropMenu.offset.value, 0, { output: 'px' })})`
   } else {
     style = ''
   }

package/components/oxy-drop-menu-item/types.ts

@@ -76,6 +76,11 @@ export const dorpMenuItemProps = {
    * 弹出层高度  这里设置了 就取这里的
    */
   popupHeight: makeStringProp(''),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
    */

package/components/oxy-echarts/types.ts

@@ -2,10 +2,16 @@ import type { ExtractPropTypes } from 'vue'
 import { type ComponentPublicInstance } from 'vue'
 import { type UniEchartsInst } from '../../uni-echarts'
 
+/**
+ * Echarts 组件属性
+ */
 export const echartsProps = {}
 
 export type EchartsProps = ExtractPropTypes<typeof echartsProps>
 export type EchartsExpose = {
+  /**
+   * 当前图表实例
+   */
   echartsInstance: UniEchartsInst | null
 }
 

package/components/oxy-fab/index.scss

@@ -67,44 +67,44 @@
     @include e(transition-enter) {
       @include m(top) {
         opacity: 0;
-        transform: translateY(40px);
+        transform: translateY(80rpx);
       }
 
       @include m(bottom) {
         opacity: 0;
-        transform: translateY(-40px);
+        transform: translateY(-80rpx);
       }
 
       @include m(left) {
         opacity: 0;
-        transform: translateX(40px);
+        transform: translateX(80rpx);
       }
 
       @include m(right) {
         opacity: 0;
-        transform: translateX(-40px);
+        transform: translateX(-80rpx);
       }
     }
 
     @include e(transition-leave-to) {
       @include m(top) {
         opacity: 0;
-        transform: translateY(40px);
+        transform: translateY(80rpx);
       }
 
       @include m(bottom) {
         opacity: 0;
-        transform: translateY(-40px);
+        transform: translateY(-80rpx);
       }
 
       @include m(left) {
         opacity: 0;
-        transform: translateX(40px);
+        transform: translateX(80rpx);
       }
 
       @include m(right) {
         opacity: 0;
-        transform: translateX(-40px);
+        transform: translateX(-80rpx);
       }
     }