@veltra/desktop 1.0.0

package/src/components/date-panel/panels/day.vue

@@ -0,0 +1,94 @@
+<template>
+  <ul :class="cls.e('week')">
+    <li :class="cls.e('week-day')" v-for="weekDay of weekDays">
+      {{ weekDay }}
+    </li>
+  </ul>
+
+  <ul :class="cls.e('days')">
+    <li
+      v-for="day of days"
+      :title="day.isToday ? '今天' : ''"
+      :class="getDayCls(day)"
+      :key="day.date.timestamp"
+      @click="!day.disabled && handleDateSelect(day.date)"
+      @mouseenter="!day.disabled && handleDateRangeHover(day.date)"
+    >
+      <span :class="cls.e('cell-value')">
+        {{ day.date.day }}
+      </span>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import type { Dater } from '@cat-kit/core'
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+import { inject } from 'vue'
+
+import type { CalendarDay } from '../../../types'
+import { getMonthDays, weekDays } from '../../calendar/utils'
+import { DatePanelDIKey } from '../di'
+
+defineOptions({
+  name: 'DatePanelDay',
+  inheritAttrs: false
+})
+
+const { panelDate, rangeDate, panelProps, cls, handleDateSelect, handleDateRangeHover } =
+  inject(DatePanelDIKey)!
+
+const days = computed<CalendarDay[]>(() => {
+  return getMonthDays(panelDate.value.timestamp, panelProps.disabledDate)
+})
+
+function getRangeCls(day: CalendarDay) {
+  return [
+    bem.is('in-range', didInRange(day.date)),
+    bem.is('range-start', isRangeStart(day.date)),
+    bem.is('range-end', isRangeEnd(day.date))
+  ]
+}
+
+function getSingleCls(day: CalendarDay) {
+  return [bem.is('selected', didSelected(day.date))]
+}
+function getDayCls(day: CalendarDay) {
+  const ret = [
+    cls.e('cell'),
+    bem.is(day.type),
+    bem.is('today', day.isToday === true),
+    bem.is('disabled', day.disabled === true)
+  ]
+  if (panelProps.range) {
+    return [...ret, ...getRangeCls(day)]
+  }
+  return [...ret, ...getSingleCls(day)]
+}
+
+const fmtStr = 'yyyyMMdd'
+
+function didSelected(date: Dater) {
+  if (!panelProps.date) return false
+  return date.format(fmtStr) === panelProps.date.format(fmtStr)
+}
+
+function didInRange(date: Dater) {
+  if (!rangeDate.value) return false
+  const [start, end] = rangeDate.value
+  return date.timestamp >= start.timestamp && date.timestamp <= end.timestamp
+}
+
+function isRangeStart(date: Dater) {
+  if (!rangeDate.value) return false
+  const [start] = rangeDate.value
+  return date.format(fmtStr) === start.format(fmtStr)
+}
+
+function isRangeEnd(date: Dater) {
+  if (!rangeDate.value) return false
+  const [, end] = rangeDate.value
+  return date.format(fmtStr) === end.format(fmtStr)
+}
+</script>

package/src/components/date-panel/panels/month.vue

