@morya-ui/mcp 0.3.0 → 0.3.1
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/data/catalog.json +1596 -175
- package/data/example-coverage.json +208 -90
- package/package.json +1 -1
package/data/catalog.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-09-
|
|
2
|
+
"generatedAt": "2026-09-23T09:00:38.573Z",
|
|
3
3
|
"library": {
|
|
4
4
|
"name": "morya-ui",
|
|
5
|
-
"version": "0.3.
|
|
5
|
+
"version": "0.3.1"
|
|
6
6
|
},
|
|
7
7
|
"mcp": {
|
|
8
8
|
"name": "@morya-ui/mcp",
|
|
9
|
-
"version": "0.3.
|
|
9
|
+
"version": "0.3.1"
|
|
10
10
|
},
|
|
11
11
|
"components": [
|
|
12
12
|
{
|
|
@@ -66,6 +66,7 @@
|
|
|
66
66
|
"description": "标题右侧扩展，`{ tab }`；点击不会折叠。"
|
|
67
67
|
}
|
|
68
68
|
],
|
|
69
|
+
"methods": [],
|
|
69
70
|
"examples": [
|
|
70
71
|
{
|
|
71
72
|
"id": "引入-1",
|
|
@@ -388,6 +389,7 @@
|
|
|
388
389
|
"description": "无匹配结果。"
|
|
389
390
|
}
|
|
390
391
|
],
|
|
392
|
+
"methods": [],
|
|
391
393
|
"examples": [
|
|
392
394
|
{
|
|
393
395
|
"id": "引入-1",
|
|
@@ -618,6 +620,7 @@
|
|
|
618
620
|
"description": "无 `src` 时的占位内容。"
|
|
619
621
|
}
|
|
620
622
|
],
|
|
623
|
+
"methods": [],
|
|
621
624
|
"examples": [
|
|
622
625
|
{
|
|
623
626
|
"id": "引入-1",
|
|
@@ -820,6 +823,7 @@
|
|
|
820
823
|
"description": "被角标包裹的内容。"
|
|
821
824
|
}
|
|
822
825
|
],
|
|
826
|
+
"methods": [],
|
|
823
827
|
"examples": [
|
|
824
828
|
{
|
|
825
829
|
"id": "引入-1",
|
|
@@ -1064,6 +1068,7 @@
|
|
|
1064
1068
|
"description": "默认内容。"
|
|
1065
1069
|
}
|
|
1066
1070
|
],
|
|
1071
|
+
"methods": [],
|
|
1067
1072
|
"examples": [
|
|
1068
1073
|
{
|
|
1069
1074
|
"id": "引入-1",
|
|
@@ -1224,6 +1229,7 @@
|
|
|
1224
1229
|
"description": "自定义 `item` 内容。"
|
|
1225
1230
|
}
|
|
1226
1231
|
],
|
|
1232
|
+
"methods": [],
|
|
1227
1233
|
"examples": [
|
|
1228
1234
|
{
|
|
1229
1235
|
"id": "引入-1",
|
|
@@ -1542,6 +1548,16 @@
|
|
|
1542
1548
|
"description": "自定义加载图标。"
|
|
1543
1549
|
}
|
|
1544
1550
|
],
|
|
1551
|
+
"methods": [
|
|
1552
|
+
{
|
|
1553
|
+
"name": "focus",
|
|
1554
|
+
"description": "聚焦底层 button。"
|
|
1555
|
+
},
|
|
1556
|
+
{
|
|
1557
|
+
"name": "ref",
|
|
1558
|
+
"description": "底层 `HTMLButtonElement`。"
|
|
1559
|
+
}
|
|
1560
|
+
],
|
|
1545
1561
|
"examples": [
|
|
1546
1562
|
{
|
|
1547
1563
|
"id": "引入-1",
|
|
@@ -1978,6 +1994,7 @@
|
|
|
1978
1994
|
"description": "封面，渲染在头部上方。"
|
|
1979
1995
|
}
|
|
1980
1996
|
],
|
|
1997
|
+
"methods": [],
|
|
1981
1998
|
"examples": [
|
|
1982
1999
|
{
|
|
1983
2000
|
"id": "引入-1",
|
|
@@ -2230,7 +2247,13 @@
|
|
|
2230
2247
|
"description": "页码变化。"
|
|
2231
2248
|
}
|
|
2232
2249
|
],
|
|
2233
|
-
"slots": [
|
|
2250
|
+
"slots": [
|
|
2251
|
+
{
|
|
2252
|
+
"name": "item",
|
|
2253
|
+
"description": "`{ item, index }` 单项。"
|
|
2254
|
+
}
|
|
2255
|
+
],
|
|
2256
|
+
"methods": [],
|
|
2234
2257
|
"examples": [
|
|
2235
2258
|
{
|
|
2236
2259
|
"id": "引入-1",
|
|
@@ -2508,6 +2531,7 @@
|
|
|
2508
2531
|
"description": "选项 `{ option }`。"
|
|
2509
2532
|
}
|
|
2510
2533
|
],
|
|
2534
|
+
"methods": [],
|
|
2511
2535
|
"examples": [
|
|
2512
2536
|
{
|
|
2513
2537
|
"id": "引入-1",
|
|
@@ -2786,6 +2810,7 @@
|
|
|
2786
2810
|
"description": "自定义标签，优先于 `label`。"
|
|
2787
2811
|
}
|
|
2788
2812
|
],
|
|
2813
|
+
"methods": [],
|
|
2789
2814
|
"examples": [
|
|
2790
2815
|
{
|
|
2791
2816
|
"id": "引入-1",
|
|
@@ -3070,6 +3095,7 @@
|
|
|
3070
3095
|
"description": "前置图标。"
|
|
3071
3096
|
}
|
|
3072
3097
|
],
|
|
3098
|
+
"methods": [],
|
|
3073
3099
|
"examples": [
|
|
3074
3100
|
{
|
|
3075
3101
|
"id": "引入-1",
|
|
@@ -3245,6 +3271,7 @@
|
|
|
3245
3271
|
}
|
|
3246
3272
|
],
|
|
3247
3273
|
"slots": [],
|
|
3274
|
+
"methods": [],
|
|
3248
3275
|
"examples": [
|
|
3249
3276
|
{
|
|
3250
3277
|
"id": "引入-1",
|
|
@@ -3513,6 +3540,7 @@
|
|
|
3513
3540
|
"description": "子组件树。"
|
|
3514
3541
|
}
|
|
3515
3542
|
],
|
|
3543
|
+
"methods": [],
|
|
3516
3544
|
"examples": [
|
|
3517
3545
|
{
|
|
3518
3546
|
"id": "size-1",
|
|
@@ -3921,6 +3949,7 @@
|
|
|
3921
3949
|
"description": "自定义 `header` 内容。"
|
|
3922
3950
|
}
|
|
3923
3951
|
],
|
|
3952
|
+
"methods": [],
|
|
3924
3953
|
"examples": [
|
|
3925
3954
|
{
|
|
3926
3955
|
"id": "引入-1",
|
|
@@ -4153,6 +4182,7 @@
|
|
|
4153
4182
|
"description": "弹出层正文。"
|
|
4154
4183
|
}
|
|
4155
4184
|
],
|
|
4185
|
+
"methods": [],
|
|
4156
4186
|
"examples": [
|
|
4157
4187
|
{
|
|
4158
4188
|
"id": "引入-1",
|
|
@@ -4366,6 +4396,16 @@
|
|
|
4366
4396
|
"description": "触发元素（非 popup 模式）。"
|
|
4367
4397
|
}
|
|
4368
4398
|
],
|
|
4399
|
+
"methods": [
|
|
4400
|
+
{
|
|
4401
|
+
"name": "show",
|
|
4402
|
+
"description": "根据鼠标事件或坐标显示。"
|
|
4403
|
+
},
|
|
4404
|
+
{
|
|
4405
|
+
"name": "hide",
|
|
4406
|
+
"description": "隐藏菜单。"
|
|
4407
|
+
}
|
|
4408
|
+
],
|
|
4369
4409
|
"examples": [
|
|
4370
4410
|
{
|
|
4371
4411
|
"id": "引入-1",
|
|
@@ -4640,7 +4680,29 @@
|
|
|
4640
4680
|
"description": "—"
|
|
4641
4681
|
}
|
|
4642
4682
|
],
|
|
4643
|
-
"slots": [
|
|
4683
|
+
"slots": [
|
|
4684
|
+
{
|
|
4685
|
+
"name": "list",
|
|
4686
|
+
"description": "列表布局，`{ items }`。"
|
|
4687
|
+
},
|
|
4688
|
+
{
|
|
4689
|
+
"name": "grid",
|
|
4690
|
+
"description": "网格布局，`{ items }`。"
|
|
4691
|
+
},
|
|
4692
|
+
{
|
|
4693
|
+
"name": "empty",
|
|
4694
|
+
"description": "自定义 `empty` 内容。"
|
|
4695
|
+
},
|
|
4696
|
+
{
|
|
4697
|
+
"name": "header",
|
|
4698
|
+
"description": "自定义 `header` 内容。"
|
|
4699
|
+
},
|
|
4700
|
+
{
|
|
4701
|
+
"name": "loading",
|
|
4702
|
+
"description": "自定义 `loading` 内容。"
|
|
4703
|
+
}
|
|
4704
|
+
],
|
|
4705
|
+
"methods": [],
|
|
4644
4706
|
"examples": [
|
|
4645
4707
|
{
|
|
4646
4708
|
"id": "引入-1",
|
|
@@ -4919,6 +4981,7 @@
|
|
|
4919
4981
|
"description": "自定义触发器 `{ value, open }`。"
|
|
4920
4982
|
}
|
|
4921
4983
|
],
|
|
4984
|
+
"methods": [],
|
|
4922
4985
|
"examples": [
|
|
4923
4986
|
{
|
|
4924
4987
|
"id": "引入-1",
|
|
@@ -5486,6 +5549,20 @@
|
|
|
5486
5549
|
"description": "底部操作区。"
|
|
5487
5550
|
}
|
|
5488
5551
|
],
|
|
5552
|
+
"methods": [
|
|
5553
|
+
{
|
|
5554
|
+
"name": "close",
|
|
5555
|
+
"description": "关闭对话框（等同取消/关闭动作）。"
|
|
5556
|
+
},
|
|
5557
|
+
{
|
|
5558
|
+
"name": "maximize",
|
|
5559
|
+
"description": "最大化；已最大化时无操作。"
|
|
5560
|
+
},
|
|
5561
|
+
{
|
|
5562
|
+
"name": "unmaximize",
|
|
5563
|
+
"description": "退出最大化。"
|
|
5564
|
+
}
|
|
5565
|
+
],
|
|
5489
5566
|
"examples": [
|
|
5490
5567
|
{
|
|
5491
5568
|
"id": "引入-1",
|
|
@@ -5674,13 +5751,18 @@
|
|
|
5674
5751
|
"title": "Events",
|
|
5675
5752
|
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `close` | — | 关闭时触发。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |\n| `maximize` | — | 进入最大化。 |\n| `unmaximize` | — | 退出最大化。 |"
|
|
5676
5753
|
},
|
|
5754
|
+
{
|
|
5755
|
+
"id": "methods",
|
|
5756
|
+
"title": "Methods",
|
|
5757
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `close()` | 关闭对话框（等同取消/关闭动作）。 |\n| `maximize()` | 最大化；已最大化时无操作。 |\n| `unmaximize()` | 退出最大化。 |"
|
|
5758
|
+
},
|
|
5677
5759
|
{
|
|
5678
5760
|
"id": "slots",
|
|
5679
5761
|
"title": "Slots",
|
|
5680
5762
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框内容。 |\n| `header` | 自定义标题区。 |\n| `footer` | 底部操作区。 |"
|
|
5681
5763
|
}
|
|
5682
5764
|
],
|
|
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"
|
|
5765
|
+
"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## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `close()` | 关闭对话框（等同取消/关闭动作）。 |\n| `maximize()` | 最大化；已最大化时无操作。 |\n| `unmaximize()` | 退出最大化。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 对话框内容。 |\n| `header` | 自定义标题区。 |\n| `footer` | 底部操作区。 |\n"
|
|
5684
5766
|
},
|
|
5685
5767
|
"en-US": {
|
|
5686
5768
|
"title": "Dialog",
|
|
@@ -5741,13 +5823,18 @@
|
|
|
5741
5823
|
"title": "Events",
|
|
5742
5824
|
"body": "| 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. |"
|
|
5743
5825
|
},
|
|
5826
|
+
{
|
|
5827
|
+
"id": "methods",
|
|
5828
|
+
"title": "Methods",
|
|
5829
|
+
"body": "| Method | Description |\n| --- | --- |\n| `close()` | Close the dialog (same as the cancel/close action). |\n| `maximize()` | Maximize; no-op when already maximized. |\n| `unmaximize()` | Leave the maximized state. |"
|
|
5830
|
+
},
|
|
5744
5831
|
{
|
|
5745
5832
|
"id": "slots",
|
|
5746
5833
|
"title": "Slots",
|
|
5747
5834
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Dialog content. |\n| `header` | Custom header area. |\n| `footer` | Footer actions. |"
|
|
5748
5835
|
}
|
|
5749
5836
|
],
|
|
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"
|
|
5837
|
+
"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## Methods\n\n| Method | Description |\n| --- | --- |\n| `close()` | Close the dialog (same as the cancel/close action). |\n| `maximize()` | Maximize; no-op when already maximized. |\n| `unmaximize()` | Leave the maximized state. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Dialog content. |\n| `header` | Custom header area. |\n| `footer` | Footer actions. |\n"
|
|
5751
5838
|
}
|
|
5752
5839
|
}
|
|
5753
5840
|
},
|
|
@@ -5804,6 +5891,7 @@
|
|
|
5804
5891
|
"description": "标签内容，优先于 `label`。"
|
|
5805
5892
|
}
|
|
5806
5893
|
],
|
|
5894
|
+
"methods": [],
|
|
5807
5895
|
"examples": [
|
|
5808
5896
|
{
|
|
5809
5897
|
"id": "引入-1",
|
|
@@ -6066,6 +6154,7 @@
|
|
|
6066
6154
|
"description": "停靠项。"
|
|
6067
6155
|
}
|
|
6068
6156
|
],
|
|
6157
|
+
"methods": [],
|
|
6069
6158
|
"examples": [
|
|
6070
6159
|
{
|
|
6071
6160
|
"id": "引入-1",
|
|
@@ -6352,6 +6441,7 @@
|
|
|
6352
6441
|
"description": "自定义标题区。"
|
|
6353
6442
|
}
|
|
6354
6443
|
],
|
|
6444
|
+
"methods": [],
|
|
6355
6445
|
"examples": [
|
|
6356
6446
|
{
|
|
6357
6447
|
"id": "引入-1",
|
|
@@ -6593,6 +6683,7 @@
|
|
|
6593
6683
|
"description": "自定义菜单项，作用域 `{ item }`。"
|
|
6594
6684
|
}
|
|
6595
6685
|
],
|
|
6686
|
+
"methods": [],
|
|
6596
6687
|
"examples": [
|
|
6597
6688
|
{
|
|
6598
6689
|
"id": "引入-1",
|
|
@@ -6867,6 +6958,7 @@
|
|
|
6867
6958
|
"description": "操作区。"
|
|
6868
6959
|
}
|
|
6869
6960
|
],
|
|
6961
|
+
"methods": [],
|
|
6870
6962
|
"examples": [
|
|
6871
6963
|
{
|
|
6872
6964
|
"id": "引入-1",
|
|
@@ -7161,6 +7253,7 @@
|
|
|
7161
7253
|
"description": "自定义图例。"
|
|
7162
7254
|
}
|
|
7163
7255
|
],
|
|
7256
|
+
"methods": [],
|
|
7164
7257
|
"examples": [
|
|
7165
7258
|
{
|
|
7166
7259
|
"id": "引入-1",
|
|
@@ -7499,6 +7592,28 @@
|
|
|
7499
7592
|
"description": "自定义列表项，作用域 `{ file }`。"
|
|
7500
7593
|
}
|
|
7501
7594
|
],
|
|
7595
|
+
"methods": [
|
|
7596
|
+
{
|
|
7597
|
+
"name": "openPicker",
|
|
7598
|
+
"description": "打开系统文件选择框。"
|
|
7599
|
+
},
|
|
7600
|
+
{
|
|
7601
|
+
"name": "submit",
|
|
7602
|
+
"description": "上传列表中 `ready` / `fail` 的文件。"
|
|
7603
|
+
},
|
|
7604
|
+
{
|
|
7605
|
+
"name": "abort",
|
|
7606
|
+
"description": "取消进行中的请求；不传则全部取消。"
|
|
7607
|
+
},
|
|
7608
|
+
{
|
|
7609
|
+
"name": "clear",
|
|
7610
|
+
"description": "清空列表并中止上传。"
|
|
7611
|
+
},
|
|
7612
|
+
{
|
|
7613
|
+
"name": "clearFiles",
|
|
7614
|
+
"description": "清空列表并中止上传。"
|
|
7615
|
+
}
|
|
7616
|
+
],
|
|
7502
7617
|
"examples": [
|
|
7503
7618
|
{
|
|
7504
7619
|
"id": "引入-1",
|
|
@@ -7885,6 +8000,7 @@
|
|
|
7885
8000
|
"description": "布局子节点。"
|
|
7886
8001
|
}
|
|
7887
8002
|
],
|
|
8003
|
+
"methods": [],
|
|
7888
8004
|
"examples": [
|
|
7889
8005
|
{
|
|
7890
8006
|
"id": "引入-1",
|
|
@@ -8079,7 +8195,17 @@
|
|
|
8079
8195
|
}
|
|
8080
8196
|
],
|
|
8081
8197
|
"events": [],
|
|
8082
|
-
"slots": [
|
|
8198
|
+
"slots": [
|
|
8199
|
+
{
|
|
8200
|
+
"name": "default",
|
|
8201
|
+
"description": "输入控件。"
|
|
8202
|
+
},
|
|
8203
|
+
{
|
|
8204
|
+
"name": "label",
|
|
8205
|
+
"description": "自定义标签内容。"
|
|
8206
|
+
}
|
|
8207
|
+
],
|
|
8208
|
+
"methods": [],
|
|
8083
8209
|
"examples": [
|
|
8084
8210
|
{
|
|
8085
8211
|
"id": "引入-1",
|
|
@@ -8234,6 +8360,7 @@
|
|
|
8234
8360
|
"description": "撑满宽度的子内容。"
|
|
8235
8361
|
}
|
|
8236
8362
|
],
|
|
8363
|
+
"methods": [],
|
|
8237
8364
|
"examples": [
|
|
8238
8365
|
{
|
|
8239
8366
|
"id": "引入-1",
|
|
@@ -8357,14 +8484,168 @@
|
|
|
8357
8484
|
"description": "表单布局与字段校验。声明式 rules、label 对齐/行内布局；validate() 始终 resolve，不 reject。",
|
|
8358
8485
|
"descriptionEn": "Form layout and field validation. Declarative rules, label alignment, and inline layout. validate() always resolves and never rejects.",
|
|
8359
8486
|
"import": "import { MForm } from 'morya-ui'",
|
|
8360
|
-
"props": [
|
|
8361
|
-
|
|
8487
|
+
"props": [
|
|
8488
|
+
{
|
|
8489
|
+
"name": "model",
|
|
8490
|
+
"type": "Record<string, unknown>",
|
|
8491
|
+
"default": "—",
|
|
8492
|
+
"description": "供 `rules` 读取的字段值"
|
|
8493
|
+
},
|
|
8494
|
+
{
|
|
8495
|
+
"name": "rules",
|
|
8496
|
+
"type": "FormItemRule | FormItemRule[]",
|
|
8497
|
+
"default": "—",
|
|
8498
|
+
"description": "字段级规则，排在 Form `rules[name]` 之后"
|
|
8499
|
+
},
|
|
8500
|
+
{
|
|
8501
|
+
"name": "labelPosition",
|
|
8502
|
+
"type": "'top' | 'left'",
|
|
8503
|
+
"default": "'top'",
|
|
8504
|
+
"description": "标签位置"
|
|
8505
|
+
},
|
|
8506
|
+
{
|
|
8507
|
+
"name": "labelPlacement",
|
|
8508
|
+
"type": "'top' | 'left'",
|
|
8509
|
+
"default": "—",
|
|
8510
|
+
"description": "`labelPosition` 的别名"
|
|
8511
|
+
},
|
|
8512
|
+
{
|
|
8513
|
+
"name": "labelAlign",
|
|
8514
|
+
"type": "'left' | 'center' | 'right'",
|
|
8515
|
+
"default": "'left'",
|
|
8516
|
+
"description": "标签文本对齐"
|
|
8517
|
+
},
|
|
8518
|
+
{
|
|
8519
|
+
"name": "labelWidth",
|
|
8520
|
+
"type": "string | number",
|
|
8521
|
+
"default": "—",
|
|
8522
|
+
"description": "左侧标签宽度；数字视为 px"
|
|
8523
|
+
},
|
|
8524
|
+
{
|
|
8525
|
+
"name": "inline",
|
|
8526
|
+
"type": "boolean",
|
|
8527
|
+
"default": "false",
|
|
8528
|
+
"description": "表单项横向排列"
|
|
8529
|
+
},
|
|
8530
|
+
{
|
|
8531
|
+
"name": "requireMark",
|
|
8532
|
+
"type": "boolean",
|
|
8533
|
+
"default": "true",
|
|
8534
|
+
"description": "必填星号（`required` 或 `rules.required`）"
|
|
8535
|
+
},
|
|
8536
|
+
{
|
|
8537
|
+
"name": "disabled",
|
|
8538
|
+
"type": "boolean",
|
|
8539
|
+
"default": "false",
|
|
8540
|
+
"description": "禁用态"
|
|
8541
|
+
},
|
|
8542
|
+
{
|
|
8543
|
+
"name": "validateOn",
|
|
8544
|
+
"type": "'submit' | 'blur' | 'change' | 'input' | 数组",
|
|
8545
|
+
"default": "['submit']",
|
|
8546
|
+
"description": "默认触发时机；无 `trigger` 的规则继承此项"
|
|
8547
|
+
},
|
|
8548
|
+
{
|
|
8549
|
+
"name": "for",
|
|
8550
|
+
"type": "string",
|
|
8551
|
+
"default": "—",
|
|
8552
|
+
"description": "—"
|
|
8553
|
+
},
|
|
8554
|
+
{
|
|
8555
|
+
"name": "size",
|
|
8556
|
+
"type": "[MSizeInput](/docs/types#MSizeInput)",
|
|
8557
|
+
"default": "—",
|
|
8558
|
+
"description": "—"
|
|
8559
|
+
},
|
|
8560
|
+
{
|
|
8561
|
+
"name": "pt",
|
|
8562
|
+
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
8563
|
+
"default": "—",
|
|
8564
|
+
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
8565
|
+
},
|
|
8566
|
+
{
|
|
8567
|
+
"name": "name",
|
|
8568
|
+
"type": "string",
|
|
8569
|
+
"default": "—",
|
|
8570
|
+
"description": "字段名（注册到 Form，对应 `model` / `rules`）"
|
|
8571
|
+
},
|
|
8572
|
+
{
|
|
8573
|
+
"name": "validate",
|
|
8574
|
+
"type": "(trigger?) => string | boolean | void | Promise<…>",
|
|
8575
|
+
"default": "—",
|
|
8576
|
+
"description": "回调校验；返回错误文案或 `false`"
|
|
8577
|
+
},
|
|
8578
|
+
{
|
|
8579
|
+
"name": "error",
|
|
8580
|
+
"type": "string",
|
|
8581
|
+
"default": "—",
|
|
8582
|
+
"description": "受控错误（优先于内部结果）"
|
|
8583
|
+
},
|
|
8584
|
+
{
|
|
8585
|
+
"name": "invalid",
|
|
8586
|
+
"type": "—",
|
|
8587
|
+
"default": "—",
|
|
8588
|
+
"description": "布局与展示"
|
|
8589
|
+
},
|
|
8590
|
+
{
|
|
8591
|
+
"name": "help",
|
|
8592
|
+
"type": "—",
|
|
8593
|
+
"default": "—",
|
|
8594
|
+
"description": "布局与展示"
|
|
8595
|
+
},
|
|
8596
|
+
{
|
|
8597
|
+
"name": "required",
|
|
8598
|
+
"type": "—",
|
|
8599
|
+
"default": "—",
|
|
8600
|
+
"description": "布局与展示"
|
|
8601
|
+
},
|
|
8602
|
+
{
|
|
8603
|
+
"name": "label",
|
|
8604
|
+
"type": "—",
|
|
8605
|
+
"default": "—",
|
|
8606
|
+
"description": "布局与展示"
|
|
8607
|
+
}
|
|
8608
|
+
],
|
|
8609
|
+
"events": [
|
|
8610
|
+
{
|
|
8611
|
+
"name": "submit",
|
|
8612
|
+
"payload": "{ valid }",
|
|
8613
|
+
"description": "仅当 `validateOn` 含 `submit` 时自动跑校验"
|
|
8614
|
+
},
|
|
8615
|
+
{
|
|
8616
|
+
"name": "validate",
|
|
8617
|
+
"payload": "{ valid, errors }",
|
|
8618
|
+
"description": "一次校验流程结束"
|
|
8619
|
+
}
|
|
8620
|
+
],
|
|
8362
8621
|
"slots": [
|
|
8363
8622
|
{
|
|
8364
8623
|
"name": "default",
|
|
8365
8624
|
"description": "表单项。"
|
|
8366
8625
|
}
|
|
8367
8626
|
],
|
|
8627
|
+
"methods": [
|
|
8628
|
+
{
|
|
8629
|
+
"name": "validate",
|
|
8630
|
+
"description": "**始终 resolve** `{ valid, errors }`，不会因失败 reject"
|
|
8631
|
+
},
|
|
8632
|
+
{
|
|
8633
|
+
"name": "clearValidate",
|
|
8634
|
+
"description": "清除内部错误"
|
|
8635
|
+
},
|
|
8636
|
+
{
|
|
8637
|
+
"name": "reset",
|
|
8638
|
+
"description": "重置 model 为初始快照并清除校验"
|
|
8639
|
+
},
|
|
8640
|
+
{
|
|
8641
|
+
"name": "resetFields",
|
|
8642
|
+
"description": "将指定字段（默认全部）重置为初始快照"
|
|
8643
|
+
},
|
|
8644
|
+
{
|
|
8645
|
+
"name": "errors",
|
|
8646
|
+
"description": "只读；当前校验错误表（`Record<string, string>`）"
|
|
8647
|
+
}
|
|
8648
|
+
],
|
|
8368
8649
|
"examples": [
|
|
8369
8650
|
{
|
|
8370
8651
|
"id": "引入-1",
|
|
@@ -8490,7 +8771,7 @@
|
|
|
8490
8771
|
{
|
|
8491
8772
|
"id": "props-form",
|
|
8492
8773
|
"title": "Props — Form",
|
|
8493
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `Record<string, unknown>` | — | 供 `rules` 读取的字段值 |\n| `rules` | `FormRules` | — | 按 `name` 声明的规则 |\n| `labelPosition` | `'top' \\| 'left'` | `'top'` | 标签位置 |\n| `labelPlacement` | `'top' \\| 'left'` | — | `labelPosition` 的别名 |\n| `labelAlign` | `'left' \\| 'center' \\| 'right'` | `'left'` | 标签文本对齐 |\n| `labelWidth` | `string \\| number` | — | 左侧标签宽度；数字视为 px |\n| `inline` | `boolean` | `false` | 表单项横向排列 |\n| `requireMark` | `boolean` | `true` | 必填星号（`required` 或 `rules.required`） |\n| `disabled` | `boolean` | `false` | 禁用态 |\n| `validateOn` | `'submit' \\| 'blur' \\| 'change' \\| 'input' \\| 数组` | `['submit']` | 默认触发时机；无 `trigger` 的规则继承此项 |\n| `for` | `string` | — | — |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | — |"
|
|
8774
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `Record<string, unknown>` | — | 供 `rules` 读取的字段值 |\n| `rules` | `FormRules` | — | 按 `name` 声明的规则 |\n| `labelPosition` | `'top' \\| 'left'` | `'top'` | 标签位置 |\n| `labelPlacement` | `'top' \\| 'left'` | — | `labelPosition` 的别名 |\n| `labelAlign` | `'left' \\| 'center' \\| 'right'` | `'left'` | 标签文本对齐 |\n| `labelWidth` | `string \\| number` | — | 左侧标签宽度；数字视为 px |\n| `inline` | `boolean` | `false` | 表单项横向排列 |\n| `requireMark` | `boolean` | `true` | 必填星号（`required` 或 `rules.required`） |\n| `disabled` | `boolean` | `false` | 禁用态 |\n| `validateOn` | `'submit' \\| 'blur' \\| 'change' \\| 'input' \\| 数组` | `['submit']` | 默认触发时机；无 `trigger` 的规则继承此项 |\n| `for` | `string` | — | — |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
8494
8775
|
},
|
|
8495
8776
|
{
|
|
8496
8777
|
"id": "props-formitem",
|
|
@@ -8503,9 +8784,14 @@
|
|
|
8503
8784
|
"body": "| 字段 | 说明 |\n| --- | --- |\n| `required` | 空值（`null` / 空白字符串 / 空数组）时报错 |\n| `min` / `max` | 字符串/数组长度，或有限数字本身 |\n| `pattern` | 非空字符串才检测 |\n| `message` | 错误文案；缺省回退到 locale `required` |\n| `trigger` | `'blur' \\| 'change' \\| 'input' \\| 'submit'`；省略则继承 Form `validateOn` |\n| `validator` | `(value) => string \\| false \\| Promise<…>`；`true` / `undefined` 视为通过 |"
|
|
8504
8785
|
},
|
|
8505
8786
|
{
|
|
8506
|
-
"id": "events-
|
|
8507
|
-
"title": "Events
|
|
8508
|
-
"body": "|
|
|
8787
|
+
"id": "events-form",
|
|
8788
|
+
"title": "Events — Form",
|
|
8789
|
+
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `submit` | `{ valid }` | 仅当 `validateOn` 含 `submit` 时自动跑校验 |\n| `validate` | `{ valid, errors }` | 一次校验流程结束 |"
|
|
8790
|
+
},
|
|
8791
|
+
{
|
|
8792
|
+
"id": "expose-form",
|
|
8793
|
+
"title": "Expose — Form",
|
|
8794
|
+
"body": "| 方法 / 属性 | 说明 |\n| --- | --- |\n| `validate(name?)` | **始终 resolve** `{ valid, errors }`，不会因失败 reject |\n| `clearValidate(name?)` | 清除内部错误 |\n| `reset()` | 重置 model 为初始快照并清除校验 |\n| `resetFields(names?)` | 将指定字段（默认全部）重置为初始快照 |\n| `errors` | 只读；当前校验错误表（`Record<string, string>`） |"
|
|
8509
8795
|
},
|
|
8510
8796
|
{
|
|
8511
8797
|
"id": "slots",
|
|
@@ -8518,7 +8804,7 @@
|
|
|
8518
8804
|
"body": "<h4 id=\"FormRules\">FormRules</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype FormRules = Record<string, FormItemRule | FormItemRule[]>\n```"
|
|
8519
8805
|
}
|
|
8520
8806
|
],
|
|
8521
|
-
"markdown": "---\ntitle: Form\ncategory: 02 / FORM\ndescription: 表单布局与字段校验。声明式 rules、label 对齐/行内布局；validate() 始终 resolve，不 reject。\n---\n\n# Form\n\n`MForm` / `MFormItem` 负责布局、必填标记与错误展示。校验有两条路，可同时使用：\n\n1. **声明式 `rules`（推荐）**：按字段名配置 `required` / `min` / `max` / `pattern` / `validator`。\n2. **回调 `validate`**：FormItem 上传入函数，返回错误文案。仍可用于复杂跨字段逻辑。\n\n未指定 `trigger` 的规则继承 Form 的 `validateOn`。程序化 `validate()` 与 `validateOn` 含 `submit` 的原生提交会跑完该字段全部规则。\n\n**校验约定：** 不依赖外部校验库；`validate()` **始终 resolve** `{ valid, errors }`，校验失败不会 `reject`。Nested path（如 `user.name`）暂不支持，请用扁平字段名。\n\n## 引入\n\n```ts\nimport type { FormInstance, FormRules } from 'morya-ui'\nimport { MForm, MFormItem } from 'morya-ui'\n```\n\n## 声明式 rules\n\n```vue preview src=\"./demos/DeclarativeRules.zh.vue\"\n```\n\n## 回调校验（兼容）\n\n```vue preview src=\"./demos/CallbackValidationCompatible.zh.vue\"\n```\n\n## inline 与 label 对齐\n\n```vue preview src=\"./demos/InlineLayoutAndLabelAlignment.zh.vue\"\n```\n\n## Props — Form\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `Record<string, unknown>` | — | 供 `rules` 读取的字段值 |\n| `rules` | `FormRules` | — | 按 `name` 声明的规则 |\n| `labelPosition` | `'top' \\| 'left'` | `'top'` | 标签位置 |\n| `labelPlacement` | `'top' \\| 'left'` | — | `labelPosition` 的别名 |\n| `labelAlign` | `'left' \\| 'center' \\| 'right'` | `'left'` | 标签文本对齐 |\n| `labelWidth` | `string \\| number` | — | 左侧标签宽度；数字视为 px |\n| `inline` | `boolean` | `false` | 表单项横向排列 |\n| `requireMark` | `boolean` | `true` | 必填星号（`required` 或 `rules.required`） |\n| `disabled` | `boolean` | `false` | 禁用态 |\n| `validateOn` | `'submit' \\| 'blur' \\| 'change' \\| 'input' \\| 数组` | `['submit']` | 默认触发时机；无 `trigger` 的规则继承此项 |\n| `for` | `string` | — | — |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | — |\n\n## Props — FormItem\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `name` | `string` | — | 字段名（注册到 Form，对应 `model` / `rules`） |\n| `rules` | `FormItemRule \\| FormItemRule[]` | — | 字段级规则，排在 Form `rules[name]` 之后 |\n| `validate` | `(trigger?) => string \\| boolean \\| void \\| Promise<…>` | — | 回调校验；返回错误文案或 `false` |\n| `error` | `string` | — | 受控错误（优先于内部结果） |\n| `invalid` / `help` / `required` / `label` | — | — | 布局与展示 |\n\n## FormItemRule\n\n| 字段 | 说明 |\n| --- | --- |\n| `required` | 空值（`null` / 空白字符串 / 空数组）时报错 |\n| `min` / `max` | 字符串/数组长度，或有限数字本身 |\n| `pattern` | 非空字符串才检测 |\n| `message` | 错误文案；缺省回退到 locale `required` |\n| `trigger` | `'blur' \\| 'change' \\| 'input' \\| 'submit'`；省略则继承 Form `validateOn` |\n| `validator` | `(value) => string \\| false \\| Promise<…>`；`true` / `undefined` 视为通过 |\n\n## Events
|
|
8807
|
+
"markdown": "---\ntitle: Form\ncategory: 02 / FORM\ndescription: 表单布局与字段校验。声明式 rules、label 对齐/行内布局；validate() 始终 resolve，不 reject。\n---\n\n# Form\n\n`MForm` / `MFormItem` 负责布局、必填标记与错误展示。校验有两条路，可同时使用：\n\n1. **声明式 `rules`（推荐）**：按字段名配置 `required` / `min` / `max` / `pattern` / `validator`。\n2. **回调 `validate`**：FormItem 上传入函数，返回错误文案。仍可用于复杂跨字段逻辑。\n\n未指定 `trigger` 的规则继承 Form 的 `validateOn`。程序化 `validate()` 与 `validateOn` 含 `submit` 的原生提交会跑完该字段全部规则。\n\n**校验约定：** 不依赖外部校验库；`validate()` **始终 resolve** `{ valid, errors }`，校验失败不会 `reject`。Nested path（如 `user.name`）暂不支持，请用扁平字段名。\n\n## 引入\n\n```ts\nimport type { FormInstance, FormRules } from 'morya-ui'\nimport { MForm, MFormItem } from 'morya-ui'\n```\n\n## 声明式 rules\n\n```vue preview src=\"./demos/DeclarativeRules.zh.vue\"\n```\n\n## 回调校验（兼容）\n\n```vue preview src=\"./demos/CallbackValidationCompatible.zh.vue\"\n```\n\n## inline 与 label 对齐\n\n```vue preview src=\"./demos/InlineLayoutAndLabelAlignment.zh.vue\"\n```\n\n## Props — Form\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `model` | `Record<string, unknown>` | — | 供 `rules` 读取的字段值 |\n| `rules` | `FormRules` | — | 按 `name` 声明的规则 |\n| `labelPosition` | `'top' \\| 'left'` | `'top'` | 标签位置 |\n| `labelPlacement` | `'top' \\| 'left'` | — | `labelPosition` 的别名 |\n| `labelAlign` | `'left' \\| 'center' \\| 'right'` | `'left'` | 标签文本对齐 |\n| `labelWidth` | `string \\| number` | — | 左侧标签宽度；数字视为 px |\n| `inline` | `boolean` | `false` | 表单项横向排列 |\n| `requireMark` | `boolean` | `true` | 必填星号（`required` 或 `rules.required`） |\n| `disabled` | `boolean` | `false` | 禁用态 |\n| `validateOn` | `'submit' \\| 'blur' \\| 'change' \\| 'input' \\| 数组` | `['submit']` | 默认触发时机；无 `trigger` 的规则继承此项 |\n| `for` | `string` | — | — |\n| `size` | [MSizeInput](/docs/types#MSizeInput) | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n## Props — FormItem\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `name` | `string` | — | 字段名（注册到 Form，对应 `model` / `rules`） |\n| `rules` | `FormItemRule \\| FormItemRule[]` | — | 字段级规则，排在 Form `rules[name]` 之后 |\n| `validate` | `(trigger?) => string \\| boolean \\| void \\| Promise<…>` | — | 回调校验；返回错误文案或 `false` |\n| `error` | `string` | — | 受控错误（优先于内部结果） |\n| `invalid` / `help` / `required` / `label` | — | — | 布局与展示 |\n\n## FormItemRule\n\n| 字段 | 说明 |\n| --- | --- |\n| `required` | 空值（`null` / 空白字符串 / 空数组）时报错 |\n| `min` / `max` | 字符串/数组长度，或有限数字本身 |\n| `pattern` | 非空字符串才检测 |\n| `message` | 错误文案；缺省回退到 locale `required` |\n| `trigger` | `'blur' \\| 'change' \\| 'input' \\| 'submit'`；省略则继承 Form `validateOn` |\n| `validator` | `(value) => string \\| false \\| Promise<…>`；`true` / `undefined` 视为通过 |\n\n## Events — Form\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `submit` | `{ valid }` | 仅当 `validateOn` 含 `submit` 时自动跑校验 |\n| `validate` | `{ valid, errors }` | 一次校验流程结束 |\n\n## Expose — Form\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `validate(name?)` | **始终 resolve** `{ valid, errors }`，不会因失败 reject |\n| `clearValidate(name?)` | 清除内部错误 |\n| `reset()` | 重置 model 为初始快照并清除校验 |\n| `resetFields(names?)` | 将指定字段（默认全部）重置为初始快照 |\n| `errors` | 只读；当前校验错误表（`Record<string, string>`） |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 表单项。 |\n\n## 类型\n\n<h4 id=\"FormRules\">FormRules</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype FormRules = Record<string, FormItemRule | FormItemRule[]>\n```\n"
|
|
8522
8808
|
},
|
|
8523
8809
|
"en-US": {
|
|
8524
8810
|
"title": "Form",
|
|
@@ -8552,7 +8838,7 @@
|
|
|
8552
8838
|
{
|
|
8553
8839
|
"id": "props-form",
|
|
8554
8840
|
"title": "Props — Form",
|
|
8555
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `Record<string, unknown>` | — | Values read by `rules` |\n| `rules` | `FormRules` | — | Rules keyed by field `name` |\n| `labelPosition` | `'top' \\| 'left'` | `'top'` | Label placement |\n| `labelPlacement` | `'top' \\| 'left'` | — | Alias of `labelPosition` |\n| `labelAlign` | `'left' \\| 'center' \\| 'right'` | `'left'` | Label text alignment |\n| `labelWidth` | `string \\| number` | — | Left label width; numbers are px |\n| `inline` | `boolean` | `false` | Place items in a wrapping row |\n| `requireMark` | `boolean` | `true` | Required asterisk (`required` or `rules.required`) |\n| `disabled` | `boolean` | `false` | Disabled state |\n| `validateOn` | `'submit' \\| 'blur' \\| 'change' \\| 'input' \\| array` | `['submit']` | Default timing; rules without `trigger` inherit this |"
|
|
8841
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `Record<string, unknown>` | — | Values read by `rules` |\n| `rules` | `FormRules` | — | Rules keyed by field `name` |\n| `labelPosition` | `'top' \\| 'left'` | `'top'` | Label placement |\n| `labelPlacement` | `'top' \\| 'left'` | — | Alias of `labelPosition` |\n| `labelAlign` | `'left' \\| 'center' \\| 'right'` | `'left'` | Label text alignment |\n| `labelWidth` | `string \\| number` | — | Left label width; numbers are px |\n| `inline` | `boolean` | `false` | Place items in a wrapping row |\n| `requireMark` | `boolean` | `true` | Required asterisk (`required` or `rules.required`) |\n| `disabled` | `boolean` | `false` | Disabled state |\n| `validateOn` | `'submit' \\| 'blur' \\| 'change' \\| 'input' \\| array` | `['submit']` | Default timing; rules without `trigger` inherit this |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
8556
8842
|
},
|
|
8557
8843
|
{
|
|
8558
8844
|
"id": "props-formitem",
|
|
@@ -8565,9 +8851,14 @@
|
|
|
8565
8851
|
"body": "| Field | Description |\n| --- | --- |\n| `required` | Fails on `null`, blank strings, and empty arrays |\n| `min` / `max` | String/array length, or a finite number value |\n| `pattern` | Checked only for non-empty strings |\n| `message` | Error copy; falls back to locale `required` |\n| `trigger` | `'blur' \\| 'change' \\| 'input' \\| 'submit'`; omit to inherit Form `validateOn` |\n| `validator` | `(value) => string \\| false \\| Promise<…>`; `true` / `undefined` pass |"
|
|
8566
8852
|
},
|
|
8567
8853
|
{
|
|
8568
|
-
"id": "events-
|
|
8569
|
-
"title": "Events
|
|
8570
|
-
"body": "|
|
|
8854
|
+
"id": "events-form",
|
|
8855
|
+
"title": "Events — Form",
|
|
8856
|
+
"body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `submit` | `{ valid }` | Auto-validates only when `validateOn` includes `submit` |\n| `validate` | `{ valid, errors }` | A validation pass finished |"
|
|
8857
|
+
},
|
|
8858
|
+
{
|
|
8859
|
+
"id": "expose-form",
|
|
8860
|
+
"title": "Expose — Form",
|
|
8861
|
+
"body": "| Method / Property | Description |\n| --- | --- |\n| `validate(name?)` | **Always resolves** `{ valid, errors }`; never rejects on failure |\n| `clearValidate(name?)` | Clears internal errors |\n| `reset()` | Reset the model to the initial snapshot and clear validation |\n| `resetFields(names?)` | Reset the given fields (default: all) to the initial snapshot |\n| `errors` | Read-only; current validation error map (`Record<string, string>`) |"
|
|
8571
8862
|
},
|
|
8572
8863
|
{
|
|
8573
8864
|
"id": "slots",
|
|
@@ -8580,7 +8871,7 @@
|
|
|
8580
8871
|
"body": "<h4 id=\"FormRules\">FormRules</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype FormRules = Record<string, FormItemRule | FormItemRule[]>\n```"
|
|
8581
8872
|
}
|
|
8582
8873
|
],
|
|
8583
|
-
"markdown": "---\ntitle: Form\ncategory: 02 / FORM\ndescription: Form layout and field validation. Declarative rules, label alignment, and inline layout. validate() always resolves and never rejects.\n---\n\n# Form\n\n`MForm` / `MFormItem` handle layout, required marks, and error display. Validation can use both of these, together:\n\n1. **Declarative `rules` (preferred):** `required` / `min` / `max` / `pattern` / `validator` keyed by field name.\n2. **`validate` callback:** return an error string from FormItem. Still useful for cross-field logic.\n\nRules without `trigger` inherit Form `validateOn`. Programmatic `validate()` and native submit (when `validateOn` includes `submit`) run every rule on the field.\n\n**Validation contract:** no external schema validator dependency. `validate()` **always resolves** `{ valid, errors }` and does not `reject` on failure. Nested paths such as `user.name` are not supported; use flat field names.\n\n## Import\n\n```ts\nimport type { FormInstance, FormRules } from 'morya-ui'\nimport { MForm, MFormItem } from 'morya-ui'\n```\n\n## Declarative rules\n\n```vue preview src=\"./demos/DeclarativeRules.en.vue\"\n```\n\n## Callback validation (compatible)\n\n```vue preview src=\"./demos/CallbackValidationCompatible.en.vue\"\n```\n\n## Inline layout and label alignment\n\n```vue preview src=\"./demos/InlineLayoutAndLabelAlignment.en.vue\"\n```\n\n## Props — Form\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `Record<string, unknown>` | — | Values read by `rules` |\n| `rules` | `FormRules` | — | Rules keyed by field `name` |\n| `labelPosition` | `'top' \\| 'left'` | `'top'` | Label placement |\n| `labelPlacement` | `'top' \\| 'left'` | — | Alias of `labelPosition` |\n| `labelAlign` | `'left' \\| 'center' \\| 'right'` | `'left'` | Label text alignment |\n| `labelWidth` | `string \\| number` | — | Left label width; numbers are px |\n| `inline` | `boolean` | `false` | Place items in a wrapping row |\n| `requireMark` | `boolean` | `true` | Required asterisk (`required` or `rules.required`) |\n| `disabled` | `boolean` | `false` | Disabled state |\n| `validateOn` | `'submit' \\| 'blur' \\| 'change' \\| 'input' \\| array` | `['submit']` | Default timing; rules without `trigger` inherit this |\n\n## Props — FormItem\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `name` | `string` | — | Field name (registered on Form; matches `model` / `rules`) |\n| `rules` | `FormItemRule \\| FormItemRule[]` | — | Item rules, merged after Form `rules[name]` |\n| `validate` | `(trigger?) => string \\| boolean \\| void \\| Promise<…>` | — | Callback validator; return error text or `false` |\n| `error` | `string` | — | Controlled error (wins over internal result) |\n| `invalid` / `help` / `required` / `label` | — | — | Layout and display |\n\n## FormItemRule\n\n| Field | Description |\n| --- | --- |\n| `required` | Fails on `null`, blank strings, and empty arrays |\n| `min` / `max` | String/array length, or a finite number value |\n| `pattern` | Checked only for non-empty strings |\n| `message` | Error copy; falls back to locale `required` |\n| `trigger` | `'blur' \\| 'change' \\| 'input' \\| 'submit'`; omit to inherit Form `validateOn` |\n| `validator` | `(value) => string \\| false \\| Promise<…>`; `true` / `undefined` pass |\n\n## Events
|
|
8874
|
+
"markdown": "---\ntitle: Form\ncategory: 02 / FORM\ndescription: Form layout and field validation. Declarative rules, label alignment, and inline layout. validate() always resolves and never rejects.\n---\n\n# Form\n\n`MForm` / `MFormItem` handle layout, required marks, and error display. Validation can use both of these, together:\n\n1. **Declarative `rules` (preferred):** `required` / `min` / `max` / `pattern` / `validator` keyed by field name.\n2. **`validate` callback:** return an error string from FormItem. Still useful for cross-field logic.\n\nRules without `trigger` inherit Form `validateOn`. Programmatic `validate()` and native submit (when `validateOn` includes `submit`) run every rule on the field.\n\n**Validation contract:** no external schema validator dependency. `validate()` **always resolves** `{ valid, errors }` and does not `reject` on failure. Nested paths such as `user.name` are not supported; use flat field names.\n\n## Import\n\n```ts\nimport type { FormInstance, FormRules } from 'morya-ui'\nimport { MForm, MFormItem } from 'morya-ui'\n```\n\n## Declarative rules\n\n```vue preview src=\"./demos/DeclarativeRules.en.vue\"\n```\n\n## Callback validation (compatible)\n\n```vue preview src=\"./demos/CallbackValidationCompatible.en.vue\"\n```\n\n## Inline layout and label alignment\n\n```vue preview src=\"./demos/InlineLayoutAndLabelAlignment.en.vue\"\n```\n\n## Props — Form\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `model` | `Record<string, unknown>` | — | Values read by `rules` |\n| `rules` | `FormRules` | — | Rules keyed by field `name` |\n| `labelPosition` | `'top' \\| 'left'` | `'top'` | Label placement |\n| `labelPlacement` | `'top' \\| 'left'` | — | Alias of `labelPosition` |\n| `labelAlign` | `'left' \\| 'center' \\| 'right'` | `'left'` | Label text alignment |\n| `labelWidth` | `string \\| number` | — | Left label width; numbers are px |\n| `inline` | `boolean` | `false` | Place items in a wrapping row |\n| `requireMark` | `boolean` | `true` | Required asterisk (`required` or `rules.required`) |\n| `disabled` | `boolean` | `false` | Disabled state |\n| `validateOn` | `'submit' \\| 'blur' \\| 'change' \\| 'input' \\| array` | `['submit']` | Default timing; rules without `trigger` inherit this |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Props — FormItem\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `name` | `string` | — | Field name (registered on Form; matches `model` / `rules`) |\n| `rules` | `FormItemRule \\| FormItemRule[]` | — | Item rules, merged after Form `rules[name]` |\n| `validate` | `(trigger?) => string \\| boolean \\| void \\| Promise<…>` | — | Callback validator; return error text or `false` |\n| `error` | `string` | — | Controlled error (wins over internal result) |\n| `invalid` / `help` / `required` / `label` | — | — | Layout and display |\n\n## FormItemRule\n\n| Field | Description |\n| --- | --- |\n| `required` | Fails on `null`, blank strings, and empty arrays |\n| `min` / `max` | String/array length, or a finite number value |\n| `pattern` | Checked only for non-empty strings |\n| `message` | Error copy; falls back to locale `required` |\n| `trigger` | `'blur' \\| 'change' \\| 'input' \\| 'submit'`; omit to inherit Form `validateOn` |\n| `validator` | `(value) => string \\| false \\| Promise<…>`; `true` / `undefined` pass |\n\n## Events — Form\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `submit` | `{ valid }` | Auto-validates only when `validateOn` includes `submit` |\n| `validate` | `{ valid, errors }` | A validation pass finished |\n\n## Expose — Form\n\n| Method / Property | Description |\n| --- | --- |\n| `validate(name?)` | **Always resolves** `{ valid, errors }`; never rejects on failure |\n| `clearValidate(name?)` | Clears internal errors |\n| `reset()` | Reset the model to the initial snapshot and clear validation |\n| `resetFields(names?)` | Reset the given fields (default: all) to the initial snapshot |\n| `errors` | Read-only; current validation error map (`Record<string, string>`) |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Form items. |\n\n## Types\n\n<h4 id=\"FormRules\">FormRules</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype FormRules = Record<string, FormItemRule | FormItemRule[]>\n```\n"
|
|
8584
8875
|
}
|
|
8585
8876
|
}
|
|
8586
8877
|
},
|
|
@@ -8625,6 +8916,7 @@
|
|
|
8625
8916
|
"description": "媒体项 `{ item, index }`。"
|
|
8626
8917
|
}
|
|
8627
8918
|
],
|
|
8919
|
+
"methods": [],
|
|
8628
8920
|
"examples": [
|
|
8629
8921
|
{
|
|
8630
8922
|
"id": "引入-1",
|
|
@@ -8748,7 +9040,86 @@
|
|
|
8748
9040
|
"description": "基于 CSS Grid 的响应式栅格，配合 GridItem 控制跨列。",
|
|
8749
9041
|
"descriptionEn": "CSS Grid layout with GridItem span / offset control.",
|
|
8750
9042
|
"import": "import { MGrid } from 'morya-ui'",
|
|
8751
|
-
"props": [
|
|
9043
|
+
"props": [
|
|
9044
|
+
{
|
|
9045
|
+
"name": "cols",
|
|
9046
|
+
"type": "number | string",
|
|
9047
|
+
"default": "24",
|
|
9048
|
+
"description": "列数，支持 `\"1 s:2 m:3\"` 响应式写法。"
|
|
9049
|
+
},
|
|
9050
|
+
{
|
|
9051
|
+
"name": "xGap",
|
|
9052
|
+
"type": "number | string",
|
|
9053
|
+
"default": "0",
|
|
9054
|
+
"description": "列 / 行间距（px），同样支持响应式字符串。"
|
|
9055
|
+
},
|
|
9056
|
+
{
|
|
9057
|
+
"name": "yGap",
|
|
9058
|
+
"type": "number | string",
|
|
9059
|
+
"default": "0",
|
|
9060
|
+
"description": "列 / 行间距（px），同样支持响应式字符串。"
|
|
9061
|
+
},
|
|
9062
|
+
{
|
|
9063
|
+
"name": "responsive",
|
|
9064
|
+
"type": "'self' | 'screen'",
|
|
9065
|
+
"default": "'self'",
|
|
9066
|
+
"description": "响应式依据容器宽度或视口宽度。"
|
|
9067
|
+
},
|
|
9068
|
+
{
|
|
9069
|
+
"name": "itemResponsive",
|
|
9070
|
+
"type": "boolean",
|
|
9071
|
+
"default": "false",
|
|
9072
|
+
"description": "强制按宽度解析 item 的 `span` / `offset`（即使 `cols` 为数字）。"
|
|
9073
|
+
},
|
|
9074
|
+
{
|
|
9075
|
+
"name": "collapsed",
|
|
9076
|
+
"type": "boolean",
|
|
9077
|
+
"default": "false",
|
|
9078
|
+
"description": "折叠超出行数的项。"
|
|
9079
|
+
},
|
|
9080
|
+
{
|
|
9081
|
+
"name": "collapsedRows",
|
|
9082
|
+
"type": "number",
|
|
9083
|
+
"default": "1",
|
|
9084
|
+
"description": "折叠时可见行数。"
|
|
9085
|
+
},
|
|
9086
|
+
{
|
|
9087
|
+
"name": "layoutShiftDisabled",
|
|
9088
|
+
"type": "boolean",
|
|
9089
|
+
"default": "false",
|
|
9090
|
+
"description": "关闭折叠/布局计算，退化为纯 CSS Grid。"
|
|
9091
|
+
},
|
|
9092
|
+
{
|
|
9093
|
+
"name": "itemStyle",
|
|
9094
|
+
"type": "string | object",
|
|
9095
|
+
"default": "—",
|
|
9096
|
+
"description": "应用到每个 GridItem 的样式。"
|
|
9097
|
+
},
|
|
9098
|
+
{
|
|
9099
|
+
"name": "pt",
|
|
9100
|
+
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
9101
|
+
"default": "—",
|
|
9102
|
+
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
9103
|
+
},
|
|
9104
|
+
{
|
|
9105
|
+
"name": "span",
|
|
9106
|
+
"type": "number | string",
|
|
9107
|
+
"default": "1",
|
|
9108
|
+
"description": "跨列数。"
|
|
9109
|
+
},
|
|
9110
|
+
{
|
|
9111
|
+
"name": "offset",
|
|
9112
|
+
"type": "number | string",
|
|
9113
|
+
"default": "0",
|
|
9114
|
+
"description": "左侧偏移列数。"
|
|
9115
|
+
},
|
|
9116
|
+
{
|
|
9117
|
+
"name": "suffix",
|
|
9118
|
+
"type": "boolean",
|
|
9119
|
+
"default": "false",
|
|
9120
|
+
"description": "折叠时固定在末尾（常用于「展开」）。"
|
|
9121
|
+
}
|
|
9122
|
+
],
|
|
8752
9123
|
"events": [],
|
|
8753
9124
|
"slots": [
|
|
8754
9125
|
{
|
|
@@ -8756,6 +9127,7 @@
|
|
|
8756
9127
|
"description": "栅格子项。"
|
|
8757
9128
|
}
|
|
8758
9129
|
],
|
|
9130
|
+
"methods": [],
|
|
8759
9131
|
"examples": [
|
|
8760
9132
|
{
|
|
8761
9133
|
"id": "引入-1",
|
|
@@ -8886,7 +9258,7 @@
|
|
|
8886
9258
|
{
|
|
8887
9259
|
"id": "grid-props",
|
|
8888
9260
|
"title": "Grid Props",
|
|
8889
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `cols` | `number \\| string` | `24` | 列数，支持 `\"1 s:2 m:3\"` 响应式写法。 |\n| `xGap` / `yGap` | `number \\| string` | `0` | 列 / 行间距（px），同样支持响应式字符串。 |\n| `responsive` | `'self' \\| 'screen'` | `'self'` | 响应式依据容器宽度或视口宽度。 |\n| `itemResponsive` | `boolean` | `false` | 强制按宽度解析 item 的 `span` / `offset`（即使 `cols` 为数字）。 |\n| `collapsed` | `boolean` | `false` | 折叠超出行数的项。 |\n| `collapsedRows` | `number` | `1` | 折叠时可见行数。 |\n| `layoutShiftDisabled` | `boolean` | `false` | 关闭折叠/布局计算，退化为纯 CSS Grid。 |\n| `itemStyle` | `string \\| object` | — | 应用到每个 GridItem 的样式。 |"
|
|
9261
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `cols` | `number \\| string` | `24` | 列数，支持 `\"1 s:2 m:3\"` 响应式写法。 |\n| `xGap` / `yGap` | `number \\| string` | `0` | 列 / 行间距（px），同样支持响应式字符串。 |\n| `responsive` | `'self' \\| 'screen'` | `'self'` | 响应式依据容器宽度或视口宽度。 |\n| `itemResponsive` | `boolean` | `false` | 强制按宽度解析 item 的 `span` / `offset`（即使 `cols` 为数字）。 |\n| `collapsed` | `boolean` | `false` | 折叠超出行数的项。 |\n| `collapsedRows` | `number` | `1` | 折叠时可见行数。 |\n| `layoutShiftDisabled` | `boolean` | `false` | 关闭折叠/布局计算，退化为纯 CSS Grid。 |\n| `itemStyle` | `string \\| object` | — | 应用到每个 GridItem 的样式。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
8890
9262
|
},
|
|
8891
9263
|
{
|
|
8892
9264
|
"id": "griditem-props",
|
|
@@ -8909,7 +9281,7 @@
|
|
|
8909
9281
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 栅格子项。 |"
|
|
8910
9282
|
}
|
|
8911
9283
|
],
|
|
8912
|
-
"markdown": "---\ntitle: Grid\ncategory: 06 / LAYOUT\ndescription: 基于 CSS Grid 的响应式栅格，配合 GridItem 控制跨列。\n---\n\n# Grid\n\n24 列栅格布局（可用 `cols` 调整）。子项请使用 `MGridItem`（别名 `MGi`）。\n\n## 引入\n\n```ts\nimport { MGrid, MGridItem } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Span & Offset\n\n```vue preview src=\"./demos/SpanAndOffset.vue\"\n```\n\n## Responsive\n\n`cols` / `xGap` / `yGap` 与 `MGridItem` 的 `span` / `offset` 均支持响应式字符串，例如 `1 s:2 m:3`（断点：`xs` `s` `m` `l` `xl` `2xl`）。\n\n当 `cols` / 间距是普通数字、但 item 仍要用响应式 `span` 时，请打开 `itemResponsive`。\n\n```vue preview src=\"./demos/Responsive.vue\"\n```\n\n## Collapsed\n\n```vue preview src=\"./demos/Collapsed.zh.vue\"\n```\n\n## Grid Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `cols` | `number \\| string` | `24` | 列数，支持 `\"1 s:2 m:3\"` 响应式写法。 |\n| `xGap` / `yGap` | `number \\| string` | `0` | 列 / 行间距（px），同样支持响应式字符串。 |\n| `responsive` | `'self' \\| 'screen'` | `'self'` | 响应式依据容器宽度或视口宽度。 |\n| `itemResponsive` | `boolean` | `false` | 强制按宽度解析 item 的 `span` / `offset`（即使 `cols` 为数字）。 |\n| `collapsed` | `boolean` | `false` | 折叠超出行数的项。 |\n| `collapsedRows` | `number` | `1` | 折叠时可见行数。 |\n| `layoutShiftDisabled` | `boolean` | `false` | 关闭折叠/布局计算，退化为纯 CSS Grid。 |\n| `itemStyle` | `string \\| object` | — | 应用到每个 GridItem 的样式。 |\n\n## GridItem Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `span` | `number \\| string` | `1` | 跨列数。 |\n| `offset` | `number \\| string` | `0` | 左侧偏移列数。 |\n| `suffix` | `boolean` | `false` | 折叠时固定在末尾（常用于「展开」）。 |\n\n## GridItem Slots\n\n| 插槽名 | 参数 | 说明 |\n| --- | --- | --- |\n| `default` | `{ overflow }` | 内容；`overflow` 表示是否有被折叠隐藏的项。 |\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 栅格子项。 |\n"
|
|
9284
|
+
"markdown": "---\ntitle: Grid\ncategory: 06 / LAYOUT\ndescription: 基于 CSS Grid 的响应式栅格，配合 GridItem 控制跨列。\n---\n\n# Grid\n\n24 列栅格布局（可用 `cols` 调整）。子项请使用 `MGridItem`（别名 `MGi`）。\n\n## 引入\n\n```ts\nimport { MGrid, MGridItem } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Span & Offset\n\n```vue preview src=\"./demos/SpanAndOffset.vue\"\n```\n\n## Responsive\n\n`cols` / `xGap` / `yGap` 与 `MGridItem` 的 `span` / `offset` 均支持响应式字符串，例如 `1 s:2 m:3`（断点：`xs` `s` `m` `l` `xl` `2xl`）。\n\n当 `cols` / 间距是普通数字、但 item 仍要用响应式 `span` 时，请打开 `itemResponsive`。\n\n```vue preview src=\"./demos/Responsive.vue\"\n```\n\n## Collapsed\n\n```vue preview src=\"./demos/Collapsed.zh.vue\"\n```\n\n## Grid Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `cols` | `number \\| string` | `24` | 列数，支持 `\"1 s:2 m:3\"` 响应式写法。 |\n| `xGap` / `yGap` | `number \\| string` | `0` | 列 / 行间距（px），同样支持响应式字符串。 |\n| `responsive` | `'self' \\| 'screen'` | `'self'` | 响应式依据容器宽度或视口宽度。 |\n| `itemResponsive` | `boolean` | `false` | 强制按宽度解析 item 的 `span` / `offset`（即使 `cols` 为数字）。 |\n| `collapsed` | `boolean` | `false` | 折叠超出行数的项。 |\n| `collapsedRows` | `number` | `1` | 折叠时可见行数。 |\n| `layoutShiftDisabled` | `boolean` | `false` | 关闭折叠/布局计算，退化为纯 CSS Grid。 |\n| `itemStyle` | `string \\| object` | — | 应用到每个 GridItem 的样式。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n## GridItem Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `span` | `number \\| string` | `1` | 跨列数。 |\n| `offset` | `number \\| string` | `0` | 左侧偏移列数。 |\n| `suffix` | `boolean` | `false` | 折叠时固定在末尾（常用于「展开」）。 |\n\n## GridItem Slots\n\n| 插槽名 | 参数 | 说明 |\n| --- | --- | --- |\n| `default` | `{ overflow }` | 内容；`overflow` 表示是否有被折叠隐藏的项。 |\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 栅格子项。 |\n"
|
|
8913
9285
|
},
|
|
8914
9286
|
"en-US": {
|
|
8915
9287
|
"title": "Grid",
|
|
@@ -8948,7 +9320,7 @@
|
|
|
8948
9320
|
{
|
|
8949
9321
|
"id": "grid-props",
|
|
8950
9322
|
"title": "Grid Props",
|
|
8951
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `cols` | `number \\| string` | `24` | Columns; supports `\"1 s:2 m:3\"` responsive syntax. |\n| `xGap` / `yGap` | `number \\| string` | `0` | Column / row gap in px (responsive strings allowed). |\n| `responsive` | `'self' \\| 'screen'` | `'self'` | Use container width or viewport width. |\n| `itemResponsive` | `boolean` | `false` | Force width queries for item `span` / `offset` even when `cols` is numeric. |\n| `collapsed` | `boolean` | `false` | Hide items beyond visible rows. |\n| `collapsedRows` | `number` | `1` | Visible rows when collapsed. |\n| `layoutShiftDisabled` | `boolean` | `false` | Plain CSS Grid without collapse bookkeeping. |\n| `itemStyle` | `string \\| object` | — | Style applied to every GridItem. |"
|
|
9323
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `cols` | `number \\| string` | `24` | Columns; supports `\"1 s:2 m:3\"` responsive syntax. |\n| `xGap` / `yGap` | `number \\| string` | `0` | Column / row gap in px (responsive strings allowed). |\n| `responsive` | `'self' \\| 'screen'` | `'self'` | Use container width or viewport width. |\n| `itemResponsive` | `boolean` | `false` | Force width queries for item `span` / `offset` even when `cols` is numeric. |\n| `collapsed` | `boolean` | `false` | Hide items beyond visible rows. |\n| `collapsedRows` | `number` | `1` | Visible rows when collapsed. |\n| `layoutShiftDisabled` | `boolean` | `false` | Plain CSS Grid without collapse bookkeeping. |\n| `itemStyle` | `string \\| object` | — | Style applied to every GridItem. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
8952
9324
|
},
|
|
8953
9325
|
{
|
|
8954
9326
|
"id": "griditem-props",
|
|
@@ -8971,7 +9343,7 @@
|
|
|
8971
9343
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Grid children. |"
|
|
8972
9344
|
}
|
|
8973
9345
|
],
|
|
8974
|
-
"markdown": "---\ntitle: Grid\ncategory: 06 / LAYOUT\ndescription: CSS Grid layout with GridItem span / offset control.\n---\n\n# Grid\n\n24-column grid layout (override with `cols`). Use `MGridItem` (alias `MGi`) as children.\n\n## Import\n\n```ts\nimport { MGrid, MGridItem } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Span & Offset\n\n```vue preview src=\"./demos/SpanAndOffset.vue\"\n```\n\n## Responsive\n\n`cols` / `xGap` / `yGap` and GridItem `span` / `offset` accept responsive strings such as `1 s:2 m:3` (breakpoints: `xs` `s` `m` `l` `xl` `2xl`).\n\nWhen `cols` / gaps are plain numbers but items still need responsive `span`, enable `itemResponsive`.\n\n```vue preview src=\"./demos/Responsive.vue\"\n```\n\n## Collapsed\n\n```vue preview src=\"./demos/Collapsed.en.vue\"\n```\n\n## Grid Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `cols` | `number \\| string` | `24` | Columns; supports `\"1 s:2 m:3\"` responsive syntax. |\n| `xGap` / `yGap` | `number \\| string` | `0` | Column / row gap in px (responsive strings allowed). |\n| `responsive` | `'self' \\| 'screen'` | `'self'` | Use container width or viewport width. |\n| `itemResponsive` | `boolean` | `false` | Force width queries for item `span` / `offset` even when `cols` is numeric. |\n| `collapsed` | `boolean` | `false` | Hide items beyond visible rows. |\n| `collapsedRows` | `number` | `1` | Visible rows when collapsed. |\n| `layoutShiftDisabled` | `boolean` | `false` | Plain CSS Grid without collapse bookkeeping. |\n| `itemStyle` | `string \\| object` | — | Style applied to every GridItem. |\n\n## GridItem Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `span` | `number \\| string` | `1` | Column span. |\n| `offset` | `number \\| string` | `0` | Leading offset columns. |\n| `suffix` | `boolean` | `false` | Pin to the end when collapsed. |\n\n## GridItem Slots\n\n| Slot | Props | Description |\n| --- | --- | --- |\n| `default` | `{ overflow }` | Content; `overflow` is true when items are hidden. |\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Grid children. |\n"
|
|
9346
|
+
"markdown": "---\ntitle: Grid\ncategory: 06 / LAYOUT\ndescription: CSS Grid layout with GridItem span / offset control.\n---\n\n# Grid\n\n24-column grid layout (override with `cols`). Use `MGridItem` (alias `MGi`) as children.\n\n## Import\n\n```ts\nimport { MGrid, MGridItem } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Span & Offset\n\n```vue preview src=\"./demos/SpanAndOffset.vue\"\n```\n\n## Responsive\n\n`cols` / `xGap` / `yGap` and GridItem `span` / `offset` accept responsive strings such as `1 s:2 m:3` (breakpoints: `xs` `s` `m` `l` `xl` `2xl`).\n\nWhen `cols` / gaps are plain numbers but items still need responsive `span`, enable `itemResponsive`.\n\n```vue preview src=\"./demos/Responsive.vue\"\n```\n\n## Collapsed\n\n```vue preview src=\"./demos/Collapsed.en.vue\"\n```\n\n## Grid Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `cols` | `number \\| string` | `24` | Columns; supports `\"1 s:2 m:3\"` responsive syntax. |\n| `xGap` / `yGap` | `number \\| string` | `0` | Column / row gap in px (responsive strings allowed). |\n| `responsive` | `'self' \\| 'screen'` | `'self'` | Use container width or viewport width. |\n| `itemResponsive` | `boolean` | `false` | Force width queries for item `span` / `offset` even when `cols` is numeric. |\n| `collapsed` | `boolean` | `false` | Hide items beyond visible rows. |\n| `collapsedRows` | `number` | `1` | Visible rows when collapsed. |\n| `layoutShiftDisabled` | `boolean` | `false` | Plain CSS Grid without collapse bookkeeping. |\n| `itemStyle` | `string \\| object` | — | Style applied to every GridItem. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## GridItem Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `span` | `number \\| string` | `1` | Column span. |\n| `offset` | `number \\| string` | `0` | Leading offset columns. |\n| `suffix` | `boolean` | `false` | Pin to the end when collapsed. |\n\n## GridItem Slots\n\n| Slot | Props | Description |\n| --- | --- | --- |\n| `default` | `{ overflow }` | Content; `overflow` is true when items are hidden. |\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Grid children. |\n"
|
|
8975
9347
|
}
|
|
8976
9348
|
}
|
|
8977
9349
|
},
|
|
@@ -9010,7 +9382,13 @@
|
|
|
9010
9382
|
}
|
|
9011
9383
|
],
|
|
9012
9384
|
"events": [],
|
|
9013
|
-
"slots": [
|
|
9385
|
+
"slots": [
|
|
9386
|
+
{
|
|
9387
|
+
"name": "default",
|
|
9388
|
+
"description": "自定义 SVG / 第三方图标组件。"
|
|
9389
|
+
}
|
|
9390
|
+
],
|
|
9391
|
+
"methods": [],
|
|
9014
9392
|
"examples": [
|
|
9015
9393
|
{
|
|
9016
9394
|
"id": "引入-1",
|
|
@@ -9036,7 +9414,7 @@
|
|
|
9036
9414
|
"sectionId": "全部系统图标",
|
|
9037
9415
|
"lang": "vue",
|
|
9038
9416
|
"preview": true,
|
|
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
|
|
9417
|
+
"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>",
|
|
9040
9418
|
"locale": "zh-CN"
|
|
9041
9419
|
},
|
|
9042
9420
|
{
|
|
@@ -9072,7 +9450,7 @@
|
|
|
9072
9450
|
"sectionId": "all-system-icons",
|
|
9073
9451
|
"lang": "vue",
|
|
9074
9452
|
"preview": true,
|
|
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
|
|
9453
|
+
"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>",
|
|
9076
9454
|
"locale": "en-US"
|
|
9077
9455
|
},
|
|
9078
9456
|
{
|
|
@@ -9093,7 +9471,7 @@
|
|
|
9093
9471
|
{
|
|
9094
9472
|
"id": "overview",
|
|
9095
9473
|
"title": "",
|
|
9096
|
-
"body": "# Icon\n\n`MIcon`
|
|
9474
|
+
"body": "# Icon\n\n`MIcon` 维护**组件库系统图标**（关闭、箭头、状态、导航、业务常用等，统一为 Tabler 24×24 线框风格，由 `scripts/generate-system-icons.mjs` 生成）。完整海量图标请用默认插槽接入 [Lucide](https://lucide.dev) 等库。"
|
|
9097
9475
|
},
|
|
9098
9476
|
{
|
|
9099
9477
|
"id": "引入",
|
|
@@ -9113,7 +9491,7 @@
|
|
|
9113
9491
|
{
|
|
9114
9492
|
"id": "自定义-lucide-推荐业务侧",
|
|
9115
9493
|
"title": "自定义 / Lucide（推荐业务侧）",
|
|
9116
|
-
"body": "系统图标不够时，不要往组件库堆 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`。线宽建议 `
|
|
9494
|
+
"body": "系统图标不够时，不要往组件库堆 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`。线宽建议 `2`，与系统图标（Tabler outline）一致。\n\n有默认插槽时**优先渲染插槽**，忽略 `name`。"
|
|
9117
9495
|
},
|
|
9118
9496
|
{
|
|
9119
9497
|
"id": "props",
|
|
@@ -9136,7 +9514,7 @@
|
|
|
9136
9514
|
"body": "无自定义事件。"
|
|
9137
9515
|
}
|
|
9138
9516
|
],
|
|
9139
|
-
"markdown": "---\ntitle: Icon\ncategory: 01 / BASIC\ndescription: 系统线框图标注册表。业务图标用默认插槽接入 Lucide 等库。\n---\n\n# Icon\n\n`MIcon`
|
|
9517
|
+
"markdown": "---\ntitle: Icon\ncategory: 01 / BASIC\ndescription: 系统线框图标注册表。业务图标用默认插槽接入 Lucide 等库。\n---\n\n# Icon\n\n`MIcon` 维护**组件库系统图标**（关闭、箭头、状态、导航、业务常用等，统一为 Tabler 24×24 线框风格，由 `scripts/generate-system-icons.mjs` 生成）。完整海量图标请用默认插槽接入 [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`。线宽建议 `2`，与系统图标（Tabler outline）一致。\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"
|
|
9140
9518
|
},
|
|
9141
9519
|
"en-US": {
|
|
9142
9520
|
"title": "Icon",
|
|
@@ -9145,7 +9523,7 @@
|
|
|
9145
9523
|
{
|
|
9146
9524
|
"id": "overview",
|
|
9147
9525
|
"title": "",
|
|
9148
|
-
"body": "# Icon\n\n`MIcon` maintains **component-library system icons** (close, arrows, status, navigation, common business icons
|
|
9526
|
+
"body": "# Icon\n\n`MIcon` maintains **component-library system icons** (close, arrows, status, navigation, and common business icons — all Tabler 24×24 outline, generated by `scripts/generate-system-icons.mjs`). For large business icon sets, use the default slot with [Lucide](https://lucide.dev) or another library."
|
|
9149
9527
|
},
|
|
9150
9528
|
{
|
|
9151
9529
|
"id": "import",
|
|
@@ -9165,7 +9543,7 @@
|
|
|
9165
9543
|
{
|
|
9166
9544
|
"id": "custom-lucide-recommended-on-the-app-side",
|
|
9167
9545
|
"title": "Custom / Lucide (recommended on the app side)",
|
|
9168
|
-
"body": "When 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 `
|
|
9546
|
+
"body": "When 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 `2`, matching the system icons (Tabler outline).\n\nWhen the default slot is present, it is **rendered first** and `name` is ignored."
|
|
9169
9547
|
},
|
|
9170
9548
|
{
|
|
9171
9549
|
"id": "props",
|
|
@@ -9188,7 +9566,7 @@
|
|
|
9188
9566
|
"body": "No custom events."
|
|
9189
9567
|
}
|
|
9190
9568
|
],
|
|
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
|
|
9569
|
+
"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, and common business icons — all Tabler 24×24 outline, generated by `scripts/generate-system-icons.mjs`). 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 `2`, matching the system icons (Tabler outline).\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"
|
|
9192
9570
|
}
|
|
9193
9571
|
}
|
|
9194
9572
|
},
|
|
@@ -9215,10 +9593,20 @@
|
|
|
9215
9593
|
}
|
|
9216
9594
|
],
|
|
9217
9595
|
"events": [],
|
|
9218
|
-
"slots": [
|
|
9219
|
-
"examples": [
|
|
9596
|
+
"slots": [
|
|
9220
9597
|
{
|
|
9221
|
-
"
|
|
9598
|
+
"name": "default",
|
|
9599
|
+
"description": "输入控件。"
|
|
9600
|
+
},
|
|
9601
|
+
{
|
|
9602
|
+
"name": "icon",
|
|
9603
|
+
"description": "图标内容。"
|
|
9604
|
+
}
|
|
9605
|
+
],
|
|
9606
|
+
"methods": [],
|
|
9607
|
+
"examples": [
|
|
9608
|
+
{
|
|
9609
|
+
"id": "引入-1",
|
|
9222
9610
|
"section": "引入",
|
|
9223
9611
|
"sectionId": "引入",
|
|
9224
9612
|
"lang": "ts",
|
|
@@ -9388,7 +9776,26 @@
|
|
|
9388
9776
|
"description": "—"
|
|
9389
9777
|
}
|
|
9390
9778
|
],
|
|
9391
|
-
"slots": [
|
|
9779
|
+
"slots": [
|
|
9780
|
+
{
|
|
9781
|
+
"name": "display",
|
|
9782
|
+
"description": "默认展示。"
|
|
9783
|
+
},
|
|
9784
|
+
{
|
|
9785
|
+
"name": "content",
|
|
9786
|
+
"description": "激活内容，提供 `{ close }`。"
|
|
9787
|
+
}
|
|
9788
|
+
],
|
|
9789
|
+
"methods": [
|
|
9790
|
+
{
|
|
9791
|
+
"name": "activate",
|
|
9792
|
+
"description": "进入编辑态。"
|
|
9793
|
+
},
|
|
9794
|
+
{
|
|
9795
|
+
"name": "deactivate",
|
|
9796
|
+
"description": "退出编辑态。"
|
|
9797
|
+
}
|
|
9798
|
+
],
|
|
9392
9799
|
"examples": [
|
|
9393
9800
|
{
|
|
9394
9801
|
"id": "引入-1",
|
|
@@ -9452,6 +9859,11 @@
|
|
|
9452
9859
|
"title": "Props",
|
|
9453
9860
|
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 是否处于编辑态。 |\n| `disabled` | `boolean` | `false` | 禁用切换。 |\n| `closeOnEsc` | `boolean` | — | — |\n| `dismissable` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
9454
9861
|
},
|
|
9862
|
+
{
|
|
9863
|
+
"id": "methods",
|
|
9864
|
+
"title": "Methods",
|
|
9865
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `activate()` | 进入编辑态。 |\n| `deactivate()` | 退出编辑态。 |"
|
|
9866
|
+
},
|
|
9455
9867
|
{
|
|
9456
9868
|
"id": "slots",
|
|
9457
9869
|
"title": "Slots",
|
|
@@ -9463,7 +9875,7 @@
|
|
|
9463
9875
|
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 激活态变化。 |\n| `close` | — | — |\n| `open` | — | — |"
|
|
9464
9876
|
}
|
|
9465
9877
|
],
|
|
9466
|
-
"markdown": "---\ntitle: Inplace\ncategory: 03 / DATA\ndescription: 点击展示区切换为可编辑内容。\n---\n\n# Inplace\n\n在 display 与 content 两种视图间切换。\n\n## 引入\n\n```ts\nimport { MInplace } 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| `disabled` | `boolean` | `false` | 禁用切换。 |\n| `closeOnEsc` | `boolean` | — | — |\n| `dismissable` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `display` | 默认展示。 |\n| `content` | 激活内容，提供 `{ close }`。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 激活态变化。 |\n| `close` | — | — |\n| `open` | — | — |\n"
|
|
9878
|
+
"markdown": "---\ntitle: Inplace\ncategory: 03 / DATA\ndescription: 点击展示区切换为可编辑内容。\n---\n\n# Inplace\n\n在 display 与 content 两种视图间切换。\n\n## 引入\n\n```ts\nimport { MInplace } 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| `disabled` | `boolean` | `false` | 禁用切换。 |\n| `closeOnEsc` | `boolean` | — | — |\n| `dismissable` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `activate()` | 进入编辑态。 |\n| `deactivate()` | 退出编辑态。 |\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `display` | 默认展示。 |\n| `content` | 激活内容，提供 `{ close }`。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 激活态变化。 |\n| `close` | — | — |\n| `open` | — | — |\n"
|
|
9467
9879
|
},
|
|
9468
9880
|
"en-US": {
|
|
9469
9881
|
"title": "Inplace",
|
|
@@ -9489,6 +9901,11 @@
|
|
|
9489
9901
|
"title": "Props",
|
|
9490
9902
|
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Whether the editor is active. |\n| `disabled` | `boolean` | `false` | Disable toggling. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
9491
9903
|
},
|
|
9904
|
+
{
|
|
9905
|
+
"id": "methods",
|
|
9906
|
+
"title": "Methods",
|
|
9907
|
+
"body": "| Method | Description |\n| --- | --- |\n| `activate()` | Switch to edit mode. |\n| `deactivate()` | Leave edit mode. |"
|
|
9908
|
+
},
|
|
9492
9909
|
{
|
|
9493
9910
|
"id": "slots",
|
|
9494
9911
|
"title": "Slots",
|
|
@@ -9500,7 +9917,7 @@
|
|
|
9500
9917
|
"body": "| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Active state changed. |"
|
|
9501
9918
|
}
|
|
9502
9919
|
],
|
|
9503
|
-
"markdown": "---\ntitle: Inplace\ncategory: 03 / DATA\ndescription: Click the display area to switch to editable content.\n---\n\n# Inplace\n\nToggle between display and content views.\n\n## Import\n\n```ts\nimport { MInplace } 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` | Whether the editor is active. |\n| `disabled` | `boolean` | `false` | Disable toggling. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `display` | Default display. |\n| `content` | Active content; provides `{ close }`. |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Active state changed. |\n"
|
|
9920
|
+
"markdown": "---\ntitle: Inplace\ncategory: 03 / DATA\ndescription: Click the display area to switch to editable content.\n---\n\n# Inplace\n\nToggle between display and content views.\n\n## Import\n\n```ts\nimport { MInplace } 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` | Whether the editor is active. |\n| `disabled` | `boolean` | `false` | Disable toggling. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `activate()` | Switch to edit mode. |\n| `deactivate()` | Leave edit mode. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `display` | Default display. |\n| `content` | Active content; provides `{ close }`. |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Active state changed. |\n"
|
|
9504
9921
|
}
|
|
9505
9922
|
}
|
|
9506
9923
|
},
|
|
@@ -9671,6 +10088,20 @@
|
|
|
9671
10088
|
"description": "输入框右侧装饰；与清除按钮可并存。"
|
|
9672
10089
|
}
|
|
9673
10090
|
],
|
|
10091
|
+
"methods": [
|
|
10092
|
+
{
|
|
10093
|
+
"name": "focus",
|
|
10094
|
+
"description": "聚焦底层 input。"
|
|
10095
|
+
},
|
|
10096
|
+
{
|
|
10097
|
+
"name": "blur",
|
|
10098
|
+
"description": "使底层 input 失焦。"
|
|
10099
|
+
},
|
|
10100
|
+
{
|
|
10101
|
+
"name": "select",
|
|
10102
|
+
"description": "选中底层 input 的全部文本。"
|
|
10103
|
+
}
|
|
10104
|
+
],
|
|
9674
10105
|
"examples": [
|
|
9675
10106
|
{
|
|
9676
10107
|
"id": "引入-1",
|
|
@@ -10018,7 +10449,7 @@
|
|
|
10018
10449
|
{
|
|
10019
10450
|
"id": "instance",
|
|
10020
10451
|
"title": "Instance",
|
|
10021
|
-
"body": "| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层 input。 |"
|
|
10452
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层 input。 |\n| `blur()` | 使底层 input 失焦。 |\n| `select()` | 选中底层 input 的全部文本。 |"
|
|
10022
10453
|
},
|
|
10023
10454
|
{
|
|
10024
10455
|
"id": "类型",
|
|
@@ -10026,7 +10457,7 @@
|
|
|
10026
10457
|
"body": "<h4 id=\"InputPassThrough\">InputPassThrough</h4>\n\n`pt` 的类型。在 [FieldPassThrough](/docs/types#FieldPassThrough) 基础上多了前后缀等键：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n`PassThroughPart` 见 [API 类型 · PassThroughPart](/docs/types#PassThroughPart)。"
|
|
10027
10458
|
}
|
|
10028
10459
|
],
|
|
10029
|
-
"markdown": "---\ntitle: Input\ncategory: 02 / FORM\ndescription: 文本输入框。\n---\n\n# Input\n\n单行文本输入。\n\n## 引入\n\n```ts\nimport { MInput } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Invalid\n\n`invalid` 表示校验失败；也可只传 `error-message`。\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Clearable\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Prefix / Suffix\n\n```vue preview src=\"./demos/PrefixSuffix.zh.vue\"\n```\n\n## Password-like type\n\n```vue preview src=\"./demos/PasswordLikeType.vue\"\n```\n\n## Sizes\n\n支持 `small` / `large`，并兼容 `sm` / `md` / `lg`。\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Count\n\n`showCount` 显示字数；配合 `maxlength` 展示上限。\n\n```vue preview src=\"./demos/Count.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## 外层 attrs 与布局\n\n除 `@keydown`、`@focus` 等**控件事件**外，其余 fallthrough attrs（`class`、`style`、`data-*`、`title`、`tabindex` 等）均落在 field 外层（`.m-input-field`），不会直接写到 `<input>`。栅格、间距、测试 id 这样写即可：\n\n```vue preview src=\"./demos/OuterAttrsAndLayout.zh.vue\"\n```\n\n更多约定见 [样式与 attrs](/docs/attrs)。\n\n## 键盘与焦点事件\n\n`@keydown`、`@focus`、`@blur` 等绑在底层 input 上，用法与原生 input 相同：\n\n```vue preview src=\"./demos/KeyboardAndFocusEvents.zh.vue\"\n```\n\n## pt\n\n按 DOM 分段透传。常用键：`root`、`input`、`label`、`prefix`、`suffix`、`help`、`count`。\n\n```vue preview src=\"./demos/Pt.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `id` | `string` | — | 原生 id；未传时自动生成。 |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | 原生 type。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；默认中等。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\n| `errorMessage` | `string` | — | 错误文案；有值时视为 invalid。 |\n| `placeholder` | `string` | — | 占位符。 |\n| `name` | `string` | — | 原生 name。 |\n| `autocomplete` | `string` | — | 原生 autocomplete。 |\n| `autofocus` | `boolean` | `false` | 挂载后聚焦。 |\n| `pt` | [InputPassThrough](/docs/types#InputPassThrough) | — | DOM 分段透传，见上文 `pt`。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `prefix` | 输入框左侧装饰（如单位、图标）。 |\n| `suffix` | 输入框右侧装饰；与清除按钮可并存。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Instance\n\n| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层 input。 |\n\n## 类型\n\n<h4 id=\"InputPassThrough\">InputPassThrough</h4>\n\n`pt` 的类型。在 [FieldPassThrough](/docs/types#FieldPassThrough) 基础上多了前后缀等键：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n`PassThroughPart` 见 [API 类型 · PassThroughPart](/docs/types#PassThroughPart)。\n"
|
|
10460
|
+
"markdown": "---\ntitle: Input\ncategory: 02 / FORM\ndescription: 文本输入框。\n---\n\n# Input\n\n单行文本输入。\n\n## 引入\n\n```ts\nimport { MInput } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Invalid\n\n`invalid` 表示校验失败；也可只传 `error-message`。\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Clearable\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Prefix / Suffix\n\n```vue preview src=\"./demos/PrefixSuffix.zh.vue\"\n```\n\n## Password-like type\n\n```vue preview src=\"./demos/PasswordLikeType.vue\"\n```\n\n## Sizes\n\n支持 `small` / `large`，并兼容 `sm` / `md` / `lg`。\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Count\n\n`showCount` 显示字数；配合 `maxlength` 展示上限。\n\n```vue preview src=\"./demos/Count.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## 外层 attrs 与布局\n\n除 `@keydown`、`@focus` 等**控件事件**外，其余 fallthrough attrs（`class`、`style`、`data-*`、`title`、`tabindex` 等）均落在 field 外层（`.m-input-field`），不会直接写到 `<input>`。栅格、间距、测试 id 这样写即可：\n\n```vue preview src=\"./demos/OuterAttrsAndLayout.zh.vue\"\n```\n\n更多约定见 [样式与 attrs](/docs/attrs)。\n\n## 键盘与焦点事件\n\n`@keydown`、`@focus`、`@blur` 等绑在底层 input 上，用法与原生 input 相同：\n\n```vue preview src=\"./demos/KeyboardAndFocusEvents.zh.vue\"\n```\n\n## pt\n\n按 DOM 分段透传。常用键：`root`、`input`、`label`、`prefix`、`suffix`、`help`、`count`。\n\n```vue preview src=\"./demos/Pt.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `id` | `string` | — | 原生 id；未传时自动生成。 |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | 原生 type。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸；默认中等。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\n| `errorMessage` | `string` | — | 错误文案；有值时视为 invalid。 |\n| `placeholder` | `string` | — | 占位符。 |\n| `name` | `string` | — | 原生 name。 |\n| `autocomplete` | `string` | — | 原生 autocomplete。 |\n| `autofocus` | `boolean` | `false` | 挂载后聚焦。 |\n| `pt` | [InputPassThrough](/docs/types#InputPassThrough) | — | DOM 分段透传，见上文 `pt`。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `prefix` | 输入框左侧装饰（如单位、图标）。 |\n| `suffix` | 输入框右侧装饰；与清除按钮可并存。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Instance\n\n| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层 input。 |\n| `blur()` | 使底层 input 失焦。 |\n| `select()` | 选中底层 input 的全部文本。 |\n\n## 类型\n\n<h4 id=\"InputPassThrough\">InputPassThrough</h4>\n\n`pt` 的类型。在 [FieldPassThrough](/docs/types#FieldPassThrough) 基础上多了前后缀等键：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\n`PassThroughPart` 见 [API 类型 · PassThroughPart](/docs/types#PassThroughPart)。\n"
|
|
10030
10461
|
},
|
|
10031
10462
|
"en-US": {
|
|
10032
10463
|
"title": "Input",
|
|
@@ -10120,7 +10551,7 @@
|
|
|
10120
10551
|
{
|
|
10121
10552
|
"id": "instance",
|
|
10122
10553
|
"title": "Instance",
|
|
10123
|
-
"body": "| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying input. |"
|
|
10554
|
+
"body": "| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying input. |\n| `blur()` | Blur the underlying input. |\n| `select()` | Select all text in the input. |"
|
|
10124
10555
|
},
|
|
10125
10556
|
{
|
|
10126
10557
|
"id": "types",
|
|
@@ -10128,7 +10559,7 @@
|
|
|
10128
10559
|
"body": "<h4 id=\"InputPassThrough\">InputPassThrough</h4>\n\nType of `pt`. Extends [FieldPassThrough](/docs/types#FieldPassThrough) with affix parts:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\nSee [PassThroughPart](/docs/types#PassThroughPart) in API types."
|
|
10129
10560
|
}
|
|
10130
10561
|
],
|
|
10131
|
-
"markdown": "---\ntitle: Input\ncategory: 02 / FORM\ndescription: Text input field.\n---\n\n# Input\n\nSingle-line text input.\n\n## Import\n\n```ts\nimport { MInput } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Invalid\n\nUse `invalid` for validation failure, or rely on `error-message` alone.\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Clearable\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Prefix / Suffix\n\n```vue preview src=\"./demos/PrefixSuffix.en.vue\"\n```\n\n## Password-like type\n\n```vue preview src=\"./demos/PasswordLikeType.vue\"\n```\n\n## Sizes\n\nSupports `small` / `large`, and also `sm` / `md` / `lg`.\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Count\n\n`showCount` shows the character count; pair with `maxlength` for an upper bound.\n\n```vue preview src=\"./demos/Count.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Outer attrs & layout\n\nAll fallthrough attrs except **control events** (`@keydown`, `@focus`, …) bind to the field wrapper (`.m-input-field`), not the raw `<input>`—including `class`, `style`, `data-*`, `title`, `tabindex`, and undeclared attrs:\n\n```vue preview src=\"./demos/OuterAttrsAndLayout.en.vue\"\n```\n\nSee [Styling & attrs](/docs/attrs) for library-wide rules.\n\n## Keyboard & focus events\n\n`@keydown`, `@focus`, `@blur`, and similar listeners attach to the underlying input:\n\n```vue preview src=\"./demos/KeyboardAndFocusEvents.en.vue\"\n```\n\n## pt\n\nPass-through per DOM part. Common keys: `root`, `input`, `label`, `prefix`, `suffix`, `help`, `count`.\n\n```vue preview src=\"./demos/Pt.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `id` | `string` | — | Native id; auto-generated when omitted. |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | Native type. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; medium by default. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Style variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\n| `errorMessage` | `string` | — | Error copy; implies invalid when set. |\n| `placeholder` | `string` | — | Placeholder. |\n| `name` | `string` | — | Native name. |\n| `autocomplete` | `string` | — | Native autocomplete. |\n| `autofocus` | `boolean` | `false` | Focus on mount. |\n| `pt` | [InputPassThrough](/docs/types#InputPassThrough) | — | Pass-through per DOM part; see **pt** above. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `prefix` | Left adornment (unit, icon, and so on). |\n| `suffix` | Right adornment; can coexist with the clear button. |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Value changed. |\n| `clear` | — | Fired when clear is clicked. |\n\n## Instance\n\n| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying input. |\n\n## Types\n\n<h4 id=\"InputPassThrough\">InputPassThrough</h4>\n\nType of `pt`. Extends [FieldPassThrough](/docs/types#FieldPassThrough) with affix parts:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\nSee [PassThroughPart](/docs/types#PassThroughPart) in API types.\n"
|
|
10562
|
+
"markdown": "---\ntitle: Input\ncategory: 02 / FORM\ndescription: Text input field.\n---\n\n# Input\n\nSingle-line text input.\n\n## Import\n\n```ts\nimport { MInput } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Invalid\n\nUse `invalid` for validation failure, or rely on `error-message` alone.\n\n```vue preview src=\"./demos/Invalid.vue\"\n```\n\n## Clearable\n\n```vue preview src=\"./demos/Clearable.vue\"\n```\n\n## Prefix / Suffix\n\n```vue preview src=\"./demos/PrefixSuffix.en.vue\"\n```\n\n## Password-like type\n\n```vue preview src=\"./demos/PasswordLikeType.vue\"\n```\n\n## Sizes\n\nSupports `small` / `large`, and also `sm` / `md` / `lg`.\n\n```vue preview src=\"./demos/Sizes.vue\"\n```\n\n## Count\n\n`showCount` shows the character count; pair with `maxlength` for an upper bound.\n\n```vue preview src=\"./demos/Count.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Outer attrs & layout\n\nAll fallthrough attrs except **control events** (`@keydown`, `@focus`, …) bind to the field wrapper (`.m-input-field`), not the raw `<input>`—including `class`, `style`, `data-*`, `title`, `tabindex`, and undeclared attrs:\n\n```vue preview src=\"./demos/OuterAttrsAndLayout.en.vue\"\n```\n\nSee [Styling & attrs](/docs/attrs) for library-wide rules.\n\n## Keyboard & focus events\n\n`@keydown`, `@focus`, `@blur`, and similar listeners attach to the underlying input:\n\n```vue preview src=\"./demos/KeyboardAndFocusEvents.en.vue\"\n```\n\n## pt\n\nPass-through per DOM part. Common keys: `root`, `input`, `label`, `prefix`, `suffix`, `help`, `count`.\n\n```vue preview src=\"./demos/Pt.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `id` | `string` | — | Native id; auto-generated when omitted. |\n| `type` | `'text' \\| 'email' \\| 'password' \\| 'search' \\| 'url' \\| 'tel'` | `'text'` | Native type. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size; medium by default. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Style variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\n| `errorMessage` | `string` | — | Error copy; implies invalid when set. |\n| `placeholder` | `string` | — | Placeholder. |\n| `name` | `string` | — | Native name. |\n| `autocomplete` | `string` | — | Native autocomplete. |\n| `autofocus` | `boolean` | `false` | Focus on mount. |\n| `pt` | [InputPassThrough](/docs/types#InputPassThrough) | — | Pass-through per DOM part; see **pt** above. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `prefix` | Left adornment (unit, icon, and so on). |\n| `suffix` | Right adornment; can coexist with the clear button. |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Value changed. |\n| `clear` | — | Fired when clear is clicked. |\n\n## Instance\n\n| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying input. |\n| `blur()` | Blur the underlying input. |\n| `select()` | Select all text in the input. |\n\n## Types\n\n<h4 id=\"InputPassThrough\">InputPassThrough</h4>\n\nType of `pt`. Extends [FieldPassThrough](/docs/types#FieldPassThrough) with affix parts:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n prefix?: PassThroughPart\n suffix?: PassThroughPart\n help?: PassThroughPart\n count?: PassThroughPart\n}\n```\n\nSee [PassThroughPart](/docs/types#PassThroughPart) in API types.\n"
|
|
10132
10563
|
}
|
|
10133
10564
|
}
|
|
10134
10565
|
},
|
|
@@ -10203,6 +10634,7 @@
|
|
|
10203
10634
|
"description": "自定义颜色触发器。"
|
|
10204
10635
|
}
|
|
10205
10636
|
],
|
|
10637
|
+
"methods": [],
|
|
10206
10638
|
"examples": [
|
|
10207
10639
|
{
|
|
10208
10640
|
"id": "引入-1",
|
|
@@ -10354,9 +10786,22 @@
|
|
|
10354
10786
|
"description": "将输入框与前后缀附加内容组合为同一控件组。",
|
|
10355
10787
|
"descriptionEn": "Combine an input with prefix and suffix addons into one control group.",
|
|
10356
10788
|
"import": "import { MInputGroup } from 'morya-ui'",
|
|
10357
|
-
"props": [
|
|
10789
|
+
"props": [
|
|
10790
|
+
{
|
|
10791
|
+
"name": "pt",
|
|
10792
|
+
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
10793
|
+
"default": "—",
|
|
10794
|
+
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
10795
|
+
}
|
|
10796
|
+
],
|
|
10358
10797
|
"events": [],
|
|
10359
|
-
"slots": [
|
|
10798
|
+
"slots": [
|
|
10799
|
+
{
|
|
10800
|
+
"name": "default",
|
|
10801
|
+
"description": "附加项与输入控件。"
|
|
10802
|
+
}
|
|
10803
|
+
],
|
|
10804
|
+
"methods": [],
|
|
10360
10805
|
"examples": [
|
|
10361
10806
|
{
|
|
10362
10807
|
"id": "引入-1",
|
|
@@ -10415,6 +10860,11 @@
|
|
|
10415
10860
|
"title": "基础用法",
|
|
10416
10861
|
"body": "```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
10417
10862
|
},
|
|
10863
|
+
{
|
|
10864
|
+
"id": "props",
|
|
10865
|
+
"title": "Props",
|
|
10866
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
10867
|
+
},
|
|
10418
10868
|
{
|
|
10419
10869
|
"id": "slots",
|
|
10420
10870
|
"title": "Slots",
|
|
@@ -10426,7 +10876,7 @@
|
|
|
10426
10876
|
"body": "无自定义事件。"
|
|
10427
10877
|
}
|
|
10428
10878
|
],
|
|
10429
|
-
"markdown": "---\ntitle: InputGroup\ncategory: 02 / FORM\ndescription: 将输入框与前后缀附加内容组合为同一控件组。\n---\n\n# InputGroup\n\n组合输入与前后缀。附加内容使用 `MInputGroupAddon`，或手动添加 `m-inputgroup-addon` class。\n\n## 引入\n\n```ts\nimport { MInput, MInputGroup, MInputGroupAddon } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| `default` | 附加项与输入控件。 |\n\nAddon 组件仅提供默认插槽，根元素 class 为 `m-inputgroup-addon`。\n\n## Events\n\n无自定义事件。\n"
|
|
10879
|
+
"markdown": "---\ntitle: InputGroup\ncategory: 02 / FORM\ndescription: 将输入框与前后缀附加内容组合为同一控件组。\n---\n\n# InputGroup\n\n组合输入与前后缀。附加内容使用 `MInputGroupAddon`，或手动添加 `m-inputgroup-addon` class。\n\n## 引入\n\n```ts\nimport { MInput, MInputGroup, MInputGroupAddon } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n## Slots\n\n| 名称 | 说明 |\n| --- | --- |\n| `default` | 附加项与输入控件。 |\n\nAddon 组件仅提供默认插槽，根元素 class 为 `m-inputgroup-addon`。\n\n## Events\n\n无自定义事件。\n"
|
|
10430
10880
|
},
|
|
10431
10881
|
"en-US": {
|
|
10432
10882
|
"title": "InputGroup",
|
|
@@ -10447,6 +10897,11 @@
|
|
|
10447
10897
|
"title": "Basic",
|
|
10448
10898
|
"body": "```vue preview src=\"./demos/Basic.vue\"\n```"
|
|
10449
10899
|
},
|
|
10900
|
+
{
|
|
10901
|
+
"id": "props",
|
|
10902
|
+
"title": "Props",
|
|
10903
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
10904
|
+
},
|
|
10450
10905
|
{
|
|
10451
10906
|
"id": "slots",
|
|
10452
10907
|
"title": "Slots",
|
|
@@ -10458,7 +10913,7 @@
|
|
|
10458
10913
|
"body": "No custom events."
|
|
10459
10914
|
}
|
|
10460
10915
|
],
|
|
10461
|
-
"markdown": "---\ntitle: InputGroup\ncategory: 02 / FORM\ndescription: Combine an input with prefix and suffix addons into one control group.\n---\n\n# InputGroup\n\nCombine an input with prefix and suffix addons. Use `MInputGroupAddon` for addons, or add the `m-inputgroup-addon` class manually.\n\n## Import\n\n```ts\nimport { MInput, MInputGroup, MInputGroupAddon } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Addons and input controls. |\n\nThe addon component only provides a default slot; its root element class is `m-inputgroup-addon`.\n\n## Events\n\nNo custom events.\n"
|
|
10916
|
+
"markdown": "---\ntitle: InputGroup\ncategory: 02 / FORM\ndescription: Combine an input with prefix and suffix addons into one control group.\n---\n\n# InputGroup\n\nCombine an input with prefix and suffix addons. Use `MInputGroupAddon` for addons, or add the `m-inputgroup-addon` class manually.\n\n## Import\n\n```ts\nimport { MInput, MInputGroup, MInputGroupAddon } 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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Addons and input controls. |\n\nThe addon component only provides a default slot; its root element class is `m-inputgroup-addon`.\n\n## Events\n\nNo custom events.\n"
|
|
10462
10917
|
}
|
|
10463
10918
|
}
|
|
10464
10919
|
},
|
|
@@ -10612,6 +11067,20 @@
|
|
|
10612
11067
|
"description": "后缀。"
|
|
10613
11068
|
}
|
|
10614
11069
|
],
|
|
11070
|
+
"methods": [
|
|
11071
|
+
{
|
|
11072
|
+
"name": "focus",
|
|
11073
|
+
"description": "聚焦底层输入框。"
|
|
11074
|
+
},
|
|
11075
|
+
{
|
|
11076
|
+
"name": "blur",
|
|
11077
|
+
"description": "使底层输入框失焦。"
|
|
11078
|
+
},
|
|
11079
|
+
{
|
|
11080
|
+
"name": "select",
|
|
11081
|
+
"description": "选中输入框的全部文本。"
|
|
11082
|
+
}
|
|
11083
|
+
],
|
|
10615
11084
|
"examples": [
|
|
10616
11085
|
{
|
|
10617
11086
|
"id": "引入-1",
|
|
@@ -10726,13 +11195,18 @@
|
|
|
10726
11195
|
"title": "Events",
|
|
10727
11196
|
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `number \\| null` | 值变化。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |"
|
|
10728
11197
|
},
|
|
11198
|
+
{
|
|
11199
|
+
"id": "methods",
|
|
11200
|
+
"title": "Methods",
|
|
11201
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层输入框。 |\n| `blur()` | 使底层输入框失焦。 |\n| `select()` | 选中输入框的全部文本。 |"
|
|
11202
|
+
},
|
|
10729
11203
|
{
|
|
10730
11204
|
"id": "slots",
|
|
10731
11205
|
"title": "Slots",
|
|
10732
11206
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `prefix` | 前缀。 |\n| `suffix` | 后缀。 |"
|
|
10733
11207
|
}
|
|
10734
11208
|
],
|
|
10735
|
-
"markdown": "---\ntitle: InputNumber\ncategory: 02 / FORM\ndescription: 数字输入框，支持步进按钮、上下限与尺寸。\n---\n\n# InputNumber\n\n数字输入。可显示增减按钮，并按 `min` / `max` / `step` 约束取值。\n\n## 引入\n\n```ts\nimport { MInputNumber } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Buttons\n\n```vue preview src=\"./demos/Buttons.vue\"\n```\n\n## Precision & placement\n\n`precision` 控制小数位。`button-placement=\"right\"` 把增减按钮放到右侧。`clearable` 可清空。\n\n```vue preview src=\"./demos/PrecisionAndPlacement.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `number \\| null` | `null` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `min` | `number` | — | 最小值。 |\n| `max` | `number` | — | 最大值。 |\n| `step` | `number` | `1` | 步进。 |\n| `precision` | `number` | — | 小数位数。 |\n| `showButtons` | `boolean` | `false` | 显示增减按钮。 |\n| `buttonPlacement` | `'both' \\| 'right'` | `'both'` | 按钮位置。 |\n| `clearable` | `boolean` | `false` | 显示清空。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `readonly` | `boolean` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `number \\| null` | 值变化。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `prefix` | 前缀。 |\n| `suffix` | 后缀。 |\n"
|
|
11209
|
+
"markdown": "---\ntitle: InputNumber\ncategory: 02 / FORM\ndescription: 数字输入框，支持步进按钮、上下限与尺寸。\n---\n\n# InputNumber\n\n数字输入。可显示增减按钮，并按 `min` / `max` / `step` 约束取值。\n\n## 引入\n\n```ts\nimport { MInputNumber } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Buttons\n\n```vue preview src=\"./demos/Buttons.vue\"\n```\n\n## Precision & placement\n\n`precision` 控制小数位。`button-placement=\"right\"` 把增减按钮放到右侧。`clearable` 可清空。\n\n```vue preview src=\"./demos/PrecisionAndPlacement.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `number \\| null` | `null` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `min` | `number` | — | 最小值。 |\n| `max` | `number` | — | 最大值。 |\n| `step` | `number` | `1` | 步进。 |\n| `precision` | `number` | — | 小数位数。 |\n| `showButtons` | `boolean` | `false` | 显示增减按钮。 |\n| `buttonPlacement` | `'both' \\| 'right'` | `'both'` | 按钮位置。 |\n| `clearable` | `boolean` | `false` | 显示清空。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `errorMessage` | `string` | — | — |\n| `helpText` | `string` | — | — |\n| `id` | `string` | — | — |\n| `readonly` | `boolean` | — | — |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `number \\| null` | 值变化。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层输入框。 |\n| `blur()` | 使底层输入框失焦。 |\n| `select()` | 选中输入框的全部文本。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `prefix` | 前缀。 |\n| `suffix` | 后缀。 |\n"
|
|
10736
11210
|
},
|
|
10737
11211
|
"en-US": {
|
|
10738
11212
|
"title": "InputNumber",
|
|
@@ -10773,13 +11247,18 @@
|
|
|
10773
11247
|
"title": "Events",
|
|
10774
11248
|
"body": "| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `number \\| null` | Value changed. |"
|
|
10775
11249
|
},
|
|
11250
|
+
{
|
|
11251
|
+
"id": "methods",
|
|
11252
|
+
"title": "Methods",
|
|
11253
|
+
"body": "| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying input. |\n| `blur()` | Blur the underlying input. |\n| `select()` | Select all text in the input. |"
|
|
11254
|
+
},
|
|
10776
11255
|
{
|
|
10777
11256
|
"id": "slots",
|
|
10778
11257
|
"title": "Slots",
|
|
10779
11258
|
"body": "| Slot | Description |\n| --- | --- |\n| `prefix` | Prefix. |\n| `suffix` | Suffix. |"
|
|
10780
11259
|
}
|
|
10781
11260
|
],
|
|
10782
|
-
"markdown": "---\ntitle: InputNumber\ncategory: 02 / FORM\ndescription: Number input with optional steppers, min/max bounds, and sizes.\n---\n\n# InputNumber\n\nNumber input. Can show increment and decrement buttons, and constrain values with `min` / `max` / `step`.\n\n## Import\n\n```ts\nimport { MInputNumber } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Buttons\n\n```vue preview src=\"./demos/Buttons.vue\"\n```\n\n## Precision & placement\n\n`precision` rounds to a number of decimal places. `button-placement=\"right\"` puts both buttons on the right. `clearable` shows a clear control.\n\n```vue preview src=\"./demos/PrecisionAndPlacement.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `number \\| null` | `null` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `min` | `number` | — | Minimum value. |\n| `max` | `number` | — | Maximum value. |\n| `step` | `number` | `1` | Step. |\n| `precision` | `number` | — | Decimal places. |\n| `showButtons` | `boolean` | `false` | Show increment and decrement buttons. |\n| `buttonPlacement` | `'both' \\| 'right'` | `'both'` | Button placement. |\n| `clearable` | `boolean` | `false` | Show a clear control. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\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` | `number \\| null` | Value changed. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `prefix` | Prefix. |\n| `suffix` | Suffix. |\n"
|
|
11261
|
+
"markdown": "---\ntitle: InputNumber\ncategory: 02 / FORM\ndescription: Number input with optional steppers, min/max bounds, and sizes.\n---\n\n# InputNumber\n\nNumber input. Can show increment and decrement buttons, and constrain values with `min` / `max` / `step`.\n\n## Import\n\n```ts\nimport { MInputNumber } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Buttons\n\n```vue preview src=\"./demos/Buttons.vue\"\n```\n\n## Precision & placement\n\n`precision` rounds to a number of decimal places. `button-placement=\"right\"` puts both buttons on the right. `clearable` shows a clear control.\n\n```vue preview src=\"./demos/PrecisionAndPlacement.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `number \\| null` | `null` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `min` | `number` | — | Minimum value. |\n| `max` | `number` | — | Maximum value. |\n| `step` | `number` | `1` | Step. |\n| `precision` | `number` | — | Decimal places. |\n| `showButtons` | `boolean` | `false` | Show increment and decrement buttons. |\n| `buttonPlacement` | `'both' \\| 'right'` | `'both'` | Button placement. |\n| `clearable` | `boolean` | `false` | Show a clear control. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\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` | `number \\| null` | Value changed. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying input. |\n| `blur()` | Blur the underlying input. |\n| `select()` | Select all text in the input. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `prefix` | Prefix. |\n| `suffix` | Suffix. |\n"
|
|
10783
11262
|
}
|
|
10784
11263
|
}
|
|
10785
11264
|
},
|
|
@@ -10861,6 +11340,7 @@
|
|
|
10861
11340
|
}
|
|
10862
11341
|
],
|
|
10863
11342
|
"slots": [],
|
|
11343
|
+
"methods": [],
|
|
10864
11344
|
"examples": [
|
|
10865
11345
|
{
|
|
10866
11346
|
"id": "引入-1",
|
|
@@ -11159,6 +11639,20 @@
|
|
|
11159
11639
|
"description": "替换隐藏密码图标。"
|
|
11160
11640
|
}
|
|
11161
11641
|
],
|
|
11642
|
+
"methods": [
|
|
11643
|
+
{
|
|
11644
|
+
"name": "focus",
|
|
11645
|
+
"description": "聚焦底层输入框。"
|
|
11646
|
+
},
|
|
11647
|
+
{
|
|
11648
|
+
"name": "blur",
|
|
11649
|
+
"description": "使底层输入框失焦。"
|
|
11650
|
+
},
|
|
11651
|
+
{
|
|
11652
|
+
"name": "select",
|
|
11653
|
+
"description": "选中输入框的全部文本。"
|
|
11654
|
+
}
|
|
11655
|
+
],
|
|
11162
11656
|
"examples": [
|
|
11163
11657
|
{
|
|
11164
11658
|
"id": "引入-1",
|
|
@@ -11319,13 +11813,18 @@
|
|
|
11319
11813
|
"title": "Events",
|
|
11320
11814
|
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |"
|
|
11321
11815
|
},
|
|
11816
|
+
{
|
|
11817
|
+
"id": "methods",
|
|
11818
|
+
"title": "Methods",
|
|
11819
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层输入框。 |\n| `blur()` | 使底层输入框失焦。 |\n| `select()` | 选中输入框的全部文本。 |"
|
|
11820
|
+
},
|
|
11322
11821
|
{
|
|
11323
11822
|
"id": "slots",
|
|
11324
11823
|
"title": "Slots",
|
|
11325
11824
|
"body": "| 插槽名 | 参数 | 说明 |\n| --- | --- | --- |\n| `showIcon` | `{ unmasked }` | 替换显示密码图标。 |\n| `hideIcon` | `{ unmasked }` | 替换隐藏密码图标。 |"
|
|
11326
11825
|
}
|
|
11327
11826
|
],
|
|
11328
|
-
"markdown": "---\ntitle: InputPassword\ncategory: 02 / FORM\ndescription: 密码输入框，支持显示/隐藏与强度提示。\n---\n\n# InputPassword\n\n密码输入。默认提供显示/隐藏切换；可选密码强度反馈。\n\n## 引入\n\n```ts\nimport { MInputPassword } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Feedback\n\n```vue preview src=\"./demos/Feedback.vue\"\n```\n\n## Custom icons\n\n默认用 `eye` / `eye-off`。可用属性换成其它系统图标，或用插槽完全自定义。\n\n```vue preview src=\"./demos/CustomIcons.zh.vue\"\n```\n\n## Hold to peek\n\n`showPasswordOn=\"mousedown\"` 按住显示、松开隐藏（键盘 Space / Enter 同样按住预览）。\n\n```vue preview src=\"./demos/HoldToPeek.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `feedback` | `boolean` | `false` | 显示强度提示。 |\n| `toggleMask` | `boolean` | `true` | 显示切换明文按钮。 |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | 显示明文的方式；`mousedown` 为按住预览。 |\n| `showIcon` | `IconName \\| Component` | `'eye'` | 密文态图标（点击显示）。 |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | 明文态图标（点击隐藏）。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\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` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Slots\n\n| 插槽名 | 参数 | 说明 |\n| --- | --- | --- |\n| `showIcon` | `{ unmasked }` | 替换显示密码图标。 |\n| `hideIcon` | `{ unmasked }` | 替换隐藏密码图标。 |\n"
|
|
11827
|
+
"markdown": "---\ntitle: InputPassword\ncategory: 02 / FORM\ndescription: 密码输入框，支持显示/隐藏与强度提示。\n---\n\n# InputPassword\n\n密码输入。默认提供显示/隐藏切换；可选密码强度反馈。\n\n## 引入\n\n```ts\nimport { MInputPassword } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Feedback\n\n```vue preview src=\"./demos/Feedback.vue\"\n```\n\n## Custom icons\n\n默认用 `eye` / `eye-off`。可用属性换成其它系统图标，或用插槽完全自定义。\n\n```vue preview src=\"./demos/CustomIcons.zh.vue\"\n```\n\n## Hold to peek\n\n`showPasswordOn=\"mousedown\"` 按住显示、松开隐藏（键盘 Space / Enter 同样按住预览）。\n\n```vue preview src=\"./demos/HoldToPeek.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `feedback` | `boolean` | `false` | 显示强度提示。 |\n| `toggleMask` | `boolean` | `true` | 显示切换明文按钮。 |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | 显示明文的方式；`mousedown` 为按住预览。 |\n| `showIcon` | `IconName \\| Component` | `'eye'` | 密文态图标（点击显示）。 |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | 明文态图标（点击隐藏）。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\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` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层输入框。 |\n| `blur()` | 使底层输入框失焦。 |\n| `select()` | 选中输入框的全部文本。 |\n\n## Slots\n\n| 插槽名 | 参数 | 说明 |\n| --- | --- | --- |\n| `showIcon` | `{ unmasked }` | 替换显示密码图标。 |\n| `hideIcon` | `{ unmasked }` | 替换隐藏密码图标。 |\n"
|
|
11329
11828
|
},
|
|
11330
11829
|
"en-US": {
|
|
11331
11830
|
"title": "InputPassword",
|
|
@@ -11376,13 +11875,18 @@
|
|
|
11376
11875
|
"title": "Events",
|
|
11377
11876
|
"body": "| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Value changed. |\n| `clear` | — | Emitted when the value is cleared. |"
|
|
11378
11877
|
},
|
|
11878
|
+
{
|
|
11879
|
+
"id": "methods",
|
|
11880
|
+
"title": "Methods",
|
|
11881
|
+
"body": "| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying input. |\n| `blur()` | Blur the underlying input. |\n| `select()` | Select all text in the input. |"
|
|
11882
|
+
},
|
|
11379
11883
|
{
|
|
11380
11884
|
"id": "slots",
|
|
11381
11885
|
"title": "Slots",
|
|
11382
11886
|
"body": "| Slot | Props | Description |\n| --- | --- | --- |\n| `showIcon` | `{ unmasked }` | Replace the show-password icon. |\n| `hideIcon` | `{ unmasked }` | Replace the hide-password icon. |"
|
|
11383
11887
|
}
|
|
11384
11888
|
],
|
|
11385
|
-
"markdown": "---\ntitle: InputPassword\ncategory: 02 / FORM\ndescription: Password input with show/hide toggle and optional strength feedback.\n---\n\n# InputPassword\n\nPassword input. Includes a show/hide toggle by default; optional password strength feedback.\n\n## Import\n\n```ts\nimport { MInputPassword } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Feedback\n\n```vue preview src=\"./demos/Feedback.vue\"\n```\n\n## Custom icons\n\nDefaults are `eye` / `eye-off`. Swap them with other system icons via props, or replace them entirely with slots.\n\n```vue preview src=\"./demos/CustomIcons.en.vue\"\n```\n\n## Hold to peek\n\n`showPasswordOn=\"mousedown\"` reveals while pressed and hides on release (Space / Enter do the same).\n\n```vue preview src=\"./demos/HoldToPeek.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `feedback` | `boolean` | `false` | Show strength feedback. |\n| `toggleMask` | `boolean` | `true` | Show toggle for revealing the password. |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | How to reveal; `mousedown` is hold-to-peek. |\n| `showIcon` | `IconName \\| Component` | `'eye'` | Icon while masked (click to reveal). |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | Icon while visible (click to hide). |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\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 changed. |\n| `clear` | — | Emitted when the value is cleared. |\n\n## Slots\n\n| Slot | Props | Description |\n| --- | --- | --- |\n| `showIcon` | `{ unmasked }` | Replace the show-password icon. |\n| `hideIcon` | `{ unmasked }` | Replace the hide-password icon. |\n"
|
|
11889
|
+
"markdown": "---\ntitle: InputPassword\ncategory: 02 / FORM\ndescription: Password input with show/hide toggle and optional strength feedback.\n---\n\n# InputPassword\n\nPassword input. Includes a show/hide toggle by default; optional password strength feedback.\n\n## Import\n\n```ts\nimport { MInputPassword } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Feedback\n\n```vue preview src=\"./demos/Feedback.vue\"\n```\n\n## Custom icons\n\nDefaults are `eye` / `eye-off`. Swap them with other system icons via props, or replace them entirely with slots.\n\n```vue preview src=\"./demos/CustomIcons.en.vue\"\n```\n\n## Hold to peek\n\n`showPasswordOn=\"mousedown\"` reveals while pressed and hides on release (Space / Enter do the same).\n\n```vue preview src=\"./demos/HoldToPeek.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `feedback` | `boolean` | `false` | Show strength feedback. |\n| `toggleMask` | `boolean` | `true` | Show toggle for revealing the password. |\n| `showPasswordOn` | `'click' \\| 'mousedown'` | `'click'` | How to reveal; `mousedown` is hold-to-peek. |\n| `showIcon` | `IconName \\| Component` | `'eye'` | Icon while masked (click to reveal). |\n| `hideIcon` | `IconName \\| Component` | `'eye-off'` | Icon while visible (click to hide). |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `invalid` | `boolean` | `false` | Validation failed state. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\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 changed. |\n| `clear` | — | Emitted when the value is cleared. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying input. |\n| `blur()` | Blur the underlying input. |\n| `select()` | Select all text in the input. |\n\n## Slots\n\n| Slot | Props | Description |\n| --- | --- | --- |\n| `showIcon` | `{ unmasked }` | Replace the show-password icon. |\n| `hideIcon` | `{ unmasked }` | Replace the hide-password icon. |\n"
|
|
11386
11890
|
}
|
|
11387
11891
|
}
|
|
11388
11892
|
},
|
|
@@ -11475,6 +11979,7 @@
|
|
|
11475
11979
|
"description": "标签 `{ tag, index }`。"
|
|
11476
11980
|
}
|
|
11477
11981
|
],
|
|
11982
|
+
"methods": [],
|
|
11478
11983
|
"examples": [
|
|
11479
11984
|
{
|
|
11480
11985
|
"id": "引入-1",
|
|
@@ -11702,6 +12207,7 @@
|
|
|
11702
12207
|
}
|
|
11703
12208
|
],
|
|
11704
12209
|
"slots": [],
|
|
12210
|
+
"methods": [],
|
|
11705
12211
|
"examples": [
|
|
11706
12212
|
{
|
|
11707
12213
|
"id": "引入-1",
|
|
@@ -11846,7 +12352,13 @@
|
|
|
11846
12352
|
}
|
|
11847
12353
|
],
|
|
11848
12354
|
"events": [],
|
|
11849
|
-
"slots": [
|
|
12355
|
+
"slots": [
|
|
12356
|
+
{
|
|
12357
|
+
"name": "default",
|
|
12358
|
+
"description": "标签文案。"
|
|
12359
|
+
}
|
|
12360
|
+
],
|
|
12361
|
+
"methods": [],
|
|
11850
12362
|
"examples": [
|
|
11851
12363
|
{
|
|
11852
12364
|
"id": "引入-1",
|
|
@@ -11970,14 +12482,190 @@
|
|
|
11970
12482
|
"description": "页面级布局骨架，含 Header / Sider / Content / Footer。",
|
|
11971
12483
|
"descriptionEn": "Page layout shell with Header / Sider / Content / Footer.",
|
|
11972
12484
|
"import": "import { MLayout } from 'morya-ui'",
|
|
11973
|
-
"props": [
|
|
11974
|
-
|
|
12485
|
+
"props": [
|
|
12486
|
+
{
|
|
12487
|
+
"name": "hasSider",
|
|
12488
|
+
"type": "boolean",
|
|
12489
|
+
"default": "false",
|
|
12490
|
+
"description": "横向容纳 `MLayoutSider`。"
|
|
12491
|
+
},
|
|
12492
|
+
{
|
|
12493
|
+
"name": "siderPlacement",
|
|
12494
|
+
"type": "'left' | 'right'",
|
|
12495
|
+
"default": "'left'",
|
|
12496
|
+
"description": "侧栏位置。"
|
|
12497
|
+
},
|
|
12498
|
+
{
|
|
12499
|
+
"name": "fillViewport",
|
|
12500
|
+
"type": "boolean",
|
|
12501
|
+
"default": "false",
|
|
12502
|
+
"description": "根布局撑满视口（`100dvh`），侧栏/内容才能按剩余高度拉伸。"
|
|
12503
|
+
},
|
|
12504
|
+
{
|
|
12505
|
+
"name": "embedded",
|
|
12506
|
+
"type": "boolean",
|
|
12507
|
+
"default": "false",
|
|
12508
|
+
"description": "柔和背景（嵌套内容区）。"
|
|
12509
|
+
},
|
|
12510
|
+
{
|
|
12511
|
+
"name": "position",
|
|
12512
|
+
"type": "'static' | 'absolute'",
|
|
12513
|
+
"default": "'static'",
|
|
12514
|
+
"description": "定位模式。"
|
|
12515
|
+
},
|
|
12516
|
+
{
|
|
12517
|
+
"name": "contentClass",
|
|
12518
|
+
"type": "—",
|
|
12519
|
+
"default": "—",
|
|
12520
|
+
"description": "滚动容器 class / style。"
|
|
12521
|
+
},
|
|
12522
|
+
{
|
|
12523
|
+
"name": "contentStyle",
|
|
12524
|
+
"type": "—",
|
|
12525
|
+
"default": "—",
|
|
12526
|
+
"description": "滚动容器 class / style。"
|
|
12527
|
+
},
|
|
12528
|
+
{
|
|
12529
|
+
"name": "height",
|
|
12530
|
+
"type": "number | string",
|
|
12531
|
+
"default": "—",
|
|
12532
|
+
"description": "—"
|
|
12533
|
+
},
|
|
12534
|
+
{
|
|
12535
|
+
"name": "padding",
|
|
12536
|
+
"type": "number | string",
|
|
12537
|
+
"default": "—",
|
|
12538
|
+
"description": "可选内边距；无默认值。"
|
|
12539
|
+
},
|
|
12540
|
+
{
|
|
12541
|
+
"name": "radius",
|
|
12542
|
+
"type": "number | string",
|
|
12543
|
+
"default": "—",
|
|
12544
|
+
"description": "圆角。"
|
|
12545
|
+
},
|
|
12546
|
+
{
|
|
12547
|
+
"name": "pt",
|
|
12548
|
+
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
12549
|
+
"default": "—",
|
|
12550
|
+
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
12551
|
+
},
|
|
12552
|
+
{
|
|
12553
|
+
"name": "width",
|
|
12554
|
+
"type": "number | string",
|
|
12555
|
+
"default": "272",
|
|
12556
|
+
"description": "展开宽度（始终写在 `width` 上）。"
|
|
12557
|
+
},
|
|
12558
|
+
{
|
|
12559
|
+
"name": "collapsedWidth",
|
|
12560
|
+
"type": "number",
|
|
12561
|
+
"default": "48",
|
|
12562
|
+
"description": "折叠时的 `max-width`。"
|
|
12563
|
+
},
|
|
12564
|
+
{
|
|
12565
|
+
"name": "collapsed",
|
|
12566
|
+
"type": "boolean",
|
|
12567
|
+
"default": "—",
|
|
12568
|
+
"description": "折叠状态，支持 `v-model:collapsed`。"
|
|
12569
|
+
},
|
|
12570
|
+
{
|
|
12571
|
+
"name": "defaultCollapsed",
|
|
12572
|
+
"type": "boolean",
|
|
12573
|
+
"default": "false",
|
|
12574
|
+
"description": "非受控初始折叠。"
|
|
12575
|
+
},
|
|
12576
|
+
{
|
|
12577
|
+
"name": "showTrigger",
|
|
12578
|
+
"type": "boolean | 'bar' | 'arrow-circle' | 'arrow'",
|
|
12579
|
+
"default": "false",
|
|
12580
|
+
"description": "折叠触发器；`arrow` 等同 `arrow-circle`。"
|
|
12581
|
+
},
|
|
12582
|
+
{
|
|
12583
|
+
"name": "collapseMode",
|
|
12584
|
+
"type": "'width' | 'transform'",
|
|
12585
|
+
"default": "'transform'",
|
|
12586
|
+
"description": "`transform` 裁切内容；`width` 随侧栏收缩。"
|
|
12587
|
+
},
|
|
12588
|
+
{
|
|
12589
|
+
"name": "showCollapsedContent",
|
|
12590
|
+
"type": "boolean",
|
|
12591
|
+
"default": "true",
|
|
12592
|
+
"description": "折叠后是否仍显示侧栏内容。"
|
|
12593
|
+
},
|
|
12594
|
+
{
|
|
12595
|
+
"name": "bordered",
|
|
12596
|
+
"type": "boolean",
|
|
12597
|
+
"default": "false",
|
|
12598
|
+
"description": "边框 / 反色。"
|
|
12599
|
+
},
|
|
12600
|
+
{
|
|
12601
|
+
"name": "inverted",
|
|
12602
|
+
"type": "boolean",
|
|
12603
|
+
"default": "false",
|
|
12604
|
+
"description": "边框 / 反色。"
|
|
12605
|
+
},
|
|
12606
|
+
{
|
|
12607
|
+
"name": "triggerClass",
|
|
12608
|
+
"type": "—",
|
|
12609
|
+
"default": "—",
|
|
12610
|
+
"description": "展开态触发器样式。"
|
|
12611
|
+
},
|
|
12612
|
+
{
|
|
12613
|
+
"name": "triggerStyle",
|
|
12614
|
+
"type": "—",
|
|
12615
|
+
"default": "—",
|
|
12616
|
+
"description": "展开态触发器样式。"
|
|
12617
|
+
},
|
|
12618
|
+
{
|
|
12619
|
+
"name": "collapsedTriggerClass",
|
|
12620
|
+
"type": "—",
|
|
12621
|
+
"default": "—",
|
|
12622
|
+
"description": "折叠态触发器样式。"
|
|
12623
|
+
},
|
|
12624
|
+
{
|
|
12625
|
+
"name": "collapsedTriggerStyle",
|
|
12626
|
+
"type": "—",
|
|
12627
|
+
"default": "—",
|
|
12628
|
+
"description": "折叠态触发器样式。"
|
|
12629
|
+
}
|
|
12630
|
+
],
|
|
12631
|
+
"events": [
|
|
12632
|
+
{
|
|
12633
|
+
"name": "scroll",
|
|
12634
|
+
"description": "`MLayout` 滚动容器滚动时触发。"
|
|
12635
|
+
},
|
|
12636
|
+
{
|
|
12637
|
+
"name": "after-enter",
|
|
12638
|
+
"description": "侧栏展开动画结束。"
|
|
12639
|
+
},
|
|
12640
|
+
{
|
|
12641
|
+
"name": "after-leave",
|
|
12642
|
+
"description": "侧栏收起动画结束。"
|
|
12643
|
+
},
|
|
12644
|
+
{
|
|
12645
|
+
"name": "collapse",
|
|
12646
|
+
"description": "侧栏开始收起。"
|
|
12647
|
+
},
|
|
12648
|
+
{
|
|
12649
|
+
"name": "expand",
|
|
12650
|
+
"description": "侧栏开始展开。"
|
|
12651
|
+
},
|
|
12652
|
+
{
|
|
12653
|
+
"name": "update:collapsed",
|
|
12654
|
+
"description": "折叠状态 v-model。"
|
|
12655
|
+
}
|
|
12656
|
+
],
|
|
11975
12657
|
"slots": [
|
|
11976
12658
|
{
|
|
11977
12659
|
"name": "default",
|
|
11978
12660
|
"description": "布局区域。"
|
|
11979
12661
|
}
|
|
11980
12662
|
],
|
|
12663
|
+
"methods": [
|
|
12664
|
+
{
|
|
12665
|
+
"name": "scrollTo",
|
|
12666
|
+
"description": "滚动内容区；接受 `(options: ScrollToOptions)` 或 `(x, y)`。"
|
|
12667
|
+
}
|
|
12668
|
+
],
|
|
11981
12669
|
"examples": [
|
|
11982
12670
|
{
|
|
11983
12671
|
"id": "引入-1",
|
|
@@ -12177,7 +12865,7 @@
|
|
|
12177
12865
|
{
|
|
12178
12866
|
"id": "layout-props",
|
|
12179
12867
|
"title": "Layout Props",
|
|
12180
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\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` | — | — |"
|
|
12868
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
12181
12869
|
},
|
|
12182
12870
|
{
|
|
12183
12871
|
"id": "layoutsider-props",
|
|
@@ -12192,7 +12880,7 @@
|
|
|
12192
12880
|
{
|
|
12193
12881
|
"id": "expose",
|
|
12194
12882
|
"title": "Expose",
|
|
12195
|
-
"body": "
|
|
12883
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `scrollTo(...)` | 滚动内容区；接受 `(options: ScrollToOptions)` 或 `(x, y)`。 |"
|
|
12196
12884
|
},
|
|
12197
12885
|
{
|
|
12198
12886
|
"id": "components",
|
|
@@ -12205,7 +12893,7 @@
|
|
|
12205
12893
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 布局区域。 |"
|
|
12206
12894
|
}
|
|
12207
12895
|
],
|
|
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
|
|
12896
|
+
"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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\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| 方法 | 说明 |\n| --- | --- |\n| `scrollTo(...)` | 滚动内容区；接受 `(options: ScrollToOptions)` 或 `(x, y)`。 |\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"
|
|
12209
12897
|
},
|
|
12210
12898
|
"en-US": {
|
|
12211
12899
|
"title": "Layout",
|
|
@@ -12259,7 +12947,7 @@
|
|
|
12259
12947
|
{
|
|
12260
12948
|
"id": "layout-props",
|
|
12261
12949
|
"title": "Layout Props",
|
|
12262
|
-
"body": "| 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. |"
|
|
12950
|
+
"body": "| 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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
12263
12951
|
},
|
|
12264
12952
|
{
|
|
12265
12953
|
"id": "layoutsider-props",
|
|
@@ -12274,7 +12962,7 @@
|
|
|
12274
12962
|
{
|
|
12275
12963
|
"id": "expose",
|
|
12276
12964
|
"title": "Expose",
|
|
12277
|
-
"body": "
|
|
12965
|
+
"body": "| Method | Description |\n| --- | --- |\n| `scrollTo(...)` | Scroll the content region; accepts `(options: ScrollToOptions)` or `(x, y)`. |"
|
|
12278
12966
|
},
|
|
12279
12967
|
{
|
|
12280
12968
|
"id": "components",
|
|
@@ -12287,7 +12975,7 @@
|
|
|
12287
12975
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Layout regions. |"
|
|
12288
12976
|
}
|
|
12289
12977
|
],
|
|
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
|
|
12978
|
+
"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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\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| Method | Description |\n| --- | --- |\n| `scrollTo(...)` | Scroll the content region; accepts `(options: ScrollToOptions)` or `(x, y)`. |\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"
|
|
12291
12979
|
}
|
|
12292
12980
|
}
|
|
12293
12981
|
},
|
|
@@ -12380,6 +13068,7 @@
|
|
|
12380
13068
|
"description": "选项 `{ option }`。"
|
|
12381
13069
|
}
|
|
12382
13070
|
],
|
|
13071
|
+
"methods": [],
|
|
12383
13072
|
"examples": [
|
|
12384
13073
|
{
|
|
12385
13074
|
"id": "引入-1",
|
|
@@ -12512,15 +13201,15 @@
|
|
|
12512
13201
|
},
|
|
12513
13202
|
{
|
|
12514
13203
|
"name": "effect",
|
|
12515
|
-
"type": "
|
|
13204
|
+
"type": "同组件",
|
|
12516
13205
|
"default": "'circular'",
|
|
12517
|
-
"description": "
|
|
13206
|
+
"description": "动效。"
|
|
12518
13207
|
},
|
|
12519
13208
|
{
|
|
12520
13209
|
"name": "text",
|
|
12521
13210
|
"type": "string",
|
|
12522
13211
|
"default": "—",
|
|
12523
|
-
"description": "
|
|
13212
|
+
"description": "文案。"
|
|
12524
13213
|
},
|
|
12525
13214
|
{
|
|
12526
13215
|
"name": "ariaLabel",
|
|
@@ -12530,38 +13219,38 @@
|
|
|
12530
13219
|
},
|
|
12531
13220
|
{
|
|
12532
13221
|
"name": "size",
|
|
12533
|
-
"type": "
|
|
13222
|
+
"type": "同组件",
|
|
12534
13223
|
"default": "—",
|
|
12535
|
-
"description": "
|
|
13224
|
+
"description": "指示器尺寸。"
|
|
12536
13225
|
},
|
|
12537
13226
|
{
|
|
12538
13227
|
"name": "background",
|
|
12539
13228
|
"type": "string",
|
|
12540
13229
|
"default": "—",
|
|
12541
|
-
"description": "
|
|
13230
|
+
"description": "遮罩背景。"
|
|
12542
13231
|
},
|
|
12543
13232
|
{
|
|
12544
13233
|
"name": "customClass",
|
|
12545
13234
|
"type": "string",
|
|
12546
13235
|
"default": "—",
|
|
12547
|
-
"description": "
|
|
13236
|
+
"description": "遮罩类名。"
|
|
12548
13237
|
},
|
|
12549
13238
|
{
|
|
12550
13239
|
"name": "fullscreen",
|
|
12551
13240
|
"type": "boolean",
|
|
12552
|
-
"default": "
|
|
12553
|
-
"description": "
|
|
13241
|
+
"default": "无 `target` 时为 `true",
|
|
13242
|
+
"description": "铺满视口。"
|
|
12554
13243
|
},
|
|
12555
13244
|
{
|
|
12556
13245
|
"name": "lock",
|
|
12557
13246
|
"type": "boolean",
|
|
12558
13247
|
"default": "false",
|
|
12559
|
-
"description": "
|
|
13248
|
+
"description": "锁定页面滚动。"
|
|
12560
13249
|
},
|
|
12561
13250
|
{
|
|
12562
13251
|
"name": "delay",
|
|
12563
13252
|
"type": "number",
|
|
12564
|
-
"default": "
|
|
13253
|
+
"default": "—",
|
|
12565
13254
|
"description": "显示前延迟（ms）。"
|
|
12566
13255
|
},
|
|
12567
13256
|
{
|
|
@@ -12575,6 +13264,24 @@
|
|
|
12575
13264
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
12576
13265
|
"default": "—",
|
|
12577
13266
|
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)。"
|
|
13267
|
+
},
|
|
13268
|
+
{
|
|
13269
|
+
"name": "target",
|
|
13270
|
+
"type": "string | HTMLElement",
|
|
13271
|
+
"default": "—",
|
|
13272
|
+
"description": "要盖住的元素或选择器。省略则为全屏。"
|
|
13273
|
+
},
|
|
13274
|
+
{
|
|
13275
|
+
"name": "body",
|
|
13276
|
+
"type": "boolean",
|
|
13277
|
+
"default": "false",
|
|
13278
|
+
"description": "遮罩挂到 `body`，定位到 `target` 上。"
|
|
13279
|
+
},
|
|
13280
|
+
{
|
|
13281
|
+
"name": "spinner",
|
|
13282
|
+
"type": "MRenderable",
|
|
13283
|
+
"default": "—",
|
|
13284
|
+
"description": "自定义指示器；设置后忽略内置 `effect`。"
|
|
12578
13285
|
}
|
|
12579
13286
|
],
|
|
12580
13287
|
"events": [],
|
|
@@ -12588,6 +13295,7 @@
|
|
|
12588
13295
|
"description": "替换遮罩中的指示器。仅在有默认插槽或 `fullscreen` 时生效。"
|
|
12589
13296
|
}
|
|
12590
13297
|
],
|
|
13298
|
+
"methods": [],
|
|
12591
13299
|
"examples": [
|
|
12592
13300
|
{
|
|
12593
13301
|
"id": "引入-1",
|
|
@@ -12912,6 +13620,7 @@
|
|
|
12912
13620
|
}
|
|
12913
13621
|
],
|
|
12914
13622
|
"slots": [],
|
|
13623
|
+
"methods": [],
|
|
12915
13624
|
"examples": [
|
|
12916
13625
|
{
|
|
12917
13626
|
"id": "引入-1",
|
|
@@ -13255,7 +13964,13 @@
|
|
|
13255
13964
|
"description": "点击叶子项（非 disabled / separator）。"
|
|
13256
13965
|
}
|
|
13257
13966
|
],
|
|
13258
|
-
"slots": [
|
|
13967
|
+
"slots": [
|
|
13968
|
+
{
|
|
13969
|
+
"name": "default",
|
|
13970
|
+
"description": "popup 模式的触发器锚点（如按钮）；菜单相对其定位。"
|
|
13971
|
+
}
|
|
13972
|
+
],
|
|
13973
|
+
"methods": [],
|
|
13259
13974
|
"examples": [
|
|
13260
13975
|
{
|
|
13261
13976
|
"id": "引入-1",
|
|
@@ -13673,6 +14388,7 @@
|
|
|
13673
14388
|
"description": "菜单栏末尾区域。"
|
|
13674
14389
|
}
|
|
13675
14390
|
],
|
|
14391
|
+
"methods": [],
|
|
13676
14392
|
"examples": [
|
|
13677
14393
|
{
|
|
13678
14394
|
"id": "引入-1",
|
|
@@ -13824,10 +14540,97 @@
|
|
|
13824
14540
|
"description": "顶部居中浮层提示，支持 API 调用。",
|
|
13825
14541
|
"descriptionEn": "Top-center floating notice with an imperative API.",
|
|
13826
14542
|
"import": "import { MMessage } from 'morya-ui'",
|
|
13827
|
-
"props": [
|
|
13828
|
-
|
|
13829
|
-
|
|
13830
|
-
|
|
14543
|
+
"props": [
|
|
14544
|
+
{
|
|
14545
|
+
"name": "teleport",
|
|
14546
|
+
"type": "boolean",
|
|
14547
|
+
"default": "true",
|
|
14548
|
+
"description": "是否 Teleport"
|
|
14549
|
+
},
|
|
14550
|
+
{
|
|
14551
|
+
"name": "appendTo",
|
|
14552
|
+
"type": "string | HTMLElement | 'self' | false",
|
|
14553
|
+
"default": "'body'",
|
|
14554
|
+
"description": "挂载目标"
|
|
14555
|
+
},
|
|
14556
|
+
{
|
|
14557
|
+
"name": "transition",
|
|
14558
|
+
"type": "string | false",
|
|
14559
|
+
"default": "'message'",
|
|
14560
|
+
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
14561
|
+
},
|
|
14562
|
+
{
|
|
14563
|
+
"name": "placement",
|
|
14564
|
+
"type": "'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right'",
|
|
14565
|
+
"default": "'top'",
|
|
14566
|
+
"description": "宿主位置"
|
|
14567
|
+
},
|
|
14568
|
+
{
|
|
14569
|
+
"name": "max",
|
|
14570
|
+
"type": "number",
|
|
14571
|
+
"default": "—",
|
|
14572
|
+
"description": "同时可见条数；超出丢掉最旧一条"
|
|
14573
|
+
},
|
|
14574
|
+
{
|
|
14575
|
+
"name": "auto",
|
|
14576
|
+
"type": "boolean",
|
|
14577
|
+
"default": "—",
|
|
14578
|
+
"description": "—"
|
|
14579
|
+
},
|
|
14580
|
+
{
|
|
14581
|
+
"name": "messages",
|
|
14582
|
+
"type": "MessageItem[]",
|
|
14583
|
+
"default": "—",
|
|
14584
|
+
"description": "—"
|
|
14585
|
+
},
|
|
14586
|
+
{
|
|
14587
|
+
"name": "pt",
|
|
14588
|
+
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
14589
|
+
"default": "—",
|
|
14590
|
+
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
14591
|
+
}
|
|
14592
|
+
],
|
|
14593
|
+
"events": [],
|
|
14594
|
+
"slots": [],
|
|
14595
|
+
"methods": [
|
|
14596
|
+
{
|
|
14597
|
+
"name": "message.success",
|
|
14598
|
+
"description": "成功提示"
|
|
14599
|
+
},
|
|
14600
|
+
{
|
|
14601
|
+
"name": "message.info",
|
|
14602
|
+
"description": "信息提示"
|
|
14603
|
+
},
|
|
14604
|
+
{
|
|
14605
|
+
"name": "message.warn",
|
|
14606
|
+
"description": "警告提示（`warning` 同义）"
|
|
14607
|
+
},
|
|
14608
|
+
{
|
|
14609
|
+
"name": "message.error",
|
|
14610
|
+
"description": "错误提示"
|
|
14611
|
+
},
|
|
14612
|
+
{
|
|
14613
|
+
"name": "message.open",
|
|
14614
|
+
"description": "自定义打开"
|
|
14615
|
+
},
|
|
14616
|
+
{
|
|
14617
|
+
"name": "message.close",
|
|
14618
|
+
"description": "关闭指定 / 全部"
|
|
14619
|
+
},
|
|
14620
|
+
{
|
|
14621
|
+
"name": "message.closeAll",
|
|
14622
|
+
"description": "关闭全部（二者等价）"
|
|
14623
|
+
},
|
|
14624
|
+
{
|
|
14625
|
+
"name": "message.destroyAll",
|
|
14626
|
+
"description": "关闭全部（二者等价）"
|
|
14627
|
+
},
|
|
14628
|
+
{
|
|
14629
|
+
"name": "message.config",
|
|
14630
|
+
"description": "宿主位置与并发上限"
|
|
14631
|
+
}
|
|
14632
|
+
],
|
|
14633
|
+
"examples": [
|
|
13831
14634
|
{
|
|
13832
14635
|
"id": "引入-1",
|
|
13833
14636
|
"section": "引入",
|
|
@@ -13948,7 +14751,7 @@
|
|
|
13948
14751
|
{
|
|
13949
14752
|
"id": "props-mmessage",
|
|
13950
14753
|
"title": "Props（`MMessage`）",
|
|
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[]` | — | — |"
|
|
14754
|
+
"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[]` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
13952
14755
|
},
|
|
13953
14756
|
{
|
|
13954
14757
|
"id": "events",
|
|
@@ -13966,7 +14769,7 @@
|
|
|
13966
14769
|
"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```"
|
|
13967
14770
|
}
|
|
13968
14771
|
],
|
|
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"
|
|
14772
|
+
"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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\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"
|
|
13970
14773
|
},
|
|
13971
14774
|
"en-US": {
|
|
13972
14775
|
"title": "Message",
|
|
@@ -14005,7 +14808,7 @@
|
|
|
14005
14808
|
{
|
|
14006
14809
|
"id": "props-mmessage",
|
|
14007
14810
|
"title": "Props (`MMessage`)",
|
|
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 |"
|
|
14811
|
+
"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 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
14009
14812
|
},
|
|
14010
14813
|
{
|
|
14011
14814
|
"id": "events",
|
|
@@ -14018,7 +14821,7 @@
|
|
|
14018
14821
|
"body": "No slots; content is injected through the `message.*` API."
|
|
14019
14822
|
}
|
|
14020
14823
|
],
|
|
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"
|
|
14824
|
+
"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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\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"
|
|
14022
14825
|
}
|
|
14023
14826
|
}
|
|
14024
14827
|
},
|
|
@@ -14057,6 +14860,7 @@
|
|
|
14057
14860
|
"description": "自定义标签 `{ meter }`。"
|
|
14058
14861
|
}
|
|
14059
14862
|
],
|
|
14863
|
+
"methods": [],
|
|
14060
14864
|
"examples": [
|
|
14061
14865
|
{
|
|
14062
14866
|
"id": "引入-1",
|
|
@@ -14258,7 +15062,17 @@
|
|
|
14258
15062
|
"description": "拖拽或按钮重排后。"
|
|
14259
15063
|
}
|
|
14260
15064
|
],
|
|
14261
|
-
"slots": [
|
|
15065
|
+
"slots": [
|
|
15066
|
+
{
|
|
15067
|
+
"name": "item",
|
|
15068
|
+
"description": "`{ item, index }` 自定义项。"
|
|
15069
|
+
},
|
|
15070
|
+
{
|
|
15071
|
+
"name": "empty",
|
|
15072
|
+
"description": "自定义 `empty` 内容。"
|
|
15073
|
+
}
|
|
15074
|
+
],
|
|
15075
|
+
"methods": [],
|
|
14262
15076
|
"examples": [
|
|
14263
15077
|
{
|
|
14264
15078
|
"id": "引入-1",
|
|
@@ -14382,9 +15196,85 @@
|
|
|
14382
15196
|
"description": "业务页面组合区块，封装间距、边框与标题层级，少写或不写页面 CSS。",
|
|
14383
15197
|
"descriptionEn": "Composable page sections for spacing, borders, and headings with little or no custom CSS.",
|
|
14384
15198
|
"import": "import { MPageContent } from 'morya-ui'",
|
|
14385
|
-
"props": [
|
|
15199
|
+
"props": [
|
|
15200
|
+
{
|
|
15201
|
+
"name": "density",
|
|
15202
|
+
"type": "'default' | 'compact' | 'spacious'",
|
|
15203
|
+
"description": "子区块垂直间距。"
|
|
15204
|
+
},
|
|
15205
|
+
{
|
|
15206
|
+
"name": "width",
|
|
15207
|
+
"type": "'full' | 'narrow'",
|
|
15208
|
+
"description": "`narrow` 约 42rem，适合表单页。"
|
|
15209
|
+
},
|
|
15210
|
+
{
|
|
15211
|
+
"name": "ariaLabel",
|
|
15212
|
+
"type": "string",
|
|
15213
|
+
"description": "无障碍标签。"
|
|
15214
|
+
},
|
|
15215
|
+
{
|
|
15216
|
+
"name": "title",
|
|
15217
|
+
"type": "string",
|
|
15218
|
+
"description": "可选分组标题。"
|
|
15219
|
+
},
|
|
15220
|
+
{
|
|
15221
|
+
"name": "headingLevel",
|
|
15222
|
+
"type": "1–6",
|
|
15223
|
+
"description": "标题层级。"
|
|
15224
|
+
},
|
|
15225
|
+
{
|
|
15226
|
+
"name": "description",
|
|
15227
|
+
"type": "string",
|
|
15228
|
+
"description": "占位说明。"
|
|
15229
|
+
},
|
|
15230
|
+
{
|
|
15231
|
+
"name": "variant",
|
|
15232
|
+
"type": "'default' | 'muted' | 'form' | 'actions'",
|
|
15233
|
+
"description": "视觉变体。"
|
|
15234
|
+
},
|
|
15235
|
+
{
|
|
15236
|
+
"name": "label",
|
|
15237
|
+
"type": "string",
|
|
15238
|
+
"description": "指标名称。"
|
|
15239
|
+
},
|
|
15240
|
+
{
|
|
15241
|
+
"name": "value",
|
|
15242
|
+
"type": "string | number",
|
|
15243
|
+
"description": "主数值。"
|
|
15244
|
+
},
|
|
15245
|
+
{
|
|
15246
|
+
"name": "trend",
|
|
15247
|
+
"type": "string",
|
|
15248
|
+
"description": "变化量或说明。"
|
|
15249
|
+
},
|
|
15250
|
+
{
|
|
15251
|
+
"name": "trendSeverity",
|
|
15252
|
+
"type": "'primary' | 'success' | 'warn' | 'danger' | 'secondary'",
|
|
15253
|
+
"description": "趋势色。"
|
|
15254
|
+
},
|
|
15255
|
+
{
|
|
15256
|
+
"name": "icon",
|
|
15257
|
+
"type": "string",
|
|
15258
|
+
"description": "右侧图标名。"
|
|
15259
|
+
},
|
|
15260
|
+
{
|
|
15261
|
+
"name": "minHeight",
|
|
15262
|
+
"type": "number | string",
|
|
15263
|
+
"description": "最小高度。"
|
|
15264
|
+
}
|
|
15265
|
+
],
|
|
14386
15266
|
"events": [],
|
|
14387
|
-
"slots": [
|
|
15267
|
+
"slots": [
|
|
15268
|
+
{
|
|
15269
|
+
"name": "default",
|
|
15270
|
+
"description": "无 `title` 时的左侧内容。"
|
|
15271
|
+
},
|
|
15272
|
+
{
|
|
15273
|
+
"name": "actions",
|
|
15274
|
+
"description": "右侧操作。"
|
|
15275
|
+
}
|
|
15276
|
+
],
|
|
15277
|
+
"methods": [],
|
|
14388
15278
|
"examples": [
|
|
14389
15279
|
{
|
|
14390
15280
|
"id": "引入-1",
|
|
@@ -14617,6 +15507,16 @@
|
|
|
14617
15507
|
}
|
|
14618
15508
|
],
|
|
14619
15509
|
"slots": [],
|
|
15510
|
+
"methods": [
|
|
15511
|
+
{
|
|
15512
|
+
"name": "first",
|
|
15513
|
+
"description": "当前页首条记录的零基索引：`(page - 1) * rows`。"
|
|
15514
|
+
},
|
|
15515
|
+
{
|
|
15516
|
+
"name": "pageCount",
|
|
15517
|
+
"description": "总页数。"
|
|
15518
|
+
}
|
|
15519
|
+
],
|
|
14620
15520
|
"examples": [
|
|
14621
15521
|
{
|
|
14622
15522
|
"id": "引入-1",
|
|
@@ -14848,6 +15748,7 @@
|
|
|
14848
15748
|
"description": "底部区域；折叠时隐藏。"
|
|
14849
15749
|
}
|
|
14850
15750
|
],
|
|
15751
|
+
"methods": [],
|
|
14851
15752
|
"examples": [
|
|
14852
15753
|
{
|
|
14853
15754
|
"id": "引入-1",
|
|
@@ -15055,7 +15956,17 @@
|
|
|
15055
15956
|
"description": "目标列表变化。"
|
|
15056
15957
|
}
|
|
15057
15958
|
],
|
|
15058
|
-
"slots": [
|
|
15959
|
+
"slots": [
|
|
15960
|
+
{
|
|
15961
|
+
"name": "item",
|
|
15962
|
+
"description": "自定义列表项内容。"
|
|
15963
|
+
},
|
|
15964
|
+
{
|
|
15965
|
+
"name": "empty",
|
|
15966
|
+
"description": ""
|
|
15967
|
+
}
|
|
15968
|
+
],
|
|
15969
|
+
"methods": [],
|
|
15059
15970
|
"examples": [
|
|
15060
15971
|
{
|
|
15061
15972
|
"id": "引入-1",
|
|
@@ -15296,6 +16207,20 @@
|
|
|
15296
16207
|
"description": "浮层内容。"
|
|
15297
16208
|
}
|
|
15298
16209
|
],
|
|
16210
|
+
"methods": [
|
|
16211
|
+
{
|
|
16212
|
+
"name": "show",
|
|
16213
|
+
"description": "显示浮层。"
|
|
16214
|
+
},
|
|
16215
|
+
{
|
|
16216
|
+
"name": "hide",
|
|
16217
|
+
"description": "隐藏浮层。"
|
|
16218
|
+
},
|
|
16219
|
+
{
|
|
16220
|
+
"name": "toggle",
|
|
16221
|
+
"description": "切换显示状态。"
|
|
16222
|
+
}
|
|
16223
|
+
],
|
|
15299
16224
|
"examples": [
|
|
15300
16225
|
{
|
|
15301
16226
|
"id": "引入-1",
|
|
@@ -15410,13 +16335,18 @@
|
|
|
15410
16335
|
"title": "Events",
|
|
15411
16336
|
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | 可见性变化。 |\n| `show` | — | 打开时触发。 |\n| `hide` | — | 关闭后触发。 |"
|
|
15412
16337
|
},
|
|
16338
|
+
{
|
|
16339
|
+
"id": "methods",
|
|
16340
|
+
"title": "Methods",
|
|
16341
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `show()` | 显示浮层。 |\n| `hide()` | 隐藏浮层。 |\n| `toggle()` | 切换显示状态。 |"
|
|
16342
|
+
},
|
|
15413
16343
|
{
|
|
15414
16344
|
"id": "slots",
|
|
15415
16345
|
"title": "Slots",
|
|
15416
16346
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n| `content` | 浮层内容。 |"
|
|
15417
16347
|
}
|
|
15418
16348
|
],
|
|
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"
|
|
16349
|
+
"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## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `show()` | 显示浮层。 |\n| `hide()` | 隐藏浮层。 |\n| `toggle()` | 切换显示状态。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n| `content` | 浮层内容。 |\n"
|
|
15420
16350
|
},
|
|
15421
16351
|
"en-US": {
|
|
15422
16352
|
"title": "Popover",
|
|
@@ -15457,13 +16387,18 @@
|
|
|
15457
16387
|
"title": "Events",
|
|
15458
16388
|
"body": "| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Emitted when visibility changes. |\n| `show` | — | Emitted when opened. |\n| `hide` | — | Emitted after close. |"
|
|
15459
16389
|
},
|
|
16390
|
+
{
|
|
16391
|
+
"id": "methods",
|
|
16392
|
+
"title": "Methods",
|
|
16393
|
+
"body": "| Method | Description |\n| --- | --- |\n| `show()` | Show the popover. |\n| `hide()` | Hide the popover. |\n| `toggle()` | Toggle visibility. |"
|
|
16394
|
+
},
|
|
15460
16395
|
{
|
|
15461
16396
|
"id": "slots",
|
|
15462
16397
|
"title": "Slots",
|
|
15463
16398
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n| `content` | Overlay content. |"
|
|
15464
16399
|
}
|
|
15465
16400
|
],
|
|
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"
|
|
16401
|
+
"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## Methods\n\n| Method | Description |\n| --- | --- |\n| `show()` | Show the popover. |\n| `hide()` | Hide the popover. |\n| `toggle()` | Toggle visibility. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n| `content` | Overlay content. |\n"
|
|
15467
16402
|
}
|
|
15468
16403
|
}
|
|
15469
16404
|
},
|
|
@@ -15521,6 +16456,7 @@
|
|
|
15521
16456
|
],
|
|
15522
16457
|
"events": [],
|
|
15523
16458
|
"slots": [],
|
|
16459
|
+
"methods": [],
|
|
15524
16460
|
"examples": [
|
|
15525
16461
|
{
|
|
15526
16462
|
"id": "引入-1",
|
|
@@ -15729,6 +16665,7 @@
|
|
|
15729
16665
|
"description": "默认内容。"
|
|
15730
16666
|
}
|
|
15731
16667
|
],
|
|
16668
|
+
"methods": [],
|
|
15732
16669
|
"examples": [
|
|
15733
16670
|
{
|
|
15734
16671
|
"id": "引入-1",
|
|
@@ -15955,6 +16892,7 @@
|
|
|
15955
16892
|
"description": "自定义标签，优先于 `label`。"
|
|
15956
16893
|
}
|
|
15957
16894
|
],
|
|
16895
|
+
"methods": [],
|
|
15958
16896
|
"examples": [
|
|
15959
16897
|
{
|
|
15960
16898
|
"id": "引入-1",
|
|
@@ -16261,6 +17199,7 @@
|
|
|
16261
17199
|
"description": "自定义星级 `{ active }`。"
|
|
16262
17200
|
}
|
|
16263
17201
|
],
|
|
17202
|
+
"methods": [],
|
|
16264
17203
|
"examples": [
|
|
16265
17204
|
{
|
|
16266
17205
|
"id": "引入-1",
|
|
@@ -16501,6 +17440,7 @@
|
|
|
16501
17440
|
"description": "操作区。"
|
|
16502
17441
|
}
|
|
16503
17442
|
],
|
|
17443
|
+
"methods": [],
|
|
16504
17444
|
"examples": [
|
|
16505
17445
|
{
|
|
16506
17446
|
"id": "引入-1",
|
|
@@ -16728,7 +17668,146 @@
|
|
|
16728
17668
|
"description": "可换肤自定义滚动条，提供一致的滚动体验。",
|
|
16729
17669
|
"descriptionEn": "Themeable custom scrollbar for a consistent scrolling experience.",
|
|
16730
17670
|
"import": "import { MScrollbar } from 'morya-ui'",
|
|
16731
|
-
"props": [
|
|
17671
|
+
"props": [
|
|
17672
|
+
{
|
|
17673
|
+
"name": "always",
|
|
17674
|
+
"type": "boolean",
|
|
17675
|
+
"default": "false",
|
|
17676
|
+
"description": "始终显示滑块"
|
|
17677
|
+
},
|
|
17678
|
+
{
|
|
17679
|
+
"name": "ariaLabel",
|
|
17680
|
+
"type": "a11y",
|
|
17681
|
+
"default": "—",
|
|
17682
|
+
"description": "内容区无障碍属性"
|
|
17683
|
+
},
|
|
17684
|
+
{
|
|
17685
|
+
"name": "ariaOrientation",
|
|
17686
|
+
"type": "a11y",
|
|
17687
|
+
"default": "—",
|
|
17688
|
+
"description": "内容区无障碍属性"
|
|
17689
|
+
},
|
|
17690
|
+
{
|
|
17691
|
+
"name": "distance",
|
|
17692
|
+
"type": "number",
|
|
17693
|
+
"default": "0",
|
|
17694
|
+
"description": "触发 `end-reached` 的边缘距离"
|
|
17695
|
+
},
|
|
17696
|
+
{
|
|
17697
|
+
"name": "height",
|
|
17698
|
+
"type": "string | number",
|
|
17699
|
+
"default": "—",
|
|
17700
|
+
"description": "可视区域高度"
|
|
17701
|
+
},
|
|
17702
|
+
{
|
|
17703
|
+
"name": "id",
|
|
17704
|
+
"type": "a11y",
|
|
17705
|
+
"default": "—",
|
|
17706
|
+
"description": "内容区无障碍属性"
|
|
17707
|
+
},
|
|
17708
|
+
{
|
|
17709
|
+
"name": "maxHeight",
|
|
17710
|
+
"type": "string | number",
|
|
17711
|
+
"default": "—",
|
|
17712
|
+
"description": "最大高度"
|
|
17713
|
+
},
|
|
17714
|
+
{
|
|
17715
|
+
"name": "minSize",
|
|
17716
|
+
"type": "number",
|
|
17717
|
+
"default": "20",
|
|
17718
|
+
"description": "滑块最小尺寸"
|
|
17719
|
+
},
|
|
17720
|
+
{
|
|
17721
|
+
"name": "native",
|
|
17722
|
+
"type": "boolean",
|
|
17723
|
+
"default": "false",
|
|
17724
|
+
"description": "使用原生滚动条"
|
|
17725
|
+
},
|
|
17726
|
+
{
|
|
17727
|
+
"name": "noresize",
|
|
17728
|
+
"type": "boolean",
|
|
17729
|
+
"default": "false",
|
|
17730
|
+
"description": "不监听尺寸变化"
|
|
17731
|
+
},
|
|
17732
|
+
{
|
|
17733
|
+
"name": "role",
|
|
17734
|
+
"type": "a11y",
|
|
17735
|
+
"default": "—",
|
|
17736
|
+
"description": "内容区无障碍属性"
|
|
17737
|
+
},
|
|
17738
|
+
{
|
|
17739
|
+
"name": "tabindex",
|
|
17740
|
+
"type": "number | string",
|
|
17741
|
+
"default": "—",
|
|
17742
|
+
"description": "wrap 的 tabindex"
|
|
17743
|
+
},
|
|
17744
|
+
{
|
|
17745
|
+
"name": "tag",
|
|
17746
|
+
"type": "string",
|
|
17747
|
+
"default": "div",
|
|
17748
|
+
"description": "内容区标签"
|
|
17749
|
+
},
|
|
17750
|
+
{
|
|
17751
|
+
"name": "trigger",
|
|
17752
|
+
"type": "'hover' | 'none'",
|
|
17753
|
+
"default": "'hover'",
|
|
17754
|
+
"description": "`none` 常显滑块；`always` 为 true 时仍常显"
|
|
17755
|
+
},
|
|
17756
|
+
{
|
|
17757
|
+
"name": "viewClass",
|
|
17758
|
+
"type": "style / class",
|
|
17759
|
+
"default": "—",
|
|
17760
|
+
"description": "内容区样式"
|
|
17761
|
+
},
|
|
17762
|
+
{
|
|
17763
|
+
"name": "viewStyle",
|
|
17764
|
+
"type": "style / class",
|
|
17765
|
+
"default": "—",
|
|
17766
|
+
"description": "内容区样式"
|
|
17767
|
+
},
|
|
17768
|
+
{
|
|
17769
|
+
"name": "wrapClass",
|
|
17770
|
+
"type": "style / class",
|
|
17771
|
+
"default": "—",
|
|
17772
|
+
"description": "wrap 容器样式"
|
|
17773
|
+
},
|
|
17774
|
+
{
|
|
17775
|
+
"name": "wrapStyle",
|
|
17776
|
+
"type": "style / class",
|
|
17777
|
+
"default": "—",
|
|
17778
|
+
"description": "wrap 容器样式"
|
|
17779
|
+
},
|
|
17780
|
+
{
|
|
17781
|
+
"name": "width",
|
|
17782
|
+
"type": "string | number",
|
|
17783
|
+
"default": "—",
|
|
17784
|
+
"description": "可视区域宽度。"
|
|
17785
|
+
},
|
|
17786
|
+
{
|
|
17787
|
+
"name": "maxWidth",
|
|
17788
|
+
"type": "string | number",
|
|
17789
|
+
"default": "—",
|
|
17790
|
+
"description": "最大宽度。"
|
|
17791
|
+
},
|
|
17792
|
+
{
|
|
17793
|
+
"name": "ariaMultiselectable",
|
|
17794
|
+
"type": "boolean",
|
|
17795
|
+
"default": "—",
|
|
17796
|
+
"description": "内容区 `aria-multiselectable`。"
|
|
17797
|
+
},
|
|
17798
|
+
{
|
|
17799
|
+
"name": "pt",
|
|
17800
|
+
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
17801
|
+
"default": "—",
|
|
17802
|
+
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
17803
|
+
},
|
|
17804
|
+
{
|
|
17805
|
+
"name": "fitContent",
|
|
17806
|
+
"type": "boolean",
|
|
17807
|
+
"default": "false",
|
|
17808
|
+
"description": "随内容增高，配合根节点 CSS `max-height` 使用（下拉面板）"
|
|
17809
|
+
}
|
|
17810
|
+
],
|
|
16732
17811
|
"events": [
|
|
16733
17812
|
{
|
|
16734
17813
|
"name": "scroll",
|
|
@@ -16743,8 +17822,34 @@
|
|
|
16743
17822
|
],
|
|
16744
17823
|
"slots": [
|
|
16745
17824
|
{
|
|
16746
|
-
"name": "default",
|
|
16747
|
-
"description": "可滚动内容。"
|
|
17825
|
+
"name": "default",
|
|
17826
|
+
"description": "可滚动内容。"
|
|
17827
|
+
}
|
|
17828
|
+
],
|
|
17829
|
+
"methods": [
|
|
17830
|
+
{
|
|
17831
|
+
"name": "wrapRef",
|
|
17832
|
+
"description": "wrap 容器元素引用。"
|
|
17833
|
+
},
|
|
17834
|
+
{
|
|
17835
|
+
"name": "update",
|
|
17836
|
+
"description": "重新计算滑块尺寸与位置。"
|
|
17837
|
+
},
|
|
17838
|
+
{
|
|
17839
|
+
"name": "scrollTo",
|
|
17840
|
+
"description": "滚动到指定位置（同原生 `scrollTo`）。"
|
|
17841
|
+
},
|
|
17842
|
+
{
|
|
17843
|
+
"name": "setScrollTop",
|
|
17844
|
+
"description": "设置纵向滚动位置。"
|
|
17845
|
+
},
|
|
17846
|
+
{
|
|
17847
|
+
"name": "setScrollLeft",
|
|
17848
|
+
"description": "设置横向滚动位置。"
|
|
17849
|
+
},
|
|
17850
|
+
{
|
|
17851
|
+
"name": "handleScroll",
|
|
17852
|
+
"description": "wrap 的 scroll 事件处理，可手动转发。"
|
|
16748
17853
|
}
|
|
16749
17854
|
],
|
|
16750
17855
|
"examples": [
|
|
@@ -16941,7 +18046,7 @@
|
|
|
16941
18046
|
{
|
|
16942
18047
|
"id": "api",
|
|
16943
18048
|
"title": "API",
|
|
16944
|
-
"body": "### 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
|
|
18049
|
+
"body": "### 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| `width` | `string \\| number` | — | 可视区域宽度。 |\n| `maxWidth` | `string \\| number` | — | 最大宽度。 |\n| `ariaMultiselectable` | `boolean` | — | 内容区 `aria-multiselectable`。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\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| 方法 / 属性 | 说明 |\n| --- | --- |\n| `wrapRef` | wrap 容器元素引用。 |\n| `update()` | 重新计算滑块尺寸与位置。 |\n| `scrollTo(...)` | 滚动到指定位置（同原生 `scrollTo`）。 |\n| `setScrollTop(y)` | 设置纵向滚动位置。 |\n| `setScrollLeft(x)` | 设置横向滚动位置。 |\n| `handleScroll(event)` | wrap 的 scroll 事件处理，可手动转发。 |"
|
|
16945
18050
|
},
|
|
16946
18051
|
{
|
|
16947
18052
|
"id": "events",
|
|
@@ -16959,7 +18064,7 @@
|
|
|
16959
18064
|
"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```"
|
|
16960
18065
|
}
|
|
16961
18066
|
],
|
|
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
|
|
18067
|
+
"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| `width` | `string \\| number` | — | 可视区域宽度。 |\n| `maxWidth` | `string \\| number` | — | 最大宽度。 |\n| `ariaMultiselectable` | `boolean` | — | 内容区 `aria-multiselectable`。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\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| 方法 / 属性 | 说明 |\n| --- | --- |\n| `wrapRef` | wrap 容器元素引用。 |\n| `update()` | 重新计算滑块尺寸与位置。 |\n| `scrollTo(...)` | 滚动到指定位置（同原生 `scrollTo`）。 |\n| `setScrollTop(y)` | 设置纵向滚动位置。 |\n| `setScrollLeft(x)` | 设置横向滚动位置。 |\n| `handleScroll(event)` | wrap 的 scroll 事件处理，可手动转发。 |\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"
|
|
16963
18068
|
},
|
|
16964
18069
|
"en-US": {
|
|
16965
18070
|
"title": "Scrollbar",
|
|
@@ -17008,7 +18113,7 @@
|
|
|
17008
18113
|
{
|
|
17009
18114
|
"id": "api",
|
|
17010
18115
|
"title": "API",
|
|
17011
|
-
"body": "### 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
|
|
18116
|
+
"body": "### 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| width | `string \\| number` | — | Viewport width |\n| maxWidth | `string \\| number` | — | Maximum width |\n| ariaMultiselectable | `boolean` | — | `aria-multiselectable` on the content area |\n| pt | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n### Events\n\n| Name | Payload |\n| --- | --- |\n| scroll | `{ scrollTop, scrollLeft }` |\n| end-reached | `'top' \\| 'bottom' \\| 'left' \\| 'right'` |\n\n### Expose\n\n| Method / Property | Description |\n| --- | --- |\n| `wrapRef` | Reference to the wrap element. |\n| `update()` | Recompute thumb size and position. |\n| `scrollTo(...)` | Scroll to a position (same as native `scrollTo`). |\n| `setScrollTop(y)` | Set vertical scroll offset. |\n| `setScrollLeft(x)` | Set horizontal scroll offset. |\n| `handleScroll(event)` | Wrap scroll handler; forward manually when needed. |"
|
|
17012
18117
|
},
|
|
17013
18118
|
{
|
|
17014
18119
|
"id": "events",
|
|
@@ -17021,7 +18126,7 @@
|
|
|
17021
18126
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Scrollable content. |"
|
|
17022
18127
|
}
|
|
17023
18128
|
],
|
|
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
|
|
18129
|
+
"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| width | `string \\| number` | — | Viewport width |\n| maxWidth | `string \\| number` | — | Maximum width |\n| ariaMultiselectable | `boolean` | — | `aria-multiselectable` on the content area |\n| pt | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n### Events\n\n| Name | Payload |\n| --- | --- |\n| scroll | `{ scrollTop, scrollLeft }` |\n| end-reached | `'top' \\| 'bottom' \\| 'left' \\| 'right'` |\n\n### Expose\n\n| Method / Property | Description |\n| --- | --- |\n| `wrapRef` | Reference to the wrap element. |\n| `update()` | Recompute thumb size and position. |\n| `scrollTo(...)` | Scroll to a position (same as native `scrollTo`). |\n| `setScrollTop(y)` | Set vertical scroll offset. |\n| `setScrollLeft(x)` | Set horizontal scroll offset. |\n| `handleScroll(event)` | Wrap scroll handler; forward manually when needed. |\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"
|
|
17025
18130
|
}
|
|
17026
18131
|
}
|
|
17027
18132
|
},
|
|
@@ -17084,6 +18189,7 @@
|
|
|
17084
18189
|
"description": "默认内容。"
|
|
17085
18190
|
}
|
|
17086
18191
|
],
|
|
18192
|
+
"methods": [],
|
|
17087
18193
|
"examples": [
|
|
17088
18194
|
{
|
|
17089
18195
|
"id": "引入-1",
|
|
@@ -17226,9 +18332,9 @@
|
|
|
17226
18332
|
},
|
|
17227
18333
|
{
|
|
17228
18334
|
"name": "options",
|
|
17229
|
-
"type": "[SelectOption](/docs/types#SelectOption)`[]",
|
|
18335
|
+
"type": "Array<`[SelectOption](/docs/types#SelectOption)` | `[SelectOptionGroup](/docs/types#SelectOptionGroup)`>",
|
|
17230
18336
|
"default": "—",
|
|
17231
|
-
"description": "
|
|
18337
|
+
"description": "选项列表；可混入 `{ label, items }` 分组。"
|
|
17232
18338
|
},
|
|
17233
18339
|
{
|
|
17234
18340
|
"name": "label",
|
|
@@ -17432,8 +18538,17 @@
|
|
|
17432
18538
|
{
|
|
17433
18539
|
"name": "option",
|
|
17434
18540
|
"description": "选项 `{ option }`。"
|
|
18541
|
+
},
|
|
18542
|
+
{
|
|
18543
|
+
"name": "header",
|
|
18544
|
+
"description": "浮窗列表上方的自定义内容。"
|
|
18545
|
+
},
|
|
18546
|
+
{
|
|
18547
|
+
"name": "footer",
|
|
18548
|
+
"description": "浮窗列表下方的自定义内容。"
|
|
17435
18549
|
}
|
|
17436
18550
|
],
|
|
18551
|
+
"methods": [],
|
|
17437
18552
|
"examples": [
|
|
17438
18553
|
{
|
|
17439
18554
|
"id": "引入-1",
|
|
@@ -17516,6 +18631,24 @@
|
|
|
17516
18631
|
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<Array<string | number>>([])\nconst options = [\n { label: 'Vue', value: 'vue' },\n { label: 'React', value: 'react' },\n]\n</script>\n\n<template>\n <MSelect v-model=\"value\" :options=\"options\" multiple filter tag placeholder=\"Add a stack\" />\n</template>",
|
|
17517
18632
|
"locale": "zh-CN"
|
|
17518
18633
|
},
|
|
18634
|
+
{
|
|
18635
|
+
"id": "group-1",
|
|
18636
|
+
"section": "Group",
|
|
18637
|
+
"sectionId": "group",
|
|
18638
|
+
"lang": "vue",
|
|
18639
|
+
"preview": true,
|
|
18640
|
+
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | number | undefined>()\nconst options = [\n {\n label: 'Fruit',\n items: [\n { label: 'Apple', value: 'apple' },\n { label: 'Banana', value: 'banana' },\n ],\n },\n {\n label: 'Vegetable',\n items: [\n { label: 'Carrot', value: 'carrot' },\n { label: 'Broccoli', value: 'broccoli' },\n ],\n },\n { label: 'Ungrouped', value: 'other' },\n]\n</script>\n\n<template>\n <MSelect v-model=\"value\" label=\"Food\" :options=\"options\" filter placeholder=\"Choose food\" />\n</template>",
|
|
18641
|
+
"locale": "zh-CN"
|
|
18642
|
+
},
|
|
18643
|
+
{
|
|
18644
|
+
"id": "header-footer-1",
|
|
18645
|
+
"section": "Header / Footer",
|
|
18646
|
+
"sectionId": "header-footer",
|
|
18647
|
+
"lang": "vue",
|
|
18648
|
+
"preview": true,
|
|
18649
|
+
"code": "<script setup lang=\"ts\">\nimport { MButton, MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | number | undefined>()\nconst options = [\n { label: 'Design', value: 'design' },\n { label: 'Development', value: 'dev' },\n { label: 'Marketing', value: 'mkt' },\n]\n</script>\n\n<template>\n <MSelect v-model=\"value\" label=\"Team\" :options=\"options\" placeholder=\"Choose a team\">\n <template #header>\n <span style=\"color: var(--m-color-text-muted); font-size: var(--m-font-size-xs)\">\n Teams you belong to\n </span>\n </template>\n <template #footer>\n <MButton label=\"Manage teams\" variant=\"text\" size=\"sm\" />\n </template>\n </MSelect>\n</template>",
|
|
18650
|
+
"locale": "zh-CN"
|
|
18651
|
+
},
|
|
17519
18652
|
{
|
|
17520
18653
|
"id": "remote-1",
|
|
17521
18654
|
"section": "Remote",
|
|
@@ -17552,6 +18685,15 @@
|
|
|
17552
18685
|
"code": "interface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}",
|
|
17553
18686
|
"locale": "zh-CN"
|
|
17554
18687
|
},
|
|
18688
|
+
{
|
|
18689
|
+
"id": "类型-2",
|
|
18690
|
+
"section": "类型",
|
|
18691
|
+
"sectionId": "类型",
|
|
18692
|
+
"lang": "ts",
|
|
18693
|
+
"preview": false,
|
|
18694
|
+
"code": "interface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}",
|
|
18695
|
+
"locale": "zh-CN"
|
|
18696
|
+
},
|
|
17555
18697
|
{
|
|
17556
18698
|
"id": "import-1",
|
|
17557
18699
|
"section": "Import",
|
|
@@ -17633,6 +18775,24 @@
|
|
|
17633
18775
|
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<Array<string | number>>([])\nconst options = [\n { label: 'Vue', value: 'vue' },\n { label: 'React', value: 'react' },\n]\n</script>\n\n<template>\n <MSelect v-model=\"value\" :options=\"options\" multiple filter tag placeholder=\"Add a stack\" />\n</template>",
|
|
17634
18776
|
"locale": "en-US"
|
|
17635
18777
|
},
|
|
18778
|
+
{
|
|
18779
|
+
"id": "group-1",
|
|
18780
|
+
"section": "Group",
|
|
18781
|
+
"sectionId": "group",
|
|
18782
|
+
"lang": "vue",
|
|
18783
|
+
"preview": true,
|
|
18784
|
+
"code": "<script setup lang=\"ts\">\nimport { MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | number | undefined>()\nconst options = [\n {\n label: 'Fruit',\n items: [\n { label: 'Apple', value: 'apple' },\n { label: 'Banana', value: 'banana' },\n ],\n },\n {\n label: 'Vegetable',\n items: [\n { label: 'Carrot', value: 'carrot' },\n { label: 'Broccoli', value: 'broccoli' },\n ],\n },\n { label: 'Ungrouped', value: 'other' },\n]\n</script>\n\n<template>\n <MSelect v-model=\"value\" label=\"Food\" :options=\"options\" filter placeholder=\"Choose food\" />\n</template>",
|
|
18785
|
+
"locale": "en-US"
|
|
18786
|
+
},
|
|
18787
|
+
{
|
|
18788
|
+
"id": "header-footer-1",
|
|
18789
|
+
"section": "Header / Footer",
|
|
18790
|
+
"sectionId": "header-footer",
|
|
18791
|
+
"lang": "vue",
|
|
18792
|
+
"preview": true,
|
|
18793
|
+
"code": "<script setup lang=\"ts\">\nimport { MButton, MSelect } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | number | undefined>()\nconst options = [\n { label: 'Design', value: 'design' },\n { label: 'Development', value: 'dev' },\n { label: 'Marketing', value: 'mkt' },\n]\n</script>\n\n<template>\n <MSelect v-model=\"value\" label=\"Team\" :options=\"options\" placeholder=\"Choose a team\">\n <template #header>\n <span style=\"color: var(--m-color-text-muted); font-size: var(--m-font-size-xs)\">\n Teams you belong to\n </span>\n </template>\n <template #footer>\n <MButton label=\"Manage teams\" variant=\"text\" size=\"sm\" />\n </template>\n </MSelect>\n</template>",
|
|
18794
|
+
"locale": "en-US"
|
|
18795
|
+
},
|
|
17636
18796
|
{
|
|
17637
18797
|
"id": "remote-1",
|
|
17638
18798
|
"section": "Remote",
|
|
@@ -17668,6 +18828,15 @@
|
|
|
17668
18828
|
"preview": false,
|
|
17669
18829
|
"code": "interface SelectOption {\n label: string\n value: string | number\n disabled?: boolean\n}",
|
|
17670
18830
|
"locale": "en-US"
|
|
18831
|
+
},
|
|
18832
|
+
{
|
|
18833
|
+
"id": "types-2",
|
|
18834
|
+
"section": "Types",
|
|
18835
|
+
"sectionId": "types",
|
|
18836
|
+
"lang": "ts",
|
|
18837
|
+
"preview": false,
|
|
18838
|
+
"code": "interface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}",
|
|
18839
|
+
"locale": "en-US"
|
|
17671
18840
|
}
|
|
17672
18841
|
],
|
|
17673
18842
|
"locales": {
|
|
@@ -17725,6 +18894,16 @@
|
|
|
17725
18894
|
"title": "Tag",
|
|
17726
18895
|
"body": "`tag` + `filter` 允许用当前筛选词创建选项（回车或点击「创建」行）。虚拟列表本批不做。\n\n```vue preview src=\"./demos/Tag.vue\"\n```"
|
|
17727
18896
|
},
|
|
18897
|
+
{
|
|
18898
|
+
"id": "group",
|
|
18899
|
+
"title": "Group",
|
|
18900
|
+
"body": "`options` 可混入 `{ label, items }` 分组（[SelectOptionGroup](/docs/types#SelectOptionGroup)），菜单显示分组标题行；分组本身不可选，`filter` 会按组内选项过滤并隐藏空组。\n\n```vue preview src=\"./demos/Group.vue\"\n```"
|
|
18901
|
+
},
|
|
18902
|
+
{
|
|
18903
|
+
"id": "header-footer",
|
|
18904
|
+
"title": "Header / Footer",
|
|
18905
|
+
"body": "`header` / `footer` 插槽在浮窗列表的上方 / 下方渲染自定义内容（如说明文字、「新建」入口），不随选项列表滚动。\n\n```vue preview src=\"./demos/HeaderFooter.vue\"\n```"
|
|
18906
|
+
},
|
|
17728
18907
|
{
|
|
17729
18908
|
"id": "remote",
|
|
17730
18909
|
"title": "Remote",
|
|
@@ -17748,7 +18927,7 @@
|
|
|
17748
18927
|
{
|
|
17749
18928
|
"id": "props",
|
|
17750
18929
|
"title": "Props",
|
|
17751
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | 选中值；`multiple` 时为数组。 |\n| `options` | [SelectOption](/docs/types#SelectOption)`[]
|
|
18930
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | 选中值；`multiple` 时为数组。 |\n| `options` | `Array<`[SelectOption](/docs/types#SelectOption)` \\| `[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | — | 选项列表；可混入 `{ label, items }` 分组。 |\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 时开启。 |"
|
|
17752
18931
|
},
|
|
17753
18932
|
{
|
|
17754
18933
|
"id": "events",
|
|
@@ -17758,15 +18937,15 @@
|
|
|
17758
18937
|
{
|
|
17759
18938
|
"id": "slots",
|
|
17760
18939
|
"title": "Slots",
|
|
17761
|
-
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `value` | 自定义触发器展示（单选）。 |\n| `option` | 选项 `{ option }`。 |"
|
|
18940
|
+
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `value` | 自定义触发器展示（单选）。 |\n| `option` | 选项 `{ option }`。 |\n| `header` | 浮窗列表上方的自定义内容。 |\n| `footer` | 浮窗列表下方的自定义内容。 |"
|
|
17762
18941
|
},
|
|
17763
18942
|
{
|
|
17764
18943
|
"id": "类型",
|
|
17765
18944
|
"title": "类型",
|
|
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)。"
|
|
18945
|
+
"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=\"SelectOptionGroup\">SelectOptionGroup</h4>\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\n单选为 `string | number`；`multiple` 时为 `(string | number)[]`。详见 [API 类型](/docs/types#SelectModelValue)。"
|
|
17767
18946
|
}
|
|
17768
18947
|
],
|
|
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)`[]
|
|
18948
|
+
"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## Group\n\n`options` 可混入 `{ label, items }` 分组（[SelectOptionGroup](/docs/types#SelectOptionGroup)），菜单显示分组标题行；分组本身不可选，`filter` 会按组内选项过滤并隐藏空组。\n\n```vue preview src=\"./demos/Group.vue\"\n```\n\n## Header / Footer\n\n`header` / `footer` 插槽在浮窗列表的上方 / 下方渲染自定义内容（如说明文字、「新建」入口），不随选项列表滚动。\n\n```vue preview src=\"./demos/HeaderFooter.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` | `Array<`[SelectOption](/docs/types#SelectOption)` \\| `[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | — | 选项列表；可混入 `{ label, items }` 分组。 |\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| `header` | 浮窗列表上方的自定义内容。 |\n| `footer` | 浮窗列表下方的自定义内容。 |\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=\"SelectOptionGroup\">SelectOptionGroup</h4>\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\n单选为 `string | number`；`multiple` 时为 `(string | number)[]`。详见 [API 类型](/docs/types#SelectModelValue)。\n"
|
|
17770
18949
|
},
|
|
17771
18950
|
"en-US": {
|
|
17772
18951
|
"title": "Select",
|
|
@@ -17822,6 +19001,16 @@
|
|
|
17822
19001
|
"title": "Tag",
|
|
17823
19002
|
"body": "`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```"
|
|
17824
19003
|
},
|
|
19004
|
+
{
|
|
19005
|
+
"id": "group",
|
|
19006
|
+
"title": "Group",
|
|
19007
|
+
"body": "`options` can mix in `{ label, items }` groups ([SelectOptionGroup](/docs/types#SelectOptionGroup)) to render group header rows. Groups are not selectable; `filter` narrows items within each group and hides empty groups.\n\n```vue preview src=\"./demos/Group.vue\"\n```"
|
|
19008
|
+
},
|
|
19009
|
+
{
|
|
19010
|
+
"id": "header-footer",
|
|
19011
|
+
"title": "Header / Footer",
|
|
19012
|
+
"body": "The `header` / `footer` slots render custom content above / below the option list in the popup (e.g. hints or a \"create\" action) and do not scroll with the options.\n\n```vue preview src=\"./demos/HeaderFooter.vue\"\n```"
|
|
19013
|
+
},
|
|
17825
19014
|
{
|
|
17826
19015
|
"id": "remote",
|
|
17827
19016
|
"title": "Remote",
|
|
@@ -17845,7 +19034,7 @@
|
|
|
17845
19034
|
{
|
|
17846
19035
|
"id": "props",
|
|
17847
19036
|
"title": "Props",
|
|
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)`[]
|
|
19037
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string \\| number \\| Array<string \\| number>` | — | Selected value; an array when `multiple`. |\n| `options` | `Array<`[SelectOption](/docs/types#SelectOption)` \\| `[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | — | Options list; may mix in `{ label, items }` groups. |\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`, …). |"
|
|
17849
19038
|
},
|
|
17850
19039
|
{
|
|
17851
19040
|
"id": "events",
|
|
@@ -17855,15 +19044,15 @@
|
|
|
17855
19044
|
{
|
|
17856
19045
|
"id": "slots",
|
|
17857
19046
|
"title": "Slots",
|
|
17858
|
-
"body": "| Slot | Description |\n| --- | --- |\n| `value` | Custom single-select trigger display. |\n| `option` | Option `{ option }`. |"
|
|
19047
|
+
"body": "| Slot | Description |\n| --- | --- |\n| `value` | Custom single-select trigger display. |\n| `option` | Option `{ option }`. |\n| `header` | Custom content above the option list in the popup. |\n| `footer` | Custom content below the option list in the popup. |"
|
|
17859
19048
|
},
|
|
17860
19049
|
{
|
|
17861
19050
|
"id": "types",
|
|
17862
19051
|
"title": "Types",
|
|
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)."
|
|
19052
|
+
"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=\"SelectOptionGroup\">SelectOptionGroup</h4>\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\nScalar when single-select; array when `multiple`. See [API types](/docs/types#SelectModelValue)."
|
|
17864
19053
|
}
|
|
17865
19054
|
],
|
|
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)`[]
|
|
19055
|
+
"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## Group\n\n`options` can mix in `{ label, items }` groups ([SelectOptionGroup](/docs/types#SelectOptionGroup)) to render group header rows. Groups are not selectable; `filter` narrows items within each group and hides empty groups.\n\n```vue preview src=\"./demos/Group.vue\"\n```\n\n## Header / Footer\n\nThe `header` / `footer` slots render custom content above / below the option list in the popup (e.g. hints or a \"create\" action) and do not scroll with the options.\n\n```vue preview src=\"./demos/HeaderFooter.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` | `Array<`[SelectOption](/docs/types#SelectOption)` \\| `[SelectOptionGroup](/docs/types#SelectOptionGroup)`>` | — | Options list; may mix in `{ label, items }` groups. |\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| `header` | Custom content above the option list in the popup. |\n| `footer` | Custom content below the option list in the popup. |\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=\"SelectOptionGroup\">SelectOptionGroup</h4>\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\n}\n```\n\n<h4 id=\"SelectModelValue\">SelectModelValue</h4>\n\nScalar when single-select; array when `multiple`. See [API types](/docs/types#SelectModelValue).\n"
|
|
17867
19056
|
}
|
|
17868
19057
|
}
|
|
17869
19058
|
},
|
|
@@ -17933,6 +19122,7 @@
|
|
|
17933
19122
|
}
|
|
17934
19123
|
],
|
|
17935
19124
|
"slots": [],
|
|
19125
|
+
"methods": [],
|
|
17936
19126
|
"examples": [
|
|
17937
19127
|
{
|
|
17938
19128
|
"id": "引入-1",
|
|
@@ -18111,6 +19301,7 @@
|
|
|
18111
19301
|
"description": "侧栏内容。"
|
|
18112
19302
|
}
|
|
18113
19303
|
],
|
|
19304
|
+
"methods": [],
|
|
18114
19305
|
"examples": [
|
|
18115
19306
|
{
|
|
18116
19307
|
"id": "引入-1",
|
|
@@ -18314,6 +19505,7 @@
|
|
|
18314
19505
|
],
|
|
18315
19506
|
"events": [],
|
|
18316
19507
|
"slots": [],
|
|
19508
|
+
"methods": [],
|
|
18317
19509
|
"examples": [
|
|
18318
19510
|
{
|
|
18319
19511
|
"id": "引入-1",
|
|
@@ -18627,6 +19819,7 @@
|
|
|
18627
19819
|
}
|
|
18628
19820
|
],
|
|
18629
19821
|
"slots": [],
|
|
19822
|
+
"methods": [],
|
|
18630
19823
|
"examples": [
|
|
18631
19824
|
{
|
|
18632
19825
|
"id": "引入-1",
|
|
@@ -18881,6 +20074,7 @@
|
|
|
18881
20074
|
"description": "间距子项。"
|
|
18882
20075
|
}
|
|
18883
20076
|
],
|
|
20077
|
+
"methods": [],
|
|
18884
20078
|
"examples": [
|
|
18885
20079
|
{
|
|
18886
20080
|
"id": "引入-1",
|
|
@@ -19170,6 +20364,7 @@
|
|
|
19170
20364
|
"description": "自定义 `icon` 内容。"
|
|
19171
20365
|
}
|
|
19172
20366
|
],
|
|
20367
|
+
"methods": [],
|
|
19173
20368
|
"examples": [
|
|
19174
20369
|
{
|
|
19175
20370
|
"id": "引入-1",
|
|
@@ -19407,6 +20602,7 @@
|
|
|
19407
20602
|
"description": "主按钮内容。"
|
|
19408
20603
|
}
|
|
19409
20604
|
],
|
|
20605
|
+
"methods": [],
|
|
19410
20606
|
"examples": [
|
|
19411
20607
|
{
|
|
19412
20608
|
"id": "引入-1",
|
|
@@ -19679,6 +20875,7 @@
|
|
|
19679
20875
|
"description": "未使用命名插槽时取前两个子节点。"
|
|
19680
20876
|
}
|
|
19681
20877
|
],
|
|
20878
|
+
"methods": [],
|
|
19682
20879
|
"examples": [
|
|
19683
20880
|
{
|
|
19684
20881
|
"id": "引入-1",
|
|
@@ -19975,6 +21172,7 @@
|
|
|
19975
21172
|
"description": "自定义前导图标。"
|
|
19976
21173
|
}
|
|
19977
21174
|
],
|
|
21175
|
+
"methods": [],
|
|
19978
21176
|
"examples": [
|
|
19979
21177
|
{
|
|
19980
21178
|
"id": "引入-1",
|
|
@@ -20247,6 +21445,7 @@
|
|
|
20247
21445
|
"description": "默认内容。"
|
|
20248
21446
|
}
|
|
20249
21447
|
],
|
|
21448
|
+
"methods": [],
|
|
20250
21449
|
"examples": [
|
|
20251
21450
|
{
|
|
20252
21451
|
"id": "引入-1",
|
|
@@ -20497,6 +21696,7 @@
|
|
|
20497
21696
|
"description": "自定义标签，优先于 `label`。"
|
|
20498
21697
|
}
|
|
20499
21698
|
],
|
|
21699
|
+
"methods": [],
|
|
20500
21700
|
"examples": [
|
|
20501
21701
|
{
|
|
20502
21702
|
"id": "引入-1",
|
|
@@ -21193,7 +22393,114 @@
|
|
|
21193
22393
|
"description": "—"
|
|
21194
22394
|
}
|
|
21195
22395
|
],
|
|
21196
|
-
"slots": [
|
|
22396
|
+
"slots": [
|
|
22397
|
+
{
|
|
22398
|
+
"name": "cell-{key}",
|
|
22399
|
+
"description": "列 `{key}` 单元格，作用域 `{ row, value, column }`。"
|
|
22400
|
+
},
|
|
22401
|
+
{
|
|
22402
|
+
"name": "body-cell",
|
|
22403
|
+
"description": "任意单元格，作用域 `{ row, column, value }`。"
|
|
22404
|
+
},
|
|
22405
|
+
{
|
|
22406
|
+
"name": "expansion",
|
|
22407
|
+
"description": "展开行内容，作用域 `{ row }`。"
|
|
22408
|
+
},
|
|
22409
|
+
{
|
|
22410
|
+
"name": "empty",
|
|
22411
|
+
"description": "自定义空态。"
|
|
22412
|
+
},
|
|
22413
|
+
{
|
|
22414
|
+
"name": "loading",
|
|
22415
|
+
"description": "自定义加载态。"
|
|
22416
|
+
},
|
|
22417
|
+
{
|
|
22418
|
+
"name": "pagination",
|
|
22419
|
+
"description": "自定义分页区域。"
|
|
22420
|
+
},
|
|
22421
|
+
{
|
|
22422
|
+
"name": "body",
|
|
22423
|
+
"description": "自定义 `body` 内容。"
|
|
22424
|
+
},
|
|
22425
|
+
{
|
|
22426
|
+
"name": "body-append",
|
|
22427
|
+
"description": "自定义 `body-append` 内容。"
|
|
22428
|
+
},
|
|
22429
|
+
{
|
|
22430
|
+
"name": "body-prepend",
|
|
22431
|
+
"description": "自定义 `body-prepend` 内容。"
|
|
22432
|
+
},
|
|
22433
|
+
{
|
|
22434
|
+
"name": "customize-headers",
|
|
22435
|
+
"description": "自定义 `customize-headers` 内容。"
|
|
22436
|
+
},
|
|
22437
|
+
{
|
|
22438
|
+
"name": "header",
|
|
22439
|
+
"description": "自定义 `header` 内容。"
|
|
22440
|
+
},
|
|
22441
|
+
{
|
|
22442
|
+
"name": "header-*",
|
|
22443
|
+
"description": "动态插槽（前缀 `header-`）。"
|
|
22444
|
+
}
|
|
22445
|
+
],
|
|
22446
|
+
"methods": [
|
|
22447
|
+
{
|
|
22448
|
+
"name": "currentPageFirstIndex",
|
|
22449
|
+
"description": "当前页首条记录的索引（无数据时为 `-1`）。"
|
|
22450
|
+
},
|
|
22451
|
+
{
|
|
22452
|
+
"name": "currentPageLastIndex",
|
|
22453
|
+
"description": "当前页末条记录的索引。"
|
|
22454
|
+
},
|
|
22455
|
+
{
|
|
22456
|
+
"name": "clientItemsLength",
|
|
22457
|
+
"description": "数据总条数（服务端模式下为服务端总数）。"
|
|
22458
|
+
},
|
|
22459
|
+
{
|
|
22460
|
+
"name": "maxPaginationNumber",
|
|
22461
|
+
"description": "最大页码。"
|
|
22462
|
+
},
|
|
22463
|
+
{
|
|
22464
|
+
"name": "currentPaginationNumber",
|
|
22465
|
+
"description": "当前页码。"
|
|
22466
|
+
},
|
|
22467
|
+
{
|
|
22468
|
+
"name": "isLastPage",
|
|
22469
|
+
"description": "是否末页 / 首页。"
|
|
22470
|
+
},
|
|
22471
|
+
{
|
|
22472
|
+
"name": "isFirstPage",
|
|
22473
|
+
"description": "是否末页 / 首页。"
|
|
22474
|
+
},
|
|
22475
|
+
{
|
|
22476
|
+
"name": "nextPage",
|
|
22477
|
+
"description": "下一页 / 上一页。"
|
|
22478
|
+
},
|
|
22479
|
+
{
|
|
22480
|
+
"name": "prevPage",
|
|
22481
|
+
"description": "下一页 / 上一页。"
|
|
22482
|
+
},
|
|
22483
|
+
{
|
|
22484
|
+
"name": "updatePage",
|
|
22485
|
+
"description": "跳到指定页码。"
|
|
22486
|
+
},
|
|
22487
|
+
{
|
|
22488
|
+
"name": "rowsPerPageOptions",
|
|
22489
|
+
"description": "每页条数选项。"
|
|
22490
|
+
},
|
|
22491
|
+
{
|
|
22492
|
+
"name": "rowsPerPageActiveOption",
|
|
22493
|
+
"description": "当前生效的每页条数。"
|
|
22494
|
+
},
|
|
22495
|
+
{
|
|
22496
|
+
"name": "updateRowsPerPageActiveOption",
|
|
22497
|
+
"description": "修改每页条数。"
|
|
22498
|
+
},
|
|
22499
|
+
{
|
|
22500
|
+
"name": "setFilters",
|
|
22501
|
+
"description": "程序化设置筛选条件。"
|
|
22502
|
+
}
|
|
22503
|
+
],
|
|
21197
22504
|
"examples": [
|
|
21198
22505
|
{
|
|
21199
22506
|
"id": "引入-1",
|
|
@@ -21503,7 +22810,7 @@
|
|
|
21503
22810
|
{
|
|
21504
22811
|
"id": "实例方法",
|
|
21505
22812
|
"title": "实例方法",
|
|
21506
|
-
"body": "通过 `ref`
|
|
22813
|
+
"body": "通过 `ref` 可访问以下分页与筛选控制：\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `currentPageFirstIndex` | 当前页首条记录的索引（无数据时为 `-1`）。 |\n| `currentPageLastIndex` | 当前页末条记录的索引。 |\n| `clientItemsLength` | 数据总条数（服务端模式下为服务端总数）。 |\n| `maxPaginationNumber` | 最大页码。 |\n| `currentPaginationNumber` | 当前页码。 |\n| `isLastPage` / `isFirstPage` | 是否末页 / 首页。 |\n| `nextPage()` / `prevPage()` | 下一页 / 上一页。 |\n| `updatePage(page)` | 跳到指定页码。 |\n| `rowsPerPageOptions` | 每页条数选项。 |\n| `rowsPerPageActiveOption` | 当前生效的每页条数。 |\n| `updateRowsPerPageActiveOption(n)` | 修改每页条数。 |\n| `setFilters(filters)` | 程序化设置筛选条件。 |"
|
|
21507
22814
|
},
|
|
21508
22815
|
{
|
|
21509
22816
|
"id": "类型",
|
|
@@ -21511,7 +22818,7 @@
|
|
|
21511
22818
|
"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)。"
|
|
21512
22819
|
}
|
|
21513
22820
|
],
|
|
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`
|
|
22821
|
+
"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` 可访问以下分页与筛选控制：\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `currentPageFirstIndex` | 当前页首条记录的索引（无数据时为 `-1`）。 |\n| `currentPageLastIndex` | 当前页末条记录的索引。 |\n| `clientItemsLength` | 数据总条数（服务端模式下为服务端总数）。 |\n| `maxPaginationNumber` | 最大页码。 |\n| `currentPaginationNumber` | 当前页码。 |\n| `isLastPage` / `isFirstPage` | 是否末页 / 首页。 |\n| `nextPage()` / `prevPage()` | 下一页 / 上一页。 |\n| `updatePage(page)` | 跳到指定页码。 |\n| `rowsPerPageOptions` | 每页条数选项。 |\n| `rowsPerPageActiveOption` | 当前生效的每页条数。 |\n| `updateRowsPerPageActiveOption(n)` | 修改每页条数。 |\n| `setFilters(filters)` | 程序化设置筛选条件。 |\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"
|
|
21515
22822
|
},
|
|
21516
22823
|
"en-US": {
|
|
21517
22824
|
"title": "Table",
|
|
@@ -21575,7 +22882,7 @@
|
|
|
21575
22882
|
{
|
|
21576
22883
|
"id": "instance",
|
|
21577
22884
|
"title": "Instance",
|
|
21578
|
-
"body": "
|
|
22885
|
+
"body": "Pagination and filter controls exposed via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` when empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total item count (server total in server mode). |\n| `maxPaginationNumber` | Last page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether the current page is the last / first. |\n| `nextPage()` / `prevPage()` | Go to the next / previous page. |\n| `updatePage(page)` | Jump to a page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Active rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Change rows per page. |\n| `setFilters(filters)` | Set filters programmatically. |"
|
|
21579
22886
|
},
|
|
21580
22887
|
{
|
|
21581
22888
|
"id": "types",
|
|
@@ -21583,7 +22890,7 @@
|
|
|
21583
22890
|
"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)."
|
|
21584
22891
|
}
|
|
21585
22892
|
],
|
|
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\
|
|
22893
|
+
"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\nPagination and filter controls exposed via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` when empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total item count (server total in server mode). |\n| `maxPaginationNumber` | Last page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether the current page is the last / first. |\n| `nextPage()` / `prevPage()` | Go to the next / previous page. |\n| `updatePage(page)` | Jump to a page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Active rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Change rows per page. |\n| `setFilters(filters)` | Set filters programmatically. |\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"
|
|
21587
22894
|
}
|
|
21588
22895
|
}
|
|
21589
22896
|
},
|
|
@@ -21665,6 +22972,7 @@
|
|
|
21665
22972
|
"description": "标签栏右侧额外内容。"
|
|
21666
22973
|
}
|
|
21667
22974
|
],
|
|
22975
|
+
"methods": [],
|
|
21668
22976
|
"examples": [
|
|
21669
22977
|
{
|
|
21670
22978
|
"id": "引入-1",
|
|
@@ -21919,6 +23227,7 @@
|
|
|
21919
23227
|
"description": "标签内容，优先于 `value`。"
|
|
21920
23228
|
}
|
|
21921
23229
|
],
|
|
23230
|
+
"methods": [],
|
|
21922
23231
|
"examples": [
|
|
21923
23232
|
{
|
|
21924
23233
|
"id": "引入-1",
|
|
@@ -22176,6 +23485,16 @@
|
|
|
22176
23485
|
}
|
|
22177
23486
|
],
|
|
22178
23487
|
"slots": [],
|
|
23488
|
+
"methods": [
|
|
23489
|
+
{
|
|
23490
|
+
"name": "appendResponse",
|
|
23491
|
+
"description": "追加一条响应输出。"
|
|
23492
|
+
},
|
|
23493
|
+
{
|
|
23494
|
+
"name": "focus",
|
|
23495
|
+
"description": "聚焦命令输入框。"
|
|
23496
|
+
}
|
|
23497
|
+
],
|
|
22179
23498
|
"examples": [
|
|
22180
23499
|
{
|
|
22181
23500
|
"id": "引入-1",
|
|
@@ -22244,13 +23563,18 @@
|
|
|
22244
23563
|
"title": "Events",
|
|
22245
23564
|
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `command` | `string` | 提交的命令。 |\n| `update:lines` | — | — |\n| `update:responses` | — | — |"
|
|
22246
23565
|
},
|
|
23566
|
+
{
|
|
23567
|
+
"id": "methods",
|
|
23568
|
+
"title": "Methods",
|
|
23569
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `appendResponse(text)` | 追加一条响应输出。 |\n| `focus()` | 聚焦命令输入框。 |"
|
|
23570
|
+
},
|
|
22247
23571
|
{
|
|
22248
23572
|
"id": "slots",
|
|
22249
23573
|
"title": "Slots",
|
|
22250
23574
|
"body": "无插槽。"
|
|
22251
23575
|
}
|
|
22252
23576
|
],
|
|
22253
|
-
"markdown": "---\ntitle: Terminal\ncategory: 03 / DATA\ndescription: 简易命令提示符 UI。\n---\n\n# Terminal\n\n展示欢迎语与命令历史，提交时触发 `command`。\n\n## 引入\n\n```ts\nimport { MTerminal } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `welcomeMessage` | `string` | `'Welcome to Morya UI Terminal'` | 顶部欢迎语。 |\n| `prompt` | `string` | `'>'` | 提示符。 |\n| `lines` | `string[]` | — | — |\n| `responses` | `string[]` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `command` | `string` | 提交的命令。 |\n| `update:lines` | — | — |\n| `update:responses` | — | — |\n\n## Slots\n\n无插槽。\n"
|
|
23577
|
+
"markdown": "---\ntitle: Terminal\ncategory: 03 / DATA\ndescription: 简易命令提示符 UI。\n---\n\n# Terminal\n\n展示欢迎语与命令历史，提交时触发 `command`。\n\n## 引入\n\n```ts\nimport { MTerminal } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `welcomeMessage` | `string` | `'Welcome to Morya UI Terminal'` | 顶部欢迎语。 |\n| `prompt` | `string` | `'>'` | 提示符。 |\n| `lines` | `string[]` | — | — |\n| `responses` | `string[]` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `command` | `string` | 提交的命令。 |\n| `update:lines` | — | — |\n| `update:responses` | — | — |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `appendResponse(text)` | 追加一条响应输出。 |\n| `focus()` | 聚焦命令输入框。 |\n\n## Slots\n\n无插槽。\n"
|
|
22254
23578
|
},
|
|
22255
23579
|
"en-US": {
|
|
22256
23580
|
"title": "Terminal",
|
|
@@ -22281,13 +23605,18 @@
|
|
|
22281
23605
|
"title": "Events",
|
|
22282
23606
|
"body": "| Event | Prop | Description |\n| --- | --- | --- |\n| `command` | `string` | Submitted command. |"
|
|
22283
23607
|
},
|
|
23608
|
+
{
|
|
23609
|
+
"id": "methods",
|
|
23610
|
+
"title": "Methods",
|
|
23611
|
+
"body": "| Method | Description |\n| --- | --- |\n| `appendResponse(text)` | Append a response entry. |\n| `focus()` | Focus the command input. |"
|
|
23612
|
+
},
|
|
22284
23613
|
{
|
|
22285
23614
|
"id": "slots",
|
|
22286
23615
|
"title": "Slots",
|
|
22287
23616
|
"body": "No slots."
|
|
22288
23617
|
}
|
|
22289
23618
|
],
|
|
22290
|
-
"markdown": "---\ntitle: Terminal\ncategory: 03 / DATA\ndescription: Simple command-prompt UI.\n---\n\n# Terminal\n\nShows a welcome message and command history; submitting emits `command`.\n\n## Import\n\n```ts\nimport { MTerminal } 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| `welcomeMessage` | `string` | `'Welcome to Morya UI Terminal'` | Welcome message at the top. |\n| `prompt` | `string` | `'>'` | Prompt. |\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| `command` | `string` | Submitted command. |\n\n## Slots\n\nNo slots.\n"
|
|
23619
|
+
"markdown": "---\ntitle: Terminal\ncategory: 03 / DATA\ndescription: Simple command-prompt UI.\n---\n\n# Terminal\n\nShows a welcome message and command history; submitting emits `command`.\n\n## Import\n\n```ts\nimport { MTerminal } 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| `welcomeMessage` | `string` | `'Welcome to Morya UI Terminal'` | Welcome message at the top. |\n| `prompt` | `string` | `'>'` | Prompt. |\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| `command` | `string` | Submitted command. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `appendResponse(text)` | Append a response entry. |\n| `focus()` | Focus the command input. |\n\n## Slots\n\nNo slots.\n"
|
|
22291
23620
|
}
|
|
22292
23621
|
}
|
|
22293
23622
|
},
|
|
@@ -22461,6 +23790,20 @@
|
|
|
22461
23790
|
}
|
|
22462
23791
|
],
|
|
22463
23792
|
"slots": [],
|
|
23793
|
+
"methods": [
|
|
23794
|
+
{
|
|
23795
|
+
"name": "focus",
|
|
23796
|
+
"description": "聚焦底层文本域。"
|
|
23797
|
+
},
|
|
23798
|
+
{
|
|
23799
|
+
"name": "blur",
|
|
23800
|
+
"description": "使底层文本域失焦。"
|
|
23801
|
+
},
|
|
23802
|
+
{
|
|
23803
|
+
"name": "select",
|
|
23804
|
+
"description": "选中文本域的全部文本。"
|
|
23805
|
+
}
|
|
23806
|
+
],
|
|
22464
23807
|
"examples": [
|
|
22465
23808
|
{
|
|
22466
23809
|
"id": "引入-1",
|
|
@@ -22598,13 +23941,18 @@
|
|
|
22598
23941
|
"title": "Events",
|
|
22599
23942
|
"body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |"
|
|
22600
23943
|
},
|
|
23944
|
+
{
|
|
23945
|
+
"id": "methods",
|
|
23946
|
+
"title": "Methods",
|
|
23947
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层文本域。 |\n| `blur()` | 使底层文本域失焦。 |\n| `select()` | 选中文本域的全部文本。 |"
|
|
23948
|
+
},
|
|
22601
23949
|
{
|
|
22602
23950
|
"id": "slots",
|
|
22603
23951
|
"title": "Slots",
|
|
22604
23952
|
"body": "无插槽。"
|
|
22605
23953
|
}
|
|
22606
23954
|
],
|
|
22607
|
-
"markdown": "---\ntitle: Textarea\ncategory: 02 / FORM\ndescription: 多行文本输入。\n---\n\n# Textarea\n\n多行文本输入。\n\n## 引入\n\n```ts\nimport { MTextarea } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size & Variant\n\n```vue preview src=\"./demos/SizeAndVariant.vue\"\n```\n\n## AutoResize & Invalid\n\n`autosize` 会随内容增高；可传 `{ minRows, maxRows }` 限制范围。`invalid` 表示校验失败。\n\n```vue preview src=\"./demos/AutoresizeAndInvalid.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `id` | `string` | — | 原生 id。 |\n| `rows` | `number` | `4` | 可见行数。 |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize；autosize 时强制 `none`。 |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | 按内容自动增高，可限制行数。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\n| `errorMessage` | `string` | — | 错误文案。 |\n| `placeholder` | `string` | — | 占位符。 |\n| `name` | `string` | — | 原生 name。 |\n| `autocomplete` | `string` | — | 原生 autocomplete。 |\n| `autofocus` | `boolean` | `false` | 挂载后聚焦。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 分段透传（`root`、`input`、`label` 等）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Slots\n\n无插槽。\n"
|
|
23955
|
+
"markdown": "---\ntitle: Textarea\ncategory: 02 / FORM\ndescription: 多行文本输入。\n---\n\n# Textarea\n\n多行文本输入。\n\n## 引入\n\n```ts\nimport { MTextarea } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size & Variant\n\n```vue preview src=\"./demos/SizeAndVariant.vue\"\n```\n\n## AutoResize & Invalid\n\n`autosize` 会随内容增高；可传 `{ minRows, maxRows }` 限制范围。`invalid` 表示校验失败。\n\n```vue preview src=\"./demos/AutoresizeAndInvalid.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | 绑定值。 |\n| `label` | `string` | — | 标签文案。 |\n| `helpText` | `string` | — | 辅助说明。 |\n| `invalid` | `boolean` | `false` | 校验失败态。 |\n| `id` | `string` | — | 原生 id。 |\n| `rows` | `number` | `4` | 可见行数。 |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize；autosize 时强制 `none`。 |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | 按内容自动增高，可限制行数。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。 |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | 样式变体。 |\n| `fluid` | `boolean` | `false` | 宽度撑满。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `readonly` | `boolean` | `false` | 只读。 |\n| `clearable` | `boolean` | `false` | 显示清除按钮。 |\n| `maxlength` | `number` | — | 原生 maxlength。 |\n| `showCount` | `boolean` | `false` | 显示字数统计。 |\n| `errorMessage` | `string` | — | 错误文案。 |\n| `placeholder` | `string` | — | 占位符。 |\n| `name` | `string` | — | 原生 name。 |\n| `autocomplete` | `string` | — | 原生 autocomplete。 |\n| `autofocus` | `boolean` | `false` | 挂载后聚焦。 |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | DOM 分段透传（`root`、`input`、`label` 等）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `string` | 值变化。 |\n| `clear` | — | 点击清除时触发。 |\n| `blur` | — | — |\n| `change` | — | — |\n| `focus` | — | — |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层文本域。 |\n| `blur()` | 使底层文本域失焦。 |\n| `select()` | 选中文本域的全部文本。 |\n\n## Slots\n\n无插槽。\n"
|
|
22608
23956
|
},
|
|
22609
23957
|
"en-US": {
|
|
22610
23958
|
"title": "Textarea",
|
|
@@ -22650,13 +23998,18 @@
|
|
|
22650
23998
|
"title": "Events",
|
|
22651
23999
|
"body": "| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Emitted when the value changes. |\n| `clear` | — | Emitted when the value is cleared. |"
|
|
22652
24000
|
},
|
|
24001
|
+
{
|
|
24002
|
+
"id": "methods",
|
|
24003
|
+
"title": "Methods",
|
|
24004
|
+
"body": "| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying textarea. |\n| `blur()` | Blur the underlying textarea. |\n| `select()` | Select all text in the textarea. |"
|
|
24005
|
+
},
|
|
22653
24006
|
{
|
|
22654
24007
|
"id": "slots",
|
|
22655
24008
|
"title": "Slots",
|
|
22656
24009
|
"body": "No slots."
|
|
22657
24010
|
}
|
|
22658
24011
|
],
|
|
22659
|
-
"markdown": "---\ntitle: Textarea\ncategory: 02 / FORM\ndescription: Multi-line text input.\n---\n\n# Textarea\n\nMulti-line text input.\n\n## Import\n\n```ts\nimport { MTextarea } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size & Variant\n\n```vue preview src=\"./demos/SizeAndVariant.vue\"\n```\n\n## AutoResize & Invalid\n\n`autosize` grows with content. Pass `{ minRows, maxRows }` to clamp. `invalid` marks a validation failure.\n\n```vue preview src=\"./demos/AutoresizeAndInvalid.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Invalid (validation failed) state. |\n| `id` | `string` | — | Native id. |\n| `rows` | `number` | `4` | Visible rows. |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize; forced to `none` when autosize is on. |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | Auto-grow with content; optional row clamp. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\n| `errorMessage` | `string` | — | Error copy. |\n| `placeholder` | `string` | — | Placeholder. |\n| `name` | `string` | — | Native name. |\n| `autocomplete` | `string` | — | Native autocomplete. |\n| `autofocus` | `boolean` | `false` | Focus on mount. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through per DOM part (`root`, `input`, `label`, …). |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Emitted when the value changes. |\n| `clear` | — | Emitted when the value is cleared. |\n\n## Slots\n\nNo slots.\n"
|
|
24012
|
+
"markdown": "---\ntitle: Textarea\ncategory: 02 / FORM\ndescription: Multi-line text input.\n---\n\n# Textarea\n\nMulti-line text input.\n\n## Import\n\n```ts\nimport { MTextarea } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Size & Variant\n\n```vue preview src=\"./demos/SizeAndVariant.vue\"\n```\n\n## AutoResize & Invalid\n\n`autosize` grows with content. Pass `{ minRows, maxRows }` to clamp. `invalid` marks a validation failure.\n\n```vue preview src=\"./demos/AutoresizeAndInvalid.vue\"\n```\n\n## Clearable & count\n\n```vue preview src=\"./demos/ClearableAndCount.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `string` | `''` | Bound value. |\n| `label` | `string` | — | Label text. |\n| `helpText` | `string` | — | Helper text. |\n| `invalid` | `boolean` | `false` | Invalid (validation failed) state. |\n| `id` | `string` | — | Native id. |\n| `rows` | `number` | `4` | Visible rows. |\n| `resize` | `'none' \\| 'vertical' \\| 'horizontal' \\| 'both'` | `'vertical'` | CSS resize; forced to `none` when autosize is on. |\n| `autosize` | `boolean \\| { minRows?: number; maxRows?: number }` | `false` | Auto-grow with content; optional row clamp. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. |\n| `variant` | `'outlined' \\| 'filled'` | `'outlined'` | Visual variant. |\n| `fluid` | `boolean` | `false` | Full width. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `readonly` | `boolean` | `false` | Read-only. |\n| `clearable` | `boolean` | `false` | Show a clear button. |\n| `maxlength` | `number` | — | Native maxlength. |\n| `showCount` | `boolean` | `false` | Show character count. |\n| `errorMessage` | `string` | — | Error copy. |\n| `placeholder` | `string` | — | Placeholder. |\n| `name` | `string` | — | Native name. |\n| `autocomplete` | `string` | — | Native autocomplete. |\n| `autofocus` | `boolean` | `false` | Focus on mount. |\n| `pt` | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }` | — | Pass-through per DOM part (`root`, `input`, `label`, …). |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `string` | Emitted when the value changes. |\n| `clear` | — | Emitted when the value is cleared. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `focus()` | Focus the underlying textarea. |\n| `blur()` | Blur the underlying textarea. |\n| `select()` | Select all text in the textarea. |\n\n## Slots\n\nNo slots.\n"
|
|
22660
24013
|
}
|
|
22661
24014
|
}
|
|
22662
24015
|
},
|
|
@@ -22726,6 +24079,7 @@
|
|
|
22726
24079
|
}
|
|
22727
24080
|
],
|
|
22728
24081
|
"slots": [],
|
|
24082
|
+
"methods": [],
|
|
22729
24083
|
"examples": [
|
|
22730
24084
|
{
|
|
22731
24085
|
"id": "引入-1",
|
|
@@ -22958,7 +24312,29 @@
|
|
|
22958
24312
|
}
|
|
22959
24313
|
],
|
|
22960
24314
|
"events": [],
|
|
22961
|
-
"slots": [
|
|
24315
|
+
"slots": [
|
|
24316
|
+
{
|
|
24317
|
+
"name": "item",
|
|
24318
|
+
"description": "整项自定义，`{ item, index }`；不传时使用 opposite / marker / content。"
|
|
24319
|
+
},
|
|
24320
|
+
{
|
|
24321
|
+
"name": "content",
|
|
24322
|
+
"description": "主内容，`{ item, index }`。"
|
|
24323
|
+
},
|
|
24324
|
+
{
|
|
24325
|
+
"name": "opposite",
|
|
24326
|
+
"description": "对侧内容，默认显示 `date`。"
|
|
24327
|
+
},
|
|
24328
|
+
{
|
|
24329
|
+
"name": "marker",
|
|
24330
|
+
"description": "自定义节点圆点。"
|
|
24331
|
+
},
|
|
24332
|
+
{
|
|
24333
|
+
"name": "connector",
|
|
24334
|
+
"description": "自定义连接线。"
|
|
24335
|
+
}
|
|
24336
|
+
],
|
|
24337
|
+
"methods": [],
|
|
22962
24338
|
"examples": [
|
|
22963
24339
|
{
|
|
22964
24340
|
"id": "引入-1",
|
|
@@ -23210,68 +24586,54 @@
|
|
|
23210
24586
|
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
23211
24587
|
},
|
|
23212
24588
|
{
|
|
23213
|
-
"name": "
|
|
23214
|
-
"type": "
|
|
23215
|
-
"default": "
|
|
23216
|
-
"description": "
|
|
23217
|
-
}
|
|
24589
|
+
"name": "pt",
|
|
24590
|
+
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
24591
|
+
"default": "—",
|
|
24592
|
+
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
24593
|
+
}
|
|
24594
|
+
],
|
|
24595
|
+
"events": [
|
|
23218
24596
|
{
|
|
23219
|
-
"name": "
|
|
23220
|
-
"
|
|
23221
|
-
"
|
|
23222
|
-
|
|
23223
|
-
|
|
24597
|
+
"name": "close",
|
|
24598
|
+
"payload": "ToastMessage",
|
|
24599
|
+
"description": "点击关闭；受控模式下由调用方移除"
|
|
24600
|
+
}
|
|
24601
|
+
],
|
|
24602
|
+
"slots": [],
|
|
24603
|
+
"methods": [
|
|
23224
24604
|
{
|
|
23225
|
-
"name": "
|
|
23226
|
-
"
|
|
23227
|
-
"default": "—",
|
|
23228
|
-
"description": "唯一键"
|
|
24605
|
+
"name": "toast.success / info / warn / error",
|
|
24606
|
+
"description": "按语义添加"
|
|
23229
24607
|
},
|
|
23230
24608
|
{
|
|
23231
|
-
"name": "
|
|
23232
|
-
"
|
|
23233
|
-
"default": "—",
|
|
23234
|
-
"description": "标题"
|
|
24609
|
+
"name": "toast.add",
|
|
24610
|
+
"description": "添加一条"
|
|
23235
24611
|
},
|
|
23236
24612
|
{
|
|
23237
|
-
"name": "
|
|
23238
|
-
"
|
|
23239
|
-
"default": "—",
|
|
23240
|
-
"description": "详情"
|
|
24613
|
+
"name": "toast.remove",
|
|
24614
|
+
"description": "移除"
|
|
23241
24615
|
},
|
|
23242
24616
|
{
|
|
23243
|
-
"name": "
|
|
23244
|
-
"
|
|
23245
|
-
"default": "'info'",
|
|
23246
|
-
"description": "语义色"
|
|
24617
|
+
"name": "toast.close",
|
|
24618
|
+
"description": "移除"
|
|
23247
24619
|
},
|
|
23248
24620
|
{
|
|
23249
|
-
"name": "
|
|
23250
|
-
"
|
|
23251
|
-
"default": "true",
|
|
23252
|
-
"description": "关闭按钮"
|
|
24621
|
+
"name": "toast.clear",
|
|
24622
|
+
"description": "清空"
|
|
23253
24623
|
},
|
|
23254
24624
|
{
|
|
23255
|
-
"name": "
|
|
23256
|
-
"
|
|
23257
|
-
"default": "API 默认 `3000",
|
|
23258
|
-
"description": "自动关闭毫秒"
|
|
24625
|
+
"name": "toast.closeAll",
|
|
24626
|
+
"description": "清空"
|
|
23259
24627
|
},
|
|
23260
24628
|
{
|
|
23261
|
-
"name": "
|
|
23262
|
-
"
|
|
23263
|
-
|
|
23264
|
-
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
23265
|
-
}
|
|
23266
|
-
],
|
|
23267
|
-
"events": [
|
|
24629
|
+
"name": "toast.destroyAll",
|
|
24630
|
+
"description": "清空"
|
|
24631
|
+
},
|
|
23268
24632
|
{
|
|
23269
|
-
"name": "
|
|
23270
|
-
"
|
|
23271
|
-
"description": "点击关闭；受控模式下由调用方移除"
|
|
24633
|
+
"name": "toast.setDefaults",
|
|
24634
|
+
"description": "默认角落位置与并发上限"
|
|
23272
24635
|
}
|
|
23273
24636
|
],
|
|
23274
|
-
"slots": [],
|
|
23275
24637
|
"examples": [
|
|
23276
24638
|
{
|
|
23277
24639
|
"id": "引入-1",
|
|
@@ -23402,7 +24764,7 @@
|
|
|
23402
24764
|
{
|
|
23403
24765
|
"id": "props",
|
|
23404
24766
|
"title": "Props",
|
|
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). |"
|
|
24767
|
+
"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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\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). |"
|
|
23406
24768
|
},
|
|
23407
24769
|
{
|
|
23408
24770
|
"id": "events",
|
|
@@ -23420,7 +24782,7 @@
|
|
|
23420
24782
|
"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```"
|
|
23421
24783
|
}
|
|
23422
24784
|
],
|
|
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"
|
|
24785
|
+
"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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\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"
|
|
23424
24786
|
},
|
|
23425
24787
|
"en-US": {
|
|
23426
24788
|
"title": "Toast",
|
|
@@ -23459,7 +24821,7 @@
|
|
|
23459
24821
|
{
|
|
23460
24822
|
"id": "props",
|
|
23461
24823
|
"title": "Props",
|
|
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). |"
|
|
24824
|
+
"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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\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). |"
|
|
23463
24825
|
},
|
|
23464
24826
|
{
|
|
23465
24827
|
"id": "events",
|
|
@@ -23477,7 +24839,7 @@
|
|
|
23477
24839
|
"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```"
|
|
23478
24840
|
}
|
|
23479
24841
|
],
|
|
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"
|
|
24842
|
+
"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| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\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"
|
|
23481
24843
|
}
|
|
23482
24844
|
}
|
|
23483
24845
|
},
|
|
@@ -23552,6 +24914,7 @@
|
|
|
23552
24914
|
"description": "按钮内容。"
|
|
23553
24915
|
}
|
|
23554
24916
|
],
|
|
24917
|
+
"methods": [],
|
|
23555
24918
|
"examples": [
|
|
23556
24919
|
{
|
|
23557
24920
|
"id": "引入-1",
|
|
@@ -23732,6 +25095,7 @@
|
|
|
23732
25095
|
"description": "右侧区域。"
|
|
23733
25096
|
}
|
|
23734
25097
|
],
|
|
25098
|
+
"methods": [],
|
|
23735
25099
|
"examples": [
|
|
23736
25100
|
{
|
|
23737
25101
|
"id": "引入-1",
|
|
@@ -23919,6 +25283,7 @@
|
|
|
23919
25283
|
"description": "触发元素。"
|
|
23920
25284
|
}
|
|
23921
25285
|
],
|
|
25286
|
+
"methods": [],
|
|
23922
25287
|
"examples": [
|
|
23923
25288
|
{
|
|
23924
25289
|
"id": "引入-1",
|
|
@@ -24164,9 +25529,16 @@
|
|
|
24164
25529
|
],
|
|
24165
25530
|
"events": [
|
|
24166
25531
|
{
|
|
24167
|
-
"name": "
|
|
24168
|
-
"
|
|
24169
|
-
|
|
25532
|
+
"name": "update:checkedKeys",
|
|
25533
|
+
"description": "交互回调。"
|
|
25534
|
+
},
|
|
25535
|
+
{
|
|
25536
|
+
"name": "update:expandedKeys",
|
|
25537
|
+
"description": "交互回调。"
|
|
25538
|
+
},
|
|
25539
|
+
{
|
|
25540
|
+
"name": "check",
|
|
25541
|
+
"description": "交互回调。"
|
|
24170
25542
|
},
|
|
24171
25543
|
{
|
|
24172
25544
|
"name": "node-expand",
|
|
@@ -24178,6 +25550,15 @@
|
|
|
24178
25550
|
"payload": "TreeNode",
|
|
24179
25551
|
"description": "节点收起。"
|
|
24180
25552
|
},
|
|
25553
|
+
{
|
|
25554
|
+
"name": "node-drop",
|
|
25555
|
+
"description": "交互回调。"
|
|
25556
|
+
},
|
|
25557
|
+
{
|
|
25558
|
+
"name": "node-select",
|
|
25559
|
+
"payload": "TreeNode",
|
|
25560
|
+
"description": "节点选中。"
|
|
25561
|
+
},
|
|
24181
25562
|
{
|
|
24182
25563
|
"name": "node-load-error",
|
|
24183
25564
|
"payload": "{ node, error }",
|
|
@@ -24200,11 +25581,16 @@
|
|
|
24200
25581
|
}
|
|
24201
25582
|
],
|
|
24202
25583
|
"slots": [
|
|
25584
|
+
{
|
|
25585
|
+
"name": "default",
|
|
25586
|
+
"description": "`{ node, data }` 自定义节点内容。"
|
|
25587
|
+
},
|
|
24203
25588
|
{
|
|
24204
25589
|
"name": "empty",
|
|
24205
25590
|
"description": "自定义 `empty` 内容。"
|
|
24206
25591
|
}
|
|
24207
25592
|
],
|
|
25593
|
+
"methods": [],
|
|
24208
25594
|
"examples": [
|
|
24209
25595
|
{
|
|
24210
25596
|
"id": "引入-1",
|
|
@@ -24613,6 +25999,7 @@
|
|
|
24613
25999
|
"description": "树节点 `{ node }`。"
|
|
24614
26000
|
}
|
|
24615
26001
|
],
|
|
26002
|
+
"methods": [],
|
|
24616
26003
|
"examples": [
|
|
24617
26004
|
{
|
|
24618
26005
|
"id": "引入-1",
|
|
@@ -24879,6 +26266,7 @@
|
|
|
24879
26266
|
"description": "自定义 `empty` 内容。"
|
|
24880
26267
|
}
|
|
24881
26268
|
],
|
|
26269
|
+
"methods": [],
|
|
24882
26270
|
"examples": [
|
|
24883
26271
|
{
|
|
24884
26272
|
"id": "引入-1",
|
|
@@ -25078,10 +26466,33 @@
|
|
|
25078
26466
|
"type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
|
|
25079
26467
|
"default": "—",
|
|
25080
26468
|
"description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
|
|
26469
|
+
},
|
|
26470
|
+
{
|
|
26471
|
+
"name": "role",
|
|
26472
|
+
"type": "string",
|
|
26473
|
+
"default": "—",
|
|
26474
|
+
"description": "容器 `role`。"
|
|
26475
|
+
},
|
|
26476
|
+
{
|
|
26477
|
+
"name": "ariaLabel",
|
|
26478
|
+
"type": "string",
|
|
26479
|
+
"default": "—",
|
|
26480
|
+
"description": "容器无障碍名称。"
|
|
25081
26481
|
}
|
|
25082
26482
|
],
|
|
25083
26483
|
"events": [],
|
|
25084
|
-
"slots": [
|
|
26484
|
+
"slots": [
|
|
26485
|
+
{
|
|
26486
|
+
"name": "item",
|
|
26487
|
+
"description": "单行内容；容器高度由 `itemSize` 决定。"
|
|
26488
|
+
}
|
|
26489
|
+
],
|
|
26490
|
+
"methods": [
|
|
26491
|
+
{
|
|
26492
|
+
"name": "scrollToIndex",
|
|
26493
|
+
"description": "滚动到指定索引的行。"
|
|
26494
|
+
}
|
|
26495
|
+
],
|
|
25085
26496
|
"examples": [
|
|
25086
26497
|
{
|
|
25087
26498
|
"id": "引入-1",
|
|
@@ -25148,13 +26559,18 @@
|
|
|
25148
26559
|
{
|
|
25149
26560
|
"id": "props",
|
|
25150
26561
|
"title": "Props",
|
|
25151
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `items` | `unknown[]` | — | 全部数据。 |\n| `itemSize` | `number` | — | 单项高度（px）。 |\n| `height` | `number \\| string` | `240` | 视口高度。 |\n| `buffer` | `number` | `3` | 视口上下额外渲染行数。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
26562
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `items` | `unknown[]` | — | 全部数据。 |\n| `itemSize` | `number` | — | 单项高度（px）。 |\n| `height` | `number \\| string` | `240` | 视口高度。 |\n| `buffer` | `number` | `3` | 视口上下额外渲染行数。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n| `role` | `string` | — | 容器 `role`。 |\n| `ariaLabel` | `string` | — | 容器无障碍名称。 |"
|
|
25152
26563
|
},
|
|
25153
26564
|
{
|
|
25154
26565
|
"id": "slots",
|
|
25155
26566
|
"title": "Slots",
|
|
25156
26567
|
"body": "| 插槽 | 作用域 | 说明 |\n| --- | --- | --- |\n| `item` | `{ item, index }` | 单行内容；容器高度由 `itemSize` 决定。 |"
|
|
25157
26568
|
},
|
|
26569
|
+
{
|
|
26570
|
+
"id": "methods",
|
|
26571
|
+
"title": "Methods",
|
|
26572
|
+
"body": "| 方法 | 说明 |\n| --- | --- |\n| `scrollToIndex(index)` | 滚动到指定索引的行。 |"
|
|
26573
|
+
},
|
|
25158
26574
|
{
|
|
25159
26575
|
"id": "无障碍",
|
|
25160
26576
|
"title": "无障碍",
|
|
@@ -25166,7 +26582,7 @@
|
|
|
25166
26582
|
"body": "无自定义事件。"
|
|
25167
26583
|
}
|
|
25168
26584
|
],
|
|
25169
|
-
"markdown": "---\ntitle: VirtualScroller\ncategory: 03 / DATA\ndescription: 按可视窗口渲染长列表。\n---\n\n# VirtualScroller\n\n根据滚动位置**窗口化**渲染列表项，适合成千上万条等行高数据。\n\n## 引入\n\n```ts\nimport { MVirtualScroller } from 'morya-ui'\n```\n\n## 基础用法\n\n`itemSize` 为固定行高（px）；内容超出时请在 `#item` 插槽内自行截断。\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 性能说明\n\n- 仅渲染视口内行 + `buffer` 缓冲行，滚动时复用 DOM。\n- 要求**统一行高**；动态高度列表请改用分页或普通列表。\n- 增大 `buffer` 可减少快速滚动时的空白，但会增加 DOM 数量。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `items` | `unknown[]` | — | 全部数据。 |\n| `itemSize` | `number` | — | 单项高度（px）。 |\n| `height` | `number \\| string` | `240` | 视口高度。 |\n| `buffer` | `number` | `3` | 视口上下额外渲染行数。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 作用域 | 说明 |\n| --- | --- | --- |\n| `item` | `{ item, index }` | 单行内容；容器高度由 `itemSize` 决定。 |\n\n## 无障碍\n\n- 滚动区域为原生 overflow；若行内有关交互控件，请保证键盘焦点顺序合理。\n- 长列表建议配合搜索或过滤，避免仅依赖滚动浏览。\n\n## Events\n\n无自定义事件。\n"
|
|
26585
|
+
"markdown": "---\ntitle: VirtualScroller\ncategory: 03 / DATA\ndescription: 按可视窗口渲染长列表。\n---\n\n# VirtualScroller\n\n根据滚动位置**窗口化**渲染列表项，适合成千上万条等行高数据。\n\n## 引入\n\n```ts\nimport { MVirtualScroller } from 'morya-ui'\n```\n\n## 基础用法\n\n`itemSize` 为固定行高（px）；内容超出时请在 `#item` 插槽内自行截断。\n\n```vue preview src=\"./demos/BasicUsage.zh.vue\"\n```\n\n## 性能说明\n\n- 仅渲染视口内行 + `buffer` 缓冲行，滚动时复用 DOM。\n- 要求**统一行高**；动态高度列表请改用分页或普通列表。\n- 增大 `buffer` 可减少快速滚动时的空白，但会增加 DOM 数量。\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `items` | `unknown[]` | — | 全部数据。 |\n| `itemSize` | `number` | — | 单项高度（px）。 |\n| `height` | `number \\| string` | `240` | 视口高度。 |\n| `buffer` | `number` | `3` | 视口上下额外渲染行数。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n| `role` | `string` | — | 容器 `role`。 |\n| `ariaLabel` | `string` | — | 容器无障碍名称。 |\n\n\n## Slots\n\n| 插槽 | 作用域 | 说明 |\n| --- | --- | --- |\n| `item` | `{ item, index }` | 单行内容；容器高度由 `itemSize` 决定。 |\n\n## Methods\n\n| 方法 | 说明 |\n| --- | --- |\n| `scrollToIndex(index)` | 滚动到指定索引的行。 |\n\n## 无障碍\n\n- 滚动区域为原生 overflow；若行内有关交互控件，请保证键盘焦点顺序合理。\n- 长列表建议配合搜索或过滤，避免仅依赖滚动浏览。\n\n## Events\n\n无自定义事件。\n"
|
|
25170
26586
|
},
|
|
25171
26587
|
"en-US": {
|
|
25172
26588
|
"title": "VirtualScroller",
|
|
@@ -25195,13 +26611,18 @@
|
|
|
25195
26611
|
{
|
|
25196
26612
|
"id": "props",
|
|
25197
26613
|
"title": "Props",
|
|
25198
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `items` | `unknown[]` | — | Full data set. |\n| `itemSize` | `number` | — | Row height in px. |\n| `height` | `number \\| string` | `240` | Viewport height. |\n| `buffer` | `number` | `3` | Extra rows rendered above/below the viewport. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
26614
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `items` | `unknown[]` | — | Full data set. |\n| `itemSize` | `number` | — | Row height in px. |\n| `height` | `number \\| string` | `240` | Viewport height. |\n| `buffer` | `number` | `3` | Extra rows rendered above/below the viewport. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n| `role` | `string` | — | `role` of the container. |\n| `ariaLabel` | `string` | — | Accessible name for the container. |"
|
|
25199
26615
|
},
|
|
25200
26616
|
{
|
|
25201
26617
|
"id": "slots",
|
|
25202
26618
|
"title": "Slots",
|
|
25203
26619
|
"body": "| Slot | Scope | Description |\n| --- | --- | --- |\n| `item` | `{ item, index }` | Row content; container height follows `itemSize`. |"
|
|
25204
26620
|
},
|
|
26621
|
+
{
|
|
26622
|
+
"id": "methods",
|
|
26623
|
+
"title": "Methods",
|
|
26624
|
+
"body": "| Method | Description |\n| --- | --- |\n| `scrollToIndex(index)` | Scroll to the row at the given index. |"
|
|
26625
|
+
},
|
|
25205
26626
|
{
|
|
25206
26627
|
"id": "accessibility",
|
|
25207
26628
|
"title": "Accessibility",
|
|
@@ -25213,7 +26634,7 @@
|
|
|
25213
26634
|
"body": "No custom events."
|
|
25214
26635
|
}
|
|
25215
26636
|
],
|
|
25216
|
-
"markdown": "---\ntitle: VirtualScroller\ncategory: 03 / DATA\ndescription: Renders long lists within the visible viewport.\n---\n\n# VirtualScroller\n\nWindowed list rendering based on scroll position. Best for large, **equal-height** rows.\n\n## Import\n\n```ts\nimport { MVirtualScroller } from 'morya-ui'\n```\n\n## Basic usage\n\n`itemSize` is a fixed row height in px. Truncate overflowing content inside `#item`.\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Performance notes\n\n- Only viewport rows plus `buffer` extras are mounted; DOM nodes are reused while scrolling.\n- Requires **uniform row height**—use pagination or a plain list for variable heights.\n- A larger `buffer` reduces flicker when scrolling fast at the cost of more DOM.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `items` | `unknown[]` | — | Full data set. |\n| `itemSize` | `number` | — | Row height in px. |\n| `height` | `number \\| string` | `240` | Viewport height. |\n| `buffer` | `number` | `3` | Extra rows rendered above/below the viewport. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Scope | Description |\n| --- | --- | --- |\n| `item` | `{ item, index }` | Row content; container height follows `itemSize`. |\n\n## Accessibility\n\n- The scroll region uses native overflow. Keep a sensible tab order when rows contain controls.\n- Pair long lists with search or filtering instead of scroll-only discovery.\n\n## Events\n\nNo custom events.\n"
|
|
26637
|
+
"markdown": "---\ntitle: VirtualScroller\ncategory: 03 / DATA\ndescription: Renders long lists within the visible viewport.\n---\n\n# VirtualScroller\n\nWindowed list rendering based on scroll position. Best for large, **equal-height** rows.\n\n## Import\n\n```ts\nimport { MVirtualScroller } from 'morya-ui'\n```\n\n## Basic usage\n\n`itemSize` is a fixed row height in px. Truncate overflowing content inside `#item`.\n\n```vue preview src=\"./demos/BasicUsage.en.vue\"\n```\n\n## Performance notes\n\n- Only viewport rows plus `buffer` extras are mounted; DOM nodes are reused while scrolling.\n- Requires **uniform row height**—use pagination or a plain list for variable heights.\n- A larger `buffer` reduces flicker when scrolling fast at the cost of more DOM.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `items` | `unknown[]` | — | Full data set. |\n| `itemSize` | `number` | — | Row height in px. |\n| `height` | `number \\| string` | `240` | Viewport height. |\n| `buffer` | `number` | `3` | Extra rows rendered above/below the viewport. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n| `role` | `string` | — | `role` of the container. |\n| `ariaLabel` | `string` | — | Accessible name for the container. |\n\n\n## Slots\n\n| Slot | Scope | Description |\n| --- | --- | --- |\n| `item` | `{ item, index }` | Row content; container height follows `itemSize`. |\n\n## Methods\n\n| Method | Description |\n| --- | --- |\n| `scrollToIndex(index)` | Scroll to the row at the given index. |\n\n## Accessibility\n\n- The scroll region uses native overflow. Keep a sensible tab order when rows contain controls.\n- Pair long lists with search or filtering instead of scroll-only discovery.\n\n## Events\n\nNo custom events.\n"
|
|
25217
26638
|
}
|
|
25218
26639
|
}
|
|
25219
26640
|
}
|
|
@@ -25828,24 +27249,24 @@
|
|
|
25828
27249
|
"zh-CN": {
|
|
25829
27250
|
"title": "API 类型",
|
|
25830
27251
|
"description": "文档 Props 里常见类型名的结构与含义。",
|
|
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",
|
|
27252
|
+
"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=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\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",
|
|
25832
27253
|
"sections": [
|
|
25833
27254
|
{
|
|
25834
27255
|
"title": "",
|
|
25835
27256
|
"id": "overview",
|
|
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`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。"
|
|
27257
|
+
"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=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\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`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。"
|
|
25837
27258
|
}
|
|
25838
27259
|
]
|
|
25839
27260
|
},
|
|
25840
27261
|
"en-US": {
|
|
25841
27262
|
"title": "API types",
|
|
25842
27263
|
"description": "Shapes behind type names in component Props tables.",
|
|
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",
|
|
27264
|
+
"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=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\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",
|
|
25844
27265
|
"sections": [
|
|
25845
27266
|
{
|
|
25846
27267
|
"title": "",
|
|
25847
27268
|
"id": "overview",
|
|
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."
|
|
27269
|
+
"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=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n label: string\n items: SelectOption[]\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."
|
|
25849
27270
|
}
|
|
25850
27271
|
]
|
|
25851
27272
|
}
|