@tplc/wot 0.0.1

package/components/wd-datetime-picker-view/types.ts

@@ -0,0 +1,137 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import {
+  baseProps,
+  makeBooleanProp,
+  makeNumberProp,
+  makeRequiredProp,
+  makeStringProp,
+} from '../common/props'
+
+export type DateTimeType = 'date' | 'year-month' | 'time' | 'datetime' | 'year'
+
+/**
+ * @description 根据传入的值和类型，获取当前的选项数组，便于传入 pickerView
+ * @param value
+ * @param type picker类型
+ * @return {Array} pickerValue
+ */
+export function getPickerValue(value: string | number, type: DateTimeType) {
+  const values: number[] = []
+  const date = new Date(value)
+  if (type === 'time') {
+    const pair = String(value).split(':')
+    values.push(parseInt(pair[0]), parseInt(pair[1]))
+  } else {
+    values.push(date.getFullYear(), date.getMonth() + 1)
+    if (type === 'date') {
+      values.push(date.getDate())
+    } else if (type === 'datetime') {
+      values.push(date.getDate(), date.getHours(), date.getMinutes())
+    }
+  }
+  return values
+}
+
+export const datetimePickerViewProps = {
+  ...baseProps,
+  /**
+   * 选中项，当 type 为 time 时，类型为字符串，否则为 时间戳
+   */
+  modelValue: makeRequiredProp([String, Number, Date]),
+  /**
+   * 加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /**
+   * picker内部滚筒高
+   */
+  columnsHeight: makeNumberProp(217),
+  valueKey: makeStringProp('value'),
+  labelKey: makeStringProp('label'),
+  /**
+   * 选择器类型，可选值：date / year-month / time
+   */
+  type: makeStringProp<DateTimeType>('datetime'),
+  /**
+   * 自定义过滤选项的函数，返回列的选项数组
+   */
+  filter: Function as PropType<DatetimePickerViewFilter>,
+  /**
+   * 自定义弹出层选项文案的格式化函数，返回一个字符串
+   */
+  formatter: Function as PropType<DatetimePickerViewFormatter>,
+  /**
+   * 自定义列的格式化函数
+   */
+  columnFormatter: Function as PropType<DatetimePickerViewColumnFormatter>,
+  /**
+   * 最小日期
+   */
+  minDate: makeNumberProp(new Date(new Date().getFullYear() - 10, 0, 1).getTime()),
+  /**
+   * 最大日期
+   */
+  maxDate: makeNumberProp(new Date(new Date().getFullYear() + 10, 11, 31).getTime()),
+  /**
+   * 最小小时，time类型时生效
+   */
+  minHour: makeNumberProp(0),
+  /**
+   * 最大小时，time类型时生效
+   */
+  maxHour: makeNumberProp(23),
+  /**
+   * 最小分钟，time类型时生效
+   */
+  minMinute: makeNumberProp(0),
+  /**
+   * 最大分钟，time类型时生效
+   */
+  maxMinute: makeNumberProp(59),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+  startSymbol: makeBooleanProp(false),
+}
+
+export type DatetimePickerViewColumnType = 'year' | 'month' | 'date' | 'hour' | 'minute'
+
+export type DatetimePickerViewOption = {
+  label: string
+  value: number
+}
+
+export type DatetimePickerViewFilter = (
+  type: DatetimePickerViewColumnType,
+  values: number[],
+) => number[]
+
+export type DatetimePickerViewFormatter = (type: string, value: string) => string
+
+export type DatetimePickerViewColumnFormatter = (
+  picker: DatetimePickerViewInstance,
+) => DatetimePickerViewOption[][]
+
+export type DatetimePickerViewProps = ExtractPropTypes<typeof datetimePickerViewProps>
+
+export type DatetimePickerViewExpose = {
+  updateColumns: () => DatetimePickerViewOption[][]
+  setColumns: (columnList: DatetimePickerViewOption[][]) => void
+  getSelects: () => Record<string, any> | Record<string, any>[] | undefined
+  correctValue: (value: string | number) => string | number
+  getPickerValue: (value: string | number, type: DateTimeType) => number[]
+  getOriginColumns: () => {
+    type: DatetimePickerViewColumnType
+    values: number[]
+  }[]
+}
+
+export type DatetimePickerViewInstance = ComponentPublicInstance<
+  DatetimePickerViewProps,
+  DatetimePickerViewExpose
+>

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

