@veltra/desktop 1.7.4 → 1.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,7 +6,7 @@ interface DatePanelProps {
6
6
  date?: Dater;
7
7
  rangeDate?: [Dater, Dater];
8
8
  range?: boolean;
9
- disabledDate?: (date: Dater) => boolean;
9
+ disabledDate?: (date: Dater, raw: Date) => boolean;
10
10
  type?: 'date' | 'month' | 'year';
11
11
  size?: FormComponentProps['size'];
12
12
  }
@@ -1,6 +1,8 @@
1
1
  import { DeconstructValue, FormComponentProps } from "@veltra/utils";
2
2
  import { Dater } from "@cat-kit/core";
3
3
  //#region src/types/date-picker.d.ts
4
+ /** 绑定值类型 */
5
+ type DatePickerDataType = 'date' | 'timestamp' | 'string';
4
6
  /** date-picker组件属性 */
5
7
  interface DatePickerProps extends FormComponentProps {
6
8
  modelValue?: string | number | Date;
@@ -12,19 +14,25 @@ interface DatePickerProps extends FormComponentProps {
12
14
  format?: string;
13
15
  /** 日期值格式化, 当没有指定时默认使用format属性,仅当值和显示的内容不一致时才需要使用到该属性 */
14
16
  valueFormat?: string;
17
+ /**
18
+ * 绑定值的类型,默认为字符串。
19
+ * 当 dataType 没有指定为字符串时,valueFormat 属性不生效
20
+ */
21
+ dataType?: DatePickerDataType;
15
22
  /** 最小可选日期 */
16
- disabledDate?: (date: Dater) => boolean;
23
+ disabledDate?: (date: Dater, raw: Date) => boolean;
17
24
  /** 是否显示清除按钮 */
18
25
  clearable?: boolean;
19
26
  }
20
27
  /** date-picker组件定义的事件 */
21
28
  interface DatePickerEmits {
22
29
  (e: 'update:modelValue', value?: string | number | Date): void;
30
+ (e: 'change', date?: Date): void;
23
31
  }
24
32
  /** date-picker组件暴露的属性和方法(组件内部使用) */
25
33
  interface _DatePickerExposed {}
26
34
  /** date-picker组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
27
35
  type DatePickerExposed = DeconstructValue<_DatePickerExposed>;
28
36
  //#endregion
29
- export { DatePickerEmits, DatePickerExposed, DatePickerProps, _DatePickerExposed };
37
+ export { DatePickerDataType, DatePickerEmits, DatePickerExposed, DatePickerProps, _DatePickerExposed };
30
38
  //# sourceMappingURL=date-picker.d.ts.map
@@ -13,7 +13,7 @@ interface DateRangePickerProps extends FormComponentProps {
13
13
  /** 日期值格式化, 当没有指定时默认使用format属性,仅当值和显示的内容不一致时才需要使用到该属性 */
14
14
  valueFormat?: string;
15
15
  /** 最小可选日期 */
16
- disabledDate?: (date: Dater) => boolean;
16
+ disabledDate?: (date: Dater, raw: Date) => boolean;
17
17
  /** 是否显示清除按钮 */
18
18
  clearable?: boolean;
19
19
  }
@@ -50,7 +50,7 @@ import { NavEmits, NavExposed, NavItem, NavProps, _NavExposed } from "./nav.js";
50
50
  import { DualNavEmits, DualNavExposed, DualNavProps, DualNavRailVariant, DualNavRootItem, _DualNavExposed } from "./dual-nav.js";
51
51
  import { GroupNavEmits, GroupNavGroup, GroupNavProps } from "./group-nav.js";
52
52
  import { PasswordInputEmits, PasswordInputExposed, PasswordInputProps, _PasswordInputExposed } from "./password-input.js";
53
- import { DatePickerEmits, DatePickerExposed, DatePickerProps, _DatePickerExposed } from "./date-picker.js";
53
+ import { DatePickerDataType, DatePickerEmits, DatePickerExposed, DatePickerProps, _DatePickerExposed } from "./date-picker.js";
54
54
  import { DropdownEmits, DropdownExposed, DropdownProps, _DropdownExposed } from "./dropdown.js";
55
55
  import { ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, _ContextmenuExposed } from "./contextmenu.js";
56
56
  import { SelectEmits, SelectExposed, SelectProps, _SelectExposed } from "./select.js";
