@veltra/desktop 1.7.3 → 1.7.5

package/dist/types/index.d.ts

@@ -50,7 +50,7 @@ import { NavEmits, NavExposed, NavItem, NavProps, _NavExposed } from "./nav.js";
 import { DualNavEmits, DualNavExposed, DualNavProps, DualNavRailVariant, DualNavRootItem, _DualNavExposed } from "./dual-nav.js";
 import { GroupNavEmits, GroupNavGroup, GroupNavProps } from "./group-nav.js";
 import { PasswordInputEmits, PasswordInputExposed, PasswordInputProps, _PasswordInputExposed } from "./password-input.js";
-import { DatePickerEmits, DatePickerExposed, DatePickerProps, _DatePickerExposed } from "./date-picker.js";
+import { DatePickerDataType, DatePickerEmits, DatePickerExposed, DatePickerProps, _DatePickerExposed } from "./date-picker.js";
 import { DropdownEmits, DropdownExposed, DropdownProps, _DropdownExposed } from "./dropdown.js";
 import { ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, _ContextmenuExposed } from "./contextmenu.js";
 import { SelectEmits, SelectExposed, SelectProps, _SelectExposed } from "./select.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, 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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -80,12 +80,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.2.1",
     "@cat-kit/fe": ">=1.2.1",
-    "@veltra/compositions": "^1.7.3",
-    "@veltra/directives": "^1.7.3",
+    "@veltra/compositions": "^1.7.5",
+    "@veltra/directives": "^1.7.5",
     "@veltra/icons": "^1.5.0",
-    "@veltra/sheet-core": "^2.5.3",
-    "@veltra/styles": "^1.7.3",
-    "@veltra/utils": "^1.7.3",
+    "@veltra/sheet-core": "^2.5.4",
+    "@veltra/styles": "^1.7.5",
+    "@veltra/utils": "^1.7.5",
     "vue": ">=3.5.42"
   },
   "peerDependenciesMeta": {

package/src/components/auto-complete/style.scss

@@ -29,21 +29,46 @@ $root-name: auto-complete;
     cursor: pointer;
     margin: 2px 0;
     user-select: none;
+    color: fn.use-var(text-color, main);
     @include m.ellipsis;
 
     &:hover {
-      background-color: var(--u-nav-hover-bg);
-      color: var(--u-nav-hover-color);
+      background-color: fn.component-var(
+        auto-complete,
+        option-hover-bg,
+        fn.use-var(bg-color, hover)
+      );
+      color: fn.component-var(
+        auto-complete,
+        option-hover-color,
+        fn.use-var(text-color, title)
+      );
     }
 
     @include m.is(active) {
-      background-color: var(--u-nav-hover-bg);
-      color: var(--u-nav-hover-color);
+      background-color: fn.component-var(
+        auto-complete,
+        option-hover-bg,
+        fn.use-var(bg-color, hover)
+      );
+      color: fn.component-var(
+        auto-complete,
+        option-hover-color,
+        fn.use-var(text-color, title)
+      );
     }
 
     @include m.is(selected) {
-      background-color: var(--u-nav-active-bg);
-      color: var(--u-nav-active-color);
+      background-color: fn.component-var(
+        auto-complete,
+        option-selected-bg,
+        fn.use-var(color, primary, light-9)
+      );
+      color: fn.component-var(
+        auto-complete,
+        option-selected-color,
+        fn.use-var(color, primary)
+      );
     }
   }
 

package/src/components/breadcrumb/style.scss

@@ -25,7 +25,7 @@ $root-name: breadcrumb;
   @include m.e(separator) {
     display: flex;
     align-items: center;
-    margin: 0 fn.use-var(gap, base);
+    margin: 0 fn.use-var(gap, default);
     color: fn.use-var(text-color, placeholder);
     user-select: none;
   }

package/src/components/calendar/utils.ts

