@tplc/wot 1.0.7 → 1.0.9

package/components/wd-segmented/wd-segmented.vue

@@ -9,20 +9,13 @@
       :key="index"
     >
       <view class="wd-segmented__item-label">
-        <slot
-          name="label"
-          v-if="$slots.label"
-          :option="isObj(option) ? option : { value: option }"
-        ></slot>
+        <slot name="label" v-if="$slots.label" :option="isObj(option) ? option : { value: option }"></slot>
         <template v-else>
           {{ isObj(option) ? option.value : option }}
         </template>
       </view>
     </view>
-    <view
-      :class="`wd-segmented__item--active ${activeDisabled ? 'is-disabled' : ''}`"
-      :style="state.activeStyle"
-    ></view>
+    <view :class="`wd-segmented__item--active ${activeDisabled ? 'is-disabled' : ''}`" :style="state.activeStyle"></view>
   </view>
 </template>
 
@@ -32,16 +25,16 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script setup lang="ts">
 import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue'
-import { requestAnimationFrame, getRect, isObj, objToStyle, addUnit } from '../common/util'
+import { getRect, isObj, objToStyle, addUnit, pause, isEqual } from '../common/util'
 import type { CSSProperties } from 'vue'
-import { segmentedProps, type SegmentedOption } from './types'
+import { segmentedProps, type SegmentedExpose, type SegmentedOption } from './types'
 const $item = '.wd-segmented__item'
 
 const props = defineProps(segmentedProps)
@@ -49,14 +42,11 @@ const emit = defineEmits(['update:value', 'change', 'click'])
 
 const state = reactive({
   activeIndex: 0, // 选中项
-  activeStyle: '', // 选中样式
+  activeStyle: '' // 选中样式
 })
 
 const activeDisabled = computed(() => {
-  return (
-    props.disabled ||
-    (props.options[0] && isObj(props.options[0]) ? props.options[0].disabled : false)
-  )
+  return props.disabled || (props.options[0] && isObj(props.options[0]) ? props.options[0].disabled : false)
 })
 
 watch(
@@ -69,17 +59,16 @@ watch(
     }
   },
   {
-    immediate: false,
-  },
+    immediate: false
+  }
 )
 
 const { proxy } = getCurrentInstance() as any
 
