@tplc/wot 1.0.7 → 1.0.9

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

@@ -1,43 +1,14 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import {
-  baseProps,
-  makeBooleanProp,
-  makeNumberProp,
-  makeRequiredProp,
-  makeStringProp,
-} from '../common/props'
+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]),
+  modelValue: makeRequiredProp([String, Number]),
   /**
    * 加载中
    */
@@ -50,7 +21,17 @@ export const datetimePickerViewProps = {
    * picker内部滚筒高
    */
   columnsHeight: makeNumberProp(217),
+  /**
+   * picker item的高度
+   */
+  itemHeight: makeNumberProp(35),
+  /**
+   * 选项的key
+   */
   valueKey: makeStringProp('value'),
+  /**
+   * 选项的label
+   */
   labelKey: makeStringProp('label'),
   /**
    * 选择器类型，可选值：date / year-month / time
@@ -92,30 +73,36 @@ export const datetimePickerViewProps = {
    * 最大分钟，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),
-  startSymbol: makeBooleanProp(false),
+  immediateChange: makeBooleanProp(false)
 }
 
-export type DatetimePickerViewColumnType = 'year' | 'month' | 'date' | 'hour' | 'minute'
+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 DatetimePickerViewFilter = (type: DatetimePickerViewColumnType, values: number[]) => number[]
 
 export type DatetimePickerViewFormatter = (type: string, value: string) => string
 
-export type DatetimePickerViewColumnFormatter = (
-  picker: DatetimePickerViewInstance,
-) => DatetimePickerViewOption[][]
+export type DatetimePickerViewColumnFormatter = (picker: DatetimePickerViewExpose) => DatetimePickerViewOption[][]
 
 export type DatetimePickerViewProps = ExtractPropTypes<typeof datetimePickerViewProps>
 
@@ -124,14 +111,10 @@ export type DatetimePickerViewExpose = {
   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
->
+export type DatetimePickerViewInstance = ComponentPublicInstance<DatetimePickerViewProps, DatetimePickerViewExpose>

package/components/wd-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/wd-datetime-picker-view/wd-datetime-picker-view.vue

@@ -1,42 +1,37 @@
 <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>
+  <wd-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"
+  ></wd-picker-view>
 </template>
 <script lang="ts">
 export default {
   name: 'wd-datetime-picker-view',
   virtualHost: true,
   addGlobalClass: true,
-  styleIsolation: 'shared',
+  styleIsolation: 'shared'
 }
 </script>
 
 <script lang="ts" setup>
+import wdPickerView from '../wd-picker-view/wd-picker-view.vue'
 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 { debounce, isDef, padZero, range, isArray, isString } from '../common/util'
+import { datetimePickerViewProps, type DatetimePickerViewColumnType, type DatetimePickerViewOption, type DatetimePickerViewExpose } from './types'
 import type { PickerViewInstance } from '../wd-picker-view/types'
+import { getPickerValue } from './util'
 
 // 本地时间戳
 /** @description 判断时间戳是否合法 */
@@ -77,25 +72,15 @@ const innerValue = ref<null | string | number>(null)
 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
@@ -114,7 +99,7 @@ watch(
     const value = correctValue(val)
     updateColumnValue(value)
   },
-  { deep: true, immediate: true },
+  { deep: true, immediate: true }
 )
 
 watch(
@@ -124,62 +109,33 @@ watch(
     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 },
+  { deep: true, immediate: true }
 )
 
 watch(
   [
+    () => props.type,
+    () => props.filter,
+    () => props.formatter,
+    () => props.columnFormatter,
     () => props.minDate,
     () => props.maxDate,
     () => props.minHour,
     () => props.maxHour,
     () => props.minMinute,
-    () => props.minMinute,
     () => props.maxMinute,
+    () => props.minSecond,
+    () => props.maxSecond,
+    () => props.useSecond
   ],
   () => {
     updateValue()
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 onBeforeMount(() => {
@@ -199,7 +155,7 @@ function onChange({ value }: { value: string | string[] }) {
   // 这个地方的value返回的是picker数组，实际上在此处我们应该返回 change 的是 value date类型的值
   emit('change', {
     value: result,
-    picker: proxy.$.exposed,
+    picker: proxy.$.exposed
   })
 }
 
@@ -216,7 +172,7 @@ function updateColumns(): DatetimePickerViewOption[][] {
       return column.values.map((value) => {
         return {
           label: formatter ? formatter(column.type, padZero(value)) : padZero(value),
-          value,
+          value
         }
       })
     })
@@ -248,7 +204,7 @@ function getOriginColumns() {
 
     return {
       type,
-      values,
+      values
     }
   })
 }
@@ -259,50 +215,58 @@ function getOriginColumns() {
  */
 function getRanges(): Array<{ type: DatetimePickerViewColumnType; range: number[] }> {
   if (props.type === 'time') {
-    return [
+    const result: Array<{ type: DatetimePickerViewColumnType; range: number[] }> = [
       {
         type: 'hour',
-        range: [props.minHour, props.maxHour],
+        range: [props.minHour, props.maxHour]
       },
       {
         type: 'minute',
-        range: [props.minMinute, props.maxMinute],
-      },
+        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 } = getBoundary(
-    'max',
-    innerValue.value as number,
-  )
-  const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary(
-    'min',
-    innerValue.value as number,
-  )
+  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],
+      range: [minYear, maxYear]
     },
     {
       type: 'month',
-      range: [minMonth, maxMonth],
+      range: [minMonth, maxMonth]
     },
     {
       type: 'date',
-      range: [minDate, maxDate],
+      range: [minDate, maxDate]
     },
     {
       type: 'hour',
-      range: [minHour, maxHour],
+      range: [minHour, maxHour]
     },
     {
       type: 'minute',
-      range: [minMinute, maxMinute],
-    },
+      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)
@@ -321,15 +285,19 @@ function correctValue(value: string | number | Date): string | number {
     value = props.minDate
   } else if (!isDateType && !value) {
     // 非Date类型，无入参，使用最小小时代替
-    value = `${padZero(props.minHour)}:00`
+    value = props.useSecond ? `${padZero(props.minHour)}:00:00` : `${padZero(props.minHour)}:00`
   }
 
   // 当type为time时
   if (!isDateType) {
     // 非Date类型，直接走此逻辑
-    let [hour, minute] = (value as string).split(':')
+    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}`
   }
 
@@ -352,12 +320,14 @@ function getBoundary(type: 'min' | 'max', innerValue: number) {
   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) {
@@ -368,6 +338,9 @@ function getBoundary(type: 'min' | 'max', innerValue: number) {
         hour = boundary.getHours()
         if (value.getHours() === hour) {
           minute = boundary.getMinutes()
+          if (value.getMinutes() === minute) {
+            second = boundary.getSeconds()
+          }
         }
       }
     }
@@ -378,6 +351,7 @@ function getBoundary(type: 'min' | 'max', innerValue: number) {
     [`${type}Date`]: date,
     [`${type}Hour`]: hour,
     [`${type}Minute`]: minute,
+    [`${type}Second`]: second
   }
 }
 
@@ -387,13 +361,13 @@ function getBoundary(type: 'min' | 'max', innerValue: number) {
  * @return {Array}
  */
 function updateColumnValue(value: string | number) {
-  const values = getPickerValue(value, props.type)
+  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,
+      picker: proxy.$.exposed
     })
   }
   innerValue.value = value
@@ -406,13 +380,17 @@ function updateColumnValue(value: string | number) {
  * @return {date} innerValue
  */
 function updateInnerValue() {
-  const { type } = props
+  const { type, useSecond } = 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])}`
+    if (useSecond) {
+      innerValue = `${padZero(values[0])}:${padZero(values[1])}:${padZero(values[2])}`
+    } else {
+      innerValue = `${padZero(values[0])}:${padZero(values[1])}`
+    }
     return innerValue
   }
 
@@ -427,21 +405,22 @@ function updateInnerValue() {
   // 处理 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]))
+    date = (Number(values[2]) && parseInt(String(values[2]))) > maxDate ? maxDate : values[2] && parseInt(String(values[2]))
   }
 
-  // 处理 时分 索引位3，4
+  // 处理 时分秒 索引位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).getTime()
+  const value = new Date(Number(year), Number(month) - 1, Number(date), hour, minute, second).getTime()
 
   innerValue = correctValue(value)
   return innerValue
@@ -464,16 +443,20 @@ function columnChange(picker: PickerViewInstance) {
   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).getTime()
+  const value = new Date(year, month - 1, date, hour, minute, second).getTime()
   /** 根据计算选中项的时间戳，重新计算所有的选项列表 */
   // 更新选中时间戳
   innerValue.value = correctValue(value)
-  // 根据innerValue获取最新的时间表，重新生成对应的数据源
 
+  // 根据innerValue获取最新的时间表，重新生成对应的数据源
   const newColumns = updateColumns()
   // 深拷贝联动之前的选中项
   const selectedIndex = picker.getSelectedIndex().slice(0)
@@ -488,9 +471,7 @@ function columnChange(picker: PickerViewInstance) {
     picker.setColumnData(
       nextColumnIndex,
       nextColumnData,
-      selectedIndex[nextColumnIndex] <= nextColumnData.length - 1
-        ? selectedIndex[nextColumnIndex]
-        : 0,
+      selectedIndex[nextColumnIndex] <= nextColumnData.length - 1 ? selectedIndex[nextColumnIndex] : 0
     )
   })
 }
