oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-navbar-capsule/types.ts

@@ -2,6 +2,9 @@ import type { ExtractPropTypes } from 'vue'
 import { baseProps } from '../common/props'
 
 export const navbarCapsuleProps = {
+  /**
+   * 继承通用样式属性
+   */
   ...baseProps
 }
 

package/components/oxy-notice-bar/index.scss

@@ -22,7 +22,7 @@
     color: $-notice-bar-danger-color;
   }
   @include edeep(prefix) {
-    padding-right: 4px;
+    padding-right: 8rpx;
     font-size: $-notice-bar-prefix-size;
   }
 
@@ -33,7 +33,7 @@
     background-color: $-notice-bar-close-bg;
     color: $-notice-bar-close-color;
     padding: 0;
-    border-radius: 0px 8px 0px 4px;
+    border-radius: 0 16rpx 0 8rpx;
     position: absolute;
     right: 0;
     top: 0;
@@ -65,4 +65,4 @@
       white-space: normal;
     }
   }
-}
+}

package/components/oxy-notice-bar/oxy-notice-bar.vue

@@ -29,7 +29,7 @@ export default {
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { ref, watch, nextTick, computed, getCurrentInstance, type CSSProperties, onMounted, onActivated, onDeactivated, reactive } from 'vue'
-import { getRect, isArray, isDef, objToStyle } from '../common/util'
+import { getRect, isArray, isDef, objToStyle, unitConvert, unitConvertWithDefault } from '../common/util'
 import { type NoticeBarExpose, noticeBarProps } from './types'
 const $wrap = '.oxy-notice-bar__wrap'
 const $content = '.oxy-notice-bar__content'
@@ -47,6 +47,10 @@ const wrapRect = ref<UniApp.NodeInfo | null>(null) // 外层容器节点信息
 const contentRect = ref<UniApp.NodeInfo | null>(null) // 内容节点信息
 const isHorizontal = computed(() => props.direction === 'horizontal')
 const isVertical = computed(() => props.direction === 'vertical')
+const speedInPx = computed(() => {
+  const value = unitConvertWithDefault(props.speed, { defaultUnit: 'rpx' })
+  return value > 0 ? value : 1
+})
 
 const transitionState = reactive<CSSProperties>({
   transitionProperty: 'unset',
@@ -149,7 +153,7 @@ function setTransition({ duration, delay, translate }: { duration: number; delay
   transitionState.transitionProperty = 'all'
   transitionState.transitionDelay = `${delay}s`
   transitionState.transitionDuration = `${duration}s`
-  transitionState.transform = `${props.direction === 'vertical' ? 'translateY' : 'translateX'}(${translate}px)`
+  transitionState.transform = `${props.direction === 'vertical' ? 'translateY' : 'translateX'}(${unitConvert(translate, 0, { output: 'px' })})`
   transitionState.transitionTimingFunction = 'linear'
 }
 
@@ -160,7 +164,7 @@ function queryRect() {
 async function verticalAnimate(height: number) {
   const translate = -(height / (textArray.value.length + 1)) * (currentIndex.value + 1)
   setTransition({
-    duration: height / (textArray.value.length + 1) / props.speed,
+    duration: height / (textArray.value.length + 1) / speedInPx.value,
     delay: props.delay,
     translate
   })
@@ -176,7 +180,7 @@ async function scroll() {
   if (isHorizontal.value) {
     if (props.scrollable) {
       setTransition({
-        duration: cRect.width / props.speed,
+        duration: cRect.width / speedInPx.value,
         delay: props.delay,
         translate: -cRect.width
       })
@@ -232,7 +236,7 @@ function animationEnd() {
 
       if (isHorizontal.value) {
         setTransition({
-          duration: (wrapWidth.value + contentRect.value.width) / props.speed,
+          duration: (wrapWidth.value + contentRect.value.width) / speedInPx.value,
           delay: props.delay,
           translate: -contentRect.value.width
         })

package/components/oxy-notice-bar/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 
 export type NoticeBarType = 'warning' | 'info' | 'danger' | ''
 export type NoticeBarScrollDirection = 'horizontal' | 'vertical'
@@ -26,9 +26,9 @@ export const noticeBarProps = {
    */
   delay: makeNumberProp(1),
   /**
-   * 滚动速度（px/s）
+   * 滚动速度（支持 px/rpx，number 与纯数字字符串按 rpx 处理）
    */
-  speed: makeNumberProp(50),
+  speed: makeNumericProp(100),
   /**
    * 是否可关闭
    */

package/components/oxy-notify/index.ts

@@ -54,6 +54,7 @@ function getDefaultOptions(): NotifyProps {
     position: 'top',
     safeHeight: undefined,
     background: undefined,
+    maxWidth: '',
     onClick: undefined,
     onClosed: undefined,
     onOpened: undefined

package/components/oxy-notify/oxy-notify.vue

@@ -4,6 +4,7 @@
     :custom-style="customStyle"
     :position="state.position"
     :z-index="state.zIndex"
+    :max-width="state.maxWidth"
     :duration="250"
     :modal="false"
     :root-portal="state.rootPortal"
@@ -31,7 +32,7 @@ import OxyPopup from '../oxy-popup/oxy-popup.vue'
 import { inject, computed, watch, ref } from 'vue'
 import { notifyProps, type NotifyProps } from './types'
 import { getNotifyOptionKey } from '.'
-import { addUnit, isFunction } from '../common/util'
+import { isFunction, unitConvert } from '../common/util'
 
 const props = defineProps(notifyProps)
 const emits = defineEmits<{
@@ -47,7 +48,7 @@ const customStyle = computed(() => {
   let customStyle: string = ''
   switch (position) {
     case 'top':
-      customStyle = `top: calc(var(--window-top) + ${addUnit(safeHeight || 0)})`
+      customStyle = `top: calc(var(--window-top) + ${unitConvert(safeHeight || 0, 0, { output: 'px' })})`
       break
     case 'bottom':
       customStyle = 'bottom: var(--window-bottom)'

package/components/oxy-notify/types.ts

@@ -59,6 +59,13 @@ export const notifyProps = {
    * 背景颜色
    */
   background: makeStringProp(''),
+  /**
+   * 通知最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * 数值和纯数字字符串按 `rpx` 处理，`%` 在打开时按屏幕宽度换算为 `rpx`
+   * 类型：number | string
+   * 默认值：''
+   */
+  maxWidth: makeNumericProp(''),
   /**
    * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
    */

package/components/oxy-pagination/index.scss

@@ -48,7 +48,7 @@
     padding: $-pagination-nav-sepatator-padding;
   }
   @include edeep(left){
-    transform: rotate(180deg) translateY(1px);
+    transform: rotate(180deg) translateY(2rpx);
     display: inline-block;
   }
   @include e(current){

package/components/oxy-password-input/oxy-password-input.vue

@@ -5,7 +5,7 @@
         v-for="(_, index) in length"
         :key="index"
         :class="`oxy-password-input__item ${gutter ? '' : 'is-border'}`"
-        :style="{ marginLeft: index !== 0 && gutter ? addUnit(gutter) : 0 }"
+        :style="{ marginLeft: index !== 0 && gutter ? withDefaultUnit(gutter) : 0 }"
       >
         <view v-if="focused && index === modelValue.length" class="oxy-password-input__cursor"></view>
         <view v-else :class="`oxy-password-input__value`">
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { addUnit } from '../common/util'
+import { withDefaultUnit } from '../common/util'
 import { passwordInputProps } from './types'
 
 defineProps(passwordInputProps)

package/components/oxy-password-input/types.ts

@@ -19,7 +19,7 @@ export const passwordInputProps = {
    */
   errorInfo: makeStringProp(''),
   /**
-   * 输入框格子之间的间距，如 20px 2em，默认单位为 px
+   * 输入框格子之间的间距，支持 `px/rpx`，也支持如 `2em` 等 CSS 单位
    */
   gutter: makeNumericProp(0),
   /**

package/components/oxy-picker/index.scss

@@ -27,7 +27,7 @@
 
 @include b(picker) {
   @include edeep(popup) {
-    border-radius: 16px 16px 0px 0px;
+    border-radius: 32rpx 32rpx 0 0;
   }
 
   @include edeep(cell) {
@@ -91,7 +91,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;
@@ -107,4 +107,47 @@
     float: 1;
     color: $-picker-toolbar-title-color;
   }
+
+  @include e(search) {
+    padding: 0 32rpx 24rpx 32rpx;
+    background: #fff;
+  }
+
+  @include e(search-input) {
+    display: flex;
+    align-items: center;
+    height: 72rpx;
+    padding: 0 24rpx;
+    background: #f5f5f5;
+    border-radius: 36rpx;
+
+    input {
+      flex: 1;
+      height: 100%;
+      margin-left: 16rpx;
+      font-size: 28rpx;
+      background: transparent;
+      border: none;
+      outline: none;
+    }
+  }
+
+  @include e(search-icon) {
+    font-size: 32rpx;
+    color: #999;
+  }
+
+  @include e(search-clear) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32rpx;
+    height: 32rpx;
+    margin-left: 8rpx;
+  }
+
+  @include e(search-clear-icon) {
+    font-size: 32rpx;
+    color: #999;
+  }
 }

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

@@ -44,6 +44,7 @@
       :hide-when-close="false"
       :close-on-click-modal="closeOnClickModal"
       :z-index="zIndex"
+      :max-width="popupMaxWidth"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       :root-portal="rootPortal"
       @close="onCancel"
@@ -59,6 +60,15 @@
             {{ confirmButtonText || translate('done') }}
           </view>
         </view>
+        <view v-if="searchable" class="oxy-picker__search">
+          <view class="oxy-picker__search-input">
+            <oxy-icon name="search" custom-class="oxy-picker__search-icon" />
+            <input v-model="searchKeyword" :placeholder="searchPlaceholder" @input="handleSearch" />
+            <view v-if="searchKeyword" class="oxy-picker__search-clear" @click="clearSearch">
+              <oxy-icon name="error-fill" custom-class="oxy-picker__search-clear-icon" />
+            </view>
+          </view>
+        </view>
         <oxy-picker-view
           ref="pickerViewOxy"
           :custom-class="customViewClass"
@@ -97,16 +107,14 @@ import OxyPopup from '../oxy-popup/oxy-popup.vue'
 import OxyPickerView from '../oxy-picker-view/oxy-picker-view.vue'
 import OxyCell from '../oxy-cell/oxy-cell.vue'
 import { getCurrentInstance, onBeforeMount, ref, watch, computed, onMounted, nextTick } from 'vue'
-import { deepClone, defaultDisplayFormat, getType, isArray, isDef, isFunction } from '../common/util'
+import { deepClone, defaultDisplayFormat, getType, isArray, isDef, isFunction, debounce } from '../common/util'
 import { type ColumnItem, formatArray, type PickerViewInstance } from '../oxy-picker-view/types'
-import { FORM_KEY, type FormItemRule } from '../oxy-form/types'
-import { useParent } from '../composables/useParent'
 import { useTranslate } from '../composables/useTranslate'
-import { pickerProps, type PickerExpose } from './types'
+import { pickerProps, type PickerExpose, type PickerSearchEvent } from './types'
 const { translate } = useTranslate('picker')
 
 const props = defineProps(pickerProps)
-const emit = defineEmits(['confirm', 'open', 'cancel', 'clear', 'update:modelValue'])
+const emit = defineEmits(['confirm', 'open', 'cancel', 'clear', 'update:modelValue', 'search'])
 
 const pickerViewOxy = ref<PickerViewInstance | null>(null)
 
@@ -121,6 +129,8 @@ const displayColumns = ref<Array<string | number | ColumnItem | Array<string | n
 const resetColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>([]) // 保存之前的 columns，当取消时，将数据源回滚，避免多级联动数据源不正确的情况
 const isPicking = ref<boolean>(false) // 判断pickview是否还在滑动中
 const hasConfirmed = ref<boolean>(false) // 判断用户是否点击了确认按钮
+const searchKeyword = ref<string>('')
+const filteredDisplayColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>([]) // 保存过滤后的显示列
 
 const isLoading = computed(() => {
   return props.loading || innerLoading.value
@@ -188,6 +198,9 @@ watch(
   }
 )
 
+const isMultiColumn = computed(() => {
+  return props.columns.length > 0 && isArray(props.columns[0])
+})
 // 是否展示清除按钮
 const showClear = computed(() => {
   return props.clearable && !props.disabled && !props.readonly && showValue.value.length > 0
@@ -266,7 +279,7 @@ function getSelects(value: string | number | Array<string | number | Array<any>>
   let selected: number[] = []
   value.forEach((target, col) => {
     let row = formatColumns[col].findIndex((row) => {
-      return row[props.valueKey].toString() === target.toString()
+      return (row as any)[props.valueKey].toString() === target.toString()
     })
     row = row === -1 ? 0 : row
     selected.push(row)
@@ -293,11 +306,16 @@ function close() {
  */
 function showPopup() {
   if (props.disabled || props.readonly) return
+  if (isFunction(props.beforeOpen) && !props.beforeOpen()) {
+    return
+  }
 
   emit('open')
   popupShow.value = true
   pickerValue.value = props.modelValue
-  displayColumns.value = resetColumns.value
+  if (isMultiColumn.value) {
+    displayColumns.value = resetColumns.value
+  }
 }
 
 /**
@@ -306,10 +324,13 @@ function showPopup() {
 function onCancel() {
   popupShow.value = false
   emit('cancel')
-  let timmer = setTimeout(() => {
-    clearTimeout(timmer)
-    isDef(pickerViewOxy.value) && pickerViewOxy.value.resetColumns(resetColumns.value)
-  }, 300)
+  if (isMultiColumn.value) {
+    resetColumns.value = displayColumns.value
+    let timmer = setTimeout(() => {
+      clearTimeout(timmer)
+      isDef(pickerViewOxy.value) && pickerViewOxy.value.resetColumns(resetColumns.value)
+    }, 300)
+  }
 }
 /**
  * 点击确定按钮触发。展示选中值，触发cancel事件。
@@ -344,10 +365,25 @@ function handleConfirm() {
 
   const selects = pickerViewOxy.value!.getSelects()
   const values = pickerViewOxy.value!.getValues()
-  // 获取当前的数据源，并设置给 resetColumns，用于取消时可以回退数据源
-  const columns = pickerViewOxy.value!.getColumnsData()
+
+  let isSearchResultEmpty = false
+
+  if (isMultiColumn.value) {
+    isSearchResultEmpty = displayColumns.value.every((column) => {
+      return isArray(column) && column.length === 0
+    })
+    const columns = pickerViewOxy.value!.getColumnsData()
+    resetColumns.value = deepClone(columns)
+  } else {
+    isSearchResultEmpty = displayColumns.value.length === 0
+  }
+
+  if (isSearchResultEmpty) {
+    popupShow.value = false
+    return
+  }
+
   popupShow.value = false
-  resetColumns.value = deepClone(columns)
   emit('update:modelValue', values)
 
   setShowValue(selects)
@@ -397,10 +433,63 @@ function setLoading(loading: boolean) {
 
 function handleClear() {
   const clearValue = isArray(pickerValue.value) ? [] : ''
+  resetColumns.value = props.columns
+
   emit('update:modelValue', clearValue)
   emit('clear')
 }
 
+function handleSearch() {
+  debouncedFilterColumns()
+}
+
+function clearSearch() {
+  searchKeyword.value = ''
+  // filteredDisplayColumns.value = []
+  // displayColumns.value = resetColumns.value
+  debouncedFilterColumns()
+}
+
+function filterColumns() {
+  const keyword = searchKeyword.value.trim().toLowerCase()
+  emit('search', { keyword } as PickerSearchEvent)
+
+  if (props.filterMethod && isFunction(props.filterMethod)) {
+    filteredDisplayColumns.value = props.filterMethod({ keyword } as PickerSearchEvent)
+    displayColumns.value = filteredDisplayColumns.value
+    if (!keyword) {
+      resetColumns.value = filteredDisplayColumns.value
+    }
+    return
+  }
+  if (isMultiColumn.value) {
+    return
+  }
+  if (!keyword) {
+    filteredDisplayColumns.value = []
+    displayColumns.value = resetColumns.value
+    return
+  }
+
+  const searchKey = props.searchKey || props.labelKey
+
+  const filteredItems = resetColumns.value.filter((item) => {
+    if (typeof item === 'string' || typeof item === 'number') {
+      return item.toString().toLowerCase().includes(keyword)
+    }
+    if (typeof item === 'object' && item !== null) {
+      const value = (item as any)[searchKey] || (item as any)[props.labelKey]
+      return value != null && value.toString().toLowerCase().includes(keyword)
+    }
+    return false
+  })
+
+  filteredDisplayColumns.value = filteredItems
+  displayColumns.value = filteredItems
+}
+
+const debouncedFilterColumns = debounce(filterColumns, 300)
+
 defineExpose<PickerExpose>({
   close,
   open,

package/components/oxy-picker/types.ts

@@ -138,6 +138,10 @@ export const pickerProps = {
    * 自定义层级
    */
   zIndex: makeNumberProp(15),
+  /**
+   * popup 最大宽度，支持 `rpx`、`px`、`%` 等单位
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
    */
@@ -161,7 +165,31 @@ export const pickerProps = {
   /**
    * 必填标记位置，可选值：before、after
    */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 打开pop之前的校验
+   */
+  beforeOpen: Function as PropType<() => boolean>,
+  /**
+   * 是否启用搜索功能
+   */
+  searchable: makeBooleanProp(false),
+  /**
+   * 搜索框占位符
+   */
+  searchPlaceholder: makeStringProp('请输入搜索关键词'),
+  /**
+   * 搜索时过滤的键名，默认使用 labelKey
+   */
+  searchKey: String,
+  /**
+   * 搜索时触发的事件
+   */
+  onSearch: Function as PropType<(event: PickerSearchEvent) => void>,
+  /**
+   * 筛选方法，用于多列或级联选择器的自定义筛选逻辑
+   */
+  filterMethod: Function as PropType<(event: PickerSearchEvent) => any>
 }
 
 export type PickerProps = ExtractPropTypes<typeof pickerProps>
@@ -186,4 +214,8 @@ export type PickerExpose = {
   setLoading: (loading: boolean) => void
 }
 
+export type PickerSearchEvent = {
+  keyword: string
+}
+
 export type PickerInstance = ComponentPublicInstance<PickerExpose, PickerProps>

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

@@ -26,7 +26,7 @@
 
 @include b(picker-view) {
   position: relative;
-  padding: 10px 0;
+  padding: 20rpx 0;
 
   @include e(columns) {
     position: relative;
@@ -47,7 +47,7 @@
     background-repeat: no-repeat;
     z-index: 2;
     pointer-events: none;
-    filter: blur(4px);
+    filter: blur(8rpx);
   }
 
   @include e(loading) {
@@ -89,4 +89,4 @@
       color: $-picker-column-disabled-color;
     }
   }
-}
+}

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

@@ -3,12 +3,12 @@
     <view class="oxy-picker-view__loading" v-if="loading">
       <oxy-loading :color="loadingColor" />
     </view>
-    <view :style="`height: ${columnsHeight - 20}px;`">
+    <view :style="`height: ${(columnsHeight - 20) * 2}rpx;`">
       <picker-view
         mask-class="oxy-picker-view__mask"
         indicator-class="oxy-picker-view__roller"
-        :indicator-style="`height: ${itemHeight}px;`"
-        :style="`height: ${columnsHeight - 20}px;`"
+        :indicator-style="`height: ${itemHeight * 2}rpx;`"
+        :style="`height: ${(columnsHeight - 20) * 2}rpx;`"
         :value="selectedIndex"
         :immediate-change="immediateChange"
         @change="onChange"
@@ -22,7 +22,7 @@
             :class="`oxy-picker-view-column__item ${row['disabled'] ? 'oxy-picker-view-column__item--disabled' : ''}  ${
               selectedIndex[colIndex] == rowIndex ? 'oxy-picker-view-column__item--active' : ''
             }`"
-            :style="`line-height: ${itemHeight}px;`"
+            :style="`line-height: ${itemHeight * 2}rpx;`"
           >
             {{ row[labelKey] }}
           </view>

package/components/oxy-popover/index.scss

@@ -7,7 +7,7 @@
     @include e(pos) {
       background: rgb(75, 76, 77);
       color: $-dark-color;
-      box-shadow: 0px 2px 10px 0px rgba(75, 76, 77, 0.1);
+      box-shadow: 0 4rpx 20rpx 0 rgba(75, 76, 77, 0.1);
     }
 
     @include e(menu) {
@@ -34,8 +34,8 @@
 
   @include edeep(icon) {
     vertical-align: middle;
-    font-size: 18px;
-    margin-right: 5px;
+    font-size: 36rpx;
+    margin-right: 10rpx;
   }
 
   @include e(menu-inner) {
@@ -66,7 +66,7 @@
     box-sizing: border-box;
     background-clip: padding-box;
     text-align: center;
-    min-height: 36px;
+    min-height: 72rpx;
     z-index: $-popover-z-index;
     line-height: $-popover-line-height;
     font-size: $-popover-fs;
@@ -104,13 +104,13 @@
   }
 
   @include edeep(close-icon) {
-    font-size: 12px;
+    font-size: 24rpx;
     position: absolute;
-    right: -8px;
-    top: -10px;
+    right: -16rpx;
+    top: -20rpx;
     transform: scale(0.5);
-    padding: 10px;
+    padding: 20rpx;
   }
 
   @include squareArrow($-popover-arrow-size, $-popover-bg, $-popover-z-index - 1, $-popover-arrow-box-shadow);
-}
+}

package/components/oxy-popup/index.scss

@@ -30,8 +30,8 @@
 @include b(popup) {
   @include edeep(close) {
     position: absolute;
-    top: 10px;
-    right: 10px;
+    top: 20rpx;
+    right: 20rpx;
     color: $-popup-close-color;
     font-size: $-popup-close-size;
     transform: rotate(-45deg);