@@ -0,0 +1,514 @@
+<template>
+  <view>
+    <wd-picker-view
+      ref="datePickerview"
+      :custom-class="customClass"
+      :custom-style="customStyle"
+      :immediate-change="immediateChange"
+      v-model="pickerValue"
+      :columns="columns"
+      :columns-height="columnsHeight"
+      :columnChange="columnChange"
+      :loading="loading"
+      :loading-color="loadingColor"
+      @change="onChange"
+      @pickstart="onPickStart"
+      @pickend="onPickEnd"
+    ></wd-picker-view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-datetime-picker-view',
+  virtualHost: true,
+  addGlobalClass: true,
+  styleIsolation: 'shared',
+}
+</script>
+
+<script lang="ts" setup>
+import { getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
+import { debounce, isFunction, isDef, padZero, range, isArray } from '../common/util'
+import {
+  getPickerValue,
+  datetimePickerViewProps,
+  type DatetimePickerViewColumnType,
+  type DatetimePickerViewOption,
+  type DatetimePickerViewExpose,
+} from './types'
+import type { PickerViewInstance } from '../wd-picker-view/types'
+
+// 本地时间戳
+/** @description 判断时间戳是否合法 */
+const isValidDate = (date: string | number | Date) => isDef(date) && !Number.isNaN(date)
+/**
+ * @description 生成n个元素，并使用iterator接口进行填充
+ * @param n
+ * @param iteratee
+ * @return {any[]}
+ */
+const times = (n: number, iteratee: (index: number) => number) => {
+  let index: number = -1
+  const length = n < 0 ? 0 : n
+  const result: number[] = Array(length)
+  while (++index < n) {
+    result[index] = iteratee(index)
+  }
+  return result
+}
+/**
+ * @description 获取某年某月有多少天
+ * @param {Number} year
+ * @param {Number} month
+ * @return {Number} day
+ */
+const getMonthEndDay = (year: number, month: number) => {
+  return 32 - new Date(year, month - 1, 32).getDate()
+}
+
+const props = defineProps(datetimePickerViewProps)
+const emit = defineEmits(['change', 'pickstart', 'pickend', 'update:modelValue'])
+
+// pickerview
+const datePickerview = ref<PickerViewInstance>()
+// 内部保持时间戳的
+const innerValue = ref<null | string | number>(null)
+// 传递给pickerView的columns的数据
+const columns = ref<DatetimePickerViewOption[][]>([])
+// 传递给pickerView的value的数据
+const pickerValue = ref<string | number | boolean | string[] | number[] | boolean[]>([])
+// 自定义组件是否已经调用created hook
+const created = ref<boolean>(false)
+
+const { proxy } = getCurrentInstance() as any
+
+defineExpose<DatetimePickerViewExpose>({
+  updateColumns,
+  setColumns,
+  getSelects,
+  correctValue,
+  getPickerValue,
+  getOriginColumns,
+  ...props,
+})
+/**
+ * @description updateValue 防抖函数的占位符
+ */
+const updateValue = debounce(() => {
+  // 只有等created hook初始化数据之后，observer才能执行此操作
+  if (!created.value) return
+  const val = correctValue(props.modelValue)
+  const isEqual = val === innerValue.value
+  if (!isEqual) {
+    updateColumnValue(val)
+  } else {
+    columns.value = updateColumns()
+  }
+}, 50)
+
+watch(
+  () => props.modelValue,
+  (val, oldVal) => {
+    if (val === oldVal) return
+    // 外部传入值更改时 更新picker数据
+    const value = correctValue(val)
+    updateColumnValue(value)
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.type,
+  (target) => {
+    const type = ['date', 'year-month', 'time', 'datetime', 'year']
+    if (type.indexOf(target) === -1) {
+      console.error(`type must be one of ${type}`)
+    }
+    // 每次type更新时都需要刷新整个列表
+    updateValue()
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.filter,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of filter must be Function')
+    }
+    updateValue()
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.formatter,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of formatter must be Function')
+    }
+    updateValue()
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.columnFormatter,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of columnFormatter must be Function')
+    }
+    updateValue()
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  [
+    () => props.minDate,
+    () => props.maxDate,
+    () => props.minHour,
+    () => props.maxHour,
+    () => props.minMinute,
+    () => props.minMinute,
+    () => props.maxMinute,
+  ],
+  () => {
+    updateValue()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+onBeforeMount(() => {
+  // 初始化完毕，打开observer触发render的开关
+  created.value = true
+  const innerValue = correctValue(props.modelValue)
+  updateColumnValue(innerValue)
+})
+
+/** pickerView触发change事件，同步修改pickerValue */
+function onChange({ value }: { value: string | string[] }) {
+  // 更新pickerView的value
+  pickerValue.value = value
+  // pickerValue => innerValue
+  const result = updateInnerValue()
+  emit('update:modelValue', result)
+  // 这个地方的value返回的是picker数组，实际上在此处我们应该返回 change 的是 value date类型的值
+  emit('change', {
+    value: result,
+    picker: proxy.$.exposed,
+  })
+}
+
+/**
+ * @description 使用formatter格式化getOriginColumns的结果
+ * @return {Array<Array<Number>>} 用于传入picker的columns
+ */
+function updateColumns(): DatetimePickerViewOption[][] {
+  const { formatter, columnFormatter } = props
+  if (columnFormatter) {
+    return columnFormatter(proxy.$.exposed)
+  } else {
+    return getOriginColumns().map((column) => {
+      return column.values.map((value) => {
+        return {
+          label: formatter ? formatter(column.type, padZero(value)) : padZero(value),
+          value,
+        }
+      })
+    })
+  }
+}
+
+/**
+ * 设置数据列
+ * @param columnList 数据列
+ */
+function setColumns(columnList: DatetimePickerViewOption[][]) {
+  columns.value = columnList
+}
+
+/**
+ * @description 根据getRanges得到的范围计算所有的列的数据
+ * @return {{values: any[], type: String}[]} 年
+ */
+function getOriginColumns() {
+  const { filter } = props
+  return getRanges().map(({ type, range }) => {
+    let values = times(range[1] - range[0] + 1, (index: number) => {
+      return range[0] + index
+    })
+
+    if (filter) {
+      values = filter(type, values)
+    }
+
+    return {
+      type,
+      values,
+    }
+  })
+}
+
+/**
+ * @description 根据时间戳生成年月日时分的边界范围
+ * @return {Array<{type:String,range:Array<Number>}>}
+ */
+function getRanges(): Array<{ type: DatetimePickerViewColumnType; range: number[] }> {
+  if (props.type === 'time') {
+    return [
+      {
+        type: 'hour',
+        range: [props.minHour, props.maxHour],
+      },
+      {
+        type: 'minute',
+        range: [props.minMinute, props.maxMinute],
+      },
+    ]
+  }
+
+  const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary(
+    'max',
+    innerValue.value as number,
+  )
+  const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary(
+    'min',
+    innerValue.value as number,
+  )
+
+  const result: Array<{ type: DatetimePickerViewColumnType; range: number[] }> = [
+    {
+      type: 'year',
+      range: [minYear, maxYear],
+    },
+    {
+      type: 'month',
+      range: [minMonth, maxMonth],
+    },
+    {
+      type: 'date',
+      range: [minDate, maxDate],
+    },
+    {
+      type: 'hour',
+      range: [minHour, maxHour],
+    },
+    {
+      type: 'minute',
+      range: [minMinute, maxMinute],
+    },
+  ]
+
+  if (props.type === 'date') result.splice(3, 2)
+  if (props.type === 'year-month') result.splice(2, 3)
+  if (props.type === 'year') result.splice(1, 4)
+  return result
+}
+
+/**
+ * @description 修正时间入参，判定是否为规范时间类型
+ * @param {String | Number} value
+ * @return {String | Number} innerValue
+ */
+function correctValue(value: string | number | Date): string | number {
+  const isDateType = props.type !== 'time'
+  if (isDateType && !isValidDate(value)) {
+    // 是Date类型，但入参不可用，使用最小时间戳代替
+    value = props.minDate
+  } else if (!isDateType && !value) {
+    // 非Date类型，无入参，使用最小小时代替
+    value = `${padZero(props.minHour)}:00`
+  }
+
+  // 当type为time时
+  if (!isDateType) {
+    // 非Date类型，直接走此逻辑
+    let [hour, minute] = (value as string).split(':')
+    hour = padZero(range(Number(hour), props.minHour, props.maxHour))
+    minute = padZero(range(Number(minute), props.minMinute, props.maxMinute))
+    return `${hour}:${minute}`
+  }
+
+  // date type
+  value = Math.min(Math.max(Number(value), props.minDate), props.maxDate)
+
+  return value
+}
+
+/**
+ * @description 根据时间戳，计算所有选项的范围
+ * @param {'min'|'max'} type 类型
+ * @param {Number} innerValue 时间戳
+ */
+function getBoundary(type: 'min' | 'max', innerValue: number) {
+  const value = new Date(innerValue)
+  const boundary = new Date(props[`${type}Date`])
+  const year = boundary.getFullYear()
+  let month: number = 1
+  let date: number = 1
+  let hour: number = 0
+  let minute: number = 0
+
+  if (type === 'max') {
+    month = 12
+    date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1)
+    hour = 23
+    minute = 59
+  }
+
+  if (value.getFullYear() === year) {
+    month = boundary.getMonth() + 1
+    if (value.getMonth() + 1 === month) {
+      date = boundary.getDate()
+      if (value.getDate() === date) {
+        hour = boundary.getHours()
+        if (value.getHours() === hour) {
+          minute = boundary.getMinutes()
+        }
+      }
+    }
+  }
+  return {
+    [`${type}Year`]: year,
+    [`${type}Month`]: month,
+    [`${type}Date`]: date,
+    [`${type}Hour`]: hour,
+    [`${type}Minute`]: minute,
+  }
+}
+
+/**
+ * @description 根据传入的value以及type，初始化innerValue，期间会使用format格式化数据
+ * @param value
+ * @return {Array}
+ */
+function updateColumnValue(value: string | number) {
+  const values = getPickerValue(value, props.type)
+  // 更新pickerView的value,columns
+  if (props.modelValue !== value) {
+    emit('update:modelValue', value)
+    emit('change', {
+      value,
+      picker: proxy.$.exposed,
+    })
+  }
+  innerValue.value = value
+  columns.value = updateColumns()
+  pickerValue.value = values
+}
+
+/**
+ * @description 根据当前的选中项 处理innerValue
+ * @return {date} innerValue
+ */
+function updateInnerValue() {
+  const { type } = props
+  let innerValue: string | number = ''
+  const pickerVal = datePickerview.value?.getValues() || []
+  const values = isArray(pickerVal) ? pickerVal : [pickerVal]
+
+  if (type === 'time') {
+    innerValue = `${padZero(values[0])}:${padZero(values[1])}`
+    return innerValue
+  }
+
+  // 处理年份 索引位0
+  const year = values[0] && parseInt(values[0])
+
+  // 处理月 索引位1
+  const month = type === 'year' ? 1 : values[1] && parseInt(values[1])
+
+  const maxDate = getMonthEndDay(Number(year), Number(month))
+
+  // 处理 date 日期 索引位2
+  let date: string | number = 1
+  if (type !== 'year-month' && type !== 'year') {
+    date =
+      (Number(values[2]) && parseInt(String(values[2]))) > maxDate
+        ? maxDate
+        : values[2] && parseInt(String(values[2]))
+  }
+
+  // 处理 时分 索引位3，4
+  let hour = 0
+  let minute = 0
+
+  if (type === 'datetime') {
+    hour = Number(values[3]) && parseInt(values[3])
+    minute = Number(values[4]) && parseInt(values[4])
+  }
+  const value = new Date(Number(year), Number(month) - 1, Number(date), hour, minute).getTime()
+
+  innerValue = correctValue(value)
+  return innerValue
+}
+
+/**
+ * @description 选中项改变，多级联动
+ */
+function columnChange(picker: PickerViewInstance) {
+  // time year-mouth year 无需联动
+  if (props.type === 'time' || props.type === 'year-month' || props.type === 'year') {
+    return
+  }
+  /** 重新计算年月日时分秒，修正时间。 */
+  const values = picker.getValues() as string[]
+  const year = Number(values[0])
+  const month = Number(values[1])
+  const maxDate = getMonthEndDay(year, month)
+  let date = Number(values[2])
+  date = date > maxDate ? maxDate : date
+  let hour: number = 0
+  let minute: number = 0
+  if (props.type === 'datetime') {
+    hour = Number(values[3])
+    minute = Number(values[4])
+  }
+  const value = new Date(year, month - 1, date, hour, minute).getTime()
+  /** 根据计算选中项的时间戳，重新计算所有的选项列表 */
+  // 更新选中时间戳
+  innerValue.value = correctValue(value)
+  // 根据innerValue获取最新的时间表，重新生成对应的数据源
+
+  const newColumns = updateColumns()
+  // 深拷贝联动之前的选中项
+  const selectedIndex = picker.getSelectedIndex().slice(0)
+  /**
+   * 选中年会修改对应的年份的月数，和月份对应的日期。
+   * 选中月，会修改月份对应的日数
+   */
+  newColumns.forEach((_columns, index) => {
+    const nextColumnIndex = index + 1
+    const nextColumnData = newColumns[nextColumnIndex]
+    if (nextColumnIndex > newColumns.length - 1) return
+    picker.setColumnData(
+      nextColumnIndex,
+      nextColumnData,
+      selectedIndex[nextColumnIndex] <= nextColumnData.length - 1
+        ? selectedIndex[nextColumnIndex]
+        : 0,
+    )
+  })
+}
+function onPickStart() {
+  emit('pickstart')
+}
+function onPickEnd() {
+  emit('pickend')
+}
+
+function getSelects() {
+  const pickerVal = datePickerview.value?.getSelects()
+  if (pickerVal == null) return undefined
+  if (isArray(pickerVal)) return pickerVal
+  return [pickerVal]
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-divider/index.scss

@@ -0,0 +1,32 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(divider) {
+    color: $-dark-color3;
+
+    @include e(line) {
+      background: $-dark-color-gray;
+    }
+  }
+}
+
+@include b(divider) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: $-divider-padding;
+  font-size: $-divider-fs;
+  color: $-divider-color;
+
+  @include e(line) {
+    display: block;
+    flex: 1;
+    height: 1px;
+    background: $-divider-line-color;
+    transform: scaleY(0.5);
+  }
+  @include e(content) {
+    padding: 0 12px;
+  }
+}

package/components/wd-divider/types.ts

@@ -0,0 +1,12 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+
+export const dividerProps = {
+  ...baseProps,
+  /**
+   * 自定义颜色，所有颜色的写法
+   */
+  color: makeStringProp(''),
+}
+
+export type DividerProps = ExtractPropTypes<typeof dividerProps>