@@ -507,8 +488,12 @@ function getSelects() {
   if (isArray(pickerVal)) return pickerVal
   return [pickerVal]
 }
-</script>
 
-<style lang="scss" scoped>
-@import './index';
-</style>
+defineExpose<DatetimePickerViewExpose>({
+  updateColumns,
+  setColumns,
+  getSelects,
+  correctValue,
+  getOriginColumns
+})
+</script>

package/components/wd-divider/index.scss

@@ -14,19 +14,87 @@
 @include b(divider) {
   position: relative;
   display: flex;
-  align-items: center;
   padding: $-divider-padding;
-  font-size: $-divider-fs;
+  margin: $-divider-margin;
+  align-items: center;
   color: $-divider-color;
+  font-size: $-divider-fs;
 
-  @include e(line) {
-    display: block;
+  &::after,
+  &::before {
     flex: 1;
-    height: 1px;
-    background: $-divider-line-color;
-    transform: scaleY(0.5);
+    display: block;
+    box-sizing: border-box;
+    border-style: solid;
+    border-color: $-divider-line-color;
+    border-width: $-divider-line-height 0 0;
   }
-  @include e(content) {
-    padding: 0 12px;
+
+  &::before {
+    content: '';
   }
-}
+
+  @include m(center, left, right) {
+    &::after {
+      content: '';
+      margin-left: $-divider-content-left-margin;
+    }
+
+    &::before {
+      margin-right: $-divider-content-right-margin;
+    }
+  }
+
+  @include m(left) {
+    &::before {
+      max-width: $-divider-content-left-width;
+    }
+  }
+
+  @include m(right) {
+    &::after {
+      max-width: $-divider-content-right-width;
+    }
+  }
+
+  @include when(hairline) {
+
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+
+  @include when(dashed) {
+
+    &::before,
+    &::after {
+      border-style: dashed;
+    }
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    width: $-divider-vertical-line-width;
+    height: $-divider-vertical-height;
+    margin: $-divider-vertical-content-margin;
+    padding: 0;
+    vertical-align: middle;
+
+    &::before {
+      height: 100%;
+      border-width: 0 0 0 $-divider-vertical-line-width;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    @include when(hairline) {
+      &::before {
+        transform: scaleX(0.5);
+      }
+    }
+  }
+
+}