@veltra/desktop 1.7.5 → 1.7.7

package/src/components/date-range-picker/__test__/date-range-picker.test.ts

@@ -0,0 +1,278 @@
+import { date } from '@cat-kit/core'
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UDateRangePicker from '../date-range-picker.vue'
+
+function mountDateRangePicker(
+  props: Record<string, unknown> = {},
+  emits: Record<string, Function> = {}
+) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue)
+  const app = createApp({
+    render() {
+      return h(UDateRangePicker, {
+        ...props,
+        modelValue: model.value,
+        'onUpdate:modelValue': (value: unknown) => {
+          model.value = value
+          emits['update:modelValue']?.(value)
+        },
+        onChange: (dates?: [Date, Date]) => {
+          emits.change?.(dates)
+        }
+      })
+    }
+  })
+
+  app.component('Transition', (_, { slots }) => slots.default?.())
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    app,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('UDateRangePicker', () => {
+  it('defaults dataType to string and emits change with native Date tuple', async () => {
+    let changedDates: [Date, Date] | undefined
+    let updatedVal: unknown
+
+    const { host, unmount } = mountDateRangePicker(
+      {},
+      {
+        'update:modelValue': (val: unknown) => {
+          updatedVal = val
+        },
+        change: (d?: [Date, Date]) => {
+          changedDates = d
+        }
+      }
+    )
+
+    try {
+      const inputEl = host.querySelector('input')
+      expect(inputEl).not.toBeNull()
+      inputEl?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await nextTick()
+      await nextTick()
+
+      const cells = document.querySelectorAll<HTMLElement>('.u-date-panel__cell:not(.is-disabled)')
+      expect(cells.length).toBeGreaterThanOrEqual(20)
+
+      cells[10]!.click()
+      await nextTick()
+      cells[15]!.click()
+      await nextTick()
+
+      expect(Array.isArray(updatedVal)).toBe(true)
+      const range = updatedVal as string[]
+      expect(range.length).toBe(2)
+      expect(typeof range[0]).toBe('string')
+      expect(typeof range[1]).toBe('string')
+      expect(range[0]).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+      expect(range[1]).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+
+      expect(Array.isArray(changedDates)).toBe(true)
+      expect(changedDates![0] instanceof Date).toBe(true)
+      expect(changedDates![1] instanceof Date).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('supports dataType="date" and emits native Date tuple for modelValue and change', async () => {
+    let changedDates: [Date, Date] | undefined
+    let updatedVal: unknown
+
+    const { host, unmount } = mountDateRangePicker(
+      { dataType: 'date', valueFormat: 'yyyyMMdd' },
+      {
+        'update:modelValue': (val: unknown) => {
+          updatedVal = val
+        },
+        change: (d?: [Date, Date]) => {
+          changedDates = d
+        }
+      }
+    )
+
+    try {
+      const inputEl = host.querySelector('input')
+      inputEl?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await nextTick()
+      await nextTick()
+
+      const cells = document.querySelectorAll<HTMLElement>('.u-date-panel__cell:not(.is-disabled)')
+      cells[10]!.click()
+      await nextTick()
+      cells[15]!.click()
+      await nextTick()
+
+      expect(Array.isArray(updatedVal)).toBe(true)
+      const range = updatedVal as unknown[]
+      expect(range[0] instanceof Date).toBe(true)
+      expect(range[1] instanceof Date).toBe(true)
+
+      expect(Array.isArray(changedDates)).toBe(true)
+      expect(changedDates![0] instanceof Date).toBe(true)
+      expect(changedDates![1] instanceof Date).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('supports dataType="timestamp" and emits timestamp tuple for modelValue and native Date tuple for change', async () => {
+    let changedDates: [Date, Date] | undefined
+    let updatedVal: unknown
+
+    const { host, unmount } = mountDateRangePicker(
+      { dataType: 'timestamp', valueFormat: 'yyyyMMdd' },
+      {
+        'update:modelValue': (val: unknown) => {
+          updatedVal = val
+        },
+        change: (d?: [Date, Date]) => {
+          changedDates = d
+        }
+      }
+    )
+
+    try {
+      const inputEl = host.querySelector('input')
+      inputEl?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await nextTick()
+      await nextTick()
+
+      const cells = document.querySelectorAll<HTMLElement>('.u-date-panel__cell:not(.is-disabled)')
+      cells[10]!.click()
+      await nextTick()
+      cells[15]!.click()
+      await nextTick()
+
+      expect(Array.isArray(updatedVal)).toBe(true)
+      const range = updatedVal as number[]
+      expect(typeof range[0]).toBe('number')
+      expect(typeof range[1]).toBe('number')
+      expect(range[0]).toBeGreaterThan(0)
+      expect(range[1]).toBeGreaterThan(0)
+
+      expect(Array.isArray(changedDates)).toBe(true)
+      expect(changedDates![0] instanceof Date).toBe(true)
+      expect(changedDates![1] instanceof Date).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('applies valueFormat when dataType="string"', async () => {
+    let changedDates: [Date, Date] | undefined
+    let updatedVal: unknown
+
+    const { host, unmount } = mountDateRangePicker(
+      { dataType: 'string', valueFormat: 'yyyy/MM/dd' },
+      {
+        'update:modelValue': (val: unknown) => {
+          updatedVal = val
+        },
+        change: (d?: [Date, Date]) => {
+          changedDates = d
+        }
+      }
+    )
+
+    try {
+      const inputEl = host.querySelector('input')
+      inputEl?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await nextTick()
+      await nextTick()
+
+      const cells = document.querySelectorAll<HTMLElement>('.u-date-panel__cell:not(.is-disabled)')
+      cells[10]!.click()
+      await nextTick()
+      cells[15]!.click()
+      await nextTick()
+
+      expect(Array.isArray(updatedVal)).toBe(true)
+      const range = updatedVal as string[]
+      expect(range[0]).toMatch(/^\d{4}\/\d{2}\/\d{2}$/)
+      expect(range[1]).toMatch(/^\d{4}\/\d{2}\/\d{2}$/)
+      expect(changedDates![0] instanceof Date).toBe(true)
+      expect(changedDates![1] instanceof Date).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('emits undefined for modelValue and change when cleared', async () => {
+    let changedDates: [Date, Date] | undefined = [new Date(), new Date()]
+    let updatedVal: unknown = ['2024-05-01', '2024-05-10']
+
+    const { host, unmount } = mountDateRangePicker(
+      { modelValue: ['2024-05-01', '2024-05-10'], clearable: true },
+      {
+        'update:modelValue': (val: unknown) => {
+          updatedVal = val
+        },
+        change: (d?: [Date, Date]) => {
+          changedDates = d
+        }
+      }
+    )
+
+    try {
+      const dropdown = host.firstElementChild as HTMLElement
+      dropdown.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
+      await new Promise((r) => setTimeout(r, 50))
+
+      const clearBtn = host.querySelector('.u-date-range-picker__clear') as HTMLElement
+      expect(clearBtn).not.toBeNull()
+      clearBtn.click()
+      await nextTick()
+
+      expect(updatedVal).toBeUndefined()
+      expect(changedDates).toBeUndefined()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('correctly parses modelValue of Date tuple, timestamp tuple, and custom formatted strings', async () => {
+    const dates: [Date, Date] = [new Date(2024, 4, 15), new Date(2024, 4, 20)]
+    const d1 = mountDateRangePicker({ modelValue: dates })
+    await nextTick()
+    const inputs1 = d1.host.querySelectorAll('input')
+    expect(inputs1[0]?.value).toBe('2024-05-15')
+    expect(inputs1[1]?.value).toBe('2024-05-20')
+    d1.unmount()
+
+    const ts1 = date('2024-06-20').timestamp
+    const ts2 = date('2024-06-25').timestamp
+    const d2 = mountDateRangePicker({ modelValue: [ts1, ts2] })
+    await nextTick()
+    const inputs2 = d2.host.querySelectorAll('input')
+    expect(inputs2[0]?.value).toBe('2024-06-20')
+    expect(inputs2[1]?.value).toBe('2024-06-25')
+    d2.unmount()
+
+    const d3 = mountDateRangePicker({
+      modelValue: ['20240725', '20240730'],
+      valueFormat: 'yyyyMMdd'
+    })
+    await nextTick()
+    const inputs3 = d3.host.querySelectorAll('input')
+    expect(inputs3[0]?.value).toBe('2024-07-25')
+    expect(inputs3[1]?.value).toBe('2024-07-30')
+    d3.unmount()
+  })
+})

package/src/components/date-range-picker/date-range-picker.vue

@@ -31,7 +31,7 @@
 
       <Transition name="zoom-in" mode="out-in">
         <UIcon
-          v-if="clearable && modelValue && hovered && !disabled"
+          v-if="clearable && (modelValue?.length || currentRangeDate) && hovered && !disabled"
           :class="[cls.e('icon'), cls.e('clear')]"
           title="清除"
           @click.stop="handleClear"
@@ -62,14 +62,19 @@
 </template>
 
 <script lang="ts" setup>
-import { date, type Dater } from '@cat-kit/core'
+import { date, Dater } from '@cat-kit/core'
 import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { Calendar, Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
 
-import type { DateRangePickerEmits, DateRangePickerProps, DropdownExposed } from '../../types'
+import type {
+  DateRangePickerEmits,
+  DateRangePickerProps,
+  DateRangeValue,
+  DropdownExposed
+} from '../../types'
 import { UDatePanel } from '../date-panel'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
@@ -79,6 +84,7 @@ defineOptions({ name: 'UDateRangePicker', inheritAttrs: false })
 const props = withDefaults(defineProps<DateRangePickerProps>(), {
   placeholder: () => ['起始日期', '结束日期'],
   type: 'date',
+  dataType: 'string',
   disabled: undefined,
   readonly: undefined,
   clearable: true
@@ -113,14 +119,6 @@ const { userAction, isUserActive } = useUserAction()
 
 const currentRangeDate = shallowRef<[Dater, Dater]>()
 
-const displayedOfStart = computed(() => {
-  return props.modelValue?.[0]
-})
-
-const displayedOfEnd = computed(() => {
-  return props.modelValue?.[1]
-})
-
 const formatStr = computed(() => {
   const { format, type } = props
   if (format) return format
@@ -130,25 +128,70 @@ const formatStr = computed(() => {
   return 'yyyy-MM-dd'
 })
 
+const displayedOfStart = computed(() => {
+  return currentRangeDate.value?.[0]?.format(formatStr.value) ?? ''
+})
+
+const displayedOfEnd = computed(() => {
+  return currentRangeDate.value?.[1]?.format(formatStr.value) ?? ''
+})
+
+function parseDateValue(val?: string | number | Date): Dater | undefined {
+  if (val == null || val === '') return undefined
+  if (val instanceof Date || typeof val === 'number') {
+    const d = date(val)
+    return isNaN(d.timestamp) ? undefined : d
+  }
+  if (typeof val === 'string') {
+    if (props.dataType === 'string' && props.valueFormat) {
+      const parsed = Dater.parse(val, props.valueFormat)
+      if (!isNaN(parsed.timestamp)) return parsed
+    }
+    const fallback = date(val)
+    return isNaN(fallback.timestamp) ? undefined : fallback
+  }
+  return undefined
+}
+
 watch(
   () => props.modelValue,
   (val) => {
     if (isUserActive()) return
-    if (val?.length === 2) {
-      currentRangeDate.value = [date(val[0]), date(val[1])]
-    } else {
-      currentRangeDate.value = undefined
+    if (val && val.length === 2) {
+      const d1 = parseDateValue(val[0])
+      const d2 = parseDateValue(val[1])
+      if (d1 && d2) {
+        currentRangeDate.value = [d1, d2]
+        return
+      }
     }
+    currentRangeDate.value = undefined
   },
   { immediate: true }
 )
 
-const commitSelectedRange = userAction((rangeDate: [Dater, Dater] | undefined) => {
+function formatDateValue(d: Dater) {
+  if (props.dataType === 'date') {
+    return d.raw
+  }
+  if (props.dataType === 'timestamp') {
+    return d.timestamp
+  }
+  return d.format(props.valueFormat ?? formatStr.value)
+}
+
+function formatModelValue(range: [Dater, Dater]): DateRangeValue {
+  return [formatDateValue(range[0]), formatDateValue(range[1])] as DateRangeValue
+}
+
+const commitSelectedRange = userAction((rangeDate: [Dater, Dater]) => {
   currentRangeDate.value = rangeDate
-  emit('update:modelValue', rangeDate?.map((d) => d.format(formatStr.value)) as [string, string])
+  emit('update:modelValue', formatModelValue(rangeDate))
+  emit('change', [rangeDate[0].raw, rangeDate[1].raw])
 })
 
 async function handleSelect(rangeDate: [Dater, Dater] | undefined) {
+  if (!rangeDate) return
   await commitSelectedRange(rangeDate)
   dropdownRef.value?.close()
 }
@@ -158,5 +201,6 @@ const hovered = shallowRef(false)
 function handleClear() {
   currentRangeDate.value = undefined
   emit('update:modelValue', undefined)
+  emit('change', undefined)
 }
 </script>

package/src/types/code-editor.ts

@@ -14,7 +14,7 @@ export type CodeEditorLang =
 export interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
   modelValue?: string
   /**
-   * 可选语言列表。长度大于 1 时在编辑器右上角显示内置语言选择器；
+   * 可选语言列表。长度大于 1 时在顶部工具栏显示内置语言选择器；
    * 仅一种语言时显示语言名称标签
    */
   langs?: CodeEditorLang[]
@@ -26,6 +26,8 @@ export interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
   suffix?: string
   /** 是否使用暗色主题 */
   dark?: boolean
+  /** 是否显示放大按钮，默认 true；false 时不渲染放大按钮 */
+  zoomable?: boolean
   /**
    * 默认显示的行数，用于撑起编辑器最小高度，超出后滚动
    * @default 8

package/src/types/date-range-picker.ts

@@ -1,9 +1,15 @@
 import type { Dater } from '@cat-kit/core'
 import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
 
+/** 绑定值类型 */
+export type DateRangePickerDataType = 'date' | 'timestamp' | 'string'
+
+/** 日期范围绑定值 */
+export type DateRangeValue = [string, string] | [number, number] | [Date, Date]
+
 /** date-range-picker组件属性 */
 export interface DateRangePickerProps extends FormComponentProps {
-  modelValue?: [string, string]
+  modelValue?: DateRangeValue
   /** 占位 */
   placeholder?: [string, string]
   /** 日期类型 */
@@ -12,6 +18,11 @@ export interface DateRangePickerProps extends FormComponentProps {
   format?: string
   /** 日期值格式化, 当没有指定时默认使用format属性，仅当值和显示的内容不一致时才需要使用到该属性 */
   valueFormat?: string
+  /**
+   * 绑定值的类型，默认为字符串。
+   * 当 dataType 没有指定为字符串时，valueFormat 属性不生效
+   */
+  dataType?: DateRangePickerDataType
   /** 最小可选日期 */
   disabledDate?: (date: Dater, raw: Date) => boolean
   /** 是否显示清除按钮 */
@@ -20,7 +31,8 @@ export interface DateRangePickerProps extends FormComponentProps {
 
 /** date-range-picker组件定义的事件 */
 export interface DateRangePickerEmits {
-  (e: 'update:modelValue', value?: [string, string]): void
+  (e: 'update:modelValue', value?: DateRangeValue): void
+  (e: 'change', dates?: [Date, Date]): void
 }
 
 /** date-range-picker组件暴露的属性和方法(组件内部使用) */