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

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

@@ -0,0 +1,402 @@
+<template>
+  <wd-picker-view
+    ref="datePickerview"
+    :custom-class="customClass"
+    :custom-style="customStyle"
+    :immediate-change="immediateChange"
+    v-model="pickerValue"
+    :columns="columns"
+    :item-height="itemHeight"
+    :visible-item-count="visibleItemCount"
+    @change="onChange"
+    @pickstart="onPickStart"
+    @pickend="onPickEnd"
+  ></wd-picker-view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-datetime-picker-view',
+  // #ifndef MP-TOUTIAO
+  virtualHost: true,
+  // #endif
+  addGlobalClass: true,
+  styleIsolation: 'shared'
+}
+</script>
+
+<script lang="ts" setup>
+import wdPickerView from '../wd-picker-view/wd-picker-view.vue'
+import { getCurrentInstance, onBeforeMount, ref, watch, computed } from 'vue'
+import { isDef, padZero, range, isArray, isString } from '../../common/util'
+import { datetimePickerViewProps, type DatetimePickerViewColumnType, type DatetimePickerViewExpose } from './types'
+import type { PickerViewInstance } from '../wd-picker-view/types'
+import { getPickerValue } from './util'
+import { type Numeric } from '../../common/props'
+
+// 本地时间戳
+/**
+ * @description 判断时间戳是否合法
+ * @param {string | number | Date} date 时间
+ * @returns {boolean} 是否合法
+ */
+const isValidDate = (date: string | number | Date) => isDef(date) && !Number.isNaN(date)
+
+/**
+ * @description 生成n个元素，并使用iterator接口进行填充
+ * @param {number} n 数量
+ * @param {function} iteratee 迭代函数
+ * @returns {Array} 结果数组
+ */
+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 月
+ * @returns {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的value的数据
+const pickerValue = ref<Array<Numeric>>([])
+// 是否已经初始化
+const created = ref<boolean>(false)
+
+const { proxy } = getCurrentInstance() as any
+
+/**
+ * 传递给pickerView的columns的数据
+ * 核心逻辑：columns 依赖 innerValue，而 innerValue 会在 onChange 中被更新
+ */
+const columns = computed(() => {
+  const { formatter, columnFormatter } = props
+  const originColumns = getOriginColumns().map((column) => {
+    return column.values.map((value) => {
+      return {
+        label: formatter ? formatter(column.type, padZero(value)) : padZero(value),
+        value
+      }
+    })
+  })
+  if (columnFormatter) {
+    return columnFormatter(originColumns)
+  }
+  return originColumns
+})
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    const value = correctValue(val)
+    if (value === innerValue.value) return
+    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 }
+)
+
+onBeforeMount(() => {
+  // 初始化完毕，打开observer触发render的开关
+  created.value = true
+  const innerValue = correctValue(props.modelValue)
+  updateColumnValue(innerValue)
+})
+
+/**
+ * @description pickerView触发change事件，同步修改pickerValue
+ * @param {object} params 参数
+ * @param {Array<string | number>} params.selectedValues 选中的值
+ */
+function onChange({ selectedValues }: { selectedValues: Array<string | number> }) {
+  // 更新pickerView的value
+  pickerValue.value = selectedValues
+  // pickerValue => innerValue
+  const result = updateInnerValue(selectedValues)
+
+  updateColumnValue(result)
+}
+
+/**
+ * @description 根据getRanges得到的范围计算所有的列的数据
+ * @returns {DatetimePickerViewColumn[]} 所有的列的数据
+ */
+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 根据时间戳生成年月日时分的边界范围
+ * @returns {Array<{type: DatetimePickerViewColumnType, range: 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 | Date} value 时间
+ * @returns {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 时间戳
+ * @returns {object} 边界范围
+ */
+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 {string | number} value 时间
+ */
+function updateColumnValue(value: string | number) {
+  const values = getPickerValue(value, props.type, props.useSecond)
+  if (props.modelValue !== value) {
+    emit('update:modelValue', value)
+    emit('change', {
+      value,
+      columns: getOriginColumns()
+    })
+  }
+  innerValue.value = value
+  pickerValue.value = values
+}
+
+/**
+ * @description 根据当前的选中项 处理innerValue
+ * @param {Array<string | number>} indexes 选中的索引
+ * @returns {string | number} innerValue
+ */
+function updateInnerValue(indexes: Array<string | number>) {
+  const { type, useSecond } = props
+  let innerValue: string | number = ''
+  const values = indexes
+
+  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(String(values[0]))
+
+  // 处理月 索引位1
+  const month = type === 'year' ? 1 : values[1] && parseInt(String(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(String(values[3]))
+    minute = Number(values[4]) && parseInt(String(values[4]))
+    if (useSecond) {
+      second = Number(values[5]) && parseInt(String(values[5]))
+    }
+  }
+  const value = new Date(Number(year), Number(month) - 1, Number(date), hour, minute, second).getTime()
+
+  innerValue = correctValue(value)
+  return innerValue
+}
+
+function onPickStart() {
+  emit('pickstart')
+}
+function onPickEnd() {
+  emit('pickend')
+}
+
+function getSelectedOptions() {
+  const pickerVal = datePickerview.value?.getSelectedOptions()
+  if (pickerVal == null) return undefined
+  if (isArray(pickerVal)) return pickerVal
+  return [pickerVal]
+}
+
+defineExpose<DatetimePickerViewExpose>({
+  getSelectedOptions,
+  correctValue,
+  getOriginColumns
+})
+</script>

package/components/wd-dialog/index.scss

@@ -0,0 +1,281 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 对话框背景色
+$dialog-bg: var(--wot-dialog-bg, $filled-oppo) !default;
+// 对话框宽度
+$dialog-width: var(--wot-dialog-width, 280px) !default;
+// 对话框圆角
+$dialog-radius: var(--wot-dialog-radius, $radius-large) !default;
+// 对话框主体内边距
+$dialog-body-padding: var(--wot-dialog-body-padding, $padding-super-loose $padding-super-loose 0) !default;
+// 主体元素间距
+$dialog-body-element-spacing: var(--wot-dialog-body-element-spacing, $spacing-tight) !default;
+// 主体大间距
+$dialog-body-element-spacing-large: var(--wot-dialog-body-element-spacing-large, $spacing-extra-loose) !default;
+// 标题文字颜色
+$dialog-title-color: var(--wot-dialog-title-color, $text-main) !default;
+// 标题文字字号
+$dialog-title-font-size: var(--wot-dialog-title-font-size, $typography-body-size-extra-large) !default;
+// 标题文字行高
+$dialog-title-line-height: var(--wot-dialog-title-line-height, $typography-body-line--height-size-extra-large) !default;
+// 标题文字字重
+$dialog-title-font-weight: var(--wot-dialog-title-font-weight, $font-weight-medium) !default;
+// 标题底部外边距
+$dialog-title-margin-bottom: var(--wot-dialog-title-margin-bottom, $spacing-tight) !default;
+// 内容文字颜色
+$dialog-content-color: var(--wot-dialog-content-color, $text-secondary) !default;
+// 内容文字字号
+$dialog-content-font-size: var(--wot-dialog-content-font-size, $typography-body-size-main) !default;
+// 内容文字行高
+$dialog-content-line-height: var(--wot-dialog-content-line-height, $typography-body-line--height-size-main) !default;
+// 内容区内边距
+$dialog-content-padding: var(--wot-dialog-content-padding, $spacing-loose) !default;
+// 内容区最大高度
+$dialog-content-max-height: var(--wot-dialog-content-max-height, 340px) !default;
+// 输入框背景色
+$dialog-content-input-bg: var(--wot-dialog-content-input-bg, $filled-bottom) !default;
+// 输入错误文字颜色
+$dialog-content-input-error-color: var(--wot-dialog-content-input-error-color, $danger-main) !default;
+// 输入错误文字字号
+$dialog-content-input-font-size: var(--wot-dialog-content-input-font-size, $typography-label-size-main) !default;
+// 输入错误文字行高
+$dialog-content-input-line-height: var(--wot-dialog-content-input-line-height, $typography-label-line--height-size-main) !default;
+// 输入提示顶部内边距
+$dialog-content-input-padding-top: var(--wot-dialog-content-input-padding-top, $spacing-tight) !default;
+// 滚动条颜色
+$dialog-scrollbar-color: var(--wot-dialog-scrollbar-color, $border-main) !default;
+// 滚动条宽度
+$dialog-scrollbar-width: var(--wot-dialog-scrollbar-width, $stroke-blod) !default;
+// 滚动条圆角
+$dialog-scrollbar-radius: var(--wot-dialog-scrollbar-radius, $radius-small) !default;
+// 默认图标颜色
+$dialog-primary-color: var(--wot-dialog-primary-color, $primary-6) !default;
+// 成功图标颜色
+$dialog-success-color: var(--wot-dialog-success-color, $success-main) !default;
+// 警告图标颜色
+$dialog-warning-color: var(--wot-dialog-warning-color, $warning-main) !default;
+// 危险图标颜色
+$dialog-error-color: var(--wot-dialog-error-color, $danger-main) !default;
+// 图标尺寸
+$dialog-icon-size: var(--wot-dialog-icon-size, $n-48) !default;
+// 图标底部外边距
+$dialog-icon-margin-bottom: var(--wot-dialog-icon-margin-bottom, $spacing-tight) !default;
+// 关闭图标尺寸
+$dialog-close-icon-size: var(--wot-dialog-close-icon-size, $n-18) !default;
+// 关闭图标颜色
+$dialog-close-icon-color: var(--wot-dialog-close-icon-color, $icon-secondary) !default;
+// 关闭图标顶部偏移
+$dialog-close-icon-top: var(--wot-dialog-close-icon-top, $spacing-extra-loose) !default;
+// 关闭图标右侧偏移
+$dialog-close-icon-right: var(--wot-dialog-close-icon-right, $spacing-extra-loose) !default;
+// 操作区内边距
+$dialog-actions-padding: var(--wot-dialog-actions-padding, $padding-super-loose) !default;
+// 垂直操作区内边距
+$dialog-actions-padding-vertical: var(--wot-dialog-actions-padding-vertical, $padding-super-loose $padding-loose $padding-loose) !default;
+// 操作按钮水平间距
+$dialog-actions-spacing: var(--wot-dialog-actions-spacing, $spacing-loose) !default;
+// 操作按钮垂直间距
+$dialog-actions-spacing-vertical: var(--wot-dialog-actions-spacing-vertical, $spacing-tight) !default;
+// 确认按钮字重
+$dialog-actions-confirm-font-weight: var(--wot-dialog-actions-confirm-font-weight, $font-weight-medium) !default;
+// 图片圆角
+$dialog-img-border-radius: var(--wot-dialog-img-border-radius, $radius-large) !default;
+// 文本按钮边框颜色
+$dialog-action-text-border-color: var(--wot-dialog-action-text-border-color, $border-main) !default;
+// 文本按钮内边距
+$dialog-action-text-button-padding: var(--wot-dialog-action-text-button-padding, $padding-loose $padding-extra-loose) !default;
+// 文本按钮边框宽度
+$dialog-action-text-border: var(--wot-dialog-action-text-border, $stroke-light) !default;
+
+
+:deep(.wd-dialog) {
+  background: transparent;
+}
+
+@include b(dialog) {
+
+  @include e(container) {
+    background: $dialog-bg;
+    border-radius: $dialog-radius;
+    overflow: hidden;
+    width: $dialog-width;
+    box-sizing: border-box;
+  }
+
+  @include e(img) {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: $dialog-img-border-radius;
+    
+    &+.wd-dialog__title {
+      margin-top: $dialog-body-element-spacing-large; 
+    }
+
+    &+.wd-dialog__content {
+      margin-top: $dialog-body-element-spacing-large; 
+      
+      .wd-dialog__body.is-prompt & {
+        margin-top: $dialog-body-element-spacing;
+      }
+    }
+  }
+
+  @include e(title) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: $dialog-title-font-size;
+    color: $dialog-title-color;
+    line-height: $dialog-title-line-height;
+    font-weight: $dialog-title-font-weight;
+
+    &+.wd-dialog__content {
+      margin-top: $dialog-body-element-spacing;
+    }
+  }
+
+  @include e(body) {
+    padding: $dialog-body-padding;
+
+    @include when(prompt) {
+      .wd-dialog__content {
+        padding-top: $dialog-content-input-padding-top;
+      }
+    }
+  }
+
+  @include e(content) {
+    max-height: $dialog-content-max-height;
+    text-align: center;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: $dialog-scrollbar-width;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      width: $dialog-scrollbar-width;
+      background: $dialog-scrollbar-color;
+      border-radius: calc($dialog-scrollbar-width / 2);
+    }
+  }
+
+  @include e(content-text) {
+    color: $dialog-content-color;
+    font-size: $dialog-content-font-size;
+    line-height: $dialog-content-line-height;
+  }
+
+  @include e(input) {
+    background: $dialog-content-input-bg;
+  }
+
+  @include e(input-error) {
+    color: $dialog-content-input-error-color;
+    font-size: $dialog-content-input-font-size;
+    line-height: $dialog-content-input-line-height;
+    padding-top: $dialog-content-input-padding-top;
+    text-align: left;
+  }
+
+  @include e(actions) {
+    padding: $dialog-actions-padding;
+
+    :deep() {
+      .wd-dialog__actions-btn {
+        &:not(:last-child) {
+          margin-right: $dialog-actions-spacing;
+        }
+      }
+
+      .wd-dialog__actions-btn--confirm {
+        font-weight: $dialog-actions-confirm-font-weight;
+      }
+    }
+
+    @include m(vertical) {
+      flex-direction: column;
+      padding: $dialog-actions-padding-vertical;
+
+      :deep() {
+        .wd-dialog__actions-btn {
+          &:not(:last-child) {
+            margin-right: 0;
+            margin-bottom: $dialog-actions-spacing-vertical;
+          }
+        }
+      }
+    }
+
+    @include when(text) {
+      padding: $padding-super-loose 0 0;
+
+      :deep() {
+        .wd-dialog__actions-btn {
+          margin: 0;
+          border-radius: 0;
+          padding: $dialog-action-text-button-padding;
+          border-top: $dialog-action-text-border solid $dialog-action-text-border-color;
+
+          &:not(:last-child) {
+            border-right: $dialog-action-text-border solid $dialog-action-text-border-color;
+          }
+        }
+      }
+
+      // text 风格垂直布局时去除右边框
+      &.wd-dialog__actions--vertical {
+        :deep() {
+          .wd-dialog__actions-btn {
+            &:not(:last-child) {
+              border-right: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include e(flex) {
+    display: flex;
+  }
+
+  @include e(block) {
+    display: block;
+  }
+
+  @include e(icon) {
+    font-size: $dialog-icon-size;
+    line-height: $dialog-icon-size;
+    margin: 0 auto;
+    margin-bottom: $dialog-icon-margin-bottom;
+    color: $dialog-primary-color;
+
+    @include when(success) {
+      color: $dialog-success-color;
+    }
+
+    @include when(info) {
+      color: $dialog-primary-color;
+    }
+
+    @include when(warning) {
+      color: $dialog-warning-color;
+    }
+
+    @include when(danger) {
+      color: $dialog-error-color;
+    }
+  }
+
+  @include e(close) {
+    position: absolute;
+    top: $dialog-close-icon-top;
+    right: $dialog-close-icon-right;
+    font-size: $dialog-close-icon-size;
+    color: $dialog-close-icon-color;
+  }
+
+}