oxy-uni-ui 1.2.3 → 2.0.0

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: 32rpx 32rpx 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 30rpx 28rpx 30rpx;
 
     @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: 28rpx 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: 32rpx;
+    margin-top: 4rpx;
   }
 
   @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

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

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) {

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);
       }
     }
 

package/components/oxy-fab/oxy-fab.vue

@@ -44,12 +44,13 @@ import OxyButton from '../oxy-button/oxy-button.vue'
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 import { type CSSProperties, computed, ref, watch, inject, getCurrentInstance, onBeforeUnmount, onMounted, nextTick } from 'vue'
-import { getRect, isDef, isH5, objToStyle } from '../common/util'
+import { getRect, isDef, isH5, objToStyle, unitConvert } from '../common/util'
 import { type Queue, queueKey } from '../composables/useQueue'
 import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { fabProps, type FabExpose } from './types'
 import { reactive } from 'vue'
 import { useRaf } from '../composables/useRaf'
+import { useWindowResize } from '../composables/useWindowResize'
 
 const props = defineProps(fabProps)
 const emit = defineEmits(['update:active', 'click'])
@@ -121,6 +122,24 @@ async function getBounding() {
   bounding.maxTop = screen.height - fabSize.height - bottom
 }
 
+function clampPosition() {
+  if (!inited.value) return
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  left.value = Math.min(Math.max(left.value, minLeft), maxLeft)
+  top.value = Math.min(Math.max(top.value, minTop), maxTop)
+}
+
+const handleWindowResize = async () => {
+  await getBounding()
+  if (props.draggable) {
+    clampPosition()
+    return
+  }
+  initPosition()
+}
+
+useWindowResize(handleWindowResize)
+
 function initPosition() {
   const pos = props.position
   const { minLeft, minTop, maxLeft, maxTop } = bounding
@@ -210,8 +229,8 @@ function handleTouchEnd() {
 
 const rootStyle = computed(() => {
   const style: CSSProperties = {
-    top: top.value + 'px',
-    left: left.value + 'px',
+    top: unitConvert(top.value, 0, { output: 'px' }),
+    left: unitConvert(left.value, 0, { output: 'px' }),
     transition: attractTransition.value ? 'all ease 0.3s' : 'none'
   }
   if (isDef(props.zIndex)) {

package/components/oxy-file-list/index.scss

@@ -5,12 +5,12 @@
   position: relative;
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -8px;
+  margin: 0 -16rpx;
   @include e(item) {
     position: relative;
-    width: calc(33.33% - 16px);
+    width: calc(33.33% - 32rpx);
     height: $-file-list-height;
-    margin: 0 8px 32px;
+    margin: 0 16rpx 64rpx;
   }
   @include e(content) {
     display: flex;
@@ -20,7 +20,7 @@
     width: 100%;
     height: 100%;
     border: 1px solid $-color-border;
-    border-radius: 8px;
+    border-radius: 16rpx;
     position: relative;
   }
   @include e(picture) {
@@ -28,20 +28,20 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: 8px;
+    border-radius: 16rpx;
   }
   @include e(icon) {
-    width: 32px;
-    height: 32px;
+    width: 64rpx;
+    height: 64rpx;
   }
   @include e(name) {
     display: block;
     width: 100%;
     font-size: $-upload-file-fs;
     color: $-upload-file-color;
-    padding: 0 4px;
+    padding: 0 8rpx;
     text-align: center;
-    margin-top: 8px;
+    margin-top: 16rpx;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -60,15 +60,15 @@
     .oxy-file-list__list--item {
       width: 100%;
       background: #f8f9ff;
-      padding: 8px 12px;
-      border-radius: 4px;
+      padding: 16rpx 24rpx;
+      border-radius: 8rpx;
       display: flex;
       flex-direction: row;
       align-items: center;
       .oxy-file-list__icon {
-        width: 24px;
-        height: 24px;
-        margin-right: 8px;
+        width: 48rpx;
+        height: 48rpx;
+        margin-right: 16rpx;
       }
       .oxy-file-list__name {
         flex: 1;
@@ -77,33 +77,34 @@
         padding: 0;
       }
       .oxy-file-list__download {
-        font-size: 18px;
+        font-size: 36rpx;
         color: $-cell-arrow-color;
       }
       .oxy-file-list__delete {
-        font-size: 18px;
+        font-size: 36rpx;
         color: $-cell-arrow-color;
-        margin-left: 12px;
+        margin-left: 24rpx;
       }
       & + .oxy-file-list__list--item {
-        margin-top: 8px;
+        margin-top: 16rpx;
       }
     }
   }
 
   .oxy-file-list__download-btn {
     position: absolute;
-    top: 6px;
-    right: 6px;
+    top: 12rpx;
+    right: 12rpx;
     background: rgba(0, 0, 0, 0.45);
-    border-radius: 6px;
-    padding: 4px 5px;
+    border-radius: 12rpx;
+    padding: 8rpx 10rpx;
+    display: flex;
   }
   .oxy-file-list__download {
     color: $-color-white;
   }
   .oxy-file-list__delete {
     color: $-color-white;
-    margin-left: 6px;
+    margin-left: 12rpx;
   }
 }

package/components/oxy-file-list/oxy-file-list.vue

@@ -4,7 +4,7 @@
       <view v-for="(file, index) in props.data" :key="index" class="oxy-file-list__list--item" @click="handleClick(file, index)">
         <image :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" />
         <text class="oxy-file-list__name">{{ file.name }}</text>
-        <oxy-loading v-if="props.enableDownload && isDownloading(file)" size="18px" custom-class="oxy-file-list__download" />
+        <oxy-loading v-if="props.enableDownload && isDownloading(file)" size="36rpx" custom-class="oxy-file-list__download" />
         <view @tap.stop="onDownload(file)" v-if="props.enableDownload && !isDownloading(file)">
           <oxy-icon name="download" custom-class="oxy-file-list__download" />
         </view>
@@ -20,7 +20,7 @@
           <image v-else :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" @click="handleClick(file, index)" />
           <view v-if="props.enableDownload || props.enableDelete" class="oxy-file-list__download-btn">
             <template v-if="props.enableDownload">
-              <oxy-loading v-if="isDownloading(file)" size="18px" color="#ffffff" custom-class="oxy-file-list__download" />
+              <oxy-loading v-if="isDownloading(file)" size="36rpx" color="#ffffff" custom-class="oxy-file-list__download" />
               <view @tap.stop="onDownload(file)">
                 <oxy-icon name="download" custom-class="oxy-file-list__download" />
               </view>

package/components/oxy-floating-panel/oxy-floating-panel.vue

@@ -35,10 +35,11 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
-import { floatingPanelProps } from './type'
-import { addUnit, closest, objToStyle } from '../common/util'
+import { computed, ref, watch, type CSSProperties } from 'vue'
+import { floatingPanelProps } from './types'
+import { closest, objToStyle, unitConvert } from '../common/util'
 import { useTouch } from '../composables/useTouch'
+import { useWindowResize, type WindowResizeResult } from '../composables/useWindowResize'
 
 const touch = useTouch()
 
@@ -61,8 +62,8 @@ const anchors = computed(() => (props.anchors.length >= 2 ? props.anchors : [bou
 
 const rootStyle = computed(() => {
   const style: CSSProperties = {
-    height: addUnit(boundary.value.max),
-    transform: `translateY(calc(100% + ${addUnit(-heightValue.value)}))`,
+    height: unitConvert(boundary.value.max, 0, { output: 'px' }),
+    transform: `translateY(calc(100% + ${unitConvert(-heightValue.value, 0, { output: 'px' })}))`,
     transition: !dragging.value ? `transform ${props.duration}ms cubic-bezier(0.18, 0.89, 0.32, 1.28)` : 'none'
   }
 
@@ -129,10 +130,13 @@ watch(
   { immediate: true }
 )
 
-onBeforeMount(() => {
-  const { windowHeight: _windowHeight } = uni.getSystemInfoSync()
-  windowHeight.value = _windowHeight
-})
+const syncWindowHeight = (res?: WindowResizeResult) => {
+  const resizeHeight = Number(res?.size?.windowHeight ?? res?.windowHeight)
+  const systemHeight = uni.getSystemInfoSync().windowHeight
+  windowHeight.value = Number.isFinite(resizeHeight) && resizeHeight > 0 ? resizeHeight : systemHeight
+}
+
+useWindowResize(syncWindowHeight, { immediate: true })
 </script>
 
 <style lang="scss" scoped>

package/components/oxy-floating-panel/{type.ts → types.ts}

@@ -1,30 +1,30 @@
 import type { ExtractPropTypes } from 'vue'
-import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, truthProp } from '../common/props'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, truthProp } from '../common/props'
 
 export const floatingPanelProps = {
   ...baseProps,
   /**
-   * 面板的显示高度
+   * 面板当前高度
    */
   height: makeNumberProp(0),
   /**
-   * 设置自定义锚点，默认值 [100, windowHeight * 0.6]
+   * 拖拽吸附锚点列表
    */
   anchors: makeArrayProp<number>(),
   /**
-   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * 是否预留底部安全区
    */
   safeAreaInsetBottom: makeBooleanProp(false),
   /**
-   * 是否显示滚动条，默认值为 true
+   * 内容区是否显示滚动条
    */
   showScrollbar: truthProp,
   /**
-   * 动画时长，单位毫秒，默认值为 300ms
+   * 高度变化动画时长，单位毫秒
    */
-  duration: makeNumericProp(300),
+  duration: makeNumberProp(300),
   /**
-   * 是否允许内容区容器拖拽，默认值为 true
+   * 内容区是否允许拖拽
    */
   contentDraggable: truthProp
 }

package/components/oxy-footer/index.scss

@@ -0,0 +1,19 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+@include b(footer-wrapper) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow: visible;
+}
+
+@include b(footer) {
+  overflow: visible;
+  padding: 0;
+  background-color: $--footer-bg;
+  @include e(content) {
+    overflow: visible;
+    padding: $--footer-padding;
+  }
+}