oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-select/oxy-select.vue

@@ -1,31 +1,43 @@
 <template>
-  <view :class="`oxy-select ${customClass}`" :style="rootStyle">
+  <view :class="rootClass" :style="rootStyle">
     <view v-if="label" class="oxy-select__label" :style="labelStyle">
       <slot name="label">{{ label }}</slot>
     </view>
     <view class="oxy-select__box">
-      <view :class="['oxy-select__wrapper', { 'is-disabled': disabled, 'is-readonly': readonly }]">
+      <view :class="['oxy-select__wrapper', { 'is-disabled': disabled, 'is-readonly': readonly, 'is-focus': showSelector }]">
         <view class="oxy-select__input-box" @click="toggleSelector">
           <view class="oxy-select__tags" v-if="multiple && currentList.length > 0">
-            <view class="oxy-select__tags-item" v-for="item in displayTags" :key="item[valueKey]">
-              <span class="oxy-select__tags-item-text">{{ item[labelKey] }}</span>
-              <view v-if="!disabled && !readonly" @click.stop="delItem(item)">
-                <oxy-icon custom-class="oxy-select__icon-error" name="error-fill" />
-              </view>
-            </view>
-            <view v-if="currentList.length > collapseTagsNum && collapseTags" class="oxy-select__tags-item">
-              <span class="oxy-select__tags-item-text">+{{ currentList.length - collapseTagsNum }}</span>
-            </view>
+            <oxy-tag
+              v-for="item in displayTags"
+              :key="item[valueKey]"
+              custom-class="oxy-select__tags-item-tag"
+              class="oxy-select__tags-item"
+              plain
+              round
+              :closable="!disabled && !readonly"
+              @close="delItem(item)"
+            >
+              <text class="oxy-select__tags-item-text">{{ formatItemName(item) }}</text>
+            </oxy-tag>
+            <oxy-tag
+              v-if="currentList.length > collapseTagsNum && collapseTags"
+              custom-class="oxy-select__tags-item-tag"
+              class="oxy-select__tags-item"
+              plain
+              round
+            >
+              <text class="oxy-select__tags-item-text">+{{ currentList.length - collapseTagsNum }}</text>
+            </oxy-tag>
             <input
-              v-if="filterable && (!disabled || !readonly)"
+              v-if="filterable && !disabled && !readonly"
               @input="inputChange"
               class="oxy-select__input-text oxy-select__input-filter"
               type="text"
-              placeholder="请输入"
+              :placeholder="currentList.length === 0 ? typePlaceholder : ''"
               v-model="filterInput"
             />
           </view>
-          <view v-else-if="current && current.length > 0 && !showSelector" class="oxy-select__input-text">
+          <view v-else-if="current && current.length > 0 && (!showSelector || !filterable)" class="oxy-select__input-text">
             {{ current }}
           </view>
           <input
@@ -36,15 +48,15 @@
             :readonly="readonly"
             class="oxy-select__input-text oxy-select__input-selector"
             type="text"
-            :placeholder="placeholderOld"
+            :placeholder="placeholderOld || typePlaceholder"
             v-model="filterInput"
           />
           <view v-else-if="!disabled && !readonly" class="oxy-select__input-text oxy-select__input-placeholder">{{ typePlaceholder }}</view>
           <oxy-icon
             v-if="(current.length > 0 && clear && !disabled && !readonly) || (currentArr.length > 0 && clear && !disabled && !readonly)"
             custom-class="oxy-select__icon oxy-select__icon-clear"
-            name="error-fill"
-            @click="clearVal"
+            name="close-circle-filled"
+            @click.stop="clearVal"
           />
           <oxy-icon
             :custom-class="`oxy-select__icon oxy-select__icon-arrow ${showSelector ? 'is-open' : ''}`"
@@ -52,24 +64,33 @@
             name="arrow-down"
           />
         </view>
-        <oxy-transition :show="showSelector" name="fade" :duration="duration">
+        <oxy-transition custom-class="oxy-select__dropdown-transition" :show="showSelector" name="fade" :duration="duration" :lazy-render="false">
           <view class="oxy-select--mask" @click="toggleSelector" />
           <view class="oxy-select__selector" :class="isDown ? 'oxy-select__selector__down' : 'oxy-select__selector__upwards'">
             <view class="oxy-select__selector-arrow"></view>
             <scroll-view :scroll-y="true" class="oxy-select__selector-scroll">
