@tplc/wot 0.0.1

package/components/wd-picker/types.ts

@@ -0,0 +1,186 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+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'
+
+export const pickerProps = {
+  ...baseProps,
+  /**
+   * label 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * pickerView 外部自定义样式
+   */
+  customViewClass: makeStringProp(''),
+  /**
+   * 选择器左侧文案
+   */
+  label: String,
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载中颜色
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /* popup */
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   */
+  cancelButtonText: String,
+  /**
+   * 确认按钮文案
+   */
+  confirmButtonText: String,
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 尺寸
+   */
+  size: String,
+  /**
+   * 标签宽度
+   */
+  labelWidth: String,
+  /**
+   * 使用默认插槽
+   */
+  useDefaultSlot: makeBooleanProp(false),
+  /**
+   * 使用标签插槽
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 错误状态
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 右对齐
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数
+   */
+  beforeConfirm: Function as PropType<PickerBeforeConfirm>,
+  /**
+   * 点击蒙层关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 底部安全区域内
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 文本溢出显示省略号
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 选项总高度
+   */
+  columnsHeight: makeNumberProp(217),
+  /**
+   * 选项值对应的键名
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项文本对应的键名
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选中项，如果为多列选择器，则其类型应为数组
+   */
+  modelValue: {
+    type: [String, Number, Array] as PropType<string | number | Array<string> | Array<number>>,
+    default: '',
+  },
+  /**
+   * 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器
+   */
+  columns: {
+    type: Array as PropType<
+      Array<string | number | ColumnItem | Array<string | number | ColumnItem>>
+    >,
+    default: () => [],
+  },
+  /**
+   * 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 setColumnData 方法修改其他列的数据源。
+   */
+  columnChange: Function as PropType<PickerViewColumnChange>,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<PickerDisplayFormat>,
+  /**
+   * 自定义层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+}
+
+export type PickerProps = ExtractPropTypes<typeof pickerProps>
+
+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,
+) => void
+
+export type PickerExpose = {
+  // 打开picker弹框
+  open: () => void
+  // 关闭picker弹框
+  close: () => void
+  /**
+   * 设置加载状态
+   * @param loading 加载状态
+   */
+  setLoading: (loading: boolean) => void
+}
+
+export type PickerInstance = ComponentPublicInstance<PickerExpose, PickerProps>

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