-onMounted(() => {
+onMounted(async () => {
   updateCurrentIndex()
-  requestAnimationFrame(() => {
-    updateActiveStyle(false)
-  })
+  await pause()
+  updateActiveStyle(false)
 })
 
 /**
@@ -92,11 +81,9 @@ function updateActiveStyle(animation: boolean = true) {
     const style: CSSProperties = {
       position: 'absolute',
       width: addUnit(rect.width!),
-      'z-index': 0,
+      'z-index': 0
     }
-    const left = rects
-      .slice(0, state.activeIndex)
-      .reduce((prev, curr) => prev + Number(curr.width), 0)
+    const left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0)
     if (left) {
       style.transform = `translateX(${left}px)`
     }
@@ -107,20 +94,29 @@ function updateActiveStyle(animation: boolean = true) {
   })
 }
 
+/**
+ * 更新值
+ */
+function updateValue(newValue: string | number, option: string | number | SegmentedOption) {
+  if (!isEqual(newValue, props.value)) {
+    emit('update:value', newValue)
+    emit('change', isObj(option) ? option : { value: newValue })
+  }
+}
+
 /**
  * 更新当前下标
  */
 function updateCurrentIndex() {
   const index = props.options.findIndex((option: string | number | SegmentedOption) => {
     const value = isObj(option) ? option.value : option
-    return value === props.value
+    return isEqual(value, props.value)
   })
   if (index >= 0) {
     state.activeIndex = index
   } else {
     const value = isObj(props.options[0]) ? props.options[0].value : props.options[0]
-    emit('update:value', value)
-    emit('change', isObj(props.options[0]) ? props.options[0] : { value })
+    updateValue(value, props.options[0])
   }
 }
 
@@ -130,14 +126,18 @@ function handleClick(option: string | number | SegmentedOption, index: number) {
     return
   }
   const value = isObj(option) ? option.value : option
+
   state.activeIndex = index
   updateActiveStyle()
-  emit('update:value', value)
-  emit('change', isObj(option) ? option : { value })
+  updateValue(value, option)
   emit('click', isObj(option) ? option : { value })
 }
+
+defineExpose<SegmentedExpose>({
+  updateActiveStyle
+})
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

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

@@ -3,173 +3,84 @@
 
 .wot-theme-dark {
   @include b(select-picker) {
-    @include when(border) {
-      .wd-select-picker__cell {
-        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
-      }
-    }
-
-    @include e(cell) {
+    :deep(.wd-select-picker__arrow),
+    :deep(.wd-select-picker__close),
+    :deep(.wd-select-picker__clear) {
       color: $-dark-color;
-      background-color: $-dark-background2;
-      @include when(disabled) {
-        .wd-select-picker__value {
-          color: $-dark-color3;
-        }
-      }
     }
 
-    @include e(label) {
-      color: $-dark-color;
-    }
-    @include e(value) {
-      color: $-dark-color;
-      @include m(placeholder) {
+    :deep(.wd-select-picker__cell--placeholder) {
+      .wd-cell__value {
         color: $-dark-color-gray;
       }
     }
-
-    :deep(.wd-select-picker__arrow),
-    :deep(.wd-select-picker__close) {
-      color: $-dark-color;
-    }
   }
 }
 
 @include b(select-picker) {
-  @include when(border) {
-    .wd-select-picker__cell {
-      @include halfPixelBorder('top', $-cell-padding);
-    }
-  }
-  @include e(cell) {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    padding: $-cell-wrapper-padding $-cell-padding;
-    overflow: hidden;
-    font-size: $-cell-title-fs;
-    line-height: $-cell-line-height;
-    color: $-cell-title-color;
-    text-decoration: none;
-    background-color: $-color-white;
-  }
-  @include e(cell) {
+   @include edeep(cell) {
     @include when(disabled) {
-      .wd-select-picker__value {
+      .wd-cell__value {
         color: $-input-disabled-color;
-      }
-    }
-    @include when(align-right) {
-      .wd-select-picker__value {
-        text-align: right;
+        cursor: not-allowed;
       }
     }
     @include when(error) {
-      .wd-select-picker__value {
+      .wd-cell__value {
         color: $-input-error-color;
       }
-      :deep(.wd-select-picker__arrow) {
+      .wd-select-picker__arrow {
         color: $-input-error-color;
       }
     }
-    @include when(large) {
-      font-size: $-cell-title-fs-large;
 
-      :deep(.wd-select-picker__arrow) {
-        font-size: $-cell-icon-size-large;
+    @include m(placeholder) {
+      .wd-cell__value {
+        color: $-input-placeholder-color;
       }
     }
-  }
-  @include e(error-message) {
-    font-size: $-form-item-error-message-font-size;
-    line-height: $-form-item-error-message-line-height;
-    color: $-form-item-error-message-color;
-    text-align: left;
-    vertical-align: middle;
-  }
-  @include e(label) {
-    position: relative;
-    box-sizing: border-box;
-    width: $-input-cell-label-width;
-    margin-right: $-cell-padding;
-    color: $-cell-title-color;
 
-    @include when(required) {
-      .wd-select-picker__label-inner {
-        position: relative;
-        &::after {
-          position: absolute;
-          top: 2px;
-          right: -24rpx;
-          font-size: $-cell-required-size;
-          line-height: 1.1;
-          color: $-cell-required-color;
-          content: '*';
-        }
+    @include when(large) {
+      .wd-select-picker__arrow,
+      .wd-select-picker__clear {
+        font-size: $-cell-icon-size-large;
       }
     }
   }
-  @include e(value-wraper) {
-    display: flex;
-  }
-  @include e(value) {
-    flex: 1;
-    margin-right: 10px;
-    color: $-cell-value-color;
-
-    @include when(ellipsis) {
-      @include lineEllipsis;
-    }
-    @include m(placeholder) {
-      color: $-input-placeholder-color;
-    }
-  }
-  @include e(body) {
-    flex: 1;
-  }
-  @include edeep(arrow) {
+  
+  @include edeep(arrow, clear) {
     display: block;
     font-size: $-cell-icon-size;
-    line-height: $-cell-line-height;
     color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
   }
 
+  @include edeep(clear) {
+    color: $-cell-clear-color;
+  }
+ 
   @include e(loading) {
     position: absolute;
+    display: flex;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    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;
+    z-index: 3;
     background: $-picker-loading-bg;
-    padding: 24rpx 0;
   }
-  // selectPiceker多出的样式
+  
   @include edeep(header) {
     height: 72px;
     line-height: 72px;
   }
   @include e(wrapper) {
+    padding: 0 10px;
     position: relative;
-    box-sizing: border-box;
     max-height: 356px;
-    padding: 0 10px;
+    box-sizing: border-box;
     overflow: auto;
 
     @include when(filterable) {
@@ -184,6 +95,31 @@
   @include e(text-active) {
     color: $-color-theme;
   }
+
+  @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;
@@ -199,8 +135,5 @@
       border: 1px solid $-color-theme;
     }
   }
-
-  @include e(footer) {
-    padding: 24px 15px;
-  }
 }
+

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

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