oxy-uni-ui 1.0.1

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

@@ -0,0 +1,499 @@
+<template>
+  <oxy-picker-view
+    ref="datePickerview"
+    :custom-class="customClass"
+    :custom-style="customStyle"
+    :immediate-change="immediateChange"
+    v-model="pickerValue"
+    :columns="columns"
+    :columns-height="columnsHeight"
+    :item-height="itemHeight"
+    :columnChange="columnChange"
+    :loading="loading"
+    :loading-color="loadingColor"
+    @change="onChange"
+    @pickstart="onPickStart"
+    @pickend="onPickEnd"
+  ></oxy-picker-view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-datetime-picker-view',
+  virtualHost: true,
+  addGlobalClass: true,
+  styleIsolation: 'shared'
+}
+</script>
+
+<script lang="ts" setup>
+import OxyPickerView from '../oxy-picker-view/oxy-picker-view.vue'
+import { getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
+import { debounce, isDef, padZero, range, isArray, isString } from '../common/util'
+import { datetimePickerViewProps, type DatetimePickerViewColumnType, type DatetimePickerViewOption, type DatetimePickerViewExpose } from './types'
+import type { PickerViewInstance } from '../oxy-picker-view/types'
+import { getPickerValue } from './util'
+
+// 本地时间戳
+/** @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[]>([])
+// 是否已经初始化
+const created = ref<boolean>(false)
+
+const { proxy } = getCurrentInstance() as any
+
+/**
+ * @description updateValue 防抖函数的占位符
+ */
+const updateValue = debounce(() => {
+  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}`)
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  [
+    () => props.type,
+    () => props.filter,
+    () => props.formatter,
+    () => props.columnFormatter,
+    () => props.minDate,
+    () => props.maxDate,
+    () => props.minHour,
+    () => props.maxHour,
+    () => props.minMinute,
+    () => props.maxMinute,
+    () => props.minSecond,
+    () => props.maxSecond,
+    () => props.useSecond
+  ],
+  () => {
+    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') {
+    const result: Array<{ type: DatetimePickerViewColumnType; range: number[] }> = [
+      {
+        type: 'hour',
+        range: [props.minHour, props.maxHour]
+      },
+      {
+        type: 'minute',
+        range: [props.minMinute, props.maxMinute]
+      }
+    ]
+    if (props.useSecond) {
+      result.push({
+        type: 'second',
+        range: [props.minSecond, props.maxSecond]
+      })
+    }
+    return result
+  }
+
+  const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSecond } = getBoundary('max', innerValue.value as number)
+  const { minYear, minDate, minMonth, minHour, minMinute, minSecond } = 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 === 'datetime' && props.useSecond) {
+    result.push({
+      type: 'second',
+      range: [minSecond, maxSecond]
+    })
+  }
+
+  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 = props.useSecond ? `${padZero(props.minHour)}:00:00` : `${padZero(props.minHour)}:00`
+  }
+
+  // 当type为time时
+  if (!isDateType) {
+    // 非Date类型，直接走此逻辑
+    let [hour, minute, second = '00'] = (isString(value) ? value : value.toString()).split(':')
+    hour = padZero(range(Number(hour), props.minHour, props.maxHour))
+    minute = padZero(range(Number(minute), props.minMinute, props.maxMinute))
+    if (props.useSecond) {
+      second = padZero(range(Number(second), props.minSecond, props.maxSecond))
+      return `${hour}:${minute}:${second}`
+    }
+    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
+  let second: number = 0
+
+  if (type === 'max') {
+    month = 12
+    date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1)
+    hour = 23
+    minute = 59
+    second = 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()
+          if (value.getMinutes() === minute) {
+            second = boundary.getSeconds()
+          }
+        }
+      }
+    }
+  }
+  return {
+    [`${type}Year`]: year,
+    [`${type}Month`]: month,
+    [`${type}Date`]: date,
+    [`${type}Hour`]: hour,
+    [`${type}Minute`]: minute,
+    [`${type}Second`]: second
+  }
+}
+
+/**
+ * @description 根据传入的value以及type，初始化innerValue，期间会使用format格式化数据
+ * @param value
+ * @return {Array}
+ */
+function updateColumnValue(value: string | number) {
+  const values = getPickerValue(value, props.type, props.useSecond)
+  // 更新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, useSecond } = props
+  let innerValue: string | number = ''
+  const pickerVal = datePickerview.value?.getValues() || []
+  const values = isArray(pickerVal) ? pickerVal : [pickerVal]
+
+  if (type === 'time') {
+    if (useSecond) {
+      innerValue = `${padZero(values[0])}:${padZero(values[1])}:${padZero(values[2])}`
+    } else {
+      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，5
+  let hour = 0
+  let minute = 0
+  let second = 0
+
+  if (type === 'datetime') {
+    hour = Number(values[3]) && parseInt(values[3])
+    minute = Number(values[4]) && parseInt(values[4])
+    if (useSecond) {
+      second = Number(values[5]) && parseInt(values[5])
+    }
+  }
+  const value = new Date(Number(year), Number(month) - 1, Number(date), hour, minute, second).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
+  let second: number = 0
+  if (props.type === 'datetime') {
+    hour = Number(values[3])
+    minute = Number(values[4])
+    if (props.useSecond) {
+      second = Number(values[5])
+    }
+  }
+  const value = new Date(year, month - 1, date, hour, minute, second).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]
+}
+
+defineExpose<DatetimePickerViewExpose>({
+  updateColumns,
+  setColumns,
+  getSelects,
+  correctValue,
+  getOriginColumns
+})
+</script>

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

@@ -0,0 +1,120 @@
+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'
+
+export const datetimePickerViewProps = {
+  ...baseProps,
+  /**
+   * 选中项，当 type 为 time 时，类型为字符串，否则为 时间戳
+   */
+  modelValue: makeRequiredProp([String, Number]),
+  /**
+   * 加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /**
+   * picker内部滚筒高
+   */
+  columnsHeight: makeNumberProp(217),
+  /**
+   * picker item的高度
+   */
+  itemHeight: makeNumberProp(35),
+  /**
+   * 选项的key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项的label
+   */
+  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),
+  /**
+   * 是否显示秒选择，仅在 time 和 datetime 类型下生效
+   */
+  useSecond: makeBooleanProp(false),
+  /**
+   * 最小秒数，仅在 time 和 datetime 类型下生效
+   */
+  minSecond: makeNumberProp(0),
+  /**
+   * 最大秒数，仅在 time 和 datetime 类型下生效
+   */
+  maxSecond: makeNumberProp(59),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false)
+}
+
+export type DatetimePickerViewColumnType = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second'
+
+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: DatetimePickerViewExpose) => 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
+  getOriginColumns: () => {
+    type: DatetimePickerViewColumnType
+    values: number[]
+  }[]
+}
+
+export type DatetimePickerViewInstance = ComponentPublicInstance<DatetimePickerViewProps, DatetimePickerViewExpose>

package/components/oxy-datetime-picker-view/util.ts

@@ -0,0 +1,30 @@
+import { type DateTimeType } from './types'
+
+/**
+ * @description 根据传入的值和类型，获取当前的选项数组，便于传入 pickerView
+ * @param value
+ * @param type picker类型
+ * @param useSecond 是否使用秒，仅在 time 和 datetime 类型下生效
+ */
+export function getPickerValue(value: string | number, type: DateTimeType, useSecond: boolean = false) {
+  const values: number[] = []
+  const date = new Date(value)
+  if (type === 'time') {
+    const pair = String(value).split(':')
+    values.push(parseInt(pair[0]), parseInt(pair[1]))
+    if (useSecond && pair[2]) {
+      values.push(parseInt(pair[2]))
+    }
+  } 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())
+      if (useSecond) {
+        values.push(date.getSeconds())
+      }
+    }
+  }
+  return values
+}

package/components/oxy-design-uni/oxy-design-uni.vue

@@ -0,0 +1,5 @@
+<template>
+  <view></view>
+</template>
+<script></script>
+<style lang="scss" scoped></style>