@@ -81,4 +81,4 @@ import { FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, Fil
81
81
  import { CollapseEmits, CollapseItemEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue } from "./collapse.js";
82
82
  import { SegmentEmits, SegmentExposed, SegmentItem, SegmentProps, _SegmentExposed } from "./segment.js";
83
83
  export type * from "@veltra/utils";
84
- 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 };
84
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veltra/desktop",
3
- "version": "1.7.4",
3
+ "version": "1.7.6",
4
4
  "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
5
5
  "bugs": {
6
6
  "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -80,12 +80,12 @@
80
80
  "peerDependencies": {
81
81
  "@cat-kit/core": ">=1.2.1",
82
82
  "@cat-kit/fe": ">=1.2.1",
83
- "@veltra/compositions": "^1.7.4",
84
- "@veltra/directives": "^1.7.4",
83
+ "@veltra/compositions": "^1.7.6",
84
+ "@veltra/directives": "^1.7.6",
85
85
  "@veltra/icons": "^1.5.0",
86
86
  "@veltra/sheet-core": "^2.5.4",
87
- "@veltra/styles": "^1.7.4",
88
- "@veltra/utils": "^1.7.4",
87
+ "@veltra/styles": "^1.7.6",
88
+ "@veltra/utils": "^1.7.6",
89
89
  "vue": ">=3.5.42"
90
90
  },
91
91
  "peerDependenciesMeta": {
@@ -12,7 +12,7 @@ export const weekDays: string[] = ['日', '一', '二', '三', '四', '五', '
12
12
  */
13
13
  export function getMonthDays(
14
14
  d: Date | string | number | Dater,
15
- disabledDate?: (d: Dater) => boolean
15
+ disabledDate?: (d: Dater, raw: Date) => boolean
16
16
  ): CalendarDay[] {
17
17
  const todayStr = date().format()
18
18
  if (d instanceof Date || typeof d === 'string' || typeof d === 'number') {
@@ -24,7 +24,7 @@ export function getMonthDays(
24
24
  const currentMonthDays: CalendarDay[] = Array.from({ length: d.getDays() }).map((_, i) => {
25
25
  const day: CalendarDay = { date: d.calc(i, 'days'), type: 'current' }
26
26
  day.isToday = day.date.format() === todayStr
27
- day.disabled = disabledDate?.(day.date)
27
+ day.disabled = disabledDate?.(day.date, day.date.raw)
28
28
  return day
29
29
  })
30
30
 
@@ -41,7 +41,7 @@ export function getMonthDays(
41
41
  let i = 0
42
42
  while (i < firstDayWeek) {
43
43
  const day: CalendarDay = { date: d.calc(-i, 'days'), type: 'pre' }
44
- day.disabled = disabledDate?.(day.date)
44
+ day.disabled = disabledDate?.(day.date, day.date.raw)
45
45
  preMonthDays.unshift(day)
46
46
  i++
47
47
  }
@@ -55,7 +55,7 @@ export function getMonthDays(
55
55
 
56
56
  while (j < nextMonthDaysAmount) {
57
57
  const day: CalendarDay = { date: d.calc(j++, 'days'), type: 'next' }
58
- day.disabled = disabledDate?.(day.date)
58
+ day.disabled = disabledDate?.(day.date, day.date.raw)
59
59
  nextMonthDays.push(day)
60
60
  }
61
61
 
@@ -70,7 +70,7 @@ export function getMonthDays(
70
70
  */
71
71
  export function getYearMonths(
72
72
  d: Date | string | number | Dater,
73
- disabledDate?: (d: Dater) => boolean
73
+ disabledDate?: (d: Dater, raw: Date) => boolean
74
74
  ): CalendarMonth[] {
75
75
  if (d instanceof Date || typeof d === 'string' || typeof d === 'number') {
76
76
  d = date(d)
@@ -88,7 +88,7 @@ export function getYearMonths(
88
88
  monthDate.setMinutes(59)
89
89
  monthDate.setSeconds(59)
90
90
 
91
- return { key: ym, month, date: monthDate, disabled: disabledDate?.(monthDate) }
91
+ return { key: ym, month, date: monthDate, disabled: disabledDate?.(monthDate, monthDate.raw) }
92
92
  })
93
93
  }
94
94
 
@@ -100,7 +100,7 @@ export function getYearMonths(
100
100
  */
101
101
  export function getTenYears(
102
102
  d: Date | string | number | Dater,
103
- disabledDate?: (d: Dater) => boolean
103
+ disabledDate?: (d: Dater, raw: Date) => boolean
104
104
  ): CalendarYear[] {
105
105
  if (d instanceof Date || typeof d === 'string' || typeof d === 'number') {
106
106
  d = date(d)
@@ -113,6 +113,6 @@ export function getTenYears(
113
113
 
114
114
  const yearDate = date(`${year}-12-31 23:59:59`)
115
115
 
116
- return { year, date: yearDate, disabled: disabledDate?.(yearDate) }
116
+ return { year, date: yearDate, disabled: disabledDate?.(yearDate, yearDate.raw) }
117
117
  })
118
118
  }
@@ -1,18 +1,49 @@
1
1
  <template>
2
- <u-scroll :class="className" :style="rootStyle" @keyup.enter.stop>
3
- <div ref="container"></div>
4
-
5
- <u-select
6
- v-if="showLangSelect"
7
- :class="cls.e('lang-select')"
8
- v-model="lang"
9
- size="small"
10
- :options="langOptions"
11
- :clearable="false"
12
- :disabled="disabled"
13
- />
14
- <span v-else-if="langLabel" :class="cls.e('lang-label')">{{ langLabel }}</span>
15
- </u-scroll>
2
+ <!-- 放大时原位置的等高占位,避免页面布局位移 -->
3
+ <div v-if="zoomed" :class="cls.e('placeholder')" :style="{ height: placeholderHeight }" />
4
+
5
+ <Teleport to="body" :disabled="!zoomed">
6
+ <div
7
+ ref="zoomWrap"
8
+ :class="[cls.e('zoom-wrap'), bem.is('zoomed', zoomed)]"
9
+ :style="zoomed ? { zIndex: zoomZIndex } : undefined"
10
+ tabindex="-1"
11
+ @keyup.esc="exitZoom"
12
+ >
13
+ <div ref="root" v-bind="$attrs" :class="className" :style="rootStyle" @keyup.enter.stop>
14
+ <div v-if="hasToolbar" :class="cls.e('toolbar')">
15
+ <u-select
16
+ v-if="showLangSelect"
17
+ :class="cls.e('lang-select')"
18
+ v-model="lang"
19
+ size="small"
20
+ :options="langOptions"
21
+ :clearable="false"
22
+ :disabled="disabled"
23
+ />
24
+ <span v-else-if="langLabel" :class="cls.e('lang-label')">{{ langLabel }}</span>
25
+
26
+ <div :class="cls.e('toolbar-actions')">
27
+ <u-icon v-if="zoomed" :class="cls.e('btn-close')" title="关闭" @click="exitZoom">
28
+ <Close />
29
+ </u-icon>
30
+ <u-icon
31
+ v-else-if="zoomable"
32
+ :class="[cls.e('btn-zoom'), bem.is('disabled', disabled)]"
33
+ title="放大"
34
+ @click="enterZoom"
35
+ >
36
+ <ZoomIn />
37
+ </u-icon>
38
+ </div>
39
+ </div>
40
+
41
+ <u-scroll :class="cls.e('scroll')">
42
+ <div ref="container"></div>
43
+ </u-scroll>
44
+ </div>
45
+ </div>
46
+ </Teleport>
16
47
  </template>
17
48
 
18
49
  <script lang="ts" setup>
@@ -20,9 +51,11 @@ import { Compartment, EditorState, type Extension, type Text } from '@codemirror
20
51
  import { oneDark } from '@codemirror/theme-one-dark'
21
52
  import { EditorView, tooltips } from '@codemirror/view'
22
53
  import { useFormFallbackProps } from '@veltra/compositions'
54
+ import { ZoomIn, Close } from '@veltra/icons/normal'
23
55
  import { bem, injectFormContext, zIndex } from '@veltra/utils'
24
56
  import {
25
57
  computed,
58
+ nextTick,
26
59
  onBeforeUnmount,
27
60
  shallowRef,
28
61
  useTemplateRef,
@@ -31,6 +64,7 @@ import {
31
64
  } from 'vue'
32
65
 
33
66
  import type { CodeEditorEmits, CodeEditorLang, CodeEditorProps } from '../../types'
67
+ import { UIcon } from '../icon'
34
68
  import { UScroll } from '../scroll'
35
69
  import { USelect } from '../select'
36
70
  import { basicSetup } from './basic-setup'
@@ -45,12 +79,13 @@ import {
45
79
  type ShellConfig
46
80
  } from './shell-extension'
47
81
 
48
- defineOptions({ name: 'UCodeEditor' })
82
+ defineOptions({ name: 'UCodeEditor', inheritAttrs: false })
49
83
 
50
84
  const props = withDefaults(defineProps<CodeEditorProps>(), {
51
85
  disabled: undefined,
52
86
  readonly: undefined,
53
87
  dark: false,
88
+ zoomable: true,
54
89
  defaultLines: 8
55
90
  })
56
91
 
@@ -68,11 +103,24 @@ const { disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
68
103
  readonly: false
69
104
  })
70
105
 
106
+ /** 放大状态:复用同一组件根 DOM / 同一 EditorView 实例,Teleport 移入 body 全屏遮罩 */
107
+ const zoomed = shallowRef(false)
108
+
109
+ /** 放大期间原位置占位的高度(取放大前组件根高度) */
110
+ const placeholderHeight = shallowRef('')
111
+
112
+ /** 放大遮罩的 z 轴层级,进入放大时取一次,避免渲染期反复自增 */
113
+ const zoomZIndex = shallowRef<number>()
114
+
115
+ const rootRef = useTemplateRef<HTMLElement>('root')
116
+ const zoomWrapRef = useTemplateRef<HTMLElement>('zoomWrap')
117
+
71
118
  const className = computed<string[]>(() => [
72
119
  cls.b,
73
120
  bem.is('disabled', disabled.value),
74
121
  bem.is('readonly', readonly.value),
75
- bem.is('dark', props.dark)
122
+ bem.is('dark', props.dark),
123
+ bem.is('zoomed', zoomed.value)
76
124
  ])
77
125
 
78
126
  const rootStyle = computed<CSSProperties>(() => ({
@@ -95,6 +143,45 @@ const langLabel = computed(() =>
95
143
  langs.value.length === 1 && activeLang.value ? activeLang.value.toUpperCase() : undefined
96
144
  )
97
145
 
146
+ /** 语言标识或放大/关闭按钮任一存在时才渲染工具栏 */
147
+ const hasToolbar = computed(
148
+ () => showLangSelect.value || !!langLabel.value || props.zoomable || zoomed.value
149
+ )
150
+
151
+ function enterZoom() {
152
+ if (disabled.value || zoomed.value) return
153
+ const root = rootRef.value
154
+ if (root) placeholderHeight.value = `${root.offsetHeight}px`
155
+ zoomZIndex.value = zIndex()
156
+ zoomed.value = true
157
+ // 遮罩层级高于创建编辑器时写入的 tooltip 层级,同步抬升避免补全提示被遮罩盖住
158
+ editor.value?.dispatch({
159
+ effects: tooltipThemeCompartment.reconfigure(
160
+ EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } })
161
+ )
162
+ })
163
+ // 对齐 dialog 先例:放大按钮(u-icon)不可聚焦,点击后焦点在 body 上,
164
+ // keyup 不会向下经过遮罩,需主动聚焦遮罩,Esc 才能冒泡到 keyup.esc
165
+ nextTick(() => zoomWrapRef.value?.focus())
166
+ }
167
+
168
+ function exitZoom() {
169
+ if (!zoomed.value) return
170
+ zoomed.value = false
171
+ }
172
+
173
+ /** 放大期间锁定 body 滚动,退出后恢复原值 */
174
+ let prevBodyOverflow = ''
175
+
176
+ watch(zoomed, (v) => {
177
+ if (v) {
178
+ prevBodyOverflow = document.body.style.overflow
179
+ document.body.style.overflow = 'hidden'
180
+ } else {
181
+ document.body.style.overflow = prevBodyOverflow
182
+ }
183
+ })
184
+
98
185
  const shellConfig = computed<ShellConfig>(() => ({
99
186
  prefix: props.prefix ?? '',
100
187
  suffix: props.suffix ?? ''
@@ -108,6 +195,7 @@ const editableCompartment = new Compartment()
108
195
  const readOnlyCompartment = new Compartment()
109
196
  const langCompartment = new Compartment()
110
197
  const shellCompartment = new Compartment()
198
+ const tooltipThemeCompartment = new Compartment()
111
199
 
112
200
  /** 聚焦时的正文快照,用于失焦时判断是否触发 change */
113
201
  let focusSnapshot = ''
@@ -133,7 +221,7 @@ function buildExtensions(): Extension[] {
133
221
  return [
134
222
  basicSetup,
135
223
  tooltips({ parent: document.body }),
136
- EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } }),
224
+ tooltipThemeCompartment.of(EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } })),
137
225
  themeCompartment.of(props.dark ? oneDark : []),
138
226
  editableCompartment.of(EditorView.editable.of(!disabled.value)),
139
227
  readOnlyCompartment.of(EditorState.readOnly.of(readonly.value)),
@@ -316,5 +404,8 @@ watch(
316
404
  { immediate: true }
317
405
  )
318
406
 
319
- onBeforeUnmount(destroyEditor)
407
+ onBeforeUnmount(() => {
408
+ destroyEditor()
409
+ if (zoomed.value) document.body.style.overflow = prevBodyOverflow
410
+ })
320
411
  </script>
@@ -16,6 +16,8 @@ $root-name: code-editor;
16
16
  --u-code-editor-selection-bg: #{fn.color-a(color, 16, primary)};
17
17
 
18
18
  position: relative;
19
+ display: flex;
20
+ flex-direction: column;
19
21
  width: 100%;
20
22
  max-height: 480px;
21
23
  border-radius: fn.use-var(radius, default);
@@ -32,31 +34,77 @@ $root-name: code-editor;
32
34
  border-color: fn.use-var(color, primary);
33
35
  }
34
36
 
37
+ @include m.e(toolbar) {
38
+ flex-shrink: 0;
39
+ padding: 4px fn.use-var(gap, small);
40
+ border-bottom: 1px solid var(--u-code-editor-border);
41
+ @include m.flex($justify: space-between);
42
+ }
43
+
44
+ @include m.e(toolbar-actions) {
45
+ margin-left: auto;
46
+ gap: fn.use-var(gap, small);
47
+ @include m.flex;
48
+ }
49
+
35
50
  @include m.e(lang-select) {
36
- position: absolute;
37
- top: 2px;
38
- right: 2px;
39
- z-index: 2;
40
51
  width: 88px;
41
52
  border: none;
42
-
43
- input {
44
- text-align: right;
45
- }
46
53
  }
47
54
 
48
55
  @include m.e(lang-label) {
49
- position: absolute;
50
- top: 2px;
51
- right: 8px;
52
- z-index: 2;
53
56
  font-size: 12px;
54
- line-height: 24px;
55
57
  color: var(--u-code-editor-gutter-fg);
56
- pointer-events: none;
57
58
  user-select: none;
58
59
  }
59
60
 
61
+ @include m.e(btn-zoom, btn-close) {
62
+ cursor: pointer;
63
+ font-size: 14px;
64
+ color: var(--u-code-editor-gutter-fg);
65
+ transition: color fn.use-var(transition, fast) fn.use-var(transition, ease);
66
+
67
+ &:hover {
68
+ color: fn.use-var(color, primary);
69
+ }
70
+
71
+ @include m.is(disabled) {
72
+ cursor: not-allowed;
73
+
74
+ &:hover {
75
+ color: var(--u-code-editor-gutter-fg);
76
+ }
77
+ }
78
+ }
79
+
80
+ // 编辑器滚动区:工具栏在其之外,任何滚动位置都不遮挡代码
81
+ @include m.e(scroll) {
82
+ flex: 1;
83
+ min-height: 0;
84
+ }
85
+
86
+ // 放大时原位置的等高占位,撑起布局避免位移
87
+ @include m.e(placeholder) {
88
+ box-sizing: border-box;
89
+ width: 100%;
90
+ }
91
+
92
+ // 放大遮罩:平时 display: contents 不参与布局,放大时成为 body 下的全屏遮罩
93
+ @include m.e(zoom-wrap) {
94
+ display: contents;
95
+
96
+ @include m.is(zoomed) {
97
+ position: fixed;
98
+ inset: 0;
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ background-color: rgba(0, 0, 0, 0.32);
103
+ // 遮罩主动聚焦承接 Esc(对齐 dialog 遮罩),不显示焦点框
104
+ outline: none;
105
+ }
106
+ }
107
+
60
108
  .cm-editor {
61
109
  background: transparent;
62
110
  color: var(--u-code-editor-fg);
@@ -127,6 +175,15 @@ $root-name: code-editor;
127
175
  --u-code-editor-selection-bg: rgba(99, 162, 255, 0.25);
128
176
  }
129
177
 
178
+ // 放大态:遮罩内视觉居中,脱离 480px 最大高度限制
179
+ @include m.is(zoomed) {
180
+ width: 80vw;
181
+ height: 80vh;
182
+ max-height: none;
183
+ border-radius: fn.use-var(radius, large);
184
+ box-shadow: fn.use-var(shadow, lg);
185
+ }
186
+
130
187
  @include m.is(disabled) {
131
188
  background-color: fn.use-var(color, disabled);
132
189
  box-shadow: none;
@@ -1,2 +1,3 @@
1
+ import '../icon/style'
1
2
  import '../select/style'
2
3
  import './style.scss'