oxy-uni-ui 1.2.3 → 2.1.0

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

@@ -1,8 +1,9 @@
 <template>
   <view>
     <oxy-popup
-      custom-class="oxy-action-sheet__popup"
-      :custom-style="`${(actions && actions.length) || (panels && panels.length) ? 'background: transparent;' : ''}`"
+      :custom-class="popupClass"
+      :custom-style="customStyle"
+      :max-width="maxWidth"
       v-model="showPopup"
       :duration="duration"
       position="bottom"
@@ -17,20 +18,13 @@
       @click-modal="handleClickModal"
       :z-index="zIndex"
     >
-      <view
-        :class="`oxy-action-sheet ${customClass}`"
-        :style="`${
-          (actions && actions.length) || (panels && panels.length)
-            ? 'margin: 0 10px calc(var(--window-bottom) + 10px) 10px; border-radius: 16px;'
-            : 'margin-bottom: var(--window-bottom);'
-        } ${customStyle}`"
-      >
+      <view :class="['oxy-action-sheet', { 'is-float': isFloatMode }, customClass]">
         <view v-if="title" :class="`oxy-action-sheet__header ${customHeaderClass}`">
           {{ title }}
           <oxy-icon custom-class="oxy-action-sheet__close" name="add" @click="close" />
         </view>
         <view class="oxy-action-sheet__actions" v-if="actions && actions.length">
-          <button
+          <view
             v-for="(action, rowIndex) in actions"
             :key="rowIndex"
             :class="`oxy-action-sheet__action ${action.disabled ? 'oxy-action-sheet__action--disabled' : ''}  ${
@@ -42,20 +36,20 @@
             <oxy-loading custom-class="`oxy-action-sheet__action-loading" v-if="action.loading" />
             <view v-else class="oxy-action-sheet__name">{{ action.name }}</view>
             <view v-if="!action.loading && action.subname" class="oxy-action-sheet__subname">{{ action.subname }}</view>
-          </button>
+          </view>
         </view>
         <view v-if="formatPanels && formatPanels.length">
           <view v-for="(panel, rowIndex) in formatPanels" :key="rowIndex" class="oxy-action-sheet__panels">
             <view class="oxy-action-sheet__panels-content">
               <view v-for="(col, colIndex) in panel" :key="colIndex" class="oxy-action-sheet__panel" @click="select(rowIndex, 'panels', colIndex)">
-                <image class="oxy-action-sheet__panel-img" :src="(col as any).iconUrl" />
-                <view class="oxy-action-sheet__panel-title">{{ (col as any).title }}</view>
+                <image class="oxy-action-sheet__panel-img" :src="col.iconUrl" />
+                <view class="oxy-action-sheet__panel-title">{{ col.title }}</view>
               </view>
             </view>
           </view>
         </view>
         <slot />
-        <button v-if="cancelText" class="oxy-action-sheet__cancel" @click="handleCancel">{{ cancelText }}</button>
+        <view v-if="cancelText" class="oxy-action-sheet__cancel" @click="handleCancel">{{ cancelText }}</view>
       </view>
     </oxy-popup>
   </view>
@@ -75,17 +69,25 @@ export default {
 import OxyPopup from '../oxy-popup/oxy-popup.vue'
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyLoading from '../oxy-loading/oxy-loading.vue'
-import { watch, ref } from 'vue'
+import { computed, watch, ref } from 'vue'
 import { actionSheetProps, type Panel } from './types'
 import { isArray } from '../common/util'
 
 const props = defineProps(actionSheetProps)
 const emit = defineEmits(['select', 'click-modal', 'cancel', 'closed', 'close', 'open', 'opened', 'update:modelValue'])
 
-const formatPanels = ref<Array<Panel> | Array<Panel[]>>([])
+const formatPanels = ref<Panel[][]>([])
 
 const showPopup = ref<boolean>(false)
 
+const isFloatMode = computed(() => {
+  return !!((props.actions && props.actions.length) || (props.panels && props.panels.length))
+})
+
+const popupClass = computed(() => {
+  return `oxy-action-sheet__popup ${isFloatMode.value ? 'oxy-action-sheet__popup--float' : ''}`
+})
+
 watch(() => props.panels, computedValue, { deep: true, immediate: true })
 
 watch(
@@ -113,13 +115,19 @@ function select(rowIndex: number, type: 'action' | 'panels', colIndex?: number)
       index: rowIndex
     })
   } else if (isPanelArray()) {
+    if (typeof colIndex !== 'number') {
+      return
+    }
     emit('select', {
-      item: props.panels[Number(colIndex)],
+      item: props.panels[colIndex],
       index: colIndex
     })
   } else {
+    if (typeof colIndex !== 'number') {
+      return
+    }
     emit('select', {
-      item: (props.panels as Panel[][])[rowIndex][Number(colIndex)],
+      item: (props.panels as Panel[][])[rowIndex][colIndex],
       rowIndex,
       colIndex
     })

package/components/oxy-action-sheet/types.ts

@@ -95,6 +95,13 @@ export const actionSheetProps = {
    * @type {number}
    */
   zIndex: makeNumberProp(10),
+  /**
+   * 面板最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   * @default '1200rpx'
+   * @type {string}
+   */
+  maxWidth: makeStringProp('1200rpx'),
   /**
    * 弹层内容懒渲染，触发展示时才渲染内容
    * @default true

package/components/oxy-backtop/index.scss

@@ -4,8 +4,8 @@
 @include b(backtop) {
   position: fixed;
   background-color: $-backtop-bg;
-  width: 40px;
-  height: 40px;
+  width: 80rpx;
+  height: 80rpx;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -20,6 +20,6 @@
   }
 
   @include when(square) {
-    border-radius: 4px;
+    border-radius: $-backtop-square-radius;
   }
-}
+}

package/components/oxy-backtop/oxy-backtop.vue

@@ -1,10 +1,6 @@
 <template>
   <oxy-transition :show="show" name="fade">
-    <view
-      :class="`oxy-backtop ${customClass} is-${shape}`"
-      :style="`z-index: ${zIndex}; bottom: ${bottom}px; right: ${right}px; ${customStyle}`"
-      @click="handleBacktop"
-    >
+    <view :class="`oxy-backtop ${customClass} is-${shape}`" :style="rootStyle" @click="handleBacktop">
       <slot v-if="$slots.default"></slot>
       <oxy-icon v-else custom-class="oxy-backtop__backicon" name="backtop" :custom-style="iconStyle" />
     </view>
@@ -26,11 +22,18 @@ export default {
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { computed } from 'vue'
+import { unitConvertWithDefault, withDefaultUnit } from '../common/util'
 import { backtopProps } from './types'
 
 const props = defineProps(backtopProps)
 
-const show = computed(() => props.scrollTop > props.top)
+const thresholdTop = computed(() => unitConvertWithDefault(props.top, { defaultUnit: 'rpx' }))
+const show = computed(() => props.scrollTop > thresholdTop.value)
+const rootStyle = computed(() => {
+  return `z-index: ${props.zIndex}; bottom: ${withDefaultUnit(props.bottom, 'rpx')}; right: ${withDefaultUnit(props.right, 'rpx')}; ${
+    props.customStyle
+  }`
+})
 
 function handleBacktop() {
   uni.pageScrollTo({

package/components/oxy-backtop/types.ts

@@ -1,4 +1,4 @@
-import { baseProps, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import { baseProps, makeNumberProp, makeNumericProp, makeRequiredProp, makeStringProp } from '../common/props'
 
 export const backtopProps = {
   ...baseProps,
@@ -7,9 +7,9 @@ export const backtopProps = {
    */
   scrollTop: makeRequiredProp(Number),
   /**
-   * 距离顶部多少距离时显示
+   * 距离顶部多少距离时显示，支持 `px/rpx`；number 或纯数字字符串按 `rpx` 处理
    */
-  top: makeNumberProp(300),
+  top: makeNumericProp(600),
   /**
    * 返回顶部滚动时间
    */
@@ -27,11 +27,11 @@ export const backtopProps = {
    */
   shape: makeStringProp('circle'),
   /**
-   * 距离屏幕底部距离
+   * 距离屏幕底部距离，支持 `px/rpx`；number 或纯数字字符串按 `rpx` 处理
    */
-  bottom: makeNumberProp(100),
+  bottom: makeNumericProp(200),
   /**
-   * 距离屏幕右边距离
+   * 距离屏幕右边距离，支持 `px/rpx`；number 或纯数字字符串按 `rpx` 处理
    */
-  right: makeNumberProp(20)
+  right: makeNumericProp(40)
 }

package/components/oxy-badge/index.scss

@@ -22,7 +22,7 @@
     line-height: $-badge-height;
     padding: $-badge-padding;
     background-color: $-badge-bg;
-    border-radius: calc($-badge-height / 2 + 2px);
+    border-radius: calc($-badge-height / 2 + 4rpx);
     color: $-badge-color;
     font-size: $-badge-fs;
     text-align: center;
@@ -32,8 +32,8 @@
 
     @include when(fixed) {
       position: absolute;
-      top: 0px;
-      right: 0px;
+      top: 0;
+      right: 0;
       transform: translateY(-50%) translateX(50%);
     }
 
@@ -60,4 +60,4 @@
       }
     }
   }
