oxy-uni-ui 1.2.3 → 2.0.0

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)
@@ -300,7 +313,9 @@ function showPopup() {
   emit('open')
   popupShow.value = true
   pickerValue.value = props.modelValue
-  displayColumns.value = resetColumns.value
+  if (isMultiColumn.value) {
+    displayColumns.value = resetColumns.value
+  }
 }
 
 /**
@@ -309,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事件。
@@ -347,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)
@@ -400,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 字段名，在使用表单校验功能的情况下，该属性是必填的
    */
@@ -165,7 +169,27 @@ export const pickerProps = {
   /**
    * 打开pop之前的校验
    */
-  beforeOpen: Function as PropType<() => boolean>
+  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>
@@ -190,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);

package/components/oxy-popup/oxy-popup.vue

@@ -77,11 +77,12 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref } from 'vue'
+import { computed, onBeforeMount, ref, watch } from 'vue'
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 import OxyRootPortal from '../oxy-root-portal/oxy-root-portal.vue'
+import { resolveSizeWithScreenWidth, unitConvert } from '../common/util'
 import { popupProps } from './types'
 import type { TransitionName } from '../oxy-transition/types'
 
@@ -124,9 +125,41 @@ const transitionName = computed<TransitionName | TransitionName[]>(() => {
 })
 
 const safeBottom = ref<number>(0)
+const maxWidthStyleWhenOpen = ref<string>('')
+
+function getMaxWidthStyle() {
+  if (props.maxWidth === '' || props.maxWidth === undefined || props.maxWidth === null) {
+    return ''
+  }
+  const maxWidthValue = resolveSizeWithScreenWidth(props.maxWidth, { defaultUnit: 'rpx' })
+  const widthStyle = props.position === 'center' ? 'width:100%;' : ''
+  return `${widthStyle}max-width:${maxWidthValue};margin-left:auto;margin-right:auto;`
+}
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue) {
+      maxWidthStyleWhenOpen.value = getMaxWidthStyle()
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  [() => props.maxWidth, () => props.position],
+  () => {
+    if (props.modelValue) {
+      maxWidthStyleWhenOpen.value = getMaxWidthStyle()
+    }
+  },
+  { deep: true }
+)
 
 const style = computed(() => {
-  return `z-index:${props.zIndex}; padding-bottom: ${safeBottom.value}px;${props.customStyle}`
+  return `z-index:${props.zIndex};padding-bottom:${unitConvert(safeBottom.value, 0, { output: 'px' })};${maxWidthStyleWhenOpen.value}${
+    props.customStyle
+  }`
 })
 
 const rootClass = computed(() => {

package/components/oxy-popup/types.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue'
-import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 import type { TransitionName } from '../oxy-transition/types'
 
 export type PopupType = 'center' | 'top' | 'right' | 'bottom' | 'left'
@@ -52,6 +52,13 @@ export const popupProps = {
    * 默认值：10
    */
   zIndex: makeNumberProp(10),
+  /**
+   * 弹出层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * 数值和纯数字字符串按 `rpx` 处理，`%` 在打开时按屏幕宽度换算为 `rpx`
+   * 类型：number | string
+   * 默认值：''
+   */
+  maxWidth: makeNumericProp(''),
   /**
    * 是否当关闭时将弹出层隐藏（display: none)
    * 类型：boolean

package/components/oxy-progress/index.scss

@@ -47,8 +47,8 @@
     }
   }
   @include edeep(label) {
-    width: 30px;
-    margin-left: 9px;
+    width: 60rpx;
+    margin-left: 18rpx;
     color: $-progress-label-color;
     font-size: $-progress-label-fs;
   }
@@ -65,4 +65,4 @@
       color: $-progress-warning-color;
     }
   }
-}
+}