@tplc/wot 1.0.7 → 1.0.9

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

@@ -7,23 +7,14 @@
         :class="`wd-password-input__item ${gutter ? '' : 'is-border'}`"
         :style="{ marginLeft: index !== 0 && gutter ? addUnit(gutter) : 0 }"
       >
-        <view
-          v-if="focused && index === modelValue.length"
-          class="wd-password-input__cursor"
-        ></view>
+        <view v-if="focused && index === modelValue.length" class="wd-password-input__cursor"></view>
         <view v-else :class="`wd-password-input__value`">
-          <view
-            :style="{ visibility: mask && modelValue[index] ? 'visible' : 'hidden' }"
-            class="wd-password-input__mask"
-          ></view>
+          <view :style="{ visibility: mask && modelValue[index] ? 'visible' : 'hidden' }" class="wd-password-input__mask"></view>
           <text v-if="!mask && modelValue[index]">{{ modelValue[index] }}</text>
         </view>
       </view>
     </view>
-    <view
-      v-if="info || errorInfo"
-      :class="`wd-password-input__info ${errorInfo ? 'is-error' : ''}`"
-    >
+    <view v-if="info || errorInfo" :class="`wd-password-input__info ${errorInfo ? 'is-error' : ''}`">
       {{ errorInfo || info }}
     </view>
   </view>
@@ -35,8 +26,8 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -54,5 +45,5 @@ function onTouchStart(event: Event) {
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-picker/index.scss

@@ -1,64 +1,27 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(picker) {
-    @include when(border) {
-      .wd-picker__cell {
-        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
+    @include e(action) {
+      @include m(cancel) {
+        color: $-dark-color;
+      }
+      @include when(loading) {
+        color: $-dark-color3;
       }
     }
 
-    @include e(title) {
-      color: $-dark-color;
-    }
-
-    @include e(label) {
-      color: $-dark-color;
-    }
-    @include e(value) {
-      color: $-dark-color;
-    }
-
-    @include e(placeholder) {
-      color: $-dark-color-gray;
-    }
-
-    :deep(.wd-picker__arrow) {
-      color: $-dark-color;
-    }
-
-    @include e(cell) {
+    :deep(.wd-picker__arrow),
+    :deep(.wd-picker__clear) {
       color: $-dark-color;
-      background-color: $-dark-background2;
-      @include when(disabled) {
-        .wd-picker__value {
-          color: $-dark-color3;
-        }
-        .wd-picker__placeholder {
-          color: $-dark-color-gray;
-        }
-      }
     }
 
-    @include when(disabled) {
-      .wd-picker__value {
-        color: $-dark-color3;
-      }
-
-      .wd-picker__placeholder {
+    :deep(.wd-picker__cell--placeholder) {
+      .wd-cell__value {
         color: $-dark-color-gray;
       }
     }
-
-    @include e(action) {
-      @include m(cancel) {
-        color: $-dark-color;
-      }
-      @include when(loading) {
-        color: $-dark-color3;
-      }
-    }
   }
 }
 
@@ -67,113 +30,43 @@
     border-radius: 16px 16px 0px 0px;
   }
 
-  @include when(border) {
-    .wd-picker__cell {
-      @include halfPixelBorder('top', $-cell-padding);
-    }
-  }
-  @include when(large) {
-    .wd-picker__cell {
-      font-size: $-cell-title-fs-large;
-    }
-    :deep(.wd-picker__arrow) {
-      font-size: $-cell-icon-size-large;
-    }
-  }
-  @include when(error) {
-    .wd-picker__value,
-    :deep(.wd-picker__arrow) {
-      color: $-input-error-color;
-    }
-  }
-  @include when(align-right) {
-    .wd-picker__value {
-      text-align: right;
-    }
-  }
-  @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 edeep(cell) {
     @include when(disabled) {
-      .wd-picker__value {
+      .wd-cell__value {
         color: $-input-disabled-color;
+        cursor: not-allowed;
       }
     }
-  }
-
-  @include when(disabled) {
-    .wd-picker__value {
-      color: $-picker-column-disabled-color;
+    @include when(error) {
+      .wd-cell__value {
+        color: $-input-error-color;
+      }
+      .wd-picker__arrow {
+        color: $-input-error-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-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-picker__arrow,
+      .wd-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) {
+      .wd-cell__value {
+        color: $-input-placeholder-color;
+      }
     }
   }
-
-  @include e(body) {
-    flex: 1;
-  }
-
-  @include e(placeholder) {
-    color: $-input-placeholder-color;
-  }
-
-  @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(wraper) {
@@ -182,23 +75,23 @@
 
   @include e(toolbar) {
     position: relative;
-    box-sizing: border-box;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: $-picker-toolbar-height;
     font-size: $-picker-toolbar-fs;
+    height: $-picker-toolbar-height;
     line-height: $-picker-action-height;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
   }
 
   @include e(action) {
     display: block;
-    padding: 24px 15px 14px 15px;
+    border: none;
+    outline: none;
     font-size: $-picker-toolbar-fs;
     color: $-picker-toolbar-finish-color;
     background: transparent;
-    border: none;
-    outline: none;
+    padding: 24px 15px 14px 15px;
 
     @include m(cancel) {
       color: $-picker-toolbar-cancel-color;
@@ -208,10 +101,10 @@
       color: $-picker-loading-button-color;
     }
   }
+  
   @include e(title) {
     display: block;
-    padding-top: 10px;
-    font-weight: $-action-sheet-weight;
+    float: 1;
     color: $-picker-toolbar-title-color;
   }
 }

package/components/wd-picker/types.ts

@@ -1,11 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import {
-  baseProps,
-  makeArrayProp,
-  makeBooleanProp,
-  makeNumberProp,
-  makeStringProp,
-} from '../common/props'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 import type { ColumnItem, PickerViewColumnChange } from '../wd-picker-view/types'
 import type { FormItemRule } from '../wd-form/types'
 
@@ -69,15 +63,17 @@ export const pickerProps = {
    */
   size: String,
   /**
-   * 标签宽度
+   * 设置左侧标题宽度
    */
-  labelWidth: String,
+  labelWidth: makeStringProp('33%'),
   /**
    * 使用默认插槽
+   * @deprecated 可以直接使用默认插槽，无需配置此选项
    */
   useDefaultSlot: makeBooleanProp(false),
   /**
    * 使用标签插槽
+   * @deprecated 可以直接使用标签插槽，无需配置此选项
    */
   useLabelSlot: makeBooleanProp(false),
   /**
@@ -121,16 +117,14 @@ export const pickerProps = {
    */
   modelValue: {
     type: [String, Number, Array] as PropType<string | number | Array<string> | Array<number>>,
-    default: '',
+    default: ''
   },
   /**
    * 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器
    */
   columns: {
-    type: Array as PropType<
-      Array<string | number | ColumnItem | Array<string | number | ColumnItem>>
-    >,
-    default: () => [],
+    type: Array as PropType<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>,
+    default: () => []
   },
   /**
    * 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 setColumnData 方法修改其他列的数据源。
@@ -156,19 +150,28 @@ export const pickerProps = {
    * 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
   immediateChange: makeBooleanProp(false),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false),
+  /**
+   * 必填标记位置，可选值：before、after
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before')
 }
 
 export type PickerProps = ExtractPropTypes<typeof pickerProps>
 
-export type PickerDisplayFormat = (
-  item: ColumnItem | ColumnItem[],
-  vl: { valueKey: string; labelKey: string },
-) => string
+export type PickerDisplayFormat = (item: ColumnItem | ColumnItem[], vl: { valueKey: string; labelKey: string }) => string
 
 export type PickerBeforeConfirm = (
   value: string | number | boolean | string[] | number[] | boolean[],
   resolve: (isPass: boolean) => void,
-  picker: any,
+  picker: any
 ) => void
 
 export type PickerExpose = {

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

@@ -1,37 +1,42 @@
 <template>
   <view
-    :class="`wd-picker ${disabled ? 'is-disabled' : ''} ${size ? 'is-' + size : ''}  ${cell.border.value ? 'is-border' : ''} ${
-      alignRight ? 'is-align-right' : ''
-    } ${error ? 'is-error' : ''} ${customClass}`"
+    :class="`wd-picker ${disabled ? 'is-disabled' : ''} ${size ? 'is-' + size : ''} ${alignRight ? 'is-align-right' : ''} ${
+      error ? 'is-error' : ''
+    } ${customClass}`"
     :style="customStyle"
   >
-    <view class="wd-picker__field" @click="showPopup">
-      <slot v-if="useDefaultSlot"></slot>
-      <view v-else class="wd-picker__cell">
-        <view
-          v-if="label || useLabelSlot"
-          :class="`wd-picker__label ${customLabelClass}  ${isRequired ? 'is-required' : ''}`"
-          :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
-        >
-          <text v-if="label" class="wd-picker__label-inner">{{ label }}</text>
-          <slot v-else name="label"></slot>
-        </view>
-        <view class="wd-picker__body">
-          <view class="wd-picker__value-wraper">
-            <view
-              :class="`wd-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${showValue ? '' : 'wd-picker__placeholder'}`"
-            >
-              {{ showValue ? showValue : placeholder || translate('placeholder') }}
-            </view>
-            <wd-icon
-              v-if="!disabled && !readonly"
-              custom-class="wd-picker__arrow"
-              name="arrow-right"
-            />
-          </view>
-          <view v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view>
+    <wd-cell
+      v-if="!$slots.default"
+      :title="label"
+      :value="showValue ? showValue : placeholder || translate('placeholder')"
+      :required="required"
+      :size="size"
+      :title-width="labelWidth"
+      :prop="prop"
+      :rules="rules"
+      :clickable="!disabled && !readonly"
+      :value-align="alignRight ? 'right' : 'left'"
+      :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="showPopup"
+    >
+      <template v-if="$slots.label" #title>
+        <slot name="label"></slot>
+      </template>
+      <template #right-icon>
+        <wd-icon v-if="showArrow" custom-class="wd-picker__arrow" name="arrow-right" />
+        <view v-else-if="showClear" @click.stop="handleClear">
+          <wd-icon custom-class="wd-picker__clear" name="error-fill" />
         </view>
-      </view>
+      </template>
+    </wd-cell>
+    <view v-else @click="showPopup">
+      <slot></slot>
     </view>
     <wd-popup
       v-model="popupShow"
@@ -40,6 +45,7 @@
       :close-on-click-modal="closeOnClickModal"
       :z-index="zIndex"
       :safe-area-inset-bottom="safeAreaInsetBottom"
+      :root-portal="rootPortal"
       @close="onCancel"
       custom-class="wd-picker__popup"
     >
@@ -80,22 +86,18 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdPopup from '../wd-popup/wd-popup.vue'
+import wdPickerView from '../wd-picker-view/wd-picker-view.vue'
+import wdCell from '../wd-cell/wd-cell.vue'
 import { getCurrentInstance, onBeforeMount, ref, watch, computed, onMounted, nextTick } from 'vue'
-import {
-  deepClone,
-  defaultDisplayFormat,
-  getType,
-  isArray,
-  isDef,
-  isFunction,
-} from '../common/util'
-import { useCell } from '../composables/useCell'
+import { deepClone, defaultDisplayFormat, getType, isArray, isDef, isFunction } from '../common/util'
 import { type ColumnItem, formatArray, type PickerViewInstance } from '../wd-picker-view/types'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
 import { useParent } from '../composables/useParent'
@@ -104,10 +106,9 @@ import { pickerProps, type PickerExpose } from './types'
 const { translate } = useTranslate('picker')
 
 const props = defineProps(pickerProps)
-const emit = defineEmits(['confirm', 'open', 'cancel', 'update:modelValue'])
+const emit = defineEmits(['confirm', 'open', 'cancel', 'clear', 'update:modelValue'])
 
 const pickerViewWd = ref<PickerViewInstance | null>(null)
-const cell = useCell()
 
 const innerLoading = ref<boolean>(false) // 内部控制是否loading
 
@@ -116,12 +117,8 @@ const popupShow = ref<boolean>(false)
 // 选定后展示的选中项
 const showValue = ref<string>('')
 const pickerValue = ref<string | number | boolean | string[] | number[] | boolean[]>('')
-const displayColumns = ref<
-  Array<string | number | ColumnItem | Array<string | number | ColumnItem>>
->([]) // 传入 pickerView 的columns
-const resetColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>(
-  [],
-) // 保存之前的 columns，当取消时，将数据源回滚，避免多级联动数据源不正确的情况
+const displayColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>([]) // 传入 pickerView 的columns
+const resetColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>([]) // 保存之前的 columns，当取消时，将数据源回滚，避免多级联动数据源不正确的情况
 const isPicking = ref<boolean>(false) // 判断pickview是否还在滑动中
 const hasConfirmed = ref<boolean>(false) // 判断用户是否点击了确认按钮
 
@@ -141,8 +138,8 @@ watch(
   },
   {
     immediate: true,
-    deep: true,
-  },
+    deep: true
+  }
 )
 
 watch(
@@ -154,8 +151,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -163,13 +160,19 @@ watch(
   (newValue) => {
     displayColumns.value = deepClone(newValue)
     resetColumns.value = deepClone(newValue)
-    // 获取初始选中项,并展示初始选中文案
-    handleShowValueUpdate(props.modelValue)
+    if (newValue.length === 0) {
+      // 当 columns 变为空时，清空 pickerValue 和 showValue
+      pickerValue.value = isArray(props.modelValue) ? [] : ''
+      showValue.value = ''
+    } else {
+      // 非空时正常更新显示值
+      handleShowValueUpdate(props.modelValue)
+    }
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -181,37 +184,27 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
-const { parent: form } = useParent(FORM_KEY)
+// 是否展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && showValue.value.length > 0
+})
 
-// 表单校验错误信息
-const errorMessage = computed(() => {
-  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
-    return form.errorMessages[props.prop]
-  } else {
-    return ''
-  }
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly && !showClear.value
 })
 
-// 是否展示必填
-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 cellClass = computed(() => {
+  const classes = ['wd-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-picker__cell--placeholder')
+  return classes.join(' ')
 })
 
 const { proxy } = getCurrentInstance() as any
@@ -270,7 +263,7 @@ function getSelects(value: string | number | Array<string | number | Array<any>>
   if (value.length === 0) {
     value = formatColumns.map(() => 0)
   }
-  const selected: number[] = []
+  let selected: number[] = []
   value.forEach((target, col) => {
     let row = formatColumns[col].findIndex((row) => {
       return row[props.valueKey].toString() === target.toString()
@@ -313,6 +306,10 @@ function showPopup() {
 function onCancel() {
   popupShow.value = false
   emit('cancel')
+  let timmer = setTimeout(() => {
+    clearTimeout(timmer)
+    isDef(pickerViewWd.value) && pickerViewWd.value.resetColumns(resetColumns.value)
+  }, 300)
 }
 /**
  * 点击确定按钮触发。展示选中值，触发cancel事件。
@@ -333,7 +330,7 @@ function onConfirm() {
       (isPass: boolean) => {
         isPass && handleConfirm()
       },
-      proxy.$.exposed,
+      proxy.$.exposed
     )
   } else {
     handleConfirm()
@@ -356,7 +353,7 @@ function handleConfirm() {
   setShowValue(selects)
   emit('confirm', {
     value: values,
-    selectedItems: selects,
+    selectedItems: selects
   })
 }
 /**
@@ -398,10 +395,16 @@ function setLoading(loading: boolean) {
   innerLoading.value = loading
 }
 
+function handleClear() {
+  const clearValue = isArray(pickerValue.value) ? [] : ''
+  emit('update:modelValue', clearValue)
+  emit('clear')
+}
+
 defineExpose<PickerExpose>({
   close,
   open,
-  setLoading,
+  setLoading
 })
 </script>
 <style lang="scss" scoped>