@@ -0,0 +1,80 @@
+<template>
+  <ul :class="cls.e('months')">
+    <li
+      v-for="month of months"
+      :key="month.key"
+      :class="getMonthCls(month)"
+      @click="!month.disabled && handleDateSelect(month.date)"
+      @mouseenter="!month.disabled && handleDateRangeHover(month.date)"
+    >
+      <span :class="cls.e('cell-value')">{{ month.month }}月</span>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import type { Dater } from '@cat-kit/core'
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+import { inject } from 'vue'
+
+import type { CalendarMonth } from '../../../types'
+import { getYearMonths } from '../../calendar/utils'
+import { DatePanelDIKey } from '../di'
+
+defineOptions({
+  name: 'DatePanelMonth'
+})
+
+const { cls, panelDate, rangeDate, panelProps, handleDateSelect, handleDateRangeHover } =
+  inject(DatePanelDIKey)!
+
+const months = computed(() => {
+  return getYearMonths(panelDate.value.timestamp, panelProps.disabledDate)
+})
+
+function getRangeCls(month: CalendarMonth) {
+  return [
+    bem.is('in-range', didInRange(month.date)),
+    bem.is('range-start', isRangeStart(month.date)),
+    bem.is('range-end', isRangeEnd(month.date))
+  ]
+}
+
+function getSingleCls(month: CalendarMonth) {
+  return [bem.is('selected', didSelected(month.date))]
+}
+
+function getMonthCls(month: CalendarMonth) {
+  const ret = [cls.e('cell'), bem.is('disabled', month.disabled === true)]
+  if (panelProps.range) {
+    return [...ret, ...getRangeCls(month)]
+  }
+  return [...ret, ...getSingleCls(month)]
+}
+
+const fmtStr = 'yyyyMM'
+
+function didSelected(date: Dater) {
+  if (!panelProps.date) return false
+  return date.format(fmtStr) === panelProps.date.format(fmtStr)
+}
+
+function didInRange(date: Dater) {
+  if (!rangeDate.value) return false
+  const [start, end] = rangeDate.value
+  return date.timestamp >= start.timestamp && date.timestamp <= end.timestamp
+}
+
+function isRangeStart(date: Dater) {
+  if (!rangeDate.value) return false
+  const [start] = rangeDate.value
+  return date.format(fmtStr) === start.format(fmtStr)
+}
+
+function isRangeEnd(date: Dater) {
+  if (!rangeDate.value) return false
+  const [, end] = rangeDate.value
+  return date.format(fmtStr) === end.format(fmtStr)
+}
+</script>

package/src/components/date-panel/panels/year.vue

@@ -0,0 +1,78 @@
+<template>
+  <ul :class="cls.e('years')">
+    <li
+      v-for="year of years"
+      :key="year.year"
+      :class="getYearCls(year)"
+      @click="!year.disabled && handleDateSelect(year.date)"
+      @mouseenter="!year.disabled && handleDateRangeHover(year.date)"
+    >
+      <span :class="cls.e('cell-value')">{{ year.year }}</span>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import type { Dater } from '@cat-kit/core'
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+import { inject } from 'vue'
+
+import type { CalendarYear } from '../../../types'
+import { getTenYears } from '../../calendar/utils'
+import { DatePanelDIKey } from '../di'
+
+defineOptions({
+  name: 'DatePanelYear'
+})
+
+const { panelDate, rangeDate, panelProps, cls, handleDateSelect, handleDateRangeHover } =
+  inject(DatePanelDIKey)!
+
+const years = computed(() => {
+  return getTenYears(panelDate.value.timestamp, panelProps.disabledDate)
+})
+
+function getRangeCls(year: CalendarYear) {
+  return [
+    bem.is('range', didInRange(year.date)),
+    bem.is('range-start', isRangeStart(year.date)),
+    bem.is('range-end', isRangeEnd(year.date))
+  ]
+}
+
+function getSingleCls(year: CalendarYear) {
+  return [bem.is('selected', didSelected(year.date))]
+}
+
+function getYearCls(year: CalendarYear) {
+  const ret = [cls.e('cell'), bem.is('disabled', year.disabled === true)]
+  if (panelProps.range) {
+    return [...ret, ...getRangeCls(year)]
+  }
+  return [...ret, ...getSingleCls(year)]
+}
+
+function didSelected(date: Dater) {
+  if (!panelProps.date) return false
+  return date.year === panelProps.date.year
+}
+
+function didInRange(date: Dater) {
+  if (!rangeDate.value) return false
+  const [start, end] = rangeDate.value
+  return date.timestamp >= start.timestamp && date.timestamp <= end.timestamp
+}
+
+function isRangeStart(date: Dater) {
+  if (!rangeDate.value) return false
+  const [start] = rangeDate.value
+  return date.year === start.year
+}
+
+function isRangeEnd(date: Dater) {
+  if (!rangeDate.value) return false
+  const [, end] = rangeDate.value
+  return date.year === end.year
+}
+</script>

