x-next 1.18.0 → 1.18.2
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.
- package/AI_USAGE/catalog.md +1 -1
- package/AI_USAGE/components/alert-api.md +1 -1
- package/AI_USAGE/components/alert.md +1 -1
- package/AI_USAGE/components/bar-chart-api.md +1 -1
- package/AI_USAGE/components/bar-chart.md +1 -1
- package/AI_USAGE/components/boxicons.md +1 -1
- package/AI_USAGE/components/button-api.md +1 -1
- package/AI_USAGE/components/button.md +4 -4
- package/AI_USAGE/components/charts.md +1 -1
- package/AI_USAGE/components/checkbox-api.md +1 -1
- package/AI_USAGE/components/checkbox.md +1 -1
- package/AI_USAGE/components/color-picker-api.md +1 -1
- package/AI_USAGE/components/color-picker.md +1 -1
- package/AI_USAGE/components/config-provider-api.md +1 -1
- package/AI_USAGE/components/config-provider.md +1 -1
- package/AI_USAGE/components/date-picker-api.md +44 -26
- package/AI_USAGE/components/date-picker.md +78 -3
- package/AI_USAGE/components/dialog-api.md +2 -2
- package/AI_USAGE/components/dialog.md +5 -1
- package/AI_USAGE/components/draggable-api.md +1 -1
- package/AI_USAGE/components/draggable.md +1 -1
- package/AI_USAGE/components/drawer-api.md +1 -1
- package/AI_USAGE/components/drawer.md +1 -1
- package/AI_USAGE/components/dropdown-api.md +6 -1
- package/AI_USAGE/components/dropdown.md +2 -2
- package/AI_USAGE/components/empty-api.md +1 -1
- package/AI_USAGE/components/empty.md +1 -1
- package/AI_USAGE/components/finicon.md +1 -1
- package/AI_USAGE/components/form-api.md +1 -1
- package/AI_USAGE/components/form.md +1 -1
- package/AI_USAGE/components/grid-api.md +1 -1
- package/AI_USAGE/components/grid.md +1 -1
- package/AI_USAGE/components/heatmap-api.md +1 -1
- package/AI_USAGE/components/heatmap.md +1 -1
- package/AI_USAGE/components/icon-api.md +1 -1
- package/AI_USAGE/components/icon.md +1 -1
- package/AI_USAGE/components/image-api.md +1 -1
- package/AI_USAGE/components/image.md +1 -1
- package/AI_USAGE/components/input-api.md +1 -1
- package/AI_USAGE/components/input-number-api.md +1 -1
- package/AI_USAGE/components/input-number.md +1 -1
- package/AI_USAGE/components/input-tag-api.md +1 -1
- package/AI_USAGE/components/input-tag.md +1 -1
- package/AI_USAGE/components/input.md +1 -1
- package/AI_USAGE/components/layout-api.md +1 -1
- package/AI_USAGE/components/layout.md +1 -1
- package/AI_USAGE/components/line-chart-api.md +1 -1
- package/AI_USAGE/components/line-chart.md +1 -1
- package/AI_USAGE/components/link-api.md +1 -1
- package/AI_USAGE/components/link.md +1 -1
- package/AI_USAGE/components/menu-api.md +1 -1
- package/AI_USAGE/components/menu.md +1 -1
- package/AI_USAGE/components/message-api.md +1 -1
- package/AI_USAGE/components/message-box-api.md +1 -1
- package/AI_USAGE/components/message-box.md +1 -1
- package/AI_USAGE/components/message.md +1 -1
- package/AI_USAGE/components/network-api.md +1 -1
- package/AI_USAGE/components/network.md +1 -1
- package/AI_USAGE/components/notification-api.md +1 -1
- package/AI_USAGE/components/notification.md +1 -1
- package/AI_USAGE/components/pagination-api.md +1 -1
- package/AI_USAGE/components/pagination.md +1 -1
- package/AI_USAGE/components/pie-chart-api.md +1 -1
- package/AI_USAGE/components/pie-chart.md +1 -1
- package/AI_USAGE/components/popconfirm-api.md +1 -1
- package/AI_USAGE/components/popconfirm.md +1 -1
- package/AI_USAGE/components/popover-api.md +1 -1
- package/AI_USAGE/components/popover.md +3 -1
- package/AI_USAGE/components/popup-api.md +1 -1
- package/AI_USAGE/components/popup.md +1 -1
- package/AI_USAGE/components/progress-api.md +1 -1
- package/AI_USAGE/components/progress.md +1 -1
- package/AI_USAGE/components/radio-api.md +1 -1
- package/AI_USAGE/components/radio.md +1 -1
- package/AI_USAGE/components/rate-api.md +1 -1
- package/AI_USAGE/components/rate.md +1 -1
- package/AI_USAGE/components/resize-box-api.md +1 -1
- package/AI_USAGE/components/resize-box.md +1 -1
- package/AI_USAGE/components/scrollbar-api.md +1 -1
- package/AI_USAGE/components/scrollbar.md +1 -1
- package/AI_USAGE/components/select-api.md +1 -1
- package/AI_USAGE/components/select.md +1 -1
- package/AI_USAGE/components/skeleton-api.md +1 -1
- package/AI_USAGE/components/skeleton.md +1 -1
- package/AI_USAGE/components/slider-api.md +1 -1
- package/AI_USAGE/components/slider.md +1 -1
- package/AI_USAGE/components/space-api.md +1 -1
- package/AI_USAGE/components/space.md +1 -1
- package/AI_USAGE/components/spin-api.md +1 -1
- package/AI_USAGE/components/spin.md +1 -1
- package/AI_USAGE/components/steps-api.md +1 -1
- package/AI_USAGE/components/steps.md +1 -1
- package/AI_USAGE/components/switch-api.md +1 -1
- package/AI_USAGE/components/switch.md +1 -1
- package/AI_USAGE/components/table-api.md +1 -1
- package/AI_USAGE/components/table.md +1 -1
- package/AI_USAGE/components/tabs-api.md +1 -1
- package/AI_USAGE/components/tabs.md +1 -1
- package/AI_USAGE/components/tag-api.md +1 -1
- package/AI_USAGE/components/tag.md +1 -1
- package/AI_USAGE/components/textarea-api.md +1 -1
- package/AI_USAGE/components/textarea.md +1 -1
- package/AI_USAGE/components/time-picker-api.md +1 -1
- package/AI_USAGE/components/time-picker.md +1 -1
- package/AI_USAGE/components/time-range-selector-api.md +1 -1
- package/AI_USAGE/components/time-range-selector.md +1 -1
- package/AI_USAGE/components/timeline-api.md +1 -1
- package/AI_USAGE/components/timeline.md +1 -1
- package/AI_USAGE/components/tooltip-api.md +1 -1
- package/AI_USAGE/components/tooltip.md +1 -1
- package/AI_USAGE/components/transfer-api.md +1 -1
- package/AI_USAGE/components/transfer.md +1 -1
- package/AI_USAGE/components/tree-select-api.md +1 -1
- package/AI_USAGE/components/tree-select.md +1 -1
- package/AI_USAGE/components/trend-chart-api.md +1 -1
- package/AI_USAGE/components/trend-chart.md +1 -1
- package/AI_USAGE/components/trigger-api.md +1 -1
- package/AI_USAGE/components/trigger.md +1 -1
- package/AI_USAGE/components/upload-api.md +1 -1
- package/AI_USAGE/components/upload.md +1 -1
- package/AI_USAGE/components/watermark-api.md +1 -1
- package/AI_USAGE/components/watermark.md +1 -1
- package/AI_USAGE/core.md +1 -1
- package/AI_USAGE/index.md +1 -1
- package/AI_USAGE/recipes/form-on-demand.md +1 -1
- package/AI_USAGE.md +138 -34
- package/CHANGELOG.md +28 -0
- package/README.md +108 -212
- package/dist/_container/render-function.d.ts +2 -2
- package/dist/components/_components/picker/input-range.vue.d.ts +1 -1
- package/dist/components/date-picker/DatePanel.vue.d.ts +10 -1
- package/dist/components/date-picker/DatePicker.vue.d.ts +22 -10
- package/dist/components/date-picker/index.d.ts +156 -54
- package/dist/components/date-picker/utils.d.ts +4 -4
- package/dist/components/dropdown/Dropdown.vue.d.ts +1 -0
- package/dist/components/dropdown/DropdownButton.vue.d.ts +1 -0
- package/dist/components/dropdown/DropdownSubmenu.vue.d.ts +1 -0
- package/dist/components/dropdown/context.d.ts +1 -0
- package/dist/components/dropdown/index.d.ts +8 -0
- package/dist/components/dropdown/use-keyboard.d.ts +1 -0
- package/dist/components/menu/MenuItem.d.ts +2 -2
- package/dist/components/menu/context.d.ts +3 -3
- package/dist/components/menu/index.d.ts +6 -6
- package/dist/components/menu/sub-menu-pop.vue.d.ts +2 -2
- package/dist/components/time-picker/TimePicker.vue.d.ts +1 -1
- package/dist/components/time-picker/index.d.ts +2 -2
- package/dist/es/components/_components/picker/input-range.vue.js +12 -12
- package/dist/es/components/_components/picker/input-range.vue2.js +45 -45
- package/dist/es/components/_components/picker/input.vue2.js +24 -24
- package/dist/es/components/date-picker/DatePanel.vue.js +47 -47
- package/dist/es/components/date-picker/DatePanel.vue2.js +68 -59
- package/dist/es/components/date-picker/DatePicker.vue.js +65 -59
- package/dist/es/components/date-picker/DatePicker.vue2.js +387 -284
- package/dist/es/components/date-picker/index.js +57 -36
- package/dist/es/components/date-picker/utils.js +132 -122
- package/dist/es/components/dialog/Dialog.js +43 -40
- package/dist/es/components/dialog/props.js +1 -1
- package/dist/es/components/dropdown/Dropdown.vue2.js +66 -50
- package/dist/es/components/dropdown/dropdown-panel.vue2.js +48 -43
- package/dist/es/components/dropdown/use-keyboard.js +36 -28
- package/dist/es/components/popover/Popover.js +72 -32
- package/dist/es/style.css +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.umd.js +3 -3
- package/dist/style/button.css +1 -1
- package/dist/style/date-picker.css +1 -1
- package/dist/style/dialog.css +1 -1
- package/dist/style/message-box.css +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -1
package/AI_USAGE.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# x-next AI 使用手册
|
|
3
3
|
|
|
4
|
-
适用版本:**x-next@1.18.
|
|
4
|
+
适用版本:**x-next@1.18.2**。Vue:`^3.5.0`;Node:`>=20.19.0`。
|
|
5
5
|
|
|
6
|
-
来源指纹(AI 行为说明、docs 导入快照、映射、样式依赖、版本、公开类型和 API 参考):`
|
|
6
|
+
来源指纹(AI 行为说明、docs 导入快照、映射、样式依赖、版本、公开类型和 API 参考):`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
7
7
|
|
|
8
8
|
覆盖 59 个组件族与 106 个公开组件/服务导出。优先通过 [本地按需索引](./AI_USAGE/index.md) 读取组件页和 API,不为查本包用法默认搜索网络。
|
|
9
9
|
|
|
@@ -534,6 +534,8 @@ function restore() { visible.value = true; feedback.value = '提示显示中'; }
|
|
|
534
534
|
|
|
535
535
|
[组件文档与 live demo](https://x-next.yjmf.com/components/dialog)。从根入口导入 `DialogComponent as XDialog`,普通 `v-model` 为布尔值且默认 `false`。`renderTo='body'`、`mask=true`、`maskToClose=true`、`escToClose=true`、`destroyOnClosed=true`;`width` 支持数字或 CSS 长度。
|
|
536
536
|
|
|
537
|
+
声明式组件默认 `center=false`、`top='100px'`,`top` 仅在非居中、非全屏时生效;命令式 `Dialog(options)` 保持默认居中,其服务默认 `top=0`。
|
|
538
|
+
|
|
537
539
|
`title`、默认正文、`footer` 是公开插槽,默认不生成业务按钮。`close(action, event?)` 的 action 为 `'cancel' | 'ok'`,`closed` 表示关闭动画结束;直接改模型不会调用业务取消逻辑。根入口服务 `Dialog(options)` 返回 `close()` / `update(options)` 句柄。
|
|
538
540
|
|
|
539
541
|
```vue
|
|
@@ -680,6 +682,8 @@ function cancel(_event: Event) { feedback.value = '已取消删除'; }
|
|
|
680
682
|
|
|
681
683
|
`popup-visible-change(visible)` 返回布尔值,`show` / `hide` 无参数。点击触发器或外部默认可以关闭;`popupContainer` 和 `renderToBody` 决定宿主,用于定位、滚动及裁剪。通过 ConfigProvider 配置的主题会由 Trigger 同步到浮层根,默认挂到 body 也生效;任意业务 CSS 变量或仅在局部 DOM 调用 applyThemeColor 不等于该注入协议,仍要核对实际继承。
|
|
682
684
|
|
|
685
|
+
Escape 从触发器、内容或鼠标打开后的 body 焦点关闭当前最上层 Popover,并归还触发器焦点;组合输入期间保留浮层。关闭和卸载会清理键盘监听,focus 触发模式不会因焦点归还重新打开。
|
|
686
|
+
|
|
683
687
|
```vue
|
|
684
688
|
<script setup lang="ts">
|
|
685
689
|
import { ref } from 'vue';
|
|
@@ -730,7 +734,7 @@ function advance() { percent.value = Math.min(1, percent.value + 0.25); }
|
|
|
730
734
|
|
|
731
735
|
[组件文档与 live demo](https://x-next.yjmf.com/components/dropdown)。使用 `v-model:popup-visible`,默认 `trigger='click'`、`position='bottom'`、`hideOnSelect=true`。根入口导出 `DropdownOption`、`DropdownGroup`、`DropdownSubmenu`;菜单内容放 `content` 插槽,另有 `empty` / `footer` 插槽。
|
|
732
736
|
|
|
733
|
-
`select(value, event)` 返回 `string | number | Record<string, any> | undefined` 和 `Event`,`popup-visible-change` 返回布尔值。选项支持 `disabled
|
|
737
|
+
`select(value, event)` 返回 `string | number | Record<string, any> | undefined` 和 `Event`,`popup-visible-change` 返回布尔值。选项支持 `disabled`;Tab / Shift+Tab 从触发器、菜单项或子菜单退出根菜单,并从根触发器继续浏览器默认顺序导航。字符搜索 typeahead、自定义控件的通用键盘代理仍有边界,不能据方向键导航推断这些能力已实现。
|
|
734
738
|
|
|
735
739
|
```vue
|
|
736
740
|
<script setup lang="ts">
|
|
@@ -1912,7 +1916,7 @@ const sizes = ['mini', 'small', 'medium', 'large', 'huge'] as const;
|
|
|
1912
1916
|
|
|
1913
1917
|
### 尺寸
|
|
1914
1918
|
|
|
1915
|
-
`mini`、`small`、`medium`、`large`、`huge` 的默认高度分别为 24、28、32、36、38px。
|
|
1919
|
+
`mini`、`small`、`medium`、`large`、`huge` 的默认高度分别为 24、28、32、36、38px,字号分别为 12、13、14、15、16px。
|
|
1916
1920
|
|
|
1917
1921
|
以下为默认主题中的尺寸规格;链接和形状选项会按对应规则调整布局。
|
|
1918
1922
|
|
|
@@ -1921,8 +1925,8 @@ const sizes = ['mini', 'small', 'medium', 'large', 'huge'] as const;
|
|
|
1921
1925
|
| `mini` | 24px | 12px | 500 | 8px | 4px |
|
|
1922
1926
|
| `small` | 28px | 13px | 500 | 10px | 4px |
|
|
1923
1927
|
| `medium` | 32px | 14px | 500 | 14px | 4px |
|
|
1924
|
-
| `large` | 36px |
|
|
1925
|
-
| `huge` | 38px | 16px | 500 |
|
|
1928
|
+
| `large` | 36px | 15px | 500 | 16px | 6px |
|
|
1929
|
+
| `huge` | 38px | 16px | 500 | 20px | 6px |
|
|
1926
1930
|
|
|
1927
1931
|
```vue
|
|
1928
1932
|
<script setup lang="ts">
|
|
@@ -4869,6 +4873,10 @@ const range = ref(['2026-06-01', '2026-06-30']);
|
|
|
4869
4873
|
|
|
4870
4874
|
### 中国农历展示
|
|
4871
4875
|
|
|
4876
|
+
### 农历空辅助行和禁用状态
|
|
4877
|
+
|
|
4878
|
+
只显示节日和节气时,部分日期没有辅助文案;数字、选中圆圈和范围色带仍共用同一日期区。周末禁用时,数字与农历文字一同弱化,包括绑定值已命中禁用日期的情况。
|
|
4879
|
+
|
|
4872
4880
|
```vue
|
|
4873
4881
|
<script setup lang="ts">
|
|
4874
4882
|
import 'x-next/style.css';
|
|
@@ -4887,6 +4895,24 @@ const range = ref(['2026-06-19', '2026-09-25']);
|
|
|
4887
4895
|
</template>
|
|
4888
4896
|
```
|
|
4889
4897
|
|
|
4898
|
+
```vue
|
|
4899
|
+
<script setup lang="ts">
|
|
4900
|
+
import 'x-next/style.css';
|
|
4901
|
+
import { RangePicker, DatePicker } from 'x-next';
|
|
4902
|
+
import { ref } from 'vue';
|
|
4903
|
+
const range = ref(['2026-06-19', '2026-07-07']);
|
|
4904
|
+
const date = ref('2026-06-20');
|
|
4905
|
+
const disabledDate = (current: Date) => [0, 6].includes(current.getDay());
|
|
4906
|
+
import type { HTMLAttributes } from 'vue';
|
|
4907
|
+
const nativeAttrs1 = { "aria-label": "节日节气范围" } satisfies HTMLAttributes;
|
|
4908
|
+
const nativeAttrs2 = { "aria-label": "农历日期" } satisfies HTMLAttributes;
|
|
4909
|
+
</script>
|
|
4910
|
+
<template>
|
|
4911
|
+
<RangePicker v-bind="nativeAttrs1" v-model="range" :show-lunar="{ showLunarDate: false }" />
|
|
4912
|
+
<DatePicker v-bind="nativeAttrs2" v-model="date" show-lunar :disabled-date="disabledDate" />
|
|
4913
|
+
</template>
|
|
4914
|
+
```
|
|
4915
|
+
|
|
4890
4916
|
### 带时间的日期选择
|
|
4891
4917
|
|
|
4892
4918
|
```vue
|
|
@@ -4904,6 +4930,51 @@ const dateTimeRange = ref(['2026-06-02 00:00:00', '2026-07-29 09:09:06']);
|
|
|
4904
4930
|
</template>
|
|
4905
4931
|
```
|
|
4906
4932
|
|
|
4933
|
+
### 手输与禁用规则
|
|
4934
|
+
|
|
4935
|
+
第一项可输入 `2026-06-06`(禁用周末)或 `2026-02-31`(不存在的日期),按 Enter 后会恢复原值。第二项可输入 `2026-06-04 15:46:12`,提交后保留时分秒;0–8 时和每小时 30 分不可选,也不能通过手输提交。`disabledTime` 按字段覆盖 `timePickerProps` 中的时间禁用函数。
|
|
4936
|
+
|
|
4937
|
+
```vue
|
|
4938
|
+
<script setup lang="ts">
|
|
4939
|
+
import 'x-next/style.css';
|
|
4940
|
+
import { DatePicker } from 'x-next';
|
|
4941
|
+
import { ref } from 'vue';
|
|
4942
|
+
const date = ref('2026-06-04');
|
|
4943
|
+
const dateTime = ref('2026-06-04 09:15:00');
|
|
4944
|
+
const log = ref('等待有效提交');
|
|
4945
|
+
const disabledDate = (current: Date) => [0, 6].includes(current.getDay());
|
|
4946
|
+
const timeProps = { disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 7, 8] };
|
|
4947
|
+
const disabledTime = () => ({ disabledMinutes: () => [30] });
|
|
4948
|
+
import type { HTMLAttributes } from 'vue';
|
|
4949
|
+
const nativeAttrs1 = { "aria-label": "预约日期" } satisfies HTMLAttributes;
|
|
4950
|
+
const nativeAttrs2 = { "aria-label": "预约日期时间" } satisfies HTMLAttributes;
|
|
4951
|
+
</script>
|
|
4952
|
+
<template>
|
|
4953
|
+
<DatePicker v-bind="nativeAttrs1" v-model="date" :disabled-date="disabledDate" />
|
|
4954
|
+
<DatePicker v-bind="nativeAttrs2" v-model="dateTime" show-time :time-picker-props="timeProps" :disabled-time="disabledTime" @change="log = `提交:${$event}`" />
|
|
4955
|
+
<p>{{ date }};{{ dateTime }};{{ log }}</p>
|
|
4956
|
+
</template>
|
|
4957
|
+
```
|
|
4958
|
+
|
|
4959
|
+
### 周一起始的周选择
|
|
4960
|
+
|
|
4961
|
+
周选择的网格、点击、手输和提交保持相同的周起始日。下方可输入 `2026-40th`,或选择 2026 年 9 月 28 日到 10 月 4 日中的任一天,再重新打开确认高亮行。
|
|
4962
|
+
|
|
4963
|
+
```vue
|
|
4964
|
+
<script setup lang="ts">
|
|
4965
|
+
import 'x-next/style.css';
|
|
4966
|
+
import { WeekPicker } from 'x-next';
|
|
4967
|
+
import { ref } from 'vue';
|
|
4968
|
+
const week = ref('2026-40th');
|
|
4969
|
+
import type { HTMLAttributes } from 'vue';
|
|
4970
|
+
const nativeAttrs1 = { "aria-label": "排期周" } satisfies HTMLAttributes;
|
|
4971
|
+
</script>
|
|
4972
|
+
<template>
|
|
4973
|
+
<WeekPicker v-bind="nativeAttrs1" v-model="week" :day-start-of-week="1" />
|
|
4974
|
+
<p>{{ week }}</p>
|
|
4975
|
+
</template>
|
|
4976
|
+
```
|
|
4977
|
+
|
|
4907
4978
|
### 月范围和受控面板
|
|
4908
4979
|
|
|
4909
4980
|
```vue
|
|
@@ -4976,18 +5047,24 @@ const date = ref('2026-09-30');
|
|
|
4976
5047
|
|
|
4977
5048
|
### 状态
|
|
4978
5049
|
|
|
5050
|
+
范围仅禁用一端时,面板与手输只更新另一端,并保持原有起止顺序;为避免清掉锁定值,此时隐藏整体清空按钮。
|
|
5051
|
+
|
|
4979
5052
|
```vue
|
|
4980
5053
|
<script setup lang="ts">
|
|
4981
5054
|
import 'x-next/style.css';
|
|
4982
|
-
import { DatePicker } from 'x-next';
|
|
5055
|
+
import { DatePicker, RangePicker } from 'x-next';
|
|
4983
5056
|
import { ref } from 'vue';
|
|
4984
5057
|
const date = ref('2026-09-30');
|
|
5058
|
+
const range = ref(['2026-06-01', '2026-06-30']);
|
|
5059
|
+
import type { HTMLAttributes } from 'vue';
|
|
5060
|
+
const nativeAttrs1 = { "aria-label": "开始日期已锁定" } satisfies HTMLAttributes;
|
|
4985
5061
|
</script>
|
|
4986
5062
|
<template>
|
|
4987
5063
|
<DatePicker v-model="date" allow-clear />
|
|
4988
5064
|
<DatePicker default-value="2026-06-04" readonly />
|
|
4989
5065
|
<DatePicker default-value="2026-06-04" disabled />
|
|
4990
5066
|
<DatePicker v-model="date" error />
|
|
5067
|
+
<RangePicker v-bind="nativeAttrs1" v-model="range" :disabled="[true, false]" />
|
|
4991
5068
|
</template>
|
|
4992
5069
|
```
|
|
4993
5070
|
|
|
@@ -5141,7 +5218,9 @@ const nativeAttrs2 = { "aria-label": "预约日期范围" } satisfies HTMLAttrib
|
|
|
5141
5218
|
|
|
5142
5219
|
- `showTime` 仅在日期和日期范围模式生效,默认格式为 `YYYY-MM-DD HH:mm:ss`,选择后需要点击“确定”提交。
|
|
5143
5220
|
- `showLunar` 仅影响日期格辅助展示,不改变 `modelValue`、`format`、范围排序或禁用逻辑;内置数据来自香港天文台 1901-2100 年公历 / 农历对照表,超出范围时默认不展示。
|
|
5144
|
-
-
|
|
5221
|
+
- 合法手输按 Enter 或失焦提交,日期时间保留时分秒。不存在的日期、越界时间或命中禁用规则的输入会恢复已提交值;编辑空草稿期间不立即回填。
|
|
5222
|
+
- 今天、快捷项与确认提交同样遵守禁用规则;确认前规则变化导致草稿不可选时,“确定”按钮禁用。日期时间面板点选仍需点击“确定”提交。
|
|
5223
|
+
- 面板标题为年月文本,使用左右箭头翻页;当前不提供点击标题进行年月视图下钻。
|
|
5145
5224
|
- 普通范围选择会在选择结束值后自动排序并提交;开启 `showTime` 后需要点击“确定”提交。
|
|
5146
5225
|
- `valueFormat="timestamp"` 会让绑定值和事件值返回时间戳。
|
|
5147
5226
|
|
|
@@ -5720,6 +5799,8 @@ const beforeClose = async (action: 'cancel' | 'ok') => {
|
|
|
5720
5799
|
|
|
5721
5800
|
### 显示方式
|
|
5722
5801
|
|
|
5802
|
+
默认对话框距离顶部 `100px`,可通过 `top` 自定义;设置 `center` 后垂直居中,`fullscreen` 则占满容器。右上角关闭按钮悬停时显示背景,也支持键盘聚焦。
|
|
5803
|
+
|
|
5723
5804
|
```vue
|
|
5724
5805
|
<script setup lang="ts">
|
|
5725
5806
|
import 'x-next/style.css';
|
|
@@ -20450,7 +20531,7 @@ type GridItemInstance = InstanceType<typeof _GridItem>;
|
|
|
20450
20531
|
| pickerValue | 面板显示日期 | undefined | string | number | Date | (DatePickerValue | undefined)[] | 否 | 未声明 |
|
|
20451
20532
|
| defaultPickerValue | 默认面板显示日期 | undefined | string | number | Date | (DatePickerValue | undefined)[] | 否 | 未声明 |
|
|
20452
20533
|
| placeholder | 占位文案 | undefined | string | string[] | 否 | 未声明 |
|
|
20453
|
-
| disabled |
|
|
20534
|
+
| disabled | 是否禁用;范围数组分别锁定两端,单端锁定时只更新另一端并隐藏整体清空 | undefined | false | true | boolean[] | 否 | false |
|
|
20454
20535
|
| readonly | 是否只读 | undefined | false | true | 否 | false |
|
|
20455
20536
|
| disabledInput | 禁止输入框键盘输入但允许面板选择 | undefined | false | true | 否 | false |
|
|
20456
20537
|
| inputReadOnly | 输入框只读,常用于移动端避免软键盘 | undefined | false | true | 否 | false |
|
|
@@ -20472,8 +20553,8 @@ type GridItemInstance = InstanceType<typeof _GridItem>;
|
|
|
20472
20553
|
| showToday | 是否显示今天 / 本月 / 今年按钮 | undefined | false | true | 否 | true |
|
|
20473
20554
|
| showConfirmBtn | 是否显示确认按钮 | undefined | false | true | 否 | false |
|
|
20474
20555
|
| showTime | 是否开启日期时间选择,仅 date / date-range 生效 | undefined | false | true | 否 | false |
|
|
20475
|
-
| timePickerProps | 时间列配置,支持 format、step、use12Hours、disabledHours、disabledMinutes、disabledSeconds、hideDisabledOptions、defaultValue | undefined |
|
|
20476
|
-
| disabledTime | 禁用时间,需要配合 showTime 使用 | undefined | (current?: Date, type?: DatePickerRange) =>
|
|
20556
|
+
| timePickerProps | 时间列配置,支持 format、step、use12Hours、disabledHours、disabledMinutes、disabledSeconds、hideDisabledOptions、defaultValue | undefined | DatePickerTimePickerProps | 否 | 未声明 |
|
|
20557
|
+
| disabledTime | 禁用时间,需要配合 showTime 使用 | undefined | (current?: Date, type?: DatePickerRange) => DatePickerDisabledTimeProps | undefined | 否 | 未声明 |
|
|
20477
20558
|
| showLunar | 是否展示中国农历辅助信息,支持控制农历日期、农历节日、节气和公历节日 | undefined | false | true | { showLunarDate?: boolean; showLunarFestival?: boolean; showSolarTerm?: boolean; showSolarFestival?: boolean; fallbackText?: string; } | 否 | false |
|
|
20478
20559
|
|
|
20479
20560
|
### Events
|
|
@@ -20504,9 +20585,12 @@ type GridItemInstance = InstanceType<typeof _GridItem>;
|
|
|
20504
20585
|
| cell | 自定义日期单元格 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
20505
20586
|
| extra | 面板快捷区额外内容 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
20506
20587
|
|
|
20507
|
-
### 实例方法
|
|
20588
|
+
### 实例方法 / 暴露值
|
|
20508
20589
|
|
|
20509
|
-
|
|
20590
|
+
| 名称 | 公开类型 |
|
|
20591
|
+
| --- | --- |
|
|
20592
|
+
| focus | () => void |
|
|
20593
|
+
| blur | () => void |
|
|
20510
20594
|
|
|
20511
20595
|
### 关联类型定义
|
|
20512
20596
|
|
|
@@ -20709,7 +20793,7 @@ interface DialogCaller {
|
|
|
20709
20793
|
| renderTo | 见场景用法与类型 | undefined | string | HTMLElement | 否 | "body" |
|
|
20710
20794
|
| disabled | 见场景用法与类型 | undefined | false | true | 否 | false |
|
|
20711
20795
|
| modelValue | 见场景用法与类型 | undefined | false | true | 否 | false |
|
|
20712
|
-
| top | 见场景用法与类型 | undefined | string | number | 否 | "
|
|
20796
|
+
| top | 见场景用法与类型 | undefined | string | number | 否 | "100px" |
|
|
20713
20797
|
| center | 见场景用法与类型 | undefined | false | true | 否 | false |
|
|
20714
20798
|
| width | 见场景用法与类型 | undefined | string | number | 否 | 0 |
|
|
20715
20799
|
| height | 见场景用法与类型 | undefined | string | number | 否 | 0 |
|
|
@@ -21060,6 +21144,7 @@ type DropdownOption = DOption | DGroup | DSubmenu;
|
|
|
21060
21144
|
|
|
21061
21145
|
interface DropdownContext {
|
|
21062
21146
|
popupMaxHeight: boolean | number;
|
|
21147
|
+
onTabOut?: () => void;
|
|
21063
21148
|
onOptionClick: (value: string | number | Record<string, unknown> | undefined, ev: Event) => void;
|
|
21064
21149
|
}
|
|
21065
21150
|
|
|
@@ -21169,6 +21254,7 @@ type DropdownOption = DOption | DGroup | DSubmenu;
|
|
|
21169
21254
|
|
|
21170
21255
|
interface DropdownContext {
|
|
21171
21256
|
popupMaxHeight: boolean | number;
|
|
21257
|
+
onTabOut?: () => void;
|
|
21172
21258
|
onOptionClick: (value: string | number | Record<string, unknown> | undefined, ev: Event) => void;
|
|
21173
21259
|
}
|
|
21174
21260
|
|
|
@@ -21263,6 +21349,7 @@ type DropdownOption = DOption | DGroup | DSubmenu;
|
|
|
21263
21349
|
|
|
21264
21350
|
interface DropdownContext {
|
|
21265
21351
|
popupMaxHeight: boolean | number;
|
|
21352
|
+
onTabOut?: () => void;
|
|
21266
21353
|
onOptionClick: (value: string | number | Record<string, unknown> | undefined, ev: Event) => void;
|
|
21267
21354
|
}
|
|
21268
21355
|
|
|
@@ -21363,6 +21450,7 @@ type DropdownOption = DOption | DGroup | DSubmenu;
|
|
|
21363
21450
|
|
|
21364
21451
|
interface DropdownContext {
|
|
21365
21452
|
popupMaxHeight: boolean | number;
|
|
21453
|
+
onTabOut?: () => void;
|
|
21366
21454
|
onOptionClick: (value: string | number | Record<string, unknown> | undefined, ev: Event) => void;
|
|
21367
21455
|
}
|
|
21368
21456
|
|
|
@@ -21469,6 +21557,7 @@ type DropdownOption = DOption | DGroup | DSubmenu;
|
|
|
21469
21557
|
|
|
21470
21558
|
interface DropdownContext {
|
|
21471
21559
|
popupMaxHeight: boolean | number;
|
|
21560
|
+
onTabOut?: () => void;
|
|
21472
21561
|
onOptionClick: (value: string | number | Record<string, unknown> | undefined, ev: Event) => void;
|
|
21473
21562
|
}
|
|
21474
21563
|
|
|
@@ -29088,8 +29177,8 @@ interface IMessageItem extends Required<Pick<IMessageOptions, 'duration' | 'posi
|
|
|
29088
29177
|
| showToday | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
29089
29178
|
| showConfirmBtn | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
29090
29179
|
| showTime | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
29091
|
-
| timePickerProps | 见场景用法与类型 | undefined |
|
|
29092
|
-
| disabledTime | 见场景用法与类型 | undefined | (current?: Date, type?: DatePickerRange) =>
|
|
29180
|
+
| timePickerProps | 见场景用法与类型 | undefined | DatePickerTimePickerProps | 否 | 透传内层组件;默认值见对应组件 |
|
|
29181
|
+
| disabledTime | 见场景用法与类型 | undefined | (current?: Date, type?: DatePickerRange) => DatePickerDisabledTimeProps | undefined | 否 | 透传内层组件;默认值见对应组件 |
|
|
29093
29182
|
| showLunar | 见场景用法与类型 | undefined | false | true | { showLunarDate?: boolean; showLunarFestival?: boolean; showSolarTerm?: boolean; showSolarFestival?: boolean; fallbackText?: string; } | 否 | 透传内层组件;默认值见对应组件 |
|
|
29094
29183
|
|
|
29095
29184
|
### Events
|
|
@@ -29114,9 +29203,12 @@ interface IMessageItem extends Required<Pick<IMessageOptions, 'duration' | 'posi
|
|
|
29114
29203
|
|
|
29115
29204
|
公开类型未逐项声明插槽;本页场景说明列出实际使用的插槽,不将任意插槽视为已支持。
|
|
29116
29205
|
|
|
29117
|
-
### 实例方法
|
|
29206
|
+
### 实例方法 / 暴露值
|
|
29118
29207
|
|
|
29119
|
-
|
|
29208
|
+
| 名称 | 公开类型 |
|
|
29209
|
+
| --- | --- |
|
|
29210
|
+
| focus | (() => void) & (() => void) |
|
|
29211
|
+
| blur | (() => void) & (() => void) |
|
|
29120
29212
|
|
|
29121
29213
|
### 关联类型定义
|
|
29122
29214
|
|
|
@@ -29974,8 +30066,8 @@ type PopconfirmTypes = 'primary' | 'success' | 'warning' | 'strong' | 'danger' |
|
|
|
29974
30066
|
| showToday | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
29975
30067
|
| showConfirmBtn | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
29976
30068
|
| showTime | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
29977
|
-
| timePickerProps | 见场景用法与类型 | undefined |
|
|
29978
|
-
| disabledTime | 见场景用法与类型 | undefined | (current?: Date, type?: DatePickerRange) =>
|
|
30069
|
+
| timePickerProps | 见场景用法与类型 | undefined | DatePickerTimePickerProps | 否 | 透传内层组件;默认值见对应组件 |
|
|
30070
|
+
| disabledTime | 见场景用法与类型 | undefined | (current?: Date, type?: DatePickerRange) => DatePickerDisabledTimeProps | undefined | 否 | 透传内层组件;默认值见对应组件 |
|
|
29979
30071
|
| showLunar | 见场景用法与类型 | undefined | false | true | { showLunarDate?: boolean; showLunarFestival?: boolean; showSolarTerm?: boolean; showSolarFestival?: boolean; fallbackText?: string; } | 否 | 透传内层组件;默认值见对应组件 |
|
|
29980
30072
|
|
|
29981
30073
|
### Events
|
|
@@ -30000,9 +30092,12 @@ type PopconfirmTypes = 'primary' | 'success' | 'warning' | 'strong' | 'danger' |
|
|
|
30000
30092
|
|
|
30001
30093
|
公开类型未逐项声明插槽;本页场景说明列出实际使用的插槽,不将任意插槽视为已支持。
|
|
30002
30094
|
|
|
30003
|
-
### 实例方法
|
|
30095
|
+
### 实例方法 / 暴露值
|
|
30004
30096
|
|
|
30005
|
-
|
|
30097
|
+
| 名称 | 公开类型 |
|
|
30098
|
+
| --- | --- |
|
|
30099
|
+
| focus | (() => void) & (() => void) |
|
|
30100
|
+
| blur | (() => void) & (() => void) |
|
|
30006
30101
|
|
|
30007
30102
|
### 关联类型定义
|
|
30008
30103
|
|
|
@@ -30315,8 +30410,8 @@ interface RadioGroupContext {
|
|
|
30315
30410
|
| showToday | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
30316
30411
|
| showConfirmBtn | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
30317
30412
|
| showTime | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
30318
|
-
| timePickerProps | 见场景用法与类型 | undefined |
|
|
30319
|
-
| disabledTime | 见场景用法与类型 | undefined | (current?: Date, type?: DatePickerRange) =>
|
|
30413
|
+
| timePickerProps | 见场景用法与类型 | undefined | DatePickerTimePickerProps | 否 | 透传内层组件;默认值见对应组件 |
|
|
30414
|
+
| disabledTime | 见场景用法与类型 | undefined | (current?: Date, type?: DatePickerRange) => DatePickerDisabledTimeProps | undefined | 否 | 透传内层组件;默认值见对应组件 |
|
|
30320
30415
|
| showLunar | 见场景用法与类型 | undefined | false | true | { showLunarDate?: boolean; showLunarFestival?: boolean; showSolarTerm?: boolean; showSolarFestival?: boolean; fallbackText?: string; } | 否 | 透传内层组件;默认值见对应组件 |
|
|
30321
30416
|
|
|
30322
30417
|
### Events
|
|
@@ -30341,9 +30436,12 @@ interface RadioGroupContext {
|
|
|
30341
30436
|
|
|
30342
30437
|
公开类型未逐项声明插槽;本页场景说明列出实际使用的插槽,不将任意插槽视为已支持。
|
|
30343
30438
|
|
|
30344
|
-
### 实例方法
|
|
30439
|
+
### 实例方法 / 暴露值
|
|
30345
30440
|
|
|
30346
|
-
|
|
30441
|
+
| 名称 | 公开类型 |
|
|
30442
|
+
| --- | --- |
|
|
30443
|
+
| focus | (() => void) & (() => void) |
|
|
30444
|
+
| blur | (() => void) & (() => void) |
|
|
30347
30445
|
|
|
30348
30446
|
### 关联类型定义
|
|
30349
30447
|
|
|
@@ -36542,8 +36640,8 @@ type WatermarkGap = [number, number];
|
|
|
36542
36640
|
| showToday | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
36543
36641
|
| showConfirmBtn | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
36544
36642
|
| showTime | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
36545
|
-
| timePickerProps | 见场景用法与类型 | undefined |
|
|
36546
|
-
| disabledTime | 见场景用法与类型 | undefined | (current?: Date, type?: DatePickerRange) =>
|
|
36643
|
+
| timePickerProps | 见场景用法与类型 | undefined | DatePickerTimePickerProps | 否 | 透传内层组件;默认值见对应组件 |
|
|
36644
|
+
| disabledTime | 见场景用法与类型 | undefined | (current?: Date, type?: DatePickerRange) => DatePickerDisabledTimeProps | undefined | 否 | 透传内层组件;默认值见对应组件 |
|
|
36547
36645
|
| showLunar | 见场景用法与类型 | undefined | false | true | { showLunarDate?: boolean; showLunarFestival?: boolean; showSolarTerm?: boolean; showSolarFestival?: boolean; fallbackText?: string; } | 否 | 透传内层组件;默认值见对应组件 |
|
|
36548
36646
|
|
|
36549
36647
|
### Events
|
|
@@ -36568,9 +36666,12 @@ type WatermarkGap = [number, number];
|
|
|
36568
36666
|
|
|
36569
36667
|
公开类型未逐项声明插槽;本页场景说明列出实际使用的插槽,不将任意插槽视为已支持。
|
|
36570
36668
|
|
|
36571
|
-
### 实例方法
|
|
36669
|
+
### 实例方法 / 暴露值
|
|
36572
36670
|
|
|
36573
|
-
|
|
36671
|
+
| 名称 | 公开类型 |
|
|
36672
|
+
| --- | --- |
|
|
36673
|
+
| focus | (() => void) & (() => void) |
|
|
36674
|
+
| blur | (() => void) & (() => void) |
|
|
36574
36675
|
|
|
36575
36676
|
### 关联类型定义
|
|
36576
36677
|
|
|
@@ -36725,8 +36826,8 @@ interface DatePickerProps {
|
|
|
36725
36826
|
| showToday | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
36726
36827
|
| showConfirmBtn | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
36727
36828
|
| showTime | 见场景用法与类型 | undefined | false | true | 否 | 透传内层组件;默认值见对应组件 |
|
|
36728
|
-
| timePickerProps | 见场景用法与类型 | undefined |
|
|
36729
|
-
| disabledTime | 见场景用法与类型 | undefined | (current?: Date, type?: DatePickerRange) =>
|
|
36829
|
+
| timePickerProps | 见场景用法与类型 | undefined | DatePickerTimePickerProps | 否 | 透传内层组件;默认值见对应组件 |
|
|
36830
|
+
| disabledTime | 见场景用法与类型 | undefined | (current?: Date, type?: DatePickerRange) => DatePickerDisabledTimeProps | undefined | 否 | 透传内层组件;默认值见对应组件 |
|
|
36730
36831
|
| showLunar | 见场景用法与类型 | undefined | false | true | { showLunarDate?: boolean; showLunarFestival?: boolean; showSolarTerm?: boolean; showSolarFestival?: boolean; fallbackText?: string; } | 否 | 透传内层组件;默认值见对应组件 |
|
|
36731
36832
|
|
|
36732
36833
|
### Events
|
|
@@ -36751,9 +36852,12 @@ interface DatePickerProps {
|
|
|
36751
36852
|
|
|
36752
36853
|
公开类型未逐项声明插槽;本页场景说明列出实际使用的插槽,不将任意插槽视为已支持。
|
|
36753
36854
|
|
|
36754
|
-
### 实例方法
|
|
36855
|
+
### 实例方法 / 暴露值
|
|
36755
36856
|
|
|
36756
|
-
|
|
36857
|
+
| 名称 | 公开类型 |
|
|
36858
|
+
| --- | --- |
|
|
36859
|
+
| focus | (() => void) & (() => void) |
|
|
36860
|
+
| blur | (() => void) & (() => void) |
|
|
36757
36861
|
|
|
36758
36862
|
### 关联类型定义
|
|
36759
36863
|
|
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,34 @@
|
|
|
4
4
|
|
|
5
5
|
## [Unreleased]
|
|
6
6
|
|
|
7
|
+
## [1.18.2] - 2026-10-17
|
|
8
|
+
|
|
9
|
+
### 文档
|
|
10
|
+
|
|
11
|
+
- 重新组织 README,加入品牌 Logo、产品口号、版本徽章与文档导航,突出产品定位与核心能力。
|
|
12
|
+
- 将组件长清单整理为分类导航,移除可选图标集的单独介绍,精简接入与维护细节。
|
|
13
|
+
- 更新按需样式、完整引入和局部主题示例,保留 AI 辅助开发与贡献入口。
|
|
14
|
+
|
|
15
|
+
### 维护
|
|
16
|
+
|
|
17
|
+
- 依据 npmjs 已发布的 1.18.1 产物校准主入口体积预算,运行产物保持一致,保留组件预算和图标泄漏检查。
|
|
18
|
+
|
|
19
|
+
## [1.18.1] - 2026-10-15
|
|
20
|
+
|
|
21
|
+
### 修复
|
|
22
|
+
|
|
23
|
+
- DatePicker 农历数字、选中圆圈和范围色带共用固定日期区,修复垂直错位、选中日期悬停变白、禁用文字及今天标记;提高农历文字清晰度,保留普通日期布局。
|
|
24
|
+
- 修复日期时间手输丢失时分秒、非法日期自动进位、禁用日期或时间可被手输绕过,以及范围键盘切换写错端点、连续编辑丢失草稿的问题。
|
|
25
|
+
- 日期范围单端禁用时保留锁定端,周选择统一解析、网格和提交的周起始日;日期别名补齐 `focus()` / `blur()` 的运行时转发及公开类型,面板标题移除误导性的无效点击行为。
|
|
26
|
+
- Button 收敛 large / huge 横向内边距,large 字号调整为 15px,huge 使用 24px 行高,改善五档尺寸层次与文字对齐。
|
|
27
|
+
- Dialog 使用 18px 关闭图标和 24px 点击区域,与标题中心对齐;声明式默认顶部距离改为 `100px`,命令式居中默认值保持原状,同步 MessageBox 关闭按钮定位。
|
|
28
|
+
- Dropdown 支持 Tab / Shift+Tab 退出根菜单;Popover 支持 Escape 关闭及归还焦点,保留组合输入行为;修正共享 RenderFunction 回调的子节点类型。
|
|
29
|
+
|
|
30
|
+
### 文档与验证
|
|
31
|
+
|
|
32
|
+
- 补充农历空辅助行、禁用、手输日期时间、单端锁定及周一起始的 live demo,同步独立 AI 手册和完整 API。
|
|
33
|
+
- 增加 DatePicker 浏览器回归脚本;本批修改已通过全量 134 文件 / 2770 用例、35 组日期浏览器检查及完整源码和文档构建。发布按用户要求复用已有验证,不重复执行质量门禁或等待 npm 公共索引刷新。
|
|
34
|
+
|
|
7
35
|
## [1.18.0] - 2026-10-14
|
|
8
36
|
|
|
9
37
|
### 调整
|