@@ -12,7 +12,7 @@ export const weekDays: string[] = ['日', '一', '二', '三', '四', '五', '
  */
 export function getMonthDays(
   d: Date | string | number | Dater,
-  disabledDate?: (d: Dater) => boolean
+  disabledDate?: (d: Dater, raw: Date) => boolean
 ): CalendarDay[] {
   const todayStr = date().format()
   if (d instanceof Date || typeof d === 'string' || typeof d === 'number') {
@@ -24,7 +24,7 @@ export function getMonthDays(
   const currentMonthDays: CalendarDay[] = Array.from({ length: d.getDays() }).map((_, i) => {
     const day: CalendarDay = { date: d.calc(i, 'days'), type: 'current' }
     day.isToday = day.date.format() === todayStr
-    day.disabled = disabledDate?.(day.date)
+    day.disabled = disabledDate?.(day.date, day.date.raw)
     return day
   })
 
@@ -41,7 +41,7 @@ export function getMonthDays(
     let i = 0
     while (i < firstDayWeek) {
       const day: CalendarDay = { date: d.calc(-i, 'days'), type: 'pre' }
-      day.disabled = disabledDate?.(day.date)
+      day.disabled = disabledDate?.(day.date, day.date.raw)
       preMonthDays.unshift(day)
       i++
     }
@@ -55,7 +55,7 @@ export function getMonthDays(
 
   while (j < nextMonthDaysAmount) {
     const day: CalendarDay = { date: d.calc(j++, 'days'), type: 'next' }
-    day.disabled = disabledDate?.(day.date)
+    day.disabled = disabledDate?.(day.date, day.date.raw)
     nextMonthDays.push(day)
   }
 
@@ -70,7 +70,7 @@ export function getMonthDays(
  */
 export function getYearMonths(
   d: Date | string | number | Dater,
-  disabledDate?: (d: Dater) => boolean
+  disabledDate?: (d: Dater, raw: Date) => boolean
 ): CalendarMonth[] {
   if (d instanceof Date || typeof d === 'string' || typeof d === 'number') {
     d = date(d)
@@ -88,7 +88,7 @@ export function getYearMonths(
     monthDate.setMinutes(59)
     monthDate.setSeconds(59)
 
-    return { key: ym, month, date: monthDate, disabled: disabledDate?.(monthDate) }
+    return { key: ym, month, date: monthDate, disabled: disabledDate?.(monthDate, monthDate.raw) }
   })
 }
 
@@ -100,7 +100,7 @@ export function getYearMonths(
  */
 export function getTenYears(
   d: Date | string | number | Dater,
-  disabledDate?: (d: Dater) => boolean
+  disabledDate?: (d: Dater, raw: Date) => boolean
 ): CalendarYear[] {
   if (d instanceof Date || typeof d === 'string' || typeof d === 'number') {
     d = date(d)
@@ -113,6 +113,6 @@ export function getTenYears(
 
     const yearDate = date(`${year}-12-31 23:59:59`)
 
-    return { year, date: yearDate, disabled: disabledDate?.(yearDate) }
+    return { year, date: yearDate, disabled: disabledDate?.(yearDate, yearDate.raw) }
   })
 }

package/src/components/card/style.scss

@@ -39,7 +39,7 @@ $root-name: card;
   }
 
   @include m.e(header) {
-    background-color: fn.use-var(header-bg, transparent);
+    background-color: fn.component-var(card, header-bg, transparent);
     color: fn.use-var(text-color, title);
   }
 
@@ -65,7 +65,7 @@ $root-name: card;
   }
 
   @include m.e(action) {
-    background-color: fn.use-var(action-bg, transparent);
+    background-color: fn.component-var(card, action-bg, transparent);
 
     #{fn.bem(button)} + #{fn.bem(button)} {
       margin-left: fn.use-var(gap, default);

package/src/components/condition-editor/style.scss

@@ -84,16 +84,16 @@ $connector-width: 56px;
       background-color: fn.use-var(color, primary, light-9);
 
       &:hover {
-        background-color: fn.use-var(color, primary, light-8);
+        background-color: fn.use-var(color, primary, light-7);
       }
     }
 
     @include m.m(or) {
-      color: fn.use-var(color, warning, dark-2);
+      color: fn.use-var(color, warning, dark-1);
       background-color: fn.use-var(color, warning, light-9);
 
       &:hover {
-        background-color: fn.use-var(color, warning, light-8);
+        background-color: fn.use-var(color, warning, light-7);
       }
     }
 
@@ -243,7 +243,7 @@ $connector-width: 56px;
       border-color 0.15s ease;
 
     &:hover {
-      background-color: fn.use-var(color, primary, light-8);
+      background-color: fn.use-var(color, primary, light-7);
       border-color: fn.use-var(color, primary, light-5);
     }
 

package/src/components/contextmenu/style.scss

@@ -92,15 +92,31 @@ $arrow-size: 12px;
 
     #{$b}__item:not(.is-disabled):not(.is-loading) > & {
       &:hover {
-        background-color: var(--u-nav-hover-bg);
-        color: var(--u-nav-hover-color);
+        background-color: fn.component-var(
+          contextmenu,
+          item-hover-bg,
+          fn.use-var(bg-color, hover)
+        );
+        color: fn.component-var(
+          contextmenu,
+          item-hover-color,
+          fn.use-var(text-color, title)
+        );
       }
     }
   }
 
   #{$b}__item.is-open:not(.is-disabled) > #{$b}__item-content {
-    background-color: var(--u-nav-hover-bg);
-    color: var(--u-nav-hover-color);
+    background-color: fn.component-var(
+      contextmenu,
+      item-hover-bg,
+      fn.use-var(bg-color, hover)
+    );
+    color: fn.component-var(
+      contextmenu,
+      item-hover-color,
+      fn.use-var(text-color, title)
+    );
   }
 
   @include m.e(icon-place) {
@@ -142,7 +158,11 @@ $arrow-size: 12px;
 
     @include m.e(item-content) {
       padding: 0 fn.use-var(gap, $size);
-      min-height: calc(var(--u-nav-height-#{$size}) - 8px);
+      min-height: fn.component-var(
+        contextmenu,
+        item-height-#{$size},
+        calc(fn.use-var(form-component-height, $size) - 4px)
+      );
       border-radius: calc(fn.use-var(radius, $size) + 1px);
     }
   }

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

@@ -73,7 +73,7 @@ $root-name: dual-nav;
 
   @include m.e(panel-title) {
     margin: 0;
-    font-size: fn.use-var(font-size, default);
+    font-size: fn.use-var(font-size-title, default);
     font-weight: 600;
     line-height: 1.4;
     color: var(--u-nav-strong-color);

package/src/components/expression-editor/style.scss

@@ -102,7 +102,7 @@ $root-name: expression-editor;
       background-color: fn.component-var(
         expression-editor,
         chip-bg,
-        fn.use-var(color, primary, light-8)
+        fn.use-var(color, primary, light-7)
       );
       box-shadow: 0 1px 4px fn.use-var(shadow, color);
 

package/src/components/number-range-input/style.scss

@@ -9,7 +9,7 @@
 
   @include m.e(separator) {
     flex-shrink: 0;
-    color: fn.use-var(text-color, secondary);
+    color: fn.use-var(text-color, second);
     line-height: 1;
   }
 }

package/src/components/progress-nodes/style.scss

@@ -39,7 +39,7 @@ $root-name: progress-nodes;
     transition:
       background-color 0.2s,
       color 0.2s;
-    border-radius: fn.use-var(radius, base);
+    border-radius: fn.use-var(radius, default);
 
     &:hover {
       @include m.bem($root-name, dot) {
@@ -47,7 +47,7 @@ $root-name: progress-nodes;
       }
 
       @include m.bem($root-name, label) {
-        color: fn.use-var(text-color, primary);
+        color: fn.use-var(color, primary);
       }
     }
   }
@@ -64,7 +64,7 @@ $root-name: progress-nodes;
   @include m.e(link) {
     position: absolute;
     border-style: dashed;
-    border-color: fn.use-var(text, color, placeholder);
+    border-color: fn.use-var(text-color, placeholder);
   }
 
   // 节点圆点