oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-action-sheet/index.scss

@@ -50,16 +50,29 @@
   border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
 }
 
+:deep(.oxy-action-sheet__popup--float) {
+  border-radius: 0 !important;
+  background: transparent !important;
+  overflow: visible !important;
+}
+
 @include b(action-sheet) {
   background-color: $-color-white;
-  padding-bottom: 1px;
+  padding-bottom: 2rpx;
+  margin-bottom: var(--window-bottom);
+
+  @include when(float) {
+    margin: 0 20rpx calc(var(--window-bottom) + 20rpx);
+    border-radius: $-action-sheet-radius;
+    overflow: hidden;
+  }
 
   @include edeep(popup) {
     border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
   }
 
   @include e(actions) {
-    padding: 8px 0;
+    padding: 16rpx 0;
     max-height: 50vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -110,14 +123,14 @@
 
   @include e(subname) {
     display: inline-block;
-    margin-left: 4px;
+    margin-left: 8rpx;
     font-size: $-action-sheet-subname-fs;
     color: $-action-sheet-subname-color;
   }
 
   @include e(cancel) {
     display: block;
-    width: calc(100% - 48px);
+    width: calc(100% - 96rpx);
     line-height: $-action-sheet-cancel-height;
     padding: 0;
     color: $-action-sheet-cancel-color;
@@ -127,7 +140,7 @@
     border: none;
     background: $-action-sheet-cancel-bg;
     outline: none;
-    margin: 0 auto 24px;
+    margin: 0 auto 48rpx;
     font-weight: $-action-sheet-weight;
 
     &:active {
@@ -160,15 +173,15 @@
   }
 
   @include e(panels) {
-    height: 84px;
+    height: 168rpx;
     overflow-y: hidden;
 
     &:first-of-type {
-      margin-top: 20px;
+      margin-top: 40rpx;
     }
 
     &:last-of-type {
-      margin-bottom: 12px;
+      margin-bottom: 24rpx;
     }
   }
 
@@ -179,7 +192,7 @@
   }
 
   @include e(panel) {
-    width: 88px;
+    width: 176rpx;
     flex: 0 0 auto;
     display: inline-block;
     padding: $-action-sheet-panel-padding;
@@ -190,7 +203,7 @@
     width: $-action-sheet-panel-img-fs;
     height: $-action-sheet-panel-img-fs;
     margin: 0 auto;
-    margin-bottom: 7px;
+    margin-bottom: 14rpx;
     border-radius: $-action-sheet-panel-img-radius;
   }
 
@@ -201,4 +214,4 @@
     color: $-action-sheet-color;
     @include lineEllipsis;
   }
-}
+}

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

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: 10rpx;
     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: 1998rpx;
   }
 
   @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: 20rpx auto 24rpx;
   }
 
   @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,11 +88,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 14px;
+    font-size: 28rpx;
 
     @include when(monthrange) {
-      padding-bottom: 10px;
-      box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+      padding-bottom: 20rpx;
+      box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.02);
     }
   }
 
@@ -106,12 +106,12 @@
   }
 
   @include e(range-sperator) {
-    margin: 0 24px;
+    margin: 0 48rpx;
     color: rgba(0, 0, 0, 0.25);
   }
 
   @include e(confirm) {
-    padding: 12px 25px 14px;
+    padding: 24rpx 50rpx 28rpx;
   }
 
   @include edeep(cell) {

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: 0 8rpx 16rpx 0 rgba(255, 255, 255, 0.02);
       color: $-dark-color;
     }
 
@@ -25,7 +25,7 @@
   font-size: $-calendar-fs;
 
   @include e(title) {
-    padding: 5px 0;
+    padding: 10rpx 0;
     text-align: center;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
@@ -36,7 +36,7 @@
     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: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.02);
     color: $-calendar-week-color;
     font-size: $-calendar-week-fs;
     padding: $-calendar-panel-padding;
@@ -54,7 +54,7 @@
 
   @include e(time) {
     display: flex;
-    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.02);
+    box-shadow: 0 -8rpx 16rpx 0 rgba(0, 0, 0, 0.02);
   }
 
   @include e(time-label) {
@@ -62,13 +62,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 +86,4 @@
   @include e(time-picker) {
     flex: 3;
   }
-}
+}