@veltra/desktop 1.7.4 → 1.7.6

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

@@ -0,0 +1,235 @@
+import { date } from '@cat-kit/core'
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UDatePicker from '../date-picker.vue'
+
+function mountDatePicker(
+  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(UDatePicker, {
+        ...props,
+        modelValue: model.value,
+        'onUpdate:modelValue': (value: unknown) => {
+          model.value = value
+          emits['update:modelValue']?.(value)
+        },
+        onChange: (date?: Date) => {
+          emits.change?.(date)
+        }
+      })
+    }
+  })
+
+  app.component('Transition', (_, { slots }) => slots.default?.())
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    app,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('UDatePicker', () => {
+  it('defaults dataType to string and emits change with native Date', async () => {
+    let changedDate: Date | undefined
+    let updatedVal: unknown
+
+    const { host, unmount } = mountDatePicker(
+      {},
+      {
+        'update:modelValue': (val: unknown) => {
+          updatedVal = val
+        },
+        change: (d?: Date) => {
+          changedDate = 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 cell = document.querySelector('.u-date-panel__cell.is-current') as HTMLElement
+      expect(cell).not.toBeNull()
+      cell.click()
+      await nextTick()
+
+      expect(typeof updatedVal).toBe('string')
+      expect(updatedVal).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+      expect(changedDate instanceof Date).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('supports dataType="date" and emits native Date for modelValue and change', async () => {
+    let changedDate: Date | undefined
+    let updatedVal: unknown
+
+    const { host, unmount } = mountDatePicker(
+      { dataType: 'date', valueFormat: 'yyyyMMdd' },
+      {
+        'update:modelValue': (val: unknown) => {
+          updatedVal = val
+        },
+        change: (d?: Date) => {
+          changedDate = d
+        }
+      }
+    )
+
+    try {
+      const inputEl = host.querySelector('input')
+      inputEl?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await nextTick()
+      await nextTick()
+
+      const cell = document.querySelector('.u-date-panel__cell.is-current') as HTMLElement
+      cell.click()
+      await nextTick()
+
+      expect(updatedVal instanceof Date).toBe(true)
+      expect(changedDate instanceof Date).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('supports dataType="timestamp" and emits timestamp for modelValue and native Date for change', async () => {
+    let changedDate: Date | undefined
+    let updatedVal: unknown
+
+    const { host, unmount } = mountDatePicker(
+      { dataType: 'timestamp', valueFormat: 'yyyyMMdd' },
+      {
+        'update:modelValue': (val: unknown) => {
+          updatedVal = val
+        },
+        change: (d?: Date) => {
+          changedDate = d
+        }
+      }
+    )
+
+    try {
+      const inputEl = host.querySelector('input')
+      inputEl?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await nextTick()
+      await nextTick()
+
+      const cell = document.querySelector('.u-date-panel__cell.is-current') as HTMLElement
+      cell.click()
+      await nextTick()
+
+      expect(typeof updatedVal).toBe('number')
+      expect(updatedVal).toBeGreaterThan(0)
+      expect(changedDate instanceof Date).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('applies valueFormat when dataType="string"', async () => {
+    let changedDate: Date | undefined
+    let updatedVal: unknown
+
+    const { host, unmount } = mountDatePicker(
+      { dataType: 'string', valueFormat: 'yyyy/MM/dd' },
+      {
+        'update:modelValue': (val: unknown) => {
+          updatedVal = val
+        },
+        change: (d?: Date) => {
+          changedDate = d
+        }
+      }
+    )
+
+    try {
+      const inputEl = host.querySelector('input')
+      inputEl?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+      await nextTick()
+      await nextTick()
+
+      const cell = document.querySelector('.u-date-panel__cell.is-current') as HTMLElement
+      cell.click()
+      await nextTick()
+
+      expect(typeof updatedVal).toBe('string')
+      expect(updatedVal).toMatch(/^\d{4}\/\d{2}\/\d{2}$/)
+      expect(changedDate instanceof Date).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('emits undefined for modelValue and change when cleared', async () => {
+    let changedDate: Date | undefined = new Date()
+    let updatedVal: unknown = '2024-05-01'
+
+    const { host, unmount } = mountDatePicker(
+      { modelValue: '2024-05-01', clearable: true },
+      {
+        'update:modelValue': (val: unknown) => {
+          updatedVal = val
+        },
+        change: (d?: Date) => {
+          changedDate = d
+        }
+      }
+    )
+
+    try {
+      const inputWrapper = host.querySelector('.u-input') as HTMLElement
+      inputWrapper.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
+      await new Promise((r) => setTimeout(r, 50))
+
+      const clearBtn = host.querySelector('.u-input__clear') as HTMLElement
+      expect(clearBtn).not.toBeNull()
+      clearBtn.click()
+      await nextTick()
+
+      expect(updatedVal).toBeUndefined()
+      expect(changedDate).toBeUndefined()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('correctly parses modelValue of Date, timestamp, and custom formatted string', async () => {
+    const dateObj = new Date(2024, 4, 15)
+    const d1 = mountDatePicker({ modelValue: dateObj })
+    await nextTick()
+    expect(d1.host.querySelector('input')?.value).toBe('2024-05-15')
+    d1.unmount()
+
+    const ts = date('2024-06-20').timestamp
+    const d2 = mountDatePicker({ modelValue: ts })
+    await nextTick()
+    expect(d2.host.querySelector('input')?.value).toBe('2024-06-20')
+    d2.unmount()
+
+    const d3 = mountDatePicker({ modelValue: '20240725', valueFormat: 'yyyyMMdd' })
+    await nextTick()
+    expect(d3.host.querySelector('input')?.value).toBe('2024-07-25')
+    d3.unmount()
+  })
+})

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

@@ -36,7 +36,7 @@
 </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 } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
@@ -55,6 +55,7 @@ defineOptions({ name: 'UDatePicker', inheritAttrs: false })
 const props = withDefaults(defineProps<DatePickerProps>(), {
   placeholder: '选择日期',
   type: 'date',
+  dataType: 'string',
   disabled: undefined,
   readonly: undefined,
   clearable: true
@@ -91,11 +92,28 @@ const currentDate = shallowRef<Dater>()
 
 const { userAction, isUserActive } = useUserAction()
 
+function parseModelValue(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,
   (modelValue) => {
     if (isUserActive()) return
-    currentDate.value = modelValue ? date(modelValue) : undefined
+    currentDate.value = parseModelValue(modelValue)
   },
   { immediate: true }
 )
@@ -104,9 +122,20 @@ const displayedValue = computed(() => {
   return currentDate.value?.format(formatStr.value) ?? ''
 })
 
+function formatModelValue(d: Dater) {
+  if (props.dataType === 'date') {
+    return d.raw
+  }
+  if (props.dataType === 'timestamp') {
+    return d.timestamp
+  }
+  return d.format(props.valueFormat ?? formatStr.value)
+}
+
 const commitSelectedDate = userAction((date: Dater) => {
   currentDate.value = date
-  emit('update:modelValue', date.format(formatStr.value))
+  emit('update:modelValue', formatModelValue(date))
+  emit('change', date.raw)
 })
 
 async function handleSelectDate(date: Dater) {
@@ -117,5 +146,6 @@ async function handleSelectDate(date: Dater) {
 function handleClear() {
   currentDate.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-panel.ts

@@ -7,7 +7,7 @@ export interface DatePanelProps {
   date?: Dater
   rangeDate?: [Dater, Dater]
   range?: boolean
-  disabledDate?: (date: Dater) => boolean
+  disabledDate?: (date: Dater, raw: Date) => boolean
   type?: 'date' | 'month' | 'year'
   size?: FormComponentProps['size']
 }

package/src/types/date-picker.ts

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

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

@@ -13,7 +13,7 @@ export interface DateRangePickerProps extends FormComponentProps {
   /** 日期值格式化, 当没有指定时默认使用format属性，仅当值和显示的内容不一致时才需要使用到该属性 */
   valueFormat?: string
   /** 最小可选日期 */
-  disabledDate?: (date: Dater) => boolean
+  disabledDate?: (date: Dater, raw: Date) => boolean
   /** 是否显示清除按钮 */
   clearable?: boolean
 }