package/src/components/date-panel/style.scss

@@ -0,0 +1,144 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: date-panel;
+
+@include m.b($root-name) {
+  @include m.size using ($size) {
+    padding: fn.use-var(gap, default);
+
+    font-size: fn.use-var(font-size-main, $size);
+
+    @include m.bem($root-name, cell-value) {
+      width: fn.use-var(form-component-height, $size);
+      height: fn.use-var(form-component-height, $size);
+      line-height: fn.use-var(form-component-height, $size);
+    }
+
+    @include m.bem($root-name, (years, months)) {
+      @include m.bem($root-name, cell-value) {
+        width: calc(fn.use-var(form-component-height, $size) * 2);
+      }
+    }
+
+    @include m.e($root-name, header) {
+      font-size: fn.use-var(font-size-title, $size);
+    }
+
+    @include m.bem($root-name, cell) {
+      @include m.is(range-start) {
+        border-radius: fn.use-var(form-component-height, $size) 0 0
+          fn.use-var(form-component-height, $size);
+      }
+
+      @include m.is(range-end) {
+        border-radius: 0 fn.use-var(form-component-height, $size)
+          fn.use-var(form-component-height, $size) 0;
+      }
+    }
+  }
+
+  // 通用
+  @include m.e(days, months, years) {
+    row-gap: 4px;
+  }
+
+  @include m.e(months, years) {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+
+    @include m.bem($root-name, cell) {
+      width: 70px;
+      text-align: center;
+    }
+  }
+
+  @include m.e(week, days) {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  @include m.e(cell) {
+    padding: 2px;
+    cursor: pointer;
+
+    &:hover {
+      @include m.bem($root-name, cell-value) {
+        background-color: fn.use-var(bg-color, hover);
+      }
+    }
+
+    @include m.is(in-range) {
+      background-color: fn.use-var(color, primary, light-9);
+    }
+
+    @include m.is(disabled) {
+      cursor: not-allowed;
+      background-color: fn.use-var(color, disabled);
+
+      @include m.bem($root-name, cell-value) {
+        background-color: fn.use-var(color, disabled);
+        color: fn.use-var(text-color, disabled);
+      }
+    }
+
+    // 日期的部分
+    @include m.is(pre, next) {
+      color: fn.use-var(text-color, disabled);
+    }
+
+    @include m.is(selected, range-start, range-end) {
+      @include m.bem($root-name, cell-value) {
+        background-color: fn.use-var(color, primary);
+        color: fn.use-var(text-color, white);
+      }
+    }
+
+    @include m.is(today) {
+      @include m.bem($root-name, cell-value) {
+        border: 1px solid fn.use-var(color, primary, light-3);
+      }
+    }
+  }
+
+  @include m.e(cell-value) {
+    display: inline-block;
+    text-align: center;
+    transition: background-color 0.15s;
+    border-radius: 99px;
+  }
+
+  @include m.e(week) {
+    padding: 3px 0;
+  }
+
+  @include m.e(week-day) {
+    line-height: 1em;
+    text-align: center;
+  }
+
+  @include m.e(header) {
+    line-height: 1em;
+    padding: 0 8px;
+    height: 40px;
+    @include m.flex($justify: space-between);
+
+    @include m.bem(icon) {
+      cursor: pointer;
+      font-size: 18px;
+      &:hover {
+        color: fn.use-var(color, primary);
+      }
+    }
+  }
+
+  @include m.e(header-year, header-month) {
+    cursor: pointer;
+  }
+  @include m.e(header-year) {
+    margin-right: 6px;
+  }
+}

package/src/components/date-panel/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/date-panel/use-date-select.ts

@@ -0,0 +1,116 @@
+import type { Dater } from '@cat-kit/core'
+import { type Ref, computed, type ComputedRef, shallowRef } from 'vue'
+
+import type { DatePanelProps, PanelType, DatePanelEmits } from '../../types'
+
+interface DateSelectOptions {
+  props: DatePanelProps
+  emit: DatePanelEmits
+  panelType: Ref<PanelType>
+  updatePanelDate: (date: Dater) => void
+}
+
+interface UseDateSelectReturned {
+  handleDateSelect: (date: Dater) => void
+  handleDateRangeHover: (date: Dater) => void
+  resetRangeDateTemp: () => void
+  rangeDate: ComputedRef<[Dater, Dater] | undefined>
+}
+
+export function useDateSelect(options: DateSelectOptions): UseDateSelectReturned {
+  const { props, panelType, emit, updatePanelDate } = options
+
+  /** 面板顺序 */
+  const panelSequence: PanelType[] = ['year', 'month', 'day']
+
+  const typeMapToPanelType = { year: 'year', month: 'month', date: 'day' }
+
+  /**
+   * 临时日期范围, 在点击第一次范围日期时使用
+   */
+  const rangeDateTemp = shallowRef<[Dater, Dater]>()
+  let firstSelectedRangeDate: Dater | undefined = undefined
+
+  const rangeDate = computed(() => {
+    return rangeDateTemp.value || props.rangeDate
+  })
+
+  function resetRangeDateTemp() {
+    rangeDateTemp.value = undefined
+    firstSelectedRangeDate = undefined
+  }
+
+  /** 面板类型是否匹配日期类型 */
+  const panelTypeMatchDateType = computed(() => {
+    const { type } = props
+    return typeMapToPanelType[type!] === panelType.value
+  })
+
+  /** 切换到下一个面板 */
+  function switchNextPanel() {
+    const index = panelSequence.indexOf(panelType.value)
+    if (index === -1) return
+    panelType.value = panelSequence[index + 1]!
+  }
+
+  /** 选择日期范围 */
+  function handleDateRangeSelect(date: Dater) {
+    if (panelTypeMatchDateType.value) {
+      // 第一次选择
+      if (!firstSelectedRangeDate) {
+        firstSelectedRangeDate = date
+        rangeDateTemp.value = [date, date]
+      }
+      // 第二次选择范围日期
+      else {
+        if (date.timestamp < firstSelectedRangeDate.timestamp) {
+          rangeDateTemp.value = [date, firstSelectedRangeDate]
+        } else {
+          rangeDateTemp.value = [firstSelectedRangeDate, date]
+        }
+        emit('select:range-date', rangeDateTemp.value)
+
+        // 选择完成, 清空临时日期范围
+        resetRangeDateTemp()
+      }
+    } else {
+      updatePanelDate(date)
+      switchNextPanel()
+    }
+  }
+
+  /** 范围日期悬停 */
+  function handleDateRangeHover(date: Dater) {
+    if (!panelTypeMatchDateType.value || !firstSelectedRangeDate) {
+      return
+    }
+    if (date.timestamp < firstSelectedRangeDate.timestamp) {
+      rangeDateTemp.value = [date, firstSelectedRangeDate]
+    } else {
+      rangeDateTemp.value = [firstSelectedRangeDate, date]
+    }
+  }
+
+  function handleDateSingleSelect(date: Dater) {
+    // 类型匹配则触发数据更新
+
+    if (panelTypeMatchDateType.value) {
+      emit('select:date', date)
+    } else {
+      updatePanelDate(date)
+      switchNextPanel()
+    }
+  }
+
+  /** 选择日期 */
+  function handleDateSelect(date: Dater) {
+    const { range } = props
+    if (range) {
+      handleDateRangeSelect(date)
+    } else {
+      handleDateSingleSelect(date)
+    }
+  }
+
+  return { handleDateSelect, handleDateRangeHover, resetRangeDateTemp, rangeDate }
+}

package/src/components/date-panel/use-panel-date.ts

@@ -0,0 +1,68 @@
+import { date, type Dater } from '@cat-kit/core'
+import { computed, type ComputedRef, shallowRef } from 'vue'
+
+import type { DatePanelProps } from '../../types'
+
+interface PanelDateOptions {
+  props: DatePanelProps
+}
+
+interface UsePanelDateReturned {
+  panelDate: ComputedRef<Dater>
+  updatePanelDate: (date: Dater) => void
+  toPrevYear: () => void
+  toNextYear: () => void
+  toPrevMonth: () => void
+  toNextMonth: () => void
+  toPrevTenYears: () => void
+  toNextTenYears: () => void
+}
+
+export function usePanelDate(options: PanelDateOptions): UsePanelDateReturned {
+  const { props } = options
+
+  /** 当前面板日期 */
+  const panelDate = shallowRef<Dater>(
+    date((props.date || props.rangeDate?.[0])?.timestamp ?? new Date())
+  )
+
+  function updatePanelDate(date: Dater) {
+    panelDate.value = date
+  }
+
+  function toPrevYear() {
+    updatePanelDate(panelDate.value.calc(-1, 'years'))
+  }
+
+  function toNextYear() {
+    updatePanelDate(panelDate.value.calc(1, 'years'))
+  }
+
+  function toPrevMonth() {
+    updatePanelDate(panelDate.value.calc(-1, 'months'))
+  }
+
+  function toNextMonth() {
+    updatePanelDate(panelDate.value.calc(1, 'months'))
+  }
+
+  function toPrevTenYears() {
+    updatePanelDate(panelDate.value.calc(-10, 'years'))
+  }
+
+  function toNextTenYears() {
+    updatePanelDate(panelDate.value.calc(10, 'years'))
+  }
+
+  return {
+    panelDate: computed(() => panelDate.value),
+    updatePanelDate,
+
+    toPrevYear,
+    toNextYear,
+    toPrevMonth,
+    toNextMonth,
+    toPrevTenYears,
+    toNextTenYears
+  }
+}

package/src/components/date-panel/use-panel.ts

@@ -0,0 +1,71 @@
+import type { Dater } from '@cat-kit/core'
+import { bem, type BEM } from '@veltra/utils'
+import { provide, shallowRef, watch, type ShallowRef, type ComputedRef } from 'vue'
+
+import type { DatePanelEmits, DatePanelProps, PanelType } from '../../types'
+import { DatePanelDIKey } from './di'
+import { useDateSelect } from './use-date-select'
+import { usePanelDate } from './use-panel-date'
+
+interface PanelOptions {
+  props: DatePanelProps
+  emit: DatePanelEmits
+}
+
+interface UsePanelReturned {
+  cls: BEM<'date-panel', 'u-'>
+  panelType: ShallowRef<PanelType>
+  panelDate: ComputedRef<Dater>
+}
+
+export function usePanel(options: PanelOptions): UsePanelReturned {
+  const { props, emit } = options
+
+  /** 组件类 */
+  const cls = bem('date-panel')
+
+  /** 当前面板类型 */
+  const panelType = shallowRef<PanelType>('day')
+
+  watch(
+    () => props.type,
+    (type) => {
+      if (type === 'date') {
+        panelType.value = 'day'
+      } else if (type === 'month') {
+        panelType.value = 'month'
+      } else if (type === 'year') {
+        panelType.value = 'year'
+      }
+    },
+    { immediate: true }
+  )
+
+  const { panelDate, updatePanelDate, ...panelDateRest } = usePanelDate({ props })
+
+  const { handleDateSelect, handleDateRangeHover, rangeDate } = useDateSelect({
+    props,
+    emit,
+    panelType,
+    updatePanelDate
+  })
+
+  provide(DatePanelDIKey, {
+    cls,
+
+    panelProps: props,
+    panelEmit: emit,
+
+    panelType,
+    panelDate,
+
+    rangeDate,
+
+    ...panelDateRest,
+
+    handleDateSelect,
+    handleDateRangeHover
+  })
+
+  return { cls, panelType, panelDate }
+}