@tplc/wot 0.1.63 → 0.1.65

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.
 
+### [0.1.65](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.64...v0.1.65) (2025-03-10)
+
+### [0.1.64](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.3.75...v0.1.64) (2025-03-10)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* **release:** 0.1.63 ([6286500](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/6286500e9cf7b2096ea980ecc69949324cf12859))
+* **release:** 0.3.76 ([74cab95](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/74cab959ceab17fcc46662bd9bdc9e219e551547))
+
+
+### ✨ Features | 新功能
+
+* 支持banner 底部 ([1e0b38c](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/1e0b38ccba18240f4b18f78a84e0810ae8b67460))
+
 ### [0.1.63](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.3.76...v0.1.63) (2025-03-10)
 
 ### [0.1.62](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.3.57...v0.1.62) (2025-02-24)

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

@@ -146,6 +146,19 @@
     justify-content: center;
     background: $-picker-loading-bg;
   }
+  @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;
+  }
   // selectPiceker多出的样式
   @include edeep(header) {
     height: 72px;

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

@@ -10,6 +10,14 @@ import {
 import type { FormItemRule } from '../wd-form/types'
 
 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,
@@ -75,6 +83,10 @@ export const selectPickerProps = {
   safeAreaInsetBottom: makeBooleanProp(true),
   /** 可搜索（目前只支持本地搜索） */
   filterable: makeBooleanProp(false),
+  /** 远程搜索配置 */
+  remoteConfig: {
+    type: Object as PropType<SelectPickerRemote>,
+  },
   /** 搜索框占位符 */
   filterPlaceholder: String,
   /** 是否超出隐藏 */
@@ -93,6 +105,8 @@ export const selectPickerProps = {
   customValueClass: makeStringProp(''),
   /** 是否显示确认按钮（radio类型生效），默认值为：true */
   showConfirm: makeBooleanProp(true),
+  /** 默认展示文案 */
+  defaultLabel: String,
 }
 export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
 

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

@@ -58,13 +58,16 @@
         :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">
@@ -144,7 +147,7 @@
               :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
                       :clsss="`${text.type === 'active' ? 'wd-select-picker__text-active' : ''}`"
@@ -163,6 +166,10 @@
         <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">
@@ -185,7 +192,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed } from 'vue'
+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'
@@ -206,34 +213,53 @@ const filterVal = ref<string>('')
 const filterColumns = ref<Array<Record<string, any>>>([])
 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>('')
 
-const showValue = computed(() => {
+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
 })
-
+watch(
+  () => props.defaultLabel,
+  (defaultLabel) => {
+    if (defaultLabel) {
+      currentColumns.value = {
+        [props.valueKey]: props.modelValue,
+        [props.labelKey]: defaultLabel,
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+)
 watch(
   () => props.modelValue,
   (newValue) => {
@@ -316,10 +342,34 @@ const isRequired = computed(() => {
   }
   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
@@ -377,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
   })
 
@@ -474,6 +524,9 @@ function getFilterText(label: string, filterVal: string) {
 }
 
 function handleFilterChange({ value }: { value: string }) {
+  if (props.remoteConfig) {
+    return
+  }
   if (value === '') {
     filterColumns.value = []
     filterVal.value = value
@@ -486,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

package/package.json

@@ -1,7 +1,7 @@
 {
   "id": "@tplc/wot",
   "name": "@tplc/wot",
-  "version": "0.1.63",
+  "version": "0.1.65",
   "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' | '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
@@ -122,6 +135,10 @@ export declare const selectPickerProps: {
     type: BooleanConstructor
     default: boolean
   }
+  /** 远程搜索配置 */
+  remoteConfig: {
+    type: PropType<SelectPickerRemote>
+  }
   /** 搜索框占位符 */
   filterPlaceholder: StringConstructor
   /** 是否超出隐藏 */
@@ -161,6 +178,8 @@ export declare const selectPickerProps: {
     type: BooleanConstructor
     default: boolean
   }
+  /** 默认展示文案 */
+  defaultLabel: StringConstructor
   customStyle: {
     type: PropType<string>
     default: string

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

@@ -92,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
@@ -122,6 +125,7 @@ declare const _default: __VLS_WithTemplateSlots<
         type: BooleanConstructor
         default: boolean
       }
+      defaultLabel: StringConstructor
       customStyle: {
         type: import('vue').PropType<string>
         default: string
@@ -242,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
@@ -272,6 +279,7 @@ declare const _default: __VLS_WithTemplateSlots<
           type: BooleanConstructor
           default: boolean
         }
+        defaultLabel: StringConstructor
         customStyle: {
           type: import('vue').PropType<string>
           default: string