@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

package/components/wd-password-input/types.ts

@@ -0,0 +1,42 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-05-08 22:54:27
+ * @LastEditTime: 2026-04-06 23:08:37
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-password-input/types.ts
+ * 记得注释
+ */
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+export const passwordInputProps = {
+  ...baseProps,
+  /**
+   * 绑定的值
+   */
+  modelValue: makeStringProp(''),
+  /**
+   * 是否隐藏密码内容
+   */
+  mask: makeBooleanProp(true),
+  /**
+   * 输入框下方文字提示
+   */
+  info: makeStringProp(''),
+  /**
+   * 输入框下方错误提示
+   */
+  errorInfo: makeStringProp(''),
+  /**
+   * 输入框格子之间的间距，如 20px 2em，默认单位为 px
+   */
+  gutter: makeNumericProp(0),
+  /**
+   * 密码最大长度
+   */
+  length: makeNumberProp(6),
+  /**
+   * 是否已聚焦，聚焦时会显示光标
+   */
+  focused: makeBooleanProp(true)
+}

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

@@ -0,0 +1,51 @@
+<template>
+  <view :class="`wd-password-input ${customClass}`" :style="customStyle">
+    <view @touchstart="onTouchStart" class="wd-password-input__security">
+      <view
+        v-for="(_, index) in length"
+        :key="index"
+        :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-else :class="`wd-password-input__value`">
+          <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' : ''}`">
+      {{ errorInfo || info }}
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-password-input',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { addUnit } from '../../common/util'
+import { passwordInputProps } from './types'
+
+defineProps(passwordInputProps)
+
+const emit = defineEmits(['focus'])
+
+function onTouchStart(event: Event) {
+  emit('focus', event)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-picker/index.scss

@@ -0,0 +1,72 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 选择器工具栏高度
+$picker-toolbar-height: var(--wot-picker-toolbar-height, $n-44) !default;
+// 选择器背景色
+$picker-bg: var(--wot-picker-bg, $filled-oppo) !default;
+// 确认按钮文字颜色
+$picker-action-color-confirm: var(--wot-picker-action-color-confirm, $primary-6) !default;
+// 取消按钮文字颜色
+$picker-action-color-cancel: var(--wot-picker-action-color-cancel, $text-secondary) !default;
+// 操作按钮禁用颜色
+$picker-action-disabled-color: var(--wot-picker-action-disabled-color, $text-disabled) !default;
+// 操作按钮字号
+$picker-action-font-size: var(--wot-picker-action-font-size, $typography-body-size-extra-large) !default;
+// 标题文字颜色
+$picker-title-color: var(--wot-picker-title-color, $text-main) !default;
+// 标题文字字号
+$picker-title-font-size: var(--wot-picker-title-font-size, $typography-title-size-main) !default;
+// 标题文字字重
+$picker-title-font-weight: var(--wot-picker-title-font-weight, $font-weight-medium) !default;
+// 标题文字行高
+$picker-title-line-height: var(--wot-picker-title-line-height, $typography-title-line--height-size-main) !default;
+// 弹窗圆角
+$picker-radius: var(--wot-picker-radius, $radius-large) !default;
+
+@include b(picker) {
+  @include edeep(popup) {
+    border-radius: $picker-radius $picker-radius 0px 0px;
+  }
+
+  @include e(wraper) {
+    padding-bottom: var(--window-bottom);
+    background: $picker-bg;
+  }
+
+  @include e(toolbar) {
+    position: relative;
+    display: flex;
+    height: $picker-toolbar-height;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  @include e(action) {
+    display: block;
+    border: none;
+    outline: none;
+    font-size: $picker-action-font-size;
+    background: transparent;
+    padding: 0 15px;
+
+    @include m(cancel) {
+      color: $picker-action-color-cancel;
+    }
+
+    @include m(confirm) {
+      color: $picker-action-color-confirm;
+    }
+  }
+
+  @include e(title) {
+    display: block;
+    flex: 1;
+    text-align: center;
+    color: $picker-title-color;
+    font-size: $picker-title-font-size;
+    font-weight: $picker-title-font-weight;
+    line-height: $picker-title-line-height;
+  }
+}

package/components/wd-picker/types.ts

@@ -0,0 +1,141 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp, type Numeric } from '../../common/props'
+import type { PickerOption, PickerViewInstance } from '../wd-picker-view/types'
+
+export const pickerProps = {
+  ...baseProps,
+  /**
+   * pickerView 外部自定义样式
+   * 类型: string
+   * 默认值: ''
+   */
+  customViewClass: makeStringProp(''),
+  /* popup */
+  /**
+   * 弹出层标题
+   * 类型: string
+   * 默认值: -
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   * 类型: string
+   * 默认值: -
+   */
+  cancelButtonText: String,
+  /**
+   * 确认按钮文案
+   * 类型: string
+   * 默认值: -
+   */
+  confirmButtonText: String,
+  /**
+   * 确定前校验函数，接收 (value) 参数，返回 boolean 或 Promise<boolean>
+   * 类型: PickerBeforeConfirm
+   * 默认值: -
+   */
+  beforeConfirm: Function as PropType<PickerBeforeConfirm>,
+  /**
+   * 点击蒙层关闭
+   * 类型: boolean
+   * 默认值: true
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 底部安全区域内
+   * 类型: boolean
+   * 默认值: true
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 选项高度
+   * 类型: number
+   * 默认值: 44
+   */
+  itemHeight: makeNumberProp(44),
+  /**
+   * 可见选项数量
+   * 类型: number
+   * 默认值: 6
+   */
+  visibleItemCount: makeNumberProp(6),
+  /**
+   * 选项值对应的键名
+   * 类型: string
+   * 默认值: 'value'
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项文本对应的键名
+   * 类型: string
+   * 默认值: 'label'
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 是否开启级联模式
+   * 类型: boolean
+   * 默认值: false
+   */
+  cascade: makeBooleanProp(false),
+  /**
+   * 选项对象中，children 对应的 key
+   * 类型: string
+   * 默认值: 'children'
+   */
+  childrenKey: makeStringProp('children'),
+  /**
+   * 选中项
+   * 类型: (string | number)[]
+   * 默认值: []
+   */
+  modelValue: makeArrayProp<Numeric>(),
+  /**
+   * 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器
+   * 类型: Array<string | number | PickerOption | Array<string | number | PickerOption>>
+   * 默认值: []
+   */
+  columns: makeArrayProp<PickerOption | Array<PickerOption>>(),
+  /**
+   * 自定义层级
+   * 类型: number
+   * 默认值: 15
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   * 类型: boolean
+   * 默认值: false
+   */
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   * 类型: boolean
+   * 默认值: false
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 控制弹窗显示
+   * 类型: boolean
+   * 默认值: false
+   */
+  visible: makeBooleanProp(false)
+}
+
+export type PickerProps = ExtractPropTypes<typeof pickerProps>
+
+export type PickerDisplayFormat = (item: PickerOption | PickerOption[], vl: { valueKey: string; labelKey: string }) => string
+
+export type PickerBeforeConfirm = (value: Numeric[]) => boolean | Promise<boolean>
+
+export type PickerExpose = {
+  /**
+   * 打开picker弹框
+   */
+  open: () => void
+  /**
+   * 关闭picker弹框
+   */
+  close: () => void
+}
+
+export type PickerInstance = ComponentPublicInstance<PickerExpose, PickerProps>

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

@@ -0,0 +1,220 @@
+<template>
+  <view :class="`wd-picker ${customClass}`" :style="customStyle">
+    <wd-popup
+      v-model="popupShow"
+      position="bottom"
+      :hide-when-close="false"
+      :close-on-click-modal="closeOnClickModal"
+      :z-index="zIndex"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :root-portal="rootPortal"
+      @close="onCancel"
+      custom-class="wd-picker__popup"
+    >
+      <view class="wd-picker__wraper">
+        <view class="wd-picker__toolbar" @touchmove="noop">
+          <view class="wd-picker__action wd-picker__action--cancel" @click="onCancel">
+            {{ cancelButtonText || translate('cancel') }}
+          </view>
+          <view v-if="title" class="wd-picker__title">{{ title }}</view>
+          <view class="wd-picker__action wd-picker__action--confirm" @click="onConfirm">
+            {{ confirmButtonText || translate('done') }}
+          </view>
+        </view>
+        <wd-picker-view
+          ref="pickerViewRef"
+          :custom-class="customViewClass"
+          v-model="pickerValue"
+          :columns="displayColumns"
+          :item-height="itemHeight"
+          :visible-item-count="visibleItemCount"
+          :value-key="valueKey"
+          :label-key="labelKey"
+          :cascade="cascade"
+          :children-key="childrenKey"
+          :immediate-change="immediateChange"
+          @change="pickerViewChange"
+          @pickstart="onPickStart"
+          @pickend="onPickEnd"
+        />
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-picker',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdPopup from '../wd-popup/wd-popup.vue'
+import wdPickerView from '../wd-picker-view/wd-picker-view.vue'
+import { getCurrentInstance, onBeforeMount, ref, watch, onMounted } from 'vue'
+import { deepClone } from '../../common/util'
+import { callInterceptor } from '../../common/interceptor'
+import { type PickerOption, type PickerViewExpose } from '../wd-picker-view/types'
+import { useTranslate } from '../../composables/useTranslate'
+import { pickerProps, type PickerExpose } from './types'
+import { type Numeric } from '../../common/props'
+const { translate } = useTranslate('picker')
+
+const props = defineProps(pickerProps)
+const emit = defineEmits(['confirm', 'open', 'cancel', 'update:modelValue', 'update:visible'])
+
+// 弹出层是否显示
+const popupShow = ref<boolean>(false)
+
+const pickerValue = ref<Numeric[]>([])
+const pickerSelectedOptions = ref<PickerOption[]>([]) // 缓存选中的选项对象
+const pickerViewRef = ref<PickerViewExpose>()
+const displayColumns = ref<Array<PickerOption | Array<PickerOption>>>([]) // 传入 pickerView 的columns
+const isPicking = ref<boolean>(false) // 判断pickview是否还在滑动中
+const hasConfirmed = ref<boolean>(false) // 判断用户是否点击了确认按钮
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    pickerValue.value = newValue as Numeric[]
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columns,
+  (newValue) => {
+    displayColumns.value = deepClone(newValue)
+    if (newValue.length === 0) {
+      // 当 columns 变为空时，清空 pickerValue
+      pickerValue.value = []
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      showPopup()
+    } else {
+      popupShow.value = false
+    }
+  }
+)
+
+watch(popupShow, (val) => {
+  emit('update:visible', val)
+})
+
+const { proxy } = getCurrentInstance() as any
+
+onMounted(() => {
+  if (props.visible) {
+    showPopup()
+  }
+})
+
+onBeforeMount(() => {
+  displayColumns.value = deepClone(props.columns)
+})
+
+// 对外暴露方法，打开弹框
+function open() {
+  showPopup()
+}
+// 对外暴露方法，关闭弹框
+function close() {
+  onCancel()
+}
+/**
+ * 展示popup
+ */
+function showPopup() {
+  emit('open')
+  popupShow.value = true
+  pickerValue.value = props.modelValue
+  displayColumns.value = deepClone(props.columns)
+}
+
+/**
+ * 点击取消按钮触发。关闭popup，触发cancel事件。
+ */
+function onCancel() {
+  popupShow.value = false
+  emit('cancel')
+}
+/**
+ * 点击确定按钮触发。展示选中值，触发cancel事件。
+ */
+function onConfirm() {
+  // 如果当前还在滑动且未停止下来，则锁住先不确认，等滑完再自动确认，避免pickview值未更新
+  if (isPicking.value) {
+    hasConfirmed.value = true
+    return
+  }
+
+  const { beforeConfirm } = props
+  callInterceptor(beforeConfirm, {
+    args: [pickerValue.value],
+    done: () => {
+      handleConfirm()
+    }
+  })
+}
+function handleConfirm() {
+  const values = pickerViewRef.value?.getSelectedValues() || pickerValue.value
+  const selects = pickerViewRef.value?.getSelectedOptions() || pickerSelectedOptions.value
+
+  popupShow.value = false
+  emit('update:modelValue', values)
+
+  emit('confirm', {
+    value: values,
+    selectedItems: selects
+  })
+}
+/**
+ * picker-view change事件
+ * @param event
+ */
+function pickerViewChange({ selectedValues, selectedOptions }: any) {
+  pickerValue.value = selectedValues
+  pickerSelectedOptions.value = selectedOptions
+}
+
+function noop() {}
+function onPickStart() {
+  isPicking.value = true
+}
+function onPickEnd() {
+  isPicking.value = false
+
+  if (hasConfirmed.value) {
+    hasConfirmed.value = false
+    onConfirm()
+  }
+}
+
+defineExpose<PickerExpose>({
+  close,
+  open
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

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

@@ -0,0 +1,93 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 选择器视图背景色
+$picker-view-bg: var(--wot-picker-view-bg, $filled-oppo) !default;
+// 选择器视图内边距
+$picker-view-padding: var(--wot-picker-view-padding, $padding-zero $padding-loose) !default;
+// 遮罩渐变起始色
+$picker-view-mask-start-color: var(--wot-picker-view-mask-start-color, $opacwhite-10_85) !default;
+// 遮罩渐变结束色
+$picker-view-mask-end-color: var(--wot-picker-view-mask-end-color, $opacwhite-5_20) !default;
+// 遮罩背景渐变
+$picker-view-mask-bg: var(--wot-picker-view-mask-bg, linear-gradient(180deg, $picker-view-mask-start-color, $picker-view-mask-end-color), linear-gradient(0deg, $picker-view-mask-start-color, $picker-view-mask-end-color)) !default;
+// 禁用态透明度
+$picker-view-disabled-opacity: var(--wot-picker-view-disabled-opacity, $opacity-disabled) !default;
+// 列项高度
+$picker-view-column-item-height: var(--wot-picker-view-column-item-height, $n-44) !default;
+// 列项字号
+$picker-view-column-item-font-size: var(--wot-picker-view-column-item-font-size, $typography-body-size-extra-large) !default;
+// 列项文字颜色
+$picker-view-column-item-color: var(--wot-picker-view-column-item-color, $text-main) !default;
+// 列项内边距
+$picker-view-column-item-padding: var(--wot-picker-view-column-item-padding, 0 $padding-tight) !default;
+// 列项禁用文字颜色
+$picker-view-column-item-disabled-color: var(--wot-picker-view-column-item-disabled-color, $text-disabled) !default;
+// 列项激活字重
+$picker-view-column-item-font-weight-active: var(--wot-picker-view-column-item-font-weight-active, $font-weight-medium) !default;
+// 滚轮背景色
+$picker-view-roller-bg: var(--wot-picker-view-roller-bg, $filled-bottom) !default;
+// 滚轮圆角
+$picker-view-roller-border-radius: var(--wot-picker-view-roller-border-radius, $radius-main) !default;
+
+@include b(picker-view) {
+  position: relative;
+  padding: $picker-view-padding;
+  box-sizing: border-box;
+  background: $picker-view-bg;
+
+  @include edeep(mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: $picker-view-mask-bg;
+    background-position: top, bottom;
+    background-repeat: no-repeat;
+    pointer-events: none;
+  }
+
+  @include edeep(roller) {
+    height: $picker-view-column-item-height;
+    background: $picker-view-roller-bg;
+    border-radius: 0;
+    z-index: 0;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
+  @include edeep(main) {
+    .wd-picker-view__column:first-child .wd-picker-view__roller {
+      border-radius: $picker-view-roller-border-radius 0 0 $picker-view-roller-border-radius;
+    }
+
+    .wd-picker-view__column:last-child .wd-picker-view__roller {
+      border-radius: 0 $picker-view-roller-border-radius $picker-view-roller-border-radius 0;
+    }
+  }
+
+  @include e(column) {
+    flex: 1;
+  }
+
+  @include e(column-item) {
+    padding: $picker-view-column-item-padding;
+    color: $picker-view-column-item-color;
+    font-size: $picker-view-column-item-font-size;
+    line-height: $picker-view-column-item-height;
+    text-align: center;
+    @include lineEllipsis;
+
+    @include m(disabled) {
+      color: $picker-view-column-item-disabled-color;
+    }
+
+    @include m(active) {
+      font-weight: $picker-view-column-item-font-weight-active;
+    }
+  }
+}