@tplc/wot 1.0.16 → 1.0.18

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.0.18](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v1.0.17...v1.0.18) (2025-12-29)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* **release:** 0.7.33 ([1d6cbfd](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/1d6cbfd08c7bfca80e6116ac40d46b909b49b888))
+
+
+### ✨ Features | 新功能
+
+* Add `payCardId` to payment form and component, and refine payment type watch logic with minor UI alignment. ([0cac8e4](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/0cac8e49e678a81f3a1340b251c05aa591e28146))
+* add button type to SelectPicker and implement remote search functionality ([2e09dea](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/2e09dea2be7087b925d732b0211641d2e1039424))
+
+### [1.0.17](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.32...v1.0.17) (2025-12-28)
+
+
+### ♻️ Code Refactoring | 代码重构
+
+* remove unused type definitions and components from business package ([2bd79a4](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/2bd79a4c6c546a1c079ca4e291c73bd9d49a8f23))
+
 ### [1.0.16](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.22...v1.0.16) (2025-12-17)
 
 

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

@@ -18,7 +18,7 @@
 }
 
 @include b(select-picker) {
-   @include edeep(cell) {
+  @include edeep(cell) {
     @include when(disabled) {
       .wd-cell__value {
         color: $-input-disabled-color;
@@ -47,7 +47,7 @@
       }
     }
   }
-  
+
   @include edeep(arrow, clear) {
     display: block;
     font-size: $-cell-icon-size;
@@ -58,7 +58,7 @@
   @include edeep(clear) {
     color: $-cell-clear-color;
   }
- 
+
   @include e(loading) {
     position: absolute;
     display: flex;
@@ -71,7 +71,7 @@
     z-index: 3;
     background: $-picker-loading-bg;
   }
-  
+
   @include edeep(header) {
     height: 72px;
     line-height: 72px;
@@ -99,41 +99,4 @@
   @include e(footer) {
     padding: 24px 15px;
   }
-
-  // ========== 你的自定义样式 ==========
-  
-  // 没有更多数据样式
-  @include e(no-more) {
-    text-align: center;
-    color: $-cell-arrow-color;
-    padding: 24rpx 0;
-    font-size: 28rpx;
-  }
-
-  // 内部加载样式
-  @include e(innerLoading) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: $-picker-loading-bg;
-    padding: 24rpx 0;
-  }
-
-  // 按钮样式
-  @include e(button) {
-    width: 100%;
-    height: 72rpx;
-    line-height: 72rpx;
-    border-radius: 8rpx;
-    font-size: 28rpx;
-    color: #333;
-    box-sizing: border-box;
-    text-align: center;
-    border: 1px solid #eee;
-    &--active {
-      color: $-color-theme;
-      border: 1px solid $-color-theme;
-    }
-  }
 }
-

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

@@ -1,8 +1,23 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import {
+  baseProps,
+  makeArrayProp,
+  makeBooleanProp,
+  makeNumberProp,
+  makeRequiredProp,
+  makeStringProp,
+} from '../common/props'
 import type { FormItemRule } from '../wd-form/types'
 
-export type SelectPickerType = 'checkbox' | 'radio'
+export type SelectPickerType = 'checkbox' | 'radio' | 'button'
+export type SelectPickerRemote = {
+  action: (
+    search: string,
+    params: { pageSearch: { page: number; limit: number } },
+  ) => Promise<Record<string, any>[]>
+  pageSize?: number
+  isPage?: boolean
+}
 
 export const selectPickerProps = {
   ...baseProps,
@@ -24,22 +39,12 @@ export const selectPickerProps = {
   error: makeBooleanProp(false),
   /** 必填样式 */
   required: makeBooleanProp(false),
-  /**
-   * 使用 label 插槽时设置该选项
-   * @deprecated 可以直接使用标签插槽，无需配置此选项
-   */
+  /** 使用 label 插槽时设置该选项 */
   useLabelSlot: makeBooleanProp(false),
-  /**
-   * 使用默认插槽时设置该选项
-   * @deprecated 可以直接使用默认插槽，无需配置此选项
-   */
+  /** 使用默认插槽时设置该选项 */
   useDefaultSlot: makeBooleanProp(false),
   /** 设置选择器大小 */
   size: String,
-  /**
-   * 是否垂直居中
-   */
-  center: makeBooleanProp(false),
   /** 选中的颜色（单/复选框） */
   checkedColor: String,
   /** 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） */
@@ -55,7 +60,9 @@ export const selectPickerProps = {
   /** 点击遮罩是否关闭 */
   closeOnClickModal: makeBooleanProp(true),
   /** 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string */
-  modelValue: makeRequiredProp([String, Number, Boolean, Array] as PropType<string | number | boolean | (string | number | boolean)[]>),
+  modelValue: makeRequiredProp([String, Number, Boolean, Array] as PropType<
+    string | number | boolean | (string | number | boolean)[]
+  >),
   /** 选择器数据，一维数组 */
   columns: makeArrayProp<Record<string, any>>(),
   /** 单复选选择器类型 */
@@ -76,6 +83,10 @@ export const selectPickerProps = {
   safeAreaInsetBottom: makeBooleanProp(true),
   /** 可搜索（目前只支持本地搜索） */
   filterable: makeBooleanProp(false),
+  /** 远程搜索配置 */
+  remoteConfig: {
+    type: Object as PropType<SelectPickerRemote>,
+  },
   /** 搜索框占位符 */
   filterPlaceholder: String,
   /** 是否超出隐藏 */
@@ -94,24 +105,20 @@ export const selectPickerProps = {
   customValueClass: makeStringProp(''),
   /** 是否显示确认按钮（radio类型生效），默认值为：true */
   showConfirm: makeBooleanProp(true),
-  /**
-   * 显示清空按钮
-   */
-  clearable: makeBooleanProp(false),
-  /**
-   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
-   */
-  rootPortal: makeBooleanProp(false),
-  /**
-   * 必填标记位置，可选值：before、after
-   */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  /** 默认展示文案 */
+  defaultLabel: String,
 }
 export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
 
-export type SelectPickerDisplayFormat = (items: string | number | boolean | (string | number | boolean)[], columns: Record<string, any>[]) => string
+export type SelectPickerDisplayFormat = (
+  items: string | number | boolean | (string | number | boolean)[],
+  columns: Record<string, any>[],
+) => string
 
-export type SelectPickerBeforeConfirm = (value: string | number | boolean | (string | number | boolean)[], resolve: (isPass: boolean) => void) => void
+export type SelectPickerBeforeConfirm = (
+  value: string | number | boolean | (string | number | boolean)[],
+  resolve: (isPass: boolean) => void,
+) => void
 
 export type SelectPickerExpose = {
   // 打开picker弹框

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

@@ -1,38 +1,45 @@
 <template>
-  <view :class="`wd-select-picker ${customClass}`" :style="customStyle">
-    <wd-cell
-      v-if="!$slots.default"
-      :title="label"
-      :value="showValue || placeholder || translate('placeholder')"
-      :required="required"
-      :size="size"
-      :title-width="labelWidth"
-      :prop="prop"
-      :rules="rules"
-      :clickable="!disabled && !readonly"
-      :value-align="alignRight ? 'right' : 'left'"
-      :center="center"
-      :custom-class="cellClass"
-      :custom-style="customStyle"
-      :custom-title-class="customLabelClass"
-      :custom-value-class="customValueClass"
-      :ellipsis="ellipsis"
-      :use-title-slot="!!$slots.label"
-      :marker-side="markerSide"
-      @click="open"
-    >
-      <template v-if="$slots.label" #title>
-        <slot name="label"></slot>
-      </template>
-      <template #right-icon>
-        <wd-icon v-if="showArrow" custom-class="wd-select-picker__arrow" name="arrow-right" />
-        <view v-else-if="showClear" @click.stop="handleClear">
-          <wd-icon custom-class="wd-select-picker__clear" name="error-fill" />
+  <view
+    :class="`wd-select-picker ${cell.border.value ? 'is-border' : ''} ${customClass}`"
+    :style="customStyle"
+  >
+    <view class="wd-select-picker__field" @click="open">
+      <slot v-if="useDefaultSlot"></slot>
+      <view
+        v-else
+        :class="`wd-select-picker__cell ${disabled && 'is-disabled'} ${readonly && 'is-readonly'} ${alignRight && 'is-align-right'} ${
+          error && 'is-error'
+        } ${size && 'is-' + size}`"
+      >
+        <view
+          v-if="label || useLabelSlot"
+          :class="`wd-select-picker__label ${isRequired && 'is-required'} ${customLabelClass}`"
+          :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
+        >
+          <text v-if="label" class="wd-select-picker__label-inner">{{ label }}</text>
+          <slot v-else name="label"></slot>
+        </view>
+        <view class="wd-select-picker__body">
+          <view class="wd-select-picker__value-wraper">
+            <view
+              :class="`wd-select-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${
+                showValue ? '' : 'wd-select-picker__value--placeholder'
+              }`"
+            >
+              {{ showValue || placeholder || translate('placeholder') }}
+            </view>
+            <wd-icon
+              v-if="!disabled && !readonly"
+              custom-class="wd-select-picker__arrow"
+              name="arrow-right"
+            />
+          </view>
+
+          <view v-if="errorMessage" class="wd-select-picker__error-message">
+            {{ errorMessage }}
+          </view>
         </view>
-      </template>
-    </wd-cell>
-    <view v-else @click="open">
-      <slot></slot>
+      </view>
     </view>
     <wd-action-sheet
       v-model="pickerShow"
@@ -41,7 +48,6 @@
       :close-on-click-modal="closeOnClickModal"
       :z-index="zIndex"
       :safe-area-inset-bottom="safeAreaInsetBottom"
-      :root-portal="rootPortal"
       @close="close"
       @opened="scrollIntoView ? setScrollIntoView() : ''"
       custom-header-class="wd-select-picker__header"
@@ -52,22 +58,39 @@
         :placeholder="filterPlaceholder || translate('filterPlaceholder')"
         hide-cancel
         placeholder-left
+        @search="handleFilterSearch"
         @change="handleFilterChange"
       />
+
       <scroll-view
         :class="`wd-select-picker__wrapper ${filterable ? 'is-filterable' : ''} ${loading ? 'is-loading' : ''} ${customContentClass}`"
         :scroll-y="!loading"
         :scroll-top="scrollTop"
         :scroll-with-animation="true"
+        @scrolltolower="handleScrollToLower"
       >
         <!-- 多选 -->
         <view v-if="type === 'checkbox' && isArray(selectList)" id="wd-checkbox-group">
-          <wd-checkbox-group v-model="selectList" cell :size="selectSize" :checked-color="checkedColor" :min="min" :max="max" @change="handleChange">
-            <view v-for="item in filterColumns" :key="item[valueKey]" :id="'check' + item[valueKey]">
+          <wd-checkbox-group
+            v-model="selectList"
+            cell
+            :size="selectSize"
+            :checked-color="checkedColor"
+            :min="min"
+            :max="max"
+            @change="handleChange"
+          >
+            <view
+              v-for="item in filterColumns"
+              :key="item[valueKey]"
+              :id="'check' + item[valueKey]"
+            >
               <wd-checkbox :modelValue="item[valueKey]" :disabled="item.disabled">
                 <block v-if="filterable && filterVal">
                   <block v-for="text in item[labelKey]" :key="text.label">
-                    <text v-if="text.type === 'active'" class="wd-select-picker__text-active">{{ text.label }}</text>
+                    <text v-if="text.type === 'active'" class="wd-select-picker__text-active">
+                      {{ text.label }}
+                    </text>
                     <block v-else>{{ text.label }}</block>
                   </block>
                 </block>
@@ -78,14 +101,59 @@
             </view>
           </wd-checkbox-group>
         </view>
+        <!-- 多选/单选 -->
+        <view
+          v-if="type === 'button' && !isArray(selectList)"
+          id="wd-radio-group"
+          class="grid gap-3 grid-cols-3 mb-3"
+        >
+          <view
+            v-for="item in filterColumns"
+            :key="item[valueKey]"
+            :id="'radio' + item[valueKey]"
+            @click="
+              handleChange({
+                value: item[valueKey],
+              })
+            "
+            :disabled="item.disabled"
+            :round="false"
+            plain
+            class="wd-select-picker__button"
+            :class="`${selectList === item[valueKey] ? 'wd-select-picker__button--active' : ''} ${item.disabled ? 'wd-select-picker__button--disabled' : ''}`"
+          >
+            <block v-if="filterable && filterVal">
+              <block v-for="text in item[labelKey]" :key="text.label">
+                {{ text.label }}
+              </block>
+            </block>
+            <block v-else>
+              {{ item[labelKey] }}
+            </block>
+          </view>
+        </view>
         <!-- 单选 -->
         <view v-if="type === 'radio' && !isArray(selectList)" id="wd-radio-group">
-          <wd-radio-group v-model="selectList" cell :size="selectSize" :checked-color="checkedColor" @change="handleChange">
-            <view v-for="(item, index) in filterColumns" :key="index" :id="'radio' + item[valueKey]">
+          <wd-radio-group
+            v-model="selectList"
+            cell
+            :size="selectSize"
+            :checked-color="checkedColor"
+            @change="handleChange"
+          >
+            <view
+              v-for="(item, index) in filterColumns"
+              :key="index"
+              :id="'radio' + item[valueKey]"
+            >
               <wd-radio :value="item[valueKey]" :disabled="item.disabled">
-                <block v-if="filterable && filterVal">
+                <block v-if="filterable && filterVal && !remoteConfig">
                   <block v-for="text in item[labelKey]" :key="text.label">
-                    <text :class="`${text.type === 'active' ? 'wd-select-picker__text-active' : ''}`">{{ text.label }}</text>
+                    <text
+                      :clsss="`${text.type === 'active' ? 'wd-select-picker__text-active' : ''}`"
+                    >
+                      {{ text.label }}
+                    </text>
                   </block>
                 </block>
                 <block v-else>
@@ -98,10 +166,16 @@
         <view v-if="loading" class="wd-select-picker__loading" @touchmove="noop">
           <wd-loading :color="loadingColor" />
         </view>
+        <view v-if="innerLoading" class="wd-select-picker__innerLoading">
+          <wd-loading :color="loadingColor" />
+        </view>
+        <view v-if="noMore" class="wd-select-picker__no-more">没有更多数据了</view>
       </scroll-view>
       <!-- 确认按钮 -->
       <view v-if="showConfirm" class="wd-select-picker__footer">
-        <wd-button block size="large" @click="onConfirm" :disabled="loading">{{ confirmButtonText || translate('confirm') }}</wd-button>
+        <wd-button block size="large" @click="onConfirm" :disabled="loading">
+          {{ confirmButtonText || translate('confirm') }}
+        </wd-button>
       </view>
     </wd-action-sheet>
   </view>
@@ -112,30 +186,24 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script lang="ts" setup>
-import wdActionSheet from '../wd-action-sheet/wd-action-sheet.vue'
-import wdCheckbox from '../wd-checkbox/wd-checkbox.vue'
-import wdCheckboxGroup from '../wd-checkbox-group/wd-checkbox-group.vue'
-import wdRadio from '../wd-radio/wd-radio.vue'
-import wdRadioGroup from '../wd-radio-group/wd-radio-group.vue'
-import wdButton from '../wd-button/wd-button.vue'
-import wdLoading from '../wd-loading/wd-loading.vue'
-import wdCell from '../wd-cell/wd-cell.vue'
-
-import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed } from 'vue'
-import { getRect, isArray, isDef, isFunction, pause } from '../common/util'
+import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed, watchEffect } from 'vue'
+import { useCell } from '../composables/useCell'
+import { getRect, isArray, isDef, isFunction, requestAnimationFrame } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
 import { useTranslate } from '../composables/useTranslate'
 import { selectPickerProps, type SelectPickerExpose } from './types'
 
 const { translate } = useTranslate('select-picker')
 
 const props = defineProps(selectPickerProps)
-const emit = defineEmits(['change', 'cancel', 'confirm', 'clear', 'update:modelValue', 'open', 'close'])
+const emit = defineEmits(['change', 'cancel', 'confirm', 'update:modelValue', 'open', 'close'])
 
 const pickerShow = ref<boolean>(false)
 const selectList = ref<Array<number | boolean | string> | number | boolean | string>([])
@@ -143,44 +211,55 @@ const isConfirm = ref<boolean>(false)
 const lastSelectList = ref<Array<number | boolean | string> | number | boolean | string>([])
 const filterVal = ref<string>('')
 const filterColumns = ref<Array<Record<string, any>>>([])
-const scrollTop = ref<number>(0) // 滚动位置
-
-const showValue = computed(() => {
+const scrollTop = ref<number | null>(0) // 滚动位置
+const cell = useCell()
+const pageNum = ref<number>(1)
+const noMore = ref<boolean>(false)
+const innerLoading = ref<boolean>(false)
+const currentColumns = ref<Record<string, any>>()
+const showValue = ref<string>('')
+
+watchEffect(() => {
   const value = valueFormat(props.modelValue)
-  let showValueTemp: string = ''
 
   if (props.displayFormat) {
-    showValueTemp = props.displayFormat(value, props.columns)
+    showValue.value = props.displayFormat(value, props.columns || filterColumns.value)
   } else {
     const { type, labelKey } = props
     if (type === 'checkbox') {
       const selectedItems = (isArray(value) ? value : []).map((item) => {
         return getSelectedItem(item)
       })
-      showValueTemp = selectedItems
+      showValue.value = selectedItems
         .map((item) => {
           return item[labelKey]
         })
         .join(', ')
     } else if (type === 'radio') {
       const selectedItem = getSelectedItem(value as string | number | boolean)
-      showValueTemp = selectedItem[labelKey]
+      showValue.value = selectedItem[labelKey] || currentColumns.value?.[labelKey]
+      if (selectedItem[labelKey]) {
+        currentColumns.value = selectedItem
+      }
     } else {
-      showValueTemp = value as string
+      showValue.value = value as string
     }
   }
-  return showValueTemp
-})
-
-const cellClass = computed(() => {
-  const classes = ['wd-select-picker__cell']
-  if (props.disabled) classes.push('is-disabled')
-  if (props.readonly) classes.push('is-readonly')
-  if (props.error) classes.push('is-error')
-  if (!showValue.value) classes.push('wd-select-picker__cell--placeholder')
-  return classes.join(' ')
 })
-
+watch(
+  () => props.defaultLabel,
+  (defaultLabel) => {
+    if (defaultLabel) {
+      currentColumns.value = {
+        [props.valueKey]: props.modelValue,
+        [props.labelKey]: defaultLabel,
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+)
 watch(
   () => props.modelValue,
   (newValue) => {
@@ -190,8 +269,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 watch(
@@ -205,8 +284,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 watch(
@@ -218,8 +297,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 watch(
@@ -231,20 +310,73 @@ watch(
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
+const { parent: form } = useParent(FORM_KEY)
+
+// 表单校验错误信息
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (
+        Object.prototype.hasOwnProperty.call(rules, key) &&
+        key === props.prop &&
+        Array.isArray(rules[key])
+      ) {
+        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+/** 获取远程数据 */
+const getRemoteData = async () => {
+  innerLoading.value = true
+  const list = await props.remoteConfig?.action(filterVal.value, {
+    pageSearch: {
+      page: pageNum.value,
+      limit: props.remoteConfig?.pageSize || 10,
+    },
+  })
+
+  if (list) {
+    filterColumns.value = pageNum.value === 1 ? list : [...filterColumns.value, ...list]
+    pageNum.value++
+    noMore.value = !list.length
+  }
+  innerLoading.value = false
+}
+const handleScrollToLower = () => {
+  if (noMore.value || innerLoading.value || !props.remoteConfig?.isPage) return
+  getRemoteData()
+}
 onBeforeMount(() => {
   selectList.value = valueFormat(props.modelValue)
-  filterColumns.value = props.columns
+  if (props.remoteConfig) {
+    getRemoteData()
+  } else {
+    filterColumns.value = props.columns
+  }
 })
 
 const { proxy } = getCurrentInstance() as any
 
-async function setScrollIntoView() {
+function setScrollIntoView() {
   let wraperSelector: string = ''
-  let selectorPromise: Promise<UniApp.NodeInfo>[] = []
+  let selectorPromise: Promise<UniApp.NodeInfo | UniApp.NodeInfo[]>[] = []
   if (isDef(selectList.value) && selectList.value !== '' && !isArray(selectList.value)) {
     wraperSelector = '#wd-radio-group'
     selectorPromise = [getRect(`#radio${selectList.value}`, false, proxy)]
@@ -255,24 +387,38 @@ async function setScrollIntoView() {
     wraperSelector = '#wd-checkbox-group'
   }
   if (wraperSelector) {
-    await pause(2000 / 30)
-    Promise.all([getRect('.wd-select-picker__wrapper', false, proxy), getRect(wraperSelector, false, proxy), ...selectorPromise]).then((res) => {
-      if (isDef(res) && isArray(res)) {
-        const scrollView = res[0]
-        const wraper = res[1]
-        const target = res.slice(2) || []
-        if (isDef(wraper) && isDef(scrollView)) {
-          const index = target.findIndex((item) => {
-            return item.bottom! > scrollView.top! && item.top! < scrollView.bottom!
+    requestAnimationFrame().then(() => {
+      requestAnimationFrame().then(() => {
+        Promise.all([
+          getRect('.wd-select-picker__wrapper', false, proxy),
+          getRect(wraperSelector, false, proxy),
+          ...selectorPromise,
+        ])
+          .then((res: any[]) => {
+            if (isDef(res) && isArray(res)) {
+              const scrollView = res[0]
+              const wraper = res[1]
+              const target = res.slice(2) || []
+              if (isDef(wraper) && isDef(scrollView)) {
+                const index = target.findIndex((item) => {
+                  return item.top >= scrollView.top && item.bottom <= scrollView.bottom
+                })
+                if (index < 0) {
+                  scrollTop.value = -1
+                  nextTick(() => {
+                    scrollTop.value = Math.max(
+                      0,
+                      target[0].top - wraper.top - scrollView.height / 2,
+                    )
+                  })
+                }
+              }
+            }
           })
-          if (index < 0) {
-            scrollTop.value = -1
-            nextTick(() => {
-              scrollTop.value = Math.max(0, target[0].top! - wraper.top! - scrollView.height! / 2)
-            })
-          }
-        }
-      }
+          .catch((error) => {
+            console.log(error)
+          })
+      })
     })
   }
 }
@@ -281,8 +427,8 @@ function noop() {}
 
 function getSelectedItem(value: string | number | boolean) {
   const { valueKey, labelKey, columns } = props
-
-  const selecteds = columns.filter((item) => {
+  const list = columns.length > 0 ? columns : filterColumns.value
+  const selecteds = list.filter((item) => {
     return item[valueKey] === value
   })
 
@@ -292,7 +438,7 @@ function getSelectedItem(value: string | number | boolean) {
 
   return {
     [valueKey]: value,
-    [labelKey]: ''
+    [labelKey]: '',
   }
 }
 
@@ -300,10 +446,14 @@ function valueFormat(value: string | number | boolean | (string | number | boole
   return props.type === 'checkbox' ? (isArray(value) ? value : []) : value
 }
 
-function handleChange({ value }: { value: string | number | boolean | (string | number | boolean)[] }) {
+function handleChange({
+  value,
+}: {
+  value: string | number | boolean | (string | number | boolean)[]
+}) {
   selectList.value = value
   emit('change', { value })
-  if (props.type === 'radio' && !props.showConfirm) {
+  if (['radio', 'button'].includes(props.type) && !props.showConfirm) {
     onConfirm()
   }
 }
@@ -357,7 +507,7 @@ function handleConfirm() {
   emit('update:modelValue', lastSelectList.value)
   emit('confirm', {
     value: lastSelectList.value,
-    selectedItems
+    selectedItems,
   })
   emit('close')
 }
@@ -368,12 +518,15 @@ function getFilterText(label: string, filterVal: string) {
   return label.split(reg).map((text) => {
     return {
       type: text === filterVal ? 'active' : 'normal',
-      label: text
+      label: text,
     }
   })
 }
 
 function handleFilterChange({ value }: { value: string }) {
+  if (props.remoteConfig) {
+    return
+  }
   if (value === '') {
     filterColumns.value = []
     filterVal.value = value
@@ -386,6 +539,14 @@ function handleFilterChange({ value }: { value: string }) {
   }
 }
 
+function handleFilterSearch(value: string) {
+  if (!props.remoteConfig) {
+    return
+  }
+  pageNum.value = 1
+  getRemoteData()
+}
+
 function formatFilterColumns(columns: Record<string, any>[], filterVal: string) {
   const filterColumnsTemp = columns.filter((item) => {
     return item[props.labelKey].indexOf(filterVal) > -1
@@ -394,7 +555,7 @@ function formatFilterColumns(columns: Record<string, any>[], filterVal: string)
   const formatFilterColumns = filterColumnsTemp.map((item) => {
     return {
       ...item,
-      [props.labelKey]: getFilterText(item[props.labelKey], filterVal)
+      [props.labelKey]: getFilterText(item[props.labelKey], filterVal),
     }
   })
   filterColumns.value = []
@@ -407,26 +568,11 @@ const showConfirm = computed(() => {
   return (props.type === 'radio' && props.showConfirm) || props.type === 'checkbox'
 })
 
-// 是否展示清除按钮
-const showClear = computed(() => {
-  return props.clearable && !props.disabled && !props.readonly && showValue.value.length
-})
-
-function handleClear() {
-  emit('update:modelValue', props.type === 'checkbox' ? [] : '')
-  emit('clear')
-}
-
-// 是否展示箭头
-const showArrow = computed(() => {
-  return !props.disabled && !props.readonly && !showClear.value
-})
-
 defineExpose<SelectPickerExpose>({
   close,
-  open
+  open,
 })
 </script>
 <style lang="scss" scoped>
-@import './index.scss';
+@import './index';
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "id": "@tplc/wot",
   "name": "@tplc/wot",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "keywords": [
     "wot-design-uni",
     "国际化",

package/types/components/wd-select-picker/types.d.ts

@@ -1,6 +1,19 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
 import type { FormItemRule } from '../wd-form/types'
-export type SelectPickerType = 'checkbox' | 'radio'
+export type SelectPickerType = 'checkbox' | 'radio' | 'button'
+export type SelectPickerRemote = {
+  action: (
+    search: string,
+    params: {
+      pageSearch: {
+        page: number
+        limit: number
+      }
+    },
+  ) => Promise<Record<string, any>[]>
+  pageSize?: number
+  isPage?: boolean
+}
 export declare const selectPickerProps: {
   /** 选择器左侧文案 */
   label: StringConstructor
@@ -35,31 +48,18 @@ export declare const selectPickerProps: {
     type: BooleanConstructor
     default: boolean
   }
-  /**
-   * 使用 label 插槽时设置该选项
-   * @deprecated 可以直接使用标签插槽，无需配置此选项
-   */
+  /** 使用 label 插槽时设置该选项 */
   useLabelSlot: {
     type: BooleanConstructor
     default: boolean
   }
-  /**
-   * 使用默认插槽时设置该选项
-   * @deprecated 可以直接使用默认插槽，无需配置此选项
-   */
+  /** 使用默认插槽时设置该选项 */
   useDefaultSlot: {
     type: BooleanConstructor
     default: boolean
   }
   /** 设置选择器大小 */
   size: StringConstructor
-  /**
-   * 是否垂直居中
-   */
-  center: {
-    type: BooleanConstructor
-    default: boolean
-  }
   /** 选中的颜色（单/复选框） */
   checkedColor: StringConstructor
   /** 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） */
@@ -135,6 +135,10 @@ export declare const selectPickerProps: {
     type: BooleanConstructor
     default: boolean
   }
+  /** 远程搜索配置 */
+  remoteConfig: {
+    type: PropType<SelectPickerRemote>
+  }
   /** 搜索框占位符 */
   filterPlaceholder: StringConstructor
   /** 是否超出隐藏 */
@@ -174,27 +178,8 @@ export declare const selectPickerProps: {
     type: BooleanConstructor
     default: boolean
   }
-  /**
-   * 显示清空按钮
-   */
-  clearable: {
-    type: BooleanConstructor
-    default: boolean
-  }
-  /**
-   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
-   */
-  rootPortal: {
-    type: BooleanConstructor
-    default: boolean
-  }
-  /**
-   * 必填标记位置，可选值：before、after
-   */
-  markerSide: {
-    type: PropType<'before' | 'after'>
-    default: 'before' | 'after'
-  }
+  /** 默认展示文案 */
+  defaultLabel: StringConstructor
   customStyle: {
     type: PropType<string>
     default: string

package/types/components/wd-select-picker/wd-select-picker.vue.d.ts

@@ -1,3 +1,4 @@
+import { type FormItemRule } from '../wd-form/types'
 declare const _default: __VLS_WithTemplateSlots<
   import('vue').DefineComponent<
     {
@@ -34,10 +35,6 @@ declare const _default: __VLS_WithTemplateSlots<
         default: boolean
       }
       size: StringConstructor
-      center: {
-        type: BooleanConstructor
-        default: boolean
-      }
       checkedColor: StringConstructor
       min: {
         type: NumberConstructor
@@ -95,6 +92,9 @@ declare const _default: __VLS_WithTemplateSlots<
         type: BooleanConstructor
         default: boolean
       }
+      remoteConfig: {
+        type: import('vue').PropType<import('./types').SelectPickerRemote>
+      }
       filterPlaceholder: StringConstructor
       ellipsis: {
         type: BooleanConstructor
@@ -106,7 +106,7 @@ declare const _default: __VLS_WithTemplateSlots<
       }
       prop: StringConstructor
       rules: {
-        type: import('vue').PropType<import('../wd-form/types.js').FormItemRule[]>
+        type: import('vue').PropType<FormItemRule[]>
         default: () => never[]
       }
       customContentClass: {
@@ -125,18 +125,7 @@ declare const _default: __VLS_WithTemplateSlots<
         type: BooleanConstructor
         default: boolean
       }
-      clearable: {
-        type: BooleanConstructor
-        default: boolean
-      }
-      rootPortal: {
-        type: BooleanConstructor
-        default: boolean
-      }
-      markerSide: {
-        type: import('vue').PropType<'before' | 'after'>
-        default: 'before' | 'after'
-      }
+      defaultLabel: StringConstructor
       customStyle: {
         type: import('vue').PropType<string>
         default: string
@@ -162,7 +151,6 @@ declare const _default: __VLS_WithTemplateSlots<
       open: (...args: any[]) => void
       change: (...args: any[]) => void
       confirm: (...args: any[]) => void
-      clear: (...args: any[]) => void
     },
     string,
     import('vue').PublicProps,
@@ -201,10 +189,6 @@ declare const _default: __VLS_WithTemplateSlots<
           default: boolean
         }
         size: StringConstructor
-        center: {
-          type: BooleanConstructor
-          default: boolean
-        }
         checkedColor: StringConstructor
         min: {
           type: NumberConstructor
@@ -262,6 +246,9 @@ declare const _default: __VLS_WithTemplateSlots<
           type: BooleanConstructor
           default: boolean
         }
+        remoteConfig: {
+          type: import('vue').PropType<import('./types').SelectPickerRemote>
+        }
         filterPlaceholder: StringConstructor
         ellipsis: {
           type: BooleanConstructor
@@ -273,7 +260,7 @@ declare const _default: __VLS_WithTemplateSlots<
         }
         prop: StringConstructor
         rules: {
-          type: import('vue').PropType<import('../wd-form/types.js').FormItemRule[]>
+          type: import('vue').PropType<FormItemRule[]>
           default: () => never[]
         }
         customContentClass: {
@@ -292,18 +279,7 @@ declare const _default: __VLS_WithTemplateSlots<
           type: BooleanConstructor
           default: boolean
         }
-        clearable: {
-          type: BooleanConstructor
-          default: boolean
-        }
-        rootPortal: {
-          type: BooleanConstructor
-          default: boolean
-        }
-        markerSide: {
-          type: import('vue').PropType<'before' | 'after'>
-          default: 'before' | 'after'
-        }
+        defaultLabel: StringConstructor
         customStyle: {
           type: import('vue').PropType<string>
           default: string
@@ -320,7 +296,6 @@ declare const _default: __VLS_WithTemplateSlots<
       onCancel?: ((...args: any[]) => any) | undefined
       onOpen?: ((...args: any[]) => any) | undefined
       onConfirm?: ((...args: any[]) => any) | undefined
-      onClear?: ((...args: any[]) => any) | undefined
     },
     {
       customStyle: string
@@ -328,8 +303,6 @@ declare const _default: __VLS_WithTemplateSlots<
       type: import('./types').SelectPickerType
       required: boolean
       zIndex: number
-      rootPortal: boolean
-      center: boolean
       closeOnClickModal: boolean
       safeAreaInsetBottom: boolean
       readonly: boolean
@@ -339,7 +312,7 @@ declare const _default: __VLS_WithTemplateSlots<
       loading: boolean
       loadingColor: string
       scrollIntoView: boolean
-      rules: import('../wd-form/types.js').FormItemRule[]
+      rules: FormItemRule[]
       labelWidth: string
       useLabelSlot: boolean
       useDefaultSlot: boolean
@@ -350,18 +323,16 @@ declare const _default: __VLS_WithTemplateSlots<
       customValueClass: string
       columns: Record<string, any>[]
       customContentClass: string
-      markerSide: 'before' | 'after'
       min: number
       valueKey: string
       labelKey: string
-      clearable: boolean
       filterable: boolean
     },
     {}
   >,
   {
-    label?(_: {}): any
     default?(_: {}): any
+    label?(_: {}): any
   }
 >
 export default _default