-}
+}

package/components/oxy-badge/oxy-badge.vue

@@ -23,7 +23,7 @@ export default {
 <script lang="ts" setup>
 import { computed, type CSSProperties } from 'vue'
 import { badgeProps } from './types'
-import { addUnit, isDef, isNumber, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, isNumber, objToStyle } from '../common/util'
 
 const props = defineProps(badgeProps)
 const content = computed(() => {
@@ -43,11 +43,11 @@ const contentStyle = computed(() => {
   }
 
   if (isDef(props.top)) {
-    style.top = addUnit(props.top)
+    style.top = withDefaultUnit(props.top)
   }
 
   if (isDef(props.right)) {
-    style.right = addUnit(props.right)
+    style.right = withDefaultUnit(props.right)
   }
   return objToStyle(style)
 })

package/components/oxy-badge/types.ts

@@ -29,11 +29,11 @@ export const badgeProps = {
    */
   type: makeStringProp<BadgeType | undefined>(undefined),
   /**
-   * 为正时，角标向下偏移对应的像素
+   * 为正时，角标向下偏移距离，支持 `px/rpx`
    */
   top: numericProp,
   /**
-   * 为正时，角标向左偏移对应的像素
+   * 为正时，角标向左偏移距离，支持 `px/rpx`
    */
   right: numericProp
 }

package/components/oxy-button/index.scss

@@ -97,7 +97,7 @@
   }
 
   @include e(loading) {
-    margin-right: 5px;
+    margin-right: 12rpx;
     animation: oxy-rotate 0.8s linear infinite;
     animation-duration: 2s;
   }
@@ -154,7 +154,7 @@
     padding: $-button-medium-padding;
     border-radius: $-button-medium-radius;
     font-size: $-button-medium-fs;
-    min-width: 120px;
+    min-width: 240rpx;
 
 
     @include when(round) {
@@ -194,13 +194,13 @@
 
 
   @include when(round) {
-    border-radius: 999px;
+    border-radius: $-button-round-radius;
   }
 
   @include when(text) {
     color: $-button-primary-bg-color;
     min-width: 0;
-    padding: 4px 0;
+    padding: 8rpx 0;
 
     &::after {
       display: none;
@@ -314,7 +314,7 @@
 
   @include edeep(icon) {
     display: block;
-    margin-right: 6px;
+    margin-right: 12rpx;
     font-size: $-button-icon-fs;
     vertical-align: middle;
   }

package/components/oxy-button/oxy-button.vue

@@ -17,7 +17,7 @@
     ]"
     :hover-start-time="hoverStartTime"
     :hover-stay-time="hoverStayTime"
-    :open-type="disabled || loading ? undefined : openType"
+    :open-type="openTypeValue"
     :send-message-title="sendMessageTitle"
     :send-message-path="sendMessagePath"
     :send-message-img="sendMessageImg"
@@ -98,6 +98,10 @@ const loadingStyle = computed(() => {
   return `background-image: url(${loadingIconSvg.value});`
 })
 
+const openTypeValue = computed(() => {
+  return (props.disabled || props.loading ? undefined : props.openType) as any
+})
+
 watch(
   () => props.loading,
   () => {

package/components/oxy-calendar/index.scss

@@ -61,25 +61,25 @@
   }
 
   @include e(tabs) {
-    width: 222px;
-    margin: 10px auto 12px;
+    width: 444rpx;
+    margin: 24rpx auto 28rpx;
   }
 
   @include e(shortcuts) {
-    padding: 20px 0;
+    padding: 40rpx 0;
     text-align: center;
   }
 
   @include edeep(tag) {
-    margin-right: 8px;
+    margin-right: 16rpx;
   }
 
   @include e(view) {
     @include when(show-confirm) {
-      height: 394px;
+      height: 788rpx;
 
       @include when(range) {
-        height: 384px;
+        height: 768rpx;
       }
     }
   }
@@ -88,30 +88,30 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 14px;
+    font-size: $-fs-content;
 
     @include when(monthrange) {
-      padding-bottom: 10px;
-      box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+      padding-bottom: 24rpx;
+      box-shadow: $-calendar-panel-shadow-light;
     }
   }
 
   @include e(range-label-item) {
     flex: 1;
-    color: rgba(0, 0, 0, 0.85);
+    color: $-calendar-day-color;
 
     @include when(placeholder) {
-      color: rgba(0, 0, 0, 0.25);
+      color: $-calendar-disabled-color;
     }
   }
 
   @include e(range-sperator) {
-    margin: 0 24px;
-    color: rgba(0, 0, 0, 0.25);
+    margin: 0 48rpx;
+    color: $-calendar-disabled-color;
   }
 
   @include e(confirm) {
-    padding: 12px 25px 14px;
+    padding: 28rpx 52rpx 32rpx;
   }
 
   @include edeep(cell) {
@@ -155,4 +155,4 @@
     color: $-cell-clear-color;
     line-height: $-cell-line-height;
   }
-}
+}

package/components/oxy-calendar/oxy-calendar.vue

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

package/components/oxy-calendar/types.ts

@@ -107,6 +107,11 @@ export const calendarProps = {
    * 弹框层级
    */
   zIndex: makeNumberProp(15),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 是否显示确定按钮
    */

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

@@ -26,7 +26,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 45px;
+    height: 90rpx;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
   }
@@ -142,7 +142,7 @@
 
   @include e(day-top) {
     position: absolute;
-    top: 10px;
+    top: 20rpx;
     left: 0;
     right: 0;
     line-height: 1.1;
@@ -152,11 +152,11 @@
 
   @include e(day-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/month/types.ts

@@ -3,18 +3,54 @@ import { makeBooleanProp, makeRequiredProp } from '../../common/props'
 import type { CalendarFormatter, CalendarType } from '../types'
 
 export const monthProps = {
+  /**
+   * 日历选择类型
+   */
   type: makeRequiredProp(String as PropType<CalendarType>),
+  /**
+   * 当前月份时间戳
+   */
   date: makeRequiredProp(Number),
+  /**
+   * 已选中的值
+   */
   value: makeRequiredProp([Number, Array, null] as PropType<number | (number | null)[] | null>),
+  /**
+   * 可选最小日期
+   */
   minDate: makeRequiredProp(Number),
+  /**
+   * 可选最大日期
+   */
   maxDate: makeRequiredProp(Number),
+  /**
+   * 每周起始日
+   */
   firstDayOfWeek: makeRequiredProp(Number),
+  /**
+   * 日期单元格格式化函数
+   */
   formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * 范围选择最大天数
+   */
   maxRange: Number,
+  /**
+   * 超出范围提示文案
+   */
   rangePrompt: String,
+  /**
+   * 范围选择是否允许同一天
+   */
   allowSameDay: makeBooleanProp(false),
+  /**
+   * 默认时间配置
+   */
   defaultTime: {
     type: [Array] as PropType<Array<number[]>>
   },
+  /**
+   * 是否显示标题
+   */
   showTitle: makeBooleanProp(true)
 }

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

@@ -8,7 +8,7 @@
     }
 
     @include e(weeks) {
-      box-shadow: 0px 4px 8px 0 rgba(255, 255, 255, 0.02);
+      box-shadow: $-calendar-panel-shadow-dark;
       color: $-dark-color;
     }
 
@@ -25,18 +25,17 @@
   font-size: $-calendar-fs;
 
   @include e(title) {
-    padding: 5px 0;
+    padding: 16rpx 24rpx;
     text-align: center;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
-    padding: $-calendar-panel-padding;
   }
 
   @include e(weeks) {
     display: flex;
     height: $-calendar-week-height;
     line-height: $-calendar-week-height;
-    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+    box-shadow: $-calendar-panel-shadow-light;
     color: $-calendar-week-color;
     font-size: $-calendar-week-fs;
     padding: $-calendar-panel-padding;
@@ -54,7 +53,7 @@
 
   @include e(time) {
     display: flex;
-    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.02);
+    box-shadow: $-calendar-panel-shadow-reverse-light;
   }
 
   @include e(time-label) {
@@ -62,13 +61,13 @@
     flex: 1;
     font-size: $-picker-column-fs;
     text-align: center;
-    line-height: 125px;
+    line-height: 250rpx;
     color: $-picker-column-color;
 
     &::after {
       position: absolute;
       content: '';
-      height: 35px;
+      height: 70rpx;
       top: 50%;
       left: 0;
       right: 0;
@@ -86,4 +85,4 @@
   @include e(time-picker) {
     flex: 3;
   }
-}
+}

package/components/oxy-calendar-view/monthPanel/month-panel.vue

@@ -8,7 +8,7 @@
     </view>
     <scroll-view
       :class="`oxy-month-panel__container ${!!timeType ? 'oxy-month-panel__container--time' : ''}`"
-      :style="`height: ${scrollHeight}px`"
+      :style="`height: ${unitConvert(scrollHeight, 0, { output: 'px' })}`"
       scroll-y
       @scroll="monthScroll"
       :scroll-top="scrollTop"
@@ -64,7 +64,7 @@ export default {
 <script lang="ts" setup>
 import OxyPickerView from '../../oxy-picker-view/oxy-picker-view.vue'
 import { computed, ref, watch, onMounted } from 'vue'
-import { debounce, isArray, isEqual, isNumber, pause } from '../../common/util'
+import { debounce, isArray, isEqual, isNumber, pause, unitConvert } from '../../common/util'
 import { compareMonth, formatMonthTitle, getMonthEndDay, getMonths, getTimeData, getWeekLabel } from '../utils'
 import Month from '../month/month.vue'
 import { monthPanelProps, type MonthInfo, type MonthPanelTimeType, type MonthPanelExpose } from './types'
@@ -83,6 +83,12 @@ const timeValue = ref<number[]>([]) // 当前选中的时分秒
 const timeType = ref<MonthPanelTimeType>('') // 当前时间类型，是开始还是结束
 const innerValue = ref<string | number | (number | null)[]>('') // 内部保存一个值，用于判断新老值，避免监听器触发
 
+const designPxToRuntimePx = (designPx: number): number => unitConvert(`${designPx * 2}rpx`)
+const MONTH_ROW_HEIGHT = designPxToRuntimePx(64)
+const MONTH_ROW_GAP = designPxToRuntimePx(4)
+const MONTH_TITLE_HEIGHT = designPxToRuntimePx(45)
+const TIME_PICKER_HEIGHT = designPxToRuntimePx(125)
+
 const handleChange = debounce((value) => {
   emit('change', {
     value
@@ -132,7 +138,8 @@ const weekLabel = computed(() => {
 
 // 滚动区域的高度
 const scrollHeight = computed(() => {
-  const scrollHeight: number = timeType.value ? props.panelHeight - 125 : props.panelHeight
+  const panelHeight = designPxToRuntimePx(props.panelHeight)
+  const scrollHeight: number = timeType.value ? panelHeight - TIME_PICKER_HEIGHT : panelHeight
   return scrollHeight
 })
 
@@ -143,7 +150,7 @@ const months = computed<MonthInfo[]>(() => {
     const totalDay = getMonthEndDay(new Date(month).getFullYear(), new Date(month).getMonth() + 1)
     const rows = Math.ceil((offset + totalDay) / 7)
     return {
-      height: rows * 64 + (rows - 1) * 4 + (index === 0 ? 0 : 45), // 每行64px高度,除最后一行外每行加4px margin,加上标题45px
+      height: rows * MONTH_ROW_HEIGHT + (rows - 1) * MONTH_ROW_GAP + (index === 0 ? 0 : MONTH_TITLE_HEIGHT),
       date: month
     }
   })
@@ -214,8 +221,8 @@ async function scrollIntoView() {
       const firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
       const offset = (7 + firstDay.getDay() - props.firstDayOfWeek) % 7
       const row = Math.floor((offset + day - 1) / 7)
-      // 每行高度64px,每行加4px margin
-      top += row * 64 + row * 4
+      // 每行高度与行间距按 rpx 基线换算为运行时 px
+      top += row * (MONTH_ROW_HEIGHT + MONTH_ROW_GAP)
       break
     }
     top += months.value[index] ? Number(months.value[index].height) : 0
@@ -223,8 +230,7 @@ async function scrollIntoView() {
   scrollTop.value = 0
   if (top > 0) {
     await pause()
-    // 如果不是第一个月才加45
-    scrollTop.value = top + (activeMonthIndex > 0 ? 45 : 0)
+    scrollTop.value = top + (activeMonthIndex > 0 ? MONTH_TITLE_HEIGHT : 0)
   }
 }
 /**