@morya-ui/mcp 0.2.8 → 0.3.0
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/README.md +2 -2
- package/data/catalog.json +529 -248
- package/data/example-coverage.json +67 -39
- package/data/golden-pages/dashboard-page.vue +41 -8
- package/data/golden-pages/detail-page.vue +178 -0
- package/data/golden-pages/empty-state.vue +22 -1
- package/data/golden-pages/form-in-dialog.vue +166 -0
- package/data/golden-pages/form-page.vue +1 -1
- package/data/golden-pages/landing-page.vue +31 -1
- package/data/golden-pages/list-page.vue +25 -12
- package/data/golden-pages/login-page.vue +44 -4
- package/data/golden-pages/result-page.vue +84 -0
- package/data/golden-pages/settings-page.vue +163 -0
- package/data/golden-pages/wizard-form.vue +182 -0
- package/dist/__tests__/tools.test.js +97 -4
- package/dist/decisions.js +136 -1
- package/dist/golden-pages.js +35 -0
- package/dist/index.js +1 -1
- package/dist/page-snippets.js +46 -36
- package/dist/patterns.d.ts +7 -5
- package/dist/patterns.js +29 -8
- package/dist/tools.js +181 -58
- package/package.json +1 -1
package/data/catalog.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-09-
|
|
2
|
+
"generatedAt": "2026-09-22T12:49:59.311Z",
|
|
3
3
|
"library": {
|
|
4
4
|
"name": "morya-ui",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.3.0"
|
|
6
6
|
},
|
|
7
7
|
"mcp": {
|
|
8
8
|
"name": "@morya-ui/mcp",
|
|
9
|
-
"version": "0.
|
|
9
|
+
"version": "0.3.0"
|
|
10
10
|
},
|
|
11
11
|
"components": [
|
|
12
12
|
{
|
|
@@ -306,6 +306,18 @@
|
|
|
306
306
|
"default": "'body'",
|
|
307
307
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
308
308
|
},
|
|
309
|
+
{
|
|
310
|
+
"name": "transition",
|
|
311
|
+
"type": "string | false",
|
|
312
|
+
"default": "'scale-fade'",
|
|
313
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
"name": "virtual",
|
|
317
|
+
"type": "boolean",
|
|
318
|
+
"default": "自动",
|
|
319
|
+
"description": "`true` 强制虚拟列表；`false` 关闭；默认建议项 ≥80 时开启。"
|
|
320
|
+
},
|
|
309
321
|
{
|
|
310
322
|
"name": "emptyMessage",
|
|
311
323
|
"type": "string",
|
|
@@ -483,7 +495,7 @@
|
|
|
483
495
|
{
|
|
484
496
|
"id": "props",
|
|
485
497
|
"title": "Props",
|
|
486
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 输入值。 |\n| `suggestions` | `(string \\| { label: string; value: string })[]` | `[]` | 建议列表。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `clearable` | `boolean` | `false` | 显示清空按钮。 |\n| `dropdown` | `boolean` | `false` | 显示下拉按钮。 |\n| `placeholder` | `string` | — | 占位。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `emptyMessage` | `string` | — | — |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `label` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
498
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 输入值。 |\n| `suggestions` | `(string \\| { label: string; value: string })[]` | `[]` | 建议列表。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `clearable` | `boolean` | `false` | 显示清空按钮。 |\n| `dropdown` | `boolean` | `false` | 显示下拉按钮。 |\n| `placeholder` | `string` | — | 占位。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `virtual` | `boolean` | 自动 | `true` 强制虚拟列表；`false` 关闭；默认建议项 ≥80 时开启。 |\n| `emptyMessage` | `string` | — | — |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `label` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
487
499
|
},
|
|
488
500
|
{
|
|
489
501
|
"id": "events",
|
|
@@ -496,7 +508,7 @@
|
|
|
496
508
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `item` | 选项项 `{ option }`。 |\n| `empty` | 无匹配结果。 |"
|
|
497
509
|
}
|
|
498
510
|
],
|
|
499
|
-
"markdown": "---\ntitle: AutoComplete\ncategory: 02 / FORM\ndescription: 输入时给出建议列表，可本地过滤或由父级提供。\n---\n\n# AutoComplete\n\n输入建议补全；`complete` 事件便于父级异步加载。\n\n## 引入\n\n```ts\nimport { MAutoComplete } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Options & loading\n\n`suggestions` 可传字符串或 `{ label, value }`。`loading` / `clearable` 控制加载与清空。\n\n```vue preview src=\"./demos/OptionsAndLoading.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 输入值。 |\n| `suggestions` | `(string \\| { label: string; value: string })[]` | `[]` | 建议列表。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `clearable` | `boolean` | `false` | 显示清空按钮。 |\n| `dropdown` | `boolean` | `false` | 显示下拉按钮。 |\n| `placeholder` | `string` | — | 占位。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `emptyMessage` | `string` | — | — |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `label` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `complete` | `query: string` | 请求补全。 |\n| `clear` | — | 点击清除时触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `item` | 选项项 `{ option }`。 |\n| `empty` | 无匹配结果。 |\n"
|
|
511
|
+
"markdown": "---\ntitle: AutoComplete\ncategory: 02 / FORM\ndescription: 输入时给出建议列表，可本地过滤或由父级提供。\n---\n\n# AutoComplete\n\n输入建议补全；`complete` 事件便于父级异步加载。\n\n## 引入\n\n```ts\nimport { MAutoComplete } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Options & loading\n\n`suggestions` 可传字符串或 `{ label, value }`。`loading` / `clearable` 控制加载与清空。\n\n```vue preview src=\"./demos/OptionsAndLoading.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 输入值。 |\n| `suggestions` | `(string \\| { label: string; value: string })[]` | `[]` | 建议列表。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `clearable` | `boolean` | `false` | 显示清空按钮。 |\n| `dropdown` | `boolean` | `false` | 显示下拉按钮。 |\n| `placeholder` | `string` | — | 占位。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `virtual` | `boolean` | 自动 | `true` 强制虚拟列表；`false` 关闭；默认建议项 ≥80 时开启。 |\n| `emptyMessage` | `string` | — | — |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `label` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `complete` | `query: string` | 请求补全。 |\n| `clear` | — | 点击清除时触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `item` | 选项项 `{ option }`。 |\n| `empty` | 无匹配结果。 |\n"
|
|
500
512
|
},
|
|
501
513
|
"en-US": {
|
|
502
514
|
"title": "AutoComplete",
|
|
@@ -530,7 +542,7 @@
|
|
|
530
542
|
{
|
|
531
543
|
"id": "props",
|
|
532
544
|
"title": "Props",
|
|
533
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Input value. |\n| `suggestions` | `(string \\| { label: string; value: string })[]` | `[]` | Suggestion list. |\n| `loading` | `boolean` | `false` | Loading state. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `dropdown` | `boolean` | `false` | Show dropdown button. |\n| `placeholder` | `string` | — | Placeholder. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
545
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Input value. |\n| `suggestions` | `(string \\| { label: string; value: string })[]` | `[]` | Suggestion list. |\n| `loading` | `boolean` | `false` | Loading state. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `dropdown` | `boolean` | `false` | Show dropdown button. |\n| `placeholder` | `string` | — | Placeholder. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `virtual` | `boolean` | auto | `true` forces virtual scroll; `false` disables; default enables when suggestions ≥ 80. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
534
546
|
},
|
|
535
547
|
{
|
|
536
548
|
"id": "events",
|
|
@@ -543,7 +555,7 @@
|
|
|
543
555
|
"body": "| Slot | Description |\n| --- | --- |\n| `item` | Option row `{ option }`. |\n| `empty` | No matches. |"
|
|
544
556
|
}
|
|
545
557
|
],
|
|
546
|
-
"markdown": "---\ntitle: AutoComplete\ncategory: 02 / FORM\ndescription: Shows suggestion lists while typing; filter locally or supply suggestions from the parent.\n---\n\n# AutoComplete\n\nInput suggestions and completion; the `complete` event makes async loading from the parent easy.\n\n## Import\n\n```ts\nimport { MAutoComplete } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Options & loading\n\n`suggestions` can be strings or `{ label, value }` objects. `loading` / `clearable` control the spinner and clear button.\n\n```vue preview src=\"./demos/OptionsAndLoading.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Input value. |\n| `suggestions` | `(string \\| { label: string; value: string })[]` | `[]` | Suggestion list. |\n| `loading` | `boolean` | `false` | Loading state. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `dropdown` | `boolean` | `false` | Show dropdown button. |\n| `placeholder` | `string` | — | Placeholder. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Value change. |\n| `complete` | `query: string` | Request completion. |\n| `clear` | — | Fired when the clear button is clicked. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `item` | Option row `{ option }`. |\n| `empty` | No matches. |\n"
|
|
558
|
+
"markdown": "---\ntitle: AutoComplete\ncategory: 02 / FORM\ndescription: Shows suggestion lists while typing; filter locally or supply suggestions from the parent.\n---\n\n# AutoComplete\n\nInput suggestions and completion; the `complete` event makes async loading from the parent easy.\n\n## Import\n\n```ts\nimport { MAutoComplete } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Options & loading\n\n`suggestions` can be strings or `{ label, value }` objects. `loading` / `clearable` control the spinner and clear button.\n\n```vue preview src=\"./demos/OptionsAndLoading.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Input value. |\n| `suggestions` | `(string \\| { label: string; value: string })[]` | `[]` | Suggestion list. |\n| `loading` | `boolean` | `false` | Loading state. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `dropdown` | `boolean` | `false` | Show dropdown button. |\n| `placeholder` | `string` | — | Placeholder. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `virtual` | `boolean` | auto | `true` forces virtual scroll; `false` disables; default enables when suggestions ≥ 80. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Value change. |\n| `complete` | `query: string` | Request completion. |\n| `clear` | — | Fired when the clear button is clicked. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `item` | Option row `{ option }`. |\n| `empty` | No matches. |\n"
|
|
547
559
|
}
|
|
548
560
|
}
|
|
549
561
|
},
|
|
@@ -1032,6 +1044,12 @@
|
|
|
1032
1044
|
"default": "false",
|
|
1033
1045
|
"description": "是否遮罩。"
|
|
1034
1046
|
},
|
|
1047
|
+
{
|
|
1048
|
+
"name": "transition",
|
|
1049
|
+
"type": "string | false",
|
|
1050
|
+
"default": "'blockui'",
|
|
1051
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
1052
|
+
},
|
|
1035
1053
|
{
|
|
1036
1054
|
"name": "pt",
|
|
1037
1055
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -1107,7 +1125,7 @@
|
|
|
1107
1125
|
{
|
|
1108
1126
|
"id": "props",
|
|
1109
1127
|
"title": "Props",
|
|
1110
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `blocked` | `boolean` | `false` | 是否遮罩。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
1128
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `blocked` | `boolean` | `false` | 是否遮罩。 |\n| `transition` | `string \\| false` | `'blockui'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
1111
1129
|
},
|
|
1112
1130
|
{
|
|
1113
1131
|
"id": "events",
|
|
@@ -1120,7 +1138,7 @@
|
|
|
1120
1138
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 默认内容。 |"
|
|
1121
1139
|
}
|
|
1122
1140
|
],
|
|
1123
|
-
"markdown": "---\ntitle: BlockUI\ncategory: 05 / FEEDBACK\ndescription: 在内容上叠加遮罩以阻止交互。\n---\n\n# BlockUI\n\n包裹内容，在 `blocked` 时显示遮罩。\n\n## 引入\n\n```ts\nimport { MBlockUI } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `blocked` | `boolean` | `false` | 是否遮罩。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 默认内容。 |\n\n"
|
|
1141
|
+
"markdown": "---\ntitle: BlockUI\ncategory: 05 / FEEDBACK\ndescription: 在内容上叠加遮罩以阻止交互。\n---\n\n# BlockUI\n\n包裹内容，在 `blocked` 时显示遮罩。\n\n## 引入\n\n```ts\nimport { MBlockUI } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `blocked` | `boolean` | `false` | 是否遮罩。 |\n| `transition` | `string \\| false` | `'blockui'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 默认内容。 |\n\n"
|
|
1124
1142
|
},
|
|
1125
1143
|
"en-US": {
|
|
1126
1144
|
"title": "BlockUI",
|
|
@@ -1144,7 +1162,7 @@
|
|
|
1144
1162
|
{
|
|
1145
1163
|
"id": "props",
|
|
1146
1164
|
"title": "Props",
|
|
1147
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `blocked` | `boolean` | `false` | Whether the overlay is active. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
1165
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `blocked` | `boolean` | `false` | Whether the overlay is active. |\n| `transition` | `string \\| false` | `'blockui'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
1148
1166
|
},
|
|
1149
1167
|
{
|
|
1150
1168
|
"id": "events",
|
|
@@ -1157,7 +1175,7 @@
|
|
|
1157
1175
|
"body": "No slots."
|
|
1158
1176
|
}
|
|
1159
1177
|
],
|
|
1160
|
-
"markdown": "---\ntitle: BlockUI\ncategory: 05 / FEEDBACK\ndescription: Overlays content with a mask to block interaction.\n---\n\n# BlockUI\n\nWraps content and shows a mask when `blocked` is true.\n\n## Import\n\n```ts\nimport { MBlockUI } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `blocked` | `boolean` | `false` | Whether the overlay is active. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\nNo custom events.\n\n## Slots\n\nNo slots.\n"
|
|
1178
|
+
"markdown": "---\ntitle: BlockUI\ncategory: 05 / FEEDBACK\ndescription: Overlays content with a mask to block interaction.\n---\n\n# BlockUI\n\nWraps content and shows a mask when `blocked` is true.\n\n## Import\n\n```ts\nimport { MBlockUI } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `blocked` | `boolean` | `false` | Whether the overlay is active. |\n| `transition` | `string \\| false` | `'blockui'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\nNo custom events.\n\n## Slots\n\nNo slots.\n"
|
|
1161
1179
|
}
|
|
1162
1180
|
}
|
|
1163
1181
|
},
|
|
@@ -2455,6 +2473,12 @@
|
|
|
2455
2473
|
"default": "'body'",
|
|
2456
2474
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
2457
2475
|
},
|
|
2476
|
+
{
|
|
2477
|
+
"name": "transition",
|
|
2478
|
+
"type": "string | false",
|
|
2479
|
+
"default": "'scale-fade'",
|
|
2480
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
2481
|
+
},
|
|
2458
2482
|
{
|
|
2459
2483
|
"name": "pt",
|
|
2460
2484
|
"type": "[FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }",
|
|
@@ -2604,7 +2628,7 @@
|
|
|
2604
2628
|
{
|
|
2605
2629
|
"id": "props",
|
|
2606
2630
|
"title": "Props",
|
|
2607
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| null` | `null` | 选中值。 |\n| `options` | `CascadeSelectOption[]` | — | 嵌套选项。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 帮助文案。 |\n| `invalid` | `boolean` | `false` | 无效状态。 |\n| `errorMessage` | `string` | — | 错误文案；设置时视为 invalid。 |\n| `id` | `string` | — | 控件 id。 |\n| `placeholder` | `string` | `'请选择'` | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `clearable` | `boolean` | `false` | 有值时显示清除按钮（hover 单槽 suffix）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
2631
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| null` | `null` | 选中值。 |\n| `options` | `CascadeSelectOption[]` | — | 嵌套选项。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 帮助文案。 |\n| `invalid` | `boolean` | `false` | 无效状态。 |\n| `errorMessage` | `string` | — | 错误文案；设置时视为 invalid。 |\n| `id` | `string` | — | 控件 id。 |\n| `placeholder` | `string` | `'请选择'` | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `clearable` | `boolean` | `false` | 有值时显示清除按钮（hover 单槽 suffix）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
2608
2632
|
},
|
|
2609
2633
|
{
|
|
2610
2634
|
"id": "events",
|
|
@@ -2622,7 +2646,7 @@
|
|
|
2622
2646
|
"body": "<h4 id=\"CascadeSelectValue\">CascadeSelectValue</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype CascadeSelectValue = string | number | null\n```\n\n\n<h4 id=\"CascadeSelectOption\">CascadeSelectOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface CascadeSelectOption {\n label: string\n value: string | number\n children?: CascadeSelectOption[]\n disabled?: boolean\n}\n```"
|
|
2623
2647
|
}
|
|
2624
2648
|
],
|
|
2625
|
-
"markdown": "---\ntitle: CascadeSelect\ncategory: 02 / FORM\ndescription: 多级联级选择，支持嵌套 options 与分栏面板。\n---\n\n# CascadeSelect\n\n从嵌套选项中逐级选择一个值。\n\n## 引入\n\n```ts\nimport { MCascadeSelect } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| null` | `null` | 选中值。 |\n| `options` | `CascadeSelectOption[]` | — | 嵌套选项。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 帮助文案。 |\n| `invalid` | `boolean` | `false` | 无效状态。 |\n| `errorMessage` | `string` | — | 错误文案；设置时视为 invalid。 |\n| `id` | `string` | — | 控件 id。 |\n| `placeholder` | `string` | `'请选择'` | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `clearable` | `boolean` | `false` | 有值时显示清除按钮（hover 单槽 suffix）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `CascadeSelectValue` | 选中变化。 |\n| `clear` | — | 点击清除时触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `value` | 触发器展示内容。 |\n| `option` | 选项 `{ option }`。 |\n\n## 类型\n\n<h4 id=\"CascadeSelectValue\">CascadeSelectValue</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype CascadeSelectValue = string | number | null\n```\n\n\n<h4 id=\"CascadeSelectOption\">CascadeSelectOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface CascadeSelectOption {\n label: string\n value: string | number\n children?: CascadeSelectOption[]\n disabled?: boolean\n}\n```\n"
|
|
2649
|
+
"markdown": "---\ntitle: CascadeSelect\ncategory: 02 / FORM\ndescription: 多级联级选择，支持嵌套 options 与分栏面板。\n---\n\n# CascadeSelect\n\n从嵌套选项中逐级选择一个值。\n\n## 引入\n\n```ts\nimport { MCascadeSelect } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| null` | `null` | 选中值。 |\n| `options` | `CascadeSelectOption[]` | — | 嵌套选项。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 帮助文案。 |\n| `invalid` | `boolean` | `false` | 无效状态。 |\n| `errorMessage` | `string` | — | 错误文案；设置时视为 invalid。 |\n| `id` | `string` | — | 控件 id。 |\n| `placeholder` | `string` | `'请选择'` | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `clearable` | `boolean` | `false` | 有值时显示清除按钮（hover 单槽 suffix）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `CascadeSelectValue` | 选中变化。 |\n| `clear` | — | 点击清除时触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `value` | 触发器展示内容。 |\n| `option` | 选项 `{ option }`。 |\n\n## 类型\n\n<h4 id=\"CascadeSelectValue\">CascadeSelectValue</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype CascadeSelectValue = string | number | null\n```\n\n\n<h4 id=\"CascadeSelectOption\">CascadeSelectOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface CascadeSelectOption {\n label: string\n value: string | number\n children?: CascadeSelectOption[]\n disabled?: boolean\n}\n```\n"
|
|
2626
2650
|
},
|
|
2627
2651
|
"en-US": {
|
|
2628
2652
|
"title": "CascadeSelect",
|
|
@@ -2651,7 +2675,7 @@
|
|
|
2651
2675
|
{
|
|
2652
2676
|
"id": "props",
|
|
2653
2677
|
"title": "Props",
|
|
2654
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| null` | `null` | Selected value. |\n| `options` | `CascadeSelectOption[]` | — | Nested options. |\n| `label` | `string` | — | Field label. |\n| `helpText` | `string` | — | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `errorMessage` | `string` | — | Error text; implies invalid when set. |\n| `id` | `string` | — | Control id. |\n| `placeholder` | `string` | locale `selectPlaceholder` | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `clearable` | `boolean` | `false` | Show clear button when a value is selected (hover suffix slot). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
2678
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| null` | `null` | Selected value. |\n| `options` | `CascadeSelectOption[]` | — | Nested options. |\n| `label` | `string` | — | Field label. |\n| `helpText` | `string` | — | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `errorMessage` | `string` | — | Error text; implies invalid when set. |\n| `id` | `string` | — | Control id. |\n| `placeholder` | `string` | locale `selectPlaceholder` | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `clearable` | `boolean` | `false` | Show clear button when a value is selected (hover suffix slot). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
2655
2679
|
},
|
|
2656
2680
|
{
|
|
2657
2681
|
"id": "events",
|
|
@@ -2669,7 +2693,7 @@
|
|
|
2669
2693
|
"body": "<h4 id=\"CascadeSelectValue\">CascadeSelectValue</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype CascadeSelectValue = string | number | null\n```\n\n\n<h4 id=\"CascadeSelectOption\">CascadeSelectOption</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface CascadeSelectOption {\n label: string\n value: string | number\n children?: CascadeSelectOption[]\n disabled?: boolean\n}\n```"
|
|
2670
2694
|
}
|
|
2671
2695
|
],
|
|
2672
|
-
"markdown": "---\ntitle: CascadeSelect\ncategory: 02 / FORM\ndescription: Multi-level cascade select with nested options and column panels.\n---\n\n# CascadeSelect\n\nSelect a value step by step from nested options.\n\n## Import\n\n```ts\nimport { MCascadeSelect } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| null` | `null` | Selected value. |\n| `options` | `CascadeSelectOption[]` | — | Nested options. |\n| `label` | `string` | — | Field label. |\n| `helpText` | `string` | — | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `errorMessage` | `string` | — | Error text; implies invalid when set. |\n| `id` | `string` | — | Control id. |\n| `placeholder` | `string` | locale `selectPlaceholder` | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `clearable` | `boolean` | `false` | Show clear button when a value is selected (hover suffix slot). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `CascadeSelectValue` | Selection change. |\n| `clear` | — | Fired when the clear button is clicked. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `value` | Trigger display. |\n| `option` | Option `{ option }`. |\n\n## Types\n\n<h4 id=\"CascadeSelectValue\">CascadeSelectValue</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype CascadeSelectValue = string | number | null\n```\n\n\n<h4 id=\"CascadeSelectOption\">CascadeSelectOption</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface CascadeSelectOption {\n label: string\n value: string | number\n children?: CascadeSelectOption[]\n disabled?: boolean\n}\n```\n"
|
|
2696
|
+
"markdown": "---\ntitle: CascadeSelect\ncategory: 02 / FORM\ndescription: Multi-level cascade select with nested options and column panels.\n---\n\n# CascadeSelect\n\nSelect a value step by step from nested options.\n\n## Import\n\n```ts\nimport { MCascadeSelect } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| null` | `null` | Selected value. |\n| `options` | `CascadeSelectOption[]` | — | Nested options. |\n| `label` | `string` | — | Field label. |\n| `helpText` | `string` | — | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `errorMessage` | `string` | — | Error text; implies invalid when set. |\n| `id` | `string` | — | Control id. |\n| `placeholder` | `string` | locale `selectPlaceholder` | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `clearable` | `boolean` | `false` | Show clear button when a value is selected (hover suffix slot). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `CascadeSelectValue` | Selection change. |\n| `clear` | — | Fired when the clear button is clicked. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `value` | Trigger display. |\n| `option` | Option `{ option }`. |\n\n## Types\n\n<h4 id=\"CascadeSelectValue\">CascadeSelectValue</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype CascadeSelectValue = string | number | null\n```\n\n\n<h4 id=\"CascadeSelectOption\">CascadeSelectOption</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface CascadeSelectOption {\n label: string\n value: string | number\n children?: CascadeSelectOption[]\n disabled?: boolean\n}\n```\n"
|
|
2673
2697
|
}
|
|
2674
2698
|
}
|
|
2675
2699
|
},
|
|
@@ -3200,6 +3224,12 @@
|
|
|
3200
3224
|
"default": "'body'",
|
|
3201
3225
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
3202
3226
|
},
|
|
3227
|
+
{
|
|
3228
|
+
"name": "transition",
|
|
3229
|
+
"type": "string | false",
|
|
3230
|
+
"default": "'fade'",
|
|
3231
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
3232
|
+
},
|
|
3203
3233
|
{
|
|
3204
3234
|
"name": "pt",
|
|
3205
3235
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -3304,7 +3334,7 @@
|
|
|
3304
3334
|
{
|
|
3305
3335
|
"id": "props",
|
|
3306
3336
|
"title": "Props",
|
|
3307
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `CommandMenuItem[]` | `[]` | 命令列表。 |\n| `modelValue` | `boolean` | `false` | 是否可见（`v-model`）。 |\n| `placeholder` | `string` | 语言包 `searchCommands` | 搜索框占位。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
3337
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `CommandMenuItem[]` | `[]` | 命令列表。 |\n| `modelValue` | `boolean` | `false` | 是否可见（`v-model`）。 |\n| `placeholder` | `string` | 语言包 `searchCommands` | 搜索框占位。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
3308
3338
|
},
|
|
3309
3339
|
{
|
|
3310
3340
|
"id": "events",
|
|
@@ -3327,7 +3357,7 @@
|
|
|
3327
3357
|
"body": "<h4 id=\"CommandMenuItem\">CommandMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface CommandMenuItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```"
|
|
3328
3358
|
}
|
|
3329
3359
|
],
|
|
3330
|
-
"markdown": "---\ntitle: CommandMenu\ncategory: 04 / NAVIGATION\ndescription: 可搜索的命令面板对话框。\n---\n\n# CommandMenu\n\n命令面板：搜索并执行 `model` 中的命令。适合全局快捷键（如 Cmd/Ctrl+K）场景。\n\n## 引入\n\n```ts\nimport type {CommandMenuItem} from 'morya-ui';\nimport { MCommandMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 命令项结构\n\n`CommandMenuItem` 字段：\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案，参与本地过滤。 |\n| `icon` | `string` | 可选前缀字符（非 MIcon 名）。 |\n| `shortcut` | `string` | 可选快捷键展示。 |\n| `command` | `() => void` | 选中后执行；执行完自动关闭面板。 |\n| `disabled` | `boolean` | 禁用项不可激活。 |\n\n## 键盘\n\n面板打开时：\n\n| 按键 | 行为 |\n| --- | --- |\n| `↑` / `↓` | 移动高亮项 |\n| `Enter` | 激活当前项 |\n| `Escape` | 关闭面板 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `CommandMenuItem[]` | `[]` | 命令列表。 |\n| `modelValue` | `boolean` | `false` | 是否可见（`v-model`）。 |\n| `placeholder` | `string` | 语言包 `searchCommands` | 搜索框占位。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n\n## 无障碍\n\n- 面板为 `role=\"dialog\"`、`aria-modal=\"true\"`。\n- 打开后焦点落在搜索框；请为触发按钮提供可访问名称。\n\n## Slots\n\n无插槽。\n\n## 类型\n\n<h4 id=\"CommandMenuItem\">CommandMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface CommandMenuItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```\n"
|
|
3360
|
+
"markdown": "---\ntitle: CommandMenu\ncategory: 04 / NAVIGATION\ndescription: 可搜索的命令面板对话框。\n---\n\n# CommandMenu\n\n命令面板：搜索并执行 `model` 中的命令。适合全局快捷键（如 Cmd/Ctrl+K）场景。\n\n## 引入\n\n```ts\nimport type {CommandMenuItem} from 'morya-ui';\nimport { MCommandMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 命令项结构\n\n`CommandMenuItem` 字段：\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案，参与本地过滤。 |\n| `icon` | `string` | 可选前缀字符（非 MIcon 名）。 |\n| `shortcut` | `string` | 可选快捷键展示。 |\n| `command` | `() => void` | 选中后执行；执行完自动关闭面板。 |\n| `disabled` | `boolean` | 禁用项不可激活。 |\n\n## 键盘\n\n面板打开时：\n\n| 按键 | 行为 |\n| --- | --- |\n| `↑` / `↓` | 移动高亮项 |\n| `Enter` | 激活当前项 |\n| `Escape` | 关闭面板 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `CommandMenuItem[]` | `[]` | 命令列表。 |\n| `modelValue` | `boolean` | `false` | 是否可见（`v-model`）。 |\n| `placeholder` | `string` | 语言包 `searchCommands` | 搜索框占位。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n\n## 无障碍\n\n- 面板为 `role=\"dialog\"`、`aria-modal=\"true\"`。\n- 打开后焦点落在搜索框；请为触发按钮提供可访问名称。\n\n## Slots\n\n无插槽。\n\n## 类型\n\n<h4 id=\"CommandMenuItem\">CommandMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface CommandMenuItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```\n"
|
|
3331
3361
|
},
|
|
3332
3362
|
"en-US": {
|
|
3333
3363
|
"title": "CommandMenu",
|
|
@@ -3361,7 +3391,7 @@
|
|
|
3361
3391
|
{
|
|
3362
3392
|
"id": "props",
|
|
3363
3393
|
"title": "Props",
|
|
3364
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `CommandMenuItem[]` | `[]` | Command list. |\n| `modelValue` | `boolean` | `false` | Visibility (`v-model`). |\n| `placeholder` | `string` | locale `searchCommands` | Search input placeholder. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
3394
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `CommandMenuItem[]` | `[]` | Command list. |\n| `modelValue` | `boolean` | `false` | Visibility (`v-model`). |\n| `placeholder` | `string` | locale `searchCommands` | Search input placeholder. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
3365
3395
|
},
|
|
3366
3396
|
{
|
|
3367
3397
|
"id": "events",
|
|
@@ -3384,7 +3414,7 @@
|
|
|
3384
3414
|
"body": "<h4 id=\"CommandMenuItem\">CommandMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface CommandMenuItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```"
|
|
3385
3415
|
}
|
|
3386
3416
|
],
|
|
3387
|
-
"markdown": "---\ntitle: CommandMenu\ncategory: 04 / NAVIGATION\ndescription: Searchable command palette dialog.\n---\n\n# CommandMenu\n\nSearchable command palette for running actions from `model`. Fits global shortcuts such as Cmd/Ctrl+K.\n\n## Import\n\n```ts\nimport type {CommandMenuItem} from 'morya-ui';\nimport { MCommandMenu } from 'morya-ui'\n```\n\n## Basic usage\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Command item shape\n\n`CommandMenuItem` fields:\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text; included in local filtering. |\n| `icon` | `string` | Optional leading character (not a MIcon name). |\n| `shortcut` | `string` | Optional shortcut hint. |\n| `command` | `() => void` | Runs on activate; closes the palette afterward. |\n| `disabled` | `boolean` | Disabled items cannot be activated. |\n\n## Keyboard\n\nWhen open:\n\n| Key | Action |\n| --- | --- |\n| `↑` / `↓` | Move highlight |\n| `Enter` | Activate highlighted item |\n| `Escape` | Close palette |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `CommandMenuItem[]` | `[]` | Command list. |\n| `modelValue` | `boolean` | `false` | Visibility (`v-model`). |\n| `placeholder` | `string` | locale `searchCommands` | Search input placeholder. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n\n## Accessibility\n\n- Panel uses `role=\"dialog\"` and `aria-modal=\"true\"`.\n- Focus moves to the search field on open; label the trigger control.\n\n## Slots\n\nNo slots.\n\n## Types\n\n<h4 id=\"CommandMenuItem\">CommandMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface CommandMenuItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```\n"
|
|
3417
|
+
"markdown": "---\ntitle: CommandMenu\ncategory: 04 / NAVIGATION\ndescription: Searchable command palette dialog.\n---\n\n# CommandMenu\n\nSearchable command palette for running actions from `model`. Fits global shortcuts such as Cmd/Ctrl+K.\n\n## Import\n\n```ts\nimport type {CommandMenuItem} from 'morya-ui';\nimport { MCommandMenu } from 'morya-ui'\n```\n\n## Basic usage\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Command item shape\n\n`CommandMenuItem` fields:\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text; included in local filtering. |\n| `icon` | `string` | Optional leading character (not a MIcon name). |\n| `shortcut` | `string` | Optional shortcut hint. |\n| `command` | `() => void` | Runs on activate; closes the palette afterward. |\n| `disabled` | `boolean` | Disabled items cannot be activated. |\n\n## Keyboard\n\nWhen open:\n\n| Key | Action |\n| --- | --- |\n| `↑` / `↓` | Move highlight |\n| `Enter` | Activate highlighted item |\n| `Escape` | Close palette |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `CommandMenuItem[]` | `[]` | Command list. |\n| `modelValue` | `boolean` | `false` | Visibility (`v-model`). |\n| `placeholder` | `string` | locale `searchCommands` | Search input placeholder. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n\n## Accessibility\n\n- Panel uses `role=\"dialog\"` and `aria-modal=\"true\"`.\n- Focus moves to the search field on open; label the trigger control.\n\n## Slots\n\nNo slots.\n\n## Types\n\n<h4 id=\"CommandMenuItem\">CommandMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface CommandMenuItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```\n"
|
|
3388
3418
|
}
|
|
3389
3419
|
}
|
|
3390
3420
|
},
|
|
@@ -3449,7 +3479,19 @@
|
|
|
3449
3479
|
"name": "componentDefaults",
|
|
3450
3480
|
"type": "Record<string, object>",
|
|
3451
3481
|
"default": "—",
|
|
3452
|
-
"description": "按组件名覆盖默认 props
|
|
3482
|
+
"description": "按组件名覆盖默认 props（含 `transition`）。"
|
|
3483
|
+
},
|
|
3484
|
+
{
|
|
3485
|
+
"name": "motion",
|
|
3486
|
+
"type": "{ transitions?: Partial<Record<role, string>> }",
|
|
3487
|
+
"default": "—",
|
|
3488
|
+
"description": "按浮层角色覆盖进出场预设。"
|
|
3489
|
+
},
|
|
3490
|
+
{
|
|
3491
|
+
"name": "respectReducedMotion",
|
|
3492
|
+
"type": "boolean",
|
|
3493
|
+
"default": "true",
|
|
3494
|
+
"description": "是否尊重系统 `prefers-reduced-motion`。"
|
|
3453
3495
|
},
|
|
3454
3496
|
{
|
|
3455
3497
|
"name": "globalDensity",
|
|
@@ -3514,7 +3556,7 @@
|
|
|
3514
3556
|
"sectionId": "应用级插件",
|
|
3515
3557
|
"lang": "ts",
|
|
3516
3558
|
"preview": false,
|
|
3517
|
-
"code": "import MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// 方式一：默认导出\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// 方式二：工厂函数\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n },\n }),\n )\n .mount('#app')",
|
|
3559
|
+
"code": "import MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// 方式一：默认导出\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// 方式二：工厂函数\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n Select: { transition: 'fade' },\n },\n }),\n )\n .mount('#app')",
|
|
3518
3560
|
"locale": "zh-CN"
|
|
3519
3561
|
},
|
|
3520
3562
|
{
|
|
@@ -3532,7 +3574,7 @@
|
|
|
3532
3574
|
"sectionId": "主题与动效",
|
|
3533
3575
|
"lang": "ts",
|
|
3534
3576
|
"preview": false,
|
|
3535
|
-
"code": "import { useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'",
|
|
3577
|
+
"code": "import { createMoryaUI, registerMotionPreset, useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'\n\napp.use(createMoryaUI({\n respectReducedMotion: false, // 演示站可忽略系统减弱动效\n motion: { transitions: { popup: 'slide-up' } },\n}))\n\nregisterMotionPreset('brand', { name: 'm-brand' })",
|
|
3536
3578
|
"locale": "zh-CN"
|
|
3537
3579
|
},
|
|
3538
3580
|
{
|
|
@@ -3577,7 +3619,7 @@
|
|
|
3577
3619
|
"sectionId": "app-level-plugin",
|
|
3578
3620
|
"lang": "ts",
|
|
3579
3621
|
"preview": false,
|
|
3580
|
-
"code": "import MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// Option A: default export\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// Option B: factory\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n },\n }),\n )\n .mount('#app')",
|
|
3622
|
+
"code": "import MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// Option A: default export\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// Option B: factory\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n Select: { transition: 'fade' },\n },\n }),\n )\n .mount('#app')",
|
|
3581
3623
|
"locale": "en-US"
|
|
3582
3624
|
},
|
|
3583
3625
|
{
|
|
@@ -3595,7 +3637,7 @@
|
|
|
3595
3637
|
"sectionId": "theme-and-motion",
|
|
3596
3638
|
"lang": "ts",
|
|
3597
3639
|
"preview": false,
|
|
3598
|
-
"code": "import { useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'",
|
|
3640
|
+
"code": "import { createMoryaUI, registerMotionPreset, useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'\n\napp.use(createMoryaUI({\n respectReducedMotion: false, // docs demos may ignore OS reduced motion\n motion: { transitions: { popup: 'slide-up' } },\n}))\n\nregisterMotionPreset('brand', { name: 'm-brand' })",
|
|
3599
3641
|
"locale": "en-US"
|
|
3600
3642
|
}
|
|
3601
3643
|
],
|
|
@@ -3612,7 +3654,7 @@
|
|
|
3612
3654
|
{
|
|
3613
3655
|
"id": "能力一览",
|
|
3614
3656
|
"title": "能力一览",
|
|
3615
|
-
"body": "| 能力 | 说明 |\n| --- | --- |\n| `appendTo` | 浮层默认 Teleport 目标，默认 `body` |\n| `size` | 表单控件默认尺寸 |\n| `density` | 全局内容密度 `compact` / `comfortable` / `spacious` |\n| `inputVariant` | 输入框默认 `outlined` / `filled` |\n| `zIndex` | 浮层基础层级 |\n| `locale` | 确认 / 空态 / 加载 / 占位等文案。可传入内置语言包 `zhCN` / `enUS` |\n| `componentDefaults` | 按组件覆盖默认 props（如 `Input.size`、`Space.size`）。局部 Props 优先 |"
|
|
3657
|
+
"body": "| 能力 | 说明 |\n| --- | --- |\n| `appendTo` | 浮层默认 Teleport 目标，默认 `body` |\n| `size` | 表单控件默认尺寸 |\n| `density` | 全局内容密度 `compact` / `comfortable` / `spacious` |\n| `inputVariant` | 输入框默认 `outlined` / `filled` |\n| `zIndex` | 浮层基础层级 |\n| `locale` | 确认 / 空态 / 加载 / 占位等文案。可传入内置语言包 `zhCN` / `enUS` |\n| `componentDefaults` | 按组件覆盖默认 props（如 `Input.size`、`Space.size`、`Dialog.transition`）。局部 Props 优先 |\n| `motion` | 按角色覆盖进出场预设（`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`） |\n| `respectReducedMotion` | 是否尊重系统 `prefers-reduced-motion`（默认 `true`） |"
|
|
3616
3658
|
},
|
|
3617
3659
|
{
|
|
3618
3660
|
"id": "size",
|
|
@@ -3637,7 +3679,7 @@
|
|
|
3637
3679
|
{
|
|
3638
3680
|
"id": "应用级插件",
|
|
3639
3681
|
"title": "应用级插件",
|
|
3640
|
-
"body": "```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// 方式一：默认导出\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// 方式二：工厂函数\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n },\n }),\n )\n .mount('#app')\n```\n\n默认会**全局注册全部组件**（模板可直接用 `<MButton>`）。仅注入配置时传 `components: false`；也可传组件数组做部分注册。"
|
|
3682
|
+
"body": "```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// 方式一：默认导出\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// 方式二：工厂函数\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n Select: { transition: 'fade' },\n },\n }),\n )\n .mount('#app')\n```\n\n默认会**全局注册全部组件**（模板可直接用 `<MButton>`）。仅注入配置时传 `components: false`；也可传组件数组做部分注册。"
|
|
3641
3683
|
},
|
|
3642
3684
|
{
|
|
3643
3685
|
"id": "读取配置",
|
|
@@ -3647,12 +3689,12 @@
|
|
|
3647
3689
|
{
|
|
3648
3690
|
"id": "主题与动效",
|
|
3649
3691
|
"title": "主题与动效",
|
|
3650
|
-
"body": "
|
|
3692
|
+
"body": "主题强度与进出场预设是两层：\n\n- **强度**：`useMotion()` → `full` / `reduced` / `none`（写 `data-m-motion`）\n- **形态**：`motion.transitions[role]` / `componentDefaults.*.transition` / 组件 `transition` prop\n\n```ts\nimport { createMoryaUI, registerMotionPreset, useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'\n\napp.use(createMoryaUI({\n respectReducedMotion: false, // 演示站可忽略系统减弱动效\n motion: { transitions: { popup: 'slide-up' } },\n}))\n\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n完整预设列表与 demo 见 [动效](/docs/motion)；亮暗与密度见 [主题](/docs/theme)。"
|
|
3651
3693
|
},
|
|
3652
3694
|
{
|
|
3653
3695
|
"id": "props",
|
|
3654
3696
|
"title": "Props",
|
|
3655
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | 一次性传入完整配置（与下列 shorthand 等价）。 |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | 浮层默认 Teleport 目标。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | 表单控件默认尺寸。 |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | 输入框默认视觉变体。 |\n| `zIndex` | `number` | — | 浮层基础 z-index。 |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | 全局内容密度。 |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | 主题；`system` 跟随系统偏好。 |\n| `locale` | `MLocale` | — | 文案语言包（如 `zhCN` / `enUS`）。 |\n| `componentDefaults` | `Record<string, object>` | — | 按组件名覆盖默认 props
|
|
3697
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | 一次性传入完整配置（与下列 shorthand 等价）。 |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | 浮层默认 Teleport 目标。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | 表单控件默认尺寸。 |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | 输入框默认视觉变体。 |\n| `zIndex` | `number` | — | 浮层基础 z-index。 |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | 全局内容密度。 |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | 主题；`system` 跟随系统偏好。 |\n| `locale` | `MLocale` | — | 文案语言包（如 `zhCN` / `enUS`）。 |\n| `componentDefaults` | `Record<string, object>` | — | 按组件名覆盖默认 props（含 `transition`）。 |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | 按浮层角色覆盖进出场预设。 |\n| `respectReducedMotion` | `boolean` | `true` | 是否尊重系统 `prefers-reduced-motion`。 |\n| `globalDensity` | `boolean` | `true` | 是否将 density / theme 写入 `documentElement`。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
3656
3698
|
},
|
|
3657
3699
|
{
|
|
3658
3700
|
"id": "events",
|
|
@@ -3665,7 +3707,7 @@
|
|
|
3665
3707
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 子组件树。 |"
|
|
3666
3708
|
}
|
|
3667
3709
|
],
|
|
3668
|
-
"markdown": "---\ntitle: ConfigProvider\ncategory: 00 / GUIDE\ndescription: 全局配置入口。统一浮层挂载、尺寸、密度、文案等应用级默认值。\n---\n\n# ConfigProvider\n\n通过 `MConfigProvider` 或 `createMoryaUI` 为整棵组件树提供全局默认值。局部 Props 优先级高于全局配置。\n\n## 能力一览\n\n| 能力 | 说明 |\n| --- | --- |\n| `appendTo` | 浮层默认 Teleport 目标，默认 `body` |\n| `size` | 表单控件默认尺寸 |\n| `density` | 全局内容密度 `compact` / `comfortable` / `spacious` |\n| `inputVariant` | 输入框默认 `outlined` / `filled` |\n| `zIndex` | 浮层基础层级 |\n| `locale` | 确认 / 空态 / 加载 / 占位等文案。可传入内置语言包 `zhCN` / `enUS` |\n| `componentDefaults` | 按组件覆盖默认 props（如 `Input.size`、`Space.size`）。局部 Props 优先 |\n\n## Size\n\n```vue preview src=\"./demos/Size.zh.vue\"\n```\n\n## Component Defaults\n\n按组件名覆盖默认 props。键名用无前缀名称（`Input`、`Space`）或 `M*` 别名均可。\n\n优先级：**组件 Props > `componentDefaults[组件]` > 全局 `size` / `inputVariant` > 内置默认值**。\n\n`Space` / `Flex` 的 `size` 是间距，**不会**继承全局控件 `size`。\n\n```vue preview src=\"./demos/ComponentDefaults.zh.vue\"\n```\n\n## Density\n\n```vue preview src=\"./demos/Density.vue\"\n```\n\n## Input Variant\n\n```vue preview src=\"./demos/InputVariant.zh.vue\"\n```\n\n## 应用级插件\n\n```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// 方式一：默认导出\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// 方式二：工厂函数\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n },\n }),\n )\n .mount('#app')\n```\n\n默认会**全局注册全部组件**（模板可直接用 `<MButton>`）。仅注入配置时传 `components: false`；也可传组件数组做部分注册。\n\n## 读取配置\n\n```ts\nimport { useMConfig } from 'morya-ui'\n\nconst config = useMConfig()\n```\n\n优先级：**组件 Props > `MConfigProvider` > `createMoryaUI()` > 内置默认值**。\n\n## 主题与动效\n\n
|
|
3710
|
+
"markdown": "---\ntitle: ConfigProvider\ncategory: 00 / GUIDE\ndescription: 全局配置入口。统一浮层挂载、尺寸、密度、文案等应用级默认值。\n---\n\n# ConfigProvider\n\n通过 `MConfigProvider` 或 `createMoryaUI` 为整棵组件树提供全局默认值。局部 Props 优先级高于全局配置。\n\n## 能力一览\n\n| 能力 | 说明 |\n| --- | --- |\n| `appendTo` | 浮层默认 Teleport 目标，默认 `body` |\n| `size` | 表单控件默认尺寸 |\n| `density` | 全局内容密度 `compact` / `comfortable` / `spacious` |\n| `inputVariant` | 输入框默认 `outlined` / `filled` |\n| `zIndex` | 浮层基础层级 |\n| `locale` | 确认 / 空态 / 加载 / 占位等文案。可传入内置语言包 `zhCN` / `enUS` |\n| `componentDefaults` | 按组件覆盖默认 props（如 `Input.size`、`Space.size`、`Dialog.transition`）。局部 Props 优先 |\n| `motion` | 按角色覆盖进出场预设（`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`） |\n| `respectReducedMotion` | 是否尊重系统 `prefers-reduced-motion`（默认 `true`） |\n\n## Size\n\n```vue preview src=\"./demos/Size.zh.vue\"\n```\n\n## Component Defaults\n\n按组件名覆盖默认 props。键名用无前缀名称（`Input`、`Space`）或 `M*` 别名均可。\n\n优先级：**组件 Props > `componentDefaults[组件]` > 全局 `size` / `inputVariant` > 内置默认值**。\n\n`Space` / `Flex` 的 `size` 是间距，**不会**继承全局控件 `size`。\n\n```vue preview src=\"./demos/ComponentDefaults.zh.vue\"\n```\n\n## Density\n\n```vue preview src=\"./demos/Density.vue\"\n```\n\n## Input Variant\n\n```vue preview src=\"./demos/InputVariant.zh.vue\"\n```\n\n## 应用级插件\n\n```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// 方式一：默认导出\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// 方式二：工厂函数\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n Select: { transition: 'fade' },\n },\n }),\n )\n .mount('#app')\n```\n\n默认会**全局注册全部组件**（模板可直接用 `<MButton>`）。仅注入配置时传 `components: false`；也可传组件数组做部分注册。\n\n## 读取配置\n\n```ts\nimport { useMConfig } from 'morya-ui'\n\nconst config = useMConfig()\n```\n\n优先级：**组件 Props > `MConfigProvider` > `createMoryaUI()` > 内置默认值**。\n\n## 主题与动效\n\n主题强度与进出场预设是两层：\n\n- **强度**：`useMotion()` → `full` / `reduced` / `none`（写 `data-m-motion`）\n- **形态**：`motion.transitions[role]` / `componentDefaults.*.transition` / 组件 `transition` prop\n\n```ts\nimport { createMoryaUI, registerMotionPreset, useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'\n\napp.use(createMoryaUI({\n respectReducedMotion: false, // 演示站可忽略系统减弱动效\n motion: { transitions: { popup: 'slide-up' } },\n}))\n\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n完整预设列表与 demo 见 [动效](/docs/motion)；亮暗与密度见 [主题](/docs/theme)。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | 一次性传入完整配置（与下列 shorthand 等价）。 |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | 浮层默认 Teleport 目标。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | 表单控件默认尺寸。 |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | 输入框默认视觉变体。 |\n| `zIndex` | `number` | — | 浮层基础 z-index。 |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | 全局内容密度。 |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | 主题；`system` 跟随系统偏好。 |\n| `locale` | `MLocale` | — | 文案语言包（如 `zhCN` / `enUS`）。 |\n| `componentDefaults` | `Record<string, object>` | — | 按组件名覆盖默认 props（含 `transition`）。 |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | 按浮层角色覆盖进出场预设。 |\n| `respectReducedMotion` | `boolean` | `true` | 是否尊重系统 `prefers-reduced-motion`。 |\n| `globalDensity` | `boolean` | `true` | 是否将 density / theme 写入 `documentElement`。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 子组件树。 |\n"
|
|
3669
3711
|
},
|
|
3670
3712
|
"en-US": {
|
|
3671
3713
|
"title": "ConfigProvider",
|
|
@@ -3679,7 +3721,7 @@
|
|
|
3679
3721
|
{
|
|
3680
3722
|
"id": "capabilities",
|
|
3681
3723
|
"title": "Capabilities",
|
|
3682
|
-
"body": "| Capability | Description |\n| --- | --- |\n| `appendTo` | Default Teleport target for overlays; defaults to `body` |\n| `size` | Default size for form controls |\n| `density` | Global content density: `compact` / `comfortable` / `spacious` |\n| `inputVariant` | Default input style: `outlined` / `filled` |\n| `zIndex` | Base overlay z-index |\n| `locale` | Strings for confirm / empty / loading / placeholder, etc. Pass built-in packs `zhCN` / `enUS` |\n| `componentDefaults` | Per-component default props (e.g. `Input.size`, `
|
|
3724
|
+
"body": "| Capability | Description |\n| --- | --- |\n| `appendTo` | Default Teleport target for overlays; defaults to `body` |\n| `size` | Default size for form controls |\n| `density` | Global content density: `compact` / `comfortable` / `spacious` |\n| `inputVariant` | Default input style: `outlined` / `filled` |\n| `zIndex` | Base overlay z-index |\n| `locale` | Strings for confirm / empty / loading / placeholder, etc. Pass built-in packs `zhCN` / `enUS` |\n| `componentDefaults` | Per-component default props (e.g. `Input.size`, `Dialog.transition`). Local props win |\n| `motion` | Enter/exit presets by overlay role (`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`) |\n| `respectReducedMotion` | Honor OS `prefers-reduced-motion` (default `true`) |"
|
|
3683
3725
|
},
|
|
3684
3726
|
{
|
|
3685
3727
|
"id": "size",
|
|
@@ -3704,7 +3746,7 @@
|
|
|
3704
3746
|
{
|
|
3705
3747
|
"id": "app-level-plugin",
|
|
3706
3748
|
"title": "App-level plugin",
|
|
3707
|
-
"body": "```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// Option A: default export\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// Option B: factory\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n },\n }),\n )\n .mount('#app')\n```\n\nBy default **all components are registered globally** (use `<MButton>` in templates). Pass `components: false` for config-only, or pass a component array for partial registration."
|
|
3749
|
+
"body": "```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// Option A: default export\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// Option B: factory\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n Select: { transition: 'fade' },\n },\n }),\n )\n .mount('#app')\n```\n\nBy default **all components are registered globally** (use `<MButton>` in templates). Pass `components: false` for config-only, or pass a component array for partial registration."
|
|
3708
3750
|
},
|
|
3709
3751
|
{
|
|
3710
3752
|
"id": "reading-config",
|
|
@@ -3714,7 +3756,12 @@
|
|
|
3714
3756
|
{
|
|
3715
3757
|
"id": "theme-and-motion",
|
|
3716
3758
|
"title": "Theme and motion",
|
|
3717
|
-
"body": "
|
|
3759
|
+
"body": "Intensity and enter/exit presets are separate layers:\n\n- **Intensity**: `useMotion()` → `full` / `reduced` / `none` (writes `data-m-motion`)\n- **Shape**: `motion.transitions[role]` / `componentDefaults.*.transition` / component `transition` prop\n\n```ts\nimport { createMoryaUI, registerMotionPreset, useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'\n\napp.use(createMoryaUI({\n respectReducedMotion: false, // docs demos may ignore OS reduced motion\n motion: { transitions: { popup: 'slide-up' } },\n}))\n\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\nFull preset list and demos: [Motion](/docs/motion). Light/dark and density: [Theme](/docs/theme)."
|
|
3760
|
+
},
|
|
3761
|
+
{
|
|
3762
|
+
"id": "props",
|
|
3763
|
+
"title": "Props",
|
|
3764
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | Full config object (same as the shorthands below). |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | Default Teleport target for overlays. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | Default form control size. |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | Default input surface. |\n| `zIndex` | `number` | — | Base overlay z-index. |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | Global content density. |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | Color theme; `system` follows OS. |\n| `locale` | `MLocale` | — | Copy pack (`zhCN` / `enUS`). |\n| `componentDefaults` | `Record<string, object>` | — | Per-component default props (including `transition`). |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | Enter/exit presets by overlay role. |\n| `respectReducedMotion` | `boolean` | `true` | Honor OS `prefers-reduced-motion`. |\n| `globalDensity` | `boolean` | `true` | Also write density / theme to `documentElement`. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
3718
3765
|
},
|
|
3719
3766
|
{
|
|
3720
3767
|
"id": "events",
|
|
@@ -3727,7 +3774,7 @@
|
|
|
3727
3774
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Child tree. |"
|
|
3728
3775
|
}
|
|
3729
3776
|
],
|
|
3730
|
-
"markdown": "---\ntitle: ConfigProvider\ncategory: 00 / GUIDE\ndescription: Global configuration entry. Unifies app-level defaults such as overlay mount, size, density, and locale strings.\n---\n\n# ConfigProvider\n\nProvide global defaults for the component tree via `MConfigProvider` or `createMoryaUI`. Local props take precedence over global config.\n\n## Capabilities\n\n| Capability | Description |\n| --- | --- |\n| `appendTo` | Default Teleport target for overlays; defaults to `body` |\n| `size` | Default size for form controls |\n| `density` | Global content density: `compact` / `comfortable` / `spacious` |\n| `inputVariant` | Default input style: `outlined` / `filled` |\n| `zIndex` | Base overlay z-index |\n| `locale` | Strings for confirm / empty / loading / placeholder, etc. Pass built-in packs `zhCN` / `enUS` |\n| `componentDefaults` | Per-component default props (e.g. `Input.size`, `
|
|
3777
|
+
"markdown": "---\ntitle: ConfigProvider\ncategory: 00 / GUIDE\ndescription: Global configuration entry. Unifies app-level defaults such as overlay mount, size, density, and locale strings.\n---\n\n# ConfigProvider\n\nProvide global defaults for the component tree via `MConfigProvider` or `createMoryaUI`. Local props take precedence over global config.\n\n## Capabilities\n\n| Capability | Description |\n| --- | --- |\n| `appendTo` | Default Teleport target for overlays; defaults to `body` |\n| `size` | Default size for form controls |\n| `density` | Global content density: `compact` / `comfortable` / `spacious` |\n| `inputVariant` | Default input style: `outlined` / `filled` |\n| `zIndex` | Base overlay z-index |\n| `locale` | Strings for confirm / empty / loading / placeholder, etc. Pass built-in packs `zhCN` / `enUS` |\n| `componentDefaults` | Per-component default props (e.g. `Input.size`, `Dialog.transition`). Local props win |\n| `motion` | Enter/exit presets by overlay role (`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`) |\n| `respectReducedMotion` | Honor OS `prefers-reduced-motion` (default `true`) |\n\n## Size\n\n```vue preview src=\"./demos/Size.en.vue\"\n```\n\n## Component Defaults\n\nOverride default props per component. Keys may be unprefixed (`Input`, `Space`) or `M*` aliases.\n\nPrecedence: **component props > `componentDefaults[component]` > global `size` / `inputVariant` > built-in defaults**.\n\n`Space` / `Flex` `size` is gap and does **not** inherit the global control `size`.\n\n```vue preview src=\"./demos/ComponentDefaults.en.vue\"\n```\n\n## Density\n\n```vue preview src=\"./demos/Density.vue\"\n```\n\n## Input Variant\n\n```vue preview src=\"./demos/InputVariant.en.vue\"\n```\n\n## App-level plugin\n\n```ts\nimport MoryaUI, { createMoryaUI, enUS } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\n// Option A: default export\ncreateApp(App).use(MoryaUI, { locale: enUS }).mount('#app')\n\n// Option B: factory\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n density: 'comfortable',\n zIndex: 1100,\n locale: enUS,\n motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n componentDefaults: {\n Space: { size: 'small' },\n Input: { clearable: true },\n Select: { transition: 'fade' },\n },\n }),\n )\n .mount('#app')\n```\n\nBy default **all components are registered globally** (use `<MButton>` in templates). Pass `components: false` for config-only, or pass a component array for partial registration.\n\n## Reading config\n\n```ts\nimport { useMConfig } from 'morya-ui'\n\nconst config = useMConfig()\n```\n\nPrecedence: **component props > `MConfigProvider` > `createMoryaUI()` > built-in defaults**.\n\n## Theme and motion\n\nIntensity and enter/exit presets are separate layers:\n\n- **Intensity**: `useMotion()` → `full` / `reduced` / `none` (writes `data-m-motion`)\n- **Shape**: `motion.transitions[role]` / `componentDefaults.*.transition` / component `transition` prop\n\n```ts\nimport { createMoryaUI, registerMotionPreset, useMotion, useTheme } from 'morya-ui'\n\nconst { setTheme, toggleTheme } = useTheme()\nconst { setMotion } = useMotion() // 'full' | 'reduced' | 'none'\n\napp.use(createMoryaUI({\n respectReducedMotion: false, // docs demos may ignore OS reduced motion\n motion: { transitions: { popup: 'slide-up' } },\n}))\n\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\nFull preset list and demos: [Motion](/docs/motion). Light/dark and density: [Theme](/docs/theme).\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `config` | `Partial<MGlobalConfig>` | — | Full config object (same as the shorthands below). |\n| `appendTo` | `string \\| HTMLElement` | `'body'` | Default Teleport target for overlays. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | Default form control size. |\n| `inputVariant` | `'outlined' \\| 'filled'` | — | Default input surface. |\n| `zIndex` | `number` | — | Base overlay z-index. |\n| `density` | `'compact' \\| 'comfortable' \\| 'spacious'` | — | Global content density. |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | — | Color theme; `system` follows OS. |\n| `locale` | `MLocale` | — | Copy pack (`zhCN` / `enUS`). |\n| `componentDefaults` | `Record<string, object>` | — | Per-component default props (including `transition`). |\n| `motion` | `{ transitions?: Partial<Record<role, string>> }` | — | Enter/exit presets by overlay role. |\n| `respectReducedMotion` | `boolean` | `true` | Honor OS `prefers-reduced-motion`. |\n| `globalDensity` | `boolean` | `true` | Also write density / theme to `documentElement`. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Child tree. |\n"
|
|
3731
3778
|
}
|
|
3732
3779
|
}
|
|
3733
3780
|
},
|
|
@@ -3812,6 +3859,12 @@
|
|
|
3812
3859
|
"default": "'body'",
|
|
3813
3860
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
3814
3861
|
},
|
|
3862
|
+
{
|
|
3863
|
+
"name": "transition",
|
|
3864
|
+
"type": "string | false",
|
|
3865
|
+
"default": "'zoom'",
|
|
3866
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
3867
|
+
},
|
|
3815
3868
|
{
|
|
3816
3869
|
"name": "blockScroll",
|
|
3817
3870
|
"type": "boolean",
|
|
@@ -3929,7 +3982,7 @@
|
|
|
3929
3982
|
{
|
|
3930
3983
|
"id": "props",
|
|
3931
3984
|
"title": "Props",
|
|
3932
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `header` | `string` | `'确认'` | 标题。 |\n| `message` | `string` | — | 正文。 |\n| `acceptLabel` | `string` | `'确认'` | 确认按钮文案。 |\n| `rejectLabel` | `string` | `'取消'` | 取消按钮文案。 |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | 确认按钮语义色。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | 正文状态图标；确认流程用本组件，Dialog `type` 只做标题图标。 |\n| `loading` | `boolean` | `false` | 确认按钮加载中。 |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `accept`。 |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `reject`。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `blockScroll` | `boolean` | — | — |\n| `closeOnEsc` | `boolean` | — | — |\n| `closeOnOutsideClick` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
3985
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `header` | `string` | `'确认'` | 标题。 |\n| `message` | `string` | — | 正文。 |\n| `acceptLabel` | `string` | `'确认'` | 确认按钮文案。 |\n| `rejectLabel` | `string` | `'取消'` | 取消按钮文案。 |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | 确认按钮语义色。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | 正文状态图标；确认流程用本组件，Dialog `type` 只做标题图标。 |\n| `loading` | `boolean` | `false` | 确认按钮加载中。 |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `accept`。 |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `reject`。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'zoom'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `blockScroll` | `boolean` | — | — |\n| `closeOnEsc` | `boolean` | — | — |\n| `closeOnOutsideClick` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
3933
3986
|
},
|
|
3934
3987
|
{
|
|
3935
3988
|
"id": "events",
|
|
@@ -3942,7 +3995,7 @@
|
|
|
3942
3995
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框正文。 |\n| `footer` | 自定义 `footer` 内容。 |\n| `header` | 自定义 `header` 内容。 |"
|
|
3943
3996
|
}
|
|
3944
3997
|
],
|
|
3945
|
-
"markdown": "---\ntitle: ConfirmDialog\ncategory: 05 / FEEDBACK\ndescription: 确认 / 取消对话框，复用 Dialog 浮层样式。\n---\n\n# ConfirmDialog\n\n需要用户明确确认时使用的模态对话框。\n\n## 引入\n\n```ts\nimport { MButton, MConfirmDialog } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `header` | `string` | `'确认'` | 标题。 |\n| `message` | `string` | — | 正文。 |\n| `acceptLabel` | `string` | `'确认'` | 确认按钮文案。 |\n| `rejectLabel` | `string` | `'取消'` | 取消按钮文案。 |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | 确认按钮语义色。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | 正文状态图标；确认流程用本组件，Dialog `type` 只做标题图标。 |\n| `loading` | `boolean` | `false` | 确认按钮加载中。 |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `accept`。 |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `reject`。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `blockScroll` | `boolean` | — | — |\n| `closeOnEsc` | `boolean` | — | — |\n| `closeOnOutsideClick` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `accept` | — | 点击确认。 |\n| `reject` | — | 点击取消或关闭。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框正文。 |\n| `footer` | 自定义 `footer` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n"
|
|
3998
|
+
"markdown": "---\ntitle: ConfirmDialog\ncategory: 05 / FEEDBACK\ndescription: 确认 / 取消对话框，复用 Dialog 浮层样式。\n---\n\n# ConfirmDialog\n\n需要用户明确确认时使用的模态对话框。\n\n## 引入\n\n```ts\nimport { MButton, MConfirmDialog } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `header` | `string` | `'确认'` | 标题。 |\n| `message` | `string` | — | 正文。 |\n| `acceptLabel` | `string` | `'确认'` | 确认按钮文案。 |\n| `rejectLabel` | `string` | `'取消'` | 取消按钮文案。 |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | 确认按钮语义色。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | 正文状态图标；确认流程用本组件，Dialog `type` 只做标题图标。 |\n| `loading` | `boolean` | `false` | 确认按钮加载中。 |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `accept`。 |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭、不触发 `reject`。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'zoom'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `blockScroll` | `boolean` | — | — |\n| `closeOnEsc` | `boolean` | — | — |\n| `closeOnOutsideClick` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `accept` | — | 点击确认。 |\n| `reject` | — | 点击取消或关闭。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框正文。 |\n| `footer` | 自定义 `footer` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n"
|
|
3946
3999
|
},
|
|
3947
4000
|
"en-US": {
|
|
3948
4001
|
"title": "ConfirmDialog",
|
|
@@ -3966,7 +4019,7 @@
|
|
|
3966
4019
|
{
|
|
3967
4020
|
"id": "props",
|
|
3968
4021
|
"title": "Props",
|
|
3969
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. |\n| `header` | `string` | locale `confirm` | Title. |\n| `message` | `string` | — | Body text. |\n| `acceptLabel` | `string` | locale `accept` | Accept button label. |\n| `rejectLabel` | `string` | locale `reject` | Reject button label. |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | Accept button semantic color. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | Status icon beside the message. |\n| `loading` | `boolean` | `false` | Loading state on the accept button. |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `accept`. |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `reject`. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
4022
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. |\n| `header` | `string` | locale `confirm` | Title. |\n| `message` | `string` | — | Body text. |\n| `acceptLabel` | `string` | locale `accept` | Accept button label. |\n| `rejectLabel` | `string` | locale `reject` | Reject button label. |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | Accept button semantic color. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | Status icon beside the message. |\n| `loading` | `boolean` | `false` | Loading state on the accept button. |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `accept`. |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `reject`. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'zoom'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
3970
4023
|
},
|
|
3971
4024
|
{
|
|
3972
4025
|
"id": "events",
|
|
@@ -3979,7 +4032,7 @@
|
|
|
3979
4032
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Dialog body. |"
|
|
3980
4033
|
}
|
|
3981
4034
|
],
|
|
3982
|
-
"markdown": "---\ntitle: ConfirmDialog\ncategory: 05 / FEEDBACK\ndescription: Confirm / cancel dialog that reuses Dialog overlay styling.\n---\n\n# ConfirmDialog\n\nModal dialog used when the user must explicitly confirm an action.\n\n## Import\n\n```ts\nimport { MButton, MConfirmDialog } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. |\n| `header` | `string` | locale `confirm` | Title. |\n| `message` | `string` | — | Body text. |\n| `acceptLabel` | `string` | locale `accept` | Accept button label. |\n| `rejectLabel` | `string` | locale `reject` | Reject button label. |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | Accept button semantic color. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | Status icon beside the message. |\n| `loading` | `boolean` | `false` | Loading state on the accept button. |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `accept`. |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `reject`. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n| `accept` | — | Accept clicked. |\n| `reject` | — | Reject clicked or dialog closed. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Dialog body. |\n"
|
|
4035
|
+
"markdown": "---\ntitle: ConfirmDialog\ncategory: 05 / FEEDBACK\ndescription: Confirm / cancel dialog that reuses Dialog overlay styling.\n---\n\n# ConfirmDialog\n\nModal dialog used when the user must explicitly confirm an action.\n\n## Import\n\n```ts\nimport { MButton, MConfirmDialog } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. |\n| `header` | `string` | locale `confirm` | Title. |\n| `message` | `string` | — | Body text. |\n| `acceptLabel` | `string` | locale `accept` | Accept button label. |\n| `rejectLabel` | `string` | locale `reject` | Reject button label. |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | Accept button semantic color. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | Status icon beside the message. |\n| `loading` | `boolean` | `false` | Loading state on the accept button. |\n| `beforeAccept` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `accept`. |\n| `beforeReject` | `() => unknown \\| Promise<unknown>` | — | Return `false` to keep open and skip `reject`. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'zoom'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n| `accept` | — | Accept clicked. |\n| `reject` | — | Reject clicked or dialog closed. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Dialog body. |\n"
|
|
3983
4036
|
}
|
|
3984
4037
|
}
|
|
3985
4038
|
},
|
|
@@ -4058,6 +4111,12 @@
|
|
|
4058
4111
|
"default": "'body'",
|
|
4059
4112
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
4060
4113
|
},
|
|
4114
|
+
{
|
|
4115
|
+
"name": "transition",
|
|
4116
|
+
"type": "string | false",
|
|
4117
|
+
"default": "'scale-fade'",
|
|
4118
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
4119
|
+
},
|
|
4061
4120
|
{
|
|
4062
4121
|
"name": "acceptSeverity",
|
|
4063
4122
|
"type": "[ButtonSeverity](/docs/types#ButtonSeverity)",
|
|
@@ -4178,7 +4237,7 @@
|
|
|
4178
4237
|
{
|
|
4179
4238
|
"id": "props",
|
|
4180
4239
|
"title": "Props",
|
|
4181
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否显示。 |\n| `message` | `string` | — | 提示文案。 |\n| `acceptLabel` / `rejectLabel` | `string` | `确认` / `取消` | 按钮。 |\n| `icon` | [IconName](/docs/types#IconName) | — | 文案旁图标。 |\n| `beforeAccept` | `() => boolean \\| Promise<boolean>` | — | 返回 `false` 时保持打开。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'bottom'` | 相对 `target` 的位置。 |\n| `target` | `HTMLElement \\| null` | — | 锚点。 |\n| `position` | `{ top, left } \\| null` | — | 无锚点时的坐标。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
4240
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否显示。 |\n| `message` | `string` | — | 提示文案。 |\n| `acceptLabel` / `rejectLabel` | `string` | `确认` / `取消` | 按钮。 |\n| `icon` | [IconName](/docs/types#IconName) | — | 文案旁图标。 |\n| `beforeAccept` | `() => boolean \\| Promise<boolean>` | — | 返回 `false` 时保持打开。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'bottom'` | 相对 `target` 的位置。 |\n| `target` | `HTMLElement \\| null` | — | 锚点。 |\n| `position` | `{ top, left } \\| null` | — | 无锚点时的坐标。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
4182
4241
|
},
|
|
4183
4242
|
{
|
|
4184
4243
|
"id": "events",
|
|
@@ -4191,7 +4250,7 @@
|
|
|
4191
4250
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 弹出层正文。 |"
|
|
4192
4251
|
}
|
|
4193
4252
|
],
|
|
4194
|
-
"markdown": "---\ntitle: ConfirmPopup\ncategory: 05 / FEEDBACK\ndescription: 锚定在目标旁的确认气泡。\n---\n\n# ConfirmPopup\n\n轻量确认浮层，支持 `target` 或坐标定位。\n\n## 引入\n\n```ts\nimport { MConfirmPopup } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Before accept\n\n`beforeAccept` 返回 `false` 时保持打开且不触发 `accept`。\n\n```vue preview src=\"./demos/BeforeAccept.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否显示。 |\n| `message` | `string` | — | 提示文案。 |\n| `acceptLabel` / `rejectLabel` | `string` | `确认` / `取消` | 按钮。 |\n| `icon` | [IconName](/docs/types#IconName) | — | 文案旁图标。 |\n| `beforeAccept` | `() => boolean \\| Promise<boolean>` | — | 返回 `false` 时保持打开。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'bottom'` | 相对 `target` 的位置。 |\n| `target` | `HTMLElement \\| null` | — | 锚点。 |\n| `position` | `{ top, left } \\| null` | — | 无锚点时的坐标。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 显隐。 |\n| `accept` / `reject` | — | 确认 / 取消。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 弹出层正文。 |\n"
|
|
4253
|
+
"markdown": "---\ntitle: ConfirmPopup\ncategory: 05 / FEEDBACK\ndescription: 锚定在目标旁的确认气泡。\n---\n\n# ConfirmPopup\n\n轻量确认浮层，支持 `target` 或坐标定位。\n\n## 引入\n\n```ts\nimport { MConfirmPopup } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Before accept\n\n`beforeAccept` 返回 `false` 时保持打开且不触发 `accept`。\n\n```vue preview src=\"./demos/BeforeAccept.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否显示。 |\n| `message` | `string` | — | 提示文案。 |\n| `acceptLabel` / `rejectLabel` | `string` | `确认` / `取消` | 按钮。 |\n| `icon` | [IconName](/docs/types#IconName) | — | 文案旁图标。 |\n| `beforeAccept` | `() => boolean \\| Promise<boolean>` | — | 返回 `false` 时保持打开。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'bottom'` | 相对 `target` 的位置。 |\n| `target` | `HTMLElement \\| null` | — | 锚点。 |\n| `position` | `{ top, left } \\| null` | — | 无锚点时的坐标。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `acceptSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 显隐。 |\n| `accept` / `reject` | — | 确认 / 取消。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 弹出层正文。 |\n"
|
|
4195
4254
|
},
|
|
4196
4255
|
"en-US": {
|
|
4197
4256
|
"title": "ConfirmPopup",
|
|
@@ -4220,7 +4279,7 @@
|
|
|
4220
4279
|
{
|
|
4221
4280
|
"id": "props",
|
|
4222
4281
|
"title": "Props",
|
|
4223
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Whether the popup is shown. |\n| `message` | `string` | — | Prompt text. |\n| `acceptLabel` / `rejectLabel` | `string` | `OK` / `Cancel` | Buttons. |\n| `icon` | [IconName](/docs/types#IconName) | — | Icon beside the message. |\n| `beforeAccept` | `() => boolean \\| Promise<boolean>` | — | Return `false` to keep the popup open. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'bottom'` | Position relative to `target`. |\n| `target` | `HTMLElement \\| null` | — | Anchor element. |\n| `position` | `{ top, left } \\| null` | — | Coordinates when there is no anchor. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
4282
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Whether the popup is shown. |\n| `message` | `string` | — | Prompt text. |\n| `acceptLabel` / `rejectLabel` | `string` | `OK` / `Cancel` | Buttons. |\n| `icon` | [IconName](/docs/types#IconName) | — | Icon beside the message. |\n| `beforeAccept` | `() => boolean \\| Promise<boolean>` | — | Return `false` to keep the popup open. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'bottom'` | Position relative to `target`. |\n| `target` | `HTMLElement \\| null` | — | Anchor element. |\n| `position` | `{ top, left } \\| null` | — | Coordinates when there is no anchor. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
4224
4283
|
},
|
|
4225
4284
|
{
|
|
4226
4285
|
"id": "events",
|
|
@@ -4233,7 +4292,7 @@
|
|
|
4233
4292
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Popup body. |"
|
|
4234
4293
|
}
|
|
4235
4294
|
],
|
|
4236
|
-
"markdown": "---\ntitle: ConfirmPopup\ncategory: 05 / FEEDBACK\ndescription: Confirmation popover anchored to a target.\n---\n\n# ConfirmPopup\n\nLightweight confirmation overlay. Supports `target` or coordinate positioning.\n\n## Import\n\n```ts\nimport { MConfirmPopup } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Before accept\n\nReturning `false` from `beforeAccept` keeps the popup open and skips the `accept` emit.\n\n```vue preview src=\"./demos/BeforeAccept.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Whether the popup is shown. |\n| `message` | `string` | — | Prompt text. |\n| `acceptLabel` / `rejectLabel` | `string` | `OK` / `Cancel` | Buttons. |\n| `icon` | [IconName](/docs/types#IconName) | — | Icon beside the message. |\n| `beforeAccept` | `() => boolean \\| Promise<boolean>` | — | Return `false` to keep the popup open. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'bottom'` | Position relative to `target`. |\n| `target` | `HTMLElement \\| null` | — | Anchor element. |\n| `position` | `{ top, left } \\| null` | — | Coordinates when there is no anchor. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility. |\n| `accept` / `reject` | — | Accept / reject. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Popup body. |\n"
|
|
4295
|
+
"markdown": "---\ntitle: ConfirmPopup\ncategory: 05 / FEEDBACK\ndescription: Confirmation popover anchored to a target.\n---\n\n# ConfirmPopup\n\nLightweight confirmation overlay. Supports `target` or coordinate positioning.\n\n## Import\n\n```ts\nimport { MConfirmPopup } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Before accept\n\nReturning `false` from `beforeAccept` keeps the popup open and skips the `accept` emit.\n\n```vue preview src=\"./demos/BeforeAccept.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Whether the popup is shown. |\n| `message` | `string` | — | Prompt text. |\n| `acceptLabel` / `rejectLabel` | `string` | `OK` / `Cancel` | Buttons. |\n| `icon` | [IconName](/docs/types#IconName) | — | Icon beside the message. |\n| `beforeAccept` | `() => boolean \\| Promise<boolean>` | — | Return `false` to keep the popup open. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'bottom'` | Position relative to `target`. |\n| `target` | `HTMLElement \\| null` | — | Anchor element. |\n| `position` | `{ top, left } \\| null` | — | Coordinates when there is no anchor. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility. |\n| `accept` / `reject` | — | Accept / reject. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Popup body. |\n"
|
|
4237
4296
|
}
|
|
4238
4297
|
}
|
|
4239
4298
|
},
|
|
@@ -4276,6 +4335,12 @@
|
|
|
4276
4335
|
"default": "'body'",
|
|
4277
4336
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
4278
4337
|
},
|
|
4338
|
+
{
|
|
4339
|
+
"name": "transition",
|
|
4340
|
+
"type": "string | false",
|
|
4341
|
+
"default": "'scale-fade'",
|
|
4342
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
4343
|
+
},
|
|
4279
4344
|
{
|
|
4280
4345
|
"name": "pt",
|
|
4281
4346
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -4408,7 +4473,7 @@
|
|
|
4408
4473
|
{
|
|
4409
4474
|
"id": "props",
|
|
4410
4475
|
"title": "Props",
|
|
4411
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `ContextMenuItem[]` | — | 菜单项，可嵌套 `items`；项可含 `key` / `icon`。 |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `position` | `{ x: number; y: number }` | — | 菜单坐标。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
4476
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `ContextMenuItem[]` | — | 菜单项，可嵌套 `items`；项可含 `key` / `icon`。 |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `position` | `{ x: number; y: number }` | — | 菜单坐标。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
4412
4477
|
},
|
|
4413
4478
|
{
|
|
4414
4479
|
"id": "events",
|
|
@@ -4431,7 +4496,7 @@
|
|
|
4431
4496
|
"body": "<h4 id=\"ContextMenuItem\">ContextMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface ContextMenuItem extends MenuNodeBase {\n items?: ContextMenuItem[]\n}\n```"
|
|
4432
4497
|
}
|
|
4433
4498
|
],
|
|
4434
|
-
"markdown": "---\ntitle: ContextMenu\ncategory: 04 / NAVIGATION\ndescription: 右键上下文菜单，支持 show(event) / hide()。\n---\n\n# ContextMenu\n\n在指针位置弹出的上下文菜单。支持嵌套 `items`。也可用 `useContextMenu()` 绑定 `v-model` / `v-model:position`。\n\n## 引入\n\n```ts\nimport { MContextMenu, useContextMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Nested + useContextMenu\n\n```vue preview src=\"./demos/NestedUsecontextmenu.zh.vue\"\n```\n\n## 滚动与嵌套子菜单\n\n菜单列表与嵌套 `items` 飞出层使用内置 `MScrollbar`（`max-height: min(18rem, 45vh)`）。嵌套层 Teleport 到 `body` 相对父项定位，避免长列表滚动时侧向菜单被裁剪。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `ContextMenuItem[]` | — | 菜单项，可嵌套 `items`；项可含 `key` / `icon`。 |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `position` | `{ x: number; y: number }` | — | 菜单坐标。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `update:position` | `{ x; y }` | 位置变化。 |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `show(event)` | 根据鼠标事件或坐标显示。 |\n| `hide()` | 隐藏菜单。 |\n\n`useContextMenu()` 返回 `{ visible, position, show, hide }`，便于命令式打开。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素（非 popup 模式）。 |\n\n## 类型\n\n<h4 id=\"ContextMenuItem\">ContextMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface ContextMenuItem extends MenuNodeBase {\n items?: ContextMenuItem[]\n}\n```\n"
|
|
4499
|
+
"markdown": "---\ntitle: ContextMenu\ncategory: 04 / NAVIGATION\ndescription: 右键上下文菜单，支持 show(event) / hide()。\n---\n\n# ContextMenu\n\n在指针位置弹出的上下文菜单。支持嵌套 `items`。也可用 `useContextMenu()` 绑定 `v-model` / `v-model:position`。\n\n## 引入\n\n```ts\nimport { MContextMenu, useContextMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Nested + useContextMenu\n\n```vue preview src=\"./demos/NestedUsecontextmenu.zh.vue\"\n```\n\n## 滚动与嵌套子菜单\n\n菜单列表与嵌套 `items` 飞出层使用内置 `MScrollbar`（`max-height: min(18rem, 45vh)`）。嵌套层 Teleport 到 `body` 相对父项定位，避免长列表滚动时侧向菜单被裁剪。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `ContextMenuItem[]` | — | 菜单项，可嵌套 `items`；项可含 `key` / `icon`。 |\n| `modelValue` | `boolean` | `false` | 是否可见。 |\n| `position` | `{ x: number; y: number }` | — | 菜单坐标。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `update:position` | `{ x; y }` | 位置变化。 |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `show(event)` | 根据鼠标事件或坐标显示。 |\n| `hide()` | 隐藏菜单。 |\n\n`useContextMenu()` 返回 `{ visible, position, show, hide }`，便于命令式打开。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素（非 popup 模式）。 |\n\n## 类型\n\n<h4 id=\"ContextMenuItem\">ContextMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface ContextMenuItem extends MenuNodeBase {\n items?: ContextMenuItem[]\n}\n```\n"
|
|
4435
4500
|
},
|
|
4436
4501
|
"en-US": {
|
|
4437
4502
|
"title": "ContextMenu",
|
|
@@ -4465,7 +4530,7 @@
|
|
|
4465
4530
|
{
|
|
4466
4531
|
"id": "props",
|
|
4467
4532
|
"title": "Props",
|
|
4468
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `ContextMenuItem[]` | — | Menu items; may nest `items`. Items may include `key` / `icon`. |\n| `modelValue` | `boolean` | `false` | Whether the menu is visible. |\n| `position` | `{ x: number; y: number }` | — | Menu coordinates. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
4533
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `ContextMenuItem[]` | — | Menu items; may nest `items`. Items may include `key` / `icon`. |\n| `modelValue` | `boolean` | `false` | Whether the menu is visible. |\n| `position` | `{ x: number; y: number }` | — | Menu coordinates. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
4469
4534
|
},
|
|
4470
4535
|
{
|
|
4471
4536
|
"id": "events",
|
|
@@ -4488,7 +4553,7 @@
|
|
|
4488
4553
|
"body": "<h4 id=\"ContextMenuItem\">ContextMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface ContextMenuItem extends MenuNodeBase {\n items?: ContextMenuItem[]\n}\n```"
|
|
4489
4554
|
}
|
|
4490
4555
|
],
|
|
4491
|
-
"markdown": "---\ntitle: ContextMenu\ncategory: 04 / NAVIGATION\ndescription: Right-click context menu with show(event) / hide().\n---\n\n# ContextMenu\n\nContext menu that opens at the pointer position. Nested `items` are supported. `useContextMenu()` can bind `v-model` / `v-model:position`.\n\n## Import\n\n```ts\nimport { MContextMenu, useContextMenu } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Nested + useContextMenu\n\n```vue preview src=\"./demos/NestedUsecontextmenu.en.vue\"\n```\n\n## Scrolling & nested flyouts\n\nThe menu list and nested `items` flyouts use built-in `MScrollbar` (`max-height: min(18rem, 45vh)`). Nested panels teleport to `body` and anchor to the parent item so side flyouts are not clipped when the root menu scrolls.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `ContextMenuItem[]` | — | Menu items; may nest `items`. Items may include `key` / `icon`. |\n| `modelValue` | `boolean` | `false` | Whether the menu is visible. |\n| `position` | `{ x: number; y: number }` | — | Menu coordinates. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n| `update:position` | `{ x; y }` | Position change. |\n\n## Methods\n\n| Method / Property | Description |\n| --- | --- |\n| `show(event)` | Show from a mouse event or coordinates. |\n| `hide()` | Hide the menu. |\n\n`useContextMenu()` returns `{ visible, position, show, hide }` for imperative open.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Trigger element (inline mode). |\n\n## Types\n\n<h4 id=\"ContextMenuItem\">ContextMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface ContextMenuItem extends MenuNodeBase {\n items?: ContextMenuItem[]\n}\n```\n"
|
|
4556
|
+
"markdown": "---\ntitle: ContextMenu\ncategory: 04 / NAVIGATION\ndescription: Right-click context menu with show(event) / hide().\n---\n\n# ContextMenu\n\nContext menu that opens at the pointer position. Nested `items` are supported. `useContextMenu()` can bind `v-model` / `v-model:position`.\n\n## Import\n\n```ts\nimport { MContextMenu, useContextMenu } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Nested + useContextMenu\n\n```vue preview src=\"./demos/NestedUsecontextmenu.en.vue\"\n```\n\n## Scrolling & nested flyouts\n\nThe menu list and nested `items` flyouts use built-in `MScrollbar` (`max-height: min(18rem, 45vh)`). Nested panels teleport to `body` and anchor to the parent item so side flyouts are not clipped when the root menu scrolls.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `ContextMenuItem[]` | — | Menu items; may nest `items`. Items may include `key` / `icon`. |\n| `modelValue` | `boolean` | `false` | Whether the menu is visible. |\n| `position` | `{ x: number; y: number }` | — | Menu coordinates. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n| `update:position` | `{ x; y }` | Position change. |\n\n## Methods\n\n| Method / Property | Description |\n| --- | --- |\n| `show(event)` | Show from a mouse event or coordinates. |\n| `hide()` | Hide the menu. |\n\n`useContextMenu()` returns `{ visible, position, show, hide }` for imperative open.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Trigger element (inline mode). |\n\n## Types\n\n<h4 id=\"ContextMenuItem\">ContextMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface ContextMenuItem extends MenuNodeBase {\n items?: ContextMenuItem[]\n}\n```\n"
|
|
4492
4557
|
}
|
|
4493
4558
|
}
|
|
4494
4559
|
},
|
|
@@ -4790,6 +4855,12 @@
|
|
|
4790
4855
|
"default": "'body'",
|
|
4791
4856
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
4792
4857
|
},
|
|
4858
|
+
{
|
|
4859
|
+
"name": "transition",
|
|
4860
|
+
"type": "string | false",
|
|
4861
|
+
"default": "'scale-fade'",
|
|
4862
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
4863
|
+
},
|
|
4793
4864
|
{
|
|
4794
4865
|
"name": "errorMessage",
|
|
4795
4866
|
"type": "string",
|
|
@@ -5111,7 +5182,7 @@
|
|
|
5111
5182
|
{
|
|
5112
5183
|
"id": "props",
|
|
5113
5184
|
"title": "Props",
|
|
5114
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| [string, string] \\| null` | `null` | 单日输出 `YYYY-MM-DD`；范围输出 `[start, end]`。 |\n| `type` | `'date' \\| 'daterange'` | `'date'` | 单日或范围。 |\n| `label` | `string` | — | 标签。 |\n| `minDate` | `string \\| Date \\| null` | — | 可选下限。 |\n| `maxDate` | `string \\| Date \\| null` | — | 可选上限。 |\n| `placeholder` | `string` | locale | 占位。 |\n| `format` | `string` | `'YYYY-MM-DD'` | 输入框展示格式；提交值仍为 ISO。 |\n| `clearable` | `boolean` | `true` | 显示清除按钮。 |\n| `shortcuts` | `DatePickerShortcut[]` | `[]` | 面板快捷选项。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `teleport` | `boolean` | `true` | 面板 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
5185
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| [string, string] \\| null` | `null` | 单日输出 `YYYY-MM-DD`；范围输出 `[start, end]`。 |\n| `type` | `'date' \\| 'daterange'` | `'date'` | 单日或范围。 |\n| `label` | `string` | — | 标签。 |\n| `minDate` | `string \\| Date \\| null` | — | 可选下限。 |\n| `maxDate` | `string \\| Date \\| null` | — | 可选上限。 |\n| `placeholder` | `string` | locale | 占位。 |\n| `format` | `string` | `'YYYY-MM-DD'` | 输入框展示格式；提交值仍为 ISO。 |\n| `clearable` | `boolean` | `true` | 显示清除按钮。 |\n| `shortcuts` | `DatePickerShortcut[]` | `[]` | 面板快捷选项。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `teleport` | `boolean` | `true` | 面板 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
5115
5186
|
},
|
|
5116
5187
|
{
|
|
5117
5188
|
"id": "events",
|
|
@@ -5129,7 +5200,7 @@
|
|
|
5129
5200
|
"body": "<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface DatePickerShortcut {\n label: string\n value:\n | DatePickerDateValue\n | [DatePickerDateValue, DatePickerDateValue]\n | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue])\n}\n```"
|
|
5130
5201
|
}
|
|
5131
5202
|
],
|
|
5132
|
-
"markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: 日历弹层选择日期。单日或日期范围，值优先为 ISO 日期字符串。支持 min/max、shortcuts、format、clearable。\n---\n\n# DatePicker\n\n带月份导航与日网格的日期选择器。\n\n## 引入\n\n```ts\nimport { MDatePicker } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\n超出范围的日期在日历中禁用。\n\n```vue preview src=\"./demos/MinMax.zh.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.zh.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.zh.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.zh.vue\"\n```\n\n## Teleport\n\n面板默认 Teleport 到 `body`。可用 `append-to=\"self\"` 或 `teleport={false}` 就地渲染。\n\n```vue preview src=\"./demos/Teleport.zh.vue\"\n```\n\n## Range\n\n`type=\"daterange\"` 时先点起点、再点终点；值为 `[start, end]`（ISO 日期）。\n\n```vue preview src=\"./demos/Range.zh.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| [string, string] \\| null` | `null` | 单日输出 `YYYY-MM-DD`；范围输出 `[start, end]`。 |\n| `type` | `'date' \\| 'daterange'` | `'date'` | 单日或范围。 |\n| `label` | `string` | — | 标签。 |\n| `minDate` | `string \\| Date \\| null` | — | 可选下限。 |\n| `maxDate` | `string \\| Date \\| null` | — | 可选上限。 |\n| `placeholder` | `string` | locale | 占位。 |\n| `format` | `string` | `'YYYY-MM-DD'` | 输入框展示格式；提交值仍为 ISO。 |\n| `clearable` | `boolean` | `true` | 显示清除按钮。 |\n| `shortcuts` | `DatePickerShortcut[]` | `[]` | 面板快捷选项。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `teleport` | `boolean` | `true` | 面板 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `change` | — | — |\n| `hide` | — | — |\n| `show` | — | — |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `trigger` | 自定义触发器 `{ value, open }`。 |\n\n## 类型\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface DatePickerShortcut {\n label: string\n value:\n | DatePickerDateValue\n | [DatePickerDateValue, DatePickerDateValue]\n | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue])\n}\n```\n"
|
|
5203
|
+
"markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: 日历弹层选择日期。单日或日期范围，值优先为 ISO 日期字符串。支持 min/max、shortcuts、format、clearable。\n---\n\n# DatePicker\n\n带月份导航与日网格的日期选择器。\n\n## 引入\n\n```ts\nimport { MDatePicker } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\n超出范围的日期在日历中禁用。\n\n```vue preview src=\"./demos/MinMax.zh.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.zh.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.zh.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.zh.vue\"\n```\n\n## Teleport\n\n面板默认 Teleport 到 `body`。可用 `append-to=\"self\"` 或 `teleport={false}` 就地渲染。\n\n```vue preview src=\"./demos/Teleport.zh.vue\"\n```\n\n## Range\n\n`type=\"daterange\"` 时先点起点、再点终点；值为 `[start, end]`（ISO 日期）。\n\n```vue preview src=\"./demos/Range.zh.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| [string, string] \\| null` | `null` | 单日输出 `YYYY-MM-DD`；范围输出 `[start, end]`。 |\n| `type` | `'date' \\| 'daterange'` | `'date'` | 单日或范围。 |\n| `label` | `string` | — | 标签。 |\n| `minDate` | `string \\| Date \\| null` | — | 可选下限。 |\n| `maxDate` | `string \\| Date \\| null` | — | 可选上限。 |\n| `placeholder` | `string` | locale | 占位。 |\n| `format` | `string` | `'YYYY-MM-DD'` | 输入框展示格式；提交值仍为 ISO。 |\n| `clearable` | `boolean` | `true` | 显示清除按钮。 |\n| `shortcuts` | `DatePickerShortcut[]` | `[]` | 面板快捷选项。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `teleport` | `boolean` | `true` | 面板 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `change` | — | — |\n| `hide` | — | — |\n| `show` | — | — |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `trigger` | 自定义触发器 `{ value, open }`。 |\n\n## 类型\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface DatePickerShortcut {\n label: string\n value:\n | DatePickerDateValue\n | [DatePickerDateValue, DatePickerDateValue]\n | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue])\n}\n```\n"
|
|
5133
5204
|
},
|
|
5134
5205
|
"en-US": {
|
|
5135
5206
|
"title": "DatePicker",
|
|
@@ -5193,7 +5264,7 @@
|
|
|
5193
5264
|
{
|
|
5194
5265
|
"id": "props",
|
|
5195
5266
|
"title": "Props",
|
|
5196
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| [string, string] \\| null` | `null` | Single day emits `YYYY-MM-DD`; range emits `[start, end]`. |\n| `type` | `'date' \\| 'daterange'` | `'date'` | Single day or range. |\n| `label` | `string` | — | Label. |\n| `minDate` | `string \\| Date \\| null` | — | Optional lower bound. |\n| `maxDate` | `string \\| Date \\| null` | — | Optional upper bound. |\n| `placeholder` | `string` | locale | Placeholder. |\n| `format` | `string` | `'YYYY-MM-DD'` | Input display pattern; the emitted value stays ISO. |\n| `clearable` | `boolean` | `true` | Show a clear button. |\n| `shortcuts` | `DatePickerShortcut[]` | `[]` | Panel shortcuts. |\n| `fluid` | `boolean` | `false` | Stretch to full width. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `teleport` | `boolean` | `true` | Panel Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
5267
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| [string, string] \\| null` | `null` | Single day emits `YYYY-MM-DD`; range emits `[start, end]`. |\n| `type` | `'date' \\| 'daterange'` | `'date'` | Single day or range. |\n| `label` | `string` | — | Label. |\n| `minDate` | `string \\| Date \\| null` | — | Optional lower bound. |\n| `maxDate` | `string \\| Date \\| null` | — | Optional upper bound. |\n| `placeholder` | `string` | locale | Placeholder. |\n| `format` | `string` | `'YYYY-MM-DD'` | Input display pattern; the emitted value stays ISO. |\n| `clearable` | `boolean` | `true` | Show a clear button. |\n| `shortcuts` | `DatePickerShortcut[]` | `[]` | Panel shortcuts. |\n| `fluid` | `boolean` | `false` | Stretch to full width. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `teleport` | `boolean` | `true` | Panel Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
5197
5268
|
},
|
|
5198
5269
|
{
|
|
5199
5270
|
"id": "events",
|
|
@@ -5211,7 +5282,7 @@
|
|
|
5211
5282
|
"body": "<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface DatePickerShortcut {\n label: string\n value:\n | DatePickerDateValue\n | [DatePickerDateValue, DatePickerDateValue]\n | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue])\n}\n```"
|
|
5212
5283
|
}
|
|
5213
5284
|
],
|
|
5214
|
-
"markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: Calendar overlay for a date or date range. Values are ISO date strings. Supports min/max, shortcuts, format, and clearable.\n---\n\n# DatePicker\n\nDate picker with month navigation and a day grid.\n\n## Import\n\n```ts\nimport { MDatePicker } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\nDates outside the range are disabled in the calendar.\n\n```vue preview src=\"./demos/MinMax.en.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.en.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.en.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.en.vue\"\n```\n\n## Teleport\n\nThe panel Teleports to `body` by default. Use `append-to=\"self\"` or `teleport={false}` to render in place.\n\n```vue preview src=\"./demos/Teleport.en.vue\"\n```\n\n## Range\n\nWith `type=\"daterange\"`, click the start date then the end date. The value is `[start, end]` (ISO dates).\n\n```vue preview src=\"./demos/Range.en.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| [string, string] \\| null` | `null` | Single day emits `YYYY-MM-DD`; range emits `[start, end]`. |\n| `type` | `'date' \\| 'daterange'` | `'date'` | Single day or range. |\n| `label` | `string` | — | Label. |\n| `minDate` | `string \\| Date \\| null` | — | Optional lower bound. |\n| `maxDate` | `string \\| Date \\| null` | — | Optional upper bound. |\n| `placeholder` | `string` | locale | Placeholder. |\n| `format` | `string` | `'YYYY-MM-DD'` | Input display pattern; the emitted value stays ISO. |\n| `clearable` | `boolean` | `true` | Show a clear button. |\n| `shortcuts` | `DatePickerShortcut[]` | `[]` | Panel shortcuts. |\n| `fluid` | `boolean` | `false` | Stretch to full width. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `teleport` | `boolean` | `true` | Panel Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | Value change. |\n| `clear` | — | Fired when the clear button is clicked. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `trigger` | Custom trigger `{ value, open }`. |\n\n## Types\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface DatePickerShortcut {\n label: string\n value:\n | DatePickerDateValue\n | [DatePickerDateValue, DatePickerDateValue]\n | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue])\n}\n```\n"
|
|
5285
|
+
"markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: Calendar overlay for a date or date range. Values are ISO date strings. Supports min/max, shortcuts, format, and clearable.\n---\n\n# DatePicker\n\nDate picker with month navigation and a day grid.\n\n## Import\n\n```ts\nimport { MDatePicker } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\nDates outside the range are disabled in the calendar.\n\n```vue preview src=\"./demos/MinMax.en.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.en.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.en.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.en.vue\"\n```\n\n## Teleport\n\nThe panel Teleports to `body` by default. Use `append-to=\"self\"` or `teleport={false}` to render in place.\n\n```vue preview src=\"./demos/Teleport.en.vue\"\n```\n\n## Range\n\nWith `type=\"daterange\"`, click the start date then the end date. The value is `[start, end]` (ISO dates).\n\n```vue preview src=\"./demos/Range.en.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| Date \\| [string, string] \\| null` | `null` | Single day emits `YYYY-MM-DD`; range emits `[start, end]`. |\n| `type` | `'date' \\| 'daterange'` | `'date'` | Single day or range. |\n| `label` | `string` | — | Label. |\n| `minDate` | `string \\| Date \\| null` | — | Optional lower bound. |\n| `maxDate` | `string \\| Date \\| null` | — | Optional upper bound. |\n| `placeholder` | `string` | locale | Placeholder. |\n| `format` | `string` | `'YYYY-MM-DD'` | Input display pattern; the emitted value stays ISO. |\n| `clearable` | `boolean` | `true` | Show a clear button. |\n| `shortcuts` | `DatePickerShortcut[]` | `[]` | Panel shortcuts. |\n| `fluid` | `boolean` | `false` | Stretch to full width. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `teleport` | `boolean` | `true` | Panel Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | Value change. |\n| `clear` | — | Fired when the clear button is clicked. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `trigger` | Custom trigger `{ value, open }`. |\n\n## Types\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface DatePickerShortcut {\n label: string\n value:\n | DatePickerDateValue\n | [DatePickerDateValue, DatePickerDateValue]\n | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue])\n}\n```\n"
|
|
5215
5286
|
}
|
|
5216
5287
|
}
|
|
5217
5288
|
},
|
|
@@ -5356,6 +5427,12 @@
|
|
|
5356
5427
|
"default": "—",
|
|
5357
5428
|
"description": "对话框可访问名称。"
|
|
5358
5429
|
},
|
|
5430
|
+
{
|
|
5431
|
+
"name": "transition",
|
|
5432
|
+
"type": "string | false",
|
|
5433
|
+
"default": "'zoom'",
|
|
5434
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
5435
|
+
},
|
|
5359
5436
|
{
|
|
5360
5437
|
"name": "pt",
|
|
5361
5438
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -5585,7 +5662,7 @@
|
|
|
5585
5662
|
{
|
|
5586
5663
|
"id": "props",
|
|
5587
5664
|
"title": "Props",
|
|
5588
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用（对应 `visible`）。 |\n| `title` | `string` | — | 标题文案。 |\n| `header` | `string` | — | `title` 的 别名。 |\n| `closeOnEsc` | `boolean` | `true` | 按 Esc 关闭。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定页面滚动（`modal` 时生效）。 |\n| `closeOnOutsideClick` | `boolean` | `true` | 点击遮罩关闭。 |\n| `dismissableMask` | `boolean` | — | `closeOnOutsideClick` 的 别名。 |\n| `closable` | `boolean` | `true` | 显示关闭按钮。 |\n| `maximizable` | `boolean` | `false` | 显示最大化 / 还原按钮。 |\n| `modal` | `boolean` | `true` | 遮罩层。 |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | 对话框位置。 |\n| `width` | `string` | — | 对话框宽度（最大化时忽略）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | 标题状态图标；`warning` 与 `warn` 同义 |\n| `positiveText` / `negativeText` | `string` | — | 预设页脚按钮；有 `footer` 插槽时忽略 |\n| `positiveSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | 确认按钮语义色 |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭 |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | X / Esc / 遮罩关闭前；返回 `false` 则保持打开 |\n| `ariaLabel` | `string` | — | 对话框可访问名称。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | 遮罩层（backdrop）透传，键名 `root`。 |"
|
|
5665
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用（对应 `visible`）。 |\n| `title` | `string` | — | 标题文案。 |\n| `header` | `string` | — | `title` 的 别名。 |\n| `closeOnEsc` | `boolean` | `true` | 按 Esc 关闭。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定页面滚动（`modal` 时生效）。 |\n| `closeOnOutsideClick` | `boolean` | `true` | 点击遮罩关闭。 |\n| `dismissableMask` | `boolean` | — | `closeOnOutsideClick` 的 别名。 |\n| `closable` | `boolean` | `true` | 显示关闭按钮。 |\n| `maximizable` | `boolean` | `false` | 显示最大化 / 还原按钮。 |\n| `modal` | `boolean` | `true` | 遮罩层。 |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | 对话框位置。 |\n| `width` | `string` | — | 对话框宽度（最大化时忽略）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | 标题状态图标；`warning` 与 `warn` 同义 |\n| `positiveText` / `negativeText` | `string` | — | 预设页脚按钮；有 `footer` 插槽时忽略 |\n| `positiveSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | 确认按钮语义色 |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭 |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | X / Esc / 遮罩关闭前；返回 `false` 则保持打开 |\n| `ariaLabel` | `string` | — | 对话框可访问名称。 |\n| `transition` | `string \\| false` | `'zoom'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | 遮罩层（backdrop）透传，键名 `root`。 |"
|
|
5589
5666
|
},
|
|
5590
5667
|
{
|
|
5591
5668
|
"id": "样式与-attrs",
|
|
@@ -5603,7 +5680,7 @@
|
|
|
5603
5680
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框内容。 |\n| `header` | 自定义标题区。 |\n| `footer` | 底部操作区。 |"
|
|
5604
5681
|
}
|
|
5605
5682
|
],
|
|
5606
|
-
"markdown": "---\ntitle: Dialog\ncategory: 05 / FEEDBACK\ndescription: 模态对话框。支持预设页脚、异步关闭拦截、状态 type。\n---\n\n# Dialog\n\n模态对话框。可见性使用 `v-model`（`modelValue`），对应 的 `visible`。\n\n## 引入\n\n```ts\nimport { MButton, MDialog } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Positions\n\n支持 `center` / `top` / `bottom` / `left` / `right` 以及四角位置。\n\n```vue preview src=\"./demos/Positions.vue\"\n```\n\n## Footer actions\n\n```vue preview src=\"./demos/FooterActions.vue\"\n```\n\n## No dismiss mask\n\n`dismissableMask={false}`（或 `closeOnOutsideClick={false}`）时点击遮罩不关闭。\n\n```vue preview src=\"./demos/NoDismissMask.vue\"\n```\n\n## Maximizable\n\n`maximizable` 在标题栏提供最大化 / 还原切换。\n\n```vue preview src=\"./demos/Maximizable.vue\"\n```\n\n## 预设页脚与异步关闭\n\n`positiveText` / `negativeText` 生成确认 / 取消按钮（`footer` 插槽优先）。处理函数返回 `false`（含 Promise）则保持打开。确认型流程请用 [ConfirmDialog](/components/ConfirmDialog)；`type` 只负责 Dialog 标题图标。\n\n```vue preview src=\"./demos/PresetFooterAndAsyncClose.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用（对应 `visible`）。 |\n| `title` | `string` | — | 标题文案。 |\n| `header` | `string` | — | `title` 的 别名。 |\n| `closeOnEsc` | `boolean` | `true` | 按 Esc 关闭。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定页面滚动（`modal` 时生效）。 |\n| `closeOnOutsideClick` | `boolean` | `true` | 点击遮罩关闭。 |\n| `dismissableMask` | `boolean` | — | `closeOnOutsideClick` 的 别名。 |\n| `closable` | `boolean` | `true` | 显示关闭按钮。 |\n| `maximizable` | `boolean` | `false` | 显示最大化 / 还原按钮。 |\n| `modal` | `boolean` | `true` | 遮罩层。 |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | 对话框位置。 |\n| `width` | `string` | — | 对话框宽度（最大化时忽略）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | 标题状态图标；`warning` 与 `warn` 同义 |\n| `positiveText` / `negativeText` | `string` | — | 预设页脚按钮；有 `footer` 插槽时忽略 |\n| `positiveSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | 确认按钮语义色 |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭 |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | X / Esc / 遮罩关闭前；返回 `false` 则保持打开 |\n| `ariaLabel` | `string` | — | 对话框可访问名称。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | 遮罩层（backdrop）透传，键名 `root`。 |\n\n## 样式与 attrs\n\nDialog Teleport 到 `body` 后，你在组件上写的 fallthrough attrs（`class`、`style`、`data-*`、`title` 等）落在**遮罩层**（`.m-dialog-backdrop`），不是内层 `.m-dialog` 面板。面板宽度用 `width` prop；内层 DOM 用 `pt`。详见 [样式与 attrs](/docs/attrs)。\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `close` | — | 关闭时触发。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |\n| `maximize` | — | 进入最大化。 |\n| `unmaximize` | — | 退出最大化。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框内容。 |\n| `header` | 自定义标题区。 |\n| `footer` | 底部操作区。 |\n"
|
|
5683
|
+
"markdown": "---\ntitle: Dialog\ncategory: 05 / FEEDBACK\ndescription: 模态对话框。支持预设页脚、异步关闭拦截、状态 type。\n---\n\n# Dialog\n\n模态对话框。可见性使用 `v-model`（`modelValue`），对应 的 `visible`。\n\n## 引入\n\n```ts\nimport { MButton, MDialog } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Positions\n\n支持 `center` / `top` / `bottom` / `left` / `right` 以及四角位置。\n\n```vue preview src=\"./demos/Positions.vue\"\n```\n\n## Footer actions\n\n```vue preview src=\"./demos/FooterActions.vue\"\n```\n\n## No dismiss mask\n\n`dismissableMask={false}`（或 `closeOnOutsideClick={false}`）时点击遮罩不关闭。\n\n```vue preview src=\"./demos/NoDismissMask.vue\"\n```\n\n## Maximizable\n\n`maximizable` 在标题栏提供最大化 / 还原切换。\n\n```vue preview src=\"./demos/Maximizable.vue\"\n```\n\n## 预设页脚与异步关闭\n\n`positiveText` / `negativeText` 生成确认 / 取消按钮（`footer` 插槽优先）。处理函数返回 `false`（含 Promise）则保持打开。确认型流程请用 [ConfirmDialog](/components/ConfirmDialog)；`type` 只负责 Dialog 标题图标。\n\n```vue preview src=\"./demos/PresetFooterAndAsyncClose.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用（对应 `visible`）。 |\n| `title` | `string` | — | 标题文案。 |\n| `header` | `string` | — | `title` 的 别名。 |\n| `closeOnEsc` | `boolean` | `true` | 按 Esc 关闭。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定页面滚动（`modal` 时生效）。 |\n| `closeOnOutsideClick` | `boolean` | `true` | 点击遮罩关闭。 |\n| `dismissableMask` | `boolean` | — | `closeOnOutsideClick` 的 别名。 |\n| `closable` | `boolean` | `true` | 显示关闭按钮。 |\n| `maximizable` | `boolean` | `false` | 显示最大化 / 还原按钮。 |\n| `modal` | `boolean` | `true` | 遮罩层。 |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | 对话框位置。 |\n| `width` | `string` | — | 对话框宽度（最大化时忽略）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | 标题状态图标；`warning` 与 `warn` 同义 |\n| `positiveText` / `negativeText` | `string` | — | 预设页脚按钮；有 `footer` 插槽时忽略 |\n| `positiveSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | 确认按钮语义色 |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | 返回 `false` 则不关闭 |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | X / Esc / 遮罩关闭前；返回 `false` 则保持打开 |\n| `ariaLabel` | `string` | — | 对话框可访问名称。 |\n| `transition` | `string \\| false` | `'zoom'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | 遮罩层（backdrop）透传，键名 `root`。 |\n\n## 样式与 attrs\n\nDialog Teleport 到 `body` 后，你在组件上写的 fallthrough attrs（`class`、`style`、`data-*`、`title` 等）落在**遮罩层**（`.m-dialog-backdrop`），不是内层 `.m-dialog` 面板。面板宽度用 `width` prop；内层 DOM 用 `pt`。详见 [样式与 attrs](/docs/attrs)。\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `close` | — | 关闭时触发。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |\n| `maximize` | — | 进入最大化。 |\n| `unmaximize` | — | 退出最大化。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框内容。 |\n| `header` | 自定义标题区。 |\n| `footer` | 底部操作区。 |\n"
|
|
5607
5684
|
},
|
|
5608
5685
|
"en-US": {
|
|
5609
5686
|
"title": "Dialog",
|
|
@@ -5652,7 +5729,7 @@
|
|
|
5652
5729
|
{
|
|
5653
5730
|
"id": "props",
|
|
5654
5731
|
"title": "Props",
|
|
5655
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model` (corresponding to `visible`). |\n| `title` | `string` | — | Title text. |\n| `header` | `string` | — | Alias of `title`. |\n| `closeOnEsc` | `boolean` | `true` | Close on Esc. |\n| `blockScroll` | `boolean` | `true` | Lock page scroll while open (when `modal` is true). |\n| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking the mask. |\n| `dismissableMask` | `boolean` | — | Alias of `closeOnOutsideClick`. |\n| `closable` | `boolean` | `true` | Show the close button. |\n| `maximizable` | `boolean` | `false` | Show the maximize / restore button. |\n| `modal` | `boolean` | `true` | Overlay mask. |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | Dialog position. |\n| `width` | `string` | — | Dialog width (ignored when maximized). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` renders in place. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | Status icon in the header; `warning` is an alias of `warn` |\n| `positiveText` / `negativeText` | `string` | — | Preset footer buttons; ignored when the `footer` slot is used |\n| `positiveSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | Confirm button severity |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | Return `false` to keep the dialog open |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | Runs before X / Esc / mask dismiss; return `false` to keep open |\n| `ariaLabel` | `string` | — | Accessible dialog name. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Backdrop pass-through; key `root`. |"
|
|
5732
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model` (corresponding to `visible`). |\n| `title` | `string` | — | Title text. |\n| `header` | `string` | — | Alias of `title`. |\n| `closeOnEsc` | `boolean` | `true` | Close on Esc. |\n| `blockScroll` | `boolean` | `true` | Lock page scroll while open (when `modal` is true). |\n| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking the mask. |\n| `dismissableMask` | `boolean` | — | Alias of `closeOnOutsideClick`. |\n| `closable` | `boolean` | `true` | Show the close button. |\n| `maximizable` | `boolean` | `false` | Show the maximize / restore button. |\n| `modal` | `boolean` | `true` | Overlay mask. |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | Dialog position. |\n| `width` | `string` | — | Dialog width (ignored when maximized). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` renders in place. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | Status icon in the header; `warning` is an alias of `warn` |\n| `positiveText` / `negativeText` | `string` | — | Preset footer buttons; ignored when the `footer` slot is used |\n| `positiveSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | Confirm button severity |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | Return `false` to keep the dialog open |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | Runs before X / Esc / mask dismiss; return `false` to keep open |\n| `ariaLabel` | `string` | — | Accessible dialog name. |\n| `transition` | `string \\| false` | `'zoom'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Backdrop pass-through; key `root`. |"
|
|
5656
5733
|
},
|
|
5657
5734
|
{
|
|
5658
5735
|
"id": "styling-attrs",
|
|
@@ -5670,7 +5747,7 @@
|
|
|
5670
5747
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Dialog content. |\n| `header` | Custom header area. |\n| `footer` | Footer actions. |"
|
|
5671
5748
|
}
|
|
5672
5749
|
],
|
|
5673
|
-
"markdown": "---\ntitle: Dialog\ncategory: 05 / FEEDBACK\ndescription: Modal dialog with preset footer actions, async close guards, and status type.\n---\n\n# Dialog\n\nModal dialog. Visibility uses `v-model` (`modelValue`), corresponding to `visible`.\n\n## Import\n\n```ts\nimport { MButton, MDialog } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Positions\n\nSupports `center` / `top` / `bottom` / `left` / `right` and the four corner positions.\n\n```vue preview src=\"./demos/Positions.vue\"\n```\n\n## Footer actions\n\n```vue preview src=\"./demos/FooterActions.vue\"\n```\n\n## No dismiss mask\n\nWith `dismissableMask={false}` (or `closeOnOutsideClick={false}`), clicking the mask does not close the dialog.\n\n```vue preview src=\"./demos/NoDismissMask.vue\"\n```\n\n## Maximizable\n\n`maximizable` adds a maximize / restore toggle in the title bar.\n\n```vue preview src=\"./demos/Maximizable.vue\"\n```\n\n## Preset footer and async close\n\n`positiveText` / `negativeText` render confirm / cancel buttons (`footer` slot wins). Return `false` (including from a Promise) to keep the dialog open. Use [ConfirmDialog](/components/ConfirmDialog) for accept/reject flows; Dialog `type` is a header icon only.\n\n```vue preview src=\"./demos/PresetFooterAndAsyncClose.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model` (corresponding to `visible`). |\n| `title` | `string` | — | Title text. |\n| `header` | `string` | — | Alias of `title`. |\n| `closeOnEsc` | `boolean` | `true` | Close on Esc. |\n| `blockScroll` | `boolean` | `true` | Lock page scroll while open (when `modal` is true). |\n| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking the mask. |\n| `dismissableMask` | `boolean` | — | Alias of `closeOnOutsideClick`. |\n| `closable` | `boolean` | `true` | Show the close button. |\n| `maximizable` | `boolean` | `false` | Show the maximize / restore button. |\n| `modal` | `boolean` | `true` | Overlay mask. |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | Dialog position. |\n| `width` | `string` | — | Dialog width (ignored when maximized). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` renders in place. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | Status icon in the header; `warning` is an alias of `warn` |\n| `positiveText` / `negativeText` | `string` | — | Preset footer buttons; ignored when the `footer` slot is used |\n| `positiveSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | Confirm button severity |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | Return `false` to keep the dialog open |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | Runs before X / Esc / mask dismiss; return `false` to keep open |\n| `ariaLabel` | `string` | — | Accessible dialog name. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Backdrop pass-through; key `root`. |\n\n## Styling & attrs\n\nAfter Teleport, fallthrough attrs on `<MDialog>` (`class`, `style`, `data-*`, `title`, …) land on the **backdrop** (`.m-dialog-backdrop`), not the inner `.m-dialog` panel. Use the `width` prop for panel width; use `pt` for inner DOM. See [Styling & attrs](/docs/attrs).\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n| `close` | — | Emitted when closing. |\n| `show` | — | Emitted when opening. |\n| `hide` | — | Emitted after closing. |\n| `maximize` | — | Enter maximize. |\n| `unmaximize` | — | Exit maximize. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Dialog content. |\n| `header` | Custom header area. |\n| `footer` | Footer actions. |\n"
|
|
5750
|
+
"markdown": "---\ntitle: Dialog\ncategory: 05 / FEEDBACK\ndescription: Modal dialog with preset footer actions, async close guards, and status type.\n---\n\n# Dialog\n\nModal dialog. Visibility uses `v-model` (`modelValue`), corresponding to `visible`.\n\n## Import\n\n```ts\nimport { MButton, MDialog } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Positions\n\nSupports `center` / `top` / `bottom` / `left` / `right` and the four corner positions.\n\n```vue preview src=\"./demos/Positions.vue\"\n```\n\n## Footer actions\n\n```vue preview src=\"./demos/FooterActions.vue\"\n```\n\n## No dismiss mask\n\nWith `dismissableMask={false}` (or `closeOnOutsideClick={false}`), clicking the mask does not close the dialog.\n\n```vue preview src=\"./demos/NoDismissMask.vue\"\n```\n\n## Maximizable\n\n`maximizable` adds a maximize / restore toggle in the title bar.\n\n```vue preview src=\"./demos/Maximizable.vue\"\n```\n\n## Preset footer and async close\n\n`positiveText` / `negativeText` render confirm / cancel buttons (`footer` slot wins). Return `false` (including from a Promise) to keep the dialog open. Use [ConfirmDialog](/components/ConfirmDialog) for accept/reject flows; Dialog `type` is a header icon only.\n\n```vue preview src=\"./demos/PresetFooterAndAsyncClose.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model` (corresponding to `visible`). |\n| `title` | `string` | — | Title text. |\n| `header` | `string` | — | Alias of `title`. |\n| `closeOnEsc` | `boolean` | `true` | Close on Esc. |\n| `blockScroll` | `boolean` | `true` | Lock page scroll while open (when `modal` is true). |\n| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking the mask. |\n| `dismissableMask` | `boolean` | — | Alias of `closeOnOutsideClick`. |\n| `closable` | `boolean` | `true` | Show the close button. |\n| `maximizable` | `boolean` | `false` | Show the maximize / restore button. |\n| `modal` | `boolean` | `true` | Overlay mask. |\n| `position` | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'topleft' \\| 'topright' \\| 'bottomleft' \\| 'bottomright'` | `'center'` | Dialog position. |\n| `width` | `string` | — | Dialog width (ignored when maximized). |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` renders in place. |\n| `type` | `'info' \\| 'success' \\| 'warning' \\| 'error'` | — | Status icon in the header; `warning` is an alias of `warn` |\n| `positiveText` / `negativeText` | `string` | — | Preset footer buttons; ignored when the `footer` slot is used |\n| `positiveSeverity` | [ButtonSeverity](/docs/types#ButtonSeverity) | — | Confirm button severity |\n| `onPositiveClick` / `onNegativeClick` | `(e) => unknown \\| Promise<unknown>` | — | Return `false` to keep the dialog open |\n| `beforeClose` | `() => unknown \\| Promise<unknown>` | — | Runs before X / Esc / mask dismiss; return `false` to keep open |\n| `ariaLabel` | `string` | — | Accessible dialog name. |\n| `transition` | `string \\| false` | `'zoom'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Backdrop pass-through; key `root`. |\n\n## Styling & attrs\n\nAfter Teleport, fallthrough attrs on `<MDialog>` (`class`, `style`, `data-*`, `title`, …) land on the **backdrop** (`.m-dialog-backdrop`), not the inner `.m-dialog` panel. Use the `width` prop for panel width; use `pt` for inner DOM. See [Styling & attrs](/docs/attrs).\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n| `close` | — | Emitted when closing. |\n| `show` | — | Emitted when opening. |\n| `hide` | — | Emitted after closing. |\n| `maximize` | — | Enter maximize. |\n| `unmaximize` | — | Exit maximize. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Dialog content. |\n| `header` | Custom header area. |\n| `footer` | Footer actions. |\n"
|
|
5674
5751
|
}
|
|
5675
5752
|
}
|
|
5676
5753
|
},
|
|
@@ -6207,6 +6284,12 @@
|
|
|
6207
6284
|
"default": "'body'",
|
|
6208
6285
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
6209
6286
|
},
|
|
6287
|
+
{
|
|
6288
|
+
"name": "transition",
|
|
6289
|
+
"type": "string | false",
|
|
6290
|
+
"default": "'drawer'",
|
|
6291
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
6292
|
+
},
|
|
6210
6293
|
{
|
|
6211
6294
|
"name": "beforeClose",
|
|
6212
6295
|
"type": "[AsyncGuard](/docs/types#AsyncGuard)",
|
|
@@ -6353,7 +6436,7 @@
|
|
|
6353
6436
|
{
|
|
6354
6437
|
"id": "props",
|
|
6355
6438
|
"title": "Props",
|
|
6356
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `position` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 抽屉出现位置。 |\n| `modal` | `boolean` | `true` | 显示遮罩层。 |\n| `dismissable` | `boolean` | `true` | 点击遮罩关闭。 |\n| `showCloseIcon` | `boolean` | `true` | 显示关闭按钮。 |\n| `header` | `string` | — | 标题文案。 |\n| `width` | `string \\| number` | — | 左右抽屉宽度。 |\n| `height` | `string \\| number` | — | 上下抽屉高度。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定 `body` 滚动。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `beforeClose` | [AsyncGuard](/docs/types#AsyncGuard) | — | — |\n| `closeOnEsc` | `boolean` | — | — |\n| `closeOnOutsideClick` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
6439
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `position` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 抽屉出现位置。 |\n| `modal` | `boolean` | `true` | 显示遮罩层。 |\n| `dismissable` | `boolean` | `true` | 点击遮罩关闭。 |\n| `showCloseIcon` | `boolean` | `true` | 显示关闭按钮。 |\n| `header` | `string` | — | 标题文案。 |\n| `width` | `string \\| number` | — | 左右抽屉宽度。 |\n| `height` | `string \\| number` | — | 上下抽屉高度。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定 `body` 滚动。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'drawer'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `beforeClose` | [AsyncGuard](/docs/types#AsyncGuard) | — | — |\n| `closeOnEsc` | `boolean` | — | — |\n| `closeOnOutsideClick` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
6357
6440
|
},
|
|
6358
6441
|
{
|
|
6359
6442
|
"id": "events",
|
|
@@ -6366,7 +6449,7 @@
|
|
|
6366
6449
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 抽屉内容。 |\n| `header` | 自定义标题区。 |"
|
|
6367
6450
|
}
|
|
6368
6451
|
],
|
|
6369
|
-
"markdown": "---\ntitle: Drawer\ncategory: 05 / FEEDBACK\ndescription: 侧边抽屉面板。\n---\n\n# Drawer\n\n侧边抽屉，从屏幕边缘滑出，适合导航、筛选或详情面板。\n\n## 引入\n\n```ts\nimport { MButton, MDrawer } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Position\n\n支持 `left` / `right` / `top` / `bottom`。\n\n```vue preview src=\"./demos/Position.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `position` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 抽屉出现位置。 |\n| `modal` | `boolean` | `true` | 显示遮罩层。 |\n| `dismissable` | `boolean` | `true` | 点击遮罩关闭。 |\n| `showCloseIcon` | `boolean` | `true` | 显示关闭按钮。 |\n| `header` | `string` | — | 标题文案。 |\n| `width` | `string \\| number` | — | 左右抽屉宽度。 |\n| `height` | `string \\| number` | — | 上下抽屉高度。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定 `body` 滚动。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `beforeClose` | [AsyncGuard](/docs/types#AsyncGuard) | — | — |\n| `closeOnEsc` | `boolean` | — | — |\n| `closeOnOutsideClick` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |\n| `after-leave` | — | 离场动画结束。 |\n| `close` | — | — |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 抽屉内容。 |\n| `header` | 自定义标题区。 |\n"
|
|
6452
|
+
"markdown": "---\ntitle: Drawer\ncategory: 05 / FEEDBACK\ndescription: 侧边抽屉面板。\n---\n\n# Drawer\n\n侧边抽屉，从屏幕边缘滑出，适合导航、筛选或详情面板。\n\n## 引入\n\n```ts\nimport { MButton, MDrawer } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Position\n\n支持 `left` / `right` / `top` / `bottom`。\n\n```vue preview src=\"./demos/Position.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `position` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 抽屉出现位置。 |\n| `modal` | `boolean` | `true` | 显示遮罩层。 |\n| `dismissable` | `boolean` | `true` | 点击遮罩关闭。 |\n| `showCloseIcon` | `boolean` | `true` | 显示关闭按钮。 |\n| `header` | `string` | — | 标题文案。 |\n| `width` | `string \\| number` | — | 左右抽屉宽度。 |\n| `height` | `string \\| number` | — | 上下抽屉高度。 |\n| `blockScroll` | `boolean` | `true` | 打开时锁定 `body` 滚动。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'drawer'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `beforeClose` | [AsyncGuard](/docs/types#AsyncGuard) | — | — |\n| `closeOnEsc` | `boolean` | — | — |\n| `closeOnOutsideClick` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |\n| `after-leave` | — | 离场动画结束。 |\n| `close` | — | — |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 抽屉内容。 |\n| `header` | 自定义标题区。 |\n"
|
|
6370
6453
|
},
|
|
6371
6454
|
"en-US": {
|
|
6372
6455
|
"title": "Drawer",
|
|
@@ -6395,7 +6478,7 @@
|
|
|
6395
6478
|
{
|
|
6396
6479
|
"id": "props",
|
|
6397
6480
|
"title": "Props",
|
|
6398
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `position` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Edge the drawer appears from. |\n| `modal` | `boolean` | `true` | Show the overlay mask. |\n| `dismissable` | `boolean` | `true` | Close when clicking the mask. |\n| `showCloseIcon` | `boolean` | `true` | Show the close button. |\n| `header` | `string` | — | Header text. |\n| `width` | `number \\| string` | — | Width for left/right drawers (`number` = px). |\n| `height` | `number \\| string` | — | Height for top/bottom drawers (`number` = px). |\n| `blockScroll` | `boolean` | `true` | Lock `body` scroll while open. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
6481
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `position` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Edge the drawer appears from. |\n| `modal` | `boolean` | `true` | Show the overlay mask. |\n| `dismissable` | `boolean` | `true` | Close when clicking the mask. |\n| `showCloseIcon` | `boolean` | `true` | Show the close button. |\n| `header` | `string` | — | Header text. |\n| `width` | `number \\| string` | — | Width for left/right drawers (`number` = px). |\n| `height` | `number \\| string` | — | Height for top/bottom drawers (`number` = px). |\n| `blockScroll` | `boolean` | `true` | Lock `body` scroll while open. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'drawer'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
6399
6482
|
},
|
|
6400
6483
|
{
|
|
6401
6484
|
"id": "events",
|
|
@@ -6408,7 +6491,7 @@
|
|
|
6408
6491
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Drawer content. |\n| `header` | Custom header area. |"
|
|
6409
6492
|
}
|
|
6410
6493
|
],
|
|
6411
|
-
"markdown": "---\ntitle: Drawer\ncategory: 05 / FEEDBACK\ndescription: Side drawer panel.\n---\n\n# Drawer\n\nSide drawer that slides in from the screen edge. Suited to navigation, filters, or detail panels.\n\n## Import\n\n```ts\nimport { MButton, MDrawer } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Position\n\nSupports `left` / `right` / `top` / `bottom`.\n\n```vue preview src=\"./demos/Position.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `position` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Edge the drawer appears from. |\n| `modal` | `boolean` | `true` | Show the overlay mask. |\n| `dismissable` | `boolean` | `true` | Close when clicking the mask. |\n| `showCloseIcon` | `boolean` | `true` | Show the close button. |\n| `header` | `string` | — | Header text. |\n| `width` | `number \\| string` | — | Width for left/right drawers (`number` = px). |\n| `height` | `number \\| string` | — | Height for top/bottom drawers (`number` = px). |\n| `blockScroll` | `boolean` | `true` | Lock `body` scroll while open. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n| `show` | — | Emitted when opening. |\n| `hide` | — | Emitted after closing. |\n| `after-leave` | — | Emitted when the leave animation finishes. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Drawer content. |\n| `header` | Custom header area. |\n"
|
|
6494
|
+
"markdown": "---\ntitle: Drawer\ncategory: 05 / FEEDBACK\ndescription: Side drawer panel.\n---\n\n# Drawer\n\nSide drawer that slides in from the screen edge. Suited to navigation, filters, or detail panels.\n\n## Import\n\n```ts\nimport { MButton, MDrawer } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Position\n\nSupports `left` / `right` / `top` / `bottom`.\n\n```vue preview src=\"./demos/Position.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `position` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Edge the drawer appears from. |\n| `modal` | `boolean` | `true` | Show the overlay mask. |\n| `dismissable` | `boolean` | `true` | Close when clicking the mask. |\n| `showCloseIcon` | `boolean` | `true` | Show the close button. |\n| `header` | `string` | — | Header text. |\n| `width` | `number \\| string` | — | Width for left/right drawers (`number` = px). |\n| `height` | `number \\| string` | — | Height for top/bottom drawers (`number` = px). |\n| `blockScroll` | `boolean` | `true` | Lock `body` scroll while open. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'drawer'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Visibility change. |\n| `show` | — | Emitted when opening. |\n| `hide` | — | Emitted after closing. |\n| `after-leave` | — | Emitted when the leave animation finishes. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Drawer content. |\n| `header` | Custom header area. |\n"
|
|
6412
6495
|
}
|
|
6413
6496
|
}
|
|
6414
6497
|
},
|
|
@@ -6475,6 +6558,12 @@
|
|
|
6475
6558
|
"default": "'body'",
|
|
6476
6559
|
"description": "挂载目标；`'self'` / `false` 表示就地渲染。"
|
|
6477
6560
|
},
|
|
6561
|
+
{
|
|
6562
|
+
"name": "transition",
|
|
6563
|
+
"type": "string | false",
|
|
6564
|
+
"default": "'scale-fade'",
|
|
6565
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
6566
|
+
},
|
|
6478
6567
|
{
|
|
6479
6568
|
"name": "pt",
|
|
6480
6569
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -6611,7 +6700,7 @@
|
|
|
6611
6700
|
{
|
|
6612
6701
|
"id": "props",
|
|
6613
6702
|
"title": "Props",
|
|
6614
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 菜单是否打开。 |\n| `items` | `DropdownItem[]` | — | 菜单项；可含 `type` / `separator` / `items` / `icon` / `command`。 |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | 对齐方式。 |\n| `closeOnSelect` | `boolean` | `true` | 选择后关闭。 |\n| `trigger` | `'click' \\| 'hover'` | `'click'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 将菜单 Teleport 出去；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 表示就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
6703
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 菜单是否打开。 |\n| `items` | `DropdownItem[]` | — | 菜单项；可含 `type` / `separator` / `items` / `icon` / `command`。 |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | 对齐方式。 |\n| `closeOnSelect` | `boolean` | `true` | 选择后关闭。 |\n| `trigger` | `'click' \\| 'hover'` | `'click'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 将菜单 Teleport 出去；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 表示就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
6615
6704
|
},
|
|
6616
6705
|
{
|
|
6617
6706
|
"id": "events",
|
|
@@ -6629,7 +6718,7 @@
|
|
|
6629
6718
|
"body": "<h4 id=\"DropdownItem\">DropdownItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface DropdownItem extends MenuNodeBase {\n type?: DropdownItemType\n items?: DropdownItem[]\n}\n```"
|
|
6630
6719
|
}
|
|
6631
6720
|
],
|
|
6632
|
-
"markdown": "---\ntitle: Dropdown\ncategory: 04 / NAVIGATION\ndescription: 动作菜单覆盖层（非表单选择器）。与 Select 不同：用于触发编辑、删除等操作项。\n---\n\n# Dropdown\n\n动作菜单（action menu overlay）。用于从触发器打开一组操作项。\n\n**与 Select 的区别：** `MDropdown` 是菜单覆盖层；表单选项选择请使用 `MSelect`。\n\n支持分组（`type: 'group'`）、分割线（`separator` / `type: 'divider'`）、嵌套 `items`，以及 `trigger: 'hover'` + `showDelay` / `hideDelay`。键盘高亮仍只覆盖顶层叶子项。\n\n## 引入\n\n```ts\nimport { MButton, MDropdown } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Nested / group / hover\n\n```vue preview src=\"./demos/NestedGroupHover.zh.vue\"\n```\n\n## 滚动与嵌套子菜单\n\n主菜单与嵌套 `items` 的侧向飞出层均内置 `MScrollbar`，高度上限为 `min(18rem, 45vh)`。嵌套子菜单会 **额外 Teleport 到 `body`** 并相对父项定位，避免主菜单滚动时裁剪飞出层；hover 移入飞出层时有短暂延迟关闭。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 菜单是否打开。 |\n| `items` | `DropdownItem[]` | — | 菜单项；可含 `type` / `separator` / `items` / `icon` / `command`。 |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | 对齐方式。 |\n| `closeOnSelect` | `boolean` | `true` | 选择后关闭。 |\n| `trigger` | `'click' \\| 'hover'` | `'click'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 将菜单 Teleport 出去；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 表示就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 打开状态变化。 |\n| `select` | `DropdownItem` | 选中启用项时触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `trigger` | 触发器。 |\n| `item` | 自定义菜单项，作用域 `{ item }`。 |\n\n## 类型\n\n<h4 id=\"DropdownItem\">DropdownItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface DropdownItem extends MenuNodeBase {\n type?: DropdownItemType\n items?: DropdownItem[]\n}\n```\n"
|
|
6721
|
+
"markdown": "---\ntitle: Dropdown\ncategory: 04 / NAVIGATION\ndescription: 动作菜单覆盖层（非表单选择器）。与 Select 不同：用于触发编辑、删除等操作项。\n---\n\n# Dropdown\n\n动作菜单（action menu overlay）。用于从触发器打开一组操作项。\n\n**与 Select 的区别：** `MDropdown` 是菜单覆盖层；表单选项选择请使用 `MSelect`。\n\n支持分组（`type: 'group'`）、分割线（`separator` / `type: 'divider'`）、嵌套 `items`，以及 `trigger: 'hover'` + `showDelay` / `hideDelay`。键盘高亮仍只覆盖顶层叶子项。\n\n## 引入\n\n```ts\nimport { MButton, MDropdown } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Nested / group / hover\n\n```vue preview src=\"./demos/NestedGroupHover.zh.vue\"\n```\n\n## 滚动与嵌套子菜单\n\n主菜单与嵌套 `items` 的侧向飞出层均内置 `MScrollbar`，高度上限为 `min(18rem, 45vh)`。嵌套子菜单会 **额外 Teleport 到 `body`** 并相对父项定位，避免主菜单滚动时裁剪飞出层；hover 移入飞出层时有短暂延迟关闭。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 菜单是否打开。 |\n| `items` | `DropdownItem[]` | — | 菜单项；可含 `type` / `separator` / `items` / `icon` / `command`。 |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | 对齐方式。 |\n| `closeOnSelect` | `boolean` | `true` | 选择后关闭。 |\n| `trigger` | `'click' \\| 'hover'` | `'click'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 将菜单 Teleport 出去；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 表示就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 打开状态变化。 |\n| `select` | `DropdownItem` | 选中启用项时触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `trigger` | 触发器。 |\n| `item` | 自定义菜单项，作用域 `{ item }`。 |\n\n## 类型\n\n<h4 id=\"DropdownItem\">DropdownItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface DropdownItem extends MenuNodeBase {\n type?: DropdownItemType\n items?: DropdownItem[]\n}\n```\n"
|
|
6633
6722
|
},
|
|
6634
6723
|
"en-US": {
|
|
6635
6724
|
"title": "Dropdown",
|
|
@@ -6663,7 +6752,7 @@
|
|
|
6663
6752
|
{
|
|
6664
6753
|
"id": "props",
|
|
6665
6754
|
"title": "Props",
|
|
6666
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Whether the menu is open. |\n| `items` | `DropdownItem[]` | — | Menu items; may include `type` / `separator` / `items` / `icon` / `command`. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Alignment. |\n| `closeOnSelect` | `boolean` | `true` | Close after selection. |\n| `trigger` | `'click' \\| 'hover'` | `'click'` | How the menu opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover delays in ms. |\n| `teleport` | `boolean` | `true` | Teleport the menu; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
6755
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Whether the menu is open. |\n| `items` | `DropdownItem[]` | — | Menu items; may include `type` / `separator` / `items` / `icon` / `command`. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Alignment. |\n| `closeOnSelect` | `boolean` | `true` | Close after selection. |\n| `trigger` | `'click' \\| 'hover'` | `'click'` | How the menu opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover delays in ms. |\n| `teleport` | `boolean` | `true` | Teleport the menu; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
6667
6756
|
},
|
|
6668
6757
|
{
|
|
6669
6758
|
"id": "events",
|
|
@@ -6681,7 +6770,7 @@
|
|
|
6681
6770
|
"body": "<h4 id=\"DropdownItem\">DropdownItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface DropdownItem extends MenuNodeBase {\n type?: DropdownItemType\n items?: DropdownItem[]\n}\n```"
|
|
6682
6771
|
}
|
|
6683
6772
|
],
|
|
6684
|
-
"markdown": "---\ntitle: Dropdown\ncategory: 04 / NAVIGATION\ndescription: Action menu overlay (not a form select). Unlike Select, it is used to trigger actions such as edit and delete.\n---\n\n# Dropdown\n\nAction menu overlay. Opens a set of actions from a trigger.\n\n**Difference from Select:** `MDropdown` is a menu overlay; for form option selection, use `MSelect`.\n\nSupports groups (`type: 'group'`), dividers (`separator` / `type: 'divider'`), nested `items`, and `trigger: 'hover'` with `showDelay` / `hideDelay`. Keyboard highlight still covers top-level leaves only.\n\n## Import\n\n```ts\nimport { MButton, MDropdown } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Nested / group / hover\n\n```vue preview src=\"./demos/NestedGroupHover.en.vue\"\n```\n\n## Scrolling & nested flyouts\n\nBoth the root menu and nested `items` flyouts use built-in `MScrollbar` with `max-height: min(18rem, 45vh)`. Nested submenus are **also teleported to `body`** and positioned against the parent item so they are not clipped when the root menu scrolls; a short hover delay keeps the flyout open while moving the pointer into it.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Whether the menu is open. |\n| `items` | `DropdownItem[]` | — | Menu items; may include `type` / `separator` / `items` / `icon` / `command`. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Alignment. |\n| `closeOnSelect` | `boolean` | `true` | Close after selection. |\n| `trigger` | `'click' \\| 'hover'` | `'click'` | How the menu opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover delays in ms. |\n| `teleport` | `boolean` | `true` | Teleport the menu; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Open state change. |\n| `select` | `DropdownItem` | Emitted when an enabled item is selected. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `trigger` | Trigger. |\n| `item` | Custom menu item, scope `{ item }`. |\n\n## Types\n\n<h4 id=\"DropdownItem\">DropdownItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface DropdownItem extends MenuNodeBase {\n type?: DropdownItemType\n items?: DropdownItem[]\n}\n```\n"
|
|
6773
|
+
"markdown": "---\ntitle: Dropdown\ncategory: 04 / NAVIGATION\ndescription: Action menu overlay (not a form select). Unlike Select, it is used to trigger actions such as edit and delete.\n---\n\n# Dropdown\n\nAction menu overlay. Opens a set of actions from a trigger.\n\n**Difference from Select:** `MDropdown` is a menu overlay; for form option selection, use `MSelect`.\n\nSupports groups (`type: 'group'`), dividers (`separator` / `type: 'divider'`), nested `items`, and `trigger: 'hover'` with `showDelay` / `hideDelay`. Keyboard highlight still covers top-level leaves only.\n\n## Import\n\n```ts\nimport { MButton, MDropdown } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Nested / group / hover\n\n```vue preview src=\"./demos/NestedGroupHover.en.vue\"\n```\n\n## Scrolling & nested flyouts\n\nBoth the root menu and nested `items` flyouts use built-in `MScrollbar` with `max-height: min(18rem, 45vh)`. Nested submenus are **also teleported to `body`** and positioned against the parent item so they are not clipped when the root menu scrolls; a short hover delay keeps the flyout open while moving the pointer into it.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Whether the menu is open. |\n| `items` | `DropdownItem[]` | — | Menu items; may include `type` / `separator` / `items` / `icon` / `command`. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Alignment. |\n| `closeOnSelect` | `boolean` | `true` | Close after selection. |\n| `trigger` | `'click' \\| 'hover'` | `'click'` | How the menu opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover delays in ms. |\n| `teleport` | `boolean` | `true` | Teleport the menu; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Open state change. |\n| `select` | `DropdownItem` | Emitted when an enabled item is selected. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `trigger` | Trigger. |\n| `item` | Custom menu item, scope `{ item }`. |\n\n## Types\n\n<h4 id=\"DropdownItem\">DropdownItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface DropdownItem extends MenuNodeBase {\n type?: DropdownItemType\n items?: DropdownItem[]\n}\n```\n"
|
|
6685
6774
|
}
|
|
6686
6775
|
}
|
|
6687
6776
|
},
|
|
@@ -8947,7 +9036,7 @@
|
|
|
8947
9036
|
"sectionId": "全部系统图标",
|
|
8948
9037
|
"lang": "vue",
|
|
8949
9038
|
"preview": true,
|
|
8950
|
-
"code": "<script setup lang=\"ts\">\nimport type {ToastMessage} from 'morya-ui'
|
|
9039
|
+
"code": "<script setup lang=\"ts\">\nimport type { IconCategoryId, ToastMessage } from 'morya-ui'\nimport {\n getIconCategory,\n getIconCategoryGroups,\n iconCategoryMeta,\n iconNames,\n MIcon,\n MInput,\n MToast,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst query = ref('')\nconst category = ref<IconCategoryId | 'all'>('all')\nconst copied = ref<string | null>(null)\nconst messages = ref<ToastMessage[]>([])\nlet toastSeq = 0\nlet copiedTimer: ReturnType<typeof setTimeout> | undefined\n\nconst categoryOptions = computed(() => [\n { id: 'all' as const, label: '全部' },\n ...iconCategoryMeta.map((item) => ({ id: item.id, label: item.labelZh })),\n])\n\nconst filteredNames = computed(() => {\n const q = query.value.trim().toLowerCase()\n return iconNames.filter((name) => {\n if (q && !name.toLowerCase().includes(q)) return false\n if (category.value !== 'all') return getIconCategory(name) === category.value\n return true\n })\n})\n\nconst grouped = computed(() => getIconCategoryGroups(filteredNames.value))\n\nfunction chipStyle(id: IconCategoryId | 'all') {\n const active = category.value === id\n return [\n 'background:' + (active ? 'var(--m-color-primary-soft, color-mix(in srgb, var(--m-color-primary) 14%, transparent))' : 'var(--m-color-surface)'),\n 'border:1px solid ' + (active ? 'var(--m-color-primary)' : 'var(--m-color-border)'),\n 'border-radius:var(--m-radius-full, 999px)',\n 'color:' + (active ? 'var(--m-color-primary)' : 'var(--m-color-text)'),\n 'cursor:pointer',\n 'font:inherit',\n 'font-size:0.8125rem',\n 'line-height:1.2',\n 'padding:0.35rem 0.75rem',\n ].join(';')\n}\n\nfunction itemStyle(name: string) {\n const active = copied.value === name\n return [\n 'align-items:center',\n 'background:var(--m-color-surface)',\n `border:1px solid ${active ? 'var(--m-color-primary)' : 'var(--m-color-border)'}`,\n 'border-radius:var(--m-radius-control, 3px)',\n `color:${active ? 'var(--m-color-primary)' : 'var(--m-color-text)'}`,\n 'cursor:pointer',\n 'display:flex',\n 'flex-direction:column',\n 'font:inherit',\n 'gap:0.65rem',\n 'justify-content:center',\n 'min-height:6.5rem',\n 'padding:0.85rem 0.5rem',\n 'width:100%',\n ].join(';')\n}\n\nasync function copyName(name: string) {\n try {\n await navigator.clipboard.writeText(name)\n } catch {\n const area = document.createElement('textarea')\n area.value = name\n document.body.appendChild(area)\n area.select()\n document.execCommand('copy')\n area.remove()\n }\n copied.value = name\n if (copiedTimer) clearTimeout(copiedTimer)\n copiedTimer = setTimeout(() => {\n if (copied.value === name) copied.value = null\n }, 1200)\n\n const id = `icon-copy-${++toastSeq}`\n messages.value = [\n ...messages.value,\n {\n id,\n severity: 'success',\n summary: '已复制',\n detail: name,\n closable: true,\n },\n ]\n window.setTimeout(() => {\n messages.value = messages.value.filter((item) => item.id !== id)\n }, 1600)\n}\n\nfunction onToastClose(message: ToastMessage) {\n messages.value = messages.value.filter((item) => item.id !== message.id)\n}\n</script>\n\n<template>\n <div class=\"w-full\">\n <MInput\n v-model=\"query\"\n clearable\n fluid\n placeholder=\"搜索图标名称…\"\n class=\"max-w-xs mb-3\"\n >\n <template #prefix>\n <MIcon name=\"search\" size=\"sm\" />\n </template>\n </MInput>\n\n <div style=\"display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem\">\n <button\n v-for=\"opt in categoryOptions\"\n :key=\"opt.id\"\n type=\"button\"\n :style=\"chipStyle(opt.id)\"\n @click=\"category = opt.id\"\n >\n {{ opt.label }}\n </button>\n </div>\n\n <p\n v-if=\"!grouped.length\"\n style=\"color: var(--m-color-text-muted); font-size: 0.875rem; margin: 0.5rem 0 0\"\n >\n 没有匹配的图标\n </p>\n\n <div v-else style=\"display:grid;gap:1.25rem;width:100%\">\n <section v-for=\"group in grouped\" :key=\"group.id\">\n <h4\n style=\"align-items:baseline;color:var(--m-color-text);display:flex;font-size:0.875rem;font-weight:600;gap:0.5rem;margin:0 0 0.65rem\"\n >\n <span>{{ group.labelZh }}</span>\n <span style=\"color:var(--m-color-text-muted);font-size:0.75rem;font-weight:500\">\n {{ group.icons.length }}\n </span>\n </h4>\n <div\n style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(7.25rem,1fr));gap:0.75rem;width:100%\"\n >\n <button\n v-for=\"name in group.icons\"\n :key=\"name\"\n type=\"button\"\n :style=\"itemStyle(name)\"\n :title=\"`点击复制 ${name}`\"\n @click=\"copyName(name)\"\n >\n <MIcon :name=\"name\" size=\"large\" />\n <span\n style=\"font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.72rem;line-height:1.3;max-width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap\"\n >\n {{ copied === name ? '已复制' : name }}\n </span>\n </button>\n </div>\n </section>\n </div>\n\n <MToast :messages=\"messages\" position=\"top-right\" @close=\"onToastClose\" />\n </div>\n</template>",
|
|
8951
9040
|
"locale": "zh-CN"
|
|
8952
9041
|
},
|
|
8953
9042
|
{
|
|
@@ -8983,7 +9072,7 @@
|
|
|
8983
9072
|
"sectionId": "all-system-icons",
|
|
8984
9073
|
"lang": "vue",
|
|
8985
9074
|
"preview": true,
|
|
8986
|
-
"code": "<script setup lang=\"ts\">\nimport type {ToastMessage} from 'morya-ui'
|
|
9075
|
+
"code": "<script setup lang=\"ts\">\nimport type { IconCategoryId, ToastMessage } from 'morya-ui'\nimport {\n getIconCategory,\n getIconCategoryGroups,\n iconCategoryMeta,\n iconNames,\n MIcon,\n MInput,\n MToast,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst query = ref('')\nconst category = ref<IconCategoryId | 'all'>('all')\nconst copied = ref<string | null>(null)\nconst messages = ref<ToastMessage[]>([])\nlet toastSeq = 0\nlet copiedTimer: ReturnType<typeof setTimeout> | undefined\n\nconst categoryOptions = computed(() => [\n { id: 'all' as const, label: 'All' },\n ...iconCategoryMeta.map((item) => ({ id: item.id, label: item.labelEn })),\n])\n\nconst filteredNames = computed(() => {\n const q = query.value.trim().toLowerCase()\n return iconNames.filter((name) => {\n if (q && !name.toLowerCase().includes(q)) return false\n if (category.value !== 'all') return getIconCategory(name) === category.value\n return true\n })\n})\n\nconst grouped = computed(() => getIconCategoryGroups(filteredNames.value))\n\nfunction chipStyle(id: IconCategoryId | 'all') {\n const active = category.value === id\n return [\n 'background:' + (active ? 'var(--m-color-primary-soft, color-mix(in srgb, var(--m-color-primary) 14%, transparent))' : 'var(--m-color-surface)'),\n 'border:1px solid ' + (active ? 'var(--m-color-primary)' : 'var(--m-color-border)'),\n 'border-radius:var(--m-radius-full, 999px)',\n 'color:' + (active ? 'var(--m-color-primary)' : 'var(--m-color-text)'),\n 'cursor:pointer',\n 'font:inherit',\n 'font-size:0.8125rem',\n 'line-height:1.2',\n 'padding:0.35rem 0.75rem',\n ].join(';')\n}\n\nfunction itemStyle(name: string) {\n const active = copied.value === name\n return [\n 'align-items:center',\n 'background:var(--m-color-surface)',\n `border:1px solid ${active ? 'var(--m-color-primary)' : 'var(--m-color-border)'}`,\n 'border-radius:var(--m-radius-control, 3px)',\n `color:${active ? 'var(--m-color-primary)' : 'var(--m-color-text)'}`,\n 'cursor:pointer',\n 'display:flex',\n 'flex-direction:column',\n 'font:inherit',\n 'gap:0.65rem',\n 'justify-content:center',\n 'min-height:6.5rem',\n 'padding:0.85rem 0.5rem',\n 'width:100%',\n ].join(';')\n}\n\nasync function copyName(name: string) {\n try {\n await navigator.clipboard.writeText(name)\n } catch {\n const area = document.createElement('textarea')\n area.value = name\n document.body.appendChild(area)\n area.select()\n document.execCommand('copy')\n area.remove()\n }\n copied.value = name\n if (copiedTimer) clearTimeout(copiedTimer)\n copiedTimer = setTimeout(() => {\n if (copied.value === name) copied.value = null\n }, 1200)\n\n const id = `icon-copy-${++toastSeq}`\n messages.value = [\n ...messages.value,\n {\n id,\n severity: 'success',\n summary: 'Copied',\n detail: name,\n closable: true,\n },\n ]\n window.setTimeout(() => {\n messages.value = messages.value.filter((item) => item.id !== id)\n }, 1600)\n}\n\nfunction onToastClose(message: ToastMessage) {\n messages.value = messages.value.filter((item) => item.id !== message.id)\n}\n</script>\n\n<template>\n <div class=\"w-full\">\n <MInput\n v-model=\"query\"\n clearable\n fluid\n placeholder=\"Search icon names…\"\n class=\"max-w-xs mb-3\"\n >\n <template #prefix>\n <MIcon name=\"search\" size=\"sm\" />\n </template>\n </MInput>\n\n <div style=\"display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem\">\n <button\n v-for=\"opt in categoryOptions\"\n :key=\"opt.id\"\n type=\"button\"\n :style=\"chipStyle(opt.id)\"\n @click=\"category = opt.id\"\n >\n {{ opt.label }}\n </button>\n </div>\n\n <p\n v-if=\"!grouped.length\"\n style=\"color: var(--m-color-text-muted); font-size: 0.875rem; margin: 0.5rem 0 0\"\n >\n No matching icons\n </p>\n\n <div v-else style=\"display:grid;gap:1.25rem;width:100%\">\n <section v-for=\"group in grouped\" :key=\"group.id\">\n <h4\n style=\"align-items:baseline;color:var(--m-color-text);display:flex;font-size:0.875rem;font-weight:600;gap:0.5rem;margin:0 0 0.65rem\"\n >\n <span>{{ group.labelEn }}</span>\n <span style=\"color:var(--m-color-text-muted);font-size:0.75rem;font-weight:500\">\n {{ group.icons.length }}\n </span>\n </h4>\n <div\n style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(7.25rem,1fr));gap:0.75rem;width:100%\"\n >\n <button\n v-for=\"name in group.icons\"\n :key=\"name\"\n type=\"button\"\n :style=\"itemStyle(name)\"\n :title=\"`Click to copy ${name}`\"\n @click=\"copyName(name)\"\n >\n <MIcon :name=\"name\" size=\"large\" />\n <span\n style=\"font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.72rem;line-height:1.3;max-width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap\"\n >\n {{ copied === name ? 'Copied' : name }}\n </span>\n </button>\n </div>\n </section>\n </div>\n\n <MToast :messages=\"messages\" position=\"top-right\" @close=\"onToastClose\" />\n </div>\n</template>",
|
|
8987
9076
|
"locale": "en-US"
|
|
8988
9077
|
},
|
|
8989
9078
|
{
|
|
@@ -9004,7 +9093,7 @@
|
|
|
9004
9093
|
{
|
|
9005
9094
|
"id": "overview",
|
|
9006
9095
|
"title": "",
|
|
9007
|
-
"body": "# Icon\n\n`MIcon`
|
|
9096
|
+
"body": "# Icon\n\n`MIcon` 维护**组件库系统图标**（关闭、箭头、状态、导航、业务常用等，含 Tabler outline）。完整海量图标请用默认插槽接入 [Lucide](https://lucide.dev) 等库。"
|
|
9008
9097
|
},
|
|
9009
9098
|
{
|
|
9010
9099
|
"id": "引入",
|
|
@@ -9019,7 +9108,7 @@
|
|
|
9019
9108
|
{
|
|
9020
9109
|
"id": "全部系统图标",
|
|
9021
9110
|
"title": "全部系统图标",
|
|
9022
|
-
"body": "点击图标即可复制名称（如 `search`），用法：`<MIcon name=\"search\"
|
|
9111
|
+
"body": "点击图标即可复制名称（如 `search`），用法：`<MIcon name=\"search\" />`。可按分类筛选，或搜索名称。\n\n```vue preview src=\"./demos/AllSystemIcons.zh.vue\"\n```"
|
|
9023
9112
|
},
|
|
9024
9113
|
{
|
|
9025
9114
|
"id": "自定义-lucide-推荐业务侧",
|
|
@@ -9039,7 +9128,7 @@
|
|
|
9039
9128
|
{
|
|
9040
9129
|
"id": "工具导出",
|
|
9041
9130
|
"title": "工具导出",
|
|
9042
|
-
"body": "| 导出 | 说明 |\n| --- | --- |\n| `iconNames` | 全部系统图标名数组。 |\n| `iconRegistry` / `getIconDefinition` / `isIconName` | 注册表与类型守卫。 |"
|
|
9131
|
+
"body": "| 导出 | 说明 |\n| --- | --- |\n| `iconNames` | 全部系统图标名数组。 |\n| `iconCategoryMeta` / `getIconCategory` / `getIconCategoryGroups` | 图标分类元数据与分组。 |\n| `iconRegistry` / `getIconDefinition` / `isIconName` | 注册表与类型守卫。 |"
|
|
9043
9132
|
},
|
|
9044
9133
|
{
|
|
9045
9134
|
"id": "events",
|
|
@@ -9047,7 +9136,7 @@
|
|
|
9047
9136
|
"body": "无自定义事件。"
|
|
9048
9137
|
}
|
|
9049
9138
|
],
|
|
9050
|
-
"markdown": "---\ntitle: Icon\ncategory: 01 / BASIC\ndescription: 系统线框图标注册表。业务图标用默认插槽接入 Lucide 等库。\n---\n\n# Icon\n\n`MIcon`
|
|
9139
|
+
"markdown": "---\ntitle: Icon\ncategory: 01 / BASIC\ndescription: 系统线框图标注册表。业务图标用默认插槽接入 Lucide 等库。\n---\n\n# Icon\n\n`MIcon` 维护**组件库系统图标**（关闭、箭头、状态、导航、业务常用等，含 Tabler outline）。完整海量图标请用默认插槽接入 [Lucide](https://lucide.dev) 等库。\n\n## 引入\n\n```ts\nimport { iconNames, MIcon } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## 全部系统图标\n\n点击图标即可复制名称（如 `search`），用法：`<MIcon name=\"search\" />`。可按分类筛选，或搜索名称。\n\n```vue preview src=\"./demos/AllSystemIcons.zh.vue\"\n```\n\n## 自定义 / Lucide（推荐业务侧）\n\n系统图标不够时，不要往组件库堆 SVG，用默认插槽挂任意图标组件：\n\n```vue\n<script setup lang=\"ts\">\nimport { User } from 'lucide-vue-next'\nimport { MButton, MIcon, MIconField, MInput } from 'morya-ui'\n</script>\n\n<template>\n <MIcon label=\"用户\" size=\"md\">\n <User :size=\"16\" :stroke-width=\"1.8\" />\n </MIcon>\n\n <MIconField>\n <template #icon>\n <MIcon size=\"sm\">\n <User :size=\"14\" :stroke-width=\"1.8\" />\n </MIcon>\n </template>\n <MInput placeholder=\"搜索用户\" />\n </MIconField>\n\n <!-- Button 也可直接传组件，不必包 MIcon -->\n <MButton :icon=\"User\" label=\"资料\" />\n</template>\n```\n\n安装示例：`pnpm add lucide-vue-next`。线宽建议 `1.75`–`2`，与系统图标 `1.8` 接近。\n\n有默认插槽时**优先渲染插槽**，忽略 `name`。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `name` | [IconName](/docs/types#IconName) | — | 系统图标名；插槽存在时可省略。 |\n| `label` | `string` | — | 可访问名称；省略时 `aria-hidden`。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | `'md'` | 尺寸；`sm`/`lg` 映射到 small/large。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `default` | 自定义 SVG / 第三方图标组件。 |\n\n## 工具导出\n\n| 导出 | 说明 |\n| --- | --- |\n| `iconNames` | 全部系统图标名数组。 |\n| `iconCategoryMeta` / `getIconCategory` / `getIconCategoryGroups` | 图标分类元数据与分组。 |\n| `iconRegistry` / `getIconDefinition` / `isIconName` | 注册表与类型守卫。 |\n\n## Events\n\n无自定义事件。\n"
|
|
9051
9140
|
},
|
|
9052
9141
|
"en-US": {
|
|
9053
9142
|
"title": "Icon",
|
|
@@ -9056,7 +9145,7 @@
|
|
|
9056
9145
|
{
|
|
9057
9146
|
"id": "overview",
|
|
9058
9147
|
"title": "",
|
|
9059
|
-
"body": "# Icon\n\n`MIcon`
|
|
9148
|
+
"body": "# Icon\n\n`MIcon` maintains **component-library system icons** (close, arrows, status, navigation, common business icons from Tabler outline). For large business icon sets, use the default slot with [Lucide](https://lucide.dev) or another library."
|
|
9060
9149
|
},
|
|
9061
9150
|
{
|
|
9062
9151
|
"id": "import",
|
|
@@ -9071,7 +9160,7 @@
|
|
|
9071
9160
|
{
|
|
9072
9161
|
"id": "all-system-icons",
|
|
9073
9162
|
"title": "All system icons",
|
|
9074
|
-
"body": "Click an icon to copy its name (for example `search`). Usage: `<MIcon name=\"search\"
|
|
9163
|
+
"body": "Click an icon to copy its name (for example `search`). Usage: `<MIcon name=\"search\" />`. Filter by category or search by name.\n\n```vue preview src=\"./demos/AllSystemIcons.en.vue\"\n```"
|
|
9075
9164
|
},
|
|
9076
9165
|
{
|
|
9077
9166
|
"id": "custom-lucide-recommended-on-the-app-side",
|
|
@@ -9091,7 +9180,7 @@
|
|
|
9091
9180
|
{
|
|
9092
9181
|
"id": "utility-exports",
|
|
9093
9182
|
"title": "Utility exports",
|
|
9094
|
-
"body": "| Export | Description |\n| --- | --- |\n| `iconNames` | Array of all system icon names. |\n| `iconRegistry` / `getIconDefinition` / `isIconName` | Registry and type guards. |"
|
|
9183
|
+
"body": "| Export | Description |\n| --- | --- |\n| `iconNames` | Array of all system icon names. |\n| `iconCategoryMeta` / `getIconCategory` / `getIconCategoryGroups` | Category metadata and grouping helpers. |\n| `iconRegistry` / `getIconDefinition` / `isIconName` | Registry and type guards. |"
|
|
9095
9184
|
},
|
|
9096
9185
|
{
|
|
9097
9186
|
"id": "events",
|
|
@@ -9099,7 +9188,7 @@
|
|
|
9099
9188
|
"body": "No custom events."
|
|
9100
9189
|
}
|
|
9101
9190
|
],
|
|
9102
|
-
"markdown": "---\ntitle: Icon\ncategory: 01 / BASIC\ndescription: System outline icon registry. Use the default slot for business icons from Lucide and similar libraries.\n---\n\n# Icon\n\n`MIcon`
|
|
9191
|
+
"markdown": "---\ntitle: Icon\ncategory: 01 / BASIC\ndescription: System outline icon registry. Use the default slot for business icons from Lucide and similar libraries.\n---\n\n# Icon\n\n`MIcon` maintains **component-library system icons** (close, arrows, status, navigation, common business icons from Tabler outline). For large business icon sets, use the default slot with [Lucide](https://lucide.dev) or another library.\n\n## Import\n\n```ts\nimport { iconNames, MIcon } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## All system icons\n\nClick an icon to copy its name (for example `search`). Usage: `<MIcon name=\"search\" />`. Filter by category or search by name.\n\n```vue preview src=\"./demos/AllSystemIcons.en.vue\"\n```\n\n## Custom / Lucide (recommended on the app side)\n\nWhen system icons are not enough, do not pile SVGs into the component library. Mount any icon component through the default slot:\n\n```vue\n<script setup lang=\"ts\">\nimport { User } from 'lucide-vue-next'\nimport { MButton, MIcon, MIconField, MInput } from 'morya-ui'\n</script>\n\n<template>\n <MIcon label=\"User\" size=\"md\">\n <User :size=\"16\" :stroke-width=\"1.8\" />\n </MIcon>\n\n <MIconField>\n <template #icon>\n <MIcon size=\"sm\">\n <User :size=\"14\" :stroke-width=\"1.8\" />\n </MIcon>\n </template>\n <MInput placeholder=\"Search users\" />\n </MIconField>\n\n <!-- Button can also take a component directly without wrapping MIcon -->\n <MButton :icon=\"User\" label=\"Profile\" />\n</template>\n```\n\nInstall example: `pnpm add lucide-vue-next`. Prefer stroke width `1.75`–`2`, close to the system icon width of `1.8`.\n\nWhen the default slot is present, it is **rendered first** and `name` is ignored.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `name` | [IconName](/docs/types#IconName) | — | System icon name; optional when a slot is provided. |\n| `label` | `string` | — | Accessible name; omitted icons use `aria-hidden`. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | `'md'` | Size; `sm`/`lg` map to small/large. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Custom SVG / third-party icon component. |\n\n## Utility exports\n\n| Export | Description |\n| --- | --- |\n| `iconNames` | Array of all system icon names. |\n| `iconCategoryMeta` / `getIconCategory` / `getIconCategoryGroups` | Category metadata and grouping helpers. |\n| `iconRegistry` / `getIconDefinition` / `isIconName` | Registry and type guards. |\n\n## Events\n\nNo custom events.\n"
|
|
9103
9192
|
}
|
|
9104
9193
|
}
|
|
9105
9194
|
},
|
|
@@ -11905,7 +11994,7 @@
|
|
|
11905
11994
|
"sectionId": "基础用法",
|
|
11906
11995
|
"lang": "vue",
|
|
11907
11996
|
"preview": true,
|
|
11908
|
-
"code": "<script setup lang=\"ts\">\nimport { MLayout, MLayoutContent, MLayoutFooter, MLayoutHeader } from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:16rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Header\n </MLayoutHeader>\n <MLayoutContent embedded
|
|
11997
|
+
"code": "<script setup lang=\"ts\">\nimport { MLayout, MLayoutContent, MLayoutFooter, MLayoutHeader } from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:16rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Header\n </MLayoutHeader>\n <MLayoutContent embedded style=\"padding:1rem;display:flex;align-items:center;justify-content:center\">\n Content（自动撑开）\n </MLayoutContent>\n <MLayoutFooter bordered style=\"padding:0.75rem 1rem\">\n Footer\n </MLayoutFooter>\n </MLayout>\n</template>",
|
|
11909
11998
|
"locale": "zh-CN"
|
|
11910
11999
|
},
|
|
11911
12000
|
{
|
|
@@ -11914,7 +12003,7 @@
|
|
|
11914
12003
|
"sectionId": "with-sider",
|
|
11915
12004
|
"lang": "vue",
|
|
11916
12005
|
"preview": true,
|
|
11917
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\n</script>\n\n<template>\n <MLayout style=\"height:16rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem;display:flex;align-items:center;justify-content:space-between\">\n <strong>App</strong>\n <span style=\"color:var(--m-color-text-muted);font-size:0.75rem\">{{ collapsed ? '已折叠' : '已展开' }}</span>\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n show-trigger=\"arrow-circle\"\n :width=\"
|
|
12006
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n MMenu,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\nconst selectedKey = ref('overview')\nconst model = [\n { key: 'overview', label: '概览', icon: 'layout-dashboard' },\n { key: 'projects', label: '项目', icon: 'folder' },\n { key: 'settings', label: '设置', icon: 'settings' },\n]\n</script>\n\n<template>\n <MLayout style=\"height:16rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem;display:flex;align-items:center;justify-content:space-between\">\n <strong>App</strong>\n <span style=\"color:var(--m-color-text-muted);font-size:0.75rem\">{{ collapsed ? '已折叠' : '已展开' }}</span>\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n show-trigger=\"arrow-circle\"\n collapse-mode=\"width\"\n :width=\"168\"\n :collapsed-width=\"64\"\n >\n <MMenu\n v-model:selected-key=\"selectedKey\"\n :model=\"model\"\n :collapsed=\"collapsed\"\n :collapsed-width=\"64\"\n />\n </MLayoutSider>\n <MLayoutContent embedded style=\"padding:1rem\">\n 当前选中：{{ selectedKey }}\n </MLayoutContent>\n </MLayout>\n </MLayout>\n</template>",
|
|
11918
12007
|
"locale": "zh-CN"
|
|
11919
12008
|
},
|
|
11920
12009
|
{
|
|
@@ -11923,7 +12012,7 @@
|
|
|
11923
12012
|
"sectionId": "right-sider",
|
|
11924
12013
|
"lang": "vue",
|
|
11925
12014
|
"preview": true,
|
|
11926
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Inspector\n </MLayoutHeader>\n <MLayout has-sider sider-placement=\"right\">\n <MLayoutSider bordered :width=\"140\"
|
|
12015
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Inspector\n </MLayoutHeader>\n <MLayout has-sider sider-placement=\"right\">\n <MLayoutSider bordered :width=\"140\" style=\"padding:0.75rem\">\n 属性面板\n </MLayoutSider>\n <MLayoutContent embedded style=\"padding:1rem\">\n 画布 / 主区域\n </MLayoutContent>\n </MLayout>\n </MLayout>\n</template>",
|
|
11927
12016
|
"locale": "zh-CN"
|
|
11928
12017
|
},
|
|
11929
12018
|
{
|
|
@@ -11932,7 +12021,7 @@
|
|
|
11932
12021
|
"sectionId": "full-shell",
|
|
11933
12022
|
"lang": "vue",
|
|
11934
12023
|
"preview": true,
|
|
11935
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MLayout,\n MLayoutContent,\n MLayoutFooter,\n MLayoutHeader,\n MLayoutSider,\n MTag,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\n</script>\n\n<template>\n <MLayout style=\"height:18rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader\n bordered\n inverted\n style=\"padding:0.65rem 1rem;display:flex;align-items:center;gap:0.75rem\"\n >\n <strong>Morya UI</strong>\n <MTag value=\"Studio\" />\n <span style=\"flex:1\" />\n <MButton size=\"small\" label=\"发布\" />\n </MLayoutHeader>\n\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n inverted\n show-trigger=\"bar\"\n
|
|
12024
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MLayout,\n MLayoutContent,\n MLayoutFooter,\n MLayoutHeader,\n MLayoutSider,\n MMenu,\n MTag,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\nconst selectedKey = ref('dashboard')\nconst model = [\n { key: 'dashboard', label: '仪表盘', icon: 'layout-dashboard' },\n { key: 'datasources', label: '数据源', icon: 'database' },\n { key: 'widgets', label: '组件', icon: 'components' },\n { key: 'theme', label: '主题', icon: 'palette' },\n]\n</script>\n\n<template>\n <MLayout style=\"height:18rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader\n bordered\n inverted\n style=\"padding:0.65rem 1rem;display:flex;align-items:center;gap:0.75rem\"\n >\n <strong>Morya UI</strong>\n <MTag value=\"Studio\" />\n <span style=\"flex:1\" />\n <MButton size=\"small\" label=\"发布\" />\n </MLayoutHeader>\n\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n inverted\n show-trigger=\"bar\"\n collapse-mode=\"width\"\n :width=\"168\"\n :collapsed-width=\"56\"\n >\n <MMenu\n v-model:selected-key=\"selectedKey\"\n :model=\"model\"\n :collapsed=\"collapsed\"\n :collapsed-width=\"56\"\n inverted\n />\n </MLayoutSider>\n\n <MLayout>\n <MLayoutContent embedded style=\"padding:1rem;display:grid;gap:0.75rem;align-content:start\">\n <strong>工作区</strong>\n <p style=\"margin:0;color:var(--m-color-text-muted);font-size:0.875rem\">\n 当前选中：{{ selectedKey }}。Content 已撑满 Header 与 Footer 之间的空间；侧栏折叠不影响主区高度。\n </p>\n </MLayoutContent>\n <MLayoutFooter bordered style=\"padding:0.5rem 1rem;color:var(--m-color-text-muted);font-size:0.75rem\">\n Ready · local\n </MLayoutFooter>\n </MLayout>\n </MLayout>\n </MLayout>\n</template>",
|
|
11936
12025
|
"locale": "zh-CN"
|
|
11937
12026
|
},
|
|
11938
12027
|
{
|
|
@@ -11941,7 +12030,7 @@
|
|
|
11941
12030
|
"sectionId": "embedded-content",
|
|
11942
12031
|
"lang": "vue",
|
|
11943
12032
|
"preview": true,
|
|
11944
|
-
"code": "<script setup lang=\"ts\">\nimport { MLayout, MLayoutContent, MLayoutHeader } from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:12rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Settings\n </MLayoutHeader>\n <MLayoutContent embedded
|
|
12033
|
+
"code": "<script setup lang=\"ts\">\nimport { MLayout, MLayoutContent, MLayoutHeader } from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:12rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Settings\n </MLayoutHeader>\n <MLayoutContent embedded style=\"padding:1rem\">\n 嵌套表单 / 列表放在这里。\n </MLayoutContent>\n </MLayout>\n</template>",
|
|
11945
12034
|
"locale": "zh-CN"
|
|
11946
12035
|
},
|
|
11947
12036
|
{
|
|
@@ -11950,7 +12039,7 @@
|
|
|
11950
12039
|
"sectionId": "scrollable-content",
|
|
11951
12040
|
"lang": "vue",
|
|
11952
12041
|
"preview": true,
|
|
11953
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Scroll demo\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider bordered :width=\"120\"
|
|
12042
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Scroll demo\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider bordered :width=\"120\" style=\"padding:0.75rem\">\n 固定侧栏\n </MLayoutSider>\n <MLayoutContent embedded style=\"padding:1rem;overflow:auto;min-height:0\">\n <div style=\"display:grid;gap:0.5rem\">\n <div v-for=\"n in 20\" :key=\"n\">\n 行 {{ n }} — 向下滚动\n </div>\n </div>\n </MLayoutContent>\n </MLayout>\n </MLayout>\n</template>",
|
|
11954
12043
|
"locale": "zh-CN"
|
|
11955
12044
|
},
|
|
11956
12045
|
{
|
|
@@ -11959,7 +12048,7 @@
|
|
|
11959
12048
|
"sectionId": "absolute-shell",
|
|
11960
12049
|
"lang": "vue",
|
|
11961
12050
|
"preview": true,
|
|
11962
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <div style=\"position:relative;height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayout position=\"absolute\" has-sider>\n <MLayoutSider bordered :width=\"120\"
|
|
12051
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <div style=\"position:relative;height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayout position=\"absolute\" has-sider>\n <MLayoutSider bordered :width=\"120\" style=\"padding:0.75rem\">\n Nav\n </MLayoutSider>\n <MLayout>\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Absolute layout\n </MLayoutHeader>\n <MLayoutContent embedded style=\"padding:1rem\">\n 填满相对定位容器\n </MLayoutContent>\n </MLayout>\n </MLayout>\n </div>\n</template>",
|
|
11963
12052
|
"locale": "zh-CN"
|
|
11964
12053
|
},
|
|
11965
12054
|
{
|
|
@@ -11977,7 +12066,7 @@
|
|
|
11977
12066
|
"sectionId": "basic",
|
|
11978
12067
|
"lang": "vue",
|
|
11979
12068
|
"preview": true,
|
|
11980
|
-
"code": "<script setup lang=\"ts\">\nimport { MLayout, MLayoutContent, MLayoutFooter, MLayoutHeader } from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:16rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Header\n </MLayoutHeader>\n <MLayoutContent embedded
|
|
12069
|
+
"code": "<script setup lang=\"ts\">\nimport { MLayout, MLayoutContent, MLayoutFooter, MLayoutHeader } from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:16rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Header\n </MLayoutHeader>\n <MLayoutContent embedded style=\"padding:1rem;display:flex;align-items:center;justify-content:center\">\n Content (fills remaining space)\n </MLayoutContent>\n <MLayoutFooter bordered style=\"padding:0.75rem 1rem\">\n Footer\n </MLayoutFooter>\n </MLayout>\n</template>",
|
|
11981
12070
|
"locale": "en-US"
|
|
11982
12071
|
},
|
|
11983
12072
|
{
|
|
@@ -11986,7 +12075,7 @@
|
|
|
11986
12075
|
"sectionId": "with-sider",
|
|
11987
12076
|
"lang": "vue",
|
|
11988
12077
|
"preview": true,
|
|
11989
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\n</script>\n\n<template>\n <MLayout style=\"height:16rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem;display:flex;align-items:center;justify-content:space-between\">\n <strong>App</strong>\n <span style=\"color:var(--m-color-text-muted);font-size:0.75rem\">{{ collapsed ? 'Collapsed' : 'Expanded' }}</span>\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n show-trigger=\"arrow-circle\"\n :width=\"
|
|
12078
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n MMenu,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\nconst selectedKey = ref('overview')\nconst model = [\n { key: 'overview', label: 'Overview', icon: 'layout-dashboard' },\n { key: 'projects', label: 'Projects', icon: 'folder' },\n { key: 'settings', label: 'Settings', icon: 'settings' },\n]\n</script>\n\n<template>\n <MLayout style=\"height:16rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem;display:flex;align-items:center;justify-content:space-between\">\n <strong>App</strong>\n <span style=\"color:var(--m-color-text-muted);font-size:0.75rem\">{{ collapsed ? 'Collapsed' : 'Expanded' }}</span>\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n show-trigger=\"arrow-circle\"\n collapse-mode=\"width\"\n :width=\"168\"\n :collapsed-width=\"64\"\n >\n <MMenu\n v-model:selected-key=\"selectedKey\"\n :model=\"model\"\n :collapsed=\"collapsed\"\n :collapsed-width=\"64\"\n />\n </MLayoutSider>\n <MLayoutContent embedded style=\"padding:1rem\">\n Selected: {{ selectedKey }}\n </MLayoutContent>\n </MLayout>\n </MLayout>\n</template>",
|
|
11990
12079
|
"locale": "en-US"
|
|
11991
12080
|
},
|
|
11992
12081
|
{
|
|
@@ -11995,7 +12084,7 @@
|
|
|
11995
12084
|
"sectionId": "right-sider",
|
|
11996
12085
|
"lang": "vue",
|
|
11997
12086
|
"preview": true,
|
|
11998
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Inspector\n </MLayoutHeader>\n <MLayout has-sider sider-placement=\"right\">\n <MLayoutSider bordered :width=\"140\"
|
|
12087
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Inspector\n </MLayoutHeader>\n <MLayout has-sider sider-placement=\"right\">\n <MLayoutSider bordered :width=\"140\" style=\"padding:0.75rem\">\n Props panel\n </MLayoutSider>\n <MLayoutContent embedded style=\"padding:1rem\">\n Canvas / main\n </MLayoutContent>\n </MLayout>\n </MLayout>\n</template>",
|
|
11999
12088
|
"locale": "en-US"
|
|
12000
12089
|
},
|
|
12001
12090
|
{
|
|
@@ -12004,7 +12093,7 @@
|
|
|
12004
12093
|
"sectionId": "full-shell",
|
|
12005
12094
|
"lang": "vue",
|
|
12006
12095
|
"preview": true,
|
|
12007
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MLayout,\n MLayoutContent,\n MLayoutFooter,\n MLayoutHeader,\n MLayoutSider,\n MTag,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\n</script>\n\n<template>\n <MLayout style=\"height:18rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader\n bordered\n inverted\n style=\"padding:0.65rem 1rem;display:flex;align-items:center;gap:0.75rem\"\n >\n <strong>Morya UI</strong>\n <MTag value=\"Studio\" />\n <span style=\"flex:1\" />\n <MButton size=\"small\" label=\"Publish\" />\n </MLayoutHeader>\n\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n inverted\n show-trigger=\"bar\"\n
|
|
12096
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MLayout,\n MLayoutContent,\n MLayoutFooter,\n MLayoutHeader,\n MLayoutSider,\n MMenu,\n MTag,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\nconst selectedKey = ref('dashboard')\nconst model = [\n { key: 'dashboard', label: 'Dashboard', icon: 'layout-dashboard' },\n { key: 'datasources', label: 'Datasources', icon: 'database' },\n { key: 'widgets', label: 'Widgets', icon: 'components' },\n { key: 'theme', label: 'Theme', icon: 'palette' },\n]\n</script>\n\n<template>\n <MLayout style=\"height:18rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader\n bordered\n inverted\n style=\"padding:0.65rem 1rem;display:flex;align-items:center;gap:0.75rem\"\n >\n <strong>Morya UI</strong>\n <MTag value=\"Studio\" />\n <span style=\"flex:1\" />\n <MButton size=\"small\" label=\"Publish\" />\n </MLayoutHeader>\n\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n inverted\n show-trigger=\"bar\"\n collapse-mode=\"width\"\n :width=\"168\"\n :collapsed-width=\"56\"\n >\n <MMenu\n v-model:selected-key=\"selectedKey\"\n :model=\"model\"\n :collapsed=\"collapsed\"\n :collapsed-width=\"56\"\n inverted\n />\n </MLayoutSider>\n\n <MLayout>\n <MLayoutContent embedded style=\"padding:1rem;display:grid;gap:0.75rem;align-content:start\">\n <strong>Workspace</strong>\n <p style=\"margin:0;color:var(--m-color-text-muted);font-size:0.875rem\">\n Selected: {{ selectedKey }}. Content fills the space between Header and Footer; collapsing the sider keeps the height.\n </p>\n </MLayoutContent>\n <MLayoutFooter bordered style=\"padding:0.5rem 1rem;color:var(--m-color-text-muted);font-size:0.75rem\">\n Ready · local\n </MLayoutFooter>\n </MLayout>\n </MLayout>\n </MLayout>\n</template>",
|
|
12008
12097
|
"locale": "en-US"
|
|
12009
12098
|
},
|
|
12010
12099
|
{
|
|
@@ -12013,7 +12102,7 @@
|
|
|
12013
12102
|
"sectionId": "embedded-content",
|
|
12014
12103
|
"lang": "vue",
|
|
12015
12104
|
"preview": true,
|
|
12016
|
-
"code": "<script setup lang=\"ts\">\nimport { MLayout, MLayoutContent, MLayoutHeader } from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:12rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Settings\n </MLayoutHeader>\n <MLayoutContent embedded
|
|
12105
|
+
"code": "<script setup lang=\"ts\">\nimport { MLayout, MLayoutContent, MLayoutHeader } from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:12rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Settings\n </MLayoutHeader>\n <MLayoutContent embedded style=\"padding:1rem\">\n Nested forms / lists go here.\n </MLayoutContent>\n </MLayout>\n</template>",
|
|
12017
12106
|
"locale": "en-US"
|
|
12018
12107
|
},
|
|
12019
12108
|
{
|
|
@@ -12022,7 +12111,7 @@
|
|
|
12022
12111
|
"sectionId": "scrollable-content",
|
|
12023
12112
|
"lang": "vue",
|
|
12024
12113
|
"preview": true,
|
|
12025
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Scroll demo\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider bordered :width=\"120\"
|
|
12114
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <MLayout style=\"height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Scroll demo\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider bordered :width=\"120\" style=\"padding:0.75rem\">\n Fixed sider\n </MLayoutSider>\n <MLayoutContent embedded style=\"padding:1rem;overflow:auto;min-height:0\">\n <div style=\"display:grid;gap:0.5rem\">\n <div v-for=\"n in 20\" :key=\"n\">\n Row {{ n }} — scroll down\n </div>\n </div>\n </MLayoutContent>\n </MLayout>\n </MLayout>\n</template>",
|
|
12026
12115
|
"locale": "en-US"
|
|
12027
12116
|
},
|
|
12028
12117
|
{
|
|
@@ -12031,7 +12120,7 @@
|
|
|
12031
12120
|
"sectionId": "absolute-shell",
|
|
12032
12121
|
"lang": "vue",
|
|
12033
12122
|
"preview": true,
|
|
12034
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <div style=\"position:relative;height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayout position=\"absolute\" has-sider>\n <MLayoutSider bordered :width=\"120\"
|
|
12123
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n</script>\n\n<template>\n <div style=\"position:relative;height:14rem;border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:hidden\">\n <MLayout position=\"absolute\" has-sider>\n <MLayoutSider bordered :width=\"120\" style=\"padding:0.75rem\">\n Nav\n </MLayoutSider>\n <MLayout>\n <MLayoutHeader bordered style=\"padding:0.75rem 1rem\">\n Absolute layout\n </MLayoutHeader>\n <MLayoutContent embedded style=\"padding:1rem\">\n Fills the relative container\n </MLayoutContent>\n </MLayout>\n </MLayout>\n </div>\n</template>",
|
|
12035
12124
|
"locale": "en-US"
|
|
12036
12125
|
}
|
|
12037
12126
|
],
|
|
@@ -12058,7 +12147,7 @@
|
|
|
12058
12147
|
{
|
|
12059
12148
|
"id": "with-sider",
|
|
12060
12149
|
"title": "With Sider",
|
|
12061
|
-
"body": "顶栏 + 左侧栏 +
|
|
12150
|
+
"body": "顶栏 + 左侧栏 + 主内容。侧栏内嵌 `MMenu`，并通过 `v-model:collapsed` 与菜单折叠联动。内层 `has-sider` 的 Layout 会吃掉 Header 以下的全部高度。\n\n```vue preview src=\"./demos/WithSider.zh.vue\"\n```"
|
|
12062
12151
|
},
|
|
12063
12152
|
{
|
|
12064
12153
|
"id": "right-sider",
|
|
@@ -12068,7 +12157,7 @@
|
|
|
12068
12157
|
{
|
|
12069
12158
|
"id": "full-shell",
|
|
12070
12159
|
"title": "Full Shell",
|
|
12071
|
-
"body": "完整后台骨架：顶栏 +
|
|
12160
|
+
"body": "完整后台骨架：顶栏 + 反色侧栏（`MMenu` `inverted`）+ 内容 + 底栏。\n\n```vue preview src=\"./demos/FullShell.zh.vue\"\n```"
|
|
12072
12161
|
},
|
|
12073
12162
|
{
|
|
12074
12163
|
"id": "embedded-content",
|
|
@@ -12078,7 +12167,7 @@
|
|
|
12078
12167
|
{
|
|
12079
12168
|
"id": "scrollable-content",
|
|
12080
12169
|
"title": "Scrollable Content",
|
|
12081
|
-
"body": "
|
|
12170
|
+
"body": "内容超出时，可在 `MLayoutContent` 上自行设置 `overflow: auto`（或包一层 `MScrollbar`）；Header / Sider 保持固定。`MLayout` 根容器仍内置 `MScrollbar`；`MLayoutContent` / `MLayoutSider` 为单层壳。\n\n```vue preview src=\"./demos/ScrollableContent.zh.vue\"\n```"
|
|
12082
12171
|
},
|
|
12083
12172
|
{
|
|
12084
12173
|
"id": "absolute-shell",
|
|
@@ -12093,17 +12182,17 @@
|
|
|
12093
12182
|
{
|
|
12094
12183
|
"id": "layoutsider-props",
|
|
12095
12184
|
"title": "LayoutSider Props",
|
|
12096
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `width` | `number \\| string` | `272` | 展开宽度（始终写在 `width` 上）。 |\n| `collapsedWidth` | `number` | `48` | 折叠时的 `max-width`。 |\n| `collapsed` | `boolean` | — | 折叠状态，支持 `v-model:collapsed`。 |\n| `defaultCollapsed` | `boolean` | `false` | 非受控初始折叠。 |\n| `showTrigger` | `boolean \\| 'bar' \\| 'arrow-circle' \\| 'arrow'` | `false` | 折叠触发器；`arrow` 等同 `arrow-circle`。 |\n| `collapseMode` | `'width' \\| 'transform'` | `'transform'` | `transform` 裁切内容；`width` 随侧栏收缩。 |\n| `showCollapsedContent` | `boolean` | `true` | 折叠后是否仍显示侧栏内容。 |\n| `bordered` / `inverted` | `boolean` | `false` | 边框 / 反色。 |\n| `triggerClass` / `triggerStyle` | — | — | 展开态触发器样式。 |\n| `collapsedTriggerClass` / `collapsedTriggerStyle` | — | — | 折叠态触发器样式。 |\n| `
|
|
12185
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `width` | `number \\| string` | `272` | 展开宽度（始终写在 `width` 上）。 |\n| `collapsedWidth` | `number` | `48` | 折叠时的 `max-width`。 |\n| `collapsed` | `boolean` | — | 折叠状态，支持 `v-model:collapsed`。 |\n| `defaultCollapsed` | `boolean` | `false` | 非受控初始折叠。 |\n| `showTrigger` | `boolean \\| 'bar' \\| 'arrow-circle' \\| 'arrow'` | `false` | 折叠触发器；`arrow` 等同 `arrow-circle`。 |\n| `collapseMode` | `'width' \\| 'transform'` | `'transform'` | `transform` 裁切内容；`width` 随侧栏收缩。 |\n| `showCollapsedContent` | `boolean` | `true` | 折叠后是否仍显示侧栏内容。 |\n| `bordered` / `inverted` | `boolean` | `false` | 边框 / 反色。 |\n| `triggerClass` / `triggerStyle` | — | — | 展开态触发器样式。 |\n| `collapsedTriggerClass` / `collapsedTriggerStyle` | — | — | 折叠态触发器样式。 |\n| `padding` | `number \\| string` | — | 可选内边距；无默认值。 |\n| `radius` | `number \\| string` | — | 圆角。 |"
|
|
12097
12186
|
},
|
|
12098
12187
|
{
|
|
12099
12188
|
"id": "events",
|
|
12100
12189
|
"title": "Events",
|
|
12101
|
-
"body": "| 事件 | 说明 |\n| --- | --- |\n| `scroll` | 滚动容器滚动时触发。 |\n| `after-enter` | 侧栏展开动画结束。 |\n| `after-leave` | 侧栏收起动画结束。 |\n| `collapse` | 侧栏开始收起。 |\n| `expand` | 侧栏开始展开。 |\n| `update:collapsed` | 折叠状态 v-model。 |"
|
|
12190
|
+
"body": "| 事件 | 说明 |\n| --- | --- |\n| `scroll` | `MLayout` 滚动容器滚动时触发。 |\n| `after-enter` | 侧栏展开动画结束。 |\n| `after-leave` | 侧栏收起动画结束。 |\n| `collapse` | 侧栏开始收起。 |\n| `expand` | 侧栏开始展开。 |\n| `update:collapsed` | 折叠状态 v-model。 |"
|
|
12102
12191
|
},
|
|
12103
12192
|
{
|
|
12104
12193
|
"id": "expose",
|
|
12105
12194
|
"title": "Expose",
|
|
12106
|
-
"body": "`MLayout`
|
|
12195
|
+
"body": "`MLayout` 暴露 `scrollTo(...)`。"
|
|
12107
12196
|
},
|
|
12108
12197
|
{
|
|
12109
12198
|
"id": "components",
|
|
@@ -12116,7 +12205,7 @@
|
|
|
12116
12205
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 布局区域。 |"
|
|
12117
12206
|
}
|
|
12118
12207
|
],
|
|
12119
|
-
"markdown": "---\ntitle: Layout\ncategory: 06 / LAYOUT\ndescription: 页面级布局骨架，含 Header / Sider / Content / Footer。\n---\n\n# Layout\n\n页面级布局容器。侧栏场景需在对应 `MLayout` 上设置 `has-sider`。根布局使用 `fill-viewport`（`height: 100dvh`）或显式 `height` 后，`MLayoutContent` / `MLayoutSider` 会撑满剩余空间。\n\n## 引入\n\n```ts\nimport {\n MLayout,\n MLayoutContent,\n MLayoutFooter,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n```\n\n## 基础用法\n\nHeader / Content / Footer。Content 会占满中间剩余高度。\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## With Sider\n\n顶栏 + 左侧栏 +
|
|
12208
|
+
"markdown": "---\ntitle: Layout\ncategory: 06 / LAYOUT\ndescription: 页面级布局骨架，含 Header / Sider / Content / Footer。\n---\n\n# Layout\n\n页面级布局容器。侧栏场景需在对应 `MLayout` 上设置 `has-sider`。根布局使用 `fill-viewport`（`height: 100dvh`）或显式 `height` 后，`MLayoutContent` / `MLayoutSider` 会撑满剩余空间。\n\n## 引入\n\n```ts\nimport {\n MLayout,\n MLayoutContent,\n MLayoutFooter,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n```\n\n## 基础用法\n\nHeader / Content / Footer。Content 会占满中间剩余高度。\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## With Sider\n\n顶栏 + 左侧栏 + 主内容。侧栏内嵌 `MMenu`，并通过 `v-model:collapsed` 与菜单折叠联动。内层 `has-sider` 的 Layout 会吃掉 Header 以下的全部高度。\n\n```vue preview src=\"./demos/WithSider.zh.vue\"\n```\n\n## Right Sider\n\n```vue preview src=\"./demos/RightSider.zh.vue\"\n```\n\n## Full Shell\n\n完整后台骨架：顶栏 + 反色侧栏（`MMenu` `inverted`）+ 内容 + 底栏。\n\n```vue preview src=\"./demos/FullShell.zh.vue\"\n```\n\n## Embedded Content\n\n`embedded` 给内容区柔和背景，便于和顶栏/侧栏区分。\n\n```vue preview src=\"./demos/EmbeddedContent.zh.vue\"\n```\n\n## Scrollable Content\n\n内容超出时，可在 `MLayoutContent` 上自行设置 `overflow: auto`（或包一层 `MScrollbar`）；Header / Sider 保持固定。`MLayout` 根容器仍内置 `MScrollbar`；`MLayoutContent` / `MLayoutSider` 为单层壳。\n\n```vue preview src=\"./demos/ScrollableContent.zh.vue\"\n```\n\n## Absolute Shell\n\n根布局 `position=\"absolute\"` 铺满父级（父级需 `position: relative` + 明确高度）。\n\n```vue preview src=\"./demos/AbsoluteShell.zh.vue\"\n```\n\n## Layout Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `hasSider` | `boolean` | `false` | 横向容纳 `MLayoutSider`。 |\n| `siderPlacement` | `'left' \\| 'right'` | `'left'` | 侧栏位置。 |\n| `fillViewport` | `boolean` | `false` | 根布局撑满视口（`100dvh`），侧栏/内容才能按剩余高度拉伸。 |\n| `embedded` | `boolean` | `false` | 柔和背景（嵌套内容区）。 |\n| `position` | `'static' \\| 'absolute'` | `'static'` | 定位模式。 |\n| `contentClass` / `contentStyle` | — | — | 滚动容器 class / style。 |\n| `height` | `number \\| string` | — | — |\n| `padding` | `number \\| string` | — | — |\n| `radius` | `number \\| string` | — | — |\n\n## LayoutSider Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `width` | `number \\| string` | `272` | 展开宽度（始终写在 `width` 上）。 |\n| `collapsedWidth` | `number` | `48` | 折叠时的 `max-width`。 |\n| `collapsed` | `boolean` | — | 折叠状态，支持 `v-model:collapsed`。 |\n| `defaultCollapsed` | `boolean` | `false` | 非受控初始折叠。 |\n| `showTrigger` | `boolean \\| 'bar' \\| 'arrow-circle' \\| 'arrow'` | `false` | 折叠触发器；`arrow` 等同 `arrow-circle`。 |\n| `collapseMode` | `'width' \\| 'transform'` | `'transform'` | `transform` 裁切内容；`width` 随侧栏收缩。 |\n| `showCollapsedContent` | `boolean` | `true` | 折叠后是否仍显示侧栏内容。 |\n| `bordered` / `inverted` | `boolean` | `false` | 边框 / 反色。 |\n| `triggerClass` / `triggerStyle` | — | — | 展开态触发器样式。 |\n| `collapsedTriggerClass` / `collapsedTriggerStyle` | — | — | 折叠态触发器样式。 |\n| `padding` | `number \\| string` | — | 可选内边距；无默认值。 |\n| `radius` | `number \\| string` | — | 圆角。 |\n\n## Events\n\n| 事件 | 说明 |\n| --- | --- |\n| `scroll` | `MLayout` 滚动容器滚动时触发。 |\n| `after-enter` | 侧栏展开动画结束。 |\n| `after-leave` | 侧栏收起动画结束。 |\n| `collapse` | 侧栏开始收起。 |\n| `expand` | 侧栏开始展开。 |\n| `update:collapsed` | 折叠状态 v-model。 |\n\n## Expose\n\n`MLayout` 暴露 `scrollTo(...)`。\n\n## Components\n\n| 组件 | 说明 |\n| --- | --- |\n| `MLayout` | 根布局。 |\n| `MLayoutHeader` | 顶栏。 |\n| `MLayoutContent` | 主内容区（默认撑满剩余空间）。 |\n| `MLayoutFooter` | 底栏。 |\n| `MLayoutSider` | 侧栏。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 布局区域。 |\n"
|
|
12120
12209
|
},
|
|
12121
12210
|
"en-US": {
|
|
12122
12211
|
"title": "Layout",
|
|
@@ -12140,7 +12229,7 @@
|
|
|
12140
12229
|
{
|
|
12141
12230
|
"id": "with-sider",
|
|
12142
12231
|
"title": "With Sider",
|
|
12143
|
-
"body": "Header + left sider + main. The inner `has-sider` layout consumes all height below the header.\n\n```vue preview src=\"./demos/WithSider.en.vue\"\n```"
|
|
12232
|
+
"body": "Header + left sider + main. The sider hosts `MMenu`, bound to `v-model:collapsed`. The inner `has-sider` layout consumes all height below the header.\n\n```vue preview src=\"./demos/WithSider.en.vue\"\n```"
|
|
12144
12233
|
},
|
|
12145
12234
|
{
|
|
12146
12235
|
"id": "right-sider",
|
|
@@ -12150,7 +12239,7 @@
|
|
|
12150
12239
|
{
|
|
12151
12240
|
"id": "full-shell",
|
|
12152
12241
|
"title": "Full Shell",
|
|
12153
|
-
"body": "Admin-style shell: header + sider + content + footer.\n\n```vue preview src=\"./demos/FullShell.en.vue\"\n```"
|
|
12242
|
+
"body": "Admin-style shell: header + inverted sider (`MMenu` `inverted`) + content + footer.\n\n```vue preview src=\"./demos/FullShell.en.vue\"\n```"
|
|
12154
12243
|
},
|
|
12155
12244
|
{
|
|
12156
12245
|
"id": "embedded-content",
|
|
@@ -12160,7 +12249,7 @@
|
|
|
12160
12249
|
{
|
|
12161
12250
|
"id": "scrollable-content",
|
|
12162
12251
|
"title": "Scrollable Content",
|
|
12163
|
-
"body": "
|
|
12252
|
+
"body": "When content overflows, set `overflow: auto` on `MLayoutContent` (or wrap with `MScrollbar`); header and sider stay fixed. Root `MLayout` still has built-in `MScrollbar`; `MLayoutContent` / `MLayoutSider` are single-element shells.\n\n```vue preview src=\"./demos/ScrollableContent.en.vue\"\n```"
|
|
12164
12253
|
},
|
|
12165
12254
|
{
|
|
12166
12255
|
"id": "absolute-shell",
|
|
@@ -12175,17 +12264,17 @@
|
|
|
12175
12264
|
{
|
|
12176
12265
|
"id": "layoutsider-props",
|
|
12177
12266
|
"title": "LayoutSider Props",
|
|
12178
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `width` | `number \\| string` | `272` | Expanded width (always set as `width`). |\n| `collapsedWidth` | `number` | `48` | Collapsed `max-width`. |\n| `collapsed` | `boolean` | — | Collapsed state (`v-model:collapsed`). |\n| `defaultCollapsed` | `boolean` | `false` | Uncontrolled initial collapsed state. |\n| `showTrigger` | `boolean \\| 'bar' \\| 'arrow-circle' \\| 'arrow'` | `false` | Collapse trigger; `arrow` aliases `arrow-circle`. |\n| `collapseMode` | `'width' \\| 'transform'` | `'transform'` | `transform` clips content; `width` shrinks with sider. |\n| `showCollapsedContent` | `boolean` | `true` | Keep sider content visible while collapsed. |\n| `bordered` / `inverted` | `boolean` | `false` | Border / inverted colors. |\n| `triggerClass` / `triggerStyle` | — | — | Expanded trigger styles. |\n| `collapsedTriggerClass` / `collapsedTriggerStyle` | — | — | Collapsed trigger styles. |\n| `
|
|
12267
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `width` | `number \\| string` | `272` | Expanded width (always set as `width`). |\n| `collapsedWidth` | `number` | `48` | Collapsed `max-width`. |\n| `collapsed` | `boolean` | — | Collapsed state (`v-model:collapsed`). |\n| `defaultCollapsed` | `boolean` | `false` | Uncontrolled initial collapsed state. |\n| `showTrigger` | `boolean \\| 'bar' \\| 'arrow-circle' \\| 'arrow'` | `false` | Collapse trigger; `arrow` aliases `arrow-circle`. |\n| `collapseMode` | `'width' \\| 'transform'` | `'transform'` | `transform` clips content; `width` shrinks with sider. |\n| `showCollapsedContent` | `boolean` | `true` | Keep sider content visible while collapsed. |\n| `bordered` / `inverted` | `boolean` | `false` | Border / inverted colors. |\n| `triggerClass` / `triggerStyle` | — | — | Expanded trigger styles. |\n| `collapsedTriggerClass` / `collapsedTriggerStyle` | — | — | Collapsed trigger styles. |\n| `padding` | `number \\| string` | — | Optional padding; no default. |\n| `radius` | `number \\| string` | — | Border radius. |"
|
|
12179
12268
|
},
|
|
12180
12269
|
{
|
|
12181
12270
|
"id": "events",
|
|
12182
12271
|
"title": "Events",
|
|
12183
|
-
"body": "| Event | Description |\n| --- | --- |\n| `scroll` | Fired when the scroll container scrolls. |"
|
|
12272
|
+
"body": "| Event | Description |\n| --- | --- |\n| `scroll` | Fired when the `MLayout` scroll container scrolls. |\n| `after-enter` | Fired when the sider expand transition ends. |\n| `after-leave` | Fired when the sider collapse transition ends. |\n| `collapse` | Fired when the sider starts collapsing. |\n| `expand` | Fired when the sider starts expanding. |\n| `update:collapsed` | Collapsed state v-model. |"
|
|
12184
12273
|
},
|
|
12185
12274
|
{
|
|
12186
12275
|
"id": "expose",
|
|
12187
12276
|
"title": "Expose",
|
|
12188
|
-
"body": "`MLayout`
|
|
12277
|
+
"body": "`MLayout` exposes `scrollTo(...)`."
|
|
12189
12278
|
},
|
|
12190
12279
|
{
|
|
12191
12280
|
"id": "components",
|
|
@@ -12198,7 +12287,7 @@
|
|
|
12198
12287
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Layout regions. |"
|
|
12199
12288
|
}
|
|
12200
12289
|
],
|
|
12201
|
-
"markdown": "---\ntitle: Layout\ncategory: 06 / LAYOUT\ndescription: Page layout shell with Header / Sider / Content / Footer.\n---\n\n# Layout\n\nPage-level layout shell. Set `has-sider` on the `MLayout` that hosts a sider. Give the root layout a fixed `height` (or `min-height`) so `MLayoutContent` can fill the remaining space.\n\n## Import\n\n```ts\nimport {\n MLayout,\n MLayoutContent,\n MLayoutFooter,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n```\n\n## Basic\n\nHeader / Content / Footer. Content fills the leftover height.\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## With Sider\n\nHeader + left sider + main. The inner `has-sider` layout consumes all height below the header.\n\n```vue preview src=\"./demos/WithSider.en.vue\"\n```\n\n## Right Sider\n\n```vue preview src=\"./demos/RightSider.en.vue\"\n```\n\n## Full Shell\n\nAdmin-style shell: header + sider + content + footer.\n\n```vue preview src=\"./demos/FullShell.en.vue\"\n```\n\n## Embedded Content\n\n`embedded` softens the content background so it separates from header / sider.\n\n```vue preview src=\"./demos/EmbeddedContent.en.vue\"\n```\n\n## Scrollable Content\n\
|
|
12290
|
+
"markdown": "---\ntitle: Layout\ncategory: 06 / LAYOUT\ndescription: Page layout shell with Header / Sider / Content / Footer.\n---\n\n# Layout\n\nPage-level layout shell. Set `has-sider` on the `MLayout` that hosts a sider. Give the root layout a fixed `height` (or `min-height`) so `MLayoutContent` can fill the remaining space.\n\n## Import\n\n```ts\nimport {\n MLayout,\n MLayoutContent,\n MLayoutFooter,\n MLayoutHeader,\n MLayoutSider,\n} from 'morya-ui'\n```\n\n## Basic\n\nHeader / Content / Footer. Content fills the leftover height.\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## With Sider\n\nHeader + left sider + main. The sider hosts `MMenu`, bound to `v-model:collapsed`. The inner `has-sider` layout consumes all height below the header.\n\n```vue preview src=\"./demos/WithSider.en.vue\"\n```\n\n## Right Sider\n\n```vue preview src=\"./demos/RightSider.en.vue\"\n```\n\n## Full Shell\n\nAdmin-style shell: header + inverted sider (`MMenu` `inverted`) + content + footer.\n\n```vue preview src=\"./demos/FullShell.en.vue\"\n```\n\n## Embedded Content\n\n`embedded` softens the content background so it separates from header / sider.\n\n```vue preview src=\"./demos/EmbeddedContent.en.vue\"\n```\n\n## Scrollable Content\n\nWhen content overflows, set `overflow: auto` on `MLayoutContent` (or wrap with `MScrollbar`); header and sider stay fixed. Root `MLayout` still has built-in `MScrollbar`; `MLayoutContent` / `MLayoutSider` are single-element shells.\n\n```vue preview src=\"./demos/ScrollableContent.en.vue\"\n```\n\n## Absolute Shell\n\nRoot `position=\"absolute\"` fills a relatively positioned parent with an explicit height.\n\n```vue preview src=\"./demos/AbsoluteShell.en.vue\"\n```\n\n## Layout Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `hasSider` | `boolean` | `false` | Horizontal layout for `MLayoutSider`. |\n| `siderPlacement` | `'left' \\| 'right'` | `'left'` | Sider side. |\n| `embedded` | `boolean` | `false` | Soft background for nested content. |\n| `position` | `'static' \\| 'absolute'` | `'static'` | Positioning mode. |\n| `contentClass` / `contentStyle` | — | — | Scroll container class / style. |\n\n## LayoutSider Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `width` | `number \\| string` | `272` | Expanded width (always set as `width`). |\n| `collapsedWidth` | `number` | `48` | Collapsed `max-width`. |\n| `collapsed` | `boolean` | — | Collapsed state (`v-model:collapsed`). |\n| `defaultCollapsed` | `boolean` | `false` | Uncontrolled initial collapsed state. |\n| `showTrigger` | `boolean \\| 'bar' \\| 'arrow-circle' \\| 'arrow'` | `false` | Collapse trigger; `arrow` aliases `arrow-circle`. |\n| `collapseMode` | `'width' \\| 'transform'` | `'transform'` | `transform` clips content; `width` shrinks with sider. |\n| `showCollapsedContent` | `boolean` | `true` | Keep sider content visible while collapsed. |\n| `bordered` / `inverted` | `boolean` | `false` | Border / inverted colors. |\n| `triggerClass` / `triggerStyle` | — | — | Expanded trigger styles. |\n| `collapsedTriggerClass` / `collapsedTriggerStyle` | — | — | Collapsed trigger styles. |\n| `padding` | `number \\| string` | — | Optional padding; no default. |\n| `radius` | `number \\| string` | — | Border radius. |\n\n## Events\n\n| Event | Description |\n| --- | --- |\n| `scroll` | Fired when the `MLayout` scroll container scrolls. |\n| `after-enter` | Fired when the sider expand transition ends. |\n| `after-leave` | Fired when the sider collapse transition ends. |\n| `collapse` | Fired when the sider starts collapsing. |\n| `expand` | Fired when the sider starts expanding. |\n| `update:collapsed` | Collapsed state v-model. |\n\n## Expose\n\n`MLayout` exposes `scrollTo(...)`.\n\n## Components\n\n| Component | Description |\n| --- | --- |\n| `MLayout` | Root layout. |\n| `MLayoutHeader` | Header bar. |\n| `MLayoutContent` | Main content (fills leftover space by default). |\n| `MLayoutFooter` | Footer bar. |\n| `MLayoutSider` | Side panel. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Layout regions. |\n"
|
|
12202
12291
|
}
|
|
12203
12292
|
}
|
|
12204
12293
|
},
|
|
@@ -12241,6 +12330,12 @@
|
|
|
12241
12330
|
"default": "—",
|
|
12242
12331
|
"description": "列表内联样式。"
|
|
12243
12332
|
},
|
|
12333
|
+
{
|
|
12334
|
+
"name": "virtual",
|
|
12335
|
+
"type": "boolean",
|
|
12336
|
+
"default": "自动",
|
|
12337
|
+
"description": "`true` 强制虚拟列表；`false` 关闭；默认选项 ≥80 时开启。"
|
|
12338
|
+
},
|
|
12244
12339
|
{
|
|
12245
12340
|
"name": "disabled",
|
|
12246
12341
|
"type": "boolean",
|
|
@@ -12346,7 +12441,7 @@
|
|
|
12346
12441
|
{
|
|
12347
12442
|
"id": "props",
|
|
12348
12443
|
"title": "Props",
|
|
12349
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array` | — | 绑定值。 |\n| `options` | `{ label, value, disabled? }[]` | — | 选项。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `filter` | `boolean` | `false` | 显示筛选框。 |\n| `listStyle` | `string` | — | 列表内联样式。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `emptyMessage` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
12444
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array` | — | 绑定值。 |\n| `options` | `{ label, value, disabled? }[]` | — | 选项。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `filter` | `boolean` | `false` | 显示筛选框。 |\n| `listStyle` | `string` | — | 列表内联样式。 |\n| `virtual` | `boolean` | 自动 | `true` 强制虚拟列表；`false` 关闭；默认选项 ≥80 时开启。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `emptyMessage` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
12350
12445
|
},
|
|
12351
12446
|
{
|
|
12352
12447
|
"id": "events",
|
|
@@ -12359,7 +12454,7 @@
|
|
|
12359
12454
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `option` | 选项 `{ option }`。 |"
|
|
12360
12455
|
}
|
|
12361
12456
|
],
|
|
12362
|
-
"markdown": "---\ntitle: Listbox\ncategory: 02 / FORM\ndescription: 列表形式的单选或多选控件，可筛选。\n---\n\n# Listbox\n\n以列表呈现选项，支持单选、多选与过滤。\n\n## 引入\n\n```ts\nimport { MListbox } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array` | — | 绑定值。 |\n| `options` | `{ label, value, disabled? }[]` | — | 选项。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `filter` | `boolean` | `false` | 显示筛选框。 |\n| `listStyle` | `string` | — | 列表内联样式。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `emptyMessage` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | 同 `modelValue` | 值变化。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `option` | 选项 `{ option }`。 |\n"
|
|
12457
|
+
"markdown": "---\ntitle: Listbox\ncategory: 02 / FORM\ndescription: 列表形式的单选或多选控件，可筛选。\n---\n\n# Listbox\n\n以列表呈现选项，支持单选、多选与过滤。\n\n## 引入\n\n```ts\nimport { MListbox } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array` | — | 绑定值。 |\n| `options` | `{ label, value, disabled? }[]` | — | 选项。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `filter` | `boolean` | `false` | 显示筛选框。 |\n| `listStyle` | `string` | — | 列表内联样式。 |\n| `virtual` | `boolean` | 自动 | `true` 强制虚拟列表；`false` 关闭；默认选项 ≥80 时开启。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `emptyMessage` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | 同 `modelValue` | 值变化。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `option` | 选项 `{ option }`。 |\n"
|
|
12363
12458
|
},
|
|
12364
12459
|
"en-US": {
|
|
12365
12460
|
"title": "Listbox",
|
|
@@ -12383,7 +12478,7 @@
|
|
|
12383
12478
|
{
|
|
12384
12479
|
"id": "props",
|
|
12385
12480
|
"title": "Props",
|
|
12386
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array` | — | Bound value. |\n| `options` | `{ label, value, disabled? }[]` | — | Options. |\n| `multiple` | `boolean` | `false` | Multiple selection. |\n| `filter` | `boolean` | `false` | Show filter box. |\n| `listStyle` | `string` | — | Inline styles for the list. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
12481
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array` | — | Bound value. |\n| `options` | `{ label, value, disabled? }[]` | — | Options. |\n| `multiple` | `boolean` | `false` | Multiple selection. |\n| `filter` | `boolean` | `false` | Show filter box. |\n| `listStyle` | `string` | — | Inline styles for the list. |\n| `virtual` | `boolean` | auto | `true` forces virtualization; `false` disables; auto-on at 80+ options. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
12387
12482
|
},
|
|
12388
12483
|
{
|
|
12389
12484
|
"id": "events",
|
|
@@ -12396,7 +12491,7 @@
|
|
|
12396
12491
|
"body": "| Slot | Description |\n| --- | --- |\n| `option` | Option `{ option }`. |"
|
|
12397
12492
|
}
|
|
12398
12493
|
],
|
|
12399
|
-
"markdown": "---\ntitle: Listbox\ncategory: 02 / FORM\ndescription: List-based single or multiple selection with optional filtering.\n---\n\n# Listbox\n\nPresent options as a list with single selection, multiple selection, and filtering.\n\n## Import\n\n```ts\nimport { MListbox } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array` | — | Bound value. |\n| `options` | `{ label, value, disabled? }[]` | — | Options. |\n| `multiple` | `boolean` | `false` | Multiple selection. |\n| `filter` | `boolean` | `false` | Show filter box. |\n| `listStyle` | `string` | — | Inline styles for the list. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | same as `modelValue` | Value changed. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `option` | Option `{ option }`. |\n"
|
|
12494
|
+
"markdown": "---\ntitle: Listbox\ncategory: 02 / FORM\ndescription: List-based single or multiple selection with optional filtering.\n---\n\n# Listbox\n\nPresent options as a list with single selection, multiple selection, and filtering.\n\n## Import\n\n```ts\nimport { MListbox } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array` | — | Bound value. |\n| `options` | `{ label, value, disabled? }[]` | — | Options. |\n| `multiple` | `boolean` | `false` | Multiple selection. |\n| `filter` | `boolean` | `false` | Show filter box. |\n| `listStyle` | `string` | — | Inline styles for the list. |\n| `virtual` | `boolean` | auto | `true` forces virtualization; `false` disables; auto-on at 80+ options. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | same as `modelValue` | Value changed. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `option` | Option `{ option }`. |\n"
|
|
12400
12495
|
}
|
|
12401
12496
|
}
|
|
12402
12497
|
},
|
|
@@ -12469,6 +12564,12 @@
|
|
|
12469
12564
|
"default": "0",
|
|
12470
12565
|
"description": "显示前延迟（ms）。"
|
|
12471
12566
|
},
|
|
12567
|
+
{
|
|
12568
|
+
"name": "transition",
|
|
12569
|
+
"type": "string | false",
|
|
12570
|
+
"default": "'loading'",
|
|
12571
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
12572
|
+
},
|
|
12472
12573
|
{
|
|
12473
12574
|
"name": "pt",
|
|
12474
12575
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -12653,7 +12754,7 @@
|
|
|
12653
12754
|
{
|
|
12654
12755
|
"id": "props",
|
|
12655
12756
|
"title": "Props",
|
|
12656
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | 包裹内容或 `fullscreen` 时是否显示遮罩。单独指示器始终显示。 |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | 动效。可用 `componentDefaults.Loading.effect` 改默认值。 |\n| `text` | `string` | — | 指示器下方文案。不传则不显示。 |\n| `ariaLabel` | `string` | locale `loading` | 无文案时的可访问名称。有文案时以文案为准。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 指示器缩放。 |\n| `background` | `string` | — | 遮罩背景，任意 CSS 颜色。 |\n| `customClass` | `string` | — | 加在遮罩上的类名。 |\n| `fullscreen` | `boolean` | `false` | 遮罩铺满视口（Teleport 到 `body`）。 |\n| `lock` | `boolean` | `false` | 显示时禁止页面滚动。 |\n| `delay` | `number` | `0` | 显示前延迟（ms）。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs)。 |"
|
|
12757
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | 包裹内容或 `fullscreen` 时是否显示遮罩。单独指示器始终显示。 |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | 动效。可用 `componentDefaults.Loading.effect` 改默认值。 |\n| `text` | `string` | — | 指示器下方文案。不传则不显示。 |\n| `ariaLabel` | `string` | locale `loading` | 无文案时的可访问名称。有文案时以文案为准。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 指示器缩放。 |\n| `background` | `string` | — | 遮罩背景，任意 CSS 颜色。 |\n| `customClass` | `string` | — | 加在遮罩上的类名。 |\n| `fullscreen` | `boolean` | `false` | 遮罩铺满视口（Teleport 到 `body`）。 |\n| `lock` | `boolean` | `false` | 显示时禁止页面滚动。 |\n| `delay` | `number` | `0` | 显示前延迟（ms）。 |\n| `transition` | `string \\| false` | `'loading'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs)。 |"
|
|
12657
12758
|
},
|
|
12658
12759
|
{
|
|
12659
12760
|
"id": "events",
|
|
@@ -12681,7 +12782,7 @@
|
|
|
12681
12782
|
"body": "- 指示器使用 `role=\"status\"`。\n- 遮罩区域设置 `aria-busy`，被盖住的内容设为 `inert`。\n- 不要只靠动画表示加载；需要说明时传入 `text`。"
|
|
12682
12783
|
}
|
|
12683
12784
|
],
|
|
12684
|
-
"markdown": "---\ntitle: Loading\ncategory: 05 / FEEDBACK\ndescription: 加载指示与遮罩：多种动效、区域加载、v-loading 指令和命令式 service。\n---\n\n# Loading\n\n用于区域或全屏的加载反馈。可以只渲染指示器，也可以盖住一块内容，或用指令和服务在任意节点上打开遮罩。\n\n内置圆环、极光环、弹跳球、波浪条、脉冲环和星尘。默认是圆环（`effect=\"circular\"`）。要改全局默认动效，设置 `componentDefaults.Loading.effect`。\n\n全屏遮罩会 Teleport 到 `body`，避免被父级 `overflow` / `transform` 裁切。同一时间只保留一个全屏实例。\n\n## 引入\n\n```ts\nimport { loading, MLoading, useLoading, vLoading } from 'morya-ui'\n```\n\n`app.use(MoryaUI)` 会注册 `v-loading`。按需引入时，在 `<script setup>` 里导入 `vLoading` 即可在模板中使用该指令。\n\n## 动效\n\n```vue preview src=\"./demos/Effects.vue\"\n```\n\n## 区域加载\n\n组件包住内容，或在元素上使用 `v-loading`。未传 `text` 时不显示文案，读屏仍使用 locale 的 `loading`。可用 `delay` 避免短请求闪一下。\n\n```vue preview src=\"./demos/Region.zh.vue\"\n```\n\n## 服务式调用\n\n不传 `target` 时遮罩铺满视口。`close()` 会先播放离场再卸载，`setText()` 改文案。也可用 `useLoading()`，在组件卸载时自动关闭。\n\n```vue preview src=\"./demos/Service.zh.vue\"\n```\n\n```ts\nconst instance = loading.service({\n text: '正在提交',\n effect: 'wave',\n lock: true,\n})\ninstance.setText('即将完成')\ninstance.close()\n```\n\n覆盖某个节点，或传入自定义指示器：\n\n```ts\nloading.service({\n target: '#panel',\n text: '加载中',\n})\n\nloading.service({\n spinner: () => h('span', '…'),\n text: '自定义',\n})\n```\n\n```ts\nconst { open, close } = useLoading({ effect: 'wave' })\nopen({ text: '保存中' })\nclose()\n```\n\n## 指令\n\n| 写法 | 说明 |\n| --- | --- |\n| `v-loading` | 布尔值，或带 `text` / `effect` / `background` / `lock` / `delay` / `spinner` 等字段的对象。 |\n| `v-loading.fullscreen` | 全屏遮罩。 |\n| `v-loading.lock` | 打开时锁定页面滚动。 |\n| `v-loading.body` | 遮罩挂到 `body`，并盖住当前元素（跟随尺寸变化）。 |\n| `m-loading-text` | 文案。 |\n| `m-loading-effect` | `circular` / `aurora` / `bounce` / `wave` / `pulse` / `stardust`。 |\n| `m-loading-background` | 遮罩背景色。 |\n| `m-loading-custom-class` | 加在遮罩上的类名。 |\n| `m-loading-delay` | 显示前延迟（ms）。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | 包裹内容或 `fullscreen` 时是否显示遮罩。单独指示器始终显示。 |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | 动效。可用 `componentDefaults.Loading.effect` 改默认值。 |\n| `text` | `string` | — | 指示器下方文案。不传则不显示。 |\n| `ariaLabel` | `string` | locale `loading` | 无文案时的可访问名称。有文案时以文案为准。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 指示器缩放。 |\n| `background` | `string` | — | 遮罩背景，任意 CSS 颜色。 |\n| `customClass` | `string` | — | 加在遮罩上的类名。 |\n| `fullscreen` | `boolean` | `false` | 遮罩铺满视口（Teleport 到 `body`）。 |\n| `lock` | `boolean` | `false` | 显示时禁止页面滚动。 |\n| `delay` | `number` | `0` | 显示前延迟（ms）。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs)。 |\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 被遮罩盖住的内容。 |\n| `indicator` | 替换遮罩中的指示器。仅在有默认插槽或 `fullscreen` 时生效。 |\n\n## 服务\n\n`loading.service(options)` 返回 `{ close, setText }`。`useLoading(defaults)` 返回 `{ open, close, setText }`。\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `target` | `string \\| HTMLElement` | — | 要盖住的元素或选择器。省略则为全屏。 |\n| `fullscreen` | `boolean` | 无 `target` 时为 `true` | 铺满视口。 |\n| `body` | `boolean` | `false` | 遮罩挂到 `body`，定位到 `target` 上。 |\n| `lock` | `boolean` | `false` | 锁定页面滚动。 |\n| `text` | `string` | — | 文案。 |\n| `effect` | 同组件 | `'circular'` | 动效。 |\n| `spinner` | `MRenderable` | — | 自定义指示器；设置后忽略内置 `effect`。 |\n| `background` | `string` | — | 遮罩背景。 |\n| `customClass` | `string` | — | 遮罩类名。 |\n| `size` | 同组件 | — | 指示器尺寸。 |\n| `delay` | `number` | — | 显示前延迟（ms）。 |\n\n## 主题\n\n指示器颜色走语义色：`--m-color-primary`、`--m-color-success`、`--m-color-warning`、`--m-color-danger`、`--m-color-text-muted`。遮罩默认是表面色的半透明混合，可用 `background` 或 `--m-loading-mask-bg` 覆盖。全屏层级是 `--m-loading-z-index`（默认 `--m-z-base + 200`）。\n\n`prefers-reduced-motion: reduce` 时循环动效关闭。\n\n## 无障碍\n\n- 指示器使用 `role=\"status\"`。\n- 遮罩区域设置 `aria-busy`，被盖住的内容设为 `inert`。\n- 不要只靠动画表示加载；需要说明时传入 `text`。\n"
|
|
12785
|
+
"markdown": "---\ntitle: Loading\ncategory: 05 / FEEDBACK\ndescription: 加载指示与遮罩：多种动效、区域加载、v-loading 指令和命令式 service。\n---\n\n# Loading\n\n用于区域或全屏的加载反馈。可以只渲染指示器，也可以盖住一块内容，或用指令和服务在任意节点上打开遮罩。\n\n内置圆环、极光环、弹跳球、波浪条、脉冲环和星尘。默认是圆环（`effect=\"circular\"`）。要改全局默认动效，设置 `componentDefaults.Loading.effect`。\n\n全屏遮罩会 Teleport 到 `body`，避免被父级 `overflow` / `transform` 裁切。同一时间只保留一个全屏实例。\n\n## 引入\n\n```ts\nimport { loading, MLoading, useLoading, vLoading } from 'morya-ui'\n```\n\n`app.use(MoryaUI)` 会注册 `v-loading`。按需引入时，在 `<script setup>` 里导入 `vLoading` 即可在模板中使用该指令。\n\n## 动效\n\n```vue preview src=\"./demos/Effects.vue\"\n```\n\n## 区域加载\n\n组件包住内容，或在元素上使用 `v-loading`。未传 `text` 时不显示文案，读屏仍使用 locale 的 `loading`。可用 `delay` 避免短请求闪一下。\n\n```vue preview src=\"./demos/Region.zh.vue\"\n```\n\n## 服务式调用\n\n不传 `target` 时遮罩铺满视口。`close()` 会先播放离场再卸载，`setText()` 改文案。也可用 `useLoading()`，在组件卸载时自动关闭。\n\n```vue preview src=\"./demos/Service.zh.vue\"\n```\n\n```ts\nconst instance = loading.service({\n text: '正在提交',\n effect: 'wave',\n lock: true,\n})\ninstance.setText('即将完成')\ninstance.close()\n```\n\n覆盖某个节点，或传入自定义指示器：\n\n```ts\nloading.service({\n target: '#panel',\n text: '加载中',\n})\n\nloading.service({\n spinner: () => h('span', '…'),\n text: '自定义',\n})\n```\n\n```ts\nconst { open, close } = useLoading({ effect: 'wave' })\nopen({ text: '保存中' })\nclose()\n```\n\n## 指令\n\n| 写法 | 说明 |\n| --- | --- |\n| `v-loading` | 布尔值，或带 `text` / `effect` / `background` / `lock` / `delay` / `spinner` 等字段的对象。 |\n| `v-loading.fullscreen` | 全屏遮罩。 |\n| `v-loading.lock` | 打开时锁定页面滚动。 |\n| `v-loading.body` | 遮罩挂到 `body`，并盖住当前元素（跟随尺寸变化）。 |\n| `m-loading-text` | 文案。 |\n| `m-loading-effect` | `circular` / `aurora` / `bounce` / `wave` / `pulse` / `stardust`。 |\n| `m-loading-background` | 遮罩背景色。 |\n| `m-loading-custom-class` | 加在遮罩上的类名。 |\n| `m-loading-delay` | 显示前延迟（ms）。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | 包裹内容或 `fullscreen` 时是否显示遮罩。单独指示器始终显示。 |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | 动效。可用 `componentDefaults.Loading.effect` 改默认值。 |\n| `text` | `string` | — | 指示器下方文案。不传则不显示。 |\n| `ariaLabel` | `string` | locale `loading` | 无文案时的可访问名称。有文案时以文案为准。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 指示器缩放。 |\n| `background` | `string` | — | 遮罩背景，任意 CSS 颜色。 |\n| `customClass` | `string` | — | 加在遮罩上的类名。 |\n| `fullscreen` | `boolean` | `false` | 遮罩铺满视口（Teleport 到 `body`）。 |\n| `lock` | `boolean` | `false` | 显示时禁止页面滚动。 |\n| `delay` | `number` | `0` | 显示前延迟（ms）。 |\n| `transition` | `string \\| false` | `'loading'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs)。 |\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 被遮罩盖住的内容。 |\n| `indicator` | 替换遮罩中的指示器。仅在有默认插槽或 `fullscreen` 时生效。 |\n\n## 服务\n\n`loading.service(options)` 返回 `{ close, setText }`。`useLoading(defaults)` 返回 `{ open, close, setText }`。\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `target` | `string \\| HTMLElement` | — | 要盖住的元素或选择器。省略则为全屏。 |\n| `fullscreen` | `boolean` | 无 `target` 时为 `true` | 铺满视口。 |\n| `body` | `boolean` | `false` | 遮罩挂到 `body`，定位到 `target` 上。 |\n| `lock` | `boolean` | `false` | 锁定页面滚动。 |\n| `text` | `string` | — | 文案。 |\n| `effect` | 同组件 | `'circular'` | 动效。 |\n| `spinner` | `MRenderable` | — | 自定义指示器；设置后忽略内置 `effect`。 |\n| `background` | `string` | — | 遮罩背景。 |\n| `customClass` | `string` | — | 遮罩类名。 |\n| `size` | 同组件 | — | 指示器尺寸。 |\n| `delay` | `number` | — | 显示前延迟（ms）。 |\n\n## 主题\n\n指示器颜色走语义色：`--m-color-primary`、`--m-color-success`、`--m-color-warning`、`--m-color-danger`、`--m-color-text-muted`。遮罩默认是表面色的半透明混合，可用 `background` 或 `--m-loading-mask-bg` 覆盖。全屏层级是 `--m-loading-z-index`（默认 `--m-z-base + 200`）。\n\n`prefers-reduced-motion: reduce` 时循环动效关闭。\n\n## 无障碍\n\n- 指示器使用 `role=\"status\"`。\n- 遮罩区域设置 `aria-busy`，被盖住的内容设为 `inert`。\n- 不要只靠动画表示加载；需要说明时传入 `text`。\n"
|
|
12685
12786
|
},
|
|
12686
12787
|
"en-US": {
|
|
12687
12788
|
"title": "Loading",
|
|
@@ -12720,7 +12821,7 @@
|
|
|
12720
12821
|
{
|
|
12721
12822
|
"id": "props",
|
|
12722
12823
|
"title": "Props",
|
|
12723
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | Mask visibility when wrapping content or using `fullscreen`. A bare indicator is always shown. |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | Graphic. Override the default with `componentDefaults.Loading.effect`. |\n| `text` | `string` | — | Caption under the indicator. Hidden when omitted. |\n| `ariaLabel` | `string` | locale `loading` | Accessible name when there is no caption. A caption is used as the name when present. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Indicator scale. |\n| `background` | `string` | — | Mask background, any CSS color. |\n| `customClass` | `string` | — | Extra class on the mask. |\n| `fullscreen` | `boolean` | `false` | Cover the viewport (teleported to `body`). |\n| `lock` | `boolean` | `false` | Prevent page scrolling while visible. |\n| `delay` | `number` | `0` | Delay before showing (ms). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
12824
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | Mask visibility when wrapping content or using `fullscreen`. A bare indicator is always shown. |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | Graphic. Override the default with `componentDefaults.Loading.effect`. |\n| `text` | `string` | — | Caption under the indicator. Hidden when omitted. |\n| `ariaLabel` | `string` | locale `loading` | Accessible name when there is no caption. A caption is used as the name when present. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Indicator scale. |\n| `background` | `string` | — | Mask background, any CSS color. |\n| `customClass` | `string` | — | Extra class on the mask. |\n| `fullscreen` | `boolean` | `false` | Cover the viewport (teleported to `body`). |\n| `lock` | `boolean` | `false` | Prevent page scrolling while visible. |\n| `delay` | `number` | `0` | Delay before showing (ms). |\n| `transition` | `string \\| false` | `'loading'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
12724
12825
|
},
|
|
12725
12826
|
{
|
|
12726
12827
|
"id": "events",
|
|
@@ -12748,7 +12849,7 @@
|
|
|
12748
12849
|
"body": "- The indicator uses `role=\"status\"`.\n- The masked region sets `aria-busy`, and covered content is `inert`.\n- Do not rely on motion alone; pass `text` when the wait needs an explanation."
|
|
12749
12850
|
}
|
|
12750
12851
|
],
|
|
12751
|
-
"markdown": "---\ntitle: Loading\ncategory: 05 / FEEDBACK\ndescription: Loading indicator and mask, with multiple effects, a region overlay, the v-loading directive, and an imperative service.\n---\n\n# Loading\n\nRegion or fullscreen loading feedback. Render an indicator on its own, cover a block of content, or open a mask on any node with the directive or service.\n\nBuilt-in graphics are a circular spinner, aurora ring, bouncing balls, wave bars, pulse rings, and stardust. The default is the circular spinner (`effect=\"circular\"`). Set `componentDefaults.Loading.effect` to change the global default.\n\nFullscreen masks teleport to `body` so parent `overflow` / `transform` cannot clip them. Only one fullscreen instance stays open at a time.\n\n## Import\n\n```ts\nimport { loading, MLoading, useLoading, vLoading } from 'morya-ui'\n```\n\n`app.use(MoryaUI)` registers `v-loading`. For on-demand usage, import `vLoading` in `<script setup>` and the template can use the directive.\n\n## Effects\n\n```vue preview src=\"./demos/Effects.vue\"\n```\n\n## Region\n\nWrap content with the component, or put `v-loading` on an element. Omit `text` to hide the caption; screen readers still get the locale `loading` string. Use `delay` to avoid a flash on short requests.\n\n```vue preview src=\"./demos/Region.en.vue\"\n```\n\n## Service\n\nWith no `target`, the mask covers the viewport. `close()` plays the leave transition before unmounting, and `setText()` changes the caption. `useLoading()` closes automatically when the caller unmounts.\n\n```vue preview src=\"./demos/Service.en.vue\"\n```\n\n```ts\nconst instance = loading.service({\n text: 'Submitting',\n effect: 'wave',\n lock: true,\n})\ninstance.setText('Almost done')\ninstance.close()\n```\n\nCover one node, or pass a custom indicator:\n\n```ts\nloading.service({\n target: '#panel',\n text: 'Loading',\n})\n\nloading.service({\n spinner: () => h('span', '…'),\n text: 'Custom',\n})\n```\n\n```ts\nconst { open, close } = useLoading({ effect: 'wave' })\nopen({ text: 'Saving' })\nclose()\n```\n\n## Directive\n\n| Form | Description |\n| --- | --- |\n| `v-loading` | A boolean, or an object with `text`, `effect`, `background`, `lock`, `delay`, `spinner`, and related fields. |\n| `v-loading.fullscreen` | Fullscreen mask. |\n| `v-loading.lock` | Lock page scrolling while open. |\n| `v-loading.body` | Mount the mask on `body`, positioned over the element (tracks size changes). |\n| `m-loading-text` | Caption. |\n| `m-loading-effect` | `circular` / `aurora` / `bounce` / `wave` / `pulse` / `stardust`. |\n| `m-loading-background` | Mask background. |\n| `m-loading-custom-class` | Extra class on the mask. |\n| `m-loading-delay` | Delay before showing (ms). |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | Mask visibility when wrapping content or using `fullscreen`. A bare indicator is always shown. |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | Graphic. Override the default with `componentDefaults.Loading.effect`. |\n| `text` | `string` | — | Caption under the indicator. Hidden when omitted. |\n| `ariaLabel` | `string` | locale `loading` | Accessible name when there is no caption. A caption is used as the name when present. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Indicator scale. |\n| `background` | `string` | — | Mask background, any CSS color. |\n| `customClass` | `string` | — | Extra class on the mask. |\n| `fullscreen` | `boolean` | `false` | Cover the viewport (teleported to `body`). |\n| `lock` | `boolean` | `false` | Prevent page scrolling while visible. |\n| `delay` | `number` | `0` | Delay before showing (ms). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Content covered by the mask. |\n| `indicator` | Replaces the indicator inside the mask. Used when there is a default slot or `fullscreen`. |\n\n## Service\n\n`loading.service(options)` returns `{ close, setText }`. `useLoading(defaults)` returns `{ open, close, setText }`.\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `target` | `string \\| HTMLElement` | — | Element or selector to cover. Omit for fullscreen. |\n| `fullscreen` | `boolean` | `true` when `target` is omitted | Cover the viewport. |\n| `body` | `boolean` | `false` | Mount the mask on `body`, positioned over `target`. |\n| `lock` | `boolean` | `false` | Lock page scrolling. |\n| `text` | `string` | — | Caption. |\n| `effect` | same as the component | `'circular'` | Graphic. |\n| `spinner` | `MRenderable` | — | Custom indicator; skips built-in effects when set. |\n| `background` | `string` | — | Mask background. |\n| `customClass` | `string` | — | Extra mask class. |\n| `size` | same as the component | — | Indicator size. |\n| `delay` | `number` | — | Delay before showing (ms). |\n\n## Theme\n\nIndicator colors use semantic tokens: `--m-color-primary`, `--m-color-success`, `--m-color-warning`, `--m-color-danger`, and `--m-color-text-muted`. The mask defaults to a translucent surface mix. Override it with `background` or `--m-loading-mask-bg`. Fullscreen stacking uses `--m-loading-z-index` (default `--m-z-base + 200`).\n\nLooping motion is disabled under `prefers-reduced-motion: reduce`.\n\n## Accessibility\n\n- The indicator uses `role=\"status\"`.\n- The masked region sets `aria-busy`, and covered content is `inert`.\n- Do not rely on motion alone; pass `text` when the wait needs an explanation.\n"
|
|
12852
|
+
"markdown": "---\ntitle: Loading\ncategory: 05 / FEEDBACK\ndescription: Loading indicator and mask, with multiple effects, a region overlay, the v-loading directive, and an imperative service.\n---\n\n# Loading\n\nRegion or fullscreen loading feedback. Render an indicator on its own, cover a block of content, or open a mask on any node with the directive or service.\n\nBuilt-in graphics are a circular spinner, aurora ring, bouncing balls, wave bars, pulse rings, and stardust. The default is the circular spinner (`effect=\"circular\"`). Set `componentDefaults.Loading.effect` to change the global default.\n\nFullscreen masks teleport to `body` so parent `overflow` / `transform` cannot clip them. Only one fullscreen instance stays open at a time.\n\n## Import\n\n```ts\nimport { loading, MLoading, useLoading, vLoading } from 'morya-ui'\n```\n\n`app.use(MoryaUI)` registers `v-loading`. For on-demand usage, import `vLoading` in `<script setup>` and the template can use the directive.\n\n## Effects\n\n```vue preview src=\"./demos/Effects.vue\"\n```\n\n## Region\n\nWrap content with the component, or put `v-loading` on an element. Omit `text` to hide the caption; screen readers still get the locale `loading` string. Use `delay` to avoid a flash on short requests.\n\n```vue preview src=\"./demos/Region.en.vue\"\n```\n\n## Service\n\nWith no `target`, the mask covers the viewport. `close()` plays the leave transition before unmounting, and `setText()` changes the caption. `useLoading()` closes automatically when the caller unmounts.\n\n```vue preview src=\"./demos/Service.en.vue\"\n```\n\n```ts\nconst instance = loading.service({\n text: 'Submitting',\n effect: 'wave',\n lock: true,\n})\ninstance.setText('Almost done')\ninstance.close()\n```\n\nCover one node, or pass a custom indicator:\n\n```ts\nloading.service({\n target: '#panel',\n text: 'Loading',\n})\n\nloading.service({\n spinner: () => h('span', '…'),\n text: 'Custom',\n})\n```\n\n```ts\nconst { open, close } = useLoading({ effect: 'wave' })\nopen({ text: 'Saving' })\nclose()\n```\n\n## Directive\n\n| Form | Description |\n| --- | --- |\n| `v-loading` | A boolean, or an object with `text`, `effect`, `background`, `lock`, `delay`, `spinner`, and related fields. |\n| `v-loading.fullscreen` | Fullscreen mask. |\n| `v-loading.lock` | Lock page scrolling while open. |\n| `v-loading.body` | Mount the mask on `body`, positioned over the element (tracks size changes). |\n| `m-loading-text` | Caption. |\n| `m-loading-effect` | `circular` / `aurora` / `bounce` / `wave` / `pulse` / `stardust`. |\n| `m-loading-background` | Mask background. |\n| `m-loading-custom-class` | Extra class on the mask. |\n| `m-loading-delay` | Delay before showing (ms). |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `loading` | `boolean` | `true` | Mask visibility when wrapping content or using `fullscreen`. A bare indicator is always shown. |\n| `effect` | `'circular' \\| 'aurora' \\| 'bounce' \\| 'wave' \\| 'pulse' \\| 'stardust'` | `'circular'` | Graphic. Override the default with `componentDefaults.Loading.effect`. |\n| `text` | `string` | — | Caption under the indicator. Hidden when omitted. |\n| `ariaLabel` | `string` | locale `loading` | Accessible name when there is no caption. A caption is used as the name when present. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Indicator scale. |\n| `background` | `string` | — | Mask background, any CSS color. |\n| `customClass` | `string` | — | Extra class on the mask. |\n| `fullscreen` | `boolean` | `false` | Cover the viewport (teleported to `body`). |\n| `lock` | `boolean` | `false` | Prevent page scrolling while visible. |\n| `delay` | `number` | `0` | Delay before showing (ms). |\n| `transition` | `string \\| false` | `'loading'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Content covered by the mask. |\n| `indicator` | Replaces the indicator inside the mask. Used when there is a default slot or `fullscreen`. |\n\n## Service\n\n`loading.service(options)` returns `{ close, setText }`. `useLoading(defaults)` returns `{ open, close, setText }`.\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `target` | `string \\| HTMLElement` | — | Element or selector to cover. Omit for fullscreen. |\n| `fullscreen` | `boolean` | `true` when `target` is omitted | Cover the viewport. |\n| `body` | `boolean` | `false` | Mount the mask on `body`, positioned over `target`. |\n| `lock` | `boolean` | `false` | Lock page scrolling. |\n| `text` | `string` | — | Caption. |\n| `effect` | same as the component | `'circular'` | Graphic. |\n| `spinner` | `MRenderable` | — | Custom indicator; skips built-in effects when set. |\n| `background` | `string` | — | Mask background. |\n| `customClass` | `string` | — | Extra mask class. |\n| `size` | same as the component | — | Indicator size. |\n| `delay` | `number` | — | Delay before showing (ms). |\n\n## Theme\n\nIndicator colors use semantic tokens: `--m-color-primary`, `--m-color-success`, `--m-color-warning`, `--m-color-danger`, and `--m-color-text-muted`. The mask defaults to a translucent surface mix. Override it with `background` or `--m-loading-mask-bg`. Fullscreen stacking uses `--m-loading-z-index` (default `--m-z-base + 200`).\n\nLooping motion is disabled under `prefers-reduced-motion: reduce`.\n\n## Accessibility\n\n- The indicator uses `role=\"status\"`.\n- The masked region sets `aria-busy`, and covered content is `inert`.\n- Do not rely on motion alone; pass `text` when the wait needs an explanation.\n"
|
|
12752
12853
|
}
|
|
12753
12854
|
}
|
|
12754
12855
|
},
|
|
@@ -12779,6 +12880,12 @@
|
|
|
12779
12880
|
"default": "'body'",
|
|
12780
12881
|
"description": "挂载目标。"
|
|
12781
12882
|
},
|
|
12883
|
+
{
|
|
12884
|
+
"name": "transition",
|
|
12885
|
+
"type": "string | false",
|
|
12886
|
+
"default": "'scale-fade'",
|
|
12887
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
12888
|
+
},
|
|
12782
12889
|
{
|
|
12783
12890
|
"name": "selectedKey",
|
|
12784
12891
|
"type": "string | null",
|
|
@@ -12912,7 +13019,7 @@
|
|
|
12912
13019
|
{
|
|
12913
13020
|
"id": "props",
|
|
12914
13021
|
"title": "Props",
|
|
12915
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MegaMenuItem[]` | `[]` | 顶层菜单项。 |\n| `teleport` | `boolean` | `true` | 面板 Teleport；默认 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标。 |\n| `selectedKey` | `string \\| null` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
13022
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MegaMenuItem[]` | `[]` | 顶层菜单项。 |\n| `teleport` | `boolean` | `true` | 面板 Teleport；默认 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `selectedKey` | `string \\| null` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
12916
13023
|
},
|
|
12917
13024
|
{
|
|
12918
13025
|
"id": "无障碍",
|
|
@@ -12935,7 +13042,7 @@
|
|
|
12935
13042
|
"body": "<h4 id=\"MegaMenuItem\">MegaMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MegaMenuItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n /** Column groups for mega panel; each entry is a column of items. */\n items?: MegaMenuItem[][]\n}\n```"
|
|
12936
13043
|
}
|
|
12937
13044
|
],
|
|
12938
|
-
"markdown": "---\ntitle: MegaMenu\ncategory: 04 / NAVIGATION\ndescription: 水平菜单，子项按多列面板展示。\n---\n\n# MegaMenu\n\n顶层水平导航；展开后以**分栏面板**展示子链接，适合站点级导航。\n\n## 引入\n\n```ts\nimport type {MegaMenuItem} from 'morya-ui';\nimport { MMegaMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 面板结构\n\n`items` 为**列数组**：外层每一项是一列，列内为同级链接。\n\n```ts\n{\n label: '产品',\n items: [\n [ { label: '列 A · 项 1' }, { label: '列 A · 项 2' } ],\n [ { label: '列 B · 项 1' } ],\n ],\n}\n```\n\n无 `items` 的顶层项为普通链接，点击执行 `command`。\n\n## 菜单项字段\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案。 |\n| `icon` | `string` | 可选前缀字符。 |\n| `command` | `() => void` | 点击时执行。 |\n| `disabled` | `boolean` | 禁用项。 |\n| `items` | `MegaMenuItem[][]` | 分栏子面板。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MegaMenuItem[]` | `[]` | 顶层菜单项。 |\n| `teleport` | `boolean` | `true` | 面板 Teleport；默认 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标。 |\n| `selectedKey` | `string \\| null` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## 无障碍\n\n- 顶层项使用按钮/链接语义；展开面板请确保键盘可到达子项。\n- 复杂站点导航建议配合 Skip link 与当前页 `aria-current`。\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `select` | — | — |\n| `update:selectedKey` | — | — |\n\n## Slots\n\n无插槽。\n\n## 类型\n\n<h4 id=\"MegaMenuItem\">MegaMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MegaMenuItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n /** Column groups for mega panel; each entry is a column of items. */\n items?: MegaMenuItem[][]\n}\n```\n"
|
|
13045
|
+
"markdown": "---\ntitle: MegaMenu\ncategory: 04 / NAVIGATION\ndescription: 水平菜单，子项按多列面板展示。\n---\n\n# MegaMenu\n\n顶层水平导航；展开后以**分栏面板**展示子链接，适合站点级导航。\n\n## 引入\n\n```ts\nimport type {MegaMenuItem} from 'morya-ui';\nimport { MMegaMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 面板结构\n\n`items` 为**列数组**：外层每一项是一列，列内为同级链接。\n\n```ts\n{\n label: '产品',\n items: [\n [ { label: '列 A · 项 1' }, { label: '列 A · 项 2' } ],\n [ { label: '列 B · 项 1' } ],\n ],\n}\n```\n\n无 `items` 的顶层项为普通链接，点击执行 `command`。\n\n## 菜单项字段\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案。 |\n| `icon` | `string` | 可选前缀字符。 |\n| `command` | `() => void` | 点击时执行。 |\n| `disabled` | `boolean` | 禁用项。 |\n| `items` | `MegaMenuItem[][]` | 分栏子面板。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MegaMenuItem[]` | `[]` | 顶层菜单项。 |\n| `teleport` | `boolean` | `true` | 面板 Teleport；默认 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `selectedKey` | `string \\| null` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## 无障碍\n\n- 顶层项使用按钮/链接语义；展开面板请确保键盘可到达子项。\n- 复杂站点导航建议配合 Skip link 与当前页 `aria-current`。\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `select` | — | — |\n| `update:selectedKey` | — | — |\n\n## Slots\n\n无插槽。\n\n## 类型\n\n<h4 id=\"MegaMenuItem\">MegaMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MegaMenuItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n /** Column groups for mega panel; each entry is a column of items. */\n items?: MegaMenuItem[][]\n}\n```\n"
|
|
12939
13046
|
},
|
|
12940
13047
|
"en-US": {
|
|
12941
13048
|
"title": "MegaMenu",
|
|
@@ -12969,7 +13076,7 @@
|
|
|
12969
13076
|
{
|
|
12970
13077
|
"id": "props",
|
|
12971
13078
|
"title": "Props",
|
|
12972
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MegaMenuItem[]` | `[]` | Top-level items. |\n| `teleport` | `boolean` | `true` | Panel Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
13079
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MegaMenuItem[]` | `[]` | Top-level items. |\n| `teleport` | `boolean` | `true` | Panel Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
12973
13080
|
},
|
|
12974
13081
|
{
|
|
12975
13082
|
"id": "accessibility",
|
|
@@ -12992,7 +13099,7 @@
|
|
|
12992
13099
|
"body": "<h4 id=\"MegaMenuItem\">MegaMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface MegaMenuItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n /** Column groups for mega panel; each entry is a column of items. */\n items?: MegaMenuItem[][]\n}\n```"
|
|
12993
13100
|
}
|
|
12994
13101
|
],
|
|
12995
|
-
"markdown": "---\ntitle: MegaMenu\ncategory: 04 / NAVIGATION\ndescription: Horizontal menu with multi-column mega panels.\n---\n\n# MegaMenu\n\nHorizontal top navigation. Sub-links render in a **multi-column panel**—suited to site-wide nav.\n\n## Import\n\n```ts\nimport type {MegaMenuItem} from 'morya-ui';\nimport { MMegaMenu } from 'morya-ui'\n```\n\n## Basic usage\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Panel shape\n\n`items` is an array of **columns**. Each column is a list of links at the same level.\n\n```ts\n{\n label: 'Products',\n items: [\n [ { label: 'Col A · item 1' }, { label: 'Col A · item 2' } ],\n [ { label: 'Col B · item 1' } ],\n ],\n}\n```\n\nTop-level entries without `items` behave as plain links via `command`.\n\n## Item fields\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text. |\n| `icon` | `string` | Optional leading character. |\n| `command` | `() => void` | Runs on activate. |\n| `disabled` | `boolean` | Disabled item. |\n| `items` | `MegaMenuItem[][]` | Column groups for the mega panel. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MegaMenuItem[]` | `[]` | Top-level items. |\n| `teleport` | `boolean` | `true` | Panel Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Accessibility\n\n- Top items expose button/link semantics; ensure submenu links are keyboard reachable.\n- Pair with skip links and `aria-current` on the active page when used as primary nav.\n\n## Events\n\nNo custom events.\n\n## Slots\n\nNo slots.\n\n## Types\n\n<h4 id=\"MegaMenuItem\">MegaMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface MegaMenuItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n /** Column groups for mega panel; each entry is a column of items. */\n items?: MegaMenuItem[][]\n}\n```\n"
|
|
13102
|
+
"markdown": "---\ntitle: MegaMenu\ncategory: 04 / NAVIGATION\ndescription: Horizontal menu with multi-column mega panels.\n---\n\n# MegaMenu\n\nHorizontal top navigation. Sub-links render in a **multi-column panel**—suited to site-wide nav.\n\n## Import\n\n```ts\nimport type {MegaMenuItem} from 'morya-ui';\nimport { MMegaMenu } from 'morya-ui'\n```\n\n## Basic usage\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Panel shape\n\n`items` is an array of **columns**. Each column is a list of links at the same level.\n\n```ts\n{\n label: 'Products',\n items: [\n [ { label: 'Col A · item 1' }, { label: 'Col A · item 2' } ],\n [ { label: 'Col B · item 1' } ],\n ],\n}\n```\n\nTop-level entries without `items` behave as plain links via `command`.\n\n## Item fields\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text. |\n| `icon` | `string` | Optional leading character. |\n| `command` | `() => void` | Runs on activate. |\n| `disabled` | `boolean` | Disabled item. |\n| `items` | `MegaMenuItem[][]` | Column groups for the mega panel. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MegaMenuItem[]` | `[]` | Top-level items. |\n| `teleport` | `boolean` | `true` | Panel Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Accessibility\n\n- Top items expose button/link semantics; ensure submenu links are keyboard reachable.\n- Pair with skip links and `aria-current` on the active page when used as primary nav.\n\n## Events\n\nNo custom events.\n\n## Slots\n\nNo slots.\n\n## Types\n\n<h4 id=\"MegaMenuItem\">MegaMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface MegaMenuItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n /** Column groups for mega panel; each entry is a column of items. */\n items?: MegaMenuItem[][]\n}\n```\n"
|
|
12996
13103
|
}
|
|
12997
13104
|
}
|
|
12998
13105
|
},
|
|
@@ -13113,6 +13220,12 @@
|
|
|
13113
13220
|
"default": "'body'",
|
|
13114
13221
|
"description": "Teleport 目标；未传时使用 ConfigProvider。"
|
|
13115
13222
|
},
|
|
13223
|
+
{
|
|
13224
|
+
"name": "transition",
|
|
13225
|
+
"type": "string | false",
|
|
13226
|
+
"default": "'scale-fade'",
|
|
13227
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
13228
|
+
},
|
|
13116
13229
|
{
|
|
13117
13230
|
"name": "pt",
|
|
13118
13231
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -13159,7 +13272,7 @@
|
|
|
13159
13272
|
"sectionId": "导航选中",
|
|
13160
13273
|
"lang": "vue",
|
|
13161
13274
|
"preview": true,
|
|
13162
|
-
"code": "<script setup lang=\"ts\">\nimport { MMenu } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst selectedKey = ref('dashboard')\nconst model = [\n { key: 'dashboard', label: '仪表盘', icon: 'layout-dashboard' },\n { key: 'users', label: '用户', icon: 'users' },\n { key: 'settings', label: '设置', icon: 'settings', disabled: true },\n]\n</script>\n\n<template>\n <div>\n <MMenu\n v-model:selected-key=\"selectedKey\"\n :model=\"model\"\n embedded\n @select=\"(item) => console.log('select', item.key)\"\n />\n </div>\n</template>",
|
|
13275
|
+
"code": "<script setup lang=\"ts\">\nimport { MMenu } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst selectedKey = ref('dashboard')\nconst model = [\n { key: 'dashboard', label: '仪表盘', icon: 'layout-dashboard' },\n { key: 'users', label: '用户', icon: 'users' },\n { key: 'settings', label: '设置', icon: 'settings', disabled: true },\n]\n</script>\n\n<template>\n <div class=\"w-[15rem]\">\n <MMenu\n v-model:selected-key=\"selectedKey\"\n :model=\"model\"\n embedded\n @select=\"(item) => console.log('select', item.key)\"\n />\n </div>\n</template>",
|
|
13163
13276
|
"locale": "zh-CN"
|
|
13164
13277
|
},
|
|
13165
13278
|
{
|
|
@@ -13195,7 +13308,7 @@
|
|
|
13195
13308
|
"sectionId": "嵌入-layout-侧栏",
|
|
13196
13309
|
"lang": "vue",
|
|
13197
13310
|
"preview": true,
|
|
13198
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n MMenu,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\nconst selectedKey = ref('dashboard')\nconst model = [\n { key: 'dashboard', label: '仪表盘', icon: 'layout-dashboard' },\n {\n key: 'system',\n label: '系统',\n icon: 'settings',\n items: [\n { key: 'users', label: '用户', icon: 'users' },\n { key: 'roles', label: '角色', icon: 'shield' },\n ],\n },\n]\n</script>\n\n<template>\n <MLayout\n style=\"\n height: 14rem;\n border: 1px solid var(--m-color-border);\n border-radius: var(--m-radius-lg);\n box-shadow: var(--m-shadow-sm);\n overflow: hidden;\n \"\n >\n <MLayoutHeader\n bordered\n style=\"\n padding: 0 var(--m-space-4);\n display: flex;\n align-items: center;\n min-height: var(--m-layout-header-height);\n \"\n >\n <strong style=\"color: var(--m-color-primary); font-size: var(--m-font-size-md)\">头部菜单</strong>\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n show-trigger=\"arrow-circle\"\n collapse-mode=\"width\"\n :collapsed-width=\"120\"\n >\n <MMenu\n v-model:selected-key=\"selectedKey\"\n :model=\"model\"\n :collapsed=\"collapsed\"\n :collapsed-width=\"64\"\n />\n </MLayoutSider>\n <MLayoutContent embedded
|
|
13311
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n MMenu,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\nconst selectedKey = ref('dashboard')\nconst model = [\n { key: 'dashboard', label: '仪表盘', icon: 'layout-dashboard' },\n {\n key: 'system',\n label: '系统',\n icon: 'settings',\n items: [\n { key: 'users', label: '用户', icon: 'users' },\n { key: 'roles', label: '角色', icon: 'shield' },\n ],\n },\n]\n</script>\n\n<template>\n <MLayout\n style=\"\n height: 14rem;\n border: 1px solid var(--m-color-border);\n border-radius: var(--m-radius-lg);\n box-shadow: var(--m-shadow-sm);\n overflow: hidden;\n \"\n >\n <MLayoutHeader\n bordered\n style=\"\n padding: 0 var(--m-space-4);\n display: flex;\n align-items: center;\n min-height: var(--m-layout-header-height);\n \"\n >\n <strong style=\"color: var(--m-color-primary); font-size: var(--m-font-size-md)\">头部菜单</strong>\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n show-trigger=\"arrow-circle\"\n collapse-mode=\"width\"\n :collapsed-width=\"120\"\n >\n <MMenu\n v-model:selected-key=\"selectedKey\"\n :model=\"model\"\n :collapsed=\"collapsed\"\n :collapsed-width=\"64\"\n />\n </MLayoutSider>\n <MLayoutContent embedded style=\"padding: var(--m-space-4)\">\n <p style=\"margin: 0; color: var(--m-color-text-muted); font-size: var(--m-font-size-sm)\">\n 当前选中：<strong style=\"color: var(--m-color-text)\">{{ selectedKey }}</strong>\n </p>\n </MLayoutContent>\n </MLayout>\n </MLayout>\n</template>",
|
|
13199
13312
|
"locale": "zh-CN"
|
|
13200
13313
|
},
|
|
13201
13314
|
{
|
|
@@ -13285,7 +13398,7 @@
|
|
|
13285
13398
|
"sectionId": "embed-in-layout-sider",
|
|
13286
13399
|
"lang": "vue",
|
|
13287
13400
|
"preview": true,
|
|
13288
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n MMenu,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\nconst selectedKey = ref('dashboard')\nconst model = [\n { key: 'dashboard', label: 'Dashboard', icon: 'layout-dashboard' },\n {\n key: 'system',\n label: 'System',\n icon: 'settings',\n items: [\n { key: 'users', label: 'Users', icon: 'users' },\n { key: 'roles', label: 'Roles', icon: 'shield' },\n ],\n },\n]\n</script>\n\n<template>\n <MLayout\n style=\"\n height: 14rem;\n border: 1px solid var(--m-color-border);\n border-radius: var(--m-radius-lg);\n box-shadow: var(--m-shadow-sm);\n overflow: hidden;\n \"\n >\n <MLayoutHeader\n bordered\n style=\"\n padding: 0 var(--m-space-4);\n display: flex;\n align-items: center;\n min-height: var(--m-layout-header-height);\n \"\n >\n <strong style=\"color: var(--m-color-primary); font-size: var(--m-font-size-md)\">Morya UI</strong>\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n show-trigger=\"arrow-circle\"\n collapse-mode=\"width\"\n :collapsed-width=\"64\"\n >\n <MMenu\n v-model:selected-key=\"selectedKey\"\n :model=\"model\"\n :collapsed=\"collapsed\"\n :collapsed-width=\"64\"\n accordion\n />\n </MLayoutSider>\n <MLayoutContent embedded
|
|
13401
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MLayout,\n MLayoutContent,\n MLayoutHeader,\n MLayoutSider,\n MMenu,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst collapsed = ref(false)\nconst selectedKey = ref('dashboard')\nconst model = [\n { key: 'dashboard', label: 'Dashboard', icon: 'layout-dashboard' },\n {\n key: 'system',\n label: 'System',\n icon: 'settings',\n items: [\n { key: 'users', label: 'Users', icon: 'users' },\n { key: 'roles', label: 'Roles', icon: 'shield' },\n ],\n },\n]\n</script>\n\n<template>\n <MLayout\n style=\"\n height: 14rem;\n border: 1px solid var(--m-color-border);\n border-radius: var(--m-radius-lg);\n box-shadow: var(--m-shadow-sm);\n overflow: hidden;\n \"\n >\n <MLayoutHeader\n bordered\n style=\"\n padding: 0 var(--m-space-4);\n display: flex;\n align-items: center;\n min-height: var(--m-layout-header-height);\n \"\n >\n <strong style=\"color: var(--m-color-primary); font-size: var(--m-font-size-md)\">Morya UI</strong>\n </MLayoutHeader>\n <MLayout has-sider>\n <MLayoutSider\n v-model:collapsed=\"collapsed\"\n bordered\n show-trigger=\"arrow-circle\"\n collapse-mode=\"width\"\n :collapsed-width=\"64\"\n >\n <MMenu\n v-model:selected-key=\"selectedKey\"\n :model=\"model\"\n :collapsed=\"collapsed\"\n :collapsed-width=\"64\"\n accordion\n />\n </MLayoutSider>\n <MLayoutContent embedded style=\"padding: var(--m-space-4)\">\n <p style=\"margin: 0; color: var(--m-color-text-muted); font-size: var(--m-font-size-sm)\">\n Selected: <strong style=\"color: var(--m-color-text)\">{{ selectedKey }}</strong>\n </p>\n </MLayoutContent>\n </MLayout>\n </MLayout>\n</template>",
|
|
13289
13402
|
"locale": "en-US"
|
|
13290
13403
|
},
|
|
13291
13404
|
{
|
|
@@ -13358,7 +13471,7 @@
|
|
|
13358
13471
|
{
|
|
13359
13472
|
"id": "折叠与飞出层",
|
|
13360
13473
|
"title": "折叠与飞出层",
|
|
13361
|
-
"body": "`collapsed` 隐藏文案，仅保留图标；**每个可折叠展示的菜单项必须提供 `icon`**（否则折叠后几乎空白）。悬停时在右侧显示 `MTooltip` 标签，带子项的节点还会弹出飞出层（`.m-menu--flyout`）。飞出层经 `MPopover` Teleport 到 `body
|
|
13474
|
+
"body": "`collapsed` 隐藏文案，仅保留图标；**每个可折叠展示的菜单项必须提供 `icon`**（否则折叠后几乎空白）。悬停时在右侧显示 `MTooltip` 标签，带子项的节点还会弹出飞出层（`.m-menu--flyout`）。飞出层经 `MPopover` Teleport 到 `body`，不会被侧栏裁剪。`collapsed-width` 应与侧栏折叠宽度一致，用于居中图标。\n\n使用 `item.to` 时菜单项会渲染为 `RouterLink` / `<a>`；组件已重置链接的默认蓝色下划线，视觉与普通菜单项一致。\n\n```vue preview src=\"./demos/CollapsedAndFlyout.zh.vue\"\n```"
|
|
13362
13475
|
},
|
|
13363
13476
|
{
|
|
13364
13477
|
"id": "嵌入-layout-侧栏",
|
|
@@ -13383,7 +13496,7 @@
|
|
|
13383
13496
|
{
|
|
13384
13497
|
"id": "props",
|
|
13385
13498
|
"title": "Props",
|
|
13386
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MenuItem[]` | — | 菜单项，可嵌套 `items`。 |\n| `popup` | `boolean` | `false` | 浮层模式；配合 `v-model` 控制显隐。 |\n| `modelValue` | `boolean` | `false` | popup 可见性（`v-model`）。 |\n| `placement` | `'bottom-start' \\| 'bottom-end' \\| 'top-start' \\| 'top-end'` | `'bottom-start'` | popup 相对触发器的位置。 |\n| `selectedKey` | `string \\| null` | `null` | 当前选中项 key（`v-model:selected-key`）。 |\n| `collapsed` | `boolean` | `false` | 图标模式；子菜单以右侧飞出层展示。 |\n| `collapsedWidth` | `number` | `80` | 折叠宽度（px），用于居中图标。 |\n| `indent` | `number` | `12` | 每层额外左内边距（px）。 |\n| `rootIndent` | `number` | `16` | 根级左内边距（px）。 |\n| `accordion` | `boolean` | `false` | 手风琴：同时只展开一个一级子菜单。 |\n| `defaultExpandedKeys` | `string[]` | `[]` | 默认展开的 submenu keys。 |\n| `expandedKeys` | `string[]` | — | 受控展开 keys（`v-model:expanded-keys`）。 |\n| `defaultExpandAll` | `boolean` | `false` | 初始展开全部子菜单。 |\n| `mode` | `'vertical' \\| 'horizontal'` | `'vertical'` | 布局方向。 |\n| `inverted` | `boolean` | `false` | 反色样式，适合深色侧栏。 |\n| `embedded` | `boolean` | `!popup` | 嵌入布局：去边框与最小宽度。 |\n| `teleport` | `boolean` | `true` | popup 时 Teleport 到 `appendTo`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Teleport 目标；未传时使用 ConfigProvider。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
13499
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MenuItem[]` | — | 菜单项，可嵌套 `items`。 |\n| `popup` | `boolean` | `false` | 浮层模式；配合 `v-model` 控制显隐。 |\n| `modelValue` | `boolean` | `false` | popup 可见性（`v-model`）。 |\n| `placement` | `'bottom-start' \\| 'bottom-end' \\| 'top-start' \\| 'top-end'` | `'bottom-start'` | popup 相对触发器的位置。 |\n| `selectedKey` | `string \\| null` | `null` | 当前选中项 key（`v-model:selected-key`）。 |\n| `collapsed` | `boolean` | `false` | 图标模式；子菜单以右侧飞出层展示。 |\n| `collapsedWidth` | `number` | `80` | 折叠宽度（px），用于居中图标。 |\n| `indent` | `number` | `12` | 每层额外左内边距（px）。 |\n| `rootIndent` | `number` | `16` | 根级左内边距（px）。 |\n| `accordion` | `boolean` | `false` | 手风琴：同时只展开一个一级子菜单。 |\n| `defaultExpandedKeys` | `string[]` | `[]` | 默认展开的 submenu keys。 |\n| `expandedKeys` | `string[]` | — | 受控展开 keys（`v-model:expanded-keys`）。 |\n| `defaultExpandAll` | `boolean` | `false` | 初始展开全部子菜单。 |\n| `mode` | `'vertical' \\| 'horizontal'` | `'vertical'` | 布局方向。 |\n| `inverted` | `boolean` | `false` | 反色样式，适合深色侧栏。 |\n| `embedded` | `boolean` | `!popup` | 嵌入布局：去边框与最小宽度。 |\n| `teleport` | `boolean` | `true` | popup 时 Teleport 到 `appendTo`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Teleport 目标；未传时使用 ConfigProvider。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
13387
13500
|
},
|
|
13388
13501
|
{
|
|
13389
13502
|
"id": "events",
|
|
@@ -13406,7 +13519,7 @@
|
|
|
13406
13519
|
"body": "<h4 id=\"MenuItem\">MenuItem</h4>\n\n`model` 数组项，支持嵌套：\n\n```ts\ninterface MenuItem {\n key?: string\n label?: string\n icon?: string\n to?: string | RouteLocationRaw // 有 vue-router 时用 RouterLink\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}\n```\n\n`key` 未传时用 `label` 作为标识。`separator: true` 时渲染分隔线。更多见 [API 类型](/docs/types)。"
|
|
13407
13520
|
}
|
|
13408
13521
|
],
|
|
13409
|
-
"markdown": "---\ntitle: Menu\ncategory: 04 / NAVIGATION\ndescription: 垂直/水平导航菜单，支持多级嵌套、受控选中、手风琴展开与折叠侧栏飞出层。\n---\n\n# Menu\n\n基于 `model` 渲染的**导航菜单**，适合后台侧栏、顶栏导航等场景。支持：\n\n- 多级嵌套 `items` 与受控 `selectedKey`\n- 展开路径自动跟随选中项；`accordion` 手风琴\n- `collapsed` 图标模式 + 右侧飞出子菜单（Popover）\n- 非 popup 时默认 `embedded`，无边框铺满 `MLayoutSider`\n\n> 单层悬停子菜单见 [TieredMenu](/components/TieredMenu)；顶栏菜单见 [Menubar](/components/Menubar)；操作列表见 [Dropdown](/components/Dropdown)。\n\n## 引入\n\n```ts\nimport type {MenuItem} from 'morya-ui';\nimport { MMenu } from 'morya-ui'\n```\n\n## 导航选中\n\n为叶子项设置稳定的 `key`，用 `v-model:selected-key` 与路由同步；点击时触发 `select`。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n未提供 `key` 时会回退到 `label`；生产环境建议始终显式设置 `key`。\n\n## 嵌套子菜单\n\n点击带子项的节点可展开/收起；选中子项时父级会显示 `child-active` 高亮。\n\n```vue preview src=\"./demos/NestedSubmenus.zh.vue\"\n```\n\n## 手风琴与展开控制\n\n`accordion` 同时只保留一个一级子菜单展开。`defaultExpandedKeys` / `v-model:expanded-keys` 可受控展开项；变更 `selectedKey` 时会自动展开其祖先路径。\n\n```vue preview src=\"./demos/AccordionAndExpandedKeys.zh.vue\"\n```\n\n## 折叠与飞出层\n\n`collapsed` 隐藏文案，仅保留图标；**每个可折叠展示的菜单项必须提供 `icon`**（否则折叠后几乎空白）。悬停时在右侧显示 `MTooltip` 标签，带子项的节点还会弹出飞出层（`.m-menu--flyout`）。飞出层经 `MPopover` Teleport 到 `body
|
|
13522
|
+
"markdown": "---\ntitle: Menu\ncategory: 04 / NAVIGATION\ndescription: 垂直/水平导航菜单，支持多级嵌套、受控选中、手风琴展开与折叠侧栏飞出层。\n---\n\n# Menu\n\n基于 `model` 渲染的**导航菜单**，适合后台侧栏、顶栏导航等场景。支持：\n\n- 多级嵌套 `items` 与受控 `selectedKey`\n- 展开路径自动跟随选中项；`accordion` 手风琴\n- `collapsed` 图标模式 + 右侧飞出子菜单（Popover）\n- 非 popup 时默认 `embedded`，无边框铺满 `MLayoutSider`\n\n> 单层悬停子菜单见 [TieredMenu](/components/TieredMenu)；顶栏菜单见 [Menubar](/components/Menubar)；操作列表见 [Dropdown](/components/Dropdown)。\n\n## 引入\n\n```ts\nimport type {MenuItem} from 'morya-ui';\nimport { MMenu } from 'morya-ui'\n```\n\n## 导航选中\n\n为叶子项设置稳定的 `key`，用 `v-model:selected-key` 与路由同步；点击时触发 `select`。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n未提供 `key` 时会回退到 `label`；生产环境建议始终显式设置 `key`。\n\n## 嵌套子菜单\n\n点击带子项的节点可展开/收起；选中子项时父级会显示 `child-active` 高亮。\n\n```vue preview src=\"./demos/NestedSubmenus.zh.vue\"\n```\n\n## 手风琴与展开控制\n\n`accordion` 同时只保留一个一级子菜单展开。`defaultExpandedKeys` / `v-model:expanded-keys` 可受控展开项；变更 `selectedKey` 时会自动展开其祖先路径。\n\n```vue preview src=\"./demos/AccordionAndExpandedKeys.zh.vue\"\n```\n\n## 折叠与飞出层\n\n`collapsed` 隐藏文案，仅保留图标；**每个可折叠展示的菜单项必须提供 `icon`**（否则折叠后几乎空白）。悬停时在右侧显示 `MTooltip` 标签，带子项的节点还会弹出飞出层（`.m-menu--flyout`）。飞出层经 `MPopover` Teleport 到 `body`，不会被侧栏裁剪。`collapsed-width` 应与侧栏折叠宽度一致，用于居中图标。\n\n使用 `item.to` 时菜单项会渲染为 `RouterLink` / `<a>`；组件已重置链接的默认蓝色下划线，视觉与普通菜单项一致。\n\n```vue preview src=\"./demos/CollapsedAndFlyout.zh.vue\"\n```\n\n## 嵌入 Layout 侧栏\n\n推荐结构：**全局 Header + 下方 `has-sider` Layout**。菜单放在 `MLayoutSider` 内，与 `v-model:collapsed` 联动。\n\n```vue preview src=\"./demos/EmbedInLayoutSider.zh.vue\"\n```\n\n## 水平菜单\n\n`mode=\"horizontal\"` 用于顶栏一级导航；子菜单经 `MPopover` 以下拉飞出层展示（Teleport + 主题滚动条），选中后自动关闭。`popup` 模式的主菜单列表同样内置 `MScrollbar`。\n\n```vue preview src=\"./demos/HorizontalMode.zh.vue\"\n```\n\n## 反色（深色侧栏）\n\n`inverted` 配合 `MLayoutSider` 的 `inverted`，用于深色背景侧栏。\n\n```vue preview src=\"./demos/InvertedDarkSider.zh.vue\"\n```\n\n## 弹出模式\n\n`popup` + `v-model` 将菜单作为浮层，默认 Teleport 到 `body` 并相对**默认插槽触发器**定位（无插槽时回退到最后一次指针位置）。点击外部或选中叶子项后关闭。\n\n```vue preview src=\"./demos/PopupMode.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MenuItem[]` | — | 菜单项，可嵌套 `items`。 |\n| `popup` | `boolean` | `false` | 浮层模式；配合 `v-model` 控制显隐。 |\n| `modelValue` | `boolean` | `false` | popup 可见性（`v-model`）。 |\n| `placement` | `'bottom-start' \\| 'bottom-end' \\| 'top-start' \\| 'top-end'` | `'bottom-start'` | popup 相对触发器的位置。 |\n| `selectedKey` | `string \\| null` | `null` | 当前选中项 key（`v-model:selected-key`）。 |\n| `collapsed` | `boolean` | `false` | 图标模式；子菜单以右侧飞出层展示。 |\n| `collapsedWidth` | `number` | `80` | 折叠宽度（px），用于居中图标。 |\n| `indent` | `number` | `12` | 每层额外左内边距（px）。 |\n| `rootIndent` | `number` | `16` | 根级左内边距（px）。 |\n| `accordion` | `boolean` | `false` | 手风琴：同时只展开一个一级子菜单。 |\n| `defaultExpandedKeys` | `string[]` | `[]` | 默认展开的 submenu keys。 |\n| `expandedKeys` | `string[]` | — | 受控展开 keys（`v-model:expanded-keys`）。 |\n| `defaultExpandAll` | `boolean` | `false` | 初始展开全部子菜单。 |\n| `mode` | `'vertical' \\| 'horizontal'` | `'vertical'` | 布局方向。 |\n| `inverted` | `boolean` | `false` | 反色样式，适合深色侧栏。 |\n| `embedded` | `boolean` | `!popup` | 嵌入布局：去边框与最小宽度。 |\n| `teleport` | `boolean` | `true` | popup 时 Teleport 到 `appendTo`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Teleport 目标；未传时使用 ConfigProvider。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | popup 可见性变化。 |\n| `update:selectedKey` | `string \\| null` | 选中项变化。 |\n| `update:expandedKeys` | `string[]` | 展开项变化。 |\n| `select` | `MenuItem` | 点击叶子项（非 disabled / separator）。 |\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `default` | popup 模式的触发器锚点（如按钮）；菜单相对其定位。 |\n\n## MenuItem\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 唯一标识；未传时使用 `label`。 |\n| `label` | `string` | 展示文本。 |\n| `icon` | `string` | [Tabler 图标名](/components/Icon) 或字符。 |\n| `command` | `() => void` | 点击回调（与 `select` 事件同时触发）。 |\n| `disabled` | `boolean` | 禁用。 |\n| `separator` | `boolean` | 分隔线（忽略其他字段）。 |\n| `items` | `MenuItem[]` | 子菜单。 |\n\n## 类型\n\n<h4 id=\"MenuItem\">MenuItem</h4>\n\n`model` 数组项，支持嵌套：\n\n```ts\ninterface MenuItem {\n key?: string\n label?: string\n icon?: string\n to?: string | RouteLocationRaw // 有 vue-router 时用 RouterLink\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}\n```\n\n`key` 未传时用 `label` 作为标识。`separator: true` 时渲染分隔线。更多见 [API 类型](/docs/types)。\n"
|
|
13410
13523
|
},
|
|
13411
13524
|
"en-US": {
|
|
13412
13525
|
"title": "Menu",
|
|
@@ -13440,7 +13553,7 @@
|
|
|
13440
13553
|
{
|
|
13441
13554
|
"id": "collapsed-flyout",
|
|
13442
13555
|
"title": "Collapsed & flyout",
|
|
13443
|
-
"body": "`collapsed` hides labels and keeps icons. Hover shows an `MTooltip` with the label; groups also open a right flyout (`.m-menu--flyout`) via `MPopover` teleported to `body`, so it is not clipped by sider
|
|
13556
|
+
"body": "`collapsed` hides labels and keeps icons. Hover shows an `MTooltip` with the label; groups also open a right flyout (`.m-menu--flyout`) via `MPopover` teleported to `body`, so it is not clipped by the sider. Set `collapsed-width` to match the sider width for centered icons.\n\n```vue preview src=\"./demos/CollapsedAndFlyout.en.vue\"\n```"
|
|
13444
13557
|
},
|
|
13445
13558
|
{
|
|
13446
13559
|
"id": "embed-in-layout-sider",
|
|
@@ -13465,7 +13578,7 @@
|
|
|
13465
13578
|
{
|
|
13466
13579
|
"id": "props",
|
|
13467
13580
|
"title": "Props",
|
|
13468
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MenuItem[]` | — | Menu items; may nest `items`. |\n| `popup` | `boolean` | `false` | Overlay mode; use with `v-model`. |\n| `modelValue` | `boolean` | `false` | Popup visibility (`v-model`). |\n| `placement` | `'bottom-start' \\| 'bottom-end' \\| 'top-start' \\| 'top-end'` | `'bottom-start'` | Popup position relative to the trigger. |\n| `selectedKey` | `string \\| null` | `null` | Selected item key (`v-model:selected-key`). |\n| `collapsed` | `boolean` | `false` | Icon-only; submenus in right flyout. |\n| `collapsedWidth` | `number` | `80` | Collapsed width (px) for icon centering. |\n| `indent` | `number` | `12` | Extra padding-left per level (px). |\n| `rootIndent` | `number` | `16` | Root item padding-left (px). |\n| `accordion` | `boolean` | `false` | Only one top-level submenu open at a time. |\n| `defaultExpandedKeys` | `string[]` | `[]` | Initially expanded submenu keys. |\n| `expandedKeys` | `string[]` | — | Controlled expanded keys (`v-model:expanded-keys`). |\n| `defaultExpandAll` | `boolean` | `false` | Expand all submenus initially. |\n| `mode` | `'vertical' \\| 'horizontal'` | `'vertical'` | Layout direction. |\n| `inverted` | `boolean` | `false` | Inverted colors for dark sider. |\n| `embedded` | `boolean` | `!popup` | Embed in layout (no border/min-width). |\n| `teleport` | `boolean` | `true` | Teleport popup to `appendTo`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Teleport target; falls back to ConfigProvider. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
13581
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MenuItem[]` | — | Menu items; may nest `items`. |\n| `popup` | `boolean` | `false` | Overlay mode; use with `v-model`. |\n| `modelValue` | `boolean` | `false` | Popup visibility (`v-model`). |\n| `placement` | `'bottom-start' \\| 'bottom-end' \\| 'top-start' \\| 'top-end'` | `'bottom-start'` | Popup position relative to the trigger. |\n| `selectedKey` | `string \\| null` | `null` | Selected item key (`v-model:selected-key`). |\n| `collapsed` | `boolean` | `false` | Icon-only; submenus in right flyout. |\n| `collapsedWidth` | `number` | `80` | Collapsed width (px) for icon centering. |\n| `indent` | `number` | `12` | Extra padding-left per level (px). |\n| `rootIndent` | `number` | `16` | Root item padding-left (px). |\n| `accordion` | `boolean` | `false` | Only one top-level submenu open at a time. |\n| `defaultExpandedKeys` | `string[]` | `[]` | Initially expanded submenu keys. |\n| `expandedKeys` | `string[]` | — | Controlled expanded keys (`v-model:expanded-keys`). |\n| `defaultExpandAll` | `boolean` | `false` | Expand all submenus initially. |\n| `mode` | `'vertical' \\| 'horizontal'` | `'vertical'` | Layout direction. |\n| `inverted` | `boolean` | `false` | Inverted colors for dark sider. |\n| `embedded` | `boolean` | `!popup` | Embed in layout (no border/min-width). |\n| `teleport` | `boolean` | `true` | Teleport popup to `appendTo`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Teleport target; falls back to ConfigProvider. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
13469
13582
|
},
|
|
13470
13583
|
{
|
|
13471
13584
|
"id": "events",
|
|
@@ -13488,7 +13601,7 @@
|
|
|
13488
13601
|
"body": "<h4 id=\"MenuItem\">MenuItem</h4>\n\nEach entry in `model`; supports nesting:\n\n```ts\ninterface MenuItem {\n key?: string\n label?: string\n icon?: string\n to?: string | RouteLocationRaw // RouterLink when vue-router is installed\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}\n```\n\nWhen `key` is omitted, `label` is used as the identifier. `separator: true` renders a divider. See also [API types](/docs/types)."
|
|
13489
13602
|
}
|
|
13490
13603
|
],
|
|
13491
|
-
"markdown": "---\ntitle: Menu\ncategory: 04 / NAVIGATION\ndescription: Vertical/horizontal navigation menu with nested items, controlled selection, accordion, and collapsed flyout submenus.\n---\n\n# Menu\n\nNavigation menu rendered from a `model`. Typical uses: admin sidebar, top navigation.\n\n- Nested `items` with controlled `selectedKey`\n- Auto-expand ancestor path when selection changes; optional `accordion`\n- `collapsed` icon rail with right-side flyout submenus (Popover)\n- Non-popup menus default to `embedded` (borderless, full-width in `MLayoutSider`)\n\n> One-level hover submenus: [TieredMenu](/components/TieredMenu). Top bar: [Menubar](/components/Menubar). Action lists: [Dropdown](/components/Dropdown).\n\n## Import\n\n```ts\nimport type {MenuItem} from 'morya-ui';\nimport { MMenu } from 'morya-ui'\n```\n\n## Selection\n\nGive leaf items stable `key` values; sync with routing via `v-model:selected-key`. Emits `select` on click.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\nIf `key` is omitted, `label` is used as fallback. Prefer explicit keys in production.\n\n## Nested submenus\n\nClick a group to expand/collapse. When a child is selected, the parent shows `child-active` styling.\n\n```vue preview src=\"./demos/NestedSubmenus.en.vue\"\n```\n\n## Accordion & expanded keys\n\n`accordion` keeps at most one top-level group open. Use `defaultExpandedKeys` or `v-model:expanded-keys` for controlled expansion. Changing `selectedKey` auto-expands its ancestor path.\n\n```vue preview src=\"./demos/AccordionAndExpandedKeys.en.vue\"\n```\n\n## Collapsed & flyout\n\n`collapsed` hides labels and keeps icons. Hover shows an `MTooltip` with the label; groups also open a right flyout (`.m-menu--flyout`) via `MPopover` teleported to `body`, so it is not clipped by sider
|
|
13604
|
+
"markdown": "---\ntitle: Menu\ncategory: 04 / NAVIGATION\ndescription: Vertical/horizontal navigation menu with nested items, controlled selection, accordion, and collapsed flyout submenus.\n---\n\n# Menu\n\nNavigation menu rendered from a `model`. Typical uses: admin sidebar, top navigation.\n\n- Nested `items` with controlled `selectedKey`\n- Auto-expand ancestor path when selection changes; optional `accordion`\n- `collapsed` icon rail with right-side flyout submenus (Popover)\n- Non-popup menus default to `embedded` (borderless, full-width in `MLayoutSider`)\n\n> One-level hover submenus: [TieredMenu](/components/TieredMenu). Top bar: [Menubar](/components/Menubar). Action lists: [Dropdown](/components/Dropdown).\n\n## Import\n\n```ts\nimport type {MenuItem} from 'morya-ui';\nimport { MMenu } from 'morya-ui'\n```\n\n## Selection\n\nGive leaf items stable `key` values; sync with routing via `v-model:selected-key`. Emits `select` on click.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\nIf `key` is omitted, `label` is used as fallback. Prefer explicit keys in production.\n\n## Nested submenus\n\nClick a group to expand/collapse. When a child is selected, the parent shows `child-active` styling.\n\n```vue preview src=\"./demos/NestedSubmenus.en.vue\"\n```\n\n## Accordion & expanded keys\n\n`accordion` keeps at most one top-level group open. Use `defaultExpandedKeys` or `v-model:expanded-keys` for controlled expansion. Changing `selectedKey` auto-expands its ancestor path.\n\n```vue preview src=\"./demos/AccordionAndExpandedKeys.en.vue\"\n```\n\n## Collapsed & flyout\n\n`collapsed` hides labels and keeps icons. Hover shows an `MTooltip` with the label; groups also open a right flyout (`.m-menu--flyout`) via `MPopover` teleported to `body`, so it is not clipped by the sider. Set `collapsed-width` to match the sider width for centered icons.\n\n```vue preview src=\"./demos/CollapsedAndFlyout.en.vue\"\n```\n\n## Embed in Layout sider\n\nRecommended shell: **global Header + inner `has-sider` Layout**. Bind menu `collapsed` to `MLayoutSider`.\n\n```vue preview src=\"./demos/EmbedInLayoutSider.en.vue\"\n```\n\n## Horizontal mode\n\n`mode=\"horizontal\"` for top nav bars. Submenus open in a `MPopover` dropdown flyout (teleported, themed scrollbar) and close after selection. Popup mode root menus also use built-in `MScrollbar`.\n\n```vue preview src=\"./demos/HorizontalMode.en.vue\"\n```\n\n## Inverted (dark sider)\n\nUse `inverted` with `MLayoutSider`'s `inverted` on dark backgrounds.\n\n```vue preview src=\"./demos/InvertedDarkSider.en.vue\"\n```\n\n## Popup mode\n\n`popup` + `v-model` renders a floating menu, teleported to `body` by default and positioned against the **default-slot trigger** (falls back to the last pointer position when no slot). Closes on outside click or leaf selection.\n\n```vue preview src=\"./demos/PopupMode.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MenuItem[]` | — | Menu items; may nest `items`. |\n| `popup` | `boolean` | `false` | Overlay mode; use with `v-model`. |\n| `modelValue` | `boolean` | `false` | Popup visibility (`v-model`). |\n| `placement` | `'bottom-start' \\| 'bottom-end' \\| 'top-start' \\| 'top-end'` | `'bottom-start'` | Popup position relative to the trigger. |\n| `selectedKey` | `string \\| null` | `null` | Selected item key (`v-model:selected-key`). |\n| `collapsed` | `boolean` | `false` | Icon-only; submenus in right flyout. |\n| `collapsedWidth` | `number` | `80` | Collapsed width (px) for icon centering. |\n| `indent` | `number` | `12` | Extra padding-left per level (px). |\n| `rootIndent` | `number` | `16` | Root item padding-left (px). |\n| `accordion` | `boolean` | `false` | Only one top-level submenu open at a time. |\n| `defaultExpandedKeys` | `string[]` | `[]` | Initially expanded submenu keys. |\n| `expandedKeys` | `string[]` | — | Controlled expanded keys (`v-model:expanded-keys`). |\n| `defaultExpandAll` | `boolean` | `false` | Expand all submenus initially. |\n| `mode` | `'vertical' \\| 'horizontal'` | `'vertical'` | Layout direction. |\n| `inverted` | `boolean` | `false` | Inverted colors for dark sider. |\n| `embedded` | `boolean` | `!popup` | Embed in layout (no border/min-width). |\n| `teleport` | `boolean` | `true` | Teleport popup to `appendTo`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Teleport target; falls back to ConfigProvider. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Popup visibility changed. |\n| `update:selectedKey` | `string \\| null` | Selected item changed. |\n| `update:expandedKeys` | `string[]` | Expanded keys changed. |\n| `select` | `MenuItem` | Leaf clicked (not disabled / separator). |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Popup trigger anchor (e.g. a button); menu positions against it. |\n\n## MenuItem\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Unique id; falls back to `label`. |\n| `label` | `string` | Display text. |\n| `icon` | `string` | [Tabler icon name](/components/Icon) or character. |\n| `command` | `() => void` | Click handler (also emits `select`). |\n| `disabled` | `boolean` | Disabled state. |\n| `separator` | `boolean` | Separator line (ignores other fields). |\n| `items` | `MenuItem[]` | Child menu items. |\n\n## Types\n\n<h4 id=\"MenuItem\">MenuItem</h4>\n\nEach entry in `model`; supports nesting:\n\n```ts\ninterface MenuItem {\n key?: string\n label?: string\n icon?: string\n to?: string | RouteLocationRaw // RouterLink when vue-router is installed\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: MenuItem[]\n}\n```\n\nWhen `key` is omitted, `label` is used as the identifier. `separator: true` renders a divider. See also [API types](/docs/types).\n"
|
|
13492
13605
|
}
|
|
13493
13606
|
}
|
|
13494
13607
|
},
|
|
@@ -13525,6 +13638,12 @@
|
|
|
13525
13638
|
"default": "'body'",
|
|
13526
13639
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
13527
13640
|
},
|
|
13641
|
+
{
|
|
13642
|
+
"name": "transition",
|
|
13643
|
+
"type": "string | false",
|
|
13644
|
+
"default": "'scale-fade'",
|
|
13645
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
13646
|
+
},
|
|
13528
13647
|
{
|
|
13529
13648
|
"name": "pt",
|
|
13530
13649
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -13633,7 +13752,7 @@
|
|
|
13633
13752
|
{
|
|
13634
13753
|
"id": "props",
|
|
13635
13754
|
"title": "Props",
|
|
13636
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MenubarItem[]` | — | 菜单项，可含一层 `items`；项可含 `key` / `icon`。 |\n| `selectedKey` | `string \\| null` | — | 选中项（`item.key` 或 `item.label`）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
13755
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MenubarItem[]` | — | 菜单项，可含一层 `items`；项可含 `key` / `icon`。 |\n| `selectedKey` | `string \\| null` | — | 选中项（`item.key` 或 `item.label`）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
13637
13756
|
},
|
|
13638
13757
|
{
|
|
13639
13758
|
"id": "events",
|
|
@@ -13651,7 +13770,7 @@
|
|
|
13651
13770
|
"body": "<h4 id=\"MenubarItem\">MenubarItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MenubarItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n items?: MenubarItem[]\n}\n```"
|
|
13652
13771
|
}
|
|
13653
13772
|
],
|
|
13654
|
-
"markdown": "---\ntitle: Menubar\ncategory: 04 / NAVIGATION\ndescription: 水平菜单栏，支持一级下拉。\n---\n\n# Menubar\n\n水平导航菜单，子项以一层下拉展示。`selectedKey` / `icon` 用于高亮与图标；响应式折叠本期不做。\n\n## 引入\n\n```ts\nimport { MMenubar } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MenubarItem[]` | — | 菜单项，可含一层 `items`；项可含 `key` / `icon`。 |\n| `selectedKey` | `string \\| null` | — | 选中项（`item.key` 或 `item.label`）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:selectedKey` | `string \\| null` | 选中项变化。 |\n| `select` | `MenubarItem` | 点击叶子项。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `start` | 菜单栏起始区域。 |\n| `end` | 菜单栏末尾区域。 |\n\n## 类型\n\n<h4 id=\"MenubarItem\">MenubarItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MenubarItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n items?: MenubarItem[]\n}\n```\n"
|
|
13773
|
+
"markdown": "---\ntitle: Menubar\ncategory: 04 / NAVIGATION\ndescription: 水平菜单栏，支持一级下拉。\n---\n\n# Menubar\n\n水平导航菜单，子项以一层下拉展示。`selectedKey` / `icon` 用于高亮与图标；响应式折叠本期不做。\n\n## 引入\n\n```ts\nimport { MMenubar } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `MenubarItem[]` | — | 菜单项，可含一层 `items`；项可含 `key` / `icon`。 |\n| `selectedKey` | `string \\| null` | — | 选中项（`item.key` 或 `item.label`）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:selectedKey` | `string \\| null` | 选中项变化。 |\n| `select` | `MenubarItem` | 点击叶子项。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `start` | 菜单栏起始区域。 |\n| `end` | 菜单栏末尾区域。 |\n\n## 类型\n\n<h4 id=\"MenubarItem\">MenubarItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MenubarItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n items?: MenubarItem[]\n}\n```\n"
|
|
13655
13774
|
},
|
|
13656
13775
|
"en-US": {
|
|
13657
13776
|
"title": "Menubar",
|
|
@@ -13675,7 +13794,7 @@
|
|
|
13675
13794
|
{
|
|
13676
13795
|
"id": "props",
|
|
13677
13796
|
"title": "Props",
|
|
13678
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MenubarItem[]` | — | Menu items. May include one level of `items`. Items may include `key` / `icon`. |\n| `selectedKey` | `string \\| null` | — | Selected item (`item.key` or `item.label`). |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
13797
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MenubarItem[]` | — | Menu items. May include one level of `items`. Items may include `key` / `icon`. |\n| `selectedKey` | `string \\| null` | — | Selected item (`item.key` or `item.label`). |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
13679
13798
|
},
|
|
13680
13799
|
{
|
|
13681
13800
|
"id": "events",
|
|
@@ -13693,7 +13812,7 @@
|
|
|
13693
13812
|
"body": "<h4 id=\"MenubarItem\">MenubarItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface MenubarItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n items?: MenubarItem[]\n}\n```"
|
|
13694
13813
|
}
|
|
13695
13814
|
],
|
|
13696
|
-
"markdown": "---\ntitle: Menubar\ncategory: 04 / NAVIGATION\ndescription: Horizontal menubar with one level of dropdowns.\n---\n\n# Menubar\n\nHorizontal navigation menu. Child items appear in a single-level dropdown. `selectedKey` / `icon` cover highlight and icons. Responsive collapse is out of scope this batch.\n\n## Import\n\n```ts\nimport { MMenubar } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MenubarItem[]` | — | Menu items. May include one level of `items`. Items may include `key` / `icon`. |\n| `selectedKey` | `string \\| null` | — | Selected item (`item.key` or `item.label`). |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:selectedKey` | `string \\| null` | Selected item changed. |\n| `select` | `MenubarItem` | Emitted when a leaf is clicked. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `start` | Start of menubar. |\n| `end` | End of menubar. |\n\n## Types\n\n<h4 id=\"MenubarItem\">MenubarItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface MenubarItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n items?: MenubarItem[]\n}\n```\n"
|
|
13815
|
+
"markdown": "---\ntitle: Menubar\ncategory: 04 / NAVIGATION\ndescription: Horizontal menubar with one level of dropdowns.\n---\n\n# Menubar\n\nHorizontal navigation menu. Child items appear in a single-level dropdown. `selectedKey` / `icon` cover highlight and icons. Responsive collapse is out of scope this batch.\n\n## Import\n\n```ts\nimport { MMenubar } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `MenubarItem[]` | — | Menu items. May include one level of `items`. Items may include `key` / `icon`. |\n| `selectedKey` | `string \\| null` | — | Selected item (`item.key` or `item.label`). |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:selectedKey` | `string \\| null` | Selected item changed. |\n| `select` | `MenubarItem` | Emitted when a leaf is clicked. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `start` | Start of menubar. |\n| `end` | End of menubar. |\n\n## Types\n\n<h4 id=\"MenubarItem\">MenubarItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface MenubarItem extends Omit<MenuNodeBase, 'label' | 'items'> {\n label: string\n items?: MenubarItem[]\n}\n```\n"
|
|
13697
13816
|
}
|
|
13698
13817
|
}
|
|
13699
13818
|
},
|
|
@@ -13799,7 +13918,7 @@
|
|
|
13799
13918
|
{
|
|
13800
13919
|
"id": "overview",
|
|
13801
13920
|
"title": "",
|
|
13802
|
-
"body": "# Message\n\n从窗口顶部正中滑入的轻量提示（可通过 `placement` 改到六向位置），适合简短操作反馈。推荐用 `message` API；也可挂载 `<MMessage />` 作为自定义挂载点。\n\n与 [Toast](/components/Toast) 的分工：\n\n- **Message（默认）**：轻量单行反馈，默认顶部居中，无标题/详情。**大多数 CRUD / 保存 / 删除回执应使用此项。**\n- **Toast**：四角通知，带 `summary` / `detail`；仅在有补充说明或异步通知感时使用。\n- **`<MMessage>`
|
|
13921
|
+
"body": "# Message\n\n从窗口顶部正中滑入的轻量提示（可通过 `placement` 改到六向位置），适合简短操作反馈。推荐用 `message` API；也可挂载 `<MMessage />` 作为自定义挂载点。\n\n与 [Toast](/components/Toast) 的分工：\n\n- **Message（默认）**：轻量单行反馈，默认顶部居中，无标题/详情。**大多数 CRUD / 保存 / 删除回执应使用此项。**\n- **Toast**：四角通知，带 `summary` / `detail`；仅在有补充说明或异步通知感时使用。\n- **`<MMessage>` 组件**：可选的 message 服务宿主（自定义 `appendTo` / `placement`）。它不是页面内嵌 Alert；表单常驻错误用字段 `errorMessage`，或 token 样式的 `role=\"alert\"`。\n\n> AI / 业务代码选型细则见 [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md)。\n\n**快速判断**：只有一句话 → `message.success('已保存')`；有标题 + 详情 → `toast.success({ summary, detail })`。"
|
|
13803
13922
|
},
|
|
13804
13923
|
{
|
|
13805
13924
|
"id": "引入",
|
|
@@ -13829,7 +13948,7 @@
|
|
|
13829
13948
|
{
|
|
13830
13949
|
"id": "props-mmessage",
|
|
13831
13950
|
"title": "Props（`MMessage`）",
|
|
13832
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `teleport` | `boolean` | `true` | 是否 Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标 |\n| `placement` | `'top' \\| 'top-left' \\| 'top-right' \\| 'bottom' \\| 'bottom-left' \\| 'bottom-right'` | `'top'` | 宿主位置 |\n| `max` | `number` | — | 同时可见条数；超出丢掉最旧一条 |\n| `auto` | `boolean` | — | — |\n| `messages` | `MessageItem[]` | — | — |"
|
|
13951
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `teleport` | `boolean` | `true` | 是否 Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标 |\n| `transition` | `string \\| false` | `'message'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `placement` | `'top' \\| 'top-left' \\| 'top-right' \\| 'bottom' \\| 'bottom-left' \\| 'bottom-right'` | `'top'` | 宿主位置 |\n| `max` | `number` | — | 同时可见条数；超出丢掉最旧一条 |\n| `auto` | `boolean` | — | — |\n| `messages` | `MessageItem[]` | — | — |"
|
|
13833
13952
|
},
|
|
13834
13953
|
{
|
|
13835
13954
|
"id": "events",
|
|
@@ -13847,7 +13966,7 @@
|
|
|
13847
13966
|
"body": "<h4 id=\"MessageItem\">MessageItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MessageItem {\n id: string | number\n content: MRenderable\n severity?: MessageSeverity\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n icon?: boolean\n}\n```"
|
|
13848
13967
|
}
|
|
13849
13968
|
],
|
|
13850
|
-
"markdown": "---\ntitle: Message\ncategory: 05 / FEEDBACK\ndescription: 顶部居中浮层提示，支持 API 调用。\n---\n\n# Message\n\n从窗口顶部正中滑入的轻量提示（可通过 `placement` 改到六向位置），适合简短操作反馈。推荐用 `message` API；也可挂载 `<MMessage />` 作为自定义挂载点。\n\n与 [Toast](/components/Toast) 的分工：\n\n- **Message（默认）**：轻量单行反馈，默认顶部居中，无标题/详情。**大多数 CRUD / 保存 / 删除回执应使用此项。**\n- **Toast**：四角通知，带 `summary` / `detail`；仅在有补充说明或异步通知感时使用。\n- **`<MMessage>`
|
|
13969
|
+
"markdown": "---\ntitle: Message\ncategory: 05 / FEEDBACK\ndescription: 顶部居中浮层提示，支持 API 调用。\n---\n\n# Message\n\n从窗口顶部正中滑入的轻量提示（可通过 `placement` 改到六向位置），适合简短操作反馈。推荐用 `message` API；也可挂载 `<MMessage />` 作为自定义挂载点。\n\n与 [Toast](/components/Toast) 的分工：\n\n- **Message（默认）**：轻量单行反馈，默认顶部居中，无标题/详情。**大多数 CRUD / 保存 / 删除回执应使用此项。**\n- **Toast**：四角通知，带 `summary` / `detail`；仅在有补充说明或异步通知感时使用。\n- **`<MMessage>` 组件**：可选的 message 服务宿主（自定义 `appendTo` / `placement`）。它不是页面内嵌 Alert；表单常驻错误用字段 `errorMessage`，或 token 样式的 `role=\"alert\"`。\n\n> AI / 业务代码选型细则见 [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md)。\n\n**快速判断**：只有一句话 → `message.success('已保存')`；有标题 + 详情 → `toast.success({ summary, detail })`。\n\n## 引入\n\n```ts\nimport { message, MMessage, useMessage } from 'morya-ui'\n```\n\n## API\n\n首次调用时会自动挂载浮层容器，无需在模板里放置组件。\n\n```vue preview src=\"./demos/Api.zh.vue\"\n```\n\n## 自定义内容\n\n`content`（以及 Toast 的 `summary` / `detail`）支持字符串、`h()` 返回的 VNode、组件，或 `() => VNode` 工厂函数。\n\n```vue preview src=\"./demos/CustomContent.zh.vue\"\n```\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `message.success(content \\| options)` | 成功提示 |\n| `message.info(content \\| options)` | 信息提示 |\n| `message.warn(content \\| options)` | 警告提示（`warning` 同义） |\n| `message.error(content \\| options)` | 错误提示 |\n| `message.open(content \\| options)` | 自定义打开 |\n| `message.close(id?)` | 关闭指定 / 全部 |\n| `message.closeAll()` / `message.destroyAll()` | 关闭全部（二者等价） |\n| `message.config({ placement, max })` | 宿主位置与并发上限 |\n\n返回值：`{ id, close }`。\n\n### MessageOptions\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `content` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | 正文；也可把可渲染值直接当作入参 |\n| `severity` | `'success' \\| 'info' \\| 'warn' \\| 'error' \\| 'secondary' \\| 'contrast'` | `'info'` | 语义色 |\n| `closable` | `boolean` | `false` | 显示关闭按钮 |\n| `life` | `number` | `3000` | 自动关闭毫秒；`0` 不自动关闭 |\n| `icon` | `boolean` | `true` | 显示语义图标 |\n| `id` | `string \\| number` | 自动生成 | 唯一键 |\n\n## 可选宿主\n\n需要自定义 `appendTo` 时，可在应用根部放置：\n\n```vue\n<MMessage append-to=\"body\" />\n```\n\n存在手动宿主时，API 不会再自动挂载第二份。\n\n## Props（`MMessage`）\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `teleport` | `boolean` | `true` | 是否 Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标 |\n| `transition` | `string \\| false` | `'message'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `placement` | `'top' \\| 'top-left' \\| 'top-right' \\| 'bottom' \\| 'bottom-left' \\| 'bottom-right'` | `'top'` | 宿主位置 |\n| `max` | `number` | — | 同时可见条数；超出丢掉最旧一条 |\n| `auto` | `boolean` | — | — |\n| `messages` | `MessageItem[]` | — | — |\n\n## Events\n\n`<MMessage />` 宿主本身无 Vue 事件；请通过 `message.*` API 的返回值 `{ id, close }` 管理生命周期。\n\n## Slots\n\n无插槽；通过 `message.*` API 注入内容。\n\n## 类型\n\n<h4 id=\"MessageItem\">MessageItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface MessageItem {\n id: string | number\n content: MRenderable\n severity?: MessageSeverity\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n icon?: boolean\n}\n```\n"
|
|
13851
13970
|
},
|
|
13852
13971
|
"en-US": {
|
|
13853
13972
|
"title": "Message",
|
|
@@ -13856,7 +13975,7 @@
|
|
|
13856
13975
|
{
|
|
13857
13976
|
"id": "overview",
|
|
13858
13977
|
"title": "",
|
|
13859
|
-
"body": "# Message\n\nA lightweight notice that slides in from the top center by default (`placement` can move it). Prefer the `message` API; you can also mount `<MMessage />` as a custom host.\n\nVs [Toast](/components/Toast):\n\n- **Message (default)**: short single-line feedback; no title/detail. Use for most CRUD / save / delete confirmations.\n- **Toast**: corner notifications with `summary` / `detail`; use only when supplementary detail is needed.\n- **`<MMessage>` component**:
|
|
13978
|
+
"body": "# Message\n\nA lightweight notice that slides in from the top center by default (`placement` can move it). Prefer the `message` API; you can also mount `<MMessage />` as a custom host.\n\nVs [Toast](/components/Toast):\n\n- **Message (default)**: short single-line feedback; no title/detail. Use for most CRUD / save / delete confirmations.\n- **Toast**: corner notifications with `summary` / `detail`; use only when supplementary detail is needed.\n- **`<MMessage>` component**: optional host for the `message` service (custom `appendTo` / `placement`). It is not an inline alert; persistent form errors use field `errorMessage` or a token-styled `role=\"alert\"`.\n\n> Selection guide: [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md).\n\n**Rule of thumb**: one short sentence → `message.success('Saved')`; title + detail → `toast.success({ summary, detail })`."
|
|
13860
13979
|
},
|
|
13861
13980
|
{
|
|
13862
13981
|
"id": "import",
|
|
@@ -13886,7 +14005,7 @@
|
|
|
13886
14005
|
{
|
|
13887
14006
|
"id": "props-mmessage",
|
|
13888
14007
|
"title": "Props (`MMessage`)",
|
|
13889
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `teleport` | `boolean` | `true` | Whether to Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target |\n| `placement` | `'top' \\| 'top-left' \\| 'top-right' \\| 'bottom' \\| 'bottom-left' \\| 'bottom-right'` | `'top'` | Host placement |\n| `max` | `number` | — | Max visible items; oldest is dropped |"
|
|
14008
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `teleport` | `boolean` | `true` | Whether to Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target |\n| `transition` | `string \\| false` | `'message'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `placement` | `'top' \\| 'top-left' \\| 'top-right' \\| 'bottom' \\| 'bottom-left' \\| 'bottom-right'` | `'top'` | Host placement |\n| `max` | `number` | — | Max visible items; oldest is dropped |"
|
|
13890
14009
|
},
|
|
13891
14010
|
{
|
|
13892
14011
|
"id": "events",
|
|
@@ -13899,7 +14018,7 @@
|
|
|
13899
14018
|
"body": "No slots; content is injected through the `message.*` API."
|
|
13900
14019
|
}
|
|
13901
14020
|
],
|
|
13902
|
-
"markdown": "---\ntitle: Message\ncategory: 05 / FEEDBACK\ndescription: Top-center floating notice with an imperative API.\n---\n\n# Message\n\nA lightweight notice that slides in from the top center by default (`placement` can move it). Prefer the `message` API; you can also mount `<MMessage />` as a custom host.\n\nVs [Toast](/components/Toast):\n\n- **Message (default)**: short single-line feedback; no title/detail. Use for most CRUD / save / delete confirmations.\n- **Toast**: corner notifications with `summary` / `detail`; use only when supplementary detail is needed.\n- **`<MMessage>` component**:
|
|
14021
|
+
"markdown": "---\ntitle: Message\ncategory: 05 / FEEDBACK\ndescription: Top-center floating notice with an imperative API.\n---\n\n# Message\n\nA lightweight notice that slides in from the top center by default (`placement` can move it). Prefer the `message` API; you can also mount `<MMessage />` as a custom host.\n\nVs [Toast](/components/Toast):\n\n- **Message (default)**: short single-line feedback; no title/detail. Use for most CRUD / save / delete confirmations.\n- **Toast**: corner notifications with `summary` / `detail`; use only when supplementary detail is needed.\n- **`<MMessage>` component**: optional host for the `message` service (custom `appendTo` / `placement`). It is not an inline alert; persistent form errors use field `errorMessage` or a token-styled `role=\"alert\"`.\n\n> Selection guide: [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md).\n\n**Rule of thumb**: one short sentence → `message.success('Saved')`; title + detail → `toast.success({ summary, detail })`.\n\n## Import\n\n```ts\nimport { message, MMessage, useMessage } from 'morya-ui'\n```\n\n## API\n\nThe first call auto-mounts a floating host; no template component is required.\n\n```vue preview src=\"./demos/Api.en.vue\"\n```\n\n## Custom content\n\n`content` (and Toast `summary` / `detail`) accepts a string, a VNode from `h()`, a component, or a `() => VNode` factory.\n\n```vue preview src=\"./demos/CustomContent.en.vue\"\n```\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `message.success(content \\| options)` | Success |\n| `message.info(content \\| options)` | Info |\n| `message.warn(content \\| options)` | Warn (`warning` alias) |\n| `message.error(content \\| options)` | Error |\n| `message.open(content \\| options)` | Open with options |\n| `message.close(id?)` | Close one / all |\n| `message.closeAll()` / `message.destroyAll()` | Close all (aliases of each other) |\n| `message.config({ placement, max })` | Host placement and concurrency cap |\n\nReturns `{ id, close }`.\n\n### MessageOptions\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `content` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | Body; a renderable value may also be passed directly |\n| `severity` | `'success' \\| 'info' \\| 'warn' \\| 'error' \\| 'secondary' \\| 'contrast'` | `'info'` | Tone |\n| `closable` | `boolean` | `false` | Show close button |\n| `life` | `number` | `3000` | Auto-close ms; `0` keeps open |\n| `icon` | `boolean` | `true` | Show severity icon |\n| `id` | `string \\| number` | auto | Unique key |\n\n## Optional host\n\nFor a custom `appendTo`, place this at the app root:\n\n```vue\n<MMessage append-to=\"body\" />\n```\n\nWhen a manual host exists, the API will not mount a second one.\n\n## Props (`MMessage`)\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `teleport` | `boolean` | `true` | Whether to Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target |\n| `transition` | `string \\| false` | `'message'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `placement` | `'top' \\| 'top-left' \\| 'top-right' \\| 'bottom' \\| 'bottom-left' \\| 'bottom-right'` | `'top'` | Host placement |\n| `max` | `number` | — | Max visible items; oldest is dropped |\n\n## Events\n\nThe `<MMessage />` host emits no Vue events. Use the `{ id, close }` return value from `message.*` APIs to control lifetime.\n\n## Slots\n\nNo slots; content is injected through the `message.*` API.\n"
|
|
13903
14022
|
}
|
|
13904
14023
|
}
|
|
13905
14024
|
},
|
|
@@ -15131,6 +15250,12 @@
|
|
|
15131
15250
|
"default": "'body'",
|
|
15132
15251
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
15133
15252
|
},
|
|
15253
|
+
{
|
|
15254
|
+
"name": "transition",
|
|
15255
|
+
"type": "string | false",
|
|
15256
|
+
"default": "'popover'",
|
|
15257
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
15258
|
+
},
|
|
15134
15259
|
{
|
|
15135
15260
|
"name": "disabled",
|
|
15136
15261
|
"type": "boolean",
|
|
@@ -15278,7 +15403,7 @@
|
|
|
15278
15403
|
{
|
|
15279
15404
|
"id": "props",
|
|
15280
15405
|
"title": "Props",
|
|
15281
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | 相对触发元素的位置。 |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover/focus 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `disabled` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
15406
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | 相对触发元素的位置。 |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover/focus 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'popover'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `disabled` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
15282
15407
|
},
|
|
15283
15408
|
{
|
|
15284
15409
|
"id": "events",
|
|
@@ -15291,7 +15416,7 @@
|
|
|
15291
15416
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n| `content` | 浮层内容。 |"
|
|
15292
15417
|
}
|
|
15293
15418
|
],
|
|
15294
|
-
"markdown": "---\ntitle: Popover\ncategory: 05 / FEEDBACK\ndescription: 相对触发元素定位的浮层面板。支持 placement、Teleport；点击外部或 Esc 关闭。\n---\n\n# Popover\n\n相对触发元素显示的浮层，适合筛选、快捷操作或轻量表单。\n\n## 引入\n\n```ts\nimport { MButton, MPopover } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Placement\n\n```vue preview src=\"./demos/Placement.vue\"\n```\n\n## Hover\n\n`trigger` 默认 `manual`（仅 `v-model`）。设为 `hover` / `click` / `focus` 由组件自行开关。\n\n```vue preview src=\"./demos/Hover.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | 相对触发元素的位置。 |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover/focus 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `disabled` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n| `content` | 浮层内容。 |\n"
|
|
15419
|
+
"markdown": "---\ntitle: Popover\ncategory: 05 / FEEDBACK\ndescription: 相对触发元素定位的浮层面板。支持 placement、Teleport；点击外部或 Esc 关闭。\n---\n\n# Popover\n\n相对触发元素显示的浮层，适合筛选、快捷操作或轻量表单。\n\n## 引入\n\n```ts\nimport { MButton, MPopover } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Placement\n\n```vue preview src=\"./demos/Placement.vue\"\n```\n\n## Hover\n\n`trigger` 默认 `manual`（仅 `v-model`）。设为 `hover` / `click` / `focus` 由组件自行开关。\n\n```vue preview src=\"./demos/Hover.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | 相对触发元素的位置。 |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover/focus 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'popover'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `disabled` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n| `content` | 浮层内容。 |\n"
|
|
15295
15420
|
},
|
|
15296
15421
|
"en-US": {
|
|
15297
15422
|
"title": "Popover",
|
|
@@ -15325,7 +15450,7 @@
|
|
|
15325
15450
|
{
|
|
15326
15451
|
"id": "props",
|
|
15327
15452
|
"title": "Props",
|
|
15328
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | Position relative to the trigger. |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | How it opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover/focus delay in ms. |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
15453
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | Position relative to the trigger. |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | How it opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover/focus delay in ms. |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'popover'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
15329
15454
|
},
|
|
15330
15455
|
{
|
|
15331
15456
|
"id": "events",
|
|
@@ -15338,7 +15463,7 @@
|
|
|
15338
15463
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n| `content` | Overlay content. |"
|
|
15339
15464
|
}
|
|
15340
15465
|
],
|
|
15341
|
-
"markdown": "---\ntitle: Popover\ncategory: 05 / FEEDBACK\ndescription: Floating panel positioned relative to a trigger. Supports placement and Teleport. Closes on outside click or Esc.\n---\n\n# Popover\n\nOverlay positioned relative to a trigger. Use it for filters, quick actions, or lightweight forms.\n\n## Import\n\n```ts\nimport { MButton, MPopover } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Placement\n\n```vue preview src=\"./demos/Placement.vue\"\n```\n\n## Hover\n\n`trigger` defaults to `manual` (`v-model` only). Use `hover` / `click` / `focus` to let the component open itself.\n\n```vue preview src=\"./demos/Hover.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | Position relative to the trigger. |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | How it opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover/focus delay in ms. |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Emitted when visibility changes. |\n| `show` | — | Emitted when opened. |\n| `hide` | — | Emitted after close. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n| `content` | Overlay content. |\n"
|
|
15466
|
+
"markdown": "---\ntitle: Popover\ncategory: 05 / FEEDBACK\ndescription: Floating panel positioned relative to a trigger. Supports placement and Teleport. Closes on outside click or Esc.\n---\n\n# Popover\n\nOverlay positioned relative to a trigger. Use it for filters, quick actions, or lightweight forms.\n\n## Import\n\n```ts\nimport { MButton, MPopover } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Placement\n\n```vue preview src=\"./demos/Placement.vue\"\n```\n\n## Hover\n\n`trigger` defaults to `manual` (`v-model` only). Use `hover` / `click` / `focus` to let the component open itself.\n\n```vue preview src=\"./demos/Hover.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | Position relative to the trigger. |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | How it opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover/focus delay in ms. |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'popover'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Emitted when visibility changes. |\n| `show` | — | Emitted when opened. |\n| `hide` | — | Emitted after close. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n| `content` | Overlay content. |\n"
|
|
15342
15467
|
}
|
|
15343
15468
|
}
|
|
15344
15469
|
},
|
|
@@ -16796,7 +16921,7 @@
|
|
|
16796
16921
|
{
|
|
16797
16922
|
"id": "horizontal",
|
|
16798
16923
|
"title": "Horizontal",
|
|
16799
|
-
"body": "内容宽度超出容器时显示横向滚动条。`trigger=\"none\"` 与 `always` 都会常显滑块；默认 `trigger=\"hover\"` 在悬停时显示。\n\n`MLayout
|
|
16924
|
+
"body": "内容宽度超出容器时显示横向滚动条。`trigger=\"none\"` 与 `always` 都会常显滑块；默认 `trigger=\"hover\"` 在悬停时显示。\n\n`MLayout`、`MDialog`、`MConfirmDialog`、`MDrawer`、`MSplitter`、`MTable`、`MSelect`、`MTreeSelect`、`MDropdown`、`MContextMenu`、`MPopover`、`MConfirmPopup`、`MMenu`（popup）、`MMenubar`、`MTieredMenu`、`MTabs`、`MGallery`、`MTimeline`（horizontal）、`MTextarea`（autosize `maxRows`）、`MTerminal`、`MOrderList`、`MPickList`、`MTreeTable`、`MVirtualScroller` 等组件已内置本组件。\n\n```vue preview src=\"./demos/Horizontal.vue\"\n```"
|
|
16800
16925
|
},
|
|
16801
16926
|
{
|
|
16802
16927
|
"id": "always-native",
|
|
@@ -16834,7 +16959,7 @@
|
|
|
16834
16959
|
"body": "<h4 id=\"ScrollbarAriaOrientation\">ScrollbarAriaOrientation</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype ScrollbarAriaOrientation = 'horizontal' | 'vertical'\n```\n\n<h4 id=\"ScrollbarClassValue\">ScrollbarClassValue</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype ScrollbarClassValue = | string\n | string[]\n | Record<string, boolean>\n | Array<string | Record<string, boolean> | null | undefined | false>\n```"
|
|
16835
16960
|
}
|
|
16836
16961
|
],
|
|
16837
|
-
"markdown": "---\ntitle: Scrollbar\ncategory: 01 / BASIC\ndescription: 可换肤自定义滚动条，提供一致的滚动体验。\n---\n\n# Scrollbar\n\n用于替换浏览器原生滚动条，提供跨浏览器一致的可换肤滚动体验。\n\n## 引入\n\n```ts\nimport { MScrollbar } from 'morya-ui'\n```\n\n## 基础用法\n\n用 `height` 固定可视区域高度；不设时跟随父容器高度。\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Max height\n\n仅当内容超出 `max-height` 时出现滚动条。\n\n```vue preview src=\"./demos/MaxHeight.vue\"\n```\n\n## Horizontal\n\n内容宽度超出容器时显示横向滚动条。`trigger=\"none\"` 与 `always` 都会常显滑块；默认 `trigger=\"hover\"` 在悬停时显示。\n\n`MLayout
|
|
16962
|
+
"markdown": "---\ntitle: Scrollbar\ncategory: 01 / BASIC\ndescription: 可换肤自定义滚动条，提供一致的滚动体验。\n---\n\n# Scrollbar\n\n用于替换浏览器原生滚动条，提供跨浏览器一致的可换肤滚动体验。\n\n## 引入\n\n```ts\nimport { MScrollbar } from 'morya-ui'\n```\n\n## 基础用法\n\n用 `height` 固定可视区域高度；不设时跟随父容器高度。\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Max height\n\n仅当内容超出 `max-height` 时出现滚动条。\n\n```vue preview src=\"./demos/MaxHeight.vue\"\n```\n\n## Horizontal\n\n内容宽度超出容器时显示横向滚动条。`trigger=\"none\"` 与 `always` 都会常显滑块；默认 `trigger=\"hover\"` 在悬停时显示。\n\n`MLayout`、`MDialog`、`MConfirmDialog`、`MDrawer`、`MSplitter`、`MTable`、`MSelect`、`MTreeSelect`、`MDropdown`、`MContextMenu`、`MPopover`、`MConfirmPopup`、`MMenu`（popup）、`MMenubar`、`MTieredMenu`、`MTabs`、`MGallery`、`MTimeline`（horizontal）、`MTextarea`（autosize `maxRows`）、`MTerminal`、`MOrderList`、`MPickList`、`MTreeTable`、`MVirtualScroller` 等组件已内置本组件。\n\n```vue preview src=\"./demos/Horizontal.vue\"\n```\n\n## Always / Native\n\n`always` 常显自定义滑块；`native` 使用浏览器原生滚动条。\n\n```vue preview src=\"./demos/AlwaysNative.vue\"\n```\n\n## Manual scroll\n\n通过实例方法 `setScrollTop` / `setScrollLeft` / `scrollTo` / `update` 控制滚动。\n\n```vue preview src=\"./demos/ManualScroll.zh.vue\"\n```\n\n## Infinite scroll\n\n滚动到边缘时触发 `end-reached`，可用于无限加载。\n\n```vue preview src=\"./demos/InfiniteScroll.zh.vue\"\n```\n\n## API\n\n### Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `always` | `boolean` | — | — |\n| `ariaLabel` | `string` | — | — |\n| `ariaOrientation` | `ScrollbarAriaOrientation` | — | — |\n| `distance` | `number` | — | — |\n| `height` | `string \\| number` | — | — |\n| `id` | `string` | — | — |\n| `maxHeight` | `string \\| number` | — | — |\n| `minSize` | `number` | — | — |\n| `native` | `boolean` | — | — |\n| `noresize` | `boolean` | — | — |\n| `role` | `string` | — | — |\n| `tabindex` | `number \\| string` | — | — |\n| `tag` | `string` | — | — |\n| `trigger` | `'hover' \\| 'none'` | — | — |\n| `viewClass` | `ScrollbarClassValue` | — | — |\n| `viewStyle` | `StyleValue` | — | — |\n| `wrapClass` | `ScrollbarClassValue` | — | — |\n| `wrapStyle` | `StyleValue` | — | — |\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| height | `string \\| number` | — | 可视区域高度 |\n| maxHeight | `string \\| number` | — | 最大高度 |\n| fitContent | `boolean` | `false` | 随内容增高，配合根节点 CSS `max-height` 使用（下拉面板） |\n| native | `boolean` | `false` | 使用原生滚动条 |\n| wrapStyle / wrapClass | style / class | — | wrap 容器样式 |\n| viewStyle / viewClass | style / class | — | 内容区样式 |\n| noresize | `boolean` | `false` | 不监听尺寸变化 |\n| tag | `string` | `div` | 内容区标签 |\n| always | `boolean` | `false` | 始终显示滑块 |\n| trigger | `'hover' \\| 'none'` | `'hover'` | `none` 常显滑块；`always` 为 true 时仍常显 |\n| minSize | `number` | `20` | 滑块最小尺寸 |\n| id / role / ariaLabel / ariaOrientation | a11y | — | 内容区无障碍属性 |\n| tabindex | `number \\| string` | — | wrap 的 tabindex |\n| distance | `number` | `0` | 触发 `end-reached` 的边缘距离 |\n\n### Events\n\n| Name | Payload |\n| --- | --- |\n| scroll | `{ scrollTop, scrollLeft }` |\n| end-reached | `'top' \\| 'bottom' \\| 'left' \\| 'right'` |\n\n### Expose\n\n`wrapRef`、`update`、`scrollTo`、`setScrollTop`、`setScrollLeft`、`handleScroll`\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `scroll` | `{ scrollTop, scrollLeft }` | 滚动位置变化。 |\n| `end-reached` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | 滚动到边缘。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 可滚动内容。 |\n\n## 类型\n\n<h4 id=\"ScrollbarAriaOrientation\">ScrollbarAriaOrientation</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype ScrollbarAriaOrientation = 'horizontal' | 'vertical'\n```\n\n<h4 id=\"ScrollbarClassValue\">ScrollbarClassValue</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype ScrollbarClassValue = | string\n | string[]\n | Record<string, boolean>\n | Array<string | Record<string, boolean> | null | undefined | false>\n```\n"
|
|
16838
16963
|
},
|
|
16839
16964
|
"en-US": {
|
|
16840
16965
|
"title": "Scrollbar",
|
|
@@ -16863,7 +16988,7 @@
|
|
|
16863
16988
|
{
|
|
16864
16989
|
"id": "horizontal",
|
|
16865
16990
|
"title": "Horizontal",
|
|
16866
|
-
"body": "A horizontal scrollbar appears when content is wider than the container. `trigger=\"none\"` and `always` keep the thumb visible; the default `trigger=\"hover\"` shows it on hover.\n\n`MLayout`, `
|
|
16991
|
+
"body": "A horizontal scrollbar appears when content is wider than the container. `trigger=\"none\"` and `always` keep the thumb visible; the default `trigger=\"hover\"` shows it on hover.\n\n`MLayout`, `MDialog`, `MConfirmDialog`, `MDrawer`, `MSplitter`, `MTable`, `MSelect`, `MTreeSelect`, `MDropdown`, `MContextMenu`, `MPopover`, `MConfirmPopup`, `MMenu` (popup), `MMenubar`, `MTieredMenu`, `MTabs`, `MGallery`, `MTimeline` (horizontal), `MTextarea` (autosize `maxRows`), `MTerminal`, `MOrderList`, `MPickList`, `MTreeTable`, and `MVirtualScroller` integrate this component internally.\n\n```vue preview src=\"./demos/Horizontal.vue\"\n```"
|
|
16867
16992
|
},
|
|
16868
16993
|
{
|
|
16869
16994
|
"id": "always-native",
|
|
@@ -16896,7 +17021,7 @@
|
|
|
16896
17021
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Scrollable content. |"
|
|
16897
17022
|
}
|
|
16898
17023
|
],
|
|
16899
|
-
"markdown": "---\ntitle: Scrollbar\ncategory: 01 / BASIC\ndescription: Themeable custom scrollbar for a consistent scrolling experience.\n---\n\n# Scrollbar\n\nReplaces the native browser scrollbar with a themeable, cross-browser scrolling experience.\n\n## Import\n\n```ts\nimport { MScrollbar } from 'morya-ui'\n```\n\n## Basic\n\nUse `height` to fix the viewport height. If omitted, it follows the parent height.\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Max height\n\nThe scrollbar appears only when content exceeds `max-height`.\n\n```vue preview src=\"./demos/MaxHeight.vue\"\n```\n\n## Horizontal\n\nA horizontal scrollbar appears when content is wider than the container. `trigger=\"none\"` and `always` keep the thumb visible; the default `trigger=\"hover\"` shows it on hover.\n\n`MLayout`, `
|
|
17024
|
+
"markdown": "---\ntitle: Scrollbar\ncategory: 01 / BASIC\ndescription: Themeable custom scrollbar for a consistent scrolling experience.\n---\n\n# Scrollbar\n\nReplaces the native browser scrollbar with a themeable, cross-browser scrolling experience.\n\n## Import\n\n```ts\nimport { MScrollbar } from 'morya-ui'\n```\n\n## Basic\n\nUse `height` to fix the viewport height. If omitted, it follows the parent height.\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Max height\n\nThe scrollbar appears only when content exceeds `max-height`.\n\n```vue preview src=\"./demos/MaxHeight.vue\"\n```\n\n## Horizontal\n\nA horizontal scrollbar appears when content is wider than the container. `trigger=\"none\"` and `always` keep the thumb visible; the default `trigger=\"hover\"` shows it on hover.\n\n`MLayout`, `MDialog`, `MConfirmDialog`, `MDrawer`, `MSplitter`, `MTable`, `MSelect`, `MTreeSelect`, `MDropdown`, `MContextMenu`, `MPopover`, `MConfirmPopup`, `MMenu` (popup), `MMenubar`, `MTieredMenu`, `MTabs`, `MGallery`, `MTimeline` (horizontal), `MTextarea` (autosize `maxRows`), `MTerminal`, `MOrderList`, `MPickList`, `MTreeTable`, and `MVirtualScroller` integrate this component internally.\n\n```vue preview src=\"./demos/Horizontal.vue\"\n```\n\n## Always / Native\n\n`always` keeps the custom thumb visible. `native` uses the browser scrollbar.\n\n```vue preview src=\"./demos/AlwaysNative.vue\"\n```\n\n## Manual scroll\n\nControl scrolling with instance methods `setScrollTop` / `setScrollLeft` / `scrollTo` / `update`.\n\n```vue preview src=\"./demos/ManualScroll.en.vue\"\n```\n\n## Infinite scroll\n\nEmits `end-reached` at the edge. Use it for infinite loading.\n\n```vue preview src=\"./demos/InfiniteScroll.en.vue\"\n```\n\n## API\n\n### Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| height | `string \\| number` | — | Viewport height |\n| maxHeight | `string \\| number` | — | Maximum height |\n| fitContent | `boolean` | `false` | Grow with content; pair with CSS `max-height` on the root (dropdown panels) |\n| native | `boolean` | `false` | Use the native scrollbar |\n| wrapStyle / wrapClass | style / class | — | Wrap container styles |\n| viewStyle / viewClass | style / class | — | Content area styles |\n| noresize | `boolean` | `false` | Do not listen for size changes |\n| tag | `string` | `div` | Content area tag |\n| always | `boolean` | `false` | Always show the thumb |\n| trigger | `'hover' \\| 'none'` | `'hover'` | `none` keeps thumbs visible; `always` still wins |\n| minSize | `number` | `20` | Minimum thumb size |\n| id / role / ariaLabel / ariaOrientation | a11y | — | Accessible attributes for the content area |\n| tabindex | `number \\| string` | — | tabindex on the wrap |\n| distance | `number` | `0` | Edge distance that triggers `end-reached` |\n\n### Events\n\n| Name | Payload |\n| --- | --- |\n| scroll | `{ scrollTop, scrollLeft }` |\n| end-reached | `'top' \\| 'bottom' \\| 'left' \\| 'right'` |\n\n### Expose\n\n`wrapRef`, `update`, `scrollTo`, `setScrollTop`, `setScrollLeft`, `handleScroll`\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `scroll` | `{ scrollTop, scrollLeft }` | Scroll position change. |\n| `end-reached` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | Scroll boundary reached. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Scrollable content. |\n"
|
|
16900
17025
|
}
|
|
16901
17026
|
}
|
|
16902
17027
|
},
|
|
@@ -17225,6 +17350,12 @@
|
|
|
17225
17350
|
"default": "'bottom-start'",
|
|
17226
17351
|
"description": "菜单对齐。"
|
|
17227
17352
|
},
|
|
17353
|
+
{
|
|
17354
|
+
"name": "transition",
|
|
17355
|
+
"type": "string | false",
|
|
17356
|
+
"default": "'scale-fade'",
|
|
17357
|
+
"description": "菜单进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
17358
|
+
},
|
|
17228
17359
|
{
|
|
17229
17360
|
"name": "id",
|
|
17230
17361
|
"type": "string",
|
|
@@ -17248,6 +17379,12 @@
|
|
|
17248
17379
|
"type": "[FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }",
|
|
17249
17380
|
"default": "—",
|
|
17250
17381
|
"description": "DOM 分段透传（`root`、`control` 等）。"
|
|
17382
|
+
},
|
|
17383
|
+
{
|
|
17384
|
+
"name": "virtual",
|
|
17385
|
+
"type": "boolean",
|
|
17386
|
+
"default": "自动",
|
|
17387
|
+
"description": "`true` 强制虚拟列表；`false` 关闭；默认选项 ≥80 时开启。"
|
|
17251
17388
|
}
|
|
17252
17389
|
],
|
|
17253
17390
|
"events": [
|
|
@@ -17611,7 +17748,7 @@
|
|
|
17611
17748
|
{
|
|
17612
17749
|
"id": "props",
|
|
17613
17750
|
"title": "Props",
|
|
17614
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | 选中值；`multiple` 时为数组。 |\n| `options` | [SelectOption](/docs/types#SelectOption)`[]` | — | 选项列表。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `placeholder` | `string` | — | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `tag` | `boolean` | `false` | 允许用筛选词创建选项（需 `filter`）。 |\n| `remote` | `boolean` | `false` | 关闭本地筛选，输入时发出 `search`。 |\n| `loading` | `boolean` | `false` | 异步加载中。 |\n| `maxTagCount` | `number` | — | 多选时最多展示的标签数，其余折叠为 +N。 |\n| `showClear` | `boolean` | `false` | 有值时显示清除按钮。 |\n| `clearable` | `boolean` | `false` | `showClear` 的别名。 |\n| `emptyMessage` | `string` | — | 空选项文案；默认取 `locale.emptyOptions`。 |\n| `filter` | `boolean` | `false` | 打开菜单时显示筛选输入。 |\n| `teleport` | `boolean` | `true` | 菜单 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | 菜单对齐。 |\n| `id` | `string` | — | 控件 id。 |\n| `errorMessage` | `string` | — | 校验错误文案；与 `invalid` 同时生效时优先展示。 |\n| `name` | `string` | — | 辅助原生 name（存在隐藏 input 时）。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 分段透传（`root`、`control` 等）。 |"
|
|
17751
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | 选中值；`multiple` 时为数组。 |\n| `options` | [SelectOption](/docs/types#SelectOption)`[]` | — | 选项列表。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `placeholder` | `string` | — | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `tag` | `boolean` | `false` | 允许用筛选词创建选项（需 `filter`）。 |\n| `remote` | `boolean` | `false` | 关闭本地筛选，输入时发出 `search`。 |\n| `loading` | `boolean` | `false` | 异步加载中。 |\n| `maxTagCount` | `number` | — | 多选时最多展示的标签数，其余折叠为 +N。 |\n| `showClear` | `boolean` | `false` | 有值时显示清除按钮。 |\n| `clearable` | `boolean` | `false` | `showClear` 的别名。 |\n| `emptyMessage` | `string` | — | 空选项文案；默认取 `locale.emptyOptions`。 |\n| `filter` | `boolean` | `false` | 打开菜单时显示筛选输入。 |\n| `teleport` | `boolean` | `true` | 菜单 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | 菜单对齐。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 菜单进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `id` | `string` | — | 控件 id。 |\n| `errorMessage` | `string` | — | 校验错误文案；与 `invalid` 同时生效时优先展示。 |\n| `name` | `string` | — | 辅助原生 name（存在隐藏 input 时）。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 分段透传（`root`、`control` 等）。 |\n| `virtual` | `boolean` | 自动 | `true` 强制虚拟列表；`false` 关闭；默认选项 ≥80 时开启。 |"
|
|
17615
17752
|
},
|
|
17616
17753
|
{
|
|
17617
17754
|
"id": "events",
|
|
@@ -17629,7 +17766,7 @@
|
|
|
17629
17766
|
"body": "<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\n单选为 `string | number`；`multiple` 时为 `(string | number)[]`。详见 [API 类型](/docs/types#SelectModelValue)。"
|
|
17630
17767
|
}
|
|
17631
17768
|
],
|
|
17632
|
-
"markdown": "---\ntitle: Select\ncategory: 02 / FORM\ndescription: 表单选择器，支持多选标签、远程搜索、invalid、size、fluid、showClear、filter；选项禁用；与动作菜单 Dropdown 不同。\n---\n\n# Select\n\n表单选择器，用于从选项列表中选择一个或多个值。\n\n**与 Dropdown 的区别：** `MSelect` 是表单控件；动作菜单请使用 `MDropdown`。\n\n## 引入\n\n```ts\nimport { MSelect } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Clearable\n\n`showClear`（或别名 `clearable`）在已选值时显示清除按钮。\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Sizes\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Multiple\n\n`multiple` 时 `v-model` 为数组；已选项以可移除标签展示。菜单在选择后保持打开。`maxTagCount` 可折叠多余标签。\n\n```vue preview src=\"./demos/Multiple.vue\"\n```\n\n## Tag\n\n`tag` + `filter` 允许用当前筛选词创建选项（回车或点击「创建」行）。虚拟列表本批不做。\n\n```vue preview src=\"./demos/Tag.vue\"\n```\n\n## Remote\n\n`remote` 关闭本地筛选，输入时发出 `search`。用 `loading` 表示异步进行中。\n\n```vue preview src=\"./demos/Remote.vue\"\n```\n\n## Empty\n\n无选项或筛选无结果时展示空态文案；可用 `emptyMessage` 覆盖，否则读取 ConfigProvider `locale.emptyMessage`。\n\n```vue preview src=\"./demos/Empty.zh.vue\"\n```\n\n## Teleport\n\n菜单默认 Teleport 到 `body`（`teleport` + `appendTo`）。设 `append-to=\"self\"` 或 `teleport={false}` 可就地渲染。\n\n```vue preview src=\"./demos/Teleport.vue\"\n```\n\n## 样式与 attrs\n\n除控件 **事件** 外，fallthrough attrs 落在外层 field 根；`@keydown` 等由内部 combobox 接收。`placeholder`、`name` 优先用 props。下拉位置用 `placement` / `appendTo`；改面板 DOM 用 `pt`（键名见 Props）。详见 [样式与 attrs](/docs/attrs)。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | 选中值；`multiple` 时为数组。 |\n| `options` | [SelectOption](/docs/types#SelectOption)`[]` | — | 选项列表。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `placeholder` | `string` | — | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `tag` | `boolean` | `false` | 允许用筛选词创建选项（需 `filter`）。 |\n| `remote` | `boolean` | `false` | 关闭本地筛选，输入时发出 `search`。 |\n| `loading` | `boolean` | `false` | 异步加载中。 |\n| `maxTagCount` | `number` | — | 多选时最多展示的标签数，其余折叠为 +N。 |\n| `showClear` | `boolean` | `false` | 有值时显示清除按钮。 |\n| `clearable` | `boolean` | `false` | `showClear` 的别名。 |\n| `emptyMessage` | `string` | — | 空选项文案；默认取 `locale.emptyOptions`。 |\n| `filter` | `boolean` | `false` | 打开菜单时显示筛选输入。 |\n| `teleport` | `boolean` | `true` | 菜单 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | 菜单对齐。 |\n| `id` | `string` | — | 控件 id。 |\n| `errorMessage` | `string` | — | 校验错误文案；与 `invalid` 同时生效时优先展示。 |\n| `name` | `string` | — | 辅助原生 name（存在隐藏 input 时）。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 分段透传（`root`、`control` 等）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | [SelectModelValue](/docs/types#SelectModelValue) | 值变化。 |\n| `change` | [SelectModelValue](/docs/types#SelectModelValue) | 选择完成或清除。 |\n| `clear` | — | 点击清除时触发。 |\n| `show` | — | 菜单打开。 |\n| `hide` | — | 菜单关闭。 |\n| `search` | `string` | 筛选词变化（`filter` / `remote`）。 |\n| `create` | [SelectOption](/docs/types#SelectOption) `{ label, value, disabled? }` | `tag` 模式下创建了新选项。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `value` | 自定义触发器展示（单选）。 |\n| `option` | 选项 `{ option }`。 |\n\n## 类型\n\n<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\n单选为 `string | number`；`multiple` 时为 `(string | number)[]`。详见 [API 类型](/docs/types#SelectModelValue)。\n"
|
|
17769
|
+
"markdown": "---\ntitle: Select\ncategory: 02 / FORM\ndescription: 表单选择器，支持多选标签、远程搜索、invalid、size、fluid、showClear、filter；选项禁用；与动作菜单 Dropdown 不同。\n---\n\n# Select\n\n表单选择器，用于从选项列表中选择一个或多个值。\n\n**与 Dropdown 的区别：** `MSelect` 是表单控件；动作菜单请使用 `MDropdown`。\n\n## 引入\n\n```ts\nimport { MSelect } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Clearable\n\n`showClear`（或别名 `clearable`）在已选值时显示清除按钮。\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Sizes\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Multiple\n\n`multiple` 时 `v-model` 为数组；已选项以可移除标签展示。菜单在选择后保持打开。`maxTagCount` 可折叠多余标签。\n\n```vue preview src=\"./demos/Multiple.vue\"\n```\n\n## Tag\n\n`tag` + `filter` 允许用当前筛选词创建选项（回车或点击「创建」行）。虚拟列表本批不做。\n\n```vue preview src=\"./demos/Tag.vue\"\n```\n\n## Remote\n\n`remote` 关闭本地筛选，输入时发出 `search`。用 `loading` 表示异步进行中。\n\n```vue preview src=\"./demos/Remote.vue\"\n```\n\n## Empty\n\n无选项或筛选无结果时展示空态文案；可用 `emptyMessage` 覆盖，否则读取 ConfigProvider `locale.emptyMessage`。\n\n```vue preview src=\"./demos/Empty.zh.vue\"\n```\n\n## Teleport\n\n菜单默认 Teleport 到 `body`（`teleport` + `appendTo`）。设 `append-to=\"self\"` 或 `teleport={false}` 可就地渲染。\n\n```vue preview src=\"./demos/Teleport.vue\"\n```\n\n## 样式与 attrs\n\n除控件 **事件** 外，fallthrough attrs 落在外层 field 根；`@keydown` 等由内部 combobox 接收。`placeholder`、`name` 优先用 props。下拉位置用 `placement` / `appendTo`；改面板 DOM 用 `pt`（键名见 Props）。详见 [样式与 attrs](/docs/attrs)。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | 选中值；`multiple` 时为数组。 |\n| `options` | [SelectOption](/docs/types#SelectOption)`[]` | — | 选项列表。 |\n| `label` | `string` | — | 字段标签。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `placeholder` | `string` | — | 占位文案。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `required` | `boolean` | `false` | 表单必填辅助。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `tag` | `boolean` | `false` | 允许用筛选词创建选项（需 `filter`）。 |\n| `remote` | `boolean` | `false` | 关闭本地筛选，输入时发出 `search`。 |\n| `loading` | `boolean` | `false` | 异步加载中。 |\n| `maxTagCount` | `number` | — | 多选时最多展示的标签数，其余折叠为 +N。 |\n| `showClear` | `boolean` | `false` | 有值时显示清除按钮。 |\n| `clearable` | `boolean` | `false` | `showClear` 的别名。 |\n| `emptyMessage` | `string` | — | 空选项文案；默认取 `locale.emptyOptions`。 |\n| `filter` | `boolean` | `false` | 打开菜单时显示筛选输入。 |\n| `teleport` | `boolean` | `true` | 菜单 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 就地渲染。 |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | 菜单对齐。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 菜单进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `id` | `string` | — | 控件 id。 |\n| `errorMessage` | `string` | — | 校验错误文案；与 `invalid` 同时生效时优先展示。 |\n| `name` | `string` | — | 辅助原生 name（存在隐藏 input 时）。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 分段透传（`root`、`control` 等）。 |\n| `virtual` | `boolean` | 自动 | `true` 强制虚拟列表；`false` 关闭；默认选项 ≥80 时开启。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | [SelectModelValue](/docs/types#SelectModelValue) | 值变化。 |\n| `change` | [SelectModelValue](/docs/types#SelectModelValue) | 选择完成或清除。 |\n| `clear` | — | 点击清除时触发。 |\n| `show` | — | 菜单打开。 |\n| `hide` | — | 菜单关闭。 |\n| `search` | `string` | 筛选词变化（`filter` / `remote`）。 |\n| `create` | [SelectOption](/docs/types#SelectOption) `{ label, value, disabled? }` | `tag` 模式下创建了新选项。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `value` | 自定义触发器展示（单选）。 |\n| `option` | 选项 `{ option }`。 |\n\n## 类型\n\n<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\n单选为 `string | number`；`multiple` 时为 `(string | number)[]`。详见 [API 类型](/docs/types#SelectModelValue)。\n"
|
|
17633
17770
|
},
|
|
17634
17771
|
"en-US": {
|
|
17635
17772
|
"title": "Select",
|
|
@@ -17708,7 +17845,7 @@
|
|
|
17708
17845
|
{
|
|
17709
17846
|
"id": "props",
|
|
17710
17847
|
"title": "Props",
|
|
17711
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | Selected value; an array when `multiple`. |\n| `options` | [SelectOption](/docs/types#SelectOption)`[]` | — | Options list. |\n| `label` | `string` | — | Field label. |\n| `helpText` | `string` | — | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `placeholder` | `string` | — | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `fluid` | `boolean` | `false` | Stretch to the container width. |\n| `multiple` | `boolean` | `false` | Allow multiple values. |\n| `tag` | `boolean` | `false` | Create an option from the filter query (requires `filter`). |\n| `remote` | `boolean` | `false` | Skip local filtering and emit `search`. |\n| `loading` | `boolean` | `false` | Async loading state. |\n| `maxTagCount` | `number` | — | Max visible tags in multiple mode; extras collapse to +N. |\n| `showClear` | `boolean` | `false` | Show a clear button when a value is selected. |\n| `clearable` | `boolean` | `false` | Alias for `showClear`. |\n| `emptyMessage` | `string` | — | Empty-options text. Defaults to ConfigProvider `locale.emptyOptions`. |\n| `filter` | `boolean` | `false` | Show a filter input when the menu is open. |\n| `teleport` | `boolean` | `true` | Menu Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target. `'self'` renders in place. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Menu alignment. |\n| `id` | `string` | — | Control id. |\n| `errorMessage` | `string` | — | Validation error copy. |\n| `name` | `string` | — | Native name when a hidden input is present. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through (`root`, `control`, …). |"
|
|
17848
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | Selected value; an array when `multiple`. |\n| `options` | [SelectOption](/docs/types#SelectOption)`[]` | — | Options list. |\n| `label` | `string` | — | Field label. |\n| `helpText` | `string` | — | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `placeholder` | `string` | — | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `fluid` | `boolean` | `false` | Stretch to the container width. |\n| `multiple` | `boolean` | `false` | Allow multiple values. |\n| `tag` | `boolean` | `false` | Create an option from the filter query (requires `filter`). |\n| `remote` | `boolean` | `false` | Skip local filtering and emit `search`. |\n| `loading` | `boolean` | `false` | Async loading state. |\n| `maxTagCount` | `number` | — | Max visible tags in multiple mode; extras collapse to +N. |\n| `showClear` | `boolean` | `false` | Show a clear button when a value is selected. |\n| `clearable` | `boolean` | `false` | Alias for `showClear`. |\n| `emptyMessage` | `string` | — | Empty-options text. Defaults to ConfigProvider `locale.emptyOptions`. |\n| `filter` | `boolean` | `false` | Show a filter input when the menu is open. |\n| `teleport` | `boolean` | `true` | Menu Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target. `'self'` renders in place. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Menu alignment. |\n| `transition` | `string \\| false` | `'scale-fade'` | Menu enter/exit preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `virtual` | `boolean` | auto | `true` forces virtualization; `false` disables; auto-on at 80+ options. |\n| `id` | `string` | — | Control id. |\n| `errorMessage` | `string` | — | Validation error copy. |\n| `name` | `string` | — | Native name when a hidden input is present. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through (`root`, `control`, …). |"
|
|
17712
17849
|
},
|
|
17713
17850
|
{
|
|
17714
17851
|
"id": "events",
|
|
@@ -17726,7 +17863,7 @@
|
|
|
17726
17863
|
"body": "<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\nScalar when single-select; array when `multiple`. See [API types](/docs/types#SelectModelValue)."
|
|
17727
17864
|
}
|
|
17728
17865
|
],
|
|
17729
|
-
"markdown": "---\ntitle: Select\ncategory: 02 / FORM\ndescription: Form select. Supports multiple tags, remote search, invalid, size, fluid, showClear, and filter. Distinct from the Dropdown action menu.\n---\n\n# Select\n\nForm select for choosing one or more values from a list of options.\n\n**Unlike Dropdown:** `MSelect` is a form control. Use `MDropdown` for action menus.\n\n## Import\n\n```ts\nimport { MSelect } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Clearable\n\n`showClear` (alias: `clearable`) shows a clear button when a value is selected.\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Sizes\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Multiple\n\nWith `multiple`, `v-model` is an array. Selected values render as removable tags and the menu stays open after a pick. `maxTagCount` collapses extra tags.\n\n```vue preview src=\"./demos/Multiple.vue\"\n```\n\n## Tag\n\n`tag` + `filter` lets the user create an option from the current query (Enter or the create row). Virtual lists are deferred.\n\n```vue preview src=\"./demos/Tag.vue\"\n```\n\n## Remote\n\n`remote` skips local filtering and emits `search` as the query changes. Use `loading` for in-flight requests.\n\n```vue preview src=\"./demos/Remote.vue\"\n```\n\n## Empty\n\nShows empty-state text when there are no options or the filter has no matches. Override with `emptyMessage`, otherwise it reads ConfigProvider `locale.emptyMessage`.\n\n```vue preview src=\"./demos/Empty.en.vue\"\n```\n\n## Teleport\n\nThe menu Teleports to `body` by default (`teleport` + `appendTo`). Set `append-to=\"self\"` or `teleport={false}` to render in place.\n\n```vue preview src=\"./demos/Teleport.vue\"\n```\n\n## Styling & attrs\n\nFallthrough attrs except control **events** bind to the field wrapper; `@keydown` and similar listeners attach to the combobox. Prefer `placeholder` / `name` as props. Use `placement` / `appendTo` for the panel, or `pt` for inner DOM. See [Styling & attrs](/docs/attrs).\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | Selected value; an array when `multiple`. |\n| `options` | [SelectOption](/docs/types#SelectOption)`[]` | — | Options list. |\n| `label` | `string` | — | Field label. |\n| `helpText` | `string` | — | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `placeholder` | `string` | — | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `fluid` | `boolean` | `false` | Stretch to the container width. |\n| `multiple` | `boolean` | `false` | Allow multiple values. |\n| `tag` | `boolean` | `false` | Create an option from the filter query (requires `filter`). |\n| `remote` | `boolean` | `false` | Skip local filtering and emit `search`. |\n| `loading` | `boolean` | `false` | Async loading state. |\n| `maxTagCount` | `number` | — | Max visible tags in multiple mode; extras collapse to +N. |\n| `showClear` | `boolean` | `false` | Show a clear button when a value is selected. |\n| `clearable` | `boolean` | `false` | Alias for `showClear`. |\n| `emptyMessage` | `string` | — | Empty-options text. Defaults to ConfigProvider `locale.emptyOptions`. |\n| `filter` | `boolean` | `false` | Show a filter input when the menu is open. |\n| `teleport` | `boolean` | `true` | Menu Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target. `'self'` renders in place. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Menu alignment. |\n| `id` | `string` | — | Control id. |\n| `errorMessage` | `string` | — | Validation error copy. |\n| `name` | `string` | — | Native name when a hidden input is present. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through (`root`, `control`, …). |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted when the value changes. |\n| `change` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted after a selection or clear. |\n| `clear` | — | Emitted when clear is clicked. |\n| `show` | — | Emitted when the menu opens. |\n| `hide` | — | Emitted when the menu closes. |\n| `search` | `string` | Emitted as the filter query changes (`filter` / `remote`). |\n| `create` | [SelectOption](/docs/types#SelectOption) `{ label, value, disabled? }` | Emitted when `tag` creates a new option. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `value` | Custom single-select trigger display. |\n| `option` | Option `{ option }`. |\n\n## Types\n\n<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\nScalar when single-select; array when `multiple`. See [API types](/docs/types#SelectModelValue).\n"
|
|
17866
|
+
"markdown": "---\ntitle: Select\ncategory: 02 / FORM\ndescription: Form select. Supports multiple tags, remote search, invalid, size, fluid, showClear, and filter. Distinct from the Dropdown action menu.\n---\n\n# Select\n\nForm select for choosing one or more values from a list of options.\n\n**Unlike Dropdown:** `MSelect` is a form control. Use `MDropdown` for action menus.\n\n## Import\n\n```ts\nimport { MSelect } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Clearable\n\n`showClear` (alias: `clearable`) shows a clear button when a value is selected.\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Sizes\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Multiple\n\nWith `multiple`, `v-model` is an array. Selected values render as removable tags and the menu stays open after a pick. `maxTagCount` collapses extra tags.\n\n```vue preview src=\"./demos/Multiple.vue\"\n```\n\n## Tag\n\n`tag` + `filter` lets the user create an option from the current query (Enter or the create row). Virtual lists are deferred.\n\n```vue preview src=\"./demos/Tag.vue\"\n```\n\n## Remote\n\n`remote` skips local filtering and emits `search` as the query changes. Use `loading` for in-flight requests.\n\n```vue preview src=\"./demos/Remote.vue\"\n```\n\n## Empty\n\nShows empty-state text when there are no options or the filter has no matches. Override with `emptyMessage`, otherwise it reads ConfigProvider `locale.emptyMessage`.\n\n```vue preview src=\"./demos/Empty.en.vue\"\n```\n\n## Teleport\n\nThe menu Teleports to `body` by default (`teleport` + `appendTo`). Set `append-to=\"self\"` or `teleport={false}` to render in place.\n\n```vue preview src=\"./demos/Teleport.vue\"\n```\n\n## Styling & attrs\n\nFallthrough attrs except control **events** bind to the field wrapper; `@keydown` and similar listeners attach to the combobox. Prefer `placeholder` / `name` as props. Use `placement` / `appendTo` for the panel, or `pt` for inner DOM. See [Styling & attrs](/docs/attrs).\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | Selected value; an array when `multiple`. |\n| `options` | [SelectOption](/docs/types#SelectOption)`[]` | — | Options list. |\n| `label` | `string` | — | Field label. |\n| `helpText` | `string` | — | Help text. |\n| `invalid` | `boolean` | `false` | Invalid state. |\n| `placeholder` | `string` | — | Placeholder text. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `required` | `boolean` | `false` | Form required hint. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `fluid` | `boolean` | `false` | Stretch to the container width. |\n| `multiple` | `boolean` | `false` | Allow multiple values. |\n| `tag` | `boolean` | `false` | Create an option from the filter query (requires `filter`). |\n| `remote` | `boolean` | `false` | Skip local filtering and emit `search`. |\n| `loading` | `boolean` | `false` | Async loading state. |\n| `maxTagCount` | `number` | — | Max visible tags in multiple mode; extras collapse to +N. |\n| `showClear` | `boolean` | `false` | Show a clear button when a value is selected. |\n| `clearable` | `boolean` | `false` | Alias for `showClear`. |\n| `emptyMessage` | `string` | — | Empty-options text. Defaults to ConfigProvider `locale.emptyOptions`. |\n| `filter` | `boolean` | `false` | Show a filter input when the menu is open. |\n| `teleport` | `boolean` | `true` | Menu Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target. `'self'` renders in place. |\n| `placement` | `'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Menu alignment. |\n| `transition` | `string \\| false` | `'scale-fade'` | Menu enter/exit preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `virtual` | `boolean` | auto | `true` forces virtualization; `false` disables; auto-on at 80+ options. |\n| `id` | `string` | — | Control id. |\n| `errorMessage` | `string` | — | Validation error copy. |\n| `name` | `string` | — | Native name when a hidden input is present. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through (`root`, `control`, …). |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted when the value changes. |\n| `change` | [SelectModelValue](/docs/types#SelectModelValue) | Emitted after a selection or clear. |\n| `clear` | — | Emitted when clear is clicked. |\n| `show` | — | Emitted when the menu opens. |\n| `hide` | — | Emitted when the menu closes. |\n| `search` | `string` | Emitted as the filter query changes (`filter` / `remote`). |\n| `create` | [SelectOption](/docs/types#SelectOption) `{ label, value, disabled? }` | Emitted when `tag` creates a new option. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `value` | Custom single-select trigger display. |\n| `option` | Option `{ option }`. |\n\n## Types\n\n<h4 id=\"SelectOption\">SelectOption</h4>\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\nScalar when single-select; array when `multiple`. See [API types](/docs/types#SelectModelValue).\n"
|
|
17730
17867
|
}
|
|
17731
17868
|
}
|
|
17732
17869
|
},
|
|
@@ -18994,6 +19131,12 @@
|
|
|
18994
19131
|
"default": "'body'",
|
|
18995
19132
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
18996
19133
|
},
|
|
19134
|
+
{
|
|
19135
|
+
"name": "transition",
|
|
19136
|
+
"type": "string | false",
|
|
19137
|
+
"default": "'scale-fade'",
|
|
19138
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
19139
|
+
},
|
|
18997
19140
|
{
|
|
18998
19141
|
"name": "pt",
|
|
18999
19142
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -19106,7 +19249,7 @@
|
|
|
19106
19249
|
{
|
|
19107
19250
|
"id": "props",
|
|
19108
19251
|
"title": "Props",
|
|
19109
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `SpeedDialItem[]` | `[]` | 操作项。 |\n| `direction` | `'up' \\| 'down' \\| 'left' \\| 'right'` | `'up'` | 展开方向。 |\n| `modelValue` | `boolean` | `false` | 是否展开。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `ariaLabel` | `string` | `'快捷操作'` | 主按钮无障碍标签。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
19252
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `SpeedDialItem[]` | `[]` | 操作项。 |\n| `direction` | `'up' \\| 'down' \\| 'left' \\| 'right'` | `'up'` | 展开方向。 |\n| `modelValue` | `boolean` | `false` | 是否展开。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `ariaLabel` | `string` | `'快捷操作'` | 主按钮无障碍标签。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
19110
19253
|
},
|
|
19111
19254
|
{
|
|
19112
19255
|
"id": "events",
|
|
@@ -19124,7 +19267,7 @@
|
|
|
19124
19267
|
"body": "<h4 id=\"SpeedDialItem\">SpeedDialItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface SpeedDialItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```"
|
|
19125
19268
|
}
|
|
19126
19269
|
],
|
|
19127
|
-
"markdown": "---\ntitle: SpeedDial\ncategory: 04 / NAVIGATION\ndescription: 悬浮快捷操作按钮组。\n---\n\n# SpeedDial\n\n主按钮展开一组方向性快捷操作。\n\n## 引入\n\n```ts\nimport { MSpeedDial } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `SpeedDialItem[]` | `[]` | 操作项。 |\n| `direction` | `'up' \\| 'down' \\| 'left' \\| 'right'` | `'up'` | 展开方向。 |\n| `modelValue` | `boolean` | `false` | 是否展开。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `ariaLabel` | `string` | `'快捷操作'` | 主按钮无障碍标签。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 展开态变化。 |\n| `item-click` | — | — |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `button` | 自定义主按钮。 |\n| `item` | 动作项 `{ item }`。 |\n| `icon` | 自定义 `icon` 内容。 |\n\n## 类型\n\n<h4 id=\"SpeedDialItem\">SpeedDialItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface SpeedDialItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```\n"
|
|
19270
|
+
"markdown": "---\ntitle: SpeedDial\ncategory: 04 / NAVIGATION\ndescription: 悬浮快捷操作按钮组。\n---\n\n# SpeedDial\n\n主按钮展开一组方向性快捷操作。\n\n## 引入\n\n```ts\nimport { MSpeedDial } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `SpeedDialItem[]` | `[]` | 操作项。 |\n| `direction` | `'up' \\| 'down' \\| 'left' \\| 'right'` | `'up'` | 展开方向。 |\n| `modelValue` | `boolean` | `false` | 是否展开。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `ariaLabel` | `string` | `'快捷操作'` | 主按钮无障碍标签。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 展开态变化。 |\n| `item-click` | — | — |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `button` | 自定义主按钮。 |\n| `item` | 动作项 `{ item }`。 |\n| `icon` | 自定义 `icon` 内容。 |\n\n## 类型\n\n<h4 id=\"SpeedDialItem\">SpeedDialItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface SpeedDialItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```\n"
|
|
19128
19271
|
},
|
|
19129
19272
|
"en-US": {
|
|
19130
19273
|
"title": "SpeedDial",
|
|
@@ -19148,7 +19291,7 @@
|
|
|
19148
19291
|
{
|
|
19149
19292
|
"id": "props",
|
|
19150
19293
|
"title": "Props",
|
|
19151
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `SpeedDialItem[]` | `[]` | Action items. |\n| `direction` | `'up' \\| 'down' \\| 'left' \\| 'right'` | `'up'` | Expand direction. |\n| `modelValue` | `boolean` | `false` | Whether it is expanded. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `ariaLabel` | `string` | locale `speedDial` | Accessible label for the main button. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
19294
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `SpeedDialItem[]` | `[]` | Action items. |\n| `direction` | `'up' \\| 'down' \\| 'left' \\| 'right'` | `'up'` | Expand direction. |\n| `modelValue` | `boolean` | `false` | Whether it is expanded. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `ariaLabel` | `string` | locale `speedDial` | Accessible label for the main button. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
19152
19295
|
},
|
|
19153
19296
|
{
|
|
19154
19297
|
"id": "events",
|
|
@@ -19166,7 +19309,7 @@
|
|
|
19166
19309
|
"body": "<h4 id=\"SpeedDialItem\">SpeedDialItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface SpeedDialItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```"
|
|
19167
19310
|
}
|
|
19168
19311
|
],
|
|
19169
|
-
"markdown": "---\ntitle: SpeedDial\ncategory: 04 / NAVIGATION\ndescription: Floating shortcut action button group.\n---\n\n# SpeedDial\n\nA main button that expands a set of directional shortcut actions.\n\n## Import\n\n```ts\nimport { MSpeedDial } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `SpeedDialItem[]` | `[]` | Action items. |\n| `direction` | `'up' \\| 'down' \\| 'left' \\| 'right'` | `'up'` | Expand direction. |\n| `modelValue` | `boolean` | `false` | Whether it is expanded. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `ariaLabel` | `string` | locale `speedDial` | Accessible label for the main button. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Emitted when the expanded state changes. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `button` | Custom main button. |\n| `item` | Action `{ item }`. |\n\n## Types\n\n<h4 id=\"SpeedDialItem\">SpeedDialItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface SpeedDialItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```\n"
|
|
19312
|
+
"markdown": "---\ntitle: SpeedDial\ncategory: 04 / NAVIGATION\ndescription: Floating shortcut action button group.\n---\n\n# SpeedDial\n\nA main button that expands a set of directional shortcut actions.\n\n## Import\n\n```ts\nimport { MSpeedDial } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `SpeedDialItem[]` | `[]` | Action items. |\n| `direction` | `'up' \\| 'down' \\| 'left' \\| 'right'` | `'up'` | Expand direction. |\n| `modelValue` | `boolean` | `false` | Whether it is expanded. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `ariaLabel` | `string` | locale `speedDial` | Accessible label for the main button. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Emitted when the expanded state changes. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `button` | Custom main button. |\n| `item` | Action `{ item }`. |\n\n## Types\n\n<h4 id=\"SpeedDialItem\">SpeedDialItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface SpeedDialItem extends Omit<MenuNodeBase, 'label'> {\n label: string\n}\n```\n"
|
|
19170
19313
|
}
|
|
19171
19314
|
}
|
|
19172
19315
|
},
|
|
@@ -19233,6 +19376,12 @@
|
|
|
19233
19376
|
"default": "'body'",
|
|
19234
19377
|
"description": "挂载目标；`'self'` 表示就地渲染。"
|
|
19235
19378
|
},
|
|
19379
|
+
{
|
|
19380
|
+
"name": "transition",
|
|
19381
|
+
"type": "string | false",
|
|
19382
|
+
"default": "'scale-fade'",
|
|
19383
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
19384
|
+
},
|
|
19236
19385
|
{
|
|
19237
19386
|
"name": "pt",
|
|
19238
19387
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -19319,7 +19468,7 @@
|
|
|
19319
19468
|
{
|
|
19320
19469
|
"id": "props",
|
|
19321
19470
|
"title": "Props",
|
|
19322
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 主按钮文案。 |\n| `icon` | `string` | — | 可选图标字符。 |\n| `model` | `{ label, command?, disabled? }[]` | `[]` | 菜单项。 |\n| `severity` / `outlined` / `size` | — | — | 视觉变体。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `teleport` | `boolean` | `true` | 是否将菜单 Teleport 出去。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 表示就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
19471
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 主按钮文案。 |\n| `icon` | `string` | — | 可选图标字符。 |\n| `model` | `{ label, command?, disabled? }[]` | `[]` | 菜单项。 |\n| `severity` / `outlined` / `size` | — | — | 视觉变体。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `teleport` | `boolean` | `true` | 是否将菜单 Teleport 出去。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 表示就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
19323
19472
|
},
|
|
19324
19473
|
{
|
|
19325
19474
|
"id": "events",
|
|
@@ -19332,7 +19481,7 @@
|
|
|
19332
19481
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 主按钮内容。 |"
|
|
19333
19482
|
}
|
|
19334
19483
|
],
|
|
19335
|
-
"markdown": "---\ntitle: SplitButton\ncategory: 01 / BASIC\ndescription: 主操作按钮附带下拉菜单项。\n---\n\n# SplitButton\n\n左侧主按钮触发 `click`，右侧展开菜单项触发 `command`。\n\n## 引入\n\n```ts\nimport { MSplitButton } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 主按钮文案。 |\n| `icon` | `string` | — | 可选图标字符。 |\n| `model` | `{ label, command?, disabled? }[]` | `[]` | 菜单项。 |\n| `severity` / `outlined` / `size` | — | — | 视觉变体。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `teleport` | `boolean` | `true` | 是否将菜单 Teleport 出去。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 表示就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `click` | `MouseEvent` | 主按钮点击。 |\n| `command` | `item` | 菜单项激活。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 主按钮内容。 |\n"
|
|
19484
|
+
"markdown": "---\ntitle: SplitButton\ncategory: 01 / BASIC\ndescription: 主操作按钮附带下拉菜单项。\n---\n\n# SplitButton\n\n左侧主按钮触发 `click`，右侧展开菜单项触发 `command`。\n\n## 引入\n\n```ts\nimport { MSplitButton } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 主按钮文案。 |\n| `icon` | `string` | — | 可选图标字符。 |\n| `model` | `{ label, command?, disabled? }[]` | `[]` | 菜单项。 |\n| `severity` / `outlined` / `size` | — | — | 视觉变体。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `teleport` | `boolean` | `true` | 是否将菜单 Teleport 出去。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | 挂载目标；`'self'` 表示就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `click` | `MouseEvent` | 主按钮点击。 |\n| `command` | `item` | 菜单项激活。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 主按钮内容。 |\n"
|
|
19336
19485
|
},
|
|
19337
19486
|
"en-US": {
|
|
19338
19487
|
"title": "SplitButton",
|
|
@@ -19356,7 +19505,7 @@
|
|
|
19356
19505
|
{
|
|
19357
19506
|
"id": "props",
|
|
19358
19507
|
"title": "Props",
|
|
19359
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Primary button label. |\n| `icon` | `string` | — | Optional icon character. |\n| `model` | `{ label, command?, disabled? }[]` | `[]` | Menu items. |\n| `severity` / `outlined` / `size` | — | — | Visual variants. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `teleport` | `boolean` | `true` | Whether to Teleport the menu. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` keeps it in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
19508
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Primary button label. |\n| `icon` | `string` | — | Optional icon character. |\n| `model` | `{ label, command?, disabled? }[]` | `[]` | Menu items. |\n| `severity` / `outlined` / `size` | — | — | Visual variants. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `teleport` | `boolean` | `true` | Whether to Teleport the menu. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` keeps it in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
19360
19509
|
},
|
|
19361
19510
|
{
|
|
19362
19511
|
"id": "events",
|
|
@@ -19369,7 +19518,7 @@
|
|
|
19369
19518
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Main button content. |"
|
|
19370
19519
|
}
|
|
19371
19520
|
],
|
|
19372
|
-
"markdown": "---\ntitle: SplitButton\ncategory: 01 / BASIC\ndescription: A primary action button with extra dropdown items.\n---\n\n# SplitButton\n\nThe left primary button emits `click`; items in the right-side menu emit `command`.\n\n## Import\n\n```ts\nimport { MSplitButton } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Primary button label. |\n| `icon` | `string` | — | Optional icon character. |\n| `model` | `{ label, command?, disabled? }[]` | `[]` | Menu items. |\n| `severity` / `outlined` / `size` | — | — | Visual variants. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `teleport` | `boolean` | `true` | Whether to Teleport the menu. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` keeps it in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `click` | `MouseEvent` | Primary button click. |\n| `command` | `item` | Menu item activated. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Main button content. |\n"
|
|
19521
|
+
"markdown": "---\ntitle: SplitButton\ncategory: 01 / BASIC\ndescription: A primary action button with extra dropdown items.\n---\n\n# SplitButton\n\nThe left primary button emits `click`; items in the right-side menu emit `command`.\n\n## Import\n\n```ts\nimport { MSplitButton } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Primary button label. |\n| `icon` | `string` | — | Optional icon character. |\n| `model` | `{ label, command?, disabled? }[]` | `[]` | Menu items. |\n| `severity` / `outlined` / `size` | — | — | Visual variants. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `teleport` | `boolean` | `true` | Whether to Teleport the menu. |\n| `appendTo` | `string \\| HTMLElement \\| 'self'` | `'body'` | Mount target; `'self'` keeps it in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `click` | `MouseEvent` | Primary button click. |\n| `command` | `item` | Menu item activated. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Main button content. |\n"
|
|
19373
19522
|
}
|
|
19374
19523
|
}
|
|
19375
19524
|
},
|
|
@@ -19430,6 +19579,18 @@
|
|
|
19430
19579
|
"default": "6",
|
|
19431
19580
|
"description": "分隔条厚度（px）。"
|
|
19432
19581
|
},
|
|
19582
|
+
{
|
|
19583
|
+
"name": "resizeTriggerClass",
|
|
19584
|
+
"type": "—",
|
|
19585
|
+
"default": "—",
|
|
19586
|
+
"description": "分隔条 class / style。"
|
|
19587
|
+
},
|
|
19588
|
+
{
|
|
19589
|
+
"name": "resizeTriggerStyle",
|
|
19590
|
+
"type": "—",
|
|
19591
|
+
"default": "—",
|
|
19592
|
+
"description": "分隔条 class / style。"
|
|
19593
|
+
},
|
|
19433
19594
|
{
|
|
19434
19595
|
"name": "pane1Class",
|
|
19435
19596
|
"type": "—",
|
|
@@ -19456,7 +19617,7 @@
|
|
|
19456
19617
|
},
|
|
19457
19618
|
{
|
|
19458
19619
|
"name": "pt",
|
|
19459
|
-
"type": "[
|
|
19620
|
+
"type": "[SplitterPassThrough](/docs/types#SplitterPassThrough) `{ root?, gutter?, panel1?, panel2? }",
|
|
19460
19621
|
"default": "—",
|
|
19461
19622
|
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
19462
19623
|
}
|
|
@@ -19507,7 +19668,11 @@
|
|
|
19507
19668
|
},
|
|
19508
19669
|
{
|
|
19509
19670
|
"name": "resize-trigger",
|
|
19510
|
-
"description": "
|
|
19671
|
+
"description": "自定义分隔条内容（手柄、图标等）。"
|
|
19672
|
+
},
|
|
19673
|
+
{
|
|
19674
|
+
"name": "gutter",
|
|
19675
|
+
"description": "自定义分隔条内容（手柄、图标等）。"
|
|
19511
19676
|
},
|
|
19512
19677
|
{
|
|
19513
19678
|
"name": "default",
|
|
@@ -19560,6 +19725,15 @@
|
|
|
19560
19725
|
"code": "<script setup lang=\"ts\">\nimport { MSplitter } from 'morya-ui'\n</script>\n\n<template>\n <MSplitter disabled :size=\"40\" style=\"min-height: 7rem; border: 1px solid var(--m-color-border); border-radius: var(--m-radius-md); overflow: hidden\">\n <template #panel1>\n <div style=\"padding:0.75rem\">\n 不可拖拽\n </div>\n </template>\n <template #panel2>\n <div style=\"padding:0.75rem\">\n B\n </div>\n </template>\n </MSplitter>\n</template>",
|
|
19561
19726
|
"locale": "zh-CN"
|
|
19562
19727
|
},
|
|
19728
|
+
{
|
|
19729
|
+
"id": "自定义分隔条-1",
|
|
19730
|
+
"section": "自定义分隔条",
|
|
19731
|
+
"sectionId": "自定义分隔条",
|
|
19732
|
+
"lang": "vue",
|
|
19733
|
+
"preview": true,
|
|
19734
|
+
"code": "<script setup lang=\"ts\">\nimport { MIcon, MSplitter } from 'morya-ui'\n</script>\n\n<template>\n <MSplitter\n :resize-trigger-size=\"14\"\n resize-trigger-class=\"doc-splitter-gutter\"\n :resize-trigger-style=\"{\n background: 'color-mix(in srgb, var(--m-color-primary) 12%, var(--m-color-surface))',\n borderInline: '1px solid var(--m-color-border)',\n }\"\n style=\"min-height: 8rem; border: 1px solid var(--m-color-border); border-radius: var(--m-radius-md); overflow: hidden\"\n >\n <template #panel1>\n <div style=\"padding: 0.75rem\">Panel A — 自定义分隔条</div>\n </template>\n <template #resize-trigger>\n <MIcon name=\"grip\" size=\"sm\" style=\"color: var(--m-color-text-muted)\" />\n </template>\n <template #panel2>\n <div style=\"padding: 0.75rem\">Panel B</div>\n </template>\n </MSplitter>\n</template>",
|
|
19735
|
+
"locale": "zh-CN"
|
|
19736
|
+
},
|
|
19563
19737
|
{
|
|
19564
19738
|
"id": "import-1",
|
|
19565
19739
|
"section": "Import",
|
|
@@ -19604,6 +19778,15 @@
|
|
|
19604
19778
|
"preview": true,
|
|
19605
19779
|
"code": "<script setup lang=\"ts\">\nimport { MSplitter } from 'morya-ui'\n</script>\n\n<template>\n <MSplitter disabled :size=\"40\" style=\"min-height: 7rem; border: 1px solid var(--m-color-border); border-radius: var(--m-radius-md); overflow: hidden\">\n <template #panel1>\n <div style=\"padding:0.75rem\">\n Not draggable\n </div>\n </template>\n <template #panel2>\n <div style=\"padding:0.75rem\">\n B\n </div>\n </template>\n </MSplitter>\n</template>",
|
|
19606
19780
|
"locale": "en-US"
|
|
19781
|
+
},
|
|
19782
|
+
{
|
|
19783
|
+
"id": "custom-gutter-1",
|
|
19784
|
+
"section": "Custom gutter",
|
|
19785
|
+
"sectionId": "custom-gutter",
|
|
19786
|
+
"lang": "vue",
|
|
19787
|
+
"preview": true,
|
|
19788
|
+
"code": "<script setup lang=\"ts\">\nimport { MIcon, MSplitter } from 'morya-ui'\n</script>\n\n<template>\n <MSplitter\n :resize-trigger-size=\"14\"\n resize-trigger-class=\"doc-splitter-gutter\"\n :resize-trigger-style=\"{\n background: 'color-mix(in srgb, var(--m-color-primary) 12%, var(--m-color-surface))',\n borderInline: '1px solid var(--m-color-border)',\n }\"\n style=\"min-height: 8rem; border: 1px solid var(--m-color-border); border-radius: var(--m-radius-md); overflow: hidden\"\n >\n <template #panel1>\n <div style=\"padding: 0.75rem\">Panel A — custom gutter</div>\n </template>\n <template #resize-trigger>\n <MIcon name=\"grip\" size=\"sm\" style=\"color: var(--m-color-text-muted)\" />\n </template>\n <template #panel2>\n <div style=\"padding: 0.75rem\">Panel B</div>\n </template>\n </MSplitter>\n</template>",
|
|
19789
|
+
"locale": "en-US"
|
|
19607
19790
|
}
|
|
19608
19791
|
],
|
|
19609
19792
|
"locales": {
|
|
@@ -19641,15 +19824,20 @@
|
|
|
19641
19824
|
"title": "Disabled",
|
|
19642
19825
|
"body": "```vue preview src=\"./demos/Disabled.zh.vue\"\n```"
|
|
19643
19826
|
},
|
|
19827
|
+
{
|
|
19828
|
+
"id": "自定义分隔条",
|
|
19829
|
+
"title": "自定义分隔条",
|
|
19830
|
+
"body": "`resizeTriggerClass` / `resizeTriggerStyle` 定制分隔条外观；`#resize-trigger`（别名 `#gutter`）放入手柄等内容。厚度仍用 `resizeTriggerSize`（参与拖拽可用宽度计算）。也可用 `pt.gutter` 透传。\n\n```vue preview src=\"./demos/CustomGutter.zh.vue\"\n```"
|
|
19831
|
+
},
|
|
19644
19832
|
{
|
|
19645
19833
|
"id": "props",
|
|
19646
19834
|
"title": "Props",
|
|
19647
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `layout` | `'horizontal' \\| 'vertical'` | `'horizontal'` | 分割方向。 |\n| `direction` | 同上 | — | `layout` 的别名。 |\n| `size` | `number \\| string` | — | 受控尺寸；`>1` 为 `%`，`≤1` 为比例，`'Npx'` 为像素。 |\n| `defaultSize` | `number \\| string` | `50` | 非受控初始尺寸。 |\n| `min` / `max` | `number \\| string` | 随模式 | 下限 / 上限（单位与 `size` 一致）。 |\n| `disabled` | `boolean` | `false` | 禁用拖拽与键盘调整。 |\n| `resizeTriggerSize` | `number` | `6` | 分隔条厚度（px）。 |\n| `pane1Class` / `pane1Style` | — | — | 主面板 class / style。 |\n| `pane2Class` / `pane2Style` | — | — | 次面板 class / style。 |\n| `pt` | [
|
|
19835
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `layout` | `'horizontal' \\| 'vertical'` | `'horizontal'` | 分割方向。 |\n| `direction` | 同上 | — | `layout` 的别名。 |\n| `size` | `number \\| string` | — | 受控尺寸；`>1` 为 `%`，`≤1` 为比例，`'Npx'` 为像素。 |\n| `defaultSize` | `number \\| string` | `50` | 非受控初始尺寸。 |\n| `min` / `max` | `number \\| string` | 随模式 | 下限 / 上限（单位与 `size` 一致）。 |\n| `disabled` | `boolean` | `false` | 禁用拖拽与键盘调整。 |\n| `resizeTriggerSize` | `number` | `6` | 分隔条厚度（px）。 |\n| `resizeTriggerClass` / `resizeTriggerStyle` | — | — | 分隔条 class / style。 |\n| `pane1Class` / `pane1Style` | — | — | 主面板 class / style。 |\n| `pane2Class` / `pane2Style` | — | — | 次面板 class / style。 |\n| `pt` | [SplitterPassThrough](/docs/types#SplitterPassThrough) `{ root?, gutter?, panel1?, panel2? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
19648
19836
|
},
|
|
19649
19837
|
{
|
|
19650
19838
|
"id": "slots",
|
|
19651
19839
|
"title": "Slots",
|
|
19652
|
-
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `panel1` / `1` | 左侧 / 上方面板。 |\n| `panel2` / `2` | 右侧 / 下方面板。 |\n| `resize-trigger` |
|
|
19840
|
+
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `panel1` / `1` | 左侧 / 上方面板。 |\n| `panel2` / `2` | 右侧 / 下方面板。 |\n| `resize-trigger` / `gutter` | 自定义分隔条内容（手柄、图标等）。 |\n| `default` | 未使用命名插槽时取前两个子节点。 |"
|
|
19653
19841
|
},
|
|
19654
19842
|
{
|
|
19655
19843
|
"id": "events",
|
|
@@ -19657,7 +19845,7 @@
|
|
|
19657
19845
|
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:size` | `number \\| string` | 尺寸变化。 |\n| `resize` | 同上 | 便于单独监听。 |\n| `drag-start` / `drag-move` / `drag-end` | `Event` | 拖拽生命周期。 |"
|
|
19658
19846
|
}
|
|
19659
19847
|
],
|
|
19660
|
-
"markdown": "---\ntitle: Splitter\ncategory: 06 / LAYOUT\ndescription: 双栏分割布局，支持水平 / 垂直与拖拽调整比例。\n---\n\n# Splitter\n\n将内容拆成两个可并排或上下排列的区域，拖动分隔条即可调整比例。\n\n## 引入\n\n```ts\nimport { MSplitter } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Vertical / direction\n\n`layout` 与 `direction` 等价（`direction` 为别名）。\n\n```vue preview src=\"./demos/VerticalDirection.vue\"\n```\n\n## Size modes\n\n- `number > 1`：百分比（如 `35` → 35%）\n- `number ≤ 1`：比例（如 `0.35` → 35%）\n- `string`：像素（如 `'120px'`）\n\n```vue preview src=\"./demos/SizeModes.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `layout` | `'horizontal' \\| 'vertical'` | `'horizontal'` | 分割方向。 |\n| `direction` | 同上 | — | `layout` 的别名。 |\n| `size` | `number \\| string` | — | 受控尺寸；`>1` 为 `%`，`≤1` 为比例，`'Npx'` 为像素。 |\n| `defaultSize` | `number \\| string` | `50` | 非受控初始尺寸。 |\n| `min` / `max` | `number \\| string` | 随模式 | 下限 / 上限（单位与 `size` 一致）。 |\n| `disabled` | `boolean` | `false` | 禁用拖拽与键盘调整。 |\n| `resizeTriggerSize` | `number` | `6` | 分隔条厚度（px）。 |\n| `pane1Class` / `pane1Style` | — | — | 主面板 class / style。 |\n| `pane2Class` / `pane2Style` | — | — | 次面板 class / style。 |\n| `pt` | [
|
|
19848
|
+
"markdown": "---\ntitle: Splitter\ncategory: 06 / LAYOUT\ndescription: 双栏分割布局，支持水平 / 垂直与拖拽调整比例。\n---\n\n# Splitter\n\n将内容拆成两个可并排或上下排列的区域，拖动分隔条即可调整比例。\n\n## 引入\n\n```ts\nimport { MSplitter } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Vertical / direction\n\n`layout` 与 `direction` 等价（`direction` 为别名）。\n\n```vue preview src=\"./demos/VerticalDirection.vue\"\n```\n\n## Size modes\n\n- `number > 1`：百分比（如 `35` → 35%）\n- `number ≤ 1`：比例（如 `0.35` → 35%）\n- `string`：像素（如 `'120px'`）\n\n```vue preview src=\"./demos/SizeModes.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.zh.vue\"\n```\n\n## 自定义分隔条\n\n`resizeTriggerClass` / `resizeTriggerStyle` 定制分隔条外观；`#resize-trigger`（别名 `#gutter`）放入手柄等内容。厚度仍用 `resizeTriggerSize`（参与拖拽可用宽度计算）。也可用 `pt.gutter` 透传。\n\n```vue preview src=\"./demos/CustomGutter.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `layout` | `'horizontal' \\| 'vertical'` | `'horizontal'` | 分割方向。 |\n| `direction` | 同上 | — | `layout` 的别名。 |\n| `size` | `number \\| string` | — | 受控尺寸；`>1` 为 `%`，`≤1` 为比例，`'Npx'` 为像素。 |\n| `defaultSize` | `number \\| string` | `50` | 非受控初始尺寸。 |\n| `min` / `max` | `number \\| string` | 随模式 | 下限 / 上限（单位与 `size` 一致）。 |\n| `disabled` | `boolean` | `false` | 禁用拖拽与键盘调整。 |\n| `resizeTriggerSize` | `number` | `6` | 分隔条厚度（px）。 |\n| `resizeTriggerClass` / `resizeTriggerStyle` | — | — | 分隔条 class / style。 |\n| `pane1Class` / `pane1Style` | — | — | 主面板 class / style。 |\n| `pane2Class` / `pane2Style` | — | — | 次面板 class / style。 |\n| `pt` | [SplitterPassThrough](/docs/types#SplitterPassThrough) `{ root?, gutter?, panel1?, panel2? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `panel1` / `1` | 左侧 / 上方面板。 |\n| `panel2` / `2` | 右侧 / 下方面板。 |\n| `resize-trigger` / `gutter` | 自定义分隔条内容（手柄、图标等）。 |\n| `default` | 未使用命名插槽时取前两个子节点。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:size` | `number \\| string` | 尺寸变化。 |\n| `resize` | 同上 | 便于单独监听。 |\n| `drag-start` / `drag-move` / `drag-end` | `Event` | 拖拽生命周期。 |\n"
|
|
19661
19849
|
},
|
|
19662
19850
|
"en-US": {
|
|
19663
19851
|
"title": "Splitter",
|
|
@@ -19693,15 +19881,20 @@
|
|
|
19693
19881
|
"title": "Disabled",
|
|
19694
19882
|
"body": "```vue preview src=\"./demos/Disabled.en.vue\"\n```"
|
|
19695
19883
|
},
|
|
19884
|
+
{
|
|
19885
|
+
"id": "custom-gutter",
|
|
19886
|
+
"title": "Custom gutter",
|
|
19887
|
+
"body": "Style the divider with `resizeTriggerClass` / `resizeTriggerStyle`, and put a handle or icon in `#resize-trigger` (alias `#gutter`). Keep thickness on `resizeTriggerSize` (used for drag usable-size math). `pt.gutter` is also supported.\n\n```vue preview src=\"./demos/CustomGutter.en.vue\"\n```"
|
|
19888
|
+
},
|
|
19696
19889
|
{
|
|
19697
19890
|
"id": "props",
|
|
19698
19891
|
"title": "Props",
|
|
19699
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `layout` | `'horizontal' \\| 'vertical'` | `'horizontal'` | Split direction. |\n| `direction` | same | — | Alias of `layout`. |\n| `size` | `number \\| string` | — | Controlled size; `>1` = `%`, `≤1` = ratio, `'Npx'` = pixels. |\n| `defaultSize` | `number \\| string` | `50` | Uncontrolled initial size. |\n| `min` / `max` | `number \\| string` | mode-based | Bounds (same unit family as `size`). |\n| `disabled` | `boolean` | `false` | Disable drag and keyboard resize. |\n| `resizeTriggerSize` | `number` | `6` | Gutter thickness in px. |\n| `pane1Class` / `pane1Style` | — | — | Primary pane class / style. |\n| `pane2Class` / `pane2Style` | — | — | Secondary pane class / style. |\n| `pt` | [
|
|
19892
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `layout` | `'horizontal' \\| 'vertical'` | `'horizontal'` | Split direction. |\n| `direction` | same | — | Alias of `layout`. |\n| `size` | `number \\| string` | — | Controlled size; `>1` = `%`, `≤1` = ratio, `'Npx'` = pixels. |\n| `defaultSize` | `number \\| string` | `50` | Uncontrolled initial size. |\n| `min` / `max` | `number \\| string` | mode-based | Bounds (same unit family as `size`). |\n| `disabled` | `boolean` | `false` | Disable drag and keyboard resize. |\n| `resizeTriggerSize` | `number` | `6` | Gutter thickness in px. |\n| `resizeTriggerClass` / `resizeTriggerStyle` | — | — | Gutter class / style. |\n| `pane1Class` / `pane1Style` | — | — | Primary pane class / style. |\n| `pane2Class` / `pane2Style` | — | — | Secondary pane class / style. |\n| `pt` | [SplitterPassThrough](/docs/types#SplitterPassThrough) `{ root?, gutter?, panel1?, panel2? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
19700
19893
|
},
|
|
19701
19894
|
{
|
|
19702
19895
|
"id": "slots",
|
|
19703
19896
|
"title": "Slots",
|
|
19704
|
-
"body": "| Slot | Description |\n| --- | --- |\n| `panel1` / `1` | Left / top pane. |\n| `panel2` / `2` | Right / bottom pane. |\n| `resize-trigger` | Custom gutter content. |\n| `default` | First two children when named slots are unused. |"
|
|
19897
|
+
"body": "| Slot | Description |\n| --- | --- |\n| `panel1` / `1` | Left / top pane. |\n| `panel2` / `2` | Right / bottom pane. |\n| `resize-trigger` / `gutter` | Custom gutter content (handle, icon, …). |\n| `default` | First two children when named slots are unused. |"
|
|
19705
19898
|
},
|
|
19706
19899
|
{
|
|
19707
19900
|
"id": "events",
|
|
@@ -19709,7 +19902,7 @@
|
|
|
19709
19902
|
"body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `update:size` | `number \\| string` | Size changed. |\n| `resize` | same | Convenience listener. |\n| `drag-start` / `drag-move` / `drag-end` | `Event` | Drag lifecycle. |"
|
|
19710
19903
|
}
|
|
19711
19904
|
],
|
|
19712
|
-
"markdown": "---\ntitle: Splitter\ncategory: 06 / LAYOUT\ndescription: Two-pane resizable split layout (horizontal / vertical).\n---\n\n# Splitter\n\nSplit content into two panes with a draggable gutter.\n\n## Import\n\n```ts\nimport { MSplitter } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Vertical / direction\n\n`layout` and `direction` are equivalent (`direction` is an alias).\n\n```vue preview src=\"./demos/VerticalDirection.vue\"\n```\n\n## Size modes\n\n- `number > 1`: percent (e.g. `35` → 35%)\n- `number ≤ 1`: ratio (e.g. `0.35` → 35%)\n- `string`: pixels (e.g. `'120px'`)\n\n```vue preview src=\"./demos/SizeModes.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `layout` | `'horizontal' \\| 'vertical'` | `'horizontal'` | Split direction. |\n| `direction` | same | — | Alias of `layout`. |\n| `size` | `number \\| string` | — | Controlled size; `>1` = `%`, `≤1` = ratio, `'Npx'` = pixels. |\n| `defaultSize` | `number \\| string` | `50` | Uncontrolled initial size. |\n| `min` / `max` | `number \\| string` | mode-based | Bounds (same unit family as `size`). |\n| `disabled` | `boolean` | `false` | Disable drag and keyboard resize. |\n| `resizeTriggerSize` | `number` | `6` | Gutter thickness in px. |\n| `pane1Class` / `pane1Style` | — | — | Primary pane class / style. |\n| `pane2Class` / `pane2Style` | — | — | Secondary pane class / style. |\n| `pt` | [
|
|
19905
|
+
"markdown": "---\ntitle: Splitter\ncategory: 06 / LAYOUT\ndescription: Two-pane resizable split layout (horizontal / vertical).\n---\n\n# Splitter\n\nSplit content into two panes with a draggable gutter.\n\n## Import\n\n```ts\nimport { MSplitter } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Vertical / direction\n\n`layout` and `direction` are equivalent (`direction` is an alias).\n\n```vue preview src=\"./demos/VerticalDirection.vue\"\n```\n\n## Size modes\n\n- `number > 1`: percent (e.g. `35` → 35%)\n- `number ≤ 1`: ratio (e.g. `0.35` → 35%)\n- `string`: pixels (e.g. `'120px'`)\n\n```vue preview src=\"./demos/SizeModes.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.en.vue\"\n```\n\n## Custom gutter\n\nStyle the divider with `resizeTriggerClass` / `resizeTriggerStyle`, and put a handle or icon in `#resize-trigger` (alias `#gutter`). Keep thickness on `resizeTriggerSize` (used for drag usable-size math). `pt.gutter` is also supported.\n\n```vue preview src=\"./demos/CustomGutter.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `layout` | `'horizontal' \\| 'vertical'` | `'horizontal'` | Split direction. |\n| `direction` | same | — | Alias of `layout`. |\n| `size` | `number \\| string` | — | Controlled size; `>1` = `%`, `≤1` = ratio, `'Npx'` = pixels. |\n| `defaultSize` | `number \\| string` | `50` | Uncontrolled initial size. |\n| `min` / `max` | `number \\| string` | mode-based | Bounds (same unit family as `size`). |\n| `disabled` | `boolean` | `false` | Disable drag and keyboard resize. |\n| `resizeTriggerSize` | `number` | `6` | Gutter thickness in px. |\n| `resizeTriggerClass` / `resizeTriggerStyle` | — | — | Gutter class / style. |\n| `pane1Class` / `pane1Style` | — | — | Primary pane class / style. |\n| `pane2Class` / `pane2Style` | — | — | Secondary pane class / style. |\n| `pt` | [SplitterPassThrough](/docs/types#SplitterPassThrough) `{ root?, gutter?, panel1?, panel2? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `panel1` / `1` | Left / top pane. |\n| `panel2` / `2` | Right / bottom pane. |\n| `resize-trigger` / `gutter` | Custom gutter content (handle, icon, …). |\n| `default` | First two children when named slots are unused. |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:size` | `number \\| string` | Size changed. |\n| `resize` | same | Convenience listener. |\n| `drag-start` / `drag-move` / `drag-end` | `Event` | Drag lifecycle. |\n"
|
|
19713
19906
|
}
|
|
19714
19907
|
}
|
|
19715
19908
|
},
|
|
@@ -21245,7 +21438,7 @@
|
|
|
21245
21438
|
{
|
|
21246
21439
|
"id": "overview",
|
|
21247
21440
|
"title": "",
|
|
21248
|
-
"body": "# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n-
|
|
21441
|
+
"body": "# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout` 根滚动叠用时优先固定表高，避免双层滚动条"
|
|
21249
21442
|
},
|
|
21250
21443
|
{
|
|
21251
21444
|
"id": "引入",
|
|
@@ -21318,7 +21511,7 @@
|
|
|
21318
21511
|
"body": "<h4 id=\"TableItem\">TableItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableClickEventType\">TableClickEventType</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableClickEventType = 'single' | 'double'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n | { field: string; comparison: '=' | '!='; criteria: number | string }\n | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverItemsLength`：\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。"
|
|
21319
21512
|
}
|
|
21320
21513
|
],
|
|
21321
|
-
"markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: 数据表格。支持排序、筛选、选择、分页、固定列与空/加载态。列宽支持 width / minWidth / fit。\n---\n\n# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n\n## 引入\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## 行选择\n\n多选配合 `selection-mode=\"multiple\"` 与 `v-model:selection`；单选使用 `selection-mode=\"single\"` 与 `v-model:selected-item`。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n## 筛选与分页\n\n客户端筛选可通过 `search-value` / `filter-options`；分页开启 `paginator` 并配合 `v-model:page` 与 `rows-per-page`。\n\n```vue preview src=\"./demos/FilterAndPagination.zh.vue\"\n```\n\n## 固定列\n\n列定义中设置 `fixed: 'left'` 可冻结左侧列（当前批次支持左固定）。\n\n```vue preview src=\"./demos/ExpandableRows.zh.vue\"\n```\n\n## 展开行与列渲染\n\n列可通过 `render` 函数渲染；展开行设置 `expandable`，详情内容由插槽 `expansion` 提供。`cell-{key}` 插槽优先于 `render`。\n\n```vue preview src=\"./demos/EmptyAndLoading.zh.vue\"\n```\n\n## 空态与加载\n\n```vue preview src=\"./demos/Demo6.vue\"\n```\n\n## 服务端模式\n\n传入 `server-options` 与 `server-items-length`，通过 `v-model:server-options` 同步页码、每页条数与排序字段。\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## TableColumnDefinition\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 列字段名（绑定行数据的键）。 |\n| `label` | `string` | 列头文案。 |\n| `width` | `number` | 固定列宽（px）。 |\n| `minWidth` | `number` | 弹性列最小宽度，默认 `80`。 |\n| `sortable` | `boolean` | 是否可排序。 |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | 固定列；当前实现左固定。 |\n| `align` | `'start' \\| 'center' \\| 'end'` | 单元格对齐。 |\n| `render` | `(row) => unknown` | 自定义单元格渲染。 |\n| `showOverflowTooltip` | `boolean` | 该列文本溢出时显示 Tooltip。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverItemsLength` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 插槽隐式启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortField` / `sortOrder` | — | — | 受控排序字段与方向。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | 客户端排序或仅抛出排序事件。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | 表格密度。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickEventType` | `TableClickEventType` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `filters` | `Record<string, unknown> \\| null` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `hideHeader` | `boolean` | — | — |\n| `hideRowsPerPage` | `boolean` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `multiSort` | `boolean` | — | — |\n| `mustSort` | `boolean` | — | — |\n| `preventContextMenuRow` | `boolean` | — | — |\n| `rowsItems` | `number[]` | — | — |\n| `rowsOfPageSeparatorMessage` | `string` | — | — |\n| `rowsPerPageMessage` | `string` | — | — |\n| `showHeader` | `boolean` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `tableNodeId` | `string` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-*` | 动态插槽（前缀 `header-`）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `page` | `number` | 页码变化。 |\n| `row-click` | `{ row, index }` | 行单击。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `expand` | `{ row, expanded }` | 行展开。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `contextmenuRow` | — | — |\n| `deselectRow` | — | — |\n| `filter` | — | — |\n| `selectAll` | — | — |\n| `selectRow` | — | — |\n| `update:expandedRowKeys` | — | — |\n| `update:filters` | — | — |\n| `update:selectedItem` | — | — |\n| `updatePageItems` | — | — |\n| `updateTotalItems` | — | — |\n\n## 实例方法\n\n通过 `ref` 可访问分页控制：`nextPage`、`prevPage`、`updatePage`、`currentPaginationNumber`、`maxPaginationNumber` 等。\n\n## 类型\n\n<h4 id=\"TableItem\">TableItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableClickEventType\">TableClickEventType</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableClickEventType = 'single' | 'double'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n | { field: string; comparison: '=' | '!='; criteria: number | string }\n | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverItemsLength`：\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。\n"
|
|
21514
|
+
"markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: 数据表格。支持排序、筛选、选择、分页、固定列与空/加载态。列宽支持 width / minWidth / fit。\n---\n\n# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout` 根滚动叠用时优先固定表高，避免双层滚动条\n\n## 引入\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## 行选择\n\n多选配合 `selection-mode=\"multiple\"` 与 `v-model:selection`；单选使用 `selection-mode=\"single\"` 与 `v-model:selected-item`。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n## 筛选与分页\n\n客户端筛选可通过 `search-value` / `filter-options`；分页开启 `paginator` 并配合 `v-model:page` 与 `rows-per-page`。\n\n```vue preview src=\"./demos/FilterAndPagination.zh.vue\"\n```\n\n## 固定列\n\n列定义中设置 `fixed: 'left'` 可冻结左侧列（当前批次支持左固定）。\n\n```vue preview src=\"./demos/ExpandableRows.zh.vue\"\n```\n\n## 展开行与列渲染\n\n列可通过 `render` 函数渲染；展开行设置 `expandable`，详情内容由插槽 `expansion` 提供。`cell-{key}` 插槽优先于 `render`。\n\n```vue preview src=\"./demos/EmptyAndLoading.zh.vue\"\n```\n\n## 空态与加载\n\n```vue preview src=\"./demos/Demo6.vue\"\n```\n\n## 服务端模式\n\n传入 `server-options` 与 `server-items-length`，通过 `v-model:server-options` 同步页码、每页条数与排序字段。\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## TableColumnDefinition\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 列字段名（绑定行数据的键）。 |\n| `label` | `string` | 列头文案。 |\n| `width` | `number` | 固定列宽（px）。 |\n| `minWidth` | `number` | 弹性列最小宽度，默认 `80`。 |\n| `sortable` | `boolean` | 是否可排序。 |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | 固定列；当前实现左固定。 |\n| `align` | `'start' \\| 'center' \\| 'end'` | 单元格对齐。 |\n| `render` | `(row) => unknown` | 自定义单元格渲染。 |\n| `showOverflowTooltip` | `boolean` | 该列文本溢出时显示 Tooltip。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverItemsLength` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 插槽隐式启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortField` / `sortOrder` | — | — | 受控排序字段与方向。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | 客户端排序或仅抛出排序事件。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | 表格密度。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickEventType` | `TableClickEventType` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `filters` | `Record<string, unknown> \\| null` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `hideHeader` | `boolean` | — | — |\n| `hideRowsPerPage` | `boolean` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `multiSort` | `boolean` | — | — |\n| `mustSort` | `boolean` | — | — |\n| `preventContextMenuRow` | `boolean` | — | — |\n| `rowsItems` | `number[]` | — | — |\n| `rowsOfPageSeparatorMessage` | `string` | — | — |\n| `rowsPerPageMessage` | `string` | — | — |\n| `showHeader` | `boolean` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `tableNodeId` | `string` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-*` | 动态插槽（前缀 `header-`）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `page` | `number` | 页码变化。 |\n| `row-click` | `{ row, index }` | 行单击。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `expand` | `{ row, expanded }` | 行展开。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `contextmenuRow` | — | — |\n| `deselectRow` | — | — |\n| `filter` | — | — |\n| `selectAll` | — | — |\n| `selectRow` | — | — |\n| `update:expandedRowKeys` | — | — |\n| `update:filters` | — | — |\n| `update:selectedItem` | — | — |\n| `updatePageItems` | — | — |\n| `updateTotalItems` | — | — |\n\n## 实例方法\n\n通过 `ref` 可访问分页控制：`nextPage`、`prevPage`、`updatePage`、`currentPaginationNumber`、`maxPaginationNumber` 等。\n\n## 类型\n\n<h4 id=\"TableItem\">TableItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableClickEventType\">TableClickEventType</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableClickEventType = 'single' | 'double'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n | { field: string; comparison: '=' | '!='; criteria: number | string }\n | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverItemsLength`：\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。\n"
|
|
21322
21515
|
},
|
|
21323
21516
|
"en-US": {
|
|
21324
21517
|
"title": "Table",
|
|
@@ -21327,7 +21520,7 @@
|
|
|
21327
21520
|
{
|
|
21328
21521
|
"id": "overview",
|
|
21329
21522
|
"title": "",
|
|
21330
|
-
"body": "# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container"
|
|
21523
|
+
"body": "# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars"
|
|
21331
21524
|
},
|
|
21332
21525
|
{
|
|
21333
21526
|
"id": "import",
|
|
@@ -21390,7 +21583,7 @@
|
|
|
21390
21583
|
"body": "<h4 id=\"TableItem\">TableItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer-side paging/sorting payload for `serverOptions`, with `serverItemsLength`:\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n`TableItem` is `Record<string, unknown>`. See also [API types](/docs/types)."
|
|
21391
21584
|
}
|
|
21392
21585
|
],
|
|
21393
|
-
"markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: Data table with sorting, filtering, selection, pagination, frozen columns, and empty/loading states. Column width supports width / minWidth / fit.\n---\n\n# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n\n## Import\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Selection\n\nUse `selection-mode=\"multiple\"` with `v-model:selection`, or `selection-mode=\"single\"` with `v-model:selected-item`.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\n## Filter and pagination\n\nUse `search-value` / `filter-options` for client filtering. Enable `paginator` with `v-model:page` and `rows-per-page`.\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```\n\n## Expandable rows\n\nSet `expandable` and provide the `expansion` slot. Column `render` works for custom cells; a `cell-{key}` slot overrides `render`.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```\n\n## Empty and loading\n\n```vue preview src=\"./demos/EmptyAndLoading.en.vue\"\n```\n\n## TableColumnDefinition\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name bound to row data. |\n| `label` | `string` | Column header text. |\n| `width` | `number` | Fixed width in px. |\n| `minWidth` | `number` | Flex column minimum width; default `80`. |\n| `sortable` | `boolean` | Enable sorting. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Freeze column (left freeze supported). |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Tooltip when cell text overflows. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Flexible columns fill remaining width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Row selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multi-select (`v-model:selection`). |\n| `paginator` | `boolean` | `false` | Built-in pagination footer. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Page size. |\n| `striped` / `bordered` | `boolean` | `false` | Striped rows / cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row. |\n| `loading` / `emptyText` / `emptyDescription` | — | — | Loading and empty states. |\n| `maxHeight` | `number \\| null` | `null` | Scrollable body max height. |\n| `rowKey` | `string` | `'id'` | Stable row key field. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | Table density. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell for column `{key}`; scope `{ row, value, column }`. |\n| `body-cell` | Any cell; scope `{ row, column, value }`. |\n| `expansion` | Expanded row; scope `{ row }`. |\n| `empty` / `loading` | Empty and loading placeholders. |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `page` | `number` | Page changed. |\n| `row-click` | `{ row, index }` | Row clicked. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Selection v-model. |\n| `update:page` | `number` | Page v-model. |\n\n## Instance\n\nExposed pagination helpers include `nextPage`, `prevPage`, `updatePage`, `currentPaginationNumber`, and `maxPaginationNumber`.\n\n## Types\n\n<h4 id=\"TableItem\">TableItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer-side paging/sorting payload for `serverOptions`, with `serverItemsLength`:\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n`TableItem` is `Record<string, unknown>`. See also [API types](/docs/types).\n"
|
|
21586
|
+
"markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: Data table with sorting, filtering, selection, pagination, frozen columns, and empty/loading states. Column width supports width / minWidth / fit.\n---\n\n# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars\n\n## Import\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Selection\n\nUse `selection-mode=\"multiple\"` with `v-model:selection`, or `selection-mode=\"single\"` with `v-model:selected-item`.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\n## Filter and pagination\n\nUse `search-value` / `filter-options` for client filtering. Enable `paginator` with `v-model:page` and `rows-per-page`.\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```\n\n## Expandable rows\n\nSet `expandable` and provide the `expansion` slot. Column `render` works for custom cells; a `cell-{key}` slot overrides `render`.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```\n\n## Empty and loading\n\n```vue preview src=\"./demos/EmptyAndLoading.en.vue\"\n```\n\n## TableColumnDefinition\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name bound to row data. |\n| `label` | `string` | Column header text. |\n| `width` | `number` | Fixed width in px. |\n| `minWidth` | `number` | Flex column minimum width; default `80`. |\n| `sortable` | `boolean` | Enable sorting. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Freeze column (left freeze supported). |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Tooltip when cell text overflows. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Flexible columns fill remaining width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Row selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multi-select (`v-model:selection`). |\n| `paginator` | `boolean` | `false` | Built-in pagination footer. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Page size. |\n| `striped` / `bordered` | `boolean` | `false` | Striped rows / cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row. |\n| `loading` / `emptyText` / `emptyDescription` | — | — | Loading and empty states. |\n| `maxHeight` | `number \\| null` | `null` | Scrollable body max height. |\n| `rowKey` | `string` | `'id'` | Stable row key field. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | — | Table density. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell for column `{key}`; scope `{ row, value, column }`. |\n| `body-cell` | Any cell; scope `{ row, column, value }`. |\n| `expansion` | Expanded row; scope `{ row }`. |\n| `empty` / `loading` | Empty and loading placeholders. |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `page` | `number` | Page changed. |\n| `row-click` | `{ row, index }` | Row clicked. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Selection v-model. |\n| `update:page` | `number` | Page v-model. |\n\n## Instance\n\nExposed pagination helpers include `nextPage`, `prevPage`, `updatePage`, `currentPaginationNumber`, and `maxPaginationNumber`.\n\n## Types\n\n<h4 id=\"TableItem\">TableItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n key: string\n label: string\n width?: number\n minWidth?: number\n sortable?: boolean\n fixed?: boolean | 'left' | 'right'\n align?: 'start' | 'center' | 'end' | 'left' | 'right'\n render?: (row: TableItem) => unknown\n filterable?: boolean\n filters?: { label: string; value: string | number }[]\n showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer-side paging/sorting payload for `serverOptions`, with `serverItemsLength`:\n\n```ts\ninterface TableServerOptions {\n page: number\n rowsPerPage: number\n sortBy?: string | string[]\n sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n`TableItem` is `Record<string, unknown>`. See also [API types](/docs/types).\n"
|
|
21394
21587
|
}
|
|
21395
21588
|
}
|
|
21396
21589
|
},
|
|
@@ -22506,6 +22699,12 @@
|
|
|
22506
22699
|
"default": "'body'",
|
|
22507
22700
|
"description": "挂载目标。"
|
|
22508
22701
|
},
|
|
22702
|
+
{
|
|
22703
|
+
"name": "transition",
|
|
22704
|
+
"type": "string | false",
|
|
22705
|
+
"default": "'scale-fade'",
|
|
22706
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
22707
|
+
},
|
|
22509
22708
|
{
|
|
22510
22709
|
"name": "placement",
|
|
22511
22710
|
"type": "FloatingOverlayPlacement",
|
|
@@ -22639,7 +22838,7 @@
|
|
|
22639
22838
|
{
|
|
22640
22839
|
"id": "props",
|
|
22641
22840
|
"title": "Props",
|
|
22642
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `TieredMenuItem[]` | — | 菜单项。 |\n| `popup` | `boolean` | `false` | 弹出模式。 |\n| `modelValue` | `boolean` | `false` | popup 可见性（`v-model`）。 |\n| `teleport` | `boolean` | `true` | popup 时 Teleport；默认 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标。 |\n| `placement` | `FloatingOverlayPlacement` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
22841
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `TieredMenuItem[]` | — | 菜单项。 |\n| `popup` | `boolean` | `false` | 弹出模式。 |\n| `modelValue` | `boolean` | `false` | popup 可见性（`v-model`）。 |\n| `teleport` | `boolean` | `true` | popup 时 Teleport；默认 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `placement` | `FloatingOverlayPlacement` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
22643
22842
|
},
|
|
22644
22843
|
{
|
|
22645
22844
|
"id": "events",
|
|
@@ -22657,7 +22856,7 @@
|
|
|
22657
22856
|
"body": "<h4 id=\"TieredMenuItem\">TieredMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface TieredMenuItem {\n label?: string\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: TieredMenuItem[]\n}\n```"
|
|
22658
22857
|
}
|
|
22659
22858
|
],
|
|
22660
|
-
"markdown": "---\ntitle: TieredMenu\ncategory: 04 / NAVIGATION\ndescription: 带一层子菜单的垂直分层菜单。\n---\n\n# TieredMenu\n\n垂直菜单，支持悬停或点击展开**一层**子菜单。`popup` 模式下可作为浮层弹出。\n\n## 引入\n\n```ts\nimport type {TieredMenuItem} from 'morya-ui';\nimport { MTieredMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 弹出模式\n\n`popup` + `v-model` 控制浮层显隐，适合工具栏按钮触发：\n\n```vue preview src=\"./demos/PopupMode.zh.vue\"\n```\n\n## 滚动与子菜单\n\n主列表与侧向子菜单使用内置 `MScrollbar`（`max-height: min(18rem, 45vh)`）。子菜单 Teleport 到 `body` 相对触发项定位，长列表滚动时不会被主面板裁剪。\n\n## 菜单项结构\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案。 |\n| `command` | `() => void` | 点击叶子项时执行。 |\n| `disabled` | `boolean` | 禁用项。 |\n| `separator` | `boolean` | 渲染分隔线（忽略其他字段）。 |\n| `items` | `TieredMenuItem[]` | 一层子菜单。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `TieredMenuItem[]` | — | 菜单项。 |\n| `popup` | `boolean` | `false` | 弹出模式。 |\n| `modelValue` | `boolean` | `false` | popup 可见性（`v-model`）。 |\n| `teleport` | `boolean` | `true` | popup 时 Teleport；默认 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标。 |\n| `placement` | `FloatingOverlayPlacement` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | popup 可见性变化。 |\n\n## Slots\n\n无插槽。\n\n## 类型\n\n<h4 id=\"TieredMenuItem\">TieredMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface TieredMenuItem {\n label?: string\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: TieredMenuItem[]\n}\n```\n"
|
|
22859
|
+
"markdown": "---\ntitle: TieredMenu\ncategory: 04 / NAVIGATION\ndescription: 带一层子菜单的垂直分层菜单。\n---\n\n# TieredMenu\n\n垂直菜单，支持悬停或点击展开**一层**子菜单。`popup` 模式下可作为浮层弹出。\n\n## 引入\n\n```ts\nimport type {TieredMenuItem} from 'morya-ui';\nimport { MTieredMenu } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 弹出模式\n\n`popup` + `v-model` 控制浮层显隐，适合工具栏按钮触发：\n\n```vue preview src=\"./demos/PopupMode.zh.vue\"\n```\n\n## 滚动与子菜单\n\n主列表与侧向子菜单使用内置 `MScrollbar`（`max-height: min(18rem, 45vh)`）。子菜单 Teleport 到 `body` 相对触发项定位，长列表滚动时不会被主面板裁剪。\n\n## 菜单项结构\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `label` | `string` | 展示文案。 |\n| `command` | `() => void` | 点击叶子项时执行。 |\n| `disabled` | `boolean` | 禁用项。 |\n| `separator` | `boolean` | 渲染分隔线（忽略其他字段）。 |\n| `items` | `TieredMenuItem[]` | 一层子菜单。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `TieredMenuItem[]` | — | 菜单项。 |\n| `popup` | `boolean` | `false` | 弹出模式。 |\n| `modelValue` | `boolean` | `false` | popup 可见性（`v-model`）。 |\n| `teleport` | `boolean` | `true` | popup 时 Teleport；默认 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `placement` | `FloatingOverlayPlacement` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | popup 可见性变化。 |\n\n## Slots\n\n无插槽。\n\n## 类型\n\n<h4 id=\"TieredMenuItem\">TieredMenuItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface TieredMenuItem {\n label?: string\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: TieredMenuItem[]\n}\n```\n"
|
|
22661
22860
|
},
|
|
22662
22861
|
"en-US": {
|
|
22663
22862
|
"title": "TieredMenu",
|
|
@@ -22696,7 +22895,7 @@
|
|
|
22696
22895
|
{
|
|
22697
22896
|
"id": "props",
|
|
22698
22897
|
"title": "Props",
|
|
22699
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `TieredMenuItem[]` | — | Menu items. |\n| `popup` | `boolean` | `false` | Popup overlay mode. |\n| `modelValue` | `boolean` | `false` | Popup visibility (`v-model`). |\n| `teleport` | `boolean` | `true` | Teleport when `popup`; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
22898
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `TieredMenuItem[]` | — | Menu items. |\n| `popup` | `boolean` | `false` | Popup overlay mode. |\n| `modelValue` | `boolean` | `false` | Popup visibility (`v-model`). |\n| `teleport` | `boolean` | `true` | Teleport when `popup`; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
22700
22899
|
},
|
|
22701
22900
|
{
|
|
22702
22901
|
"id": "events",
|
|
@@ -22714,7 +22913,7 @@
|
|
|
22714
22913
|
"body": "<h4 id=\"TieredMenuItem\">TieredMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface TieredMenuItem {\n label?: string\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: TieredMenuItem[]\n}\n```"
|
|
22715
22914
|
}
|
|
22716
22915
|
],
|
|
22717
|
-
"markdown": "---\ntitle: TieredMenu\ncategory: 04 / NAVIGATION\ndescription: A vertical layered menu with one submenu level.\n---\n\n# TieredMenu\n\nVertical menu with **one** submenu level on hover or click. Use `popup` for overlay mode.\n\n## Import\n\n```ts\nimport type {TieredMenuItem} from 'morya-ui';\nimport { MTieredMenu } from 'morya-ui'\n```\n\n## Basic usage\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Popup mode\n\nCombine `popup` with `v-model` for toolbar triggers:\n\n```vue preview src=\"./demos/PopupMode.en.vue\"\n```\n\n## Scrolling & submenu flyout\n\nThe root list and side submenu use built-in `MScrollbar` (`max-height: min(18rem, 45vh)`). Submenus teleport to `body` and anchor to the trigger so they stay visible when the root menu scrolls.\n\n## Item shape\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text. |\n| `command` | `() => void` | Runs when a leaf item is activated. |\n| `disabled` | `boolean` | Disabled item. |\n| `separator` | `boolean` | Renders a divider (ignores other fields). |\n| `items` | `TieredMenuItem[]` | One submenu level. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `TieredMenuItem[]` | — | Menu items. |\n| `popup` | `boolean` | `false` | Popup overlay mode. |\n| `modelValue` | `boolean` | `false` | Popup visibility (`v-model`). |\n| `teleport` | `boolean` | `true` | Teleport when `popup`; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Popup visibility change. |\n\n## Slots\n\nNo slots.\n\n## Types\n\n<h4 id=\"TieredMenuItem\">TieredMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface TieredMenuItem {\n label?: string\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: TieredMenuItem[]\n}\n```\n"
|
|
22916
|
+
"markdown": "---\ntitle: TieredMenu\ncategory: 04 / NAVIGATION\ndescription: A vertical layered menu with one submenu level.\n---\n\n# TieredMenu\n\nVertical menu with **one** submenu level on hover or click. Use `popup` for overlay mode.\n\n## Import\n\n```ts\nimport type {TieredMenuItem} from 'morya-ui';\nimport { MTieredMenu } from 'morya-ui'\n```\n\n## Basic usage\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Popup mode\n\nCombine `popup` with `v-model` for toolbar triggers:\n\n```vue preview src=\"./demos/PopupMode.en.vue\"\n```\n\n## Scrolling & submenu flyout\n\nThe root list and side submenu use built-in `MScrollbar` (`max-height: min(18rem, 45vh)`). Submenus teleport to `body` and anchor to the trigger so they stay visible when the root menu scrolls.\n\n## Item shape\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `label` | `string` | Display text. |\n| `command` | `() => void` | Runs when a leaf item is activated. |\n| `disabled` | `boolean` | Disabled item. |\n| `separator` | `boolean` | Renders a divider (ignores other fields). |\n| `items` | `TieredMenuItem[]` | One submenu level. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `TieredMenuItem[]` | — | Menu items. |\n| `popup` | `boolean` | `false` | Popup overlay mode. |\n| `modelValue` | `boolean` | `false` | Popup visibility (`v-model`). |\n| `teleport` | `boolean` | `true` | Teleport when `popup`; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Popup visibility change. |\n\n## Slots\n\nNo slots.\n\n## Types\n\n<h4 id=\"TieredMenuItem\">TieredMenuItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface TieredMenuItem {\n label?: string\n command?: () => void\n disabled?: boolean\n separator?: boolean\n items?: TieredMenuItem[]\n}\n```\n"
|
|
22718
22917
|
}
|
|
22719
22918
|
}
|
|
22720
22919
|
},
|
|
@@ -23004,6 +23203,12 @@
|
|
|
23004
23203
|
"default": "—",
|
|
23005
23204
|
"description": "—"
|
|
23006
23205
|
},
|
|
23206
|
+
{
|
|
23207
|
+
"name": "transition",
|
|
23208
|
+
"type": "string | false",
|
|
23209
|
+
"default": "'slide-fade'",
|
|
23210
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
23211
|
+
},
|
|
23007
23212
|
{
|
|
23008
23213
|
"name": "字段",
|
|
23009
23214
|
"type": "类型",
|
|
@@ -23197,7 +23402,7 @@
|
|
|
23197
23402
|
{
|
|
23198
23403
|
"id": "props",
|
|
23199
23404
|
"title": "Props",
|
|
23200
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `messages` | `ToastMessage[]` | — | 受控列表；省略则绑定 `toast` 服务队列 |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | 容器定位 |\n| `max` | `number` | — | 同时可见条数；超出丢掉最旧一条（仅服务队列） |\n| `teleport` | `boolean` | `true` | 浮层 Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标 |\n| `auto` | `boolean` | — | — |\n\n### ToastMessage\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `id` | `string \\| number` | — | 唯一键 |\n| `summary` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | 标题 |\n| `detail` | 同上 | — | 详情 |\n| `severity` | `'success' \\| 'info' \\| 'warn' \\| 'error' \\| …` | `'info'` | 语义色 |\n| `closable` | `boolean` | `true` | 关闭按钮 |\n| `life` | `number` | API 默认 `3000` | 自动关闭毫秒 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
23405
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `messages` | `ToastMessage[]` | — | 受控列表；省略则绑定 `toast` 服务队列 |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | 容器定位 |\n| `max` | `number` | — | 同时可见条数；超出丢掉最旧一条（仅服务队列） |\n| `teleport` | `boolean` | `true` | 浮层 Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标 |\n| `auto` | `boolean` | — | — |\n| `transition` | `string \\| false` | `'slide-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n\n### ToastMessage\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `id` | `string \\| number` | — | 唯一键 |\n| `summary` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | 标题 |\n| `detail` | 同上 | — | 详情 |\n| `severity` | `'success' \\| 'info' \\| 'warn' \\| 'error' \\| …` | `'info'` | 语义色 |\n| `closable` | `boolean` | `true` | 关闭按钮 |\n| `life` | `number` | API 默认 `3000` | 自动关闭毫秒 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
23201
23406
|
},
|
|
23202
23407
|
{
|
|
23203
23408
|
"id": "events",
|
|
@@ -23215,7 +23420,7 @@
|
|
|
23215
23420
|
"body": "<h4 id=\"ToastMessage\">ToastMessage</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n severity?: ToastSeverity\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}\n```"
|
|
23216
23421
|
}
|
|
23217
23422
|
],
|
|
23218
|
-
"markdown": "---\ntitle: Toast\ncategory: 05 / FEEDBACK\ndescription: 四角浮层通知，支持 API 与受控列表。\n---\n\n# Toast\n\n带标题 / 详情的四角通知。可用 `toast` API，或继续用 `:messages` 受控渲染。\n\n与 [Message](/components/Message) 的分工：Message 是**默认**的轻量单行反馈；Toast 仅在需要 `summary` / `detail` 或角落通知时使用。受控 `:messages` 时请自行限制条数，`max` 只作用于服务队列。\n\n> AI / 业务代码选型细则见 [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md)。\n\n**不要**用 `toast.add({ summary: '已保存' })` 代替 `message.success('已保存')`。\n\n## 引入\n\n```ts\nimport { MToast, toast, useToast } from 'morya-ui'\n```\n\n## API\n\n```vue preview src=\"./demos/Api.zh.vue\"\n```\n\n## 自定义内容\n\n`summary` / `detail` 同样支持字符串、`h()`、组件或渲染工厂。\n\n```vue preview src=\"./demos/CustomContent.zh.vue\"\n```\n\n## Controlled\n\n仍可通过 `messages` + `close` 自行管理列表。\n\n```vue preview src=\"./demos/Controlled.vue\"\n```\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `toast.success / info / warn / error` | 按语义添加 |\n| `toast.add(options)` | 添加一条 |\n| `toast.remove(id)` / `toast.close(id)` | 移除 |\n| `toast.clear()` / `toast.closeAll()` / `toast.destroyAll()` | 清空 |\n| `toast.setDefaults({ position, max })` | 默认角落位置与并发上限 |\n\n字符串入参视为 `summary`。默认 `life` 为 `3000`；`0` 表示不自动关闭。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `messages` | `ToastMessage[]` | — | 受控列表；省略则绑定 `toast` 服务队列 |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | 容器定位 |\n| `max` | `number` | — | 同时可见条数；超出丢掉最旧一条（仅服务队列） |\n| `teleport` | `boolean` | `true` | 浮层 Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标 |\n| `auto` | `boolean` | — | — |\n\n### ToastMessage\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `id` | `string \\| number` | — | 唯一键 |\n| `summary` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | 标题 |\n| `detail` | 同上 | — | 详情 |\n| `severity` | `'success' \\| 'info' \\| 'warn' \\| 'error' \\| …` | `'info'` | 语义色 |\n| `closable` | `boolean` | `true` | 关闭按钮 |\n| `life` | `number` | API 默认 `3000` | 自动关闭毫秒 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `close` | `ToastMessage` | 点击关闭；受控模式下由调用方移除 |\n\n## Slots\n\n无插槽；通过 `messages` prop 或 toast API 驱动。\n\n## 类型\n\n<h4 id=\"ToastMessage\">ToastMessage</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n severity?: ToastSeverity\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}\n```\n"
|
|
23423
|
+
"markdown": "---\ntitle: Toast\ncategory: 05 / FEEDBACK\ndescription: 四角浮层通知，支持 API 与受控列表。\n---\n\n# Toast\n\n带标题 / 详情的四角通知。可用 `toast` API，或继续用 `:messages` 受控渲染。\n\n与 [Message](/components/Message) 的分工：Message 是**默认**的轻量单行反馈；Toast 仅在需要 `summary` / `detail` 或角落通知时使用。受控 `:messages` 时请自行限制条数，`max` 只作用于服务队列。\n\n> AI / 业务代码选型细则见 [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md)。\n\n**不要**用 `toast.add({ summary: '已保存' })` 代替 `message.success('已保存')`。\n\n## 引入\n\n```ts\nimport { MToast, toast, useToast } from 'morya-ui'\n```\n\n## API\n\n```vue preview src=\"./demos/Api.zh.vue\"\n```\n\n## 自定义内容\n\n`summary` / `detail` 同样支持字符串、`h()`、组件或渲染工厂。\n\n```vue preview src=\"./demos/CustomContent.zh.vue\"\n```\n\n## Controlled\n\n仍可通过 `messages` + `close` 自行管理列表。\n\n```vue preview src=\"./demos/Controlled.vue\"\n```\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `toast.success / info / warn / error` | 按语义添加 |\n| `toast.add(options)` | 添加一条 |\n| `toast.remove(id)` / `toast.close(id)` | 移除 |\n| `toast.clear()` / `toast.closeAll()` / `toast.destroyAll()` | 清空 |\n| `toast.setDefaults({ position, max })` | 默认角落位置与并发上限 |\n\n字符串入参视为 `summary`。默认 `life` 为 `3000`；`0` 表示不自动关闭。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `messages` | `ToastMessage[]` | — | 受控列表；省略则绑定 `toast` 服务队列 |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | 容器定位 |\n| `max` | `number` | — | 同时可见条数；超出丢掉最旧一条（仅服务队列） |\n| `teleport` | `boolean` | `true` | 浮层 Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标 |\n| `auto` | `boolean` | — | — |\n| `transition` | `string \\| false` | `'slide-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n\n### ToastMessage\n\n| 字段 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `id` | `string \\| number` | — | 唯一键 |\n| `summary` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | 标题 |\n| `detail` | 同上 | — | 详情 |\n| `severity` | `'success' \\| 'info' \\| 'warn' \\| 'error' \\| …` | `'info'` | 语义色 |\n| `closable` | `boolean` | `true` | 关闭按钮 |\n| `life` | `number` | API 默认 `3000` | 自动关闭毫秒 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `close` | `ToastMessage` | 点击关闭；受控模式下由调用方移除 |\n\n## Slots\n\n无插槽；通过 `messages` prop 或 toast API 驱动。\n\n## 类型\n\n<h4 id=\"ToastMessage\">ToastMessage</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n severity?: ToastSeverity\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}\n```\n"
|
|
23219
23424
|
},
|
|
23220
23425
|
"en-US": {
|
|
23221
23426
|
"title": "Toast",
|
|
@@ -23254,7 +23459,7 @@
|
|
|
23254
23459
|
{
|
|
23255
23460
|
"id": "props",
|
|
23256
23461
|
"title": "Props",
|
|
23257
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `messages` | `ToastMessage[]` | — | Controlled list; omit to bind the `toast` service queue |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | Container placement |\n| `max` | `number` | — | Max visible items; oldest is dropped (service queue only) |\n| `teleport` | `boolean` | `true` | Whether to Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target |\n\n### ToastMessage\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `id` | `string \\| number` | — | Unique key |\n| `summary` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | Title |\n| `detail` | same as above | — | Detail |\n| `severity` | `'success' \\| 'info' \\| 'warn' \\| 'error' \\| …` | `'info'` | Tone |\n| `closable` | `boolean` | `true` | Close button |\n| `life` | `number` | API default `3000` | Auto-close ms |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
23462
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `messages` | `ToastMessage[]` | — | Controlled list; omit to bind the `toast` service queue |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | Container placement |\n| `max` | `number` | — | Max visible items; oldest is dropped (service queue only) |\n| `teleport` | `boolean` | `true` | Whether to Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target |\n| `transition` | `string \\| false` | `'slide-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n\n### ToastMessage\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `id` | `string \\| number` | — | Unique key |\n| `summary` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | Title |\n| `detail` | same as above | — | Detail |\n| `severity` | `'success' \\| 'info' \\| 'warn' \\| 'error' \\| …` | `'info'` | Tone |\n| `closable` | `boolean` | `true` | Close button |\n| `life` | `number` | API default `3000` | Auto-close ms |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
23258
23463
|
},
|
|
23259
23464
|
{
|
|
23260
23465
|
"id": "events",
|
|
@@ -23272,7 +23477,7 @@
|
|
|
23272
23477
|
"body": "<h4 id=\"ToastMessage\">ToastMessage</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n severity?: ToastSeverity\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}\n```"
|
|
23273
23478
|
}
|
|
23274
23479
|
],
|
|
23275
|
-
"markdown": "---\ntitle: Toast\ncategory: 05 / FEEDBACK\ndescription: Corner floating notifications with API and controlled lists.\n---\n\n# Toast\n\nCorner notifications with a title and optional detail. Use the `toast` API, or keep rendering with a controlled `:messages` list.\n\nVs [Message](/components/Message): Message is the **default** for short single-line feedback; Toast is for `summary` / `detail` or corner notifications. `max` applies to the service queue only.\n\n> Selection guide: [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md).\n\nDo **not** use `toast.add({ summary: 'Saved' })` when `message.success('Saved')` is enough.\n\n## Import\n\n```ts\nimport { MToast, toast, useToast } from 'morya-ui'\n```\n\n## API\n\n```vue preview src=\"./demos/Api.en.vue\"\n```\n\n## Custom content\n\n`summary` / `detail` also accept strings, `h()` VNodes, components, or render factories.\n\n```vue preview src=\"./demos/CustomContent.en.vue\"\n```\n\n## Controlled\n\nYou can still manage the list yourself with `messages` + `close`.\n\n```vue preview src=\"./demos/Controlled.vue\"\n```\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `toast.success / info / warn / error` | Add by severity |\n| `toast.add(options)` | Add one |\n| `toast.remove(id)` / `toast.close(id)` | Remove |\n| `toast.clear()` / `toast.closeAll()` / `toast.destroyAll()` | Clear all |\n| `toast.setDefaults({ position, max })` | Default corner and concurrency cap |\n\nA string argument is treated as `summary`. Default `life` is `3000`; use `0` to keep open.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `messages` | `ToastMessage[]` | — | Controlled list; omit to bind the `toast` service queue |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | Container placement |\n| `max` | `number` | — | Max visible items; oldest is dropped (service queue only) |\n| `teleport` | `boolean` | `true` | Whether to Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target |\n\n### ToastMessage\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `id` | `string \\| number` | — | Unique key |\n| `summary` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | Title |\n| `detail` | same as above | — | Detail |\n| `severity` | `'success' \\| 'info' \\| 'warn' \\| 'error' \\| …` | `'info'` | Tone |\n| `closable` | `boolean` | `true` | Close button |\n| `life` | `number` | API default `3000` | Auto-close ms |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `close` | `ToastMessage` | Close clicked; remove it yourself in controlled mode |\n\n## Slots\n\nNo slots; driven by the `messages` prop or toast API.\n\n## Types\n\n<h4 id=\"ToastMessage\">ToastMessage</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n severity?: ToastSeverity\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}\n```\n"
|
|
23480
|
+
"markdown": "---\ntitle: Toast\ncategory: 05 / FEEDBACK\ndescription: Corner floating notifications with API and controlled lists.\n---\n\n# Toast\n\nCorner notifications with a title and optional detail. Use the `toast` API, or keep rendering with a controlled `:messages` list.\n\nVs [Message](/components/Message): Message is the **default** for short single-line feedback; Toast is for `summary` / `detail` or corner notifications. `max` applies to the service queue only.\n\n> Selection guide: [`feedback.md`](../../../../design-kit/.agents/skills/morya-ui-pages/references/feedback.md).\n\nDo **not** use `toast.add({ summary: 'Saved' })` when `message.success('Saved')` is enough.\n\n## Import\n\n```ts\nimport { MToast, toast, useToast } from 'morya-ui'\n```\n\n## API\n\n```vue preview src=\"./demos/Api.en.vue\"\n```\n\n## Custom content\n\n`summary` / `detail` also accept strings, `h()` VNodes, components, or render factories.\n\n```vue preview src=\"./demos/CustomContent.en.vue\"\n```\n\n## Controlled\n\nYou can still manage the list yourself with `messages` + `close`.\n\n```vue preview src=\"./demos/Controlled.vue\"\n```\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `toast.success / info / warn / error` | Add by severity |\n| `toast.add(options)` | Add one |\n| `toast.remove(id)` / `toast.close(id)` | Remove |\n| `toast.clear()` / `toast.closeAll()` / `toast.destroyAll()` | Clear all |\n| `toast.setDefaults({ position, max })` | Default corner and concurrency cap |\n\nA string argument is treated as `summary`. Default `life` is `3000`; use `0` to keep open.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `messages` | `ToastMessage[]` | — | Controlled list; omit to bind the `toast` service queue |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | Container placement |\n| `max` | `number` | — | Max visible items; oldest is dropped (service queue only) |\n| `teleport` | `boolean` | `true` | Whether to Teleport |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target |\n| `transition` | `string \\| false` | `'slide-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n\n### ToastMessage\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `id` | `string \\| number` | — | Unique key |\n| `summary` | `string \\| number \\| VNode \\| Component \\| (() => VNodeChild)` | — | Title |\n| `detail` | same as above | — | Detail |\n| `severity` | `'success' \\| 'info' \\| 'warn' \\| 'error' \\| …` | `'info'` | Tone |\n| `closable` | `boolean` | `true` | Close button |\n| `life` | `number` | API default `3000` | Auto-close ms |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `close` | `ToastMessage` | Close clicked; remove it yourself in controlled mode |\n\n## Slots\n\nNo slots; driven by the `messages` prop or toast API.\n\n## Types\n\n<h4 id=\"ToastMessage\">ToastMessage</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface ToastMessage {\n id: string | number\n summary: MRenderable\n detail?: MRenderable\n severity?: ToastSeverity\n closable?: boolean\n /** Auto-close delay in ms. `0` keeps it open. Default `3000` for API calls. */\n life?: number\n}\n```\n"
|
|
23276
23481
|
}
|
|
23277
23482
|
}
|
|
23278
23483
|
},
|
|
@@ -23694,6 +23899,12 @@
|
|
|
23694
23899
|
"default": "'body'",
|
|
23695
23900
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
23696
23901
|
},
|
|
23902
|
+
{
|
|
23903
|
+
"name": "transition",
|
|
23904
|
+
"type": "string | false",
|
|
23905
|
+
"default": "'fade'",
|
|
23906
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
23907
|
+
},
|
|
23697
23908
|
{
|
|
23698
23909
|
"name": "pt",
|
|
23699
23910
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
@@ -23769,7 +23980,7 @@
|
|
|
23769
23980
|
{
|
|
23770
23981
|
"id": "props",
|
|
23771
23982
|
"title": "Props",
|
|
23772
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `content` | `string` | — | 提示文案。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'top'` | 相对触发元素的位置。 |\n| `disabled` | `boolean` | `false` | 禁用提示。 |\n| `showDelay` | `number` | `0` | 显示前延迟（毫秒）。 |\n| `hideDelay` | `number` | `0` | 隐藏前延迟（毫秒）。 |\n| `maxWidth` | `string \\| number` | — | 提示最大宽度；数字为 px。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
23983
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `content` | `string` | — | 提示文案。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'top'` | 相对触发元素的位置。 |\n| `disabled` | `boolean` | `false` | 禁用提示。 |\n| `showDelay` | `number` | `0` | 显示前延迟（毫秒）。 |\n| `hideDelay` | `number` | `0` | 隐藏前延迟（毫秒）。 |\n| `maxWidth` | `string \\| number` | — | 提示最大宽度；数字为 px。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
23773
23984
|
},
|
|
23774
23985
|
{
|
|
23775
23986
|
"id": "slots",
|
|
@@ -23787,7 +23998,7 @@
|
|
|
23787
23998
|
"body": "无自定义事件。"
|
|
23788
23999
|
}
|
|
23789
24000
|
],
|
|
23790
|
-
"markdown": "---\ntitle: Tooltip\ncategory: 05 / FEEDBACK\ndescription: 悬停或聚焦时显示的短提示。支持 placement、disabled 与 showDelay。\n---\n\n# Tooltip\n\n为触发元素提供短提示，适合图标按钮或截断文本说明。\n\n## 引入\n\n```ts\nimport { MButton, MTooltip } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `content` | `string` | — | 提示文案。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'top'` | 相对触发元素的位置。 |\n| `disabled` | `boolean` | `false` | 禁用提示。 |\n| `showDelay` | `number` | `0` | 显示前延迟（毫秒）。 |\n| `hideDelay` | `number` | `0` | 隐藏前延迟（毫秒）。 |\n| `maxWidth` | `string \\| number` | — | 提示最大宽度；数字为 px。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n\n## 无障碍\n\n- 提示内容会通过 `role=\"tooltip\"` 关联到触发元素（hover / focus 显示）。\n- 触发控件需可聚焦；纯图标按钮请设置 `aria-label`。\n- 重要信息不要只放在 Tooltip 中，应提供可见文案或 `aria-label`。\n\n## Events\n\n无自定义事件。\n"
|
|
24001
|
+
"markdown": "---\ntitle: Tooltip\ncategory: 05 / FEEDBACK\ndescription: 悬停或聚焦时显示的短提示。支持 placement、disabled 与 showDelay。\n---\n\n# Tooltip\n\n为触发元素提供短提示，适合图标按钮或截断文本说明。\n\n## 引入\n\n```ts\nimport { MButton, MTooltip } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `content` | `string` | — | 提示文案。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'top'` | 相对触发元素的位置。 |\n| `disabled` | `boolean` | `false` | 禁用提示。 |\n| `showDelay` | `number` | `0` | 显示前延迟（毫秒）。 |\n| `hideDelay` | `number` | `0` | 隐藏前延迟（毫秒）。 |\n| `maxWidth` | `string \\| number` | — | 提示最大宽度；数字为 px。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n\n## 无障碍\n\n- 提示内容会通过 `role=\"tooltip\"` 关联到触发元素（hover / focus 显示）。\n- 触发控件需可聚焦；纯图标按钮请设置 `aria-label`。\n- 重要信息不要只放在 Tooltip 中，应提供可见文案或 `aria-label`。\n\n## Events\n\n无自定义事件。\n"
|
|
23791
24002
|
},
|
|
23792
24003
|
"en-US": {
|
|
23793
24004
|
"title": "Tooltip",
|
|
@@ -23811,7 +24022,7 @@
|
|
|
23811
24022
|
{
|
|
23812
24023
|
"id": "props",
|
|
23813
24024
|
"title": "Props",
|
|
23814
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `content` | `string` | — | Tooltip text. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'top'` | Position relative to the trigger. |\n| `disabled` | `boolean` | `false` | Disable the tooltip. |\n| `showDelay` | `number` | `0` | Delay before showing, in milliseconds. |\n| `hideDelay` | `number` | `0` | Delay before hiding, in milliseconds. |\n| `maxWidth` | `string \\| number` | — | Max content width; a number is pixels. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
24025
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `content` | `string` | — | Tooltip text. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'top'` | Position relative to the trigger. |\n| `disabled` | `boolean` | `false` | Disable the tooltip. |\n| `showDelay` | `number` | `0` | Delay before showing, in milliseconds. |\n| `hideDelay` | `number` | `0` | Delay before hiding, in milliseconds. |\n| `maxWidth` | `string \\| number` | — | Max content width; a number is pixels. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
23815
24026
|
},
|
|
23816
24027
|
{
|
|
23817
24028
|
"id": "slots",
|
|
@@ -23829,7 +24040,7 @@
|
|
|
23829
24040
|
"body": "No custom events."
|
|
23830
24041
|
}
|
|
23831
24042
|
],
|
|
23832
|
-
"markdown": "---\ntitle: Tooltip\ncategory: 05 / FEEDBACK\ndescription: A short hint shown on hover or focus. Supports placement, disabled, and showDelay.\n---\n\n# Tooltip\n\nShort hint for a trigger element, suited to icon buttons or truncated text.\n\n## Import\n\n```ts\nimport { MButton, MTooltip } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `content` | `string` | — | Tooltip text. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'top'` | Position relative to the trigger. |\n| `disabled` | `boolean` | `false` | Disable the tooltip. |\n| `showDelay` | `number` | `0` | Delay before showing, in milliseconds. |\n| `hideDelay` | `number` | `0` | Delay before hiding, in milliseconds. |\n| `maxWidth` | `string \\| number` | — | Max content width; a number is pixels. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n\n## Accessibility\n\n- Tooltip content is exposed with `role=\"tooltip\"` on hover/focus.\n- Triggers must be focusable; icon-only controls need `aria-label`.\n- Do not hide critical information in tooltips only—provide visible text or labels.\n\n## Events\n\nNo custom events.\n"
|
|
24043
|
+
"markdown": "---\ntitle: Tooltip\ncategory: 05 / FEEDBACK\ndescription: A short hint shown on hover or focus. Supports placement, disabled, and showDelay.\n---\n\n# Tooltip\n\nShort hint for a trigger element, suited to icon buttons or truncated text.\n\n## Import\n\n```ts\nimport { MButton, MTooltip } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `content` | `string` | — | Tooltip text. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'top'` | Position relative to the trigger. |\n| `disabled` | `boolean` | `false` | Disable the tooltip. |\n| `showDelay` | `number` | `0` | Delay before showing, in milliseconds. |\n| `hideDelay` | `number` | `0` | Delay before hiding, in milliseconds. |\n| `maxWidth` | `string \\| number` | — | Max content width; a number is pixels. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n\n## Accessibility\n\n- Tooltip content is exposed with `role=\"tooltip\"` on hover/focus.\n- Triggers must be focusable; icon-only controls need `aria-label`.\n- Do not hide critical information in tooltips only—provide visible text or labels.\n\n## Events\n\nNo custom events.\n"
|
|
23833
24044
|
}
|
|
23834
24045
|
}
|
|
23835
24046
|
},
|
|
@@ -24337,6 +24548,12 @@
|
|
|
24337
24548
|
"default": "'body'",
|
|
24338
24549
|
"description": "挂载目标；`'self'` / `false` 就地渲染。"
|
|
24339
24550
|
},
|
|
24551
|
+
{
|
|
24552
|
+
"name": "transition",
|
|
24553
|
+
"type": "string | false",
|
|
24554
|
+
"default": "'scale-fade'",
|
|
24555
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
24556
|
+
},
|
|
24340
24557
|
{
|
|
24341
24558
|
"name": "errorMessage",
|
|
24342
24559
|
"type": "string",
|
|
@@ -24521,7 +24738,7 @@
|
|
|
24521
24738
|
{
|
|
24522
24739
|
"id": "props",
|
|
24523
24740
|
"title": "Props",
|
|
24524
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `options` | `TreeSelectNode[]` | — | 树节点。 |\n| `modelValue` | `string \\| string[] \\| null` | `null` | 选中节点 key；多选为数组。 |\n| `placeholder` | `string` | locale | 占位文案。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `checkable` | `boolean` | `false` | 显示勾选框（级联语义同 Tree）。 |\n| `checkStrictly` | `boolean` | `false` | 父子不关联。 |\n| `checkStrategy` | `'all' \\| 'parent' \\| 'child'` | `'all'` | 级联时绑定哪些 keys。 |\n| `clearable` | `boolean` | `false` | 显示清空。 |\n| `filterable` | `boolean` | `false` | 面板内过滤。 |\n| `showPath` | `boolean` | `false` | 展示祖先路径。 |\n| `separator` | `string` | `' / '` | 路径分隔符。 |\n| `maxTagCount` | `number` | — | 多选最多展示的 tag 数。 |\n| `selectionMode` | `'single' \\| 'multiple'` | `'single'` | 兼容字段；请优先用 `multiple`。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `label` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
24741
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `options` | `TreeSelectNode[]` | — | 树节点。 |\n| `modelValue` | `string \\| string[] \\| null` | `null` | 选中节点 key；多选为数组。 |\n| `placeholder` | `string` | locale | 占位文案。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `checkable` | `boolean` | `false` | 显示勾选框（级联语义同 Tree）。 |\n| `checkStrictly` | `boolean` | `false` | 父子不关联。 |\n| `checkStrategy` | `'all' \\| 'parent' \\| 'child'` | `'all'` | 级联时绑定哪些 keys。 |\n| `clearable` | `boolean` | `false` | 显示清空。 |\n| `filterable` | `boolean` | `false` | 面板内过滤。 |\n| `showPath` | `boolean` | `false` | 展示祖先路径。 |\n| `separator` | `string` | `' / '` | 路径分隔符。 |\n| `maxTagCount` | `number` | — | 多选最多展示的 tag 数。 |\n| `selectionMode` | `'single' \\| 'multiple'` | `'single'` | 兼容字段；请优先用 `multiple`。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `label` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
24525
24742
|
},
|
|
24526
24743
|
{
|
|
24527
24744
|
"id": "events",
|
|
@@ -24539,7 +24756,7 @@
|
|
|
24539
24756
|
"body": "<h4 id=\"TreeSelectNode\">TreeSelectNode</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface TreeSelectNode {\n key: string\n label: string\n children?: TreeSelectNode[]\n disabled?: boolean\n}\n```"
|
|
24540
24757
|
}
|
|
24541
24758
|
],
|
|
24542
|
-
"markdown": "---\ntitle: TreeSelect\ncategory: 02 / FORM\ndescription: 下拉树选择。支持单选/多选、勾选级联、过滤、清空与路径展示。\n---\n\n# TreeSelect\n\n在下拉中展示可展开树。`multiple` / `checkable` 打开多选；另支持 `filterable`、`clearable`、`showPath`。\n\n## 引入\n\n```ts\nimport { MTreeSelect } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Multiple / filter / path\n\n```vue preview src=\"./demos/MultipleFilterPath.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `options` | `TreeSelectNode[]` | — | 树节点。 |\n| `modelValue` | `string \\| string[] \\| null` | `null` | 选中节点 key；多选为数组。 |\n| `placeholder` | `string` | locale | 占位文案。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `checkable` | `boolean` | `false` | 显示勾选框（级联语义同 Tree）。 |\n| `checkStrictly` | `boolean` | `false` | 父子不关联。 |\n| `checkStrategy` | `'all' \\| 'parent' \\| 'child'` | `'all'` | 级联时绑定哪些 keys。 |\n| `clearable` | `boolean` | `false` | 显示清空。 |\n| `filterable` | `boolean` | `false` | 面板内过滤。 |\n| `showPath` | `boolean` | `false` | 展示祖先路径。 |\n| `separator` | `string` | `' / '` | 路径分隔符。 |\n| `maxTagCount` | `number` | — | 多选最多展示的 tag 数。 |\n| `selectionMode` | `'single' \\| 'multiple'` | `'single'` | 兼容字段；请优先用 `multiple`。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `label` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| string[] \\| null` | 选中变化。 |\n| `clear` | — | 点击清空。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `value` | 触发器展示。 |\n| `option` | 树节点 `{ node }`。 |\n\n## 类型\n\n<h4 id=\"TreeSelectNode\">TreeSelectNode</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface TreeSelectNode {\n key: string\n label: string\n children?: TreeSelectNode[]\n disabled?: boolean\n}\n```\n"
|
|
24759
|
+
"markdown": "---\ntitle: TreeSelect\ncategory: 02 / FORM\ndescription: 下拉树选择。支持单选/多选、勾选级联、过滤、清空与路径展示。\n---\n\n# TreeSelect\n\n在下拉中展示可展开树。`multiple` / `checkable` 打开多选；另支持 `filterable`、`clearable`、`showPath`。\n\n## 引入\n\n```ts\nimport { MTreeSelect } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Multiple / filter / path\n\n```vue preview src=\"./demos/MultipleFilterPath.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `options` | `TreeSelectNode[]` | — | 树节点。 |\n| `modelValue` | `string \\| string[] \\| null` | `null` | 选中节点 key；多选为数组。 |\n| `placeholder` | `string` | locale | 占位文案。 |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`；可继承 ConfigProvider。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `multiple` | `boolean` | `false` | 多选。 |\n| `checkable` | `boolean` | `false` | 显示勾选框（级联语义同 Tree）。 |\n| `checkStrictly` | `boolean` | `false` | 父子不关联。 |\n| `checkStrategy` | `'all' \\| 'parent' \\| 'child'` | `'all'` | 级联时绑定哪些 keys。 |\n| `clearable` | `boolean` | `false` | 显示清空。 |\n| `filterable` | `boolean` | `false` | 面板内过滤。 |\n| `showPath` | `boolean` | `false` | 展示祖先路径。 |\n| `separator` | `string` | `' / '` | 路径分隔符。 |\n| `maxTagCount` | `number` | — | 多选最多展示的 tag 数。 |\n| `selectionMode` | `'single' \\| 'multiple'` | `'single'` | 兼容字段；请优先用 `multiple`。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `invalid` | `boolean` | — | — |\n| `label` | `string` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| string[] \\| null` | 选中变化。 |\n| `clear` | — | 点击清空。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `value` | 触发器展示。 |\n| `option` | 树节点 `{ node }`。 |\n\n## 类型\n\n<h4 id=\"TreeSelectNode\">TreeSelectNode</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface TreeSelectNode {\n key: string\n label: string\n children?: TreeSelectNode[]\n disabled?: boolean\n}\n```\n"
|
|
24543
24760
|
},
|
|
24544
24761
|
"en-US": {
|
|
24545
24762
|
"title": "TreeSelect",
|
|
@@ -24573,7 +24790,7 @@
|
|
|
24573
24790
|
{
|
|
24574
24791
|
"id": "props",
|
|
24575
24792
|
"title": "Props",
|
|
24576
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `TreeSelectNode[]` | — | Tree nodes. |\n| `modelValue` | `string \\| string[] \\| null` | `null` | Selected key(s); array when multiple. |\n| `placeholder` | `string` | locale `selectPlaceholder` | Placeholder text. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `multiple` | `boolean` | `false` | Multiple selection. |\n| `checkable` | `boolean` | `false` | Show checkboxes (cascade like Tree). |\n| `checkStrictly` | `boolean` | `false` | Independent parent/child checks. |\n| `checkStrategy` | `'all' \\| 'parent' \\| 'child'` | `'all'` | Which keys to bind when cascading. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `filterable` | `boolean` | `false` | Filter inside the panel. |\n| `showPath` | `boolean` | `false` | Show ancestor labels. |\n| `separator` | `string` | `' / '` | Path separator. |\n| `maxTagCount` | `number` | — | Max visible tags when multiple. |\n| `selectionMode` | `'single' \\| 'multiple'` | `'single'` | Compatibility; prefer `multiple`. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
24793
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `TreeSelectNode[]` | — | Tree nodes. |\n| `modelValue` | `string \\| string[] \\| null` | `null` | Selected key(s); array when multiple. |\n| `placeholder` | `string` | locale `selectPlaceholder` | Placeholder text. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `multiple` | `boolean` | `false` | Multiple selection. |\n| `checkable` | `boolean` | `false` | Show checkboxes (cascade like Tree). |\n| `checkStrictly` | `boolean` | `false` | Independent parent/child checks. |\n| `checkStrategy` | `'all' \\| 'parent' \\| 'child'` | `'all'` | Which keys to bind when cascading. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `filterable` | `boolean` | `false` | Filter inside the panel. |\n| `showPath` | `boolean` | `false` | Show ancestor labels. |\n| `separator` | `string` | `' / '` | Path separator. |\n| `maxTagCount` | `number` | — | Max visible tags when multiple. |\n| `selectionMode` | `'single' \\| 'multiple'` | `'single'` | Compatibility; prefer `multiple`. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
24577
24794
|
},
|
|
24578
24795
|
{
|
|
24579
24796
|
"id": "events",
|
|
@@ -24591,7 +24808,7 @@
|
|
|
24591
24808
|
"body": "<h4 id=\"TreeSelectNode\">TreeSelectNode</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface TreeSelectNode {\n key: string\n label: string\n children?: TreeSelectNode[]\n disabled?: boolean\n}\n```"
|
|
24592
24809
|
}
|
|
24593
24810
|
],
|
|
24594
|
-
"markdown": "---\ntitle: TreeSelect\ncategory: 02 / FORM\ndescription: Tree select in a dropdown. Supports single/multiple, cascade checks, filter, clear, and path labels.\n---\n\n# TreeSelect\n\nShow an expandable tree in a dropdown. `multiple` / `checkable` enable multi-select; `filterable`, `clearable`, and `showPath` are also available.\n\n## Import\n\n```ts\nimport { MTreeSelect } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Multiple / filter / path\n\n```vue preview src=\"./demos/MultipleFilterPath.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `TreeSelectNode[]` | — | Tree nodes. |\n| `modelValue` | `string \\| string[] \\| null` | `null` | Selected key(s); array when multiple. |\n| `placeholder` | `string` | locale `selectPlaceholder` | Placeholder text. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `multiple` | `boolean` | `false` | Multiple selection. |\n| `checkable` | `boolean` | `false` | Show checkboxes (cascade like Tree). |\n| `checkStrictly` | `boolean` | `false` | Independent parent/child checks. |\n| `checkStrategy` | `'all' \\| 'parent' \\| 'child'` | `'all'` | Which keys to bind when cascading. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `filterable` | `boolean` | `false` | Filter inside the panel. |\n| `showPath` | `boolean` | `false` | Show ancestor labels. |\n| `separator` | `string` | `' / '` | Path separator. |\n| `maxTagCount` | `number` | — | Max visible tags when multiple. |\n| `selectionMode` | `'single' \\| 'multiple'` | `'single'` | Compatibility; prefer `multiple`. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| string[] \\| null` | Emitted when the selection changes. |\n| `clear` | — | Emitted when cleared. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `value` | Trigger display. |\n| `option` | Tree node `{ node }`. |\n\n## Types\n\n<h4 id=\"TreeSelectNode\">TreeSelectNode</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface TreeSelectNode {\n key: string\n label: string\n children?: TreeSelectNode[]\n disabled?: boolean\n}\n```\n"
|
|
24811
|
+
"markdown": "---\ntitle: TreeSelect\ncategory: 02 / FORM\ndescription: Tree select in a dropdown. Supports single/multiple, cascade checks, filter, clear, and path labels.\n---\n\n# TreeSelect\n\nShow an expandable tree in a dropdown. `multiple` / `checkable` enable multi-select; `filterable`, `clearable`, and `showPath` are also available.\n\n## Import\n\n```ts\nimport { MTreeSelect } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Multiple / filter / path\n\n```vue preview src=\"./demos/MultipleFilterPath.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `TreeSelectNode[]` | — | Tree nodes. |\n| `modelValue` | `string \\| string[] \\| null` | `null` | Selected key(s); array when multiple. |\n| `placeholder` | `string` | locale `selectPlaceholder` | Placeholder text. |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | `small` / `large`; can inherit from ConfigProvider. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `multiple` | `boolean` | `false` | Multiple selection. |\n| `checkable` | `boolean` | `false` | Show checkboxes (cascade like Tree). |\n| `checkStrictly` | `boolean` | `false` | Independent parent/child checks. |\n| `checkStrategy` | `'all' \\| 'parent' \\| 'child'` | `'all'` | Which keys to bind when cascading. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `filterable` | `boolean` | `false` | Filter inside the panel. |\n| `showPath` | `boolean` | `false` | Show ancestor labels. |\n| `separator` | `string` | `' / '` | Path separator. |\n| `maxTagCount` | `number` | — | Max visible tags when multiple. |\n| `selectionMode` | `'single' \\| 'multiple'` | `'single'` | Compatibility; prefer `multiple`. |\n| `teleport` | `boolean` | `true` | Overlay Teleport; defaults to `body`. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target; `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string \\| string[] \\| null` | Emitted when the selection changes. |\n| `clear` | — | Emitted when cleared. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `value` | Trigger display. |\n| `option` | Tree node `{ node }`. |\n\n## Types\n\n<h4 id=\"TreeSelectNode\">TreeSelectNode</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface TreeSelectNode {\n key: string\n label: string\n children?: TreeSelectNode[]\n disabled?: boolean\n}\n```\n"
|
|
24595
24812
|
}
|
|
24596
24813
|
}
|
|
24597
24814
|
},
|
|
@@ -25013,7 +25230,7 @@
|
|
|
25013
25230
|
"zh-CN": {
|
|
25014
25231
|
"title": "介绍",
|
|
25015
25232
|
"description": "Morya UI 是什么、适合谁用、如何开始。",
|
|
25016
|
-
"markdown": "---\ntitle: 介绍\norder: 1\ndescription: Morya UI 是什么、适合谁用、如何开始。\n---\n\n# 介绍\n\n**Morya UI**（`morya-ui`）是一套**开源**的 Vue 3 组件库，内置设计令牌、亮暗主题、国际化与交互式文档。\n\n- **文档站**：[morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/)\n- **源码**：[GitHub](https://github.com/morya-space/morya-ui)\n- **npm**：[`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## 为什么选择 Morya UI\n\n| | |\n| --- | --- |\n| **90+ 个组件** | 基础、表单、导航、数据展示、布局、反馈一应俱全 |\n| **主题系统** | `--m-*` 设计令牌，亮/暗色、`useTheme` / `useDensity` / `useMotion` 同包导出 |\n| **TypeScript** | Composition API 编写，Props / Emits / locale 完整类型 |\n| **按需加载** | ESM 子路径 + `MoryaUIResolver`，支持 tree-shaking |\n| **文档即预览** | 每个组件自带 Markdown + 可交互 `vue preview` |\n\n## 适用场景\n\n- 管理后台、运营平台、SaaS 控制台\n- 需要统一视觉语言的中大型 Vue 3 应用\n- 希望开箱即用主题、浮层与表单能力的团队\n\n## 包结构\n\n| 包 | 说明 |\n| --- | --- |\n| `morya-ui` | 组件、样式、主题 API、文档站源码 |\n| `@morya-ui/setup` | （可选）业务项目一键接入：库 + AI Skill / rules + MCP |\n| `@morya-ui/mcp` | （可选）MCP 服务，供支持该协议的 AI 客户端检索文档 |\n\n## 安装\n\n```bash\npnpm add morya-ui\n```\n\n需要 Vue 3（推荐 3.5 及以上）。支持 [Nuxt / Astro / Vite SSR 等](/docs/ssr)。详见 [快速上手](/docs/quick-start)。\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：安装与最小示例\n- [一键接入](/docs/setup)：`@morya-ui/setup` 安装库与 AI 配置\n- [设计令牌](/docs/design-tokens)：全部 `--m-*` 变量与用途\n- [主题](/docs/theme)
|
|
25233
|
+
"markdown": "---\ntitle: 介绍\norder: 1\ndescription: Morya UI 是什么、适合谁用、如何开始。\n---\n\n# 介绍\n\n**Morya UI**（`morya-ui`）是一套**开源**的 Vue 3 组件库，内置设计令牌、亮暗主题、国际化与交互式文档。\n\n- **文档站**：[morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/)\n- **源码**：[GitHub](https://github.com/morya-space/morya-ui)\n- **npm**：[`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## 为什么选择 Morya UI\n\n| | |\n| --- | --- |\n| **90+ 个组件** | 基础、表单、导航、数据展示、布局、反馈一应俱全 |\n| **主题系统** | `--m-*` 设计令牌，亮/暗色、`useTheme` / `useDensity` / `useMotion` 同包导出 |\n| **TypeScript** | Composition API 编写，Props / Emits / locale 完整类型 |\n| **按需加载** | ESM 子路径 + `MoryaUIResolver`，支持 tree-shaking |\n| **文档即预览** | 每个组件自带 Markdown + 可交互 `vue preview` |\n\n## 适用场景\n\n- 管理后台、运营平台、SaaS 控制台\n- 需要统一视觉语言的中大型 Vue 3 应用\n- 希望开箱即用主题、浮层与表单能力的团队\n\n## 包结构\n\n| 包 | 说明 |\n| --- | --- |\n| `morya-ui` | 组件、样式、主题 API、文档站源码 |\n| `@morya-ui/setup` | （可选）业务项目一键接入：库 + AI Skill / rules + MCP |\n| `@morya-ui/mcp` | （可选）MCP 服务，供支持该协议的 AI 客户端检索文档 |\n\n## 安装\n\n```bash\npnpm add morya-ui\n```\n\n需要 Vue 3（推荐 3.5 及以上）。支持 [Nuxt / Astro / Vite SSR 等](/docs/ssr)。详见 [快速上手](/docs/quick-start)。\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：安装与最小示例\n- [一键接入](/docs/setup)：`@morya-ui/setup` 安装库与 AI 配置\n- [设计令牌](/docs/design-tokens)：全部 `--m-*` 变量与用途\n- [主题](/docs/theme)：亮暗色与密度\n- [动效](/docs/motion)：强度偏好与进出场预设\n- [样式与 attrs](/docs/attrs)：fallthrough、`pt`、事件在各组件上的落点\n- [API 类型](/docs/types)：Props 里 `FieldPassThrough`、`SelectOption` 等类型的结构\n- [全局配置](/docs/config)：`ConfigProvider` / `createMoryaUI`\n- [SSR](/docs/ssr)：Nuxt / Astro 等集成\n- [无障碍](/docs/accessibility)：键盘、表单与浮层约定\n- [AI 接入](/docs/ai-setup)：配合 Agent 生成业务页面\n- [Agent Skill](/docs/agent-skill)：`morya-ui-pages` 页面生成约定\n- [Agent MCP](/docs/mcp)：AI 客户端文档检索\n- [组件](/components)：浏览全部组件与 API\n- [参与贡献](https://github.com/morya-space/morya-ui/blob/main/CONTRIBUTING.zh-CN.md)\n",
|
|
25017
25234
|
"sections": [
|
|
25018
25235
|
{
|
|
25019
25236
|
"title": "",
|
|
@@ -25043,14 +25260,14 @@
|
|
|
25043
25260
|
{
|
|
25044
25261
|
"title": "下一步",
|
|
25045
25262
|
"id": "下一步",
|
|
25046
|
-
"body": "- [快速上手](/docs/quick-start)：安装与最小示例\n- [一键接入](/docs/setup)：`@morya-ui/setup` 安装库与 AI 配置\n- [设计令牌](/docs/design-tokens)：全部 `--m-*` 变量与用途\n- [主题](/docs/theme)
|
|
25263
|
+
"body": "- [快速上手](/docs/quick-start)：安装与最小示例\n- [一键接入](/docs/setup)：`@morya-ui/setup` 安装库与 AI 配置\n- [设计令牌](/docs/design-tokens)：全部 `--m-*` 变量与用途\n- [主题](/docs/theme)：亮暗色与密度\n- [动效](/docs/motion)：强度偏好与进出场预设\n- [样式与 attrs](/docs/attrs)：fallthrough、`pt`、事件在各组件上的落点\n- [API 类型](/docs/types)：Props 里 `FieldPassThrough`、`SelectOption` 等类型的结构\n- [全局配置](/docs/config)：`ConfigProvider` / `createMoryaUI`\n- [SSR](/docs/ssr)：Nuxt / Astro 等集成\n- [无障碍](/docs/accessibility)：键盘、表单与浮层约定\n- [AI 接入](/docs/ai-setup)：配合 Agent 生成业务页面\n- [Agent Skill](/docs/agent-skill)：`morya-ui-pages` 页面生成约定\n- [Agent MCP](/docs/mcp)：AI 客户端文档检索\n- [组件](/components)：浏览全部组件与 API\n- [参与贡献](https://github.com/morya-space/morya-ui/blob/main/CONTRIBUTING.zh-CN.md)"
|
|
25047
25264
|
}
|
|
25048
25265
|
]
|
|
25049
25266
|
},
|
|
25050
25267
|
"en-US": {
|
|
25051
25268
|
"title": "Introduction",
|
|
25052
25269
|
"description": "What Morya UI is, who it is for, and how to get started.",
|
|
25053
|
-
"markdown": "---\ntitle: Introduction\norder: 1\ndescription: What Morya UI is, who it is for, and how to get started.\n---\n\n# Introduction\n\n**Morya UI** (`morya-ui`) is an **open-source** Vue 3 component library with design tokens, light/dark themes, i18n, and interactive documentation.\n\n- **Docs**: [morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/)\n- **Source**: [GitHub](https://github.com/morya-space/morya-ui)\n- **npm**: [`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## Why Morya UI\n\n| | |\n| --- | --- |\n| **90+ components** | Basics, forms, navigation, data display, layout, and feedback |\n| **Theme system** | `--m-*` design tokens; `useTheme` / `useDensity` / `useMotion` in the same package |\n| **TypeScript** | Built with Composition API; fully typed props, emits, and locale |\n| **On-demand** | ESM subpaths + `MoryaUIResolver` with tree-shaking |\n| **Docs as preview** | Markdown + interactive `vue preview` for every component |\n\n## Use cases\n\n- Admin dashboards, ops consoles, SaaS back offices\n- Medium-to-large Vue 3 apps that need a shared visual language\n- Teams that want themes, overlays, and forms without reinventing primitives\n\n## Packages\n\n| Package | Role |\n| --- | --- |\n| `morya-ui` | Components, styles, theme APIs, docs site source |\n| `@morya-ui/setup` | (Optional) One-shot app onboarding: library + AI skill / rules + MCP |\n| `@morya-ui/mcp` | (Optional) MCP server for AI clients that support the protocol |\n\n## Install\n\n```bash\npnpm add morya-ui\n```\n\nRequires Vue 3 (3.5+ recommended). Works with [Nuxt, Astro, Vite SSR, and more](/docs/ssr). See [Quick start](/docs/quick-start).\n\n## Next steps\n\n- [Quick start](/docs/quick-start): install and a minimal example\n- [One-shot setup](/docs/setup): `@morya-ui/setup` for library and AI config\n- [Design tokens](/docs/design-tokens): full `--m-*` reference\n- [Theme](/docs/theme): light/dark and motion\n- [Styling & attrs](/docs/attrs): fallthrough, `pt`, and event placement\n- [API types](/docs/types): shapes behind names like `FieldPassThrough`, `SelectOption`\n- [Configuration](/docs/config): `ConfigProvider` / `createMoryaUI`\n- [SSR](/docs/ssr): Nuxt, Astro, and similar setups\n- [Accessibility](/docs/accessibility): forms, keyboard, overlays\n- [AI setup](/docs/ai-setup): Agent-assisted page generation\n- [Agent Skill](/docs/agent-skill): `morya-ui-pages` page-generation contract\n- [Agent MCP](/docs/mcp): doc lookup for AI clients\n- [Components](/components): browse all components and APIs\n- [Contributing](https://github.com/morya-space/morya-ui/blob/main/CONTRIBUTING.md)\n",
|
|
25270
|
+
"markdown": "---\ntitle: Introduction\norder: 1\ndescription: What Morya UI is, who it is for, and how to get started.\n---\n\n# Introduction\n\n**Morya UI** (`morya-ui`) is an **open-source** Vue 3 component library with design tokens, light/dark themes, i18n, and interactive documentation.\n\n- **Docs**: [morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/)\n- **Source**: [GitHub](https://github.com/morya-space/morya-ui)\n- **npm**: [`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## Why Morya UI\n\n| | |\n| --- | --- |\n| **90+ components** | Basics, forms, navigation, data display, layout, and feedback |\n| **Theme system** | `--m-*` design tokens; `useTheme` / `useDensity` / `useMotion` in the same package |\n| **TypeScript** | Built with Composition API; fully typed props, emits, and locale |\n| **On-demand** | ESM subpaths + `MoryaUIResolver` with tree-shaking |\n| **Docs as preview** | Markdown + interactive `vue preview` for every component |\n\n## Use cases\n\n- Admin dashboards, ops consoles, SaaS back offices\n- Medium-to-large Vue 3 apps that need a shared visual language\n- Teams that want themes, overlays, and forms without reinventing primitives\n\n## Packages\n\n| Package | Role |\n| --- | --- |\n| `morya-ui` | Components, styles, theme APIs, docs site source |\n| `@morya-ui/setup` | (Optional) One-shot app onboarding: library + AI skill / rules + MCP |\n| `@morya-ui/mcp` | (Optional) MCP server for AI clients that support the protocol |\n\n## Install\n\n```bash\npnpm add morya-ui\n```\n\nRequires Vue 3 (3.5+ recommended). Works with [Nuxt, Astro, Vite SSR, and more](/docs/ssr). See [Quick start](/docs/quick-start).\n\n## Next steps\n\n- [Quick start](/docs/quick-start): install and a minimal example\n- [One-shot setup](/docs/setup): `@morya-ui/setup` for library and AI config\n- [Design tokens](/docs/design-tokens): full `--m-*` reference\n- [Theme](/docs/theme): light/dark and density\n- [Motion](/docs/motion): intensity preference and enter/exit presets\n- [Styling & attrs](/docs/attrs): fallthrough, `pt`, and event placement\n- [API types](/docs/types): shapes behind names like `FieldPassThrough`, `SelectOption`\n- [Configuration](/docs/config): `ConfigProvider` / `createMoryaUI`\n- [SSR](/docs/ssr): Nuxt, Astro, and similar setups\n- [Accessibility](/docs/accessibility): forms, keyboard, overlays\n- [AI setup](/docs/ai-setup): Agent-assisted page generation\n- [Agent Skill](/docs/agent-skill): `morya-ui-pages` page-generation contract\n- [Agent MCP](/docs/mcp): doc lookup for AI clients\n- [Components](/components): browse all components and APIs\n- [Contributing](https://github.com/morya-space/morya-ui/blob/main/CONTRIBUTING.md)\n",
|
|
25054
25271
|
"sections": [
|
|
25055
25272
|
{
|
|
25056
25273
|
"title": "",
|
|
@@ -25080,7 +25297,7 @@
|
|
|
25080
25297
|
{
|
|
25081
25298
|
"title": "Next steps",
|
|
25082
25299
|
"id": "next-steps",
|
|
25083
|
-
"body": "- [Quick start](/docs/quick-start): install and a minimal example\n- [One-shot setup](/docs/setup): `@morya-ui/setup` for library and AI config\n- [Design tokens](/docs/design-tokens): full `--m-*` reference\n- [Theme](/docs/theme): light/dark and motion\n- [Styling & attrs](/docs/attrs): fallthrough, `pt`, and event placement\n- [API types](/docs/types): shapes behind names like `FieldPassThrough`, `SelectOption`\n- [Configuration](/docs/config): `ConfigProvider` / `createMoryaUI`\n- [SSR](/docs/ssr): Nuxt, Astro, and similar setups\n- [Accessibility](/docs/accessibility): forms, keyboard, overlays\n- [AI setup](/docs/ai-setup): Agent-assisted page generation\n- [Agent Skill](/docs/agent-skill): `morya-ui-pages` page-generation contract\n- [Agent MCP](/docs/mcp): doc lookup for AI clients\n- [Components](/components): browse all components and APIs\n- [Contributing](https://github.com/morya-space/morya-ui/blob/main/CONTRIBUTING.md)"
|
|
25300
|
+
"body": "- [Quick start](/docs/quick-start): install and a minimal example\n- [One-shot setup](/docs/setup): `@morya-ui/setup` for library and AI config\n- [Design tokens](/docs/design-tokens): full `--m-*` reference\n- [Theme](/docs/theme): light/dark and density\n- [Motion](/docs/motion): intensity preference and enter/exit presets\n- [Styling & attrs](/docs/attrs): fallthrough, `pt`, and event placement\n- [API types](/docs/types): shapes behind names like `FieldPassThrough`, `SelectOption`\n- [Configuration](/docs/config): `ConfigProvider` / `createMoryaUI`\n- [SSR](/docs/ssr): Nuxt, Astro, and similar setups\n- [Accessibility](/docs/accessibility): forms, keyboard, overlays\n- [AI setup](/docs/ai-setup): Agent-assisted page generation\n- [Agent Skill](/docs/agent-skill): `morya-ui-pages` page-generation contract\n- [Agent MCP](/docs/mcp): doc lookup for AI clients\n- [Components](/components): browse all components and APIs\n- [Contributing](https://github.com/morya-space/morya-ui/blob/main/CONTRIBUTING.md)"
|
|
25084
25301
|
}
|
|
25085
25302
|
]
|
|
25086
25303
|
}
|
|
@@ -25201,7 +25418,7 @@
|
|
|
25201
25418
|
"zh-CN": {
|
|
25202
25419
|
"title": "一键接入",
|
|
25203
25420
|
"description": "用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。",
|
|
25204
|
-
"markdown": "---\ntitle: 一键接入\norder: 3\ndescription: 用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。\n---\n\n# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则与 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 命令\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 安装 `morya-ui`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只安装组件库并注入样式\nnpx @morya-ui/setup app\n\n# 已装库时，只写入 AI 配置与 MCP\nnpx @morya-ui/setup ai\n```\n\n
|
|
25421
|
+
"markdown": "---\ntitle: 一键接入\norder: 3\ndescription: 用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。\n---\n\n# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则与 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 命令\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 安装 `morya-ui`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只安装组件库并注入样式\nnpx @morya-ui/setup app\n\n# 已装库时，只写入 AI 配置与 MCP\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design\nnpx @morya-ui/setup ai --skills=all\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。完成后若写入了 MCP，请 **重启 Cursor**（或重载 MCP）。生成页面前让 Agent 先读 `DESIGN.md`。\n\n## 选项\n\n| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装依赖 |\n| `--skip-template` | 不复制 skill / rules / docs |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n默认 **不覆盖** 已有文件；只有 `--force` 才会覆盖模板与 MCP 条目。\n\n### Skills\n\n| Id | 默认 | 作用 |\n| --- | --- | --- |\n| `morya-ui-pages` | 必选 | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | 无障碍审计与定向修复 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## 会落到项目里的内容\n\n| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时写入的 companion skill |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。\n\n## 冲突策略\n\n- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force`）\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：组件用法与最小示例 \n- [AI 接入](/docs/ai-setup)：用 AI 生成业务页面时如何配合 Skill / MCP \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp) \n- [组件](/components)：浏览 API 与预览\n",
|
|
25205
25422
|
"sections": [
|
|
25206
25423
|
{
|
|
25207
25424
|
"title": "",
|
|
@@ -25211,17 +25428,17 @@
|
|
|
25211
25428
|
{
|
|
25212
25429
|
"title": "命令",
|
|
25213
25430
|
"id": "命令",
|
|
25214
|
-
"body": "在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 安装 `morya-ui`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只安装组件库并注入样式\nnpx @morya-ui/setup app\n\n# 已装库时，只写入 AI 配置与 MCP\nnpx @morya-ui/setup ai\n```\n\n
|
|
25431
|
+
"body": "在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 安装 `morya-ui`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只安装组件库并注入样式\nnpx @morya-ui/setup app\n\n# 已装库时，只写入 AI 配置与 MCP\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design\nnpx @morya-ui/setup ai --skills=all\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。完成后若写入了 MCP，请 **重启 Cursor**（或重载 MCP）。生成页面前让 Agent 先读 `DESIGN.md`。"
|
|
25215
25432
|
},
|
|
25216
25433
|
{
|
|
25217
25434
|
"title": "选项",
|
|
25218
25435
|
"id": "选项",
|
|
25219
|
-
"body": "| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装依赖 |\n| `--skip-template` | 不复制 skill / rules / docs |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n默认 **不覆盖** 已有文件；只有 `--force` 才会覆盖模板与 MCP 条目。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
|
|
25436
|
+
"body": "| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装依赖 |\n| `--skip-template` | 不复制 skill / rules / docs |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n默认 **不覆盖** 已有文件；只有 `--force` 才会覆盖模板与 MCP 条目。\n\n### Skills\n\n| Id | 默认 | 作用 |\n| --- | --- | --- |\n| `morya-ui-pages` | 必选 | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | 无障碍审计与定向修复 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
|
|
25220
25437
|
},
|
|
25221
25438
|
{
|
|
25222
25439
|
"title": "会落到项目里的内容",
|
|
25223
25440
|
"id": "会落到项目里的内容",
|
|
25224
|
-
"body": "| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI
|
|
25441
|
+
"body": "| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时写入的 companion skill |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。"
|
|
25225
25442
|
},
|
|
25226
25443
|
{
|
|
25227
25444
|
"title": "冲突策略",
|
|
@@ -25238,7 +25455,7 @@
|
|
|
25238
25455
|
"en-US": {
|
|
25239
25456
|
"title": "One-shot setup",
|
|
25240
25457
|
"description": "Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.",
|
|
25241
|
-
"markdown": "---\ntitle: One-shot setup\norder: 3\ndescription: Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.\n---\n\n# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, and MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Commands\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Library + styles only\nnpx @morya-ui/setup app\n\n# AI config + MCP only (library already installed)\nnpx @morya-ui/setup ai\n```\n\
|
|
25458
|
+
"markdown": "---\ntitle: One-shot setup\norder: 3\ndescription: Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.\n---\n\n# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, and MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Commands\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Library + styles only\nnpx @morya-ui/setup app\n\n# AI config + MCP only (library already installed)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design\nnpx @morya-ui/setup ai --skills=all\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). If MCP was written, **restart Cursor** (or reload MCP). Have the agent read `DESIGN.md` before generating pages.\n\n## Options\n\n| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip dependency install |\n| `--skip-template` | Skip copying skill / rules / docs |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nBy default **existing files are not overwritten**; use `--force` to overwrite templates and the MCP entry.\n\n### Skills\n\n| Id | Default | Role |\n| --- | --- | --- |\n| `morya-ui-pages` | required | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | Express / brand visual taste |\n| `fixing-accessibility` | optional | A11y audit and targeted fixes |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## What lands in the project\n\n| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Companion skills when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`.\n\n## Conflict policy\n\n- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present\n\n## Next steps\n\n- [Quick start](/docs/quick-start): component usage and a minimal example \n- [AI setup](/docs/ai-setup): how setup relates to Skill / MCP for AI page generation \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp) \n- [Components](/components): browse APIs and previews\n",
|
|
25242
25459
|
"sections": [
|
|
25243
25460
|
{
|
|
25244
25461
|
"title": "",
|
|
@@ -25248,17 +25465,17 @@
|
|
|
25248
25465
|
{
|
|
25249
25466
|
"title": "Commands",
|
|
25250
25467
|
"id": "commands",
|
|
25251
|
-
"body": "From the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Library + styles only\nnpx @morya-ui/setup app\n\n# AI config + MCP only (library already installed)\nnpx @morya-ui/setup ai\n```\n\
|
|
25468
|
+
"body": "From the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Library + styles only\nnpx @morya-ui/setup app\n\n# AI config + MCP only (library already installed)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design\nnpx @morya-ui/setup ai --skills=all\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). If MCP was written, **restart Cursor** (or reload MCP). Have the agent read `DESIGN.md` before generating pages."
|
|
25252
25469
|
},
|
|
25253
25470
|
{
|
|
25254
25471
|
"title": "Options",
|
|
25255
25472
|
"id": "options",
|
|
25256
|
-
"body": "| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip dependency install |\n| `--skip-template` | Skip copying skill / rules / docs |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nBy default **existing files are not overwritten**; use `--force` to overwrite templates and the MCP entry.\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
|
|
25473
|
+
"body": "| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip dependency install |\n| `--skip-template` | Skip copying skill / rules / docs |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nBy default **existing files are not overwritten**; use `--force` to overwrite templates and the MCP entry.\n\n### Skills\n\n| Id | Default | Role |\n| --- | --- | --- |\n| `morya-ui-pages` | required | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | Express / brand visual taste |\n| `fixing-accessibility` | optional | A11y audit and targeted fixes |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
|
|
25257
25474
|
},
|
|
25258
25475
|
{
|
|
25259
25476
|
"title": "What lands in the project",
|
|
25260
25477
|
"id": "what-lands-in-the-project",
|
|
25261
|
-
"body": "| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief
|
|
25478
|
+
"body": "| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Companion skills when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`."
|
|
25262
25479
|
},
|
|
25263
25480
|
{
|
|
25264
25481
|
"title": "Conflict policy",
|
|
@@ -25285,7 +25502,7 @@
|
|
|
25285
25502
|
"zh-CN": {
|
|
25286
25503
|
"title": "设计令牌",
|
|
25287
25504
|
"description": "全部 --m-* CSS 变量、默认值与用途说明。",
|
|
25288
|
-
"markdown": "---\ntitle: 设计令牌\norder: 4\ndescription: 全部 --m-* CSS 变量、默认值与用途说明。\n---\n\n# 设计令牌\n\nMorya UI 组件只消费语义化 CSS 变量（`--m-*`），不维护第二套色板。下面列表从 `src/**/*.css` **自动提取**，运行 `pnpm tokens:generate` 可与源码保持同步。\n\n## 覆盖方式\n\n| 机制 | 作用 |\n| --- | --- |\n| `[data-theme=\"dark\"]` | 亮 / 暗色主题 |\n| `[data-m-density]` | 间距与控件高度密度 |\n| `[data-m-motion]` | 动效时长 |\n| `createMoryaUI({ zIndex })` / `MConfigProvider` | 写入 `--m-z-base` 等全局配置 |\n\n主题
|
|
25505
|
+
"markdown": "---\ntitle: 设计令牌\norder: 4\ndescription: 全部 --m-* CSS 变量、默认值与用途说明。\n---\n\n# 设计令牌\n\nMorya UI 组件只消费语义化 CSS 变量（`--m-*`），不维护第二套色板。下面列表从 `src/**/*.css` **自动提取**，运行 `pnpm tokens:generate` 可与源码保持同步。\n\n## 覆盖方式\n\n| 机制 | 作用 |\n| --- | --- |\n| `[data-theme=\"dark\"]` | 亮 / 暗色主题 |\n| `[data-m-density]` | 间距与控件高度密度 |\n| `[data-m-motion]` | 动效时长 / 强度（`full` / `reduced` / `none`） |\n| `createMoryaUI({ zIndex })` / `MConfigProvider` | 写入 `--m-z-base` 等全局配置 |\n\n主题与密度见 [主题](/docs/theme)；进出场预设与 `useMotion` 见 [动效](/docs/motion)。\n\n## 完整列表\n\n```vue preview src=\"./demos/design-tokens/FullCatalog.vue\"\n```\n\n## 自定义\n\n在应用入口覆盖变量即可，无需 fork 组件：\n\n```css\n:root {\n --m-color-primary: #0f766e;\n --m-radius-control: 6px;\n}\n```\n\n组件局部变量（如 `--m-button-padding-x-medium`）定义在对应 `styles.css`，同样可通过更高优先级选择器覆盖。\n",
|
|
25289
25506
|
"sections": [
|
|
25290
25507
|
{
|
|
25291
25508
|
"title": "",
|
|
@@ -25295,7 +25512,7 @@
|
|
|
25295
25512
|
{
|
|
25296
25513
|
"title": "覆盖方式",
|
|
25297
25514
|
"id": "覆盖方式",
|
|
25298
|
-
"body": "| 机制 | 作用 |\n| --- | --- |\n| `[data-theme=\"dark\"]` | 亮 / 暗色主题 |\n| `[data-m-density]` | 间距与控件高度密度 |\n| `[data-m-motion]` | 动效时长 |\n| `createMoryaUI({ zIndex })` / `MConfigProvider` | 写入 `--m-z-base` 等全局配置 |\n\n主题
|
|
25515
|
+
"body": "| 机制 | 作用 |\n| --- | --- |\n| `[data-theme=\"dark\"]` | 亮 / 暗色主题 |\n| `[data-m-density]` | 间距与控件高度密度 |\n| `[data-m-motion]` | 动效时长 / 强度（`full` / `reduced` / `none`） |\n| `createMoryaUI({ zIndex })` / `MConfigProvider` | 写入 `--m-z-base` 等全局配置 |\n\n主题与密度见 [主题](/docs/theme)；进出场预设与 `useMotion` 见 [动效](/docs/motion)。"
|
|
25299
25516
|
},
|
|
25300
25517
|
{
|
|
25301
25518
|
"title": "完整列表",
|
|
@@ -25312,7 +25529,7 @@
|
|
|
25312
25529
|
"en-US": {
|
|
25313
25530
|
"title": "Design tokens",
|
|
25314
25531
|
"description": "Full --m-* CSS variable reference with defaults and usage notes.",
|
|
25315
|
-
"markdown": "---\ntitle: Design tokens\norder: 4\ndescription: Full --m-* CSS variable reference with defaults and usage notes.\n---\n\n# Design tokens\n\nMorya UI components consume semantic CSS variables (`--m-*`) only. The catalog below is **auto-extracted** from `src/**/*.css`. Run `pnpm tokens:generate` to keep it in sync with source.\n\n## Override mechanisms\n\n| Mechanism | Purpose |\n| --- | --- |\n| `[data-theme=\"dark\"]` | Light / dark theme |\n| `[data-m-density]` | Spacing and control height density |\n| `[data-m-motion]` | Motion duration
|
|
25532
|
+
"markdown": "---\ntitle: Design tokens\norder: 4\ndescription: Full --m-* CSS variable reference with defaults and usage notes.\n---\n\n# Design tokens\n\nMorya UI components consume semantic CSS variables (`--m-*`) only. The catalog below is **auto-extracted** from `src/**/*.css`. Run `pnpm tokens:generate` to keep it in sync with source.\n\n## Override mechanisms\n\n| Mechanism | Purpose |\n| --- | --- |\n| `[data-theme=\"dark\"]` | Light / dark theme |\n| `[data-m-density]` | Spacing and control height density |\n| `[data-m-motion]` | Motion duration / intensity (`full` / `reduced` / `none`) |\n| `createMoryaUI({ zIndex })` / `MConfigProvider` | Writes globals such as `--m-z-base` |\n\nSee [Theme](/docs/theme) for theme APIs and density. See [Motion](/docs/motion) for enter/exit presets and `useMotion`.\n\n## Full catalog\n\n```vue preview src=\"./demos/design-tokens/FullCatalog.vue\"\n```\n\n## Customization\n\nOverride variables at the app entry without forking components:\n\n```css\n:root {\n --m-color-primary: #0f766e;\n --m-radius-control: 6px;\n}\n```\n\nComponent-local tokens (for example `--m-button-padding-x-medium`) live in each `styles.css` and can be overridden with higher-specificity selectors.\n",
|
|
25316
25533
|
"sections": [
|
|
25317
25534
|
{
|
|
25318
25535
|
"title": "",
|
|
@@ -25322,7 +25539,7 @@
|
|
|
25322
25539
|
{
|
|
25323
25540
|
"title": "Override mechanisms",
|
|
25324
25541
|
"id": "override-mechanisms",
|
|
25325
|
-
"body": "| Mechanism | Purpose |\n| --- | --- |\n| `[data-theme=\"dark\"]` | Light / dark theme |\n| `[data-m-density]` | Spacing and control height density |\n| `[data-m-motion]` | Motion duration
|
|
25542
|
+
"body": "| Mechanism | Purpose |\n| --- | --- |\n| `[data-theme=\"dark\"]` | Light / dark theme |\n| `[data-m-density]` | Spacing and control height density |\n| `[data-m-motion]` | Motion duration / intensity (`full` / `reduced` / `none`) |\n| `createMoryaUI({ zIndex })` / `MConfigProvider` | Writes globals such as `--m-z-base` |\n\nSee [Theme](/docs/theme) for theme APIs and density. See [Motion](/docs/motion) for enter/exit presets and `useMotion`."
|
|
25326
25543
|
},
|
|
25327
25544
|
{
|
|
25328
25545
|
"title": "Full catalog",
|
|
@@ -25342,14 +25559,14 @@
|
|
|
25342
25559
|
"id": "theme",
|
|
25343
25560
|
"title": "主题",
|
|
25344
25561
|
"titleEn": "Theme",
|
|
25345
|
-
"description": "
|
|
25346
|
-
"descriptionEn": "Light and dark themes, design tokens, and
|
|
25562
|
+
"description": "亮暗主题、设计令牌与内容密度。",
|
|
25563
|
+
"descriptionEn": "Light and dark themes, design tokens, and density.",
|
|
25347
25564
|
"order": 5,
|
|
25348
25565
|
"locales": {
|
|
25349
25566
|
"zh-CN": {
|
|
25350
25567
|
"title": "主题",
|
|
25351
|
-
"description": "
|
|
25352
|
-
"markdown": "---\ntitle: 主题\norder: 5\ndescription:
|
|
25568
|
+
"description": "亮暗主题、设计令牌与内容密度。",
|
|
25569
|
+
"markdown": "---\ntitle: 主题\norder: 5\ndescription: 亮暗主题、设计令牌与内容密度。\n---\n\n# 主题\n\n主题能力内置于 `morya-ui`。组件只消费语义化 CSS 变量（`--m-*`），不自行维护第二套色板。\n\n引入 `morya-ui/styles.css` 时已包含这些变量；主题 JS API（`useTheme` 等）从同一包导入。\n\n## 亮 / 暗色\n\n```ts\nimport { useTheme } from 'morya-ui'\n\nconst { isDark, setTheme, toggleTheme } = useTheme()\n\nsetTheme('light') // 或 'dark'\ntoggleTheme()\n```\n\n文档站右上角的按钮调用的就是同一套 API。主题偏好会写到 `document.documentElement` 的 `data-theme`。\n\n## 设计令牌\n\n常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token | 用途 |\n| --- | --- |\n| `--m-color-primary` | 品牌主色 |\n| `--m-color-surface` | 页面底色 |\n| `--m-color-text` | 正文 |\n| `--m-color-border` | 分割线 / 描边 |\n| `--m-radius-sm/md/lg` | 圆角阶梯 |\n| `--m-space-*` | 间距阶梯 |\n| `--m-font-size-xs/sm/md/lg` | 组件正文字号阶梯 |\n| `--m-opacity-disabled` | 禁用态透明度 |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-menu-min-width` / `--m-control-affix-*` | 菜单最小宽、输入清除区尺寸 |\n\n动效相关 token（`--m-motion-*`）见 [动效](/docs/motion)。\n\n## 内容密度\n\n```ts\nimport { useDensity } from 'morya-ui'\n\nconst { preference, setDensity } = useDensity()\nsetDensity('compact') // 'compact' | 'comfortable' | 'spacious'\n```\n\n也会写到 `document.documentElement` 的 `data-m-density`，并缩放 `--m-space-*` 与 `--m-control-height-*`。 \n应用级可用 `createMoryaUI({ density: 'compact' })` 或 `<MConfigProvider density=\"compact\">`。\n\n在组件页侧栏「主题」可临时改主色、圆角与密度，用于本地预览。\n\n## 控件尺寸与聚焦\n\n默认控件高度采用 compact 节奏：\n\n| Size | 高度 | 字号 |\n| --- | --- | --- |\n| `small` | `28px`（`--m-control-height-small`） | `14px` |\n| 默认 / `medium` | `34px` | `14px` |\n| `large` | `40px` | `15px` |\n\n聚焦样式为 **主色描边 + 2px 淡色光晕**（非外扩 outline ring）：\n\n```css\nborder-color: var(--m-color-primary-hover);\nbox-shadow: var(--m-focus-shadow); /* 0 0 0 2px primary@20% */\n```\n\n相关 token：`--m-radius-control`、`--m-control-padding-x-*`、`--m-button-padding-x-*`、`--m-focus-shadow` / `--m-focus-shadow-danger`。\n\n## 与 ConfigProvider\n\n主题切换是「视觉层」；`MConfigProvider` / `createMoryaUI` 负责尺寸、文案、浮层挂载等「行为默认值」。二者可同时使用，详见 [全局配置](/docs/config)。\n\n进出场与 `useMotion` 见 [动效](/docs/motion)。\n",
|
|
25353
25570
|
"sections": [
|
|
25354
25571
|
{
|
|
25355
25572
|
"title": "",
|
|
@@ -25364,18 +25581,13 @@
|
|
|
25364
25581
|
{
|
|
25365
25582
|
"title": "设计令牌",
|
|
25366
25583
|
"id": "设计令牌",
|
|
25367
|
-
"body": "常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token | 用途 |\n| --- | --- |\n| `--m-color-primary` | 品牌主色 |\n| `--m-color-surface` | 页面底色 |\n| `--m-color-text` | 正文 |\n| `--m-color-border` | 分割线 / 描边 |\n| `--m-radius-sm/md/lg` | 圆角阶梯 |\n| `--m-space-*` | 间距阶梯 |\n| `--m-font-size-xs/sm/md/lg` | 组件正文字号阶梯 |\n| `--m-opacity-disabled` | 禁用态透明度 |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-menu-min-width` / `--m-control-affix-*` | 菜单最小宽、输入清除区尺寸 |\n
|
|
25584
|
+
"body": "常用变量示例见 [设计令牌](/docs/design-tokens) 完整列表（支持搜索与分类）。\n\n| Token | 用途 |\n| --- | --- |\n| `--m-color-primary` | 品牌主色 |\n| `--m-color-surface` | 页面底色 |\n| `--m-color-text` | 正文 |\n| `--m-color-border` | 分割线 / 描边 |\n| `--m-radius-sm/md/lg` | 圆角阶梯 |\n| `--m-space-*` | 间距阶梯 |\n| `--m-font-size-xs/sm/md/lg` | 组件正文字号阶梯 |\n| `--m-opacity-disabled` | 禁用态透明度 |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | 浮层层叠（Config `zIndex` 会写 `--m-z-base`） |\n| `--m-menu-min-width` / `--m-control-affix-*` | 菜单最小宽、输入清除区尺寸 |\n\n动效相关 token（`--m-motion-*`）见 [动效](/docs/motion)。"
|
|
25368
25585
|
},
|
|
25369
25586
|
{
|
|
25370
25587
|
"title": "内容密度",
|
|
25371
25588
|
"id": "内容密度",
|
|
25372
25589
|
"body": "```ts\nimport { useDensity } from 'morya-ui'\n\nconst { preference, setDensity } = useDensity()\nsetDensity('compact') // 'compact' | 'comfortable' | 'spacious'\n```\n\n也会写到 `document.documentElement` 的 `data-m-density`，并缩放 `--m-space-*` 与 `--m-control-height-*`。 \n应用级可用 `createMoryaUI({ density: 'compact' })` 或 `<MConfigProvider density=\"compact\">`。\n\n在组件页侧栏「主题」可临时改主色、圆角与密度，用于本地预览。"
|
|
25373
25590
|
},
|
|
25374
|
-
{
|
|
25375
|
-
"title": "动效偏好",
|
|
25376
|
-
"id": "动效偏好",
|
|
25377
|
-
"body": "```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`：标准过渡与浮层动画 \n- `reduced`：缩短时长、弱化位移 \n- `none`：立即切换"
|
|
25378
|
-
},
|
|
25379
25591
|
{
|
|
25380
25592
|
"title": "控件尺寸与聚焦",
|
|
25381
25593
|
"id": "控件尺寸与聚焦",
|
|
@@ -25384,14 +25596,14 @@
|
|
|
25384
25596
|
{
|
|
25385
25597
|
"title": "与 ConfigProvider",
|
|
25386
25598
|
"id": "与-configprovider",
|
|
25387
|
-
"body": "主题切换是「视觉层」；`MConfigProvider` / `createMoryaUI` 负责尺寸、文案、浮层挂载等「行为默认值」。二者可同时使用，详见 [全局配置](/docs/config)。"
|
|
25599
|
+
"body": "主题切换是「视觉层」；`MConfigProvider` / `createMoryaUI` 负责尺寸、文案、浮层挂载等「行为默认值」。二者可同时使用，详见 [全局配置](/docs/config)。\n\n进出场与 `useMotion` 见 [动效](/docs/motion)。"
|
|
25388
25600
|
}
|
|
25389
25601
|
]
|
|
25390
25602
|
},
|
|
25391
25603
|
"en-US": {
|
|
25392
25604
|
"title": "Theme",
|
|
25393
|
-
"description": "Light and dark themes, design tokens, and
|
|
25394
|
-
"markdown": "---\ntitle: Theme\norder: 5\ndescription: Light and dark themes, design tokens, and
|
|
25605
|
+
"description": "Light and dark themes, design tokens, and density.",
|
|
25606
|
+
"markdown": "---\ntitle: Theme\norder: 5\ndescription: Light and dark themes, design tokens, and density.\n---\n\n# Theme\n\nTheme support is built into `morya-ui`. Components consume semantic CSS variables (`--m-*`) and do not keep a second palette.\n\nImporting `morya-ui/styles.css` already includes these variables. Theme JS APIs (`useTheme` and friends) come from the same package.\n\n## Light / dark\n\n```ts\nimport { useTheme } from 'morya-ui'\n\nconst { isDark, setTheme, toggleTheme } = useTheme()\n\nsetTheme('light') // or 'dark'\ntoggleTheme()\n```\n\nThe button at the top-right of the docs site uses the same API. The preference is written to `data-theme` on `document.documentElement`.\n\n## Design tokens\n\nSee the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token | Use |\n| --- | --- |\n| `--m-color-primary` | Brand color |\n| `--m-color-surface` | Page background |\n| `--m-color-text` | Body text |\n| `--m-color-border` | Dividers / strokes |\n| `--m-radius-sm/md/lg` | Radius scale |\n| `--m-space-*` | Spacing scale |\n| `--m-font-size-xs/sm/md/lg` | Component type scale |\n| `--m-opacity-disabled` | Disabled opacity |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-menu-min-width` / `--m-control-affix-*` | Menu min width, input clear-button size |\n\nMotion tokens (`--m-motion-*`) are covered in [Motion](/docs/motion).\n\n## Density\n\n```ts\nimport { useDensity } from 'morya-ui'\n\nconst { preference, setDensity } = useDensity()\nsetDensity('compact') // 'compact' | 'comfortable' | 'spacious'\n```\n\nThis writes `data-m-density` on `document.documentElement` and scales `--m-space-*` plus `--m-control-height-*`. \nAt the app level use `createMoryaUI({ density: 'compact' })` or `<MConfigProvider density=\"compact\">`.\n\nThe Components page sidebar Theme panel can temporarily change accent, radius, and density for local preview.\n\n## Control size and focus\n\nDefault control heights follow a compact rhythm:\n\n| Size | Height | Font size |\n| --- | --- | --- |\n| `small` | `28px` (`--m-control-height-small`) | `14px` |\n| Default / `medium` | `34px` | `14px` |\n| `large` | `40px` | `15px` |\n\nFocus uses a **brand border + 2px tinted glow** (not an outset outline ring):\n\n```css\nborder-color: var(--m-color-primary-hover);\nbox-shadow: var(--m-focus-shadow); /* 0 0 0 2px primary@20% */\n```\n\nRelated tokens: `--m-radius-control`, `--m-control-padding-x-*`, `--m-button-padding-x-*`, `--m-focus-shadow` / `--m-focus-shadow-danger`.\n\n## With ConfigProvider\n\nTheme switching is the visual layer. `MConfigProvider` / `createMoryaUI` own size, copy, overlay mount, and other behavioral defaults. Use both together; see [Configuration](/docs/config).\n\nEnter/exit presets and `useMotion` live under [Motion](/docs/motion).\n",
|
|
25395
25607
|
"sections": [
|
|
25396
25608
|
{
|
|
25397
25609
|
"title": "",
|
|
@@ -25406,18 +25618,13 @@
|
|
|
25406
25618
|
{
|
|
25407
25619
|
"title": "Design tokens",
|
|
25408
25620
|
"id": "design-tokens",
|
|
25409
|
-
"body": "See the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token | Use |\n| --- | --- |\n| `--m-color-primary` | Brand color |\n| `--m-color-surface` | Page background |\n| `--m-color-text` | Body text |\n| `--m-color-border` | Dividers / strokes |\n| `--m-radius-sm/md/lg` | Radius scale |\n| `--m-space-*` | Spacing scale |\n| `--m-font-size-xs/sm/md/lg` | Component type scale |\n| `--m-opacity-disabled` | Disabled opacity |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-menu-min-width` / `--m-control-affix-*` | Menu min width, input clear-button size |\n
|
|
25621
|
+
"body": "See the full [Design tokens](/docs/design-tokens) catalog (searchable, grouped by category).\n\n| Token | Use |\n| --- | --- |\n| `--m-color-primary` | Brand color |\n| `--m-color-surface` | Page background |\n| `--m-color-text` | Body text |\n| `--m-color-border` | Dividers / strokes |\n| `--m-radius-sm/md/lg` | Radius scale |\n| `--m-space-*` | Spacing scale |\n| `--m-font-size-xs/sm/md/lg` | Component type scale |\n| `--m-opacity-disabled` | Disabled opacity |\n| `--m-z-base` / `--m-z-overlay` / `--m-z-dropdown` / `--m-z-toast` | Overlay stacking (`zIndex` writes `--m-z-base`) |\n| `--m-menu-min-width` / `--m-control-affix-*` | Menu min width, input clear-button size |\n\nMotion tokens (`--m-motion-*`) are covered in [Motion](/docs/motion)."
|
|
25410
25622
|
},
|
|
25411
25623
|
{
|
|
25412
25624
|
"title": "Density",
|
|
25413
25625
|
"id": "density",
|
|
25414
25626
|
"body": "```ts\nimport { useDensity } from 'morya-ui'\n\nconst { preference, setDensity } = useDensity()\nsetDensity('compact') // 'compact' | 'comfortable' | 'spacious'\n```\n\nThis writes `data-m-density` on `document.documentElement` and scales `--m-space-*` plus `--m-control-height-*`. \nAt the app level use `createMoryaUI({ density: 'compact' })` or `<MConfigProvider density=\"compact\">`.\n\nThe Components page sidebar Theme panel can temporarily change accent, radius, and density for local preview."
|
|
25415
25627
|
},
|
|
25416
|
-
{
|
|
25417
|
-
"title": "Motion preference",
|
|
25418
|
-
"id": "motion-preference",
|
|
25419
|
-
"body": "```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`: standard transitions and overlay motion \n- `reduced`: shorter duration, less travel \n- `none`: instant switches"
|
|
25420
|
-
},
|
|
25421
25628
|
{
|
|
25422
25629
|
"title": "Control size and focus",
|
|
25423
25630
|
"id": "control-size-and-focus",
|
|
@@ -25426,7 +25633,81 @@
|
|
|
25426
25633
|
{
|
|
25427
25634
|
"title": "With ConfigProvider",
|
|
25428
25635
|
"id": "with-configprovider",
|
|
25429
|
-
"body": "Theme switching is the visual layer. `MConfigProvider` / `createMoryaUI` own size, copy, overlay mount, and other behavioral defaults. Use both together; see [Configuration](/docs/config)."
|
|
25636
|
+
"body": "Theme switching is the visual layer. `MConfigProvider` / `createMoryaUI` own size, copy, overlay mount, and other behavioral defaults. Use both together; see [Configuration](/docs/config).\n\nEnter/exit presets and `useMotion` live under [Motion](/docs/motion)."
|
|
25637
|
+
}
|
|
25638
|
+
]
|
|
25639
|
+
}
|
|
25640
|
+
}
|
|
25641
|
+
},
|
|
25642
|
+
{
|
|
25643
|
+
"id": "motion",
|
|
25644
|
+
"title": "动效",
|
|
25645
|
+
"titleEn": "Motion",
|
|
25646
|
+
"description": "动效强度偏好、进出场预设与相关设计令牌。",
|
|
25647
|
+
"descriptionEn": "Motion intensity preferences, enter/exit presets, and related design tokens.",
|
|
25648
|
+
"order": 6,
|
|
25649
|
+
"locales": {
|
|
25650
|
+
"zh-CN": {
|
|
25651
|
+
"title": "动效",
|
|
25652
|
+
"description": "动效强度偏好、进出场预设与相关设计令牌。",
|
|
25653
|
+
"markdown": "---\ntitle: 动效\norder: 6\ndescription: 动效强度偏好、进出场预设与相关设计令牌。\n---\n\n# 动效\n\n动效分两层，彼此正交：\n\n1. **强度**：`useMotion` → `full` / `reduced` / `none`（写到 `data-m-motion`）\n2. **形态**：命名进出场预设（Vue `<Transition>`）\n\n时长、缓动与位移由 `--m-motion-*` 令牌驱动；完整列表见 [设计令牌](/docs/design-tokens)。\n\n## 动效偏好\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`：标准过渡与浮层动画 \n- `reduced`：缩短时长、弱化位移；循环指示器停掉 \n- `none`：立即切换 \n\n文档站组件页侧栏「动效」分段控件调用的是同一套 API。偏好会持久化到 `localStorage`（键名 `morya-ui-motion`）。\n\n系统开启 `prefers-reduced-motion` 时，默认会按减弱策略处理。若仍要保留完整过渡，可在 `createMoryaUI` / `MConfigProvider` 上设 `respectReducedMotion: false`。\n\n## 动效预设（进出场）\n\n浮层组件通过命名预设选择 Vue `<Transition>` 效果，解析优先级：\n\n1. 组件 `transition` prop \n2. `componentDefaults[Component].transition` \n3. `motion.transitions[role]`（`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`） \n4. 组件内置默认 \n\n内置 id：`fade`、`scale-fade`、`slide-fade`、`zoom`、`dialog`、`slide-up` / `slide-down` / `slide-left` / `slide-right`、`drawer`、`popover`、`loading`、`blockui`、`message`、`none`。 \n`transition={false}` 或 `'none'` 关闭 CSS 过渡。\n\n```ts\nimport { createMoryaUI, registerMotionPreset } from 'morya-ui'\n\napp.use(createMoryaUI({\n motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n componentDefaults: { Select: { transition: 'fade' } },\n}))\n\n// 自定义：先写好 .m-brand-enter-active 等 CSS，再注册\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n```vue\n<MDialog transition=\"slide-up\" />\n<MSelect :transition=\"false\" />\n```\n\n```vue preview src=\"./demos/theme/MotionPresets.vue\"\n```\n\n切换下拉中的预设后，请重新打开 Dialog / Drawer / Select 或再点一次 Toast，才能看到新的进出场。\n\n## 可选：接入 Animate.css\n\n`morya-ui` **不依赖** Animate.css。若业务需要 bounce / zoomIn 等 keyframe 动效，可在应用侧安装后，用桥接 CSS + `registerMotionPreset` 挂到现有 `transition` API。时长继续用 `--m-motion-enter` / `--m-motion-exit`，即可跟 `useMotion` 强度联动。\n\n```bash\npnpm add animate.css\n```\n\n```ts\nimport { registerMotionPreset } from 'morya-ui'\nimport 'animate.css'\n// 桥接 CSS：把 Animate.css keyframes 映射到 .m-animate-*-enter-active 等\n// 完整示例见 demos/theme/animate-css-bridge.css 或下方演示源码\n\nregisterMotionPreset('animate-bounce', { name: 'm-animate-bounce' })\nregisterMotionPreset('animate-zoom', { name: 'm-animate-zoom' })\nregisterMotionPreset('animate-fade-up', { name: 'm-animate-fade-up' })\n```\n\n```vue\n<MDialog transition=\"animate-bounce\" />\n<MSelect transition=\"animate-fade-up\" />\n```\n\n要点：\n\n- Vue `<Transition>` 需要 `.{name}-enter-active` / `leave-active`；把 Animate.css 的 `@keyframes` 写进这些类即可。\n- **Dialog / Drawer** 的 Transition 类在遮罩上：遮罩用同时长的 `fadeIn` / `fadeOut`，表达性动画写在内部 `.m-dialog-zoom` / `.m-drawer`，否则面板动效容易被截断或整层遮罩一起弹跳。\n- **Select / Toast** 等浮层根节点即 Transition 目标，可直接在 `-enter-active` 上挂 keyframe。\n\n文档站已引入 Animate.css，可直接试用：\n\n```vue preview src=\"./demos/theme/AnimateCssPresets.vue\"\n```\n\n## 相关令牌\n\n| Token | 用途 |\n| --- | --- |\n| `--m-motion-fast/normal/enter/exit` | 过渡时长 |\n| `--m-motion-distance` / `--m-motion-ease` | 进出场位移与缓动 |\n| `--m-motion-spin*` / `--m-motion-pulse` / `--m-motion-skeleton` | 循环指示器（`reduced`/`none` 下为 `0ms`） |\n| `--m-motion-loading-*` | Loading 变体循环时长 |\n\n亮暗主题与密度见 [主题](/docs/theme)；无障碍说明见 [无障碍](/docs/accessibility)。\n",
|
|
25654
|
+
"sections": [
|
|
25655
|
+
{
|
|
25656
|
+
"title": "",
|
|
25657
|
+
"id": "overview",
|
|
25658
|
+
"body": "# 动效\n\n动效分两层，彼此正交：\n\n1. **强度**：`useMotion` → `full` / `reduced` / `none`（写到 `data-m-motion`）\n2. **形态**：命名进出场预设（Vue `<Transition>`）\n\n时长、缓动与位移由 `--m-motion-*` 令牌驱动；完整列表见 [设计令牌](/docs/design-tokens)。"
|
|
25659
|
+
},
|
|
25660
|
+
{
|
|
25661
|
+
"title": "动效偏好",
|
|
25662
|
+
"id": "动效偏好",
|
|
25663
|
+
"body": "```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`：标准过渡与浮层动画 \n- `reduced`：缩短时长、弱化位移；循环指示器停掉 \n- `none`：立即切换 \n\n文档站组件页侧栏「动效」分段控件调用的是同一套 API。偏好会持久化到 `localStorage`（键名 `morya-ui-motion`）。\n\n系统开启 `prefers-reduced-motion` 时，默认会按减弱策略处理。若仍要保留完整过渡，可在 `createMoryaUI` / `MConfigProvider` 上设 `respectReducedMotion: false`。"
|
|
25664
|
+
},
|
|
25665
|
+
{
|
|
25666
|
+
"title": "动效预设（进出场）",
|
|
25667
|
+
"id": "动效预设-进出场",
|
|
25668
|
+
"body": "浮层组件通过命名预设选择 Vue `<Transition>` 效果，解析优先级：\n\n1. 组件 `transition` prop \n2. `componentDefaults[Component].transition` \n3. `motion.transitions[role]`（`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`） \n4. 组件内置默认 \n\n内置 id：`fade`、`scale-fade`、`slide-fade`、`zoom`、`dialog`、`slide-up` / `slide-down` / `slide-left` / `slide-right`、`drawer`、`popover`、`loading`、`blockui`、`message`、`none`。 \n`transition={false}` 或 `'none'` 关闭 CSS 过渡。\n\n```ts\nimport { createMoryaUI, registerMotionPreset } from 'morya-ui'\n\napp.use(createMoryaUI({\n motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n componentDefaults: { Select: { transition: 'fade' } },\n}))\n\n// 自定义：先写好 .m-brand-enter-active 等 CSS，再注册\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n```vue\n<MDialog transition=\"slide-up\" />\n<MSelect :transition=\"false\" />\n```\n\n```vue preview src=\"./demos/theme/MotionPresets.vue\"\n```\n\n切换下拉中的预设后，请重新打开 Dialog / Drawer / Select 或再点一次 Toast，才能看到新的进出场。"
|
|
25669
|
+
},
|
|
25670
|
+
{
|
|
25671
|
+
"title": "可选：接入 Animate.css",
|
|
25672
|
+
"id": "可选-接入-animate-css",
|
|
25673
|
+
"body": "`morya-ui` **不依赖** Animate.css。若业务需要 bounce / zoomIn 等 keyframe 动效，可在应用侧安装后，用桥接 CSS + `registerMotionPreset` 挂到现有 `transition` API。时长继续用 `--m-motion-enter` / `--m-motion-exit`，即可跟 `useMotion` 强度联动。\n\n```bash\npnpm add animate.css\n```\n\n```ts\nimport { registerMotionPreset } from 'morya-ui'\nimport 'animate.css'\n// 桥接 CSS：把 Animate.css keyframes 映射到 .m-animate-*-enter-active 等\n// 完整示例见 demos/theme/animate-css-bridge.css 或下方演示源码\n\nregisterMotionPreset('animate-bounce', { name: 'm-animate-bounce' })\nregisterMotionPreset('animate-zoom', { name: 'm-animate-zoom' })\nregisterMotionPreset('animate-fade-up', { name: 'm-animate-fade-up' })\n```\n\n```vue\n<MDialog transition=\"animate-bounce\" />\n<MSelect transition=\"animate-fade-up\" />\n```\n\n要点：\n\n- Vue `<Transition>` 需要 `.{name}-enter-active` / `leave-active`；把 Animate.css 的 `@keyframes` 写进这些类即可。\n- **Dialog / Drawer** 的 Transition 类在遮罩上：遮罩用同时长的 `fadeIn` / `fadeOut`，表达性动画写在内部 `.m-dialog-zoom` / `.m-drawer`，否则面板动效容易被截断或整层遮罩一起弹跳。\n- **Select / Toast** 等浮层根节点即 Transition 目标，可直接在 `-enter-active` 上挂 keyframe。\n\n文档站已引入 Animate.css，可直接试用：\n\n```vue preview src=\"./demos/theme/AnimateCssPresets.vue\"\n```"
|
|
25674
|
+
},
|
|
25675
|
+
{
|
|
25676
|
+
"title": "相关令牌",
|
|
25677
|
+
"id": "相关令牌",
|
|
25678
|
+
"body": "| Token | 用途 |\n| --- | --- |\n| `--m-motion-fast/normal/enter/exit` | 过渡时长 |\n| `--m-motion-distance` / `--m-motion-ease` | 进出场位移与缓动 |\n| `--m-motion-spin*` / `--m-motion-pulse` / `--m-motion-skeleton` | 循环指示器（`reduced`/`none` 下为 `0ms`） |\n| `--m-motion-loading-*` | Loading 变体循环时长 |\n\n亮暗主题与密度见 [主题](/docs/theme)；无障碍说明见 [无障碍](/docs/accessibility)。"
|
|
25679
|
+
}
|
|
25680
|
+
]
|
|
25681
|
+
},
|
|
25682
|
+
"en-US": {
|
|
25683
|
+
"title": "Motion",
|
|
25684
|
+
"description": "Motion intensity preferences, enter/exit presets, and related design tokens.",
|
|
25685
|
+
"markdown": "---\ntitle: Motion\norder: 6\ndescription: Motion intensity preferences, enter/exit presets, and related design tokens.\n---\n\n# Motion\n\nMotion has two orthogonal layers:\n\n1. **Intensity**: `useMotion` → `full` / `reduced` / `none` (writes `data-m-motion`)\n2. **Shape**: named enter/exit presets (Vue `<Transition>`)\n\nDurations, easing, and travel come from `--m-motion-*` tokens; see the full [Design tokens](/docs/design-tokens) catalog.\n\n## Motion preference\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`: standard transitions and overlay motion \n- `reduced`: shorter duration, less travel; looping indicators stop \n- `none`: instant switches \n\nThe Components page sidebar Motion control uses the same API. The preference is persisted in `localStorage` (`morya-ui-motion`).\n\nWhen the OS enables `prefers-reduced-motion`, reduced policies apply by default. Set `respectReducedMotion: false` on `createMoryaUI` / `MConfigProvider` to keep full transitions.\n\n## Motion presets (enter/exit)\n\nOverlay components pick a named Vue `<Transition>` preset. Resolution order:\n\n1. Component `transition` prop \n2. `componentDefaults[Component].transition` \n3. `motion.transitions[role]` (`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`) \n4. Component built-in default \n\nBuilt-in ids: `fade`, `scale-fade`, `slide-fade`, `zoom`, `dialog`, `slide-up` / `slide-down` / `slide-left` / `slide-right`, `drawer`, `popover`, `loading`, `blockui`, `message`, `none`. \n`transition={false}` or `'none'` disables CSS transitions.\n\n```ts\nimport { createMoryaUI, registerMotionPreset } from 'morya-ui'\n\napp.use(createMoryaUI({\n motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n componentDefaults: { Select: { transition: 'fade' } },\n}))\n\n// Custom: provide .m-brand-enter-active CSS, then register\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n```vue\n<MDialog transition=\"slide-up\" />\n<MSelect :transition=\"false\" />\n```\n\n```vue preview src=\"./demos/theme/MotionPresets.vue\"\n```\n\nAfter changing a preset in the dropdowns, reopen Dialog / Drawer / Select or trigger Toast again to replay enter/exit.\n\n## Optional: Animate.css\n\n`morya-ui` does **not** depend on Animate.css. If your app wants keyframe effects such as bounce / zoomIn, install it on the app side and wire it through bridge CSS + `registerMotionPreset` into the existing `transition` API. Keep durations on `--m-motion-enter` / `--m-motion-exit` so they stay linked to `useMotion` intensity.\n\n```bash\npnpm add animate.css\n```\n\n```ts\nimport { registerMotionPreset } from 'morya-ui'\nimport 'animate.css'\n// Bridge CSS: map Animate.css keyframes onto .m-animate-*-enter-active etc.\n// Full example: demos/theme/animate-css-bridge.css or the live demo source below\n\nregisterMotionPreset('animate-bounce', { name: 'm-animate-bounce' })\nregisterMotionPreset('animate-zoom', { name: 'm-animate-zoom' })\nregisterMotionPreset('animate-fade-up', { name: 'm-animate-fade-up' })\n```\n\n```vue\n<MDialog transition=\"animate-bounce\" />\n<MSelect transition=\"animate-fade-up\" />\n```\n\nNotes:\n\n- Vue `<Transition>` expects `.{name}-enter-active` / `leave-active`; map Animate.css `@keyframes` onto those classes.\n- **Dialog / Drawer** put Transition classes on the backdrop: use a same-duration `fadeIn` / `fadeOut` on the mask, and put the expressive animation on nested `.m-dialog-zoom` / `.m-drawer` so the panel is not cut short and the scrim does not bounce.\n- **Select / Toast** and similar overlays transition the panel root, so keyframes can sit directly on `-enter-active`.\n\nThis docs site already depends on Animate.css for the live demo:\n\n```vue preview src=\"./demos/theme/AnimateCssPresets.vue\"\n```\n\n## Related tokens\n\n| Token | Use |\n| --- | --- |\n| `--m-motion-fast/normal/enter/exit` | Transition duration |\n| `--m-motion-distance` / `--m-motion-ease` | Enter/exit travel and easing |\n| `--m-motion-spin*` / `--m-motion-pulse` / `--m-motion-skeleton` | Looping indicators (`0ms` under `reduced`/`none`) |\n| `--m-motion-loading-*` | Loading variant loop durations |\n\nLight/dark theme and density: [Theme](/docs/theme). Accessibility notes: [Accessibility](/docs/accessibility).\n",
|
|
25686
|
+
"sections": [
|
|
25687
|
+
{
|
|
25688
|
+
"title": "",
|
|
25689
|
+
"id": "overview",
|
|
25690
|
+
"body": "# Motion\n\nMotion has two orthogonal layers:\n\n1. **Intensity**: `useMotion` → `full` / `reduced` / `none` (writes `data-m-motion`)\n2. **Shape**: named enter/exit presets (Vue `<Transition>`)\n\nDurations, easing, and travel come from `--m-motion-*` tokens; see the full [Design tokens](/docs/design-tokens) catalog."
|
|
25691
|
+
},
|
|
25692
|
+
{
|
|
25693
|
+
"title": "Motion preference",
|
|
25694
|
+
"id": "motion-preference",
|
|
25695
|
+
"body": "```ts\nimport { useMotion } from 'morya-ui'\n\nconst { preference, setMotion } = useMotion()\nsetMotion('full') // 'full' | 'reduced' | 'none'\n```\n\n- `full`: standard transitions and overlay motion \n- `reduced`: shorter duration, less travel; looping indicators stop \n- `none`: instant switches \n\nThe Components page sidebar Motion control uses the same API. The preference is persisted in `localStorage` (`morya-ui-motion`).\n\nWhen the OS enables `prefers-reduced-motion`, reduced policies apply by default. Set `respectReducedMotion: false` on `createMoryaUI` / `MConfigProvider` to keep full transitions."
|
|
25696
|
+
},
|
|
25697
|
+
{
|
|
25698
|
+
"title": "Motion presets (enter/exit)",
|
|
25699
|
+
"id": "motion-presets-enter-exit",
|
|
25700
|
+
"body": "Overlay components pick a named Vue `<Transition>` preset. Resolution order:\n\n1. Component `transition` prop \n2. `componentDefaults[Component].transition` \n3. `motion.transitions[role]` (`dialog` / `drawer` / `popup` / `toast` / `tooltip` / `overlay`) \n4. Component built-in default \n\nBuilt-in ids: `fade`, `scale-fade`, `slide-fade`, `zoom`, `dialog`, `slide-up` / `slide-down` / `slide-left` / `slide-right`, `drawer`, `popover`, `loading`, `blockui`, `message`, `none`. \n`transition={false}` or `'none'` disables CSS transitions.\n\n```ts\nimport { createMoryaUI, registerMotionPreset } from 'morya-ui'\n\napp.use(createMoryaUI({\n motion: { transitions: { popup: 'slide-up', dialog: 'zoom' } },\n componentDefaults: { Select: { transition: 'fade' } },\n}))\n\n// Custom: provide .m-brand-enter-active CSS, then register\nregisterMotionPreset('brand', { name: 'm-brand' })\n```\n\n```vue\n<MDialog transition=\"slide-up\" />\n<MSelect :transition=\"false\" />\n```\n\n```vue preview src=\"./demos/theme/MotionPresets.vue\"\n```\n\nAfter changing a preset in the dropdowns, reopen Dialog / Drawer / Select or trigger Toast again to replay enter/exit."
|
|
25701
|
+
},
|
|
25702
|
+
{
|
|
25703
|
+
"title": "Optional: Animate.css",
|
|
25704
|
+
"id": "optional-animate-css",
|
|
25705
|
+
"body": "`morya-ui` does **not** depend on Animate.css. If your app wants keyframe effects such as bounce / zoomIn, install it on the app side and wire it through bridge CSS + `registerMotionPreset` into the existing `transition` API. Keep durations on `--m-motion-enter` / `--m-motion-exit` so they stay linked to `useMotion` intensity.\n\n```bash\npnpm add animate.css\n```\n\n```ts\nimport { registerMotionPreset } from 'morya-ui'\nimport 'animate.css'\n// Bridge CSS: map Animate.css keyframes onto .m-animate-*-enter-active etc.\n// Full example: demos/theme/animate-css-bridge.css or the live demo source below\n\nregisterMotionPreset('animate-bounce', { name: 'm-animate-bounce' })\nregisterMotionPreset('animate-zoom', { name: 'm-animate-zoom' })\nregisterMotionPreset('animate-fade-up', { name: 'm-animate-fade-up' })\n```\n\n```vue\n<MDialog transition=\"animate-bounce\" />\n<MSelect transition=\"animate-fade-up\" />\n```\n\nNotes:\n\n- Vue `<Transition>` expects `.{name}-enter-active` / `leave-active`; map Animate.css `@keyframes` onto those classes.\n- **Dialog / Drawer** put Transition classes on the backdrop: use a same-duration `fadeIn` / `fadeOut` on the mask, and put the expressive animation on nested `.m-dialog-zoom` / `.m-drawer` so the panel is not cut short and the scrim does not bounce.\n- **Select / Toast** and similar overlays transition the panel root, so keyframes can sit directly on `-enter-active`.\n\nThis docs site already depends on Animate.css for the live demo:\n\n```vue preview src=\"./demos/theme/AnimateCssPresets.vue\"\n```"
|
|
25706
|
+
},
|
|
25707
|
+
{
|
|
25708
|
+
"title": "Related tokens",
|
|
25709
|
+
"id": "related-tokens",
|
|
25710
|
+
"body": "| Token | Use |\n| --- | --- |\n| `--m-motion-fast/normal/enter/exit` | Transition duration |\n| `--m-motion-distance` / `--m-motion-ease` | Enter/exit travel and easing |\n| `--m-motion-spin*` / `--m-motion-pulse` / `--m-motion-skeleton` | Looping indicators (`0ms` under `reduced`/`none`) |\n| `--m-motion-loading-*` | Loading variant loop durations |\n\nLight/dark theme and density: [Theme](/docs/theme). Accessibility notes: [Accessibility](/docs/accessibility)."
|
|
25430
25711
|
}
|
|
25431
25712
|
]
|
|
25432
25713
|
}
|
|
@@ -25438,12 +25719,12 @@
|
|
|
25438
25719
|
"titleEn": "Styling & attrs",
|
|
25439
25720
|
"description": "class、style、事件与 pt 在各组件上的落点约定。",
|
|
25440
25721
|
"descriptionEn": "Where class, style, events, and pt land on each component.",
|
|
25441
|
-
"order":
|
|
25722
|
+
"order": 7,
|
|
25442
25723
|
"locales": {
|
|
25443
25724
|
"zh-CN": {
|
|
25444
25725
|
"title": "样式与 attrs",
|
|
25445
25726
|
"description": "class、style、事件与 pt 在各组件上的落点约定。",
|
|
25446
|
-
"markdown": "---\ntitle: 样式与 attrs\norder:
|
|
25727
|
+
"markdown": "---\ntitle: 样式与 attrs\norder: 7\ndescription: class、style、事件与 pt 在各组件上的落点约定。\n---\n\n# 样式与 attrs\n\n给组件传 `class`、`style` 或 `@keydown` 时，先搞清楚它们会绑到哪一层 DOM。Morya UI 的复合组件（尤其表单字段）不是「根元素就是 input」，外层还有 label、help、前后缀等结构。\n\n完整规则见下文；各组件 Props 里的 `pt` 字段用来改内部某一块 DOM，细节查对应组件文档。\n\n## 三类落点\n\n| 类型 | 例子 | 透传 attrs（除控件事件外） | 事件 `@xxx` | 常见原生属性 |\n| --- | --- | --- | --- | --- |\n| **字段** | Input、Select、DatePicker | 外层 field 根（`.m-input-field` 等） | 原生 input / textarea / 控件 | 用 props：`placeholder`、`name`… |\n| **Label 控件** | Checkbox、Radio、Switch | 可见的 `<label>` 根 | hidden 的 `<input>` | `name`、`value` 用 props |\n| **容器** | Card、Dialog、Tabs、Table | 组件对外那一层根 DOM | 同一层根 DOM | 内部节点用 `pt` |\n| **叶子** | Button、Icon、Tag | 就是交互元素本身 | 同一元素 | 与原生 Vue 组件一致 |\n\n**字段 / Label 控件的规则**：除了明确绑在子控件上的**事件监听**（`@keydown`、`@paste` 等），其余 fallthrough attrs（`class`、`style`、`data-*`、`title`、`tabindex`、未声明的 `aria-*` 等）一律落到**根节点**。常见语义仍优先走 props；要精确改内层 DOM 用 `pt`。\n\n叶子组件没有额外包裹层，写起来最省心；字段类只需记住「事件绑控件，其它 attrs 绑外层根」。\n\n## 字段组件\n\n以 Input 为例，结构大致是：\n\n```text\ndiv.m-input-field ← class / style / data-* / title / tabindex … 落在这里\n label\n div.m-input-field__control\n input ← @keydown、@focus 等事件落在这里\n span.m-input-field__help\n```\n\n因此：\n\n```vue preview src=\"./demos/attrs/FieldComponents.zh.vue\"\n```\n\n`placeholder`、`name`、`autocomplete`、`autofocus` 等请走 **props**（有类型与文档）；若作为未声明 attrs 传入，会落到 field 根而非 input——需要绑到 input 时用 `pt.input`。\n\nSelect、DatePicker、InputNumber 等同理：`class` 撑满栅格时加在 field 根上，别指望它直接写到内层 input。\n\n## Label 控件\n\nCheckbox / Radio / Switch 的可点击区域是 `<label>`，`class` 加在 label 上；`@change` 等由内部 input 接收。\n\n```vue preview src=\"./demos/attrs/LabelControls.vue\"\n```\n\n## 容器组件\n\nCard、Panel、Tabs、Table 等：`class` 加在整个组件根节点，和直觉一致。\n\nDialog、Drawer 会 Teleport，`class` / `style` 加在**遮罩层**（backdrop）上，不是内层 `.m-dialog` 面板——这样你才能控制蒙层全屏布局或 z-index 相关样式。\n\n```vue preview src=\"./demos/attrs/Containers.vue\"\n```\n\n## pt 透传\n\n需要精确改内部某块 DOM（class、style、`data-*`、原生属性）时用 `pt`，键名对应组件 DOM 分段。Input 示例：\n\n```vue\n<MInput\n label=\"API Key\"\n pt={{\n root: { class: 'col-span-2' },\n input: { class: 'font-mono', autocomplete: 'off' },\n prefix: { class: 'text-muted' },\n }}\n/>\n```\n\n常见键名：\n\n| 组件形态 | `pt` 键 |\n| --- | --- |\n| 字段（Input、Textarea、Select…） | `root`、`input` 或 `control`、`label`，部分还有 `prefix` / `suffix` / `help` |\n| Checkbox / Radio / Switch | `root`、`input` |\n| 单根容器 | `root` |\n\n`pt` 里同名的 `class`、`style` 会与对应 DOM 上已有绑定合并，不是整段覆盖。\n\n`FieldPassThrough`、`RootPassThrough` 等在 Props 表里的具体结构，见 [API 类型](/docs/types)。\n\n## 布局 class 落在哪里\n\n字段组件把布局相关的 `class` / `style` 留在外层根节点，避免 label、help 与输入框宽度对不齐。把布局 `class` 写在组件标签上即可，一般不必改模板结构或改绑到内部 input。\n\n## 相关文档\n\n- [Input](/components/Input)：字段类完整示例\n- [Checkbox](/components/Checkbox)：Label 控件\n- [Card](/components/Card)、[Dialog](/components/Dialog)：容器\n",
|
|
25447
25728
|
"sections": [
|
|
25448
25729
|
{
|
|
25449
25730
|
"title": "",
|
|
@@ -25490,7 +25771,7 @@
|
|
|
25490
25771
|
"en-US": {
|
|
25491
25772
|
"title": "Styling & attrs",
|
|
25492
25773
|
"description": "Where class, style, events, and pt land on each component.",
|
|
25493
|
-
"markdown": "---\ntitle: Styling & attrs\norder:
|
|
25774
|
+
"markdown": "---\ntitle: Styling & attrs\norder: 7\ndescription: Where class, style, events, and pt land on each component.\n---\n\n# Styling & attrs\n\nBefore you pass `class`, `style`, or `@keydown` to a component, know which DOM node receives it. Compound fields (especially form controls) are not a single native element—they wrap labels, help text, affixes, and more.\n\nThe rules below are the library-wide contract. Each component’s `pt` prop targets inner parts; see that component’s API for allowed keys.\n\n## Three fallthrough patterns\n\n| Pattern | Examples | Fallthrough attrs (except control events) | `@xxx` events | Common native attrs |\n| --- | --- | --- | --- | --- |\n| **Field** | Input, Select, DatePicker | Outer field root (`.m-input-field`, etc.) | Native input / textarea / control | Use props: `placeholder`, `name`, … |\n| **Label control** | Checkbox, Radio, Switch | Visible `<label>` root | Hidden `<input>` | `name`, `value` as props |\n| **Container** | Card, Dialog, Tabs, Table | Component root element | Same root | Inner nodes via `pt` |\n| **Leaf** | Button, Icon, Tag | The interactive element itself | Same element | Same as a plain Vue component |\n\n**Field / label controls:** every fallthrough attr except **event listeners** bound to the native control (`@keydown`, `@paste`, …) goes on the **root** (`class`, `style`, `data-*`, `title`, `tabindex`, undeclared `aria-*`, etc.). Prefer props for common semantics; use `pt` to target inner DOM.\n\nLeaf components behave like you expect. For fields: events on the control, everything else on the wrapper root.\n\n## Field components\n\nInput is roughly:\n\n```text\ndiv.m-input-field ← class / style / data-* / title / tabindex … go here\n label\n div.m-input-field__control\n input ← @keydown, @focus, etc. go here\n span.m-input-field__help\n```\n\nExample:\n\n```vue preview src=\"./demos/attrs/FieldComponents.en.vue\"\n```\n\nUse **props** for `placeholder`, `name`, `autocomplete`, and `autofocus` (typed and documented). Undeclared attrs of the same names fall through to the field root, not the input—use `pt.input` when you need them on the control.\n\nThe same split applies to Select, DatePicker, InputNumber, and similar fields.\n\n## Label controls\n\nFor Checkbox / Radio / Switch, `class` lands on the `<label>`; change/input events are wired on the inner input.\n\n```vue preview src=\"./demos/attrs/LabelControls.vue\"\n```\n\n## Containers\n\nCard, Panel, Tabs, Table: `class` on the outer root, as you would expect.\n\nDialog and Drawer Teleport to `body`. `class` / `style` apply to the **backdrop** layer, not the inner `.m-dialog` panel—so you can style the full-screen overlay without fighting panel layout.\n\n```vue preview src=\"./demos/attrs/Containers.vue\"\n```\n\n## Pass-through (`pt`)\n\nUse `pt` when you need a specific inner node—extra classes, styles, `data-*`, or native attributes:\n\n```vue\n<MInput\n label=\"API Key\"\n pt={{\n root: { class: 'col-span-2' },\n input: { class: 'font-mono', autocomplete: 'off' },\n prefix: { class: 'text-muted' },\n }}\n/>\n```\n\nTypical keys:\n\n| Shape | `pt` keys |\n| --- | --- |\n| Fields (Input, Textarea, Select, …) | `root`, `input` or `control`, `label`; some add `prefix` / `suffix` / `help` |\n| Checkbox / Radio / Switch | `root`, `input` |\n| Single-root containers | `root` |\n\n`class` and `style` in `pt` merge with existing bindings on that node; they do not replace the whole attribute object.\n\nFor full shapes of `FieldPassThrough`, `RootPassThrough`, and similar names in Props tables, see [API types](/docs/types).\n\n## Where layout classes land\n\nField components keep layout `class` / `style` on the outer root so labels and help text stay aligned with the control width. Put layout classes on the component tag; you usually do not need to rebind them onto the inner input.\n\n## See also\n\n- [Input](/components/Input): full field example\n- [Checkbox](/components/Checkbox): label control\n- [Card](/components/Card), [Dialog](/components/Dialog): containers\n",
|
|
25494
25775
|
"sections": [
|
|
25495
25776
|
{
|
|
25496
25777
|
"title": "",
|
|
@@ -25542,29 +25823,29 @@
|
|
|
25542
25823
|
"titleEn": "API types",
|
|
25543
25824
|
"description": "文档 Props 里常见类型名的结构与含义。",
|
|
25544
25825
|
"descriptionEn": "Shapes behind type names in component Props tables.",
|
|
25545
|
-
"order":
|
|
25826
|
+
"order": 8,
|
|
25546
25827
|
"locales": {
|
|
25547
25828
|
"zh-CN": {
|
|
25548
25829
|
"title": "API 类型",
|
|
25549
25830
|
"description": "文档 Props 里常见类型名的结构与含义。",
|
|
25550
|
-
"markdown": "---\ntitle: API 类型\norder:
|
|
25831
|
+
"markdown": "---\ntitle: API 类型\norder: 8\ndescription: 文档 Props 里常见类型名的结构与含义。\n---\n\n# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // 一般是 label\n input?: PassThroughPart // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // 外层 .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n input?: PassThroughPart // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonSeverity\">ButtonSeverity</h3>\n\n按钮语义色（[`Button`](/components/Button)、Dialog 页脚等）：\n\n```ts\ntype ButtonSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning' // 'warn' 为别名\n | 'help'\n | 'danger'\n | 'contrast'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body \n- `'self'`：不 Teleport，就地渲染 \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MSeverity\">MSeverity</h3>\n\nMessage、Tag 等的状态色：\n\n```ts\ntype MSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。\n",
|
|
25551
25832
|
"sections": [
|
|
25552
25833
|
{
|
|
25553
25834
|
"title": "",
|
|
25554
25835
|
"id": "overview",
|
|
25555
|
-
"body": "# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // 一般是 label\n input?: PassThroughPart // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // 外层 .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n input?: PassThroughPart // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonSeverity\">ButtonSeverity</h3>\n\n按钮语义色（[`Button`](/components/Button)、Dialog 页脚等）：\n\n```ts\ntype ButtonSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning' // 'warn' 为别名\n | 'help'\n | 'danger'\n | 'contrast'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body \n- `'self'`：不 Teleport，就地渲染 \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MSeverity\">MSeverity</h3>\n\nMessage、Tag 等的状态色：\n\n```ts\ntype MSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。"
|
|
25836
|
+
"body": "# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // 一般是 label\n input?: PassThroughPart // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // 外层 .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n input?: PassThroughPart // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonSeverity\">ButtonSeverity</h3>\n\n按钮语义色（[`Button`](/components/Button)、Dialog 页脚等）：\n\n```ts\ntype ButtonSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning' // 'warn' 为别名\n | 'help'\n | 'danger'\n | 'contrast'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body \n- `'self'`：不 Teleport，就地渲染 \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MSeverity\">MSeverity</h3>\n\nMessage、Tag 等的状态色：\n\n```ts\ntype MSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。"
|
|
25556
25837
|
}
|
|
25557
25838
|
]
|
|
25558
25839
|
},
|
|
25559
25840
|
"en-US": {
|
|
25560
25841
|
"title": "API types",
|
|
25561
25842
|
"description": "Shapes behind type names in component Props tables.",
|
|
25562
|
-
"markdown": "---\ntitle: API types\norder:
|
|
25843
|
+
"markdown": "---\ntitle: API types\norder: 8\ndescription: Shapes behind type names in component Props tables.\n---\n\n# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // usually the label\n input?: PassThroughPart // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // outer .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // trigger / composite control\n input?: PassThroughPart // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonSeverity\">ButtonSeverity</h3>\n\nButton / dialog footer tones:\n\n```ts\ntype ButtonSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning' // alias: 'warn'\n | 'help'\n | 'danger'\n | 'contrast'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default) \n- `'self'` — render in place (no Teleport) \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MSeverity\">MSeverity</h3>\n\nStatus tone for Message, Tag, etc.:\n\n```ts\ntype MSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only.\n",
|
|
25563
25844
|
"sections": [
|
|
25564
25845
|
{
|
|
25565
25846
|
"title": "",
|
|
25566
25847
|
"id": "overview",
|
|
25567
|
-
"body": "# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // usually the label\n input?: PassThroughPart // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // outer .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // trigger / composite control\n input?: PassThroughPart // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonSeverity\">ButtonSeverity</h3>\n\nButton / dialog footer tones:\n\n```ts\ntype ButtonSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning' // alias: 'warn'\n | 'help'\n | 'danger'\n | 'contrast'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default) \n- `'self'` — render in place (no Teleport) \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MSeverity\">MSeverity</h3>\n\nStatus tone for Message, Tag, etc.:\n\n```ts\ntype MSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only."
|
|
25848
|
+
"body": "# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n root?: PassThroughPart // usually the label\n input?: PassThroughPart // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n root?: PassThroughPart // outer .m-*-field\n label?: PassThroughPart\n control?: PassThroughPart // trigger / composite control\n input?: PassThroughPart // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n gutter?: PassThroughPart\n panel1?: PassThroughPart\n panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonSeverity\">ButtonSeverity</h3>\n\nButton / dialog footer tones:\n\n```ts\ntype ButtonSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning' // alias: 'warn'\n | 'help'\n | 'danger'\n | 'contrast'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default) \n- `'self'` — render in place (no Teleport) \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n key?: string\n label?: string\n value?: string\n icon?: string\n disabled?: boolean\n separator?: boolean\n shortcut?: string\n command?: () => void\n items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MSeverity\">MSeverity</h3>\n\nStatus tone for Message, Tag, etc.:\n\n```ts\ntype MSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only."
|
|
25568
25849
|
}
|
|
25569
25850
|
]
|
|
25570
25851
|
}
|
|
@@ -25576,12 +25857,12 @@
|
|
|
25576
25857
|
"titleEn": "Configuration",
|
|
25577
25858
|
"description": "ConfigProvider、createMoryaUI 与 useMConfig。",
|
|
25578
25859
|
"descriptionEn": "ConfigProvider, createMoryaUI, and useMConfig.",
|
|
25579
|
-
"order":
|
|
25860
|
+
"order": 9,
|
|
25580
25861
|
"locales": {
|
|
25581
25862
|
"zh-CN": {
|
|
25582
25863
|
"title": "全局配置",
|
|
25583
25864
|
"description": "ConfigProvider、createMoryaUI 与 useMConfig。",
|
|
25584
|
-
"markdown": "---\ntitle: 全局配置\norder:
|
|
25865
|
+
"markdown": "---\ntitle: 全局配置\norder: 9\ndescription: ConfigProvider、createMoryaUI 与 useMConfig。\n---\n\n# 全局配置\n\nMorya UI 提供应用级 / 页面级默认值，用于统一浮层挂载、尺寸、密度与文案。\n\n## 能力一览\n\n| 字段 | 说明 |\n| --- | --- |\n| `appendTo` | 浮层默认 Teleport 目标，默认 `body` |\n| `size` | 表单 / 按钮等默认尺寸 |\n| `density` | `compact` / `comfortable` / `spacious`，缩放间距与控件高度 |\n| `inputVariant` | 输入框 `outlined` / `filled` |\n| `zIndex` | 浮层基准层级 |\n| `locale` | 确认、空态、加载、占位等文案。可传入内置语言包 `zhCN` / `enUS` |\n\n优先级：**组件 Props > `MConfigProvider` > `createMoryaUI` > 内置默认（中文）**。\n\n## 语言包\n\n组件内置文案默认中文。切换英文时传入 `enUS`：\n\n```ts\nimport { createMoryaUI, enUS, zhCN } from 'morya-ui'\nimport { createApp } from 'vue'\n\ncreateApp(App).use(createMoryaUI({ locale: enUS })).mount('#app')\n```\n\n也可以只覆盖部分文案：\n\n```ts\ncreateMoryaUI({\n locale: {\n ...zhCN,\n accept: '确定',\n },\n})\n```\n\n文档站右上角的「中 / EN」会把同一套语言包注入 `MConfigProvider`，因此示例里的空态、确认、日期等文案会跟着切换。指南与组件 Markdown 在英文下会加载对应的 `*.en.md`。\n\n## Size\n\n未传本地 `size` 的控件继承 ConfigProvider。\n\n```vue preview src=\"./demos/config/Size.zh.vue\"\n```\n\n## Density\n\n```vue preview src=\"./demos/config/Density.zh.vue\"\n```\n\n## Input variant\n\n```vue preview src=\"./demos/config/InputVariant.vue\"\n```\n\n## Locale\n\n```vue preview src=\"./demos/config/Locale.zh.vue\"\n```\n\n## appendTo + zIndex\n\n```vue preview src=\"./demos/config/AppendToZIndex.zh.vue\"\n```\n\n## 应用级：`createMoryaUI`\n\n```ts\nimport { createMoryaUI } from 'morya-ui'\nimport { createApp } from 'vue'\n\ncreateApp(App).use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n zIndex: 2000,\n locale: { accept: '确认', reject: '取消' },\n }),\n ).mount('#app')\n```\n\n## 读取配置\n\n```ts\nimport { useMConfig } from 'morya-ui'\n\nconst config = useMConfig()\n// config.value.appendTo / size / locale …\n```\n\n完整 Props 与对照表见组件文档：[ConfigProvider](/components/ConfigProvider)。\n",
|
|
25585
25866
|
"sections": [
|
|
25586
25867
|
{
|
|
25587
25868
|
"title": "",
|
|
@@ -25638,7 +25919,7 @@
|
|
|
25638
25919
|
"en-US": {
|
|
25639
25920
|
"title": "Configuration",
|
|
25640
25921
|
"description": "ConfigProvider, createMoryaUI, and useMConfig.",
|
|
25641
|
-
"markdown": "---\ntitle: Configuration\norder:
|
|
25922
|
+
"markdown": "---\ntitle: Configuration\norder: 9\ndescription: ConfigProvider, createMoryaUI, and useMConfig.\n---\n\n# Configuration\n\nMorya UI provides app-level and page-level defaults for overlay mount, size, density, and copy.\n\n## Capabilities\n\n| Field | Description |\n| --- | --- |\n| `appendTo` | Default overlay Teleport target, `body` by default |\n| `size` | Default size for forms / buttons |\n| `density` | `compact` / `comfortable` / `spacious`, scales spacing and control height |\n| `inputVariant` | Input surface `outlined` / `filled` |\n| `zIndex` | Overlay z-index base |\n| `locale` | Confirm, empty, loading, and placeholder copy. Pass built-in packs `zhCN` / `enUS` |\n\nPriority: **component props > `MConfigProvider` > `createMoryaUI` > built-in default (Chinese)**.\n\n## Locale packs\n\nBuilt-in copy defaults to Chinese. Pass `enUS` to switch to English:\n\n```ts\nimport { createMoryaUI, enUS, zhCN } from 'morya-ui'\nimport { createApp } from 'vue'\n\ncreateApp(App).use(createMoryaUI({ locale: enUS })).mount('#app')\n```\n\nYou can also override a subset:\n\n```ts\ncreateMoryaUI({\n locale: {\n ...zhCN,\n accept: 'OK',\n },\n})\n```\n\nThe **中 / EN** switch in the docs header injects the same pack into `MConfigProvider`, so live examples (empty states, confirm, dates, and so on) follow the selected language. Markdown pages load `*.en.md` when English is selected.\n\n## Size\n\nControls without a local `size` inherit from ConfigProvider.\n\n```vue preview src=\"./demos/config/Size.en.vue\"\n```\n\n## Density\n\n```vue preview src=\"./demos/config/Density.en.vue\"\n```\n\n## Input variant\n\n```vue preview src=\"./demos/config/InputVariant.vue\"\n```\n\n## Locale\n\n```vue preview src=\"./demos/config/Locale.en.vue\"\n```\n\n## appendTo + zIndex\n\n```vue preview src=\"./demos/config/AppendToZIndex.en.vue\"\n```\n\n## App-level: `createMoryaUI`\n\n```ts\nimport { createMoryaUI } from 'morya-ui'\nimport { createApp } from 'vue'\n\ncreateApp(App).use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n zIndex: 2000,\n locale: { accept: 'OK', reject: 'Cancel' },\n }),\n ).mount('#app')\n```\n\n## Reading config\n\n```ts\nimport { useMConfig } from 'morya-ui'\n\nconst config = useMConfig()\n// config.value.appendTo / size / locale …\n```\n\nFull props and comparison tables: [ConfigProvider](/components/ConfigProvider).\n",
|
|
25642
25923
|
"sections": [
|
|
25643
25924
|
{
|
|
25644
25925
|
"title": "",
|
|
@@ -25700,12 +25981,12 @@
|
|
|
25700
25981
|
"titleEn": "SSR & meta-frameworks",
|
|
25701
25982
|
"description": "在 Nuxt、Astro、Vite SSR 等环境中使用 Morya UI。",
|
|
25702
25983
|
"descriptionEn": "Use Morya UI with Nuxt, Astro, Vite SSR, and other server-rendered setups.",
|
|
25703
|
-
"order":
|
|
25984
|
+
"order": 10,
|
|
25704
25985
|
"locales": {
|
|
25705
25986
|
"zh-CN": {
|
|
25706
25987
|
"title": "SSR 与服务端框架",
|
|
25707
25988
|
"description": "在 Nuxt、Astro、Vite SSR 等环境中使用 Morya UI。",
|
|
25708
|
-
"markdown": "---\ntitle: SSR 与服务端框架\norder:
|
|
25989
|
+
"markdown": "---\ntitle: SSR 与服务端框架\norder: 10\ndescription: 在 Nuxt、Astro、Vite SSR 等环境中使用 Morya UI。\n---\n\n# SSR 与服务端框架\n\nMorya UI 面向 **Vue 3** 的 SSR 场景做了兼容（推荐 3.5 及以上）：服务端不会访问 `document` / `window`，组件实例 id 在服务端与客户端保持一致，命令式 API（`toast` / `message` / `confirm`）在服务端自动跳过。\n\n以下框架均可接入；按场景选择 **全量 SSR** 或 **客户端 Islands**。\n\n## 通用约定\n\n| 项 | 建议 |\n| --- | --- |\n| 样式 | 在应用入口或框架配置中引入 `morya-ui/styles.css` |\n| 主题 | 优先用根级 **`MConfigProvider`** 设置 `theme` / `density`，避免在 SSR 阶段单独调用 `useTheme()` 写 `document` |\n| 命令式反馈 | `toast()`、`message()`、`confirm()` 仅在浏览器执行；SSR 期间调用不会报错，但不会渲染 |\n| 按需导入 | 配合 `morya-ui/resolver` 与 `unplugin-vue-components` 减小体积 |\n| 浮层 | Dialog / Select / Tooltip 等使用 Vue `Teleport`；SSR 可输出占位，交互在客户端水合后生效 |\n\n## Nuxt 3\n\n推荐使用官方模块 **`@morya-ui/nuxt`**（同仓库 `packages/nuxt`）。\n\n### 安装\n\n```bash\npnpm add morya-ui @morya-ui/nuxt\npnpm add -D unplugin-vue-components\n```\n\n### 配置\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\n// nuxt.config.ts\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineNuxtConfig({\n modules: ['@morya-ui/nuxt'],\n vite: {\n plugins: [\n Components({\n resolvers: [MoryaUIResolver()],\n }),\n ],\n },\n})\n```\n\n模块默认会：\n\n- 引入 `morya-ui/styles.css`\n- 将 `morya-ui` 加入 `build.transpile`\n- 在客户端注册 overlay 上下文（供 `toast` / `message` 使用）\n\n### 根布局\n\n```vue\n<!-- app.vue -->\n<script setup lang=\"ts\">\nconst theme = ref<'light' | 'dark'>('light')\n</script>\n\n<template>\n <MConfigProvider :theme=\"theme\" density=\"comfortable\">\n <NuxtPage />\n </MConfigProvider>\n</template>\n```\n\n按需导入时无需 `app.use(MoryaUI)`；若需全量注册，可在 `plugins/morya-ui.client.ts` 中 `nuxtApp.vueApp.use(MoryaUI)`。\n\n### 仅客户端组件\n\n极少数依赖浏览器专有 API 的场景（如自定义 `appendTo` 到尚未存在的节点），可用 Nuxt 的 `<ClientOnly>` 包裹。\n\n## Astro + Vue\n\n适合 **静态页 + Vue 岛**（管理后台、控制台嵌入营销站）。\n\n### 安装\n\n```bash\npnpm add morya-ui\nnpx astro add vue\n```\n\n### 在 Vue 岛中使用\n\n```astro\n---\n// src/pages/admin.astro\nimport AdminShell from '../components/AdminShell.vue'\n---\n<AdminShell client:load />\n```\n\n```vue\n<!-- src/components/AdminShell.vue -->\n<script setup lang=\"ts\">\nimport { MButton, MConfigProvider } from 'morya-ui'\nimport 'morya-ui/styles.css'\n</script>\n\n<template>\n <MConfigProvider theme=\"light\">\n <MButton label=\"Hello\" />\n </MConfigProvider>\n</template>\n```\n\n- 交互型后台推荐 `client:load` 或 `client:only`\n- 纯展示块可用 `client:visible` 延迟水合\n- Astro 本身不做 Vue SSR 时，无需处理 hydration id 问题\n\n## Vite SSR（含自定义服务端）\n\n```ts\nimport { MConfigProvider } from 'morya-ui/config-provider'\n// main.server.ts / entry-server.ts\nimport { createSSRApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\nexport function createApp() {\n const app = createSSRApp(App)\n return { app }\n}\n```\n\n客户端入口可注册 overlay 插件：\n\n```ts\n// entry-client.ts\nimport { createMoryaUI } from 'morya-ui'\n\ncreateApp(/* ... */)\n .use(createMoryaUI({ components: false }))\n .mount('#app')\n```\n\n构建时确保 `morya-ui` 进入 `ssr.noExternal`（或 `ssr: { noExternal: ['morya-ui'] }`），以便正确处理 `.vue` 与 CSS 副作用。\n\n## 其他 Vue SSR 方案\n\n| 方案 | 说明 |\n| --- | --- |\n| **Quasar (SSR mode)** | 在 `quasar.config` 的 `build.transpileDependencies` 中加入 `morya-ui`，入口引入样式 |\n| **vite-plugin-ssr / vike** | 与 Vite SSR 相同：服务端渲染 + 客户端 `createMoryaUI({ components: false })` |\n| **Inertia + Vue SSR** | 根组件包 `MConfigProvider`；命令式 API 仅在 `onMounted` 后调用 |\n\n## 已知限制\n\n- **不支持 Vue 2**；SSR 仅适用于 Vue 3。\n- **IE** 不在支持范围内（与 Vue 3 一致）。\n- 主题 `localStorage` 持久化仅在浏览器生效；SSR 首屏使用 `MConfigProvider` 或 cookie 同步主题可避免闪动。\n- 全量 E2E SSR 回归仍在完善；若遇到 hydration 警告，请提供最小复现并 [提 Issue](https://github.com/morya-space/morya-ui/issues)。\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：安装与导入方式\n- [全局配置](/docs/config)：`MConfigProvider`\n- [主题](/docs/theme)：亮暗色与 token\n",
|
|
25709
25990
|
"sections": [
|
|
25710
25991
|
{
|
|
25711
25992
|
"title": "",
|
|
@@ -25752,7 +26033,7 @@
|
|
|
25752
26033
|
"en-US": {
|
|
25753
26034
|
"title": "SSR & meta-frameworks",
|
|
25754
26035
|
"description": "Use Morya UI with Nuxt, Astro, Vite SSR, and other server-rendered setups.",
|
|
25755
|
-
"markdown": "---\ntitle: SSR & meta-frameworks\norder:
|
|
26036
|
+
"markdown": "---\ntitle: SSR & meta-frameworks\norder: 10\ndescription: Use Morya UI with Nuxt, Astro, Vite SSR, and other server-rendered setups.\n---\n\n# SSR & meta-frameworks\n\nMorya UI targets **Vue 3** SSR (3.5+ recommended): the server never touches `document` / `window`, instance ids stay stable across server and client, and imperative APIs (`toast` / `message` / `confirm`) no-op safely on the server.\n\nAll setups below are supported; choose **full SSR** or **client islands** based on your app.\n\n## Shared checklist\n\n| Topic | Recommendation |\n| --- | --- |\n| Styles | Import `morya-ui/styles.css` in app entry or framework config |\n| Theme | Prefer root **`MConfigProvider`** for `theme` / `density` instead of calling `useTheme()` alone during SSR |\n| Imperative APIs | `toast()`, `message()`, `confirm()` run in the browser only; SSR calls are safe no-ops |\n| On-demand | Use `morya-ui/resolver` with `unplugin-vue-components` |\n| Overlays | Dialog / Select / Tooltip use Vue `Teleport`; SSR renders placeholders, interaction hydrates on the client |\n\n## Nuxt 3\n\nUse the **`@morya-ui/nuxt`** module (`packages/nuxt` in this repo).\n\n### Install\n\n```bash\npnpm add morya-ui @morya-ui/nuxt\npnpm add -D unplugin-vue-components\n```\n\n### Config\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\n// nuxt.config.ts\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineNuxtConfig({\n modules: ['@morya-ui/nuxt'],\n vite: {\n plugins: [\n Components({\n resolvers: [MoryaUIResolver()],\n }),\n ],\n },\n})\n```\n\nThe module by default:\n\n- Adds `morya-ui/styles.css`\n- Transpiles `morya-ui` for SSR\n- Registers overlay app context on the client (for `toast` / `message`)\n\n### Root layout\n\n```vue\n<!-- app.vue -->\n<script setup lang=\"ts\">\nconst theme = ref<'light' | 'dark'>('light')\n</script>\n\n<template>\n <MConfigProvider :theme=\"theme\" density=\"comfortable\">\n <NuxtPage />\n </MConfigProvider>\n</template>\n```\n\nWith on-demand imports you do not need `app.use(MoryaUI)`; for full registration, add a client plugin with `nuxtApp.vueApp.use(MoryaUI)`.\n\n### Client-only islands\n\nWrap edge cases that need browser-only targets in `<ClientOnly>`.\n\n## Astro + Vue\n\nBest for **static sites + Vue islands** (admin shells embedded in marketing pages).\n\n### Install\n\n```bash\npnpm add morya-ui\nnpx astro add vue\n```\n\n### Vue island\n\n```astro\n---\nimport AdminShell from '../components/AdminShell.vue'\n---\n<AdminShell client:load />\n```\n\n```vue\n<script setup lang=\"ts\">\nimport { MButton, MConfigProvider } from 'morya-ui'\nimport 'morya-ui/styles.css'\n</script>\n\n<template>\n <MConfigProvider theme=\"light\">\n <MButton label=\"Hello\" />\n </MConfigProvider>\n</template>\n```\n\nUse `client:load` or `client:only` for interactive admin UIs; `client:visible` for lazy hydration.\n\n## Vite SSR\n\n```ts\nimport { createSSRApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\nexport function createApp() {\n return { app: createSSRApp(App) }\n}\n```\n\nClient entry:\n\n```ts\nimport { createMoryaUI } from 'morya-ui'\n\napp.use(createMoryaUI({ components: false })).mount('#app')\n```\n\nAdd `morya-ui` to `ssr.noExternal` so `.vue` and CSS side effects resolve correctly.\n\n## Other Vue SSR stacks\n\n| Stack | Notes |\n| --- | --- |\n| **Quasar SSR** | Add `morya-ui` to `build.transpileDependencies`; import styles in entry |\n| **vike / vite-plugin-ssr** | Same as Vite SSR |\n| **Inertia + Vue SSR** | Wrap with `MConfigProvider`; call imperative APIs after mount |\n\n## Limitations\n\n- **Vue 2 is not supported** (Vue 3 SSR only).\n- **IE** is out of scope.\n- Theme `localStorage` persistence is client-only; sync theme via `MConfigProvider` or cookies to avoid flash.\n- Full SSR E2E coverage is evolving; please [open an issue](https://github.com/morya-space/morya-ui/issues) with a minimal repro if you see hydration warnings.\n\n## Next\n\n- [Quick start](/docs/quick-start)\n- [Config](/docs/config)\n- [Theme](/docs/theme)\n",
|
|
25756
26037
|
"sections": [
|
|
25757
26038
|
{
|
|
25758
26039
|
"title": "",
|
|
@@ -25804,12 +26085,12 @@
|
|
|
25804
26085
|
"titleEn": "Accessibility",
|
|
25805
26086
|
"description": "使用 Morya UI 组件时的无障碍约定与检查清单。",
|
|
25806
26087
|
"descriptionEn": "Accessibility conventions when using Morya UI components.",
|
|
25807
|
-
"order":
|
|
26088
|
+
"order": 11,
|
|
25808
26089
|
"locales": {
|
|
25809
26090
|
"zh-CN": {
|
|
25810
26091
|
"title": "无障碍",
|
|
25811
26092
|
"description": "使用 Morya UI 组件时的无障碍约定与检查清单。",
|
|
25812
|
-
"markdown": "---\ntitle: 无障碍\norder:
|
|
26093
|
+
"markdown": "---\ntitle: 无障碍\norder: 11\ndescription: 使用 Morya UI 组件时的无障碍约定与检查清单。\n---\n\n# 无障碍\n\nMorya UI 以**语义化 HTML 优先、必要时补充 ARIA**为原则。组件尽量自带标签关联、键盘路径与浮层焦点管理；业务侧仍需提供有意义的文案与结构。\n\n## 快速检查清单\n\n| 场景 | 建议 |\n| --- | --- |\n| 图标按钮 | 设置 `aria-label` 或可见文本，勿仅靠图标传达含义 |\n| 表单字段 | 使用 `label`；错误时用 `invalid` + `error-message` |\n| 装饰性图标 | 省略 `label`，组件会使用 `aria-hidden` |\n| 浮层 / 对话框 | 确认 Esc 可关闭；打开后焦点在面板内 |\n| 动效敏感用户 | 使用 `useMotion()` 设为 `reduced` 或 `none` |\n| 仅颜色区分状态 | 同时提供文案、图标或 `error-message` |\n\n## 表单与校验\n\n输入类组件（`Input`、`Textarea`、`Select` 等）共享字段模式：\n\n```vue\n<MInput\n id=\"email\"\n v-model=\"email\"\n label=\"邮箱\"\n invalid\n error-message=\"请输入有效邮箱\"\n/>\n```\n\n要点：\n\n- **`label`** 会关联到控件；配合 `FloatLabel` 时也会写入 `for`。\n- **`invalid`** 会设置 `aria-invalid` 与错误样式。\n- **`error-message`** 会通过 `aria-describedby` 关联帮助/错误区域。\n- 必填请同时使用原生 `required`（若组件支持）或业务层校验提示，不要只用颜色表达。\n\n## 图标与按钮\n\n`MIcon` 仅承载**系统图标**。无 `label` 时视为装饰并隐藏；信息性图标请传 `label`：\n\n```vue\n<MIcon name=\"info\" label=\"更多信息\" />\n<MButton icon=\"search\" aria-label=\"搜索\" icon-only />\n```\n\n带文字的按钮优先用默认插槽或 `label`，不必重复 `aria-label`。\n\n## 浮层与焦点\n\n以下组件默认 Teleport 到 `body`，并在打开时锁定滚动、支持 `Escape` 关闭：\n\n- `Dialog`、`Drawer`、`CommandMenu`\n- `Select`、`Popover`、`Tooltip`（按组件实现）\n\n弹出层触发器应设置：\n\n- `aria-expanded` / `aria-controls`（如 `Popover`）\n- 可见标签或 `aria-label`\n\n模态对话框打开后，焦点应落在可交互元素上；关闭后宜将焦点还原到触发器（业务层使用 `Dialog` 时可自行管理）。\n\n## 键盘交互\n\n| 组件 | 常用按键 |\n| --- | --- |\n| `CommandMenu` | `↑`/`↓` 选择，`Enter` 执行，`Esc` 关闭 |\n| `Select` | `Enter`/`Space` 打开，`↑`/`↓` 移动选项，`Esc` 关闭 |\n| `Tabs` | 方向键在 Tab 列表间移动（实现依组件） |\n| `Slider` | 方向键调整值；可通过 `aria-label` 命名 |\n\n具体行为以各组件文档为准；新增组件请在 `docs/` 中说明键盘表。\n\n## 动效与对比度\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { setMotion } = useMotion()\nsetMotion('reduced') // 或 'none'\n```\n\n`reduced` / `none` 会缩短或关闭 `--m-motion-*` 过渡，减轻 vestibular 不适。\n\n颜色应通过 `--m-color-*` 令牌消费，以保证亮/暗主题下对比度一致。自定义主题后请在真实内容上抽查正文与错误态可读性。\n\n## 组件库内已知实践\n\n近期实现/改进包括：\n\n- **FloatLabel**：`label[for]` 关联首个输入控件\n- **Popover**：触发器 `aria-expanded` / `aria-haspopup` / `aria-controls`\n- **Slider**：单 thumb 默认 `aria-label`（可通过 prop 覆盖）\n- **Select / CascadeSelect / TreeSelect / DatePicker**：`combobox` 语义、键盘导航与字段反馈（`invalid` / `error-message` / `help-text`）\n\n## 测试建议\n\n- 使用键盘完成主流程（Tab、Enter、Esc、方向键）。\n- 使用系统屏幕阅读器（NVDA / VoiceOver）抽查表单与对话框。\n- 在 `prefers-reduced-motion: reduce` 或 `useMotion('none')` 下确认界面仍可用。\n\n## 相关\n\n- [动效](/docs/motion)：强度偏好、进出场预设与令牌\\n- [主题](/docs/theme)：亮暗色与密度\n- [全局配置](/docs/config)：语言包与默认尺寸\n",
|
|
25813
26094
|
"sections": [
|
|
25814
26095
|
{
|
|
25815
26096
|
"title": "",
|
|
@@ -25859,14 +26140,14 @@
|
|
|
25859
26140
|
{
|
|
25860
26141
|
"title": "相关",
|
|
25861
26142
|
"id": "相关",
|
|
25862
|
-
"body": "- [主题](/docs/theme)
|
|
26143
|
+
"body": "- [动效](/docs/motion)：强度偏好、进出场预设与令牌\\n- [主题](/docs/theme)：亮暗色与密度\n- [全局配置](/docs/config)：语言包与默认尺寸"
|
|
25863
26144
|
}
|
|
25864
26145
|
]
|
|
25865
26146
|
},
|
|
25866
26147
|
"en-US": {
|
|
25867
26148
|
"title": "Accessibility",
|
|
25868
26149
|
"description": "Accessibility conventions when using Morya UI components.",
|
|
25869
|
-
"markdown": "---\ntitle: Accessibility\norder:
|
|
26150
|
+
"markdown": "---\ntitle: Accessibility\norder: 11\ndescription: Accessibility conventions when using Morya UI components.\n---\n\n# Accessibility\n\nMorya UI favors **semantic HTML first, ARIA when necessary**. Components handle labels, keyboard paths, and overlay focus where possible; apps still must supply meaningful copy and structure.\n\n## Quick checklist\n\n| Scenario | Guidance |\n| --- | --- |\n| Icon-only buttons | Set `aria-label` or visible text—do not rely on icon shape alone |\n| Form fields | Use `label`; on failure use `invalid` + `error-message` |\n| Decorative icons | Omit `label`; the icon is `aria-hidden` |\n| Overlays / dialogs | Ensure Escape closes; focus stays manageable while open |\n| Motion sensitivity | Use `useMotion()` with `reduced` or `none` |\n| Status by color only | Add text, icons, or `error-message` |\n\n## Forms and validation\n\nInput-family components (`Input`, `Textarea`, `Select`, …) share the same field pattern:\n\n```vue\n<MInput\n id=\"email\"\n v-model=\"email\"\n label=\"Email\"\n invalid\n error-message=\"Enter a valid email address\"\n/>\n```\n\nNotes:\n\n- **`label`** wires to the control; `FloatLabel` also sets `for` on the label element.\n- **`invalid`** sets `aria-invalid` and error styling.\n- **`error-message`** is linked through `aria-describedby`.\n- Mark required fields with native `required` when supported **and** validation copy—not color alone.\n\n## Icons and buttons\n\n`MIcon` covers **system icons** only. Without `label` the icon is decorative (`aria-hidden`); informative icons need `label`:\n\n```vue\n<MIcon name=\"info\" label=\"More information\" />\n<MButton icon=\"search\" aria-label=\"Search\" icon-only />\n```\n\nPrefer default slot / `label` text on buttons; avoid duplicating `aria-label` when visible text exists.\n\n## Overlays and focus\n\nThese default to Teleport on `body`, block scroll while open, and close on Escape where applicable:\n\n- `Dialog`, `Drawer`, `CommandMenu`\n- `Select`, `Popover`, `Tooltip` (per component)\n\nTriggers should expose:\n\n- `aria-expanded` / `aria-controls` (e.g. `Popover`)\n- Visible text or `aria-label`\n\nAfter closing a modal, return focus to the trigger when your UX requires it.\n\n## Keyboard\n\n| Component | Keys |\n| --- | --- |\n| `CommandMenu` | `↑`/`↓` move, `Enter` run, `Esc` close |\n| `Select` | `Enter`/`Space` open, `↑`/`↓` options, `Esc` close |\n| `Tabs` | Arrow keys between tabs (see component doc) |\n| `Slider` | Arrow keys adjust value; override naming with `aria-label` |\n\nDocument keyboard tables in component `docs/` when adding new widgets.\n\n## Motion and contrast\n\n```ts\nimport { useMotion } from 'morya-ui'\n\nconst { setMotion } = useMotion()\nsetMotion('reduced') // or 'none'\n```\n\n`reduced` / `none` shortens or disables `--m-motion-*` transitions.\n\nConsume colors through `--m-color-*` tokens for light/dark parity. After theming, spot-check body text and error states on real content.\n\n## In-library improvements\n\nRecent work includes:\n\n- **FloatLabel**: `label[for]` linked to the first input\n- **Popover**: trigger `aria-expanded` / `aria-haspopup` / `aria-controls`\n- **Slider**: default `aria-label` on a single thumb (overridable)\n- **Select / CascadeSelect / TreeSelect / DatePicker**: combobox semantics, keyboard navigation, and field feedback (`invalid` / `error-message` / `help-text`)\n\n## Testing tips\n\n- Complete primary flows with keyboard only (Tab, Enter, Esc, arrows).\n- Spot-check forms and dialogs with NVDA or VoiceOver.\n- Verify usability under `prefers-reduced-motion: reduce` or `useMotion('none')`.\n\n## See also\n\n- [Motion](/docs/motion): intensity, enter/exit presets, and tokens\\n- [Theme](/docs/theme): light/dark and density\n- [Configuration](/docs/config): locale and defaults\n",
|
|
25870
26151
|
"sections": [
|
|
25871
26152
|
{
|
|
25872
26153
|
"title": "",
|
|
@@ -25916,7 +26197,7 @@
|
|
|
25916
26197
|
{
|
|
25917
26198
|
"title": "See also",
|
|
25918
26199
|
"id": "see-also",
|
|
25919
|
-
"body": "- [Theme](/docs/theme):
|
|
26200
|
+
"body": "- [Motion](/docs/motion): intensity, enter/exit presets, and tokens\\n- [Theme](/docs/theme): light/dark and density\n- [Configuration](/docs/config): locale and defaults"
|
|
25920
26201
|
}
|
|
25921
26202
|
]
|
|
25922
26203
|
}
|
|
@@ -25928,12 +26209,12 @@
|
|
|
25928
26209
|
"titleEn": "AI setup",
|
|
25929
26210
|
"description": "用 AI 生成业务页面时，如何配合 @morya-ui/setup、Agent Skill 与 MCP。",
|
|
25930
26211
|
"descriptionEn": "How @morya-ui/setup, Agent skill, and MCP work together for AI-assisted pages.",
|
|
25931
|
-
"order":
|
|
26212
|
+
"order": 12,
|
|
25932
26213
|
"locales": {
|
|
25933
26214
|
"zh-CN": {
|
|
25934
26215
|
"title": "AI 接入",
|
|
25935
26216
|
"description": "用 AI 生成业务页面时，如何配合 @morya-ui/setup、Agent Skill 与 MCP。",
|
|
25936
|
-
"markdown": "---\ntitle: AI 接入\norder:
|
|
26217
|
+
"markdown": "---\ntitle: AI 接入\norder: 12\ndescription: 用 AI 生成业务页面时，如何配合 @morya-ui/setup、Agent Skill 与 MCP。\n---\n\n# AI 接入\n\n面向 **用 AI 生成业务页面** 的业务项目。先用 [`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 把库与 AI 配置装进项目（命令与选项见 [一键接入](/docs/setup)），再按本文约定生成页面。\n\n日常手写代码仍可只 `pnpm add morya-ui`，见 [快速上手](/docs/quick-start)。\n\n## 推荐流程\n\n1. 在业务项目根目录执行 `npx @morya-ui/setup`（或已装库时用 `npx @morya-ui/setup ai`）\n2. **重启 Cursor**（或重载 MCP）\n3. 生成页面前让 Agent 先读 `DESIGN.md`，需要时再读黄金样例与 [Agent Skill](/docs/agent-skill)\n4. 不确定组件 API 时走 [Agent MCP](/docs/mcp)，不要臆造 props\n\n## 与 Skill / MCP 的关系\n\n- **[一键接入](/docs/setup)**：把库与 AI 配置写入项目 \n- **[Agent Skill](/docs/agent-skill)**：按需指导如何用 `morya-ui` 做页面 \n- **MCP**：运行时检索真实组件 API / 示例 \n\n工具列表与多客户端配置见 [Agent MCP](/docs/mcp)。也可以不跑 setup，按该页手写 MCP。\n\n## 下一步\n\n- [一键接入](/docs/setup)：`@morya-ui/setup` 命令与落地文件 \n- [Agent Skill](/docs/agent-skill)：`morya-ui-pages` 何时用、表面地图 \n- [Agent MCP](/docs/mcp)：工具与客户端配置 \n- [快速上手](/docs/quick-start)：手写安装与最小示例 \n- [组件](/components)：浏览 API 与预览\n",
|
|
25937
26218
|
"sections": [
|
|
25938
26219
|
{
|
|
25939
26220
|
"title": "",
|
|
@@ -25960,7 +26241,7 @@
|
|
|
25960
26241
|
"en-US": {
|
|
25961
26242
|
"title": "AI setup",
|
|
25962
26243
|
"description": "How @morya-ui/setup, Agent skill, and MCP work together for AI-assisted pages.",
|
|
25963
|
-
"markdown": "---\ntitle: AI setup\norder:
|
|
26244
|
+
"markdown": "---\ntitle: AI setup\norder: 12\ndescription: How @morya-ui/setup, Agent skill, and MCP work together for AI-assisted pages.\n---\n\n# AI setup\n\nFor **AI-assisted page generation** in consumer apps. Install the library and AI config with [`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) (commands and options: [One-shot setup](/docs/setup)), then follow this page when generating pages.\n\nHand-written apps can still use only `pnpm add morya-ui` — see [Quick start](/docs/quick-start).\n\n## Recommended flow\n\n1. From the app root run `npx @morya-ui/setup` (or `npx @morya-ui/setup ai` if the library is already installed)\n2. **Restart Cursor** (or reload MCP)\n3. Have the agent read `DESIGN.md` before generating pages; use golden pages and [Agent Skill](/docs/agent-skill) as needed\n4. Look up real APIs via [Agent MCP](/docs/mcp) — do not invent props\n\n## Relation to Skill / MCP\n\n- **[One-shot setup](/docs/setup)**: write the library and AI config into the project \n- **[Agent Skill](/docs/agent-skill)**: on-demand guidance for building pages with `morya-ui` \n- **MCP**: runtime doc lookup for AI clients \n\nTools and multi-client configs: [Agent MCP](/docs/mcp). You can configure MCP by hand from that page without running setup.\n\n## Next steps\n\n- [One-shot setup](/docs/setup): `@morya-ui/setup` commands and files \n- [Agent Skill](/docs/agent-skill): when to use `morya-ui-pages`, surface map \n- [Agent MCP](/docs/mcp): tools and client config \n- [Quick start](/docs/quick-start): manual install and a minimal example \n- [Components](/components): browse APIs and previews\n",
|
|
25964
26245
|
"sections": [
|
|
25965
26246
|
{
|
|
25966
26247
|
"title": "",
|
|
@@ -25992,12 +26273,12 @@
|
|
|
25992
26273
|
"titleEn": "Agent Skill",
|
|
25993
26274
|
"description": "消费方 morya-ui-pages skill：何时触发、与 rules/MCP 分工、页面类型地图。",
|
|
25994
26275
|
"descriptionEn": "Consumer morya-ui-pages skill — when it triggers, vs rules/MCP, and the surface map.",
|
|
25995
|
-
"order":
|
|
26276
|
+
"order": 13,
|
|
25996
26277
|
"locales": {
|
|
25997
26278
|
"zh-CN": {
|
|
25998
26279
|
"title": "Agent Skill",
|
|
25999
26280
|
"description": "消费方 morya-ui-pages skill：何时触发、与 rules/MCP 分工、页面类型地图。",
|
|
26000
|
-
"markdown": "---\ntitle: Agent Skill\norder:
|
|
26281
|
+
"markdown": "---\ntitle: Agent Skill\norder: 13\ndescription: 消费方 morya-ui-pages skill：何时触发、与 rules/MCP 分工、页面类型地图。\n---\n\n# Agent Skill\n\n消费方用 AI 生成 **基于 `morya-ui` 的业务页面** 时，应加载 **`morya-ui-pages`** skill。它规定组件契约、页面类型与工作流；**不是**组件库源码里写新组件用的 skill。\n\n安装方式见 [一键接入](/docs/setup)（`npx @morya-ui/setup` 会复制到项目）；AI 侧流程见 [AI 接入](/docs/ai-setup)。本文说明 skill **是什么、何时用、和其它配置怎么分工**。\n\n## 装到哪里\n\n```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/ # 布局、表面、令牌、反馈、检查清单等\n```\n\n支持 Agent Skills 自动发现的客户端（如 Cursor）会从 `.agents/skills` 读取。生成列表 / 表单 / 登录 / 落地等页面前，应优先匹配本 skill。\n\n源文件在仓库 [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages)，随 `@morya-ui/setup` 的 template 同步。可选 companion（`frontend-design`、`fixing-accessibility`）可用 `npx @morya-ui/setup ai --skills=…` 一并写入，见 [一键接入](/docs/setup)。\n\n## 何时触发\n\n典型话术或主题：\n\n- `morya-ui`、`M*` 组件、`--m-*` 令牌、黄金样例\n- 后台 / 列表 / 表单 / 仪表盘 / 详情 / 设置\n- 登录 / 注册 / 空状态 / 向导 / 落地页 / 官网\n\n**优先于**通用 `frontend-design`、Impeccable、UI-UX-Pro-Max 等：那些只能当审美参考；栈是 morya-ui 时以本 skill 为准。\n\n**不要**用于：纯后端、或在本仓库 `src/components` 里新增组件库组件。\n\n## 与其它配置的分工\n\n| 层 | 角色 |\n| --- | --- |\n| [一键接入](/docs/setup) / `@morya-ui/setup` | 一次性把库 + skill + rules + MCP 装进项目 |\n| [AI 接入](/docs/ai-setup) | 装好后如何配合 Agent 生成页面 |\n| **`morya-ui-pages` skill** | 按需工作流：选表面、读黄金样例、组 `M*`、自检 |\n| `.cursor/rules/` | 编辑器常驻短规则（设计系统、组件用法、布局） |\n| `DESIGN.md` | 项目设计第一信源；与 skill 冲突时以项目 `DESIGN.md` 为准 |\n| [Agent MCP](/docs/mcp) | 运行时查真实 Props / Events / 示例，禁止臆造 API |\n\n两层始终生效：\n\n1. **契约** — 只用 `M*` 与 `--m-*`，API 以 MCP / 文档为准 \n2. **工艺** — 先定表面类型，再做视觉；后台偏克制，落地 / 品牌向可有意表达，但仍上令牌、上组件\n\n## 页面类型（Surface）地图\n\n| 车道 | 典型表面 | 优先参考 |\n| --- | --- | --- |\n| **Ops** | 列表、表单、仪表盘、详情、设置、筛选抽屉 | 黄金样例 + skill `page-layouts` |\n| **Account** | 登录、注册、邀请、重置密码、个人资料 | skill `surfaces` § Account |\n| **Flow** | 引导、空状态、向导、成功页 | skill `surfaces` § Flow |\n| **System** | 404、无权限、维护中 | skill `surfaces` § System |\n| **Express** | 营销落地、定价、功能展示 | skill `surfaces` + `visual-craft` |\n| **Overlay** | 以 Dialog / Drawer / CommandMenu 为主界面 | skill `surfaces` § Overlay |\n\n不确定时：后台默认 Ops → 最近黄金样例；对外营销 → Express。\n\n## Agent 推荐工作流（摘要）\n\n1. 钉死主体、受众、表面、第一屏单一任务 \n2. 优先 MCP：`recommend_page` → **`get_golden_page`（镜像）** → `get_component` / `get_example` \n3. 无 MCP 时读 skill `references/`（布局、表面、反馈） \n4. 反馈默认 `message`；`toast` 仅 summary+detail / 异步感。表单常驻错误用字段 `errorMessage` 或 token 样式的 `role=\"alert\"`，不要把 `<MMessage>` 当成内嵌 Alert。表格行数据用 `rows`。交付前默认做一轮 craft（Ops polish / 氛围配方，见 skill `visual-craft`）。 \n5. **必须**跑 MCP `validate_usage`（API 准确）与 `validate_page`（布局/契约建议）；对照 skill 检查清单\n\n细节与硬边界以项目内 `SKILL.md` 为准，本文不重复全文。\n\n## 下一步\n\n- [一键接入](/docs/setup)：安装 skill 与其它配置 \n- [AI 接入](/docs/ai-setup)：用 AI 生成页面时的流程 \n- [Agent MCP](/docs/mcp)：工具与客户端配置 \n- [快速上手](/docs/quick-start)：手写安装组件库 \n- [组件](/components)：浏览 API\n",
|
|
26001
26282
|
"sections": [
|
|
26002
26283
|
{
|
|
26003
26284
|
"title": "",
|
|
@@ -26007,7 +26288,7 @@
|
|
|
26007
26288
|
{
|
|
26008
26289
|
"title": "装到哪里",
|
|
26009
26290
|
"id": "装到哪里",
|
|
26010
|
-
"body": "```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/ # 布局、表面、令牌、反馈、检查清单等\n```\n\n支持 Agent Skills 自动发现的客户端（如 Cursor）会从 `.agents/skills` 读取。生成列表 / 表单 / 登录 / 落地等页面前，应优先匹配本 skill。\n\n源文件在仓库 [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages)，随 `@morya-ui/setup` 的 template
|
|
26291
|
+
"body": "```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/ # 布局、表面、令牌、反馈、检查清单等\n```\n\n支持 Agent Skills 自动发现的客户端（如 Cursor）会从 `.agents/skills` 读取。生成列表 / 表单 / 登录 / 落地等页面前，应优先匹配本 skill。\n\n源文件在仓库 [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages)，随 `@morya-ui/setup` 的 template 同步。可选 companion（`frontend-design`、`fixing-accessibility`）可用 `npx @morya-ui/setup ai --skills=…` 一并写入，见 [一键接入](/docs/setup)。"
|
|
26011
26292
|
},
|
|
26012
26293
|
{
|
|
26013
26294
|
"title": "何时触发",
|
|
@@ -26027,7 +26308,7 @@
|
|
|
26027
26308
|
{
|
|
26028
26309
|
"title": "Agent 推荐工作流（摘要）",
|
|
26029
26310
|
"id": "agent-推荐工作流-摘要",
|
|
26030
|
-
"body": "1. 钉死主体、受众、表面、第一屏单一任务 \n2. 优先 MCP：`recommend_page` →
|
|
26311
|
+
"body": "1. 钉死主体、受众、表面、第一屏单一任务 \n2. 优先 MCP：`recommend_page` → **`get_golden_page`（镜像）** → `get_component` / `get_example` \n3. 无 MCP 时读 skill `references/`（布局、表面、反馈） \n4. 反馈默认 `message`；`toast` 仅 summary+detail / 异步感。表单常驻错误用字段 `errorMessage` 或 token 样式的 `role=\"alert\"`，不要把 `<MMessage>` 当成内嵌 Alert。表格行数据用 `rows`。交付前默认做一轮 craft（Ops polish / 氛围配方，见 skill `visual-craft`）。 \n5. **必须**跑 MCP `validate_usage`（API 准确）与 `validate_page`（布局/契约建议）；对照 skill 检查清单\n\n细节与硬边界以项目内 `SKILL.md` 为准，本文不重复全文。"
|
|
26031
26312
|
},
|
|
26032
26313
|
{
|
|
26033
26314
|
"title": "下一步",
|
|
@@ -26039,7 +26320,7 @@
|
|
|
26039
26320
|
"en-US": {
|
|
26040
26321
|
"title": "Agent Skill",
|
|
26041
26322
|
"description": "Consumer morya-ui-pages skill — when it triggers, vs rules/MCP, and the surface map.",
|
|
26042
|
-
"markdown": "---\ntitle: Agent Skill\norder:
|
|
26323
|
+
"markdown": "---\ntitle: Agent Skill\norder: 13\ndescription: Consumer morya-ui-pages skill — when it triggers, vs rules/MCP, and the surface map.\n---\n\n# Agent Skill\n\nWhen AI generates **morya-ui consumer pages**, load the **`morya-ui-pages`** skill. It defines the component contract, surface types, and workflow. It is **not** for authoring new components inside the library source.\n\nInstall via [One-shot setup](/docs/setup) (`npx @morya-ui/setup` copies it into the project); AI workflow: [AI setup](/docs/ai-setup). This page explains **what it is, when to use it, and how it relates to other config**.\n\n## Where it lives\n\n```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/ # layouts, surfaces, tokens, feedback, checklist, …\n```\n\nClients that auto-discover Agent Skills (e.g. Cursor) read `.agents/skills`. Prefer this skill before generating list / form / login / landing pages.\n\nSource: [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages), synced into the `@morya-ui/setup` template. Optional companions (`frontend-design`, `fixing-accessibility`) can be installed with `npx @morya-ui/setup ai --skills=…` — see [One-shot setup](/docs/setup).\n\n## When it triggers\n\nTypical topics:\n\n- `morya-ui`, `M*` components, `--m-*` tokens, golden pages\n- Admin list / form / dashboard / detail / settings\n- Login / register / empty state / wizard / landing / marketing site\n\n**Prefer over** generic `frontend-design`, Impeccable, or UI-UX-Pro-Max when the stack is morya-ui — those may inform taste only.\n\n**Do not** use for backend-only work or for adding components under this repo’s `src/components`.\n\n## How it relates to other config\n\n| Layer | Role |\n| --- | --- |\n| [One-shot setup](/docs/setup) / `@morya-ui/setup` | One-shot install of library + skill + rules + MCP |\n| [AI setup](/docs/ai-setup) | How to use the Agent after install |\n| **`morya-ui-pages` skill** | On-demand workflow: pick surface, golden pages, compose `M*`, review |\n| `.cursor/rules/` | Always-on short editor rules |\n| `DESIGN.md` | Project design source of truth; wins over skill on conflict |\n| [Agent MCP](/docs/mcp) | Runtime lookup of real props / events / examples |\n\nTwo layers always apply:\n\n1. **Contract** — only `M*` and `--m-*`; APIs from MCP / docs \n2. **Craft** — pick the surface first; Ops stays restrained; Express may take intentional aesthetic risk on-token and on-component\n\n## Surface map\n\n| Lane | Surfaces | Prefer |\n| --- | --- | --- |\n| **Ops** | list, form, dashboard, detail, settings, filter drawer | Golden pages + skill `page-layouts` |\n| **Account** | login, register, invite, reset password, profile | skill `surfaces` § Account |\n| **Flow** | onboarding, empty, wizard, success | skill `surfaces` § Flow |\n| **System** | 404, permission denied, maintenance | skill `surfaces` § System |\n| **Express** | marketing landing, pricing, feature showcase | skill `surfaces` + `visual-craft` |\n| **Overlay** | Dialog / Drawer / CommandMenu as the main UI | skill `surfaces` § Overlay |\n\nUnclear brief → Ops → nearest golden page; public marketing → Express.\n\n## Recommended agent workflow (summary)\n\n1. Pin subject, audience, surface, and the first viewport’s single job \n2. Prefer MCP: `recommend_page` → **`get_golden_page` (mirror)** → `get_component` / `get_example` \n3. Without MCP, read skill `references/` (layouts, surfaces, feedback) \n4. Feedback defaults to `message`; `toast` only for summary+detail / async feel. Persistent form errors use field `errorMessage` or a token-styled `role=\"alert\"` — `<MMessage>` is not an inline alert. Table rows use `rows`. Always run a light craft pass before delivery (Ops polish / atmosphere — see skill `visual-craft`). \n5. **Always** run MCP `validate_usage` (API accuracy) and `validate_page` (layout/contract advisories); use the skill checklist \n\nFull rules and hard boundaries live in the project’s `SKILL.md` — this page does not duplicate it.\n\n## Next steps\n\n- [One-shot setup](/docs/setup): install the skill and related config \n- [AI setup](/docs/ai-setup): AI page-generation workflow \n- [Agent MCP](/docs/mcp): tools and client config \n- [Quick start](/docs/quick-start): manual library install \n- [Components](/components): browse APIs\n",
|
|
26043
26324
|
"sections": [
|
|
26044
26325
|
{
|
|
26045
26326
|
"title": "",
|
|
@@ -26049,7 +26330,7 @@
|
|
|
26049
26330
|
{
|
|
26050
26331
|
"title": "Where it lives",
|
|
26051
26332
|
"id": "where-it-lives",
|
|
26052
|
-
"body": "```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/ # layouts, surfaces, tokens, feedback, checklist, …\n```\n\nClients that auto-discover Agent Skills (e.g. Cursor) read `.agents/skills`. Prefer this skill before generating list / form / login / landing pages.\n\nSource: [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages), synced into the `@morya-ui/setup` template."
|
|
26333
|
+
"body": "```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/ # layouts, surfaces, tokens, feedback, checklist, …\n```\n\nClients that auto-discover Agent Skills (e.g. Cursor) read `.agents/skills`. Prefer this skill before generating list / form / login / landing pages.\n\nSource: [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages), synced into the `@morya-ui/setup` template. Optional companions (`frontend-design`, `fixing-accessibility`) can be installed with `npx @morya-ui/setup ai --skills=…` — see [One-shot setup](/docs/setup)."
|
|
26053
26334
|
},
|
|
26054
26335
|
{
|
|
26055
26336
|
"title": "When it triggers",
|
|
@@ -26069,7 +26350,7 @@
|
|
|
26069
26350
|
{
|
|
26070
26351
|
"title": "Recommended agent workflow (summary)",
|
|
26071
26352
|
"id": "recommended-agent-workflow-summary",
|
|
26072
|
-
"body": "1. Pin subject, audience, surface, and the first viewport’s single job \n2. Prefer MCP: `recommend_page` →
|
|
26353
|
+
"body": "1. Pin subject, audience, surface, and the first viewport’s single job \n2. Prefer MCP: `recommend_page` → **`get_golden_page` (mirror)** → `get_component` / `get_example` \n3. Without MCP, read skill `references/` (layouts, surfaces, feedback) \n4. Feedback defaults to `message`; `toast` only for summary+detail / async feel. Persistent form errors use field `errorMessage` or a token-styled `role=\"alert\"` — `<MMessage>` is not an inline alert. Table rows use `rows`. Always run a light craft pass before delivery (Ops polish / atmosphere — see skill `visual-craft`). \n5. **Always** run MCP `validate_usage` (API accuracy) and `validate_page` (layout/contract advisories); use the skill checklist \n\nFull rules and hard boundaries live in the project’s `SKILL.md` — this page does not duplicate it."
|
|
26073
26354
|
},
|
|
26074
26355
|
{
|
|
26075
26356
|
"title": "Next steps",
|
|
@@ -26086,12 +26367,12 @@
|
|
|
26086
26367
|
"titleEn": "Agent MCP",
|
|
26087
26368
|
"description": "可选的 MCP 服务，供支持 Model Context Protocol 的 AI 客户端检索本库文档。",
|
|
26088
26369
|
"descriptionEn": "Optional MCP server for AI clients that support the Model Context Protocol.",
|
|
26089
|
-
"order":
|
|
26370
|
+
"order": 14,
|
|
26090
26371
|
"locales": {
|
|
26091
26372
|
"zh-CN": {
|
|
26092
26373
|
"title": "Agent MCP",
|
|
26093
26374
|
"description": "可选的 MCP 服务，供支持 Model Context Protocol 的 AI 客户端检索本库文档。",
|
|
26094
|
-
"markdown": "---\ntitle: Agent MCP\norder:
|
|
26375
|
+
"markdown": "---\ntitle: Agent MCP\norder: 14\ndescription: 可选的 MCP 服务，供支持 Model Context Protocol 的 AI 客户端检索本库文档。\n---\n\n# Agent MCP\n\n[`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp) 是可选的 [Model Context Protocol](https://modelcontextprotocol.io/)（stdio）服务。它把本站组件文档、示例与指南做成可检索工具，方便 **支持 MCP 的 AI 客户端** 按真实 API 生成代码。\n\n日常使用组件库 **不需要** 安装或配置 MCP。应用里仍然只依赖：\n\n```bash\npnpm add morya-ui\n```\n\n```ts\nimport 'morya-ui/styles.css'\n```\n\n若要连同 Agent Skill、Cursor 规则一起装好，见 [一键接入](/docs/setup)；AI 流程见 [AI 接入](/docs/ai-setup)；Skill 本身说明见 [Agent Skill](/docs/agent-skill)。\n\n## 接入方式\n\nMCP 客户端通过 stdio 启动本包即可：\n\n```bash\nnpx -y @morya-ui/mcp\n```\n\n通用写法：\n\n```json\n{\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n}\n```\n\n字段名因客户端而异，只要支持 MCP stdio 即可接入。\n\n### 常见客户端配置示例\n\n以下为常见产品的配置片段，键名可能随版本变化，以各产品官方文档为准。\n\n**Cursor**（`.cursor/mcp.json` 或用户级 MCP 配置）：\n\n```json\n{\n \"mcpServers\": {\n \"morya-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n }\n}\n```\n\n**Claude Desktop / Claude Code**（`claude_desktop_config.json` 等）：\n\n```json\n{\n \"mcpServers\": {\n \"morya-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n }\n}\n```\n\n**Windsurf**（MCP 设置中的 servers 配置）：\n\n```json\n{\n \"mcpServers\": {\n \"morya-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n }\n}\n```\n\n**Cline**（VS Code 扩展设置中的 MCP servers）：\n\n```json\n{\n \"mcpServers\": {\n \"morya-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n }\n}\n```\n\n**Zed**（`settings.json` → `context_servers`）：\n\n```json\n{\n \"context_servers\": {\n \"morya-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n }\n}\n```\n\n**Continue**（`config.json` / YAML 中的 MCP servers，字段名以当前版本为准）：\n\n```json\n{\n \"mcpServers\": [\n {\n \"name\": \"morya-ui\",\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n ]\n}\n```\n\n## 可用工具\n\n### 基础 — 查组件文档\n\n| 工具 | 作用 |\n| --- | --- |\n| `list` | 列出组件 / 指南 / 示例 / 分类 / 页面模式 |\n| `search` | 搜索文档、示例、页面模式与组件选型指南 |\n| `get_component` | 读取组件说明与 API |\n| `get_example` | 获取源码示例 |\n| `get_guide` | 读取指南 |\n| `get_setup` | 安装与初始化说明 |\n| `validate_usage` | 对照文档粗检 props / events 用法 |\n| `version` | 版本与目录状态 |\n\n### 高级 — 页面组合（可选）\n\n| 工具 | 作用 |\n| --- | --- |\n| `list_patterns` | 列出可复用的页面组合模式 |\n| `get_pattern` | 读取模式的结构、布局与交互规则 |\n| `recommend_page` | 根据页面意图推荐模式；可附带 starter 脚手架 |\n| `get_design_rules` | 设计令牌与 MPage* 组合配方 |\n| `recommend_component` | 列出、阅读或推荐组件选型指南 |\n| `list_golden_pages` | 列出黄金样例页面 |\n| `get_golden_page` | 读取黄金样例 Vue 源码（含 settings / wizard / result / detail / form-in-dialog 等；`includeScaffold` 有样例时返回样例源码） |\n| `list_page_snippets` | 列出可复用的页面区块 snippet |\n| `get_page_snippet` | 读取局部区块 snippet（筛选区、工具栏等） |\n| `validate_page` | 校验页面组合、间距、双边框，以及 rows / message / MStatus 等契约 |\n\n多数工具支持 `mode`：`zh`（默认）或 `en`。\n\n### 推荐工作流\n\n**查单个组件：** `search` / `get_component` → `get_example` → `validate_usage`\n\n**规划整页：** `recommend_page` → `get_golden_page` → `get_pattern` → `get_design_rules` → `get_component` / `get_example` → **`validate_usage`** → `validate_page`\n\n**改局部区块：** `get_page_snippet(section)` → `get_component` / `get_example` → `validate_usage` → `validate_page`\n\n需要 starter 代码时，给 `recommend_page` 传 `includeScaffold: true`（有黄金样例时返回样例源码，不是另一套模板）：\n\n```json\n{\n \"intent\": \"油井管理列表\",\n \"pageType\": \"list\",\n \"features\": [\"筛选\", \"新增\", \"分页\"],\n \"includeScaffold\": true\n}\n```\n\n`recommend_component` 用法：\n\n- 不传 `query` 和 `decision` → 列出全部选型指南\n- 只传 `decision` → 阅读某一指南\n- 传 `query` → 根据问题推荐组件\n\n当前指南包括：`form-surface-choice`、`overlay-choice`、`data-display-choice`、`selection-choice`（含 Select / TreeSelect / CascadeSelect / Listbox / SelectButton / Radio / AutoComplete）、`status-label-choice`、`empty-result-choice`、`action-menu-choice`、`loading-choice`、`page-scroll-choice`、`surface-choice`、`page-section-choice`、`layout-spacing-choice`、`surface-nesting-choice`。\n\n## 对话示例\n\n接入后，可直接让助手调用本服务，例如：\n\n> 用 morya-ui 的 MCP 查一下 Dialog 的 props，并给一个带确认 / 取消按钮的示例。\n\n> 搜索和「日期」相关的组件，选一个适合表单的，按文档写出最小用法。\n\n> 根据 MCP 里 Button 的文档，写一个 `severity=\"danger\"` 的删除按钮，并校验 props 是否合法。\n\n助手应先调用工具，再基于返回内容生成类似：\n\n```vue\n<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n <MButton label=\"删除\" severity=\"danger\" />\n</template>\n```\n\n## 与文档站的关系\n\n目录与本站同源（组件 `docs/` + 指南 Markdown）。官网文档更新后，维护者重新发布 `@morya-ui/mcp`，客户端通过 `npx -y` 即可拿到新版本。\n\n更多实现细节见仓库内 [packages/ui-mcp/README.md](https://github.com/morya-space/morya-ui/tree/main/packages/ui-mcp)。\n\n## 下一步\n\n- [AI 接入](/docs/ai-setup)：`npx @morya-ui/setup`、skill 与 Cursor MCP\n- [Agent Skill](/docs/agent-skill)：`morya-ui-pages` 何时用、表面地图\n- [快速上手](/docs/quick-start)：在应用中安装并使用组件\n- [组件](/components)：浏览全部组件与交互示例\n",
|
|
26095
26376
|
"sections": [
|
|
26096
26377
|
{
|
|
26097
26378
|
"title": "",
|
|
@@ -26106,7 +26387,7 @@
|
|
|
26106
26387
|
{
|
|
26107
26388
|
"title": "可用工具",
|
|
26108
26389
|
"id": "可用工具",
|
|
26109
|
-
"body": "### 基础 — 查组件文档\n\n| 工具 | 作用 |\n| --- | --- |\n| `list` | 列出组件 / 指南 / 示例 / 分类 / 页面模式 |\n| `search` | 搜索文档、示例、页面模式与组件选型指南 |\n| `get_component` | 读取组件说明与 API |\n| `get_example` | 获取源码示例 |\n| `get_guide` | 读取指南 |\n| `get_setup` | 安装与初始化说明 |\n| `validate_usage` | 对照文档粗检 props / events 用法 |\n| `version` | 版本与目录状态 |\n\n### 高级 — 页面组合（可选）\n\n| 工具 | 作用 |\n| --- | --- |\n| `list_patterns` | 列出可复用的页面组合模式 |\n| `get_pattern` | 读取模式的结构、布局与交互规则 |\n| `recommend_page` | 根据页面意图推荐模式；可附带 starter 脚手架 |\n| `get_design_rules` | 设计令牌与 MPage* 组合配方 |\n| `recommend_component` | 列出、阅读或推荐组件选型指南 |\n| `list_golden_pages` | 列出黄金样例页面 |\n| `get_golden_page` | 读取黄金样例 Vue
|
|
26390
|
+
"body": "### 基础 — 查组件文档\n\n| 工具 | 作用 |\n| --- | --- |\n| `list` | 列出组件 / 指南 / 示例 / 分类 / 页面模式 |\n| `search` | 搜索文档、示例、页面模式与组件选型指南 |\n| `get_component` | 读取组件说明与 API |\n| `get_example` | 获取源码示例 |\n| `get_guide` | 读取指南 |\n| `get_setup` | 安装与初始化说明 |\n| `validate_usage` | 对照文档粗检 props / events 用法 |\n| `version` | 版本与目录状态 |\n\n### 高级 — 页面组合（可选）\n\n| 工具 | 作用 |\n| --- | --- |\n| `list_patterns` | 列出可复用的页面组合模式 |\n| `get_pattern` | 读取模式的结构、布局与交互规则 |\n| `recommend_page` | 根据页面意图推荐模式；可附带 starter 脚手架 |\n| `get_design_rules` | 设计令牌与 MPage* 组合配方 |\n| `recommend_component` | 列出、阅读或推荐组件选型指南 |\n| `list_golden_pages` | 列出黄金样例页面 |\n| `get_golden_page` | 读取黄金样例 Vue 源码（含 settings / wizard / result / detail / form-in-dialog 等；`includeScaffold` 有样例时返回样例源码） |\n| `list_page_snippets` | 列出可复用的页面区块 snippet |\n| `get_page_snippet` | 读取局部区块 snippet（筛选区、工具栏等） |\n| `validate_page` | 校验页面组合、间距、双边框，以及 rows / message / MStatus 等契约 |\n\n多数工具支持 `mode`：`zh`（默认）或 `en`。\n\n### 推荐工作流\n\n**查单个组件：** `search` / `get_component` → `get_example` → `validate_usage`\n\n**规划整页：** `recommend_page` → `get_golden_page` → `get_pattern` → `get_design_rules` → `get_component` / `get_example` → **`validate_usage`** → `validate_page`\n\n**改局部区块：** `get_page_snippet(section)` → `get_component` / `get_example` → `validate_usage` → `validate_page`\n\n需要 starter 代码时，给 `recommend_page` 传 `includeScaffold: true`（有黄金样例时返回样例源码，不是另一套模板）：\n\n```json\n{\n \"intent\": \"油井管理列表\",\n \"pageType\": \"list\",\n \"features\": [\"筛选\", \"新增\", \"分页\"],\n \"includeScaffold\": true\n}\n```\n\n`recommend_component` 用法：\n\n- 不传 `query` 和 `decision` → 列出全部选型指南\n- 只传 `decision` → 阅读某一指南\n- 传 `query` → 根据问题推荐组件\n\n当前指南包括：`form-surface-choice`、`overlay-choice`、`data-display-choice`、`selection-choice`（含 Select / TreeSelect / CascadeSelect / Listbox / SelectButton / Radio / AutoComplete）、`status-label-choice`、`empty-result-choice`、`action-menu-choice`、`loading-choice`、`page-scroll-choice`、`surface-choice`、`page-section-choice`、`layout-spacing-choice`、`surface-nesting-choice`。"
|
|
26110
26391
|
},
|
|
26111
26392
|
{
|
|
26112
26393
|
"title": "对话示例",
|
|
@@ -26128,7 +26409,7 @@
|
|
|
26128
26409
|
"en-US": {
|
|
26129
26410
|
"title": "Agent MCP",
|
|
26130
26411
|
"description": "Optional MCP server for AI clients that support the Model Context Protocol.",
|
|
26131
|
-
"markdown": "---\ntitle: Agent MCP\norder:
|
|
26412
|
+
"markdown": "---\ntitle: Agent MCP\norder: 14\ndescription: Optional MCP server for AI clients that support the Model Context Protocol.\n---\n\n# Agent MCP\n\n[`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp) is an optional [Model Context Protocol](https://modelcontextprotocol.io/) (stdio) server. It indexes this site’s component docs, examples, and guides so **any MCP-capable AI client** can look up the real API.\n\nYou do **not** need MCP to use the component library. Apps still only depend on:\n\n```bash\npnpm add morya-ui\n```\n\n```ts\nimport 'morya-ui/styles.css'\n```\n\nFor Agent skill, Cursor rules, and writing MCP in one step, see [One-shot setup](/docs/setup). AI workflow: [AI setup](/docs/ai-setup). Skill behavior: [Agent Skill](/docs/agent-skill).\n\n## How to connect\n\nMCP clients start the package over stdio:\n\n```bash\nnpx -y @morya-ui/mcp\n```\n\nGeneric shape:\n\n```json\n{\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n}\n```\n\nField names differ by client. Any client that supports MCP stdio can connect.\n\n### Common client config examples\n\nSnippets for popular products. Key names may change across versions — check each product’s docs.\n\n**Cursor** (`.cursor/mcp.json` or user-level MCP settings):\n\n```json\n{\n \"mcpServers\": {\n \"morya-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n }\n}\n```\n\n**Claude Desktop / Claude Code** (`claude_desktop_config.json`, etc.):\n\n```json\n{\n \"mcpServers\": {\n \"morya-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n }\n}\n```\n\n**Windsurf** (MCP servers in settings):\n\n```json\n{\n \"mcpServers\": {\n \"morya-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n }\n}\n```\n\n**Cline** (MCP servers in the VS Code extension settings):\n\n```json\n{\n \"mcpServers\": {\n \"morya-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n }\n}\n```\n\n**Zed** (`settings.json` → `context_servers`):\n\n```json\n{\n \"context_servers\": {\n \"morya-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n }\n}\n```\n\n**Continue** (`config.json` / YAML MCP servers — follow the current schema):\n\n```json\n{\n \"mcpServers\": [\n {\n \"name\": \"morya-ui\",\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@morya-ui/mcp\"]\n }\n ]\n}\n```\n\n## Tools\n\n### Core — component docs\n\n| Tool | Purpose |\n| --- | --- |\n| `list` | List components / guides / examples / categories / patterns |\n| `search` | Search docs, examples, patterns, and decision guides |\n| `get_component` | Read component docs and API |\n| `get_example` | Return a source example |\n| `get_guide` | Read a guide |\n| `get_setup` | Install and setup guidance |\n| `validate_usage` | Soft-check usage against documented props/events |\n| `version` | Version and catalog status |\n\n### Advanced — page composition (optional)\n\n| Tool | Purpose |\n| --- | --- |\n| `list_patterns` | List reusable page composition patterns |\n| `get_pattern` | Read a pattern's structure, layout, and rules |\n| `recommend_page` | Recommend a pattern from page intent; optional starter scaffold |\n| `get_design_rules` | Design-token and MPage* composition rules |\n| `recommend_component` | List, read, or recommend component selection guides |\n| `list_golden_pages` | List golden page samples |\n| `get_golden_page` | Read a golden page Vue source (`list-page` … `settings-page`, `wizard-form`, …) |\n| `list_page_snippets` | List reusable page section snippets |\n| `get_page_snippet` | Read a local section snippet (filters, toolbar, …) |\n| `validate_page` | Check page composition, spacing, double-border, and contract hints (`rows`, message, MStatus) |\n\nMost tools accept `mode`: `zh` (default) or `en`.\n\nComponent lookup accepts common aliases such as `DataTable`, `数据表格`, `Pager`, and `确认弹窗`.\n\n### Recommended workflow\n\n**Look up a component:** `search` / `get_component` → `get_example` → `validate_usage`\n\n**Plan a page:** `recommend_page` → `get_golden_page` → `get_pattern` → `get_design_rules` → `get_component` / `get_example` → **`validate_usage`** → `validate_page`. Use `recommend_component` when choosing between similar components.\n\n**Edit one section:** `list_page_snippets` → `get_page_snippet` → `get_component` / `get_example` → `validate_usage` → `validate_page`\n\nPass `includeScaffold: true` to `recommend_page` for starter Vue code (returns the golden page source when one exists):\n\n```json\n{\n \"intent\": \"Oil well management list\",\n \"pageType\": \"list\",\n \"features\": [\"filters\", \"create\", \"pagination\"],\n \"mode\": \"en\",\n \"includeScaffold\": true\n}\n```\n\n`recommend_component` modes:\n\n- omit `query` and `decision` → list decision guides\n- `decision` only → read one guide\n- `query` → recommend a component for a UI question\n\nCurrent guides include `form-surface-choice`, `overlay-choice`, `data-display-choice`, `selection-choice` (Select / TreeSelect / CascadeSelect / Listbox / SelectButton / Radio / AutoComplete), `status-label-choice`, `empty-result-choice`, `action-menu-choice`, `loading-choice`, `page-scroll-choice`, `surface-choice`, `page-section-choice`, `layout-spacing-choice`, and `surface-nesting-choice`.\n\n## Prompt examples\n\nAfter connecting, you can ask the assistant to use this server, for example:\n\n> Use the morya-ui MCP to look up Dialog props and give an example with confirm / cancel actions.\n\n> Search for date-related components, pick one suitable for forms, and write a minimal usage from the docs.\n\n> Following the Button docs from MCP, write a delete button with `severity=\"danger\"` and validate the props.\n\nThe assistant should call tools first, then produce something like:\n\n```vue\n<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n <MButton label=\"Delete\" severity=\"danger\" />\n</template>\n```\n\n## Relation to this site\n\nThe catalog is generated from the same sources as this site (component `docs/` + guide Markdown). After docs change, maintainers republish `@morya-ui/mcp`; clients using `npx -y` pick up the new release.\n\nImplementation notes live in [packages/ui-mcp/README.md](https://github.com/morya-space/morya-ui/tree/main/packages/ui-mcp).\n\n## Next steps\n\n- [One-shot setup](/docs/setup): `npx @morya-ui/setup`\n- [AI setup](/docs/ai-setup): Agent skill and MCP workflow\n- [Agent Skill](/docs/agent-skill): when to use `morya-ui-pages`\n- [Quick start](/docs/quick-start): install and use components in an app\n- [Components](/components): browse live examples and APIs\n",
|
|
26132
26413
|
"sections": [
|
|
26133
26414
|
{
|
|
26134
26415
|
"title": "",
|
|
@@ -26143,7 +26424,7 @@
|
|
|
26143
26424
|
{
|
|
26144
26425
|
"title": "Tools",
|
|
26145
26426
|
"id": "tools",
|
|
26146
|
-
"body": "### Core — component docs\n\n| Tool | Purpose |\n| --- | --- |\n| `list` | List components / guides / examples / categories / patterns |\n| `search` | Search docs, examples, patterns, and decision guides |\n| `get_component` | Read component docs and API |\n| `get_example` | Return a source example |\n| `get_guide` | Read a guide |\n| `get_setup` | Install and setup guidance |\n| `validate_usage` | Soft-check usage against documented props/events |\n| `version` | Version and catalog status |\n\n### Advanced — page composition (optional)\n\n| Tool | Purpose |\n| --- | --- |\n| `list_patterns` | List reusable page composition patterns |\n| `get_pattern` | Read a pattern's structure, layout, and rules |\n| `recommend_page` | Recommend a pattern from page intent; optional starter scaffold |\n| `get_design_rules` | Design-token and composition rules |\n| `recommend_component` | List, read, or recommend component selection guides |\n\nMost tools accept `mode`: `zh` (default) or `en`.\n\n### Recommended workflow\n\n**Look up a component:** `search` / `get_component` → `get_example` → `validate_usage`\n\n**Plan a page:** `recommend_page` → `get_pattern` → `get_component` / `get_example` → `
|
|
26427
|
+
"body": "### Core — component docs\n\n| Tool | Purpose |\n| --- | --- |\n| `list` | List components / guides / examples / categories / patterns |\n| `search` | Search docs, examples, patterns, and decision guides |\n| `get_component` | Read component docs and API |\n| `get_example` | Return a source example |\n| `get_guide` | Read a guide |\n| `get_setup` | Install and setup guidance |\n| `validate_usage` | Soft-check usage against documented props/events |\n| `version` | Version and catalog status |\n\n### Advanced — page composition (optional)\n\n| Tool | Purpose |\n| --- | --- |\n| `list_patterns` | List reusable page composition patterns |\n| `get_pattern` | Read a pattern's structure, layout, and rules |\n| `recommend_page` | Recommend a pattern from page intent; optional starter scaffold |\n| `get_design_rules` | Design-token and MPage* composition rules |\n| `recommend_component` | List, read, or recommend component selection guides |\n| `list_golden_pages` | List golden page samples |\n| `get_golden_page` | Read a golden page Vue source (`list-page` … `settings-page`, `wizard-form`, …) |\n| `list_page_snippets` | List reusable page section snippets |\n| `get_page_snippet` | Read a local section snippet (filters, toolbar, …) |\n| `validate_page` | Check page composition, spacing, double-border, and contract hints (`rows`, message, MStatus) |\n\nMost tools accept `mode`: `zh` (default) or `en`.\n\nComponent lookup accepts common aliases such as `DataTable`, `数据表格`, `Pager`, and `确认弹窗`.\n\n### Recommended workflow\n\n**Look up a component:** `search` / `get_component` → `get_example` → `validate_usage`\n\n**Plan a page:** `recommend_page` → `get_golden_page` → `get_pattern` → `get_design_rules` → `get_component` / `get_example` → **`validate_usage`** → `validate_page`. Use `recommend_component` when choosing between similar components.\n\n**Edit one section:** `list_page_snippets` → `get_page_snippet` → `get_component` / `get_example` → `validate_usage` → `validate_page`\n\nPass `includeScaffold: true` to `recommend_page` for starter Vue code (returns the golden page source when one exists):\n\n```json\n{\n \"intent\": \"Oil well management list\",\n \"pageType\": \"list\",\n \"features\": [\"filters\", \"create\", \"pagination\"],\n \"mode\": \"en\",\n \"includeScaffold\": true\n}\n```\n\n`recommend_component` modes:\n\n- omit `query` and `decision` → list decision guides\n- `decision` only → read one guide\n- `query` → recommend a component for a UI question\n\nCurrent guides include `form-surface-choice`, `overlay-choice`, `data-display-choice`, `selection-choice` (Select / TreeSelect / CascadeSelect / Listbox / SelectButton / Radio / AutoComplete), `status-label-choice`, `empty-result-choice`, `action-menu-choice`, `loading-choice`, `page-scroll-choice`, `surface-choice`, `page-section-choice`, `layout-spacing-choice`, and `surface-nesting-choice`."
|
|
26147
26428
|
},
|
|
26148
26429
|
{
|
|
26149
26430
|
"title": "Prompt examples",
|