-              <view class="oxy-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
-                <span>{{ emptyTips }}</span>
-              </view>
-              <view
-                v-else
-                :class="['oxy-select__selector-item', { 'oxy-select_selector-item_active': multiple && currentArr.includes(item[valueKey]) }]"
-                v-for="(item, index) in filterMixinDatacomResData"
-                :key="index"
-                @click="change(item)"
-              >
-                <span :class="{ 'oxy-select__selector__disabled': item.disabled }">{{ formatItemName(item) }}</span>
-                <oxy-icon v-if="multiple && currentArr.includes(item[valueKey])" name="check" />
+              <view v-if="loading" class="oxy-select__loading">
+                <oxy-icon name="refresh" custom-class="oxy-select__loading-icon" />
+                <text>{{ loadingText }}</text>
               </view>
+              <template v-else>
+                <view class="oxy-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
+                  <span>{{ emptyTips }}</span>
+                </view>
+                <view
+                  v-else
+                  :class="[
+                    'oxy-select__selector-item',
+                    { 'oxy-select_selector-item_active': multiple ? currentArr.includes(item[valueKey]) : modelValue === item[valueKey] }
+                  ]"
+                  v-for="(item, index) in filterMixinDatacomResData"
+                  :key="index"
+                  @click="change(item)"
+                >
+                  <span :class="{ 'oxy-select__selector__disabled': item.disabled }">{{ formatItemName(item) }}</span>
+                  <oxy-icon v-if="multiple && currentArr.includes(item[valueKey])" name="check" />
+                </view>
+              </template>
             </scroll-view>
           </view>
         </oxy-transition>
@@ -89,10 +110,12 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { getCurrentInstance, ref, watch, onMounted, computed } from 'vue'
+import { getCurrentInstance, ref, watch, computed } from 'vue'
 import { objToStyle } from '../common/util'
+import { useWindowResize, type WindowResizeResult } from '../composables/useWindowResize'
 import { selectProps, type SelectProps } from './types'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
+import OxyTag from '../oxy-tag/oxy-tag.vue'
 
 type SelectOption = Record<string, any>
 type SelectModelValue = SelectProps['modelValue']
@@ -114,8 +137,23 @@ const rootStyle = ref('')
 const duration = ref<number>(200)
 let overlayTimer: ReturnType<typeof setTimeout> | null
 
-onMounted(() => {
-  windowHeight.value = uni.getSystemInfoSync().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
+}
+
+const handleWindowResize = (res?: WindowResizeResult) => {
+  syncWindowHeight(res)
+  if (showSelector.value) {
+    void getIsDown()
+  }
+}
+
+useWindowResize(handleWindowResize, { immediate: true })
+
+const rootClass = computed(() => {
+  return `oxy-select ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}`
 })
 
 const labelStyle = computed(() => {
@@ -212,18 +250,28 @@ watch(
 )
 
 function getIsDown() {
-  const query = uni.createSelectorQuery().in(instance)
-  query
-    .select('.oxy-select__box')
-    .boundingClientRect((data) => {
-      const rect = data as UniApp.NodeInfo
-      if (rect && windowHeight.value - (rect.top || 0) > 200) {
-        isDown.value = true
-      } else {
-        isDown.value = false
-      }
-    })
-    .exec()
+  return new Promise((resolve) => {
+    const query = uni.createSelectorQuery().in(instance)
+    query
+      .select('.oxy-select__box')
+      .boundingClientRect((data) => {
+        const rect = data as UniApp.NodeInfo
+        if (rect) {
+          const bottomSpace = windowHeight.value - (rect.bottom || 0)
+          const topSpace = rect.top || 0
+          const threshold = 280 // max-height 240 + padding/arrow space
+
+          // 如果下方空间不足，且上方空间比下方空间大，则向上弹出
+          if (bottomSpace < threshold && topSpace > bottomSpace) {
+            isDown.value = false
+          } else {
+            isDown.value = true
+          }
+        }
+        resolve(isDown.value)
+      })
+      .exec()
+  })
 }
 
 function initDefVal() {
@@ -367,13 +415,16 @@ function handleEmit(val: any) {
     emit('change', _current)
   }
 }
-function toggleSelector() {
+async function toggleSelector() {
   if (props.disabled || props.readonly) {
     return
   }
-  getIsDown()
-  showSelector.value = !showSelector.value
-  isFocus.value = showSelector.value
+  const nextShow = !showSelector.value
+  if (nextShow) {
+    await getIsDown()
+  }
+  showSelector.value = nextShow
+  isFocus.value = nextShow
   if (props.filterable && current.value && showSelector.value) {
     if (!props.multiple) {
       if (typeof current.value === 'string') {
@@ -394,21 +445,18 @@ function formatItemName(item: any) {
   if (!item) {
     return ''
   }
-  let text = item[props.labelKey]
-  let value = item[props.valueKey]
-  let { channel_code } = item
-  channel_code = channel_code ? `(${channel_code})` : ''
+  const label = item[props.labelKey]
+
   if (props.format) {
     // 格式化输出
-    let str = ''
-    str = props.format
-    for (let key in item) {
+    let str = props.format
+    for (const key in item) {
       str = str.replace(new RegExp(`{${key}}`, 'g'), item[key])
     }
     return str
-  } else {
-    return text ? text : `未命名${channel_code}`
   }
+
+  return label !== undefined && label !== null ? String(label) : ''
 }
 
 // 获取当前加载的数据

package/components/oxy-select/types.ts

@@ -61,11 +61,23 @@ export const selectProps = {
    * 是否可清除
    */
   clear: makeBooleanProp(true),
+  /**
+   * 是否加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载中文字
+   */
+  loadingText: makeStringProp('加载中...'),
   /**
    * 格式化输出
    */
   format: makeStringProp(''),
-  defItem: makeNumberProp(0)
+  defItem: makeNumberProp(0),
+  /**
+   * 是否隐藏边框
+   */
+  noBorder: makeBooleanProp(false)
 }
 
 export type SelectProps = ExtractPropTypes<typeof selectProps>

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

@@ -73,19 +73,19 @@
   }
   
   @include edeep(header) {
-    height: 72px;
-    line-height: 72px;
+    height: 144rpx;
+    line-height: 144rpx;
   }
   @include e(wrapper) {
-    padding: 0 10px;
+    padding: 0 24rpx;
     position: relative;
-    max-height: 356px;
+    max-height: 712rpx;
     box-sizing: border-box;
     overflow: auto;
 
     @include when(filterable) {
-      height: 314px;
-      max-height: 314px;
+      height: 628rpx;
+      max-height: 628rpx;
     }
 
     @include when(loading) {
@@ -97,6 +97,6 @@
   }
 
   @include e(footer) {
-    padding: 24px 15px;
+    padding: 52rpx 32rpx;
   }
 }

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

@@ -40,6 +40,7 @@
       :title="title || translate('title')"
       :close-on-click-modal="closeOnClickModal"
       :z-index="zIndex"
+      :max-width="popupMaxWidth"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       :root-portal="rootPortal"
       @close="close"

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

@@ -72,6 +72,8 @@ export const selectPickerProps = {
   beforeConfirm: Function as PropType<SelectPickerBeforeConfirm>,
   /** 弹窗层级 */
   zIndex: makeNumberProp(15),
+  /** 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；`%` 在弹层打开时按屏幕宽度换算为 `rpx` */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /** 弹出面板是否设置底部安全距离（iphone X 类型的机型） */
   safeAreaInsetBottom: makeBooleanProp(true),
   /** 可搜索（目前只支持本地搜索） */

package/components/oxy-sidebar-item/index.scss

@@ -91,7 +91,7 @@
 
   @include edeep(icon) {
     font-size: $-sidebar-icon-size;
-    margin-right: 2px;
+    margin-right: 8rpx;
   }
 
-}
+}

package/components/oxy-signature/oxy-signature.vue

@@ -69,7 +69,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch, type CSSProperties } from 'vue'
-import { addUnit, getRect, isDef, objToStyle, uuid } from '../common/util'
+import { getRect, isDef, objToStyle, unitConvert, unitConvertWithDefault, withDefaultUnit, uuid } from '../common/util'
 import { signatureProps, type SignatureExpose, type SignatureResult, type Point, type Line } from './types'
 import { useTranslate } from '../composables/useTranslate'
 // #ifdef MP-WEIXIN
@@ -147,11 +147,11 @@ watch(
 const canvasStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.width)) {
-    style.width = addUnit(props.width)
+    style.width = unitConvert(withDefaultUnit(props.width, 'rpx'), 0, { output: 'px' })
   }
 
   if (isDef(props.height)) {
-    style.height = addUnit(props.height)
+    style.height = unitConvert(withDefaultUnit(props.height, 'rpx'), 0, { output: 'px' })
   }
 
   return `${objToStyle(style)}`
@@ -159,6 +159,12 @@ const canvasStyle = computed(() => {
 
 const disableScroll = computed(() => props.disableScroll)
 const enableHistory = computed(() => props.enableHistory)
+const resolveStrokeWidth = (value: number | string): number => {
+  return unitConvertWithDefault(value, { defaultUnit: 'rpx' })
+}
+const lineWidthInPx = computed(() => resolveStrokeWidth(props.lineWidth))
+const minWidthInPx = computed(() => resolveStrokeWidth(props.minWidth))
+const maxWidthInPx = computed(() => resolveStrokeWidth(props.maxWidth))
 
 const lines = ref<Line[]>([]) // 保存所有线条
 const redoLines = ref<Line[]>([]) // 保存撤销的线条
@@ -167,22 +173,24 @@ const currentStep = ref(0) // 当前步骤
 
 // 添加计算笔画宽度的方法
 function calculateLineWidth(speed: number): number {
-  if (!props.pressure) return props.lineWidth
+  if (!props.pressure) return lineWidthInPx.value
 
   const minSpeed = props.minSpeed || 1.5
+  const minWidth = Math.min(minWidthInPx.value, maxWidthInPx.value)
+  const maxWidth = Math.max(minWidthInPx.value, maxWidthInPx.value)
   const limitedSpeed = Math.min(minSpeed * 10, Math.max(minSpeed, speed))
-  const addWidth = ((props.maxWidth - props.minWidth) * (limitedSpeed - minSpeed)) / minSpeed
-  const lineWidth = Math.max(props.maxWidth - addWidth, props.minWidth)
-  return Math.min(lineWidth, props.maxWidth)
+  const addWidth = ((maxWidth - minWidth) * (limitedSpeed - minSpeed)) / minSpeed
+  const lineWidth = Math.max(maxWidth - addWidth, minWidth)
+  return Math.min(lineWidth, maxWidth)
 }
 
 /* 获取默认笔画宽度 */
 const getDefaultLineWidth = () => {
   if (props.pressure) {
     // 在压感模式下，使用最大和最小宽度的平均值作为默认值
-    return (props.maxWidth + props.minWidth) / 2
+    return (maxWidthInPx.value + minWidthInPx.value) / 2
   }
-  return props.lineWidth
+  return lineWidthInPx.value
 }
 
 /* 开始画线 */
@@ -469,7 +477,7 @@ function drawSmoothLine(prePoint: Point, point: Point) {
   }
 
   // 计算线宽
-  const lineWidth = point.lineWidth || props.lineWidth
+  const lineWidth = point.lineWidth || lineWidthInPx.value
 
   // 绘制贝塞尔曲线
   if (typeof prePoint.lastX1 === 'number') {

package/components/oxy-signature/types.ts

@@ -1,65 +1,122 @@
 import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
-import { baseProps, numericProp } from '../common/props'
+import { baseProps, makeNumericProp, numericProp } from '../common/props'
 
 export const signatureProps = {
   ...baseProps,
+  /**
+   * 画笔颜色
+   */
   penColor: {
     type: String,
     default: '#000'
   },
-  lineWidth: {
-    type: Number,
-    default: 3
-  },
+  /**
+   * 画笔线宽，支持 number / string（如 '6rpx'、'3px'），number 与纯数字字符串按 rpx 处理
+   */
+  lineWidth: makeNumericProp(6),
+  /**
+   * 清空按钮文案
+   */
   clearText: String,
+  /**
+   * 撤销按钮文案
+   */
   revokeText: String,
+  /**
+   * 恢复按钮文案
+   */
   restoreText: String,
+  /**
+   * 确认按钮文案
+   */
   confirmText: String,
+  /**
+   * 导出图片格式
+   */
   fileType: {
     type: String,
     default: 'png'
   },
+  /**
+   * 导出质量
+   */
   quality: {
     type: Number,
     default: 1
   },
+  /**
+   * 导出缩放比例
+   */
   exportScale: {
     type: Number,
     default: 1
   },
+  /**
+   * 是否禁用签名操作
+   */
   disabled: {
     type: Boolean,
     default: false
   },
+  /**
+   * 画布高度，支持 number / string（如 '600rpx'、'300px'），number 与纯数字字符串按 rpx 处理
+   */
   height: numericProp,
+  /**
+   * 画布宽度，支持 number / string（如 '100%'、'700rpx'），number 与纯数字字符串按 rpx 处理
+   */
   width: numericProp,
+  /**
+   * 画布背景色
+   */
   backgroundColor: String,
+  /**
+   * 是否禁用页面滚动
+   */
   disableScroll: {
     type: Boolean,
     default: true
   },
+  /**
+   * 是否启用历史记录
+   */
   enableHistory: {
     type: Boolean,
     default: false
   },
+  /**
+   * 每次记录步进
+   */
   step: {
     type: Number,
     default: 1
   },
+  /**
+   * 撤销文案
+   */
   undoText: String,
+  /**
+   * 重做文案
+   */
   redoText: String,
+  /**
+   * 是否启用压感
+   */
   pressure: {
     type: Boolean,
     default: false
   },
-  minWidth: {
-    type: Number,
-    default: 2
-  },
-  maxWidth: {
-    type: Number,
-    default: 6
-  },
+  /**
+   * 压感最小线宽，支持 number / string（如 '4rpx'、'2px'），number 与纯数字字符串按 rpx 处理
+   */
+  minWidth: makeNumericProp(4),
+  /**
+   * 压感最大线宽，支持 number / string（如 '12rpx'、'6px'），number 与纯数字字符串按 rpx 处理
+   */
+  maxWidth: makeNumericProp(12),
+  /**
+   * 压感最小速度阈值
+   */
   minSpeed: {
     type: Number,
     default: 1.5
@@ -67,23 +124,59 @@ export const signatureProps = {
 }
 
 export type SignatureResult = {
+  /**
+   * 临时文件路径
+   */
   tempFilePath: string
+  /**
+   * 导出是否成功
+   */
   success: boolean
+  /**
+   * 导出宽度
+   */
   width: number
+  /**
+   * 导出高度
+   */
   height: number
 }
 
 export interface Line {
+  /**
+   * 线段点集合
+   */
   points: Point[]
+  /**
+   * 线段颜色
+   */
   color: string
+  /**
+   * 线段宽度
+   */
   width: number
+  /**
+   * 背景色
+   */
   backgroundColor?: string
+  /**
+   * 是否启用压感
+   */
   isPressure?: boolean
 }
 
 export interface Point {
+  /**
+   * x 坐标
+   */
   x: number
+  /**
+   * y 坐标
+   */
   y: number
+  /**
+   * 时间戳
+   */
   t: number
   speed?: number
   distance?: number

package/components/oxy-skeleton/index.scss

@@ -63,7 +63,7 @@
         content: ' ';
         position: absolute;
         animation: oxy-skeleton-gradient 1.5s linear 2s infinite;
-        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $-skeleton-animation-gradient, rgba(255, 255, 255, 0));
+        background: linear-gradient(90deg, transparent, $-skeleton-animation-gradient, transparent);
         inset: 0;
       }
     }

package/components/oxy-skeleton/oxy-skeleton.vue

@@ -24,16 +24,16 @@ import type { CSSProperties } from 'vue'
 import { ref, computed, watch } from 'vue'
 import type { SkeletonRowCol, SkeletonRowColObj } from './types'
 import { skeletonProps } from './types'
-import { isNumber, addUnit } from '../common/util'
+import { isNumber, withDefaultUnit } from '../common/util'
 
 const themeMap = {
-  avatar: [{ type: 'circle', height: '64px', width: '64px' }],
-  image: [{ type: 'rect', height: '64px', width: '64px' }],
+  avatar: [{ type: 'circle', height: '128rpx', width: '128rpx' }],
+  image: [{ type: 'rect', height: '128rpx', width: '128rpx' }],
   text: [
     1,
     [
-      { width: '24%', height: '16px', marginRight: '16px' },
-      { width: '76%', height: '16px' }
+      { width: '24%', height: '32rpx', marginRight: '32rpx' },
+      { width: '76%', height: '32rpx' }
     ]
   ],
   paragraph: [1, 1, 1, { width: '55%' }]
@@ -81,7 +81,7 @@ function getColItemStyle(rowCol: SkeletonRowColObj) {
 
   for (const name of styleName) {
     if (Object.prototype.hasOwnProperty.call(rowCol, name)) {
-      const px = addUnit(rowCol[name])
+      const px = withDefaultUnit(rowCol[name])
 
       if (name === 'size') {
         style.width = px

package/components/oxy-skeleton/types.ts

@@ -36,7 +36,7 @@ export const skeletonProps = {
    * 用于设置行列数量、宽度高度、间距等。
    * @example
    * 【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。
-   * 【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。
+   * 【示例二】，`[1, 1, { width: '200rpx' }]` 表示自定义第三行的宽度为 `200rpx`。
    * 【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距
    */
   rowCol: makeArrayProp<SkeletonRowCol>(),