@veltra/desktop 1.7.6 → 1.7.8

package/dist/types/index.d.ts

@@ -5,7 +5,7 @@ import { TreeEmit, TreeExposed, TreeNode, TreeNodeProps, TreeProps, _TreeExposed
 import { TreeSelectEmits, TreeSelectExposed, TreeSelectProps, _TreeSelectExposed } from "./tree-select.js";
 import { LayoutEmits, LayoutExposed, LayoutProps, _LayoutExposed } from "./layout.js";
 import { TagEmits, TagExposed, TagProps } from "./tag.js";
-import { DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, _DateRangePickerExposed } from "./date-range-picker.js";
+import { DateRangePickerDataType, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DateRangeValue, _DateRangePickerExposed } from "./date-range-picker.js";
 import { RadioGroupEmits, RadioGroupExposed, RadioGroupProps, _RadioGroupExposed } from "./radio-group.js";
 import { ScrollEmits, ScrollExposed, ScrollPosition, ScrollProps, _ScrollExposed } from "./scroll.js";
 import { WatermarkEmits, WatermarkExposed, WatermarkProps, _WatermarkExposed } from "./watermark.js";
@@ -81,4 +81,4 @@ import { FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, Fil
 import { CollapseEmits, CollapseItemEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue } from "./collapse.js";
 import { SegmentEmits, SegmentExposed, SegmentItem, SegmentProps, _SegmentExposed } from "./segment.js";
 export type * from "@veltra/utils";
-export { ActionEmits, ActionExposed, ActionGroupExposed, ActionGroupProps, ActionProps, AnimationEmits, AnimationExposed, AnimationProps, AutoCompleteEmits, AutoCompleteExposed, AutoCompleteProps, BadgeEmits, BadgeExposed, BadgeProps, BarType, BatchEditColumn, BatchEditEmits, BatchEditExposed, BatchEditFeature, BatchEditFormStatus, BatchEditProps, BatchEditSlots, BatchEditStates, BreadcrumbEmits, BreadcrumbExposed, BreadcrumbItem, BreadcrumbProps, BreadcrumbSlotScope, BreakCols, Breakpoint, ButtonEmits, ButtonExposed, ButtonProps, ButtonType, CalendarDay, CalendarEmits, CalendarExposed, CalendarMonth, CalendarProps, CalendarYear, CardActionProps, CardContentProps, CardCoverProps, CardEmits, CardExposed, CardProps, CascadeEmits, CascadeExposed, CascadeNode, CascadeProps, CheckTagEmits, CheckTagExposed, CheckTagProps, CheckboxButtonEmits, CheckboxButtonProps, CheckboxEmits, CheckboxExposed, CheckboxGroupEmits, CheckboxGroupExposed, CheckboxGroupProps, CheckboxProps, CodeEditorEmits, CodeEditorExposed, CodeEditorLang, CodeEditorProps, CollapseEmits, CollapseItemEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue, ConditionConnector, ConditionEditorEmits, ConditionEditorExposed, ConditionEditorProps, ConditionExpression, ConditionField, ConditionGroup, ConditionLeaf, ConditionNode, ConditionValue, ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, CssTransitionEmits, CssTransitionExposed, CssTransitionProps, DatePanelEmits, DatePanelProps, DatePickerDataType, DatePickerEmits, DatePickerExposed, DatePickerProps, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DialogEmits, DialogExposed, DialogProps, DialogTransition, DrawerDirection, DrawerEmits, DrawerExposed, DrawerMode, DrawerProps, DropdownEmits, DropdownExposed, DropdownProps, DualNavEmits, DualNavExposed, DualNavProps, DualNavRailVariant, DualNavRootItem, EmptyEmits, EmptyExposed, EmptyProps, ExpressionEditorEmits, ExpressionEditorExposed, ExpressionEditorProps, ExpressionSelectableLevels, FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, FileViewerProps, FloatButtonEmits, FloatButtonExposed, FloatButtonItem, FloatButtonProps, FormEmits, FormExposed, FormItemEmits, FormItemExposed, FormItemProps, FormProps, GanttChartEmits, GanttChartExposed, GanttChartProps, GridEmits, GridExposed, GridInputEmits, GridInputExposed, GridInputProps, GridItemProps, GridProps, GroupInputEmits, GroupInputExposed, GroupInputProps, GroupNavEmits, GroupNavGroup, GroupNavProps, IconEmits, IconExposed, IconProps, InputEmits, InputExposed, InputProps, LayoutEmits, LayoutExposed, LayoutProps, ListEmits, ListExposed, ListProps, LoadingEmits, LoadingExposed, LoadingProps, LoadingType, Message, MessageConfirm, MessageConfirmAction, MessageConfirmEmits, MessageConfirmExposed, MessageConfirmInstance, MessageConfirmOptions, MessageConfirmProps, MessageEmits, MessageExposed, MessageInstance, MessageOptions, MessageProps, MessageType, MultiAutoCompleteEmits, MultiAutoCompleteExposed, MultiAutoCompleteProps, MultiSelectEmits, MultiSelectExposed, MultiSelectProps, MultiTreeSelectEmits, MultiTreeSelectExposed, MultiTreeSelectProps, NavEmits, NavExposed, NavItem, NavProps, NodeRenderExposed, NodeRenderProps, Notification, NotificationEmits, NotificationExposed, NotificationInstance, NotificationOptions, NotificationPosition, NotificationProps, NumberEmits, NumberExposed, NumberInputEmits, NumberInputExposed, NumberInputProps, NumberProps, NumberRangeInputEmits, NumberRangeInputExposed, NumberRangeInputProps, NumberRangeTuple, PaginatorEmits, PaginatorExposed, PaginatorProps, PaletteColorType, PaletteEmits, PaletteExposed, PaletteHSV, PaletteProps, PaletteRGB, PanelItem, PanelType, PasswordInputEmits, PasswordInputExposed, PasswordInputProps, PopConfirmEmits, PopConfirmExposed, PopConfirmProps, PopEmits, PopExposed, PopProps, ProgressEmits, ProgressExposed, ProgressNodesEmits, ProgressNodesExposed, ProgressNodesProps, ProgressProps, QuickBatchEditEmits, QuickBatchEditExposed, QuickBatchEditProps, RadioEmits, RadioExposed, RadioGroupEmits, RadioGroupExposed, RadioGroupProps, RadioProps, RichTextEditorEmits, RichTextEditorExposed, RichTextEditorProps, RichTextFormat, ScrollEmits, ScrollExposed, ScrollPosition, ScrollProps, SegmentEmits, SegmentExposed, SegmentItem, SegmentProps, SelectEmits, SelectExposed, SelectProps, SliderEmits, SliderExposed, SliderProps, StepsEmits, StepsExposed, StepsProps, StepsSlotScope, SwitchEmits, SwitchExposed, SwitchProps, TabItem, TableColumn, TableColumnAlign, TableColumnNode, TableColumnRenderContext, TableColumnSlotsScope, TableEditorEmits, TableEditorExposed, TableEditorProps, TableEmits, TableExposed, TableProps, TableRow, TableRowSlotsScope, TableSummaryContext, TabsEmits, TabsExposed, TabsHorizontalEmits, TabsHorizontalExposed, TabsHorizontalProps, TabsProps, TabsVerticalEmits, TabsVerticalExposed, TabsVerticalProps, TagEmits, TagExposed, TagProps, TextEditorEmits, TextEditorExposed, TextEditorProps, TextEmits, TextExposed, TextProps, TextareaEmits, TextareaExposed, TextareaProps, ThemeExposed, ThemeProps, TipAlign, TipDirection, TipEmits, TipExposed, TipProps, ToolbarItem, TreeEmit, TreeExposed, TreeNode, TreeNodeProps, TreeProps, TreeSelectEmits, TreeSelectExposed, TreeSelectProps, UploaderEmits, UploaderExposed, UploaderProps, VariableItem, WatermarkEmits, WatermarkExposed, WatermarkProps, _ActionExposed, _ActionGroupExposed, _AnimationExposed, _AutoCompleteExposed, _BadgeExposed, _BatchEditExposed, _BreadcrumbExposed, _ButtonExposed, _CalendarExposed, _CardExposed, _CascadeExposed, _CheckTagExposed, _CodeEditorExposed, _ConditionEditorExposed, _ContextmenuExposed, _CssTransitionExposed, _DatePickerExposed, _DateRangePickerExposed, _DialogExposed, _DrawerExposed, _DropdownExposed, _DualNavExposed, _EmptyExposed, _ExpressionEditorExposed, _FileViewerExposed, _FloatButtonExposed, _FormExposed, _GanttChartExposed, _GridExposed, _GridInputExposed, _GroupInputExposed, _InputExposed, _LayoutExposed, _ListExposed, _LoadingExposed, _MessageConfirmExposed, _MessageExposed, _MultiAutoCompleteExposed, _MultiSelectExposed, _MultiTreeSelectExposed, _NavExposed, _NotificationExposed, _PaginatorExposed, _PaletteExposed, _PasswordInputExposed, _PopConfirmExposed, _PopExposed, _ProgressExposed, _ProgressNodesExposed, _QuickBatchEditExposed, _RadioExposed, _RadioGroupExposed, _RichTextEditorExposed, _ScrollExposed, _SegmentExposed, _SelectExposed, _SliderExposed, _StepsExposed, _SwitchExposed, _TableEditorExposed, _TableExposed, _TabsExposed, _TabsHorizontalExposed, _TabsVerticalExposed, _TextEditorExposed, _TextExposed, _TextareaExposed, _ThemeExposed, _TipExposed, _TreeExposed, _TreeSelectExposed, _UploaderExposed, _WatermarkExposed };
+export { ActionEmits, ActionExposed, ActionGroupExposed, ActionGroupProps, ActionProps, AnimationEmits, AnimationExposed, AnimationProps, AutoCompleteEmits, AutoCompleteExposed, AutoCompleteProps, BadgeEmits, BadgeExposed, BadgeProps, BarType, BatchEditColumn, BatchEditEmits, BatchEditExposed, BatchEditFeature, BatchEditFormStatus, BatchEditProps, BatchEditSlots, BatchEditStates, BreadcrumbEmits, BreadcrumbExposed, BreadcrumbItem, BreadcrumbProps, BreadcrumbSlotScope, BreakCols, Breakpoint, ButtonEmits, ButtonExposed, ButtonProps, ButtonType, CalendarDay, CalendarEmits, CalendarExposed, CalendarMonth, CalendarProps, CalendarYear, CardActionProps, CardContentProps, CardCoverProps, CardEmits, CardExposed, CardProps, CascadeEmits, CascadeExposed, CascadeNode, CascadeProps, CheckTagEmits, CheckTagExposed, CheckTagProps, CheckboxButtonEmits, CheckboxButtonProps, CheckboxEmits, CheckboxExposed, CheckboxGroupEmits, CheckboxGroupExposed, CheckboxGroupProps, CheckboxProps, CodeEditorEmits, CodeEditorExposed, CodeEditorLang, CodeEditorProps, CollapseEmits, CollapseItemEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue, ConditionConnector, ConditionEditorEmits, ConditionEditorExposed, ConditionEditorProps, ConditionExpression, ConditionField, ConditionGroup, ConditionLeaf, ConditionNode, ConditionValue, ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, CssTransitionEmits, CssTransitionExposed, CssTransitionProps, DatePanelEmits, DatePanelProps, DatePickerDataType, DatePickerEmits, DatePickerExposed, DatePickerProps, DateRangePickerDataType, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DateRangeValue, DialogEmits, DialogExposed, DialogProps, DialogTransition, DrawerDirection, DrawerEmits, DrawerExposed, DrawerMode, DrawerProps, DropdownEmits, DropdownExposed, DropdownProps, DualNavEmits, DualNavExposed, DualNavProps, DualNavRailVariant, DualNavRootItem, EmptyEmits, EmptyExposed, EmptyProps, ExpressionEditorEmits, ExpressionEditorExposed, ExpressionEditorProps, ExpressionSelectableLevels, FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, FileViewerProps, FloatButtonEmits, FloatButtonExposed, FloatButtonItem, FloatButtonProps, FormEmits, FormExposed, FormItemEmits, FormItemExposed, FormItemProps, FormProps, GanttChartEmits, GanttChartExposed, GanttChartProps, GridEmits, GridExposed, GridInputEmits, GridInputExposed, GridInputProps, GridItemProps, GridProps, GroupInputEmits, GroupInputExposed, GroupInputProps, GroupNavEmits, GroupNavGroup, GroupNavProps, IconEmits, IconExposed, IconProps, InputEmits, InputExposed, InputProps, LayoutEmits, LayoutExposed, LayoutProps, ListEmits, ListExposed, ListProps, LoadingEmits, LoadingExposed, LoadingProps, LoadingType, Message, MessageConfirm, MessageConfirmAction, MessageConfirmEmits, MessageConfirmExposed, MessageConfirmInstance, MessageConfirmOptions, MessageConfirmProps, MessageEmits, MessageExposed, MessageInstance, MessageOptions, MessageProps, MessageType, MultiAutoCompleteEmits, MultiAutoCompleteExposed, MultiAutoCompleteProps, MultiSelectEmits, MultiSelectExposed, MultiSelectProps, MultiTreeSelectEmits, MultiTreeSelectExposed, MultiTreeSelectProps, NavEmits, NavExposed, NavItem, NavProps, NodeRenderExposed, NodeRenderProps, Notification, NotificationEmits, NotificationExposed, NotificationInstance, NotificationOptions, NotificationPosition, NotificationProps, NumberEmits, NumberExposed, NumberInputEmits, NumberInputExposed, NumberInputProps, NumberProps, NumberRangeInputEmits, NumberRangeInputExposed, NumberRangeInputProps, NumberRangeTuple, PaginatorEmits, PaginatorExposed, PaginatorProps, PaletteColorType, PaletteEmits, PaletteExposed, PaletteHSV, PaletteProps, PaletteRGB, PanelItem, PanelType, PasswordInputEmits, PasswordInputExposed, PasswordInputProps, PopConfirmEmits, PopConfirmExposed, PopConfirmProps, PopEmits, PopExposed, PopProps, ProgressEmits, ProgressExposed, ProgressNodesEmits, ProgressNodesExposed, ProgressNodesProps, ProgressProps, QuickBatchEditEmits, QuickBatchEditExposed, QuickBatchEditProps, RadioEmits, RadioExposed, RadioGroupEmits, RadioGroupExposed, RadioGroupProps, RadioProps, RichTextEditorEmits, RichTextEditorExposed, RichTextEditorProps, RichTextFormat, ScrollEmits, ScrollExposed, ScrollPosition, ScrollProps, SegmentEmits, SegmentExposed, SegmentItem, SegmentProps, SelectEmits, SelectExposed, SelectProps, SliderEmits, SliderExposed, SliderProps, StepsEmits, StepsExposed, StepsProps, StepsSlotScope, SwitchEmits, SwitchExposed, SwitchProps, TabItem, TableColumn, TableColumnAlign, TableColumnNode, TableColumnRenderContext, TableColumnSlotsScope, TableEditorEmits, TableEditorExposed, TableEditorProps, TableEmits, TableExposed, TableProps, TableRow, TableRowSlotsScope, TableSummaryContext, TabsEmits, TabsExposed, TabsHorizontalEmits, TabsHorizontalExposed, TabsHorizontalProps, TabsProps, TabsVerticalEmits, TabsVerticalExposed, TabsVerticalProps, TagEmits, TagExposed, TagProps, TextEditorEmits, TextEditorExposed, TextEditorProps, TextEmits, TextExposed, TextProps, TextareaEmits, TextareaExposed, TextareaProps, ThemeExposed, ThemeProps, TipAlign, TipDirection, TipEmits, TipExposed, TipProps, ToolbarItem, TreeEmit, TreeExposed, TreeNode, TreeNodeProps, TreeProps, TreeSelectEmits, TreeSelectExposed, TreeSelectProps, UploaderEmits, UploaderExposed, UploaderProps, VariableItem, WatermarkEmits, WatermarkExposed, WatermarkProps, _ActionExposed, _ActionGroupExposed, _AnimationExposed, _AutoCompleteExposed, _BadgeExposed, _BatchEditExposed, _BreadcrumbExposed, _ButtonExposed, _CalendarExposed, _CardExposed, _CascadeExposed, _CheckTagExposed, _CodeEditorExposed, _ConditionEditorExposed, _ContextmenuExposed, _CssTransitionExposed, _DatePickerExposed, _DateRangePickerExposed, _DialogExposed, _DrawerExposed, _DropdownExposed, _DualNavExposed, _EmptyExposed, _ExpressionEditorExposed, _FileViewerExposed, _FloatButtonExposed, _FormExposed, _GanttChartExposed, _GridExposed, _GridInputExposed, _GroupInputExposed, _InputExposed, _LayoutExposed, _ListExposed, _LoadingExposed, _MessageConfirmExposed, _MessageExposed, _MultiAutoCompleteExposed, _MultiSelectExposed, _MultiTreeSelectExposed, _NavExposed, _NotificationExposed, _PaginatorExposed, _PaletteExposed, _PasswordInputExposed, _PopConfirmExposed, _PopExposed, _ProgressExposed, _ProgressNodesExposed, _QuickBatchEditExposed, _RadioExposed, _RadioGroupExposed, _RichTextEditorExposed, _ScrollExposed, _SegmentExposed, _SelectExposed, _SliderExposed, _StepsExposed, _SwitchExposed, _TableEditorExposed, _TableExposed, _TabsExposed, _TabsHorizontalExposed, _TabsVerticalExposed, _TextEditorExposed, _TextExposed, _TextareaExposed, _ThemeExposed, _TipExposed, _TreeExposed, _TreeSelectExposed, _UploaderExposed, _WatermarkExposed };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -51,15 +51,15 @@
     "@embedpdf/plugin-scroll": "^2.15.0",
     "@embedpdf/plugin-viewport": "^2.15.0",
     "@embedpdf/plugin-zoom": "^2.15.0",
-    "@lexical/history": "^0.49.0",
-    "@lexical/html": "^0.49.0",
-    "@lexical/link": "^0.49.0",
-    "@lexical/list": "^0.49.0",
-    "@lexical/rich-text": "^0.49.0",
-    "@lexical/selection": "^0.49.0",
-    "@lexical/utils": "^0.49.0",
+    "@lexical/history": "^0.50.0",
+    "@lexical/html": "^0.50.0",
+    "@lexical/link": "^0.50.0",
+    "@lexical/list": "^0.50.0",
+    "@lexical/rich-text": "^0.50.0",
+    "@lexical/selection": "^0.50.0",
+    "@lexical/utils": "^0.50.0",
     "docx-preview": "^0.4.0",
-    "lexical": "^0.49.0"
+    "lexical": "^0.50.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "6.20.3",
@@ -70,7 +70,7 @@
     "@codemirror/lang-markdown": "6.5.2",
     "@codemirror/lang-sql": "6.10.0",
     "@codemirror/language": "6.12.4",
-    "@codemirror/legacy-modes": "6.5.3",
+    "@codemirror/legacy-modes": "6.5.4",
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.1",
     "@codemirror/state": "6.7.1",
@@ -80,12 +80,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.2.1",
     "@cat-kit/fe": ">=1.2.1",
-    "@veltra/compositions": "^1.7.6",
-    "@veltra/directives": "^1.7.6",
+    "@veltra/compositions": "^1.7.8",
+    "@veltra/directives": "^1.7.8",
     "@veltra/icons": "^1.5.0",
     "@veltra/sheet-core": "^2.5.4",
-    "@veltra/styles": "^1.7.6",
-    "@veltra/utils": "^1.7.6",
+    "@veltra/styles": "^1.7.8",
+    "@veltra/utils": "^1.7.8",
     "vue": ">=3.5.42"
   },
   "peerDependenciesMeta": {

package/src/components/cascade/__test__/cascade.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UCascade from '../cascade.vue'
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const cascadeData = [
+  {
+    label: '浙江省',
+    value: 'zhejiang',
+    children: [
+      {
+        label: '杭州市',
+        value: 'hangzhou',
+        children: [
+          { label: '西湖区', value: 'xihu' },
+          { label: '余杭区', value: 'yuhang' }
+        ]
+      }
+    ]
+  },
+  {
+    label: '江苏省',
+    value: 'jiangsu',
+    children: [
+      { label: '南京市', value: 'nanjing', children: [{ label: '玄武区', value: 'xuanwu' }] }
+    ]
+  }
+]
+
+function queryCascadeItems() {
+  return [...document.body.querySelectorAll<HTMLElement>('.u-cascade-panel-item__option')]
+}
+
+async function openDropdown(host: HTMLElement) {
+  const trigger = (host.querySelector('.u-cascade') ||
+    host.querySelector('.u-dropdown') ||
+    host.firstElementChild) as HTMLElement
+  trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  for (let attempt = 0; attempt < 20; attempt++) {
+    await nextTick()
+    await sleep(25)
+    if (queryCascadeItems().length > 0) return
+  }
+}
+
+async function clickItemByLabel(label: string) {
+  const item = queryCascadeItems().find((el) => el.textContent?.includes(label))
+  expect(item, `cascade item "${label}" not found`).toBeTruthy()
+  item!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  await nextTick()
+  await sleep(30)
+}
+
+describe('UCascade change event fullLabel', () => {
+  it('should emit fullLabel in change event for single select', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const model = ref<string | undefined>()
+    let changeResult: { item: any; fullLabel?: string } | undefined
+
+    const app = createApp({
+      render() {
+        return h(UCascade, {
+          data: cascadeData,
+          modelValue: model.value,
+          'onUpdate:modelValue': (val: string) => {
+            model.value = val
+          },
+          onChange: (item: any, fullLabel?: string) => {
+            changeResult = { item, fullLabel }
+          }
+        })
+      }
+    })
+
+    app.mount(host)
+    await nextTick()
+
+    await openDropdown(host)
+
+    // 点击第一列 "浙江省"
+    await clickItemByLabel('浙江省')
+
+    // 点击第二列 "杭州市"
+    await clickItemByLabel('杭州市')
+
+    // 点击第三列 "西湖区"
+    await clickItemByLabel('西湖区')
+
+    expect(changeResult).toBeDefined()
+    expect(changeResult?.fullLabel).toBe('浙江省/杭州市/西湖区')
+    expect(changeResult?.item).toBeDefined()
+    expect(changeResult?.item.value).toBe('xihu')
+    expect(changeResult?.item.label).toBe('西湖区')
+    expect(changeResult?.item.fullLabel).toBe('浙江省/杭州市/西湖区')
+
+    app.unmount()
+    host.remove()
+  })
+})

package/src/components/cascade/use-check.ts

@@ -68,10 +68,13 @@ export function useCheck(options: CheckOptions): UseCheckReturned {
     const checkedArr = Array.from(checkedSet.value)
     const targetValues = checkedArr.map((item) => item.value)
     const targetLabels = checkedArr.map((item) => item.label)
-    const targetItems = checkedArr.map((item) => item.data as Record<string, any>)
+    const targetItems = checkedArr.map((item) => {
+      const data = item.data as Record<string, any>
+      return data ? Object.assign({}, data, { fullLabel: item.label }) : data
+    })
     emit('update:modelValue', targetValues)
     emit('update:label', targetLabels.length ? targetLabels : undefined)
-    emit('change', targetItems)
+    emit('change', targetItems, targetLabels.length ? targetLabels : undefined)
   }
 
   const restTag = computed(() => {

package/src/components/cascade/use-select.ts

@@ -115,10 +115,11 @@ export function useSelect(options: SelectOptions): UseSelectReturned {
       : leafLabel
 
     const leafNode = leafKey ? dataMap.value.get(leafKey) : undefined
+    const changeItem = leafNode?.data ? { ...leafNode.data, fullLabel: targetLabel } : undefined
 
     emit('update:modelValue', targetValue)
     emit('update:label', targetLabel)
-    emit('change', leafNode?.data as Record<string, any> | undefined)
+    emit('change', changeItem, targetLabel)
   }
 
   /**

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/components/table/style.scss

@@ -126,7 +126,7 @@ $root-name: table;
 
     @include m.bem($root-name, cell) {
       background-color: var(--u-table-header-bg);
-      font-weight: 500;
+      font-weight: bold;
       color: var(--u-table-header-color);
     }
 

package/src/types/cascade.ts

@@ -62,8 +62,16 @@ export interface CascadeEmits {
   /** 触发更新 label 事件 */
   (e: 'update:label', label?: string | string[]): void
   (e: 'update:modelValue', value?: string | string[]): void
-  (e: 'change', items: Record<string, any>[]): void
-  (e: 'change', item?: Record<string, any>): void
+  (
+    e: 'change',
+    items: (Record<string, any> & { fullLabel?: string })[],
+    fullLabels?: string[]
+  ): void
+  (
+    e: 'change',
+    item: (Record<string, any> & { fullLabel?: string }) | undefined,
+    fullLabel?: string
+  ): void
   (e: 'clear'): void
 }