@@ -0,0 +1,409 @@
+<template>
+  <view
+    :class="`wd-picker ${disabled ? 'is-disabled' : ''} ${size ? 'is-' + size : ''}  ${cell.border.value ? 'is-border' : ''} ${
+      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 + ';' : ''"
+        >
+          <template v-if="label">{{ label }}</template>
+          <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>
+        </view>
+      </view>
+    </view>
+    <wd-popup
+      v-model="popupShow"
+      position="bottom"
+      :hide-when-close="false"
+      :close-on-click-modal="closeOnClickModal"
+      :z-index="zIndex"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      @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 ${isLoading ? 'is-loading' : ''}`" @click="onConfirm">
+            {{ confirmButtonText || translate('done') }}
+          </view>
+        </view>
+        <wd-picker-view
+          ref="pickerViewWd"
+          :custom-class="customViewClass"
+          v-model="pickerValue"
+          :columns="displayColumns"
+          :loading="isLoading"
+          :loading-color="loadingColor"
+          :columns-height="columnsHeight"
+          :value-key="valueKey"
+          :label-key="labelKey"
+          :immediate-change="immediateChange"
+          @change="pickerViewChange"
+          @pickstart="onPickStart"
+          @pickend="onPickEnd"
+          :column-change="columnChange"
+        />
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-picker',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+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 { type ColumnItem, formatArray, type PickerViewInstance } from '../wd-picker-view/types'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { pickerProps, type PickerExpose } from './types'
+const { translate } = useTranslate('picker')
+
+const props = defineProps(pickerProps)
+const emit = defineEmits(['confirm', 'open', 'cancel', 'update:modelValue'])
+
+const pickerViewWd = ref<PickerViewInstance | null>(null)
+const cell = useCell()
+
+const innerLoading = ref<boolean>(false) // 内部控制是否loading
+
+// 弹出层是否显示
+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 isPicking = ref<boolean>(false) // 判断pickview是否还在滑动中
+const hasConfirmed = ref<boolean>(false) // 判断用户是否点击了确认按钮
+
+const isLoading = computed(() => {
+  return props.loading || innerLoading.value
+})
+
+watch(
+  () => props.displayFormat,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of displayFormat must be Function')
+    }
+    if (pickerViewWd.value && pickerViewWd.value.getSelectedIndex().length !== 0) {
+      handleShowValueUpdate(props.modelValue)
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    pickerValue.value = newValue
+    // 获取初始选中项,并展示初始选中文案
+    handleShowValueUpdate(newValue)
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+watch(
+  () => props.columns,
+  (newValue) => {
+    displayColumns.value = deepClone(newValue)
+    resetColumns.value = deepClone(newValue)
+    // 获取初始选中项,并展示初始选中文案
+    handleShowValueUpdate(props.modelValue)
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+watch(
+  () => props.columnChange,
+  (newValue) => {
+    if (newValue && !isFunction(newValue)) {
+      console.error('The type of columnChange must be Function')
+    }
+  },
+  {
+    deep: 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 { proxy } = getCurrentInstance() as any
+
+onMounted(() => {
+  handleShowValueUpdate(props.modelValue)
+})
+
+onBeforeMount(() => {
+  displayColumns.value = deepClone(props.columns)
+  resetColumns.value = deepClone(props.columns)
+})
+
+/**
+ * 值变更时更新显示内容
+ * @param value
+ */
+function handleShowValueUpdate(value: string | number | Array<string | number>) {
+  // 获取初始选中项,并展示初始选中文案
+  if ((isArray(value) && value.length > 0) || (isDef(value) && !isArray(value) && value !== '')) {
+    if (pickerViewWd.value) {
+      nextTick(() => {
+        setShowValue(pickerViewWd.value!.getSelects())
+      })
+    } else {
+      setShowValue(getSelects(value)!)
+    }
+  } else {
+    showValue.value = ''
+  }
+}
+
+/**
+ * @description 根据传入的value，picker组件获取当前cell展示值。
+ * @param {String|Number|Array<String|Number|Array<any>>}value
+ */
+function getSelects(value: string | number | Array<string | number | Array<any>>) {
+  const formatColumns = formatArray(props.columns, props.valueKey, props.labelKey)
+  if (props.columns.length === 0) return
+
+  // 使其默认选中首项
+  if (value === '' || !isDef(value) || (isArray(value) && value.length === 0)) {
+    return
+  }
+  const valueType = getType(value)
+  const type = ['string', 'number', 'boolean', 'array']
+  if (type.indexOf(valueType) === -1) return []
+  /**
+   * 1.单key转为Array<key>
+   * 2.根据formatColumns的长度截取Array<String>，保证下面的遍历不溢出
+   * 3.根据每列的key值找到选项中value为此key的下标并记录
+   */
+  value = isArray(value) ? value : [value]
+  value = value.slice(0, formatColumns.length)
+
+  if (value.length === 0) {
+    value = formatColumns.map(() => 0)
+  }
+  const selected: number[] = []
+  value.forEach((target, col) => {
+    let row = formatColumns[col].findIndex((row) => {
+      return row[props.valueKey].toString() === target.toString()
+    })
+    row = row === -1 ? 0 : row
+    selected.push(row)
+  })
+
+  const selects = selected.map((row, col) => formatColumns[col][row])
+  // 单列选择器，则返回单项
+  if (selects.length === 1) {
+    return selects[0]
+  }
+  return selects
+}
+
+// 对外暴露方法，打开弹框
+function open() {
+  showPopup()
+}
+// 对外暴露方法，关闭弹框
+function close() {
+  onCancel()
+}
+/**
+ * 展示popup
+ */
+function showPopup() {
+  if (props.disabled || props.readonly) return
+
+  emit('open')
+  popupShow.value = true
+  pickerValue.value = props.modelValue
+  displayColumns.value = resetColumns.value
+}
+
+/**
+ * 点击取消按钮触发。关闭popup，触发cancel事件。
+ */
+function onCancel() {
+  popupShow.value = false
+  emit('cancel')
+}
+/**
+ * 点击确定按钮触发。展示选中值，触发cancel事件。
+ */
+function onConfirm() {
+  if (isLoading.value) return
+
+  // 如果当前还在滑动且未停止下来，则锁住先不确认，等滑完再自动确认，避免pickview值未更新
+  if (isPicking.value) {
+    hasConfirmed.value = true
+    return
+  }
+
+  const { beforeConfirm } = props
+  if (beforeConfirm && isFunction(beforeConfirm)) {
+    beforeConfirm(
+      pickerValue.value,
+      (isPass: boolean) => {
+        isPass && handleConfirm()
+      },
+      proxy.$.exposed,
+    )
+  } else {
+    handleConfirm()
+  }
+}
+function handleConfirm() {
+  if (isLoading.value || props.disabled) {
+    popupShow.value = false
+    return
+  }
+
+  const selects = pickerViewWd.value!.getSelects()
+  const values = pickerViewWd.value!.getValues()
+  // 获取当前的数据源，并设置给 resetColumns，用于取消时可以回退数据源
+  const columns = pickerViewWd.value!.getColumnsData()
+  popupShow.value = false
+  resetColumns.value = deepClone(columns)
+  emit('update:modelValue', values)
+
+  setShowValue(selects)
+  emit('confirm', {
+    value: values,
+    selectedItems: selects,
+  })
+}
+/**
+ * 初始change事件
+ * @param event
+ */
+function pickerViewChange({ value }: any) {
+  pickerValue.value = value
+}
+/**
+ * 设置展示值
+ * @param  items
+ */
+function setShowValue(items: ColumnItem | ColumnItem[]) {
+  // 避免值为空时调用自定义展示函数
+  if ((isArray(items) && !items.length) || !items) return
+
+  const { valueKey, labelKey } = props
+  showValue.value = (props.displayFormat || defaultDisplayFormat)(items, { valueKey, labelKey })
+}
+function noop() {}
+function onPickStart() {
+  isPicking.value = true
+}
+function onPickEnd() {
+  isPicking.value = false
+
+  if (hasConfirmed.value) {
+    hasConfirmed.value = false
+    onConfirm()
+  }
+}
+
+/**
+ * 外部设置是否loading
+ * @param loading 是否loading
+ */
+function setLoading(loading: boolean) {
+  innerLoading.value = loading
+}
+
+defineExpose<PickerExpose>({
+  close,
+  open,
+  setLoading,
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

@@ -0,0 +1,91 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(picker-view) {
+    @include e(columns) {
+      background: $-dark-background2;
+    }
+
+    :deep(.wd-picker-view__roller) {
+      background: $-dark-background4;
+    }
+  }
+
+  @include b(picker-view-column) {
+    color: $-dark-color;
+
+    @include e(item) {
+      @include m(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(picker-view) {
+  position: relative;
+  padding: 10px 0;
+
+  @include e(columns) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    background: $-picker-bg;
+  }
+
+  @include edeep(mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: $-picker-mask;
+    filter: blur(4px);
+    background-repeat: no-repeat;
+    background-position: top, bottom;
+  }
+
+  @include e(loading) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $-picker-loading-bg;
+  }
+
+  @include edeep(roller) {
+    z-index: 0;
+    background: rgba(245, 245, 245, 1);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
+
+@include b(picker-view-column) {
+  flex: 1;
+  font-size: $-picker-column-fs;
+  color: $-picker-column-color;
+  text-align: center;
+  transition-timing-function: cubic-bezier(0.28, 0.8, 0.63, 1);
+
+  @include e(item) {
+    padding: $-picker-column-padding;
+    @include lineEllipsis;
+
+    @include m(disabled) {
+      color: $-picker-column-disabled-color;
+    }
+  }
+}