@morya-ui/mcp 0.3.2 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +151 -149
- package/bin/morya-ui-mcp.js +2 -2
- package/data/catalog.json +70 -53
- package/data/example-coverage.json +8 -6
- package/data/golden-pages/dashboard-page.vue +138 -138
- package/data/golden-pages/detail-page.vue +178 -178
- package/data/golden-pages/empty-state.vue +56 -56
- package/data/golden-pages/form-in-dialog.vue +166 -166
- package/data/golden-pages/form-page.vue +107 -107
- package/data/golden-pages/landing-page.vue +358 -358
- package/data/golden-pages/list-page-dense.vue +166 -0
- package/data/golden-pages/list-page-rail.vue +270 -0
- package/data/golden-pages/list-page.vue +220 -216
- package/data/golden-pages/login-page.vue +231 -231
- package/data/golden-pages/result-page.vue +84 -84
- package/data/golden-pages/settings-page.vue +163 -163
- package/data/golden-pages/wizard-form.vue +182 -182
- package/dist/__tests__/tools.test.js +93 -1
- package/dist/decisions.d.ts +14 -0
- package/dist/decisions.js +818 -41
- package/dist/golden-pages.d.ts +13 -0
- package/dist/golden-pages.js +55 -2
- package/dist/index.js +9 -3
- package/dist/page-snippets.js +254 -225
- package/dist/patterns.d.ts +2 -2
- package/dist/patterns.js +20 -9
- package/dist/style-presets.d.ts +52 -0
- package/dist/style-presets.js +322 -0
- package/dist/tools.d.ts +20 -0
- package/dist/tools.js +336 -216
- package/package.json +16 -12
- package/LICENSE +0 -21
package/data/catalog.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-09-
|
|
2
|
+
"generatedAt": "2026-09-25T03:12:04.732Z",
|
|
3
3
|
"library": {
|
|
4
4
|
"name": "morya-ui",
|
|
5
|
-
"version": "0.3.
|
|
5
|
+
"version": "0.3.4"
|
|
6
6
|
},
|
|
7
7
|
"mcp": {
|
|
8
8
|
"name": "@morya-ui/mcp",
|
|
9
|
-
"version": "0.3.
|
|
9
|
+
"version": "0.3.4"
|
|
10
10
|
},
|
|
11
11
|
"components": [
|
|
12
12
|
{
|
|
@@ -1460,11 +1460,17 @@
|
|
|
1460
1460
|
"default": "false",
|
|
1461
1461
|
"description": "链接按钮。"
|
|
1462
1462
|
},
|
|
1463
|
+
{
|
|
1464
|
+
"name": "underline",
|
|
1465
|
+
"type": "boolean",
|
|
1466
|
+
"default": "true",
|
|
1467
|
+
"description": "`link` 悬浮下划线。设为 `false` 可关闭。"
|
|
1468
|
+
},
|
|
1463
1469
|
{
|
|
1464
1470
|
"name": "ghost",
|
|
1465
1471
|
"type": "boolean",
|
|
1466
1472
|
"default": "false",
|
|
1467
|
-
"description": "
|
|
1473
|
+
"description": "浅色填充，等同于 `text` 的悬浮态。"
|
|
1468
1474
|
},
|
|
1469
1475
|
{
|
|
1470
1476
|
"name": "quaternary",
|
|
@@ -1476,7 +1482,7 @@
|
|
|
1476
1482
|
"name": "plain",
|
|
1477
1483
|
"type": "boolean",
|
|
1478
1484
|
"default": "false",
|
|
1479
|
-
"description": "
|
|
1485
|
+
"description": "浅色填充，等同于 `outlined` 的悬浮态；也可与 `text` / `outlined` 组合弱化。"
|
|
1480
1486
|
},
|
|
1481
1487
|
{
|
|
1482
1488
|
"name": "raised",
|
|
@@ -1511,14 +1517,14 @@
|
|
|
1511
1517
|
{
|
|
1512
1518
|
"name": "ripple",
|
|
1513
1519
|
"type": "boolean",
|
|
1514
|
-
"default": "
|
|
1515
|
-
"description": "点击水波纹。设为 `
|
|
1520
|
+
"default": "false",
|
|
1521
|
+
"description": "点击水波纹。设为 `true` 可开启。"
|
|
1516
1522
|
},
|
|
1517
1523
|
{
|
|
1518
1524
|
"name": "press",
|
|
1519
1525
|
"type": "boolean",
|
|
1520
|
-
"default": "
|
|
1521
|
-
"description": "按下时轻微缩放。设为 `
|
|
1526
|
+
"default": "false",
|
|
1527
|
+
"description": "按下时轻微缩放。设为 `true` 可开启。"
|
|
1522
1528
|
},
|
|
1523
1529
|
{
|
|
1524
1530
|
"name": "nativeType",
|
|
@@ -1604,7 +1610,7 @@
|
|
|
1604
1610
|
"sectionId": "styles",
|
|
1605
1611
|
"lang": "vue",
|
|
1606
1612
|
"preview": true,
|
|
1607
|
-
"code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4 w-full\">\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Outlined\" outlined />\n <MButton label=\"Success\" severity=\"success\" outlined />\n <MButton label=\"Danger\" severity=\"danger\" outlined />\n </div>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Raised\" raised />\n <MButton label=\"Rounded\" rounded />\n <MButton label=\"Plain Text\" text plain />\n </div>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Small\" size=\"small\" />\n <MButton label=\"Large\" size=\"large\" />\n <MButton label=\"Fluid\" fluid />\n </div>\n </div>\n</template>",
|
|
1613
|
+
"code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4 w-full\">\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Outlined\" outlined />\n <MButton label=\"Success\" severity=\"success\" outlined />\n <MButton label=\"Danger\" severity=\"danger\" outlined />\n </div>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Raised\" raised />\n <MButton label=\"Rounded\" rounded />\n <MButton label=\"Plain\" plain />\n <MButton label=\"Plain Text\" text plain />\n </div>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Small\" size=\"small\" />\n <MButton label=\"Large\" size=\"large\" />\n <MButton label=\"Fluid\" fluid />\n </div>\n </div>\n</template>",
|
|
1608
1614
|
"locale": "zh-CN"
|
|
1609
1615
|
},
|
|
1610
1616
|
{
|
|
@@ -1613,7 +1619,7 @@
|
|
|
1613
1619
|
"sectionId": "text-link",
|
|
1614
1620
|
"lang": "vue",
|
|
1615
1621
|
"preview": true,
|
|
1616
|
-
"code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Text\" text />\n <MButton label=\"Text Danger\" text severity=\"danger\" />\n <MButton label=\"Link\" link />\n <MButton label=\"Link Secondary\" link severity=\"secondary\" />\n </div>\n</template>",
|
|
1622
|
+
"code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Text\" text />\n <MButton label=\"Text Danger\" text severity=\"danger\" />\n <MButton label=\"Link\" link />\n <MButton label=\"Link No Underline\" link :underline=\"false\" />\n <MButton label=\"Link Secondary\" link severity=\"secondary\" />\n </div>\n</template>",
|
|
1617
1623
|
"locale": "zh-CN"
|
|
1618
1624
|
},
|
|
1619
1625
|
{
|
|
@@ -1694,7 +1700,7 @@
|
|
|
1694
1700
|
"sectionId": "styles",
|
|
1695
1701
|
"lang": "vue",
|
|
1696
1702
|
"preview": true,
|
|
1697
|
-
"code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4 w-full\">\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Outlined\" outlined />\n <MButton label=\"Success\" severity=\"success\" outlined />\n <MButton label=\"Danger\" severity=\"danger\" outlined />\n </div>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Raised\" raised />\n <MButton label=\"Rounded\" rounded />\n <MButton label=\"Plain Text\" text plain />\n </div>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Small\" size=\"small\" />\n <MButton label=\"Large\" size=\"large\" />\n <MButton label=\"Fluid\" fluid />\n </div>\n </div>\n</template>",
|
|
1703
|
+
"code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4 w-full\">\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Outlined\" outlined />\n <MButton label=\"Success\" severity=\"success\" outlined />\n <MButton label=\"Danger\" severity=\"danger\" outlined />\n </div>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Raised\" raised />\n <MButton label=\"Rounded\" rounded />\n <MButton label=\"Plain\" plain />\n <MButton label=\"Plain Text\" text plain />\n </div>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Small\" size=\"small\" />\n <MButton label=\"Large\" size=\"large\" />\n <MButton label=\"Fluid\" fluid />\n </div>\n </div>\n</template>",
|
|
1698
1704
|
"locale": "en-US"
|
|
1699
1705
|
},
|
|
1700
1706
|
{
|
|
@@ -1703,7 +1709,7 @@
|
|
|
1703
1709
|
"sectionId": "text-link",
|
|
1704
1710
|
"lang": "vue",
|
|
1705
1711
|
"preview": true,
|
|
1706
|
-
"code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Text\" text />\n <MButton label=\"Text Danger\" text severity=\"danger\" />\n <MButton label=\"Link\" link />\n <MButton label=\"Link Secondary\" link severity=\"secondary\" />\n </div>\n</template>",
|
|
1712
|
+
"code": "<script setup lang=\"ts\">\nimport { MButton } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"flex flex-wrap gap-3 items-center\">\n <MButton label=\"Text\" text />\n <MButton label=\"Text Danger\" text severity=\"danger\" />\n <MButton label=\"Link\" link />\n <MButton label=\"Link No Underline\" link :underline=\"false\" />\n <MButton label=\"Link Secondary\" link severity=\"secondary\" />\n </div>\n</template>",
|
|
1707
1713
|
"locale": "en-US"
|
|
1708
1714
|
},
|
|
1709
1715
|
{
|
|
@@ -1785,12 +1791,12 @@
|
|
|
1785
1791
|
{
|
|
1786
1792
|
"id": "text-link",
|
|
1787
1793
|
"title": "Text & Link",
|
|
1788
|
-
"body": "`text` 为轻量文字按钮；`link`
|
|
1794
|
+
"body": "`text` 为轻量文字按钮；`link` 呈现为无背景的内联链接样式，默认悬浮下划线，设 `:underline=\"false\"` 可关闭。二者均可与 `severity` 组合。\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```"
|
|
1789
1795
|
},
|
|
1790
1796
|
{
|
|
1791
1797
|
"id": "ghost-quaternary",
|
|
1792
1798
|
"title": "Ghost & Quaternary",
|
|
1793
|
-
"body": "`ghost`
|
|
1799
|
+
"body": "`ghost` 为浅色填充，等同于 `text` 的悬浮态；`quaternary` 更克制，适合工具栏次要操作。也可通过 `variant` 指定。\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```"
|
|
1794
1800
|
},
|
|
1795
1801
|
{
|
|
1796
1802
|
"id": "button-group",
|
|
@@ -1815,7 +1821,7 @@
|
|
|
1815
1821
|
{
|
|
1816
1822
|
"id": "props",
|
|
1817
1823
|
"title": "Props",
|
|
1818
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 按钮文案。存在默认插槽内容时以插槽为准。 |\n| `icon` | `IconName \\| Component` | — | 图标名称或自定义组件。 |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 图标相对标签的位置。 |\n| `iconOnly` | `boolean` | `false` | 强制方形纯图标按钮。 |\n| `badge` | `string` | — | 徽标文本。 |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | 徽标语义色。 |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | 语义色。省略时为 primary。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `severity`。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。默认中等；兼容 `sm` / `lg`。 |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | 样式变体快捷方式，等价于对应布尔 prop。 |\n| `outlined` | `boolean` | `false` | 描边按钮。 |\n| `text` | `boolean` | `false` | 文字按钮。 |\n| `link` | `boolean` | `false` | 链接按钮。 |\n| `ghost` | `boolean` | `false` |
|
|
1824
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 按钮文案。存在默认插槽内容时以插槽为准。 |\n| `icon` | `IconName \\| Component` | — | 图标名称或自定义组件。 |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 图标相对标签的位置。 |\n| `iconOnly` | `boolean` | `false` | 强制方形纯图标按钮。 |\n| `badge` | `string` | — | 徽标文本。 |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | 徽标语义色。 |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | 语义色。省略时为 primary。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `severity`。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。默认中等；兼容 `sm` / `lg`。 |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | 样式变体快捷方式，等价于对应布尔 prop。 |\n| `outlined` | `boolean` | `false` | 描边按钮。 |\n| `text` | `boolean` | `false` | 文字按钮。 |\n| `link` | `boolean` | `false` | 链接按钮。 |\n| `underline` | `boolean` | `true` | `link` 悬浮下划线。设为 `false` 可关闭。 |\n| `ghost` | `boolean` | `false` | 浅色填充，等同于 `text` 的悬浮态。 |\n| `quaternary` | `boolean` | `false` | 极轻量文字按钮。 |\n| `plain` | `boolean` | `false` | 浅色填充，等同于 `outlined` 的悬浮态；也可与 `text` / `outlined` 组合弱化。 |\n| `raised` | `boolean` | `false` | 浮起阴影。 |\n| `rounded` | `boolean` | `false` | 全圆角。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `loading` | `boolean` | `false` | 加载中，禁用点击并显示 spinner。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `ripple` | `boolean` | `false` | 点击水波纹。设为 `true` 可开启。 |\n| `press` | `boolean` | `false` | 按下时轻微缩放。设为 `true` 可开启。 |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | 原生 button type。 |\n| `autofocus` | `boolean` | `false` | 原生 autofocus。 |\n| `ariaLabel` | `string` | — | 可访问名称；图标按钮建议提供。 |"
|
|
1819
1825
|
},
|
|
1820
1826
|
{
|
|
1821
1827
|
"id": "events",
|
|
@@ -1838,7 +1844,7 @@
|
|
|
1838
1844
|
"body": "- 渲染原生 `<button>`。\n- 纯图标按钮请设置 `ariaLabel`（或可访问的文本标签）。\n- `loading` 时设置 `aria-busy`，并禁用交互。"
|
|
1839
1845
|
}
|
|
1840
1846
|
],
|
|
1841
|
-
"markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: 按钮用于触发即时动作。\n---\n\n# Button\n\n按钮用于触发即时动作。\n\n## 引入\n\n```ts\nimport { MButton } from 'morya-ui'\n```\n\n## 基础用法\n\n通过默认插槽或 `label` 展示按钮文案。\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Severity\n\n使用 `severity` 定义按钮语义色；省略时为 primary。\n\n```vue preview src=\"./demos/Severity.vue\"\n```\n\n## Styles\n\n`outlined`、`text`、`link`、`raised`、`rounded`、`plain` 可自由组合。\n\n```vue preview src=\"./demos/Styles.vue\"\n```\n\n## Text & Link\n\n`text` 为轻量文字按钮；`link`
|
|
1847
|
+
"markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: 按钮用于触发即时动作。\n---\n\n# Button\n\n按钮用于触发即时动作。\n\n## 引入\n\n```ts\nimport { MButton } from 'morya-ui'\n```\n\n## 基础用法\n\n通过默认插槽或 `label` 展示按钮文案。\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Severity\n\n使用 `severity` 定义按钮语义色；省略时为 primary。\n\n```vue preview src=\"./demos/Severity.vue\"\n```\n\n## Styles\n\n`outlined`、`text`、`link`、`raised`、`rounded`、`plain` 可自由组合。\n\n```vue preview src=\"./demos/Styles.vue\"\n```\n\n## Text & Link\n\n`text` 为轻量文字按钮；`link` 呈现为无背景的内联链接样式，默认悬浮下划线，设 `:underline=\"false\"` 可关闭。二者均可与 `severity` 组合。\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```\n\n## Ghost & Quaternary\n\n`ghost` 为浅色填充，等同于 `text` 的悬浮态；`quaternary` 更克制，适合工具栏次要操作。也可通过 `variant` 指定。\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```\n\n## Button Group\n\n`MButtonGroup` 将相邻按钮拼成一组。\n\n```vue preview src=\"./demos/ButtonGroup.zh.vue\"\n```\n\n## Icons & Badge\n\n支持 `icon`、`iconPos`、`iconOnly`，以及 `badge` 徽标。\n\n```vue preview src=\"./demos/IconsAndBadge.vue\"\n```\n\n## Loading\n\n`loading` 状态下显示 spinner 并阻止点击。\n\n```vue preview src=\"./demos/Loading.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 按钮文案。存在默认插槽内容时以插槽为准。 |\n| `icon` | `IconName \\| Component` | — | 图标名称或自定义组件。 |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | 图标相对标签的位置。 |\n| `iconOnly` | `boolean` | `false` | 强制方形纯图标按钮。 |\n| `badge` | `string` | — | 徽标文本。 |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | 徽标语义色。 |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | 语义色。省略时为 primary。 |\n| `color` | `string` | — | 自定义颜色，覆盖 `severity`。 |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 尺寸。默认中等；兼容 `sm` / `lg`。 |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | 样式变体快捷方式，等价于对应布尔 prop。 |\n| `outlined` | `boolean` | `false` | 描边按钮。 |\n| `text` | `boolean` | `false` | 文字按钮。 |\n| `link` | `boolean` | `false` | 链接按钮。 |\n| `underline` | `boolean` | `true` | `link` 悬浮下划线。设为 `false` 可关闭。 |\n| `ghost` | `boolean` | `false` | 浅色填充，等同于 `text` 的悬浮态。 |\n| `quaternary` | `boolean` | `false` | 极轻量文字按钮。 |\n| `plain` | `boolean` | `false` | 浅色填充，等同于 `outlined` 的悬浮态；也可与 `text` / `outlined` 组合弱化。 |\n| `raised` | `boolean` | `false` | 浮起阴影。 |\n| `rounded` | `boolean` | `false` | 全圆角。 |\n| `fluid` | `boolean` | `false` | 宽度撑满容器。 |\n| `loading` | `boolean` | `false` | 加载中，禁用点击并显示 spinner。 |\n| `disabled` | `boolean` | `false` | 禁用。 |\n| `ripple` | `boolean` | `false` | 点击水波纹。设为 `true` 可开启。 |\n| `press` | `boolean` | `false` | 按下时轻微缩放。设为 `true` 可开启。 |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | 原生 button type。 |\n| `autofocus` | `boolean` | `false` | 原生 autofocus。 |\n| `ariaLabel` | `string` | — | 可访问名称；图标按钮建议提供。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `click` | `MouseEvent` | 启用状态下点击触发。 |\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 按钮内容，优先于 `label`。 |\n| `icon` | 自定义图标。 |\n| `loadingicon` | 自定义加载图标。 |\n\n## Instance\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `focus()` | 聚焦底层 button。 |\n| `ref` | 底层 `HTMLButtonElement`。 |\n\n## 无障碍\n\n- 渲染原生 `<button>`。\n- 纯图标按钮请设置 `ariaLabel`（或可访问的文本标签）。\n- `loading` 时设置 `aria-busy`，并禁用交互。\n"
|
|
1842
1848
|
},
|
|
1843
1849
|
"en-US": {
|
|
1844
1850
|
"title": "Button",
|
|
@@ -1872,12 +1878,12 @@
|
|
|
1872
1878
|
{
|
|
1873
1879
|
"id": "text-link",
|
|
1874
1880
|
"title": "Text & Link",
|
|
1875
|
-
"body": "`text` is a lightweight text button; `link` renders as
|
|
1881
|
+
"body": "`text` is a lightweight text button; `link` renders as a backgroundless inline link style with underline on hover by default. Set `:underline=\"false\"` to disable. Both can be combined with `severity`.\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```"
|
|
1876
1882
|
},
|
|
1877
1883
|
{
|
|
1878
1884
|
"id": "ghost-quaternary",
|
|
1879
1885
|
"title": "Ghost & Quaternary",
|
|
1880
|
-
"body": "`ghost` is a
|
|
1886
|
+
"body": "`ghost` is a soft fill matching text hover; `quaternary` is quieter for secondary toolbar actions. Both can be set via `variant`.\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```"
|
|
1881
1887
|
},
|
|
1882
1888
|
{
|
|
1883
1889
|
"id": "button-group",
|
|
@@ -1902,7 +1908,7 @@
|
|
|
1902
1908
|
{
|
|
1903
1909
|
"id": "props",
|
|
1904
1910
|
"title": "Props",
|
|
1905
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Button text. Default slot content takes precedence when present. |\n| `icon` | `IconName \\| Component` | — | Icon name or custom component. |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Icon position relative to the label. |\n| `iconOnly` | `boolean` | `false` | Force a square icon-only button. |\n| `badge` | `string` | — | Badge text. |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | Badge semantic color. |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | Semantic color. Defaults to primary when omitted. |\n| `color` | `string` | — | Custom color; overrides `severity`. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. Medium by default; `sm` / `lg` aliases supported. |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | Style variant shortcut, equivalent to the matching boolean prop. |\n| `outlined` | `boolean` | `false` | Outlined button. |\n| `text` | `boolean` | `false` | Text button. |\n| `link` | `boolean` | `false` | Link button. |\n| `ghost` | `boolean` | `false` |
|
|
1911
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Button text. Default slot content takes precedence when present. |\n| `icon` | `IconName \\| Component` | — | Icon name or custom component. |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Icon position relative to the label. |\n| `iconOnly` | `boolean` | `false` | Force a square icon-only button. |\n| `badge` | `string` | — | Badge text. |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | Badge semantic color. |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | Semantic color. Defaults to primary when omitted. |\n| `color` | `string` | — | Custom color; overrides `severity`. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. Medium by default; `sm` / `lg` aliases supported. |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | Style variant shortcut, equivalent to the matching boolean prop. |\n| `outlined` | `boolean` | `false` | Outlined button. |\n| `text` | `boolean` | `false` | Text button. |\n| `link` | `boolean` | `false` | Link button. |\n| `underline` | `boolean` | `true` | Underline on hover for `link`. Set `false` to disable. |\n| `ghost` | `boolean` | `false` | Soft fill matching text hover. |\n| `quaternary` | `boolean` | `false` | Extra-quiet text button. |\n| `plain` | `boolean` | `false` | Soft fill matching outlined hover; can also mute `text` / `outlined`. |\n| `raised` | `boolean` | `false` | Raised shadow. |\n| `rounded` | `boolean` | `false` | Fully rounded. |\n| `fluid` | `boolean` | `false` | Stretch to full container width. |\n| `loading` | `boolean` | `false` | Loading state; disables clicks and shows a spinner. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `ripple` | `boolean` | `false` | Click ripple ink. Set `true` to enable. |\n| `press` | `boolean` | `false` | Slight scale while pressed. Set `true` to enable. |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | Native button type. |\n| `autofocus` | `boolean` | `false` | Native autofocus. |\n| `ariaLabel` | `string` | — | Accessible name; recommended for icon-only buttons. |"
|
|
1906
1912
|
},
|
|
1907
1913
|
{
|
|
1908
1914
|
"id": "events",
|
|
@@ -1925,7 +1931,7 @@
|
|
|
1925
1931
|
"body": "- Renders a native `<button>`.\n- For icon-only buttons, set `ariaLabel` (or provide an accessible text label).\n- Sets `aria-busy` while `loading` and disables interaction."
|
|
1926
1932
|
}
|
|
1927
1933
|
],
|
|
1928
|
-
"markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: Button triggers an immediate action.\n---\n\n# Button\n\nButton triggers an immediate action.\n\n## Import\n\n```ts\nimport { MButton } from 'morya-ui'\n```\n\n## Basic\n\nShow button text via the default slot or the `label` prop.\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Severity\n\nUse `severity` for semantic color; defaults to primary when omitted.\n\n```vue preview src=\"./demos/Severity.vue\"\n```\n\n## Styles\n\n`outlined`, `text`, `link`, `raised`, `rounded`, and `plain` can be combined freely.\n\n```vue preview src=\"./demos/Styles.vue\"\n```\n\n## Text & Link\n\n`text` is a lightweight text button; `link` renders as
|
|
1934
|
+
"markdown": "---\ntitle: Button\ncategory: 01 / BASIC\ndescription: Button triggers an immediate action.\n---\n\n# Button\n\nButton triggers an immediate action.\n\n## Import\n\n```ts\nimport { MButton } from 'morya-ui'\n```\n\n## Basic\n\nShow button text via the default slot or the `label` prop.\n\n```vue preview src=\"./demos/Basic.vue\"\n```\n\n## Severity\n\nUse `severity` for semantic color; defaults to primary when omitted.\n\n```vue preview src=\"./demos/Severity.vue\"\n```\n\n## Styles\n\n`outlined`, `text`, `link`, `raised`, `rounded`, and `plain` can be combined freely.\n\n```vue preview src=\"./demos/Styles.vue\"\n```\n\n## Text & Link\n\n`text` is a lightweight text button; `link` renders as a backgroundless inline link style with underline on hover by default. Set `:underline=\"false\"` to disable. Both can be combined with `severity`.\n\n```vue preview src=\"./demos/TextAndLink.vue\"\n```\n\n## Ghost & Quaternary\n\n`ghost` is a soft fill matching text hover; `quaternary` is quieter for secondary toolbar actions. Both can be set via `variant`.\n\n```vue preview src=\"./demos/GhostAndQuaternary.vue\"\n```\n\n## Button Group\n\n`MButtonGroup` joins adjacent buttons.\n\n```vue preview src=\"./demos/ButtonGroup.en.vue\"\n```\n\n## Icons & Badge\n\nSupports `icon`, `iconPos`, `iconOnly`, and a `badge`.\n\n```vue preview src=\"./demos/IconsAndBadge.vue\"\n```\n\n## Loading\n\nIn the `loading` state, a spinner is shown and clicks are blocked.\n\n```vue preview src=\"./demos/Loading.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `label` | `string` | — | Button text. Default slot content takes precedence when present. |\n| `icon` | `IconName \\| Component` | — | Icon name or custom component. |\n| `iconPos` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Icon position relative to the label. |\n| `iconOnly` | `boolean` | `false` | Force a square icon-only button. |\n| `badge` | `string` | — | Badge text. |\n| `badgeSeverity` | `'secondary' \\| 'info' \\| 'success' \\| 'warn' \\| 'danger' \\| 'contrast' \\| null` | `null` | Badge semantic color. |\n| `severity` | `'secondary' \\| 'success' \\| 'info' \\| 'warn' \\| 'help' \\| 'danger' \\| 'contrast'` | — | Semantic color. Defaults to primary when omitted. |\n| `color` | `string` | — | Custom color; overrides `severity`. |\n| `size` | `'small' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Size. Medium by default; `sm` / `lg` aliases supported. |\n| `variant` | `'outlined' \\| 'text' \\| 'link' \\| 'ghost' \\| 'quaternary'` | — | Style variant shortcut, equivalent to the matching boolean prop. |\n| `outlined` | `boolean` | `false` | Outlined button. |\n| `text` | `boolean` | `false` | Text button. |\n| `link` | `boolean` | `false` | Link button. |\n| `underline` | `boolean` | `true` | Underline on hover for `link`. Set `false` to disable. |\n| `ghost` | `boolean` | `false` | Soft fill matching text hover. |\n| `quaternary` | `boolean` | `false` | Extra-quiet text button. |\n| `plain` | `boolean` | `false` | Soft fill matching outlined hover; can also mute `text` / `outlined`. |\n| `raised` | `boolean` | `false` | Raised shadow. |\n| `rounded` | `boolean` | `false` | Fully rounded. |\n| `fluid` | `boolean` | `false` | Stretch to full container width. |\n| `loading` | `boolean` | `false` | Loading state; disables clicks and shows a spinner. |\n| `disabled` | `boolean` | `false` | Disabled. |\n| `ripple` | `boolean` | `false` | Click ripple ink. Set `true` to enable. |\n| `press` | `boolean` | `false` | Slight scale while pressed. Set `true` to enable. |\n| `nativeType` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | Native button type. |\n| `autofocus` | `boolean` | `false` | Native autofocus. |\n| `ariaLabel` | `string` | — | Accessible name; recommended for icon-only buttons. |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `click` | `MouseEvent` | Fired on click when enabled. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Button content; takes precedence over `label`. |\n| `icon` | Custom icon. |\n| `loadingicon` | Custom loading icon. |\n\n## Instance\n\n| Method / Property | Description |\n| --- | --- |\n| `focus()` | Focus the underlying button. |\n| `ref` | Underlying `HTMLButtonElement`. |\n\n## Accessibility\n\n- Renders a native `<button>`.\n- For icon-only buttons, set `ariaLabel` (or provide an accessible text label).\n- Sets `aria-busy` while `loading` and disables interaction.\n"
|
|
1929
1935
|
}
|
|
1930
1936
|
}
|
|
1931
1937
|
},
|
|
@@ -8016,9 +8022,9 @@
|
|
|
8016
8022
|
},
|
|
8017
8023
|
{
|
|
8018
8024
|
"name": "size",
|
|
8019
|
-
"type": "'small' | 'medium' | 'large' | number | [number, number]",
|
|
8025
|
+
"type": "'small' | 'medium' | 'large' | number | string | [number | string, number | string]",
|
|
8020
8026
|
"default": "'medium'",
|
|
8021
|
-
"description": "子项间距（`gap
|
|
8027
|
+
"description": "子项间距（`gap`）。数字按 `px`；字符串可为 CSS 长度。"
|
|
8022
8028
|
},
|
|
8023
8029
|
{
|
|
8024
8030
|
"name": "wrap",
|
|
@@ -8148,7 +8154,7 @@
|
|
|
8148
8154
|
{
|
|
8149
8155
|
"id": "props",
|
|
8150
8156
|
"title": "Props",
|
|
8151
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | 子项间距（`gap
|
|
8157
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | 子项间距（`gap`）。数字按 `px`；字符串可为 CSS 长度。 |\n| `wrap` | `boolean` | `true` | 是否换行（纵向时强制不换行）。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
8152
8158
|
},
|
|
8153
8159
|
{
|
|
8154
8160
|
"id": "events",
|
|
@@ -8161,7 +8167,7 @@
|
|
|
8161
8167
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 布局子节点。 |"
|
|
8162
8168
|
}
|
|
8163
8169
|
],
|
|
8164
|
-
"markdown": "---\ntitle: Flex\ncategory: 01 / BASIC\ndescription: 基于 flex 的弹性布局容器，控制方向、对齐与间距。\n---\n\n# Flex\n\n弹性布局容器。优先使用 CSS `gap` 控制子项间距。\n\n## 引入\n\n```ts\nimport { MFlex } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.zh.vue\"\n```\n\n## Justify & Align\n\n```vue preview src=\"./demos/JustifyAndAlign.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | 子项间距（`gap
|
|
8170
|
+
"markdown": "---\ntitle: Flex\ncategory: 01 / BASIC\ndescription: 基于 flex 的弹性布局容器，控制方向、对齐与间距。\n---\n\n# Flex\n\n弹性布局容器。优先使用 CSS `gap` 控制子项间距。\n\n## 引入\n\n```ts\nimport { MFlex } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.zh.vue\"\n```\n\n## Justify & Align\n\n```vue preview src=\"./demos/JustifyAndAlign.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | 子项间距（`gap`）。数字按 `px`；字符串可为 CSS 长度。 |\n| `wrap` | `boolean` | `true` | 是否换行（纵向时强制不换行）。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 布局子节点。 |\n"
|
|
8165
8171
|
},
|
|
8166
8172
|
"en-US": {
|
|
8167
8173
|
"title": "Flex",
|
|
@@ -8195,7 +8201,7 @@
|
|
|
8195
8201
|
{
|
|
8196
8202
|
"id": "props",
|
|
8197
8203
|
"title": "Props",
|
|
8198
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | Gap between items. |\n| `wrap` | `boolean` | `true` | Allow wrapping (forced off when vertical). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
8204
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | Gap between items. Numbers are `px`; strings may be CSS lengths. |\n| `wrap` | `boolean` | `true` | Allow wrapping (forced off when vertical). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
8199
8205
|
},
|
|
8200
8206
|
{
|
|
8201
8207
|
"id": "events",
|
|
@@ -8208,7 +8214,7 @@
|
|
|
8208
8214
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Layout children. |"
|
|
8209
8215
|
}
|
|
8210
8216
|
],
|
|
8211
|
-
"markdown": "---\ntitle: Flex\ncategory: 01 / BASIC\ndescription: Flexbox layout container for direction, alignment, and gap.\n---\n\n# Flex\n\nFlexbox layout container. Prefer CSS `gap` for spacing between children.\n\n## Import\n\n```ts\nimport { MFlex } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.en.vue\"\n```\n\n## Justify & Align\n\n```vue preview src=\"./demos/JustifyAndAlign.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | Gap between items. |\n| `wrap` | `boolean` | `true` | Allow wrapping (forced off when vertical). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Layout children. |\n"
|
|
8217
|
+
"markdown": "---\ntitle: Flex\ncategory: 01 / BASIC\ndescription: Flexbox layout container for direction, alignment, and gap.\n---\n\n# Flex\n\nFlexbox layout container. Prefer CSS `gap` for spacing between children.\n\n## Import\n\n```ts\nimport { MFlex } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.en.vue\"\n```\n\n## Justify & Align\n\n```vue preview src=\"./demos/JustifyAndAlign.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | Gap between items. Numbers are `px`; strings may be CSS lengths. |\n| `wrap` | `boolean` | `true` | Allow wrapping (forced off when vertical). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Layout children. |\n"
|
|
8212
8218
|
}
|
|
8213
8219
|
}
|
|
8214
8220
|
},
|
|
@@ -15252,6 +15258,11 @@
|
|
|
15252
15258
|
"type": "'auto' | 'uniform'",
|
|
15253
15259
|
"description": "`auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。"
|
|
15254
15260
|
},
|
|
15261
|
+
{
|
|
15262
|
+
"name": "fill",
|
|
15263
|
+
"type": "boolean",
|
|
15264
|
+
"description": "撑满 `MLayoutContent` 剩余高度；仅全视口主列表与 `MTable fill` 联用。"
|
|
15265
|
+
},
|
|
15255
15266
|
{
|
|
15256
15267
|
"name": "ariaLabel",
|
|
15257
15268
|
"type": "string",
|
|
@@ -15504,7 +15515,7 @@
|
|
|
15504
15515
|
{
|
|
15505
15516
|
"id": "列表页组合",
|
|
15506
15517
|
"title": "列表页组合",
|
|
15507
|
-
"body": "`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced` 折叠高级项；已选条件用 `MPageFilterChips` 包一层 `MTag closable`（不要用自定义 dashed 壳）。\n\n```vue preview src=\"./demos/ListFiltersAdvanced.zh.vue\"\n```\n\n**面包屑**：路由级 trail 放在 `MLayoutHeader` 的 `MBreadcrumb`；若页内还需要上下文，用 `MPageHeader` 的 `#breadcrumb` 插槽——**不要**在 Layout 与 Page 各写一遍相同标题链。"
|
|
15518
|
+
"body": "`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n**列表高度（按需）**：仅当这是 `MLayout fillViewport` 下的**后台主列表**、表格是页面主任务时，再用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）。嵌入表、短页、整页文档滚动不要硬套 `fill`。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced` 折叠高级项；已选条件用 `MPageFilterChips` 包一层 `MTag closable`（不要用自定义 dashed 壳）。\n\n```vue preview src=\"./demos/ListFiltersAdvanced.zh.vue\"\n```\n\n**面包屑**：路由级 trail 放在 `MLayoutHeader` 的 `MBreadcrumb`；若页内还需要上下文，用 `MPageHeader` 的 `#breadcrumb` 插槽——**不要**在 Layout 与 Page 各写一遍相同标题链。"
|
|
15508
15519
|
},
|
|
15509
15520
|
{
|
|
15510
15521
|
"id": "表单页组合",
|
|
@@ -15524,10 +15535,10 @@
|
|
|
15524
15535
|
{
|
|
15525
15536
|
"id": "api",
|
|
15526
15537
|
"title": "API",
|
|
15527
|
-
"body": "### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced` 时显示展开/收起。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件行。 |\n| `advanced` | 折叠区（需 `collapsible`）。 |\n| `active` | 可选；已选摘要（更常见是下方 `MPageFilterChips`）。 |\n\n### MPageFilterChips\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 弱前缀，如「已选」。 |\n| `ariaLabel` | `string` | — | 已选条件列表的无障碍名称。 |\n\n默认插槽放 `MTag closable` 或同类可移除标记。\n\n### MPageToolbar\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 操作条组名（`--m-font-size-md`），不是页面标题。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 无 `title` 时的左侧内容。 |\n| `actions` | 右侧操作区。 |\n\n### MPageHeader\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题（`--m-font-size-xl`）。 |\n| `description` | `string` | — | 副标题/说明。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `breadcrumb` | 标题上方的面包屑（放 `MBreadcrumb`）。 |\n| `tags` | 标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。 |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 标题行右侧操作区。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值（等宽数字）。 |\n| `trend` | `string` | — | 变化量，渲染为与 `MStatus` 同色的文本。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `trendDirection` | `'up' \\| 'down'` | — | 在趋势旁显示升/降箭头。 |\n| `trendLabel` | `string` | — | 趋势后的弱说明，如「较上月」。 |\n| `icon` | `string` | — | 右侧弱化图标名。 |\n| `loading` | `boolean` | `false` | 用骨架屏代替数值与趋势。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | 透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。 |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` 无 Card 壳，适合横排 KPI 条。 |\n| `density` | `'default' \\| 'compact'` | `'default'` | `compact` 缩小主数值字号。 |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | `inline` 标签与数值同一行。 |\n\n### MPagePlaceholder\n\n内部组合 `MEmpty`：默认展示空态插画与说明，可通过默认插槽自定义内容、`#icon` 自定义图标、`#extra` 放置下一步操作。\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 自定义说明内容。 |\n| `icon` | 自定义图标/插画。 |\n| `extra` | 下一步操作区（如按钮）。 |"
|
|
15538
|
+
"body": "### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n| `fill` | `boolean` | `false` | 撑满 `MLayoutContent` 剩余高度；仅全视口主列表与 `MTable fill` 联用。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced` 时显示展开/收起。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件行。 |\n| `advanced` | 折叠区（需 `collapsible`）。 |\n| `active` | 可选；已选摘要（更常见是下方 `MPageFilterChips`）。 |\n\n### MPageFilterChips\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 弱前缀，如「已选」。 |\n| `ariaLabel` | `string` | — | 已选条件列表的无障碍名称。 |\n\n默认插槽放 `MTag closable` 或同类可移除标记。\n\n### MPageToolbar\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 操作条组名（`--m-font-size-md`），不是页面标题。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 无 `title` 时的左侧内容。 |\n| `actions` | 右侧操作区。 |\n\n### MPageHeader\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题（`--m-font-size-xl`）。 |\n| `description` | `string` | — | 副标题/说明。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `breadcrumb` | 标题上方的面包屑（放 `MBreadcrumb`）。 |\n| `tags` | 标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。 |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 标题行右侧操作区。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值（等宽数字）。 |\n| `trend` | `string` | — | 变化量，渲染为与 `MStatus` 同色的文本。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `trendDirection` | `'up' \\| 'down'` | — | 在趋势旁显示升/降箭头。 |\n| `trendLabel` | `string` | — | 趋势后的弱说明，如「较上月」。 |\n| `icon` | `string` | — | 右侧弱化图标名。 |\n| `loading` | `boolean` | `false` | 用骨架屏代替数值与趋势。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | 透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。 |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` 无 Card 壳，适合横排 KPI 条。 |\n| `density` | `'default' \\| 'compact'` | `'default'` | `compact` 缩小主数值字号。 |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | `inline` 标签与数值同一行。 |\n\n### MPagePlaceholder\n\n内部组合 `MEmpty`：默认展示空态插画与说明，可通过默认插槽自定义内容、`#icon` 自定义图标、`#extra` 放置下一步操作。\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 自定义说明内容。 |\n| `icon` | 自定义图标/插画。 |\n| `extra` | 下一步操作区（如按钮）。 |"
|
|
15528
15539
|
}
|
|
15529
15540
|
],
|
|
15530
|
-
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: 业务页面组合区块，封装间距、边框与标题层级，少写或不写页面 CSS。\n---\n\n# Page\n\n业务页面组合组件。与 `MLayout` 搭配使用，把列表页筛选区、工具栏、表单分组、KPI 卡片等常见区块的间距和边框内聚到组件内，**优先用 Page 组件拼装页面，而不是每页手写 scoped CSS**。\n\n## 引入\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## 列表页组合\n\n`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced` 折叠高级项；已选条件用 `MPageFilterChips` 包一层 `MTag closable`（不要用自定义 dashed 壳）。\n\n```vue preview src=\"./demos/ListFiltersAdvanced.zh.vue\"\n```\n\n**面包屑**：路由级 trail 放在 `MLayoutHeader` 的 `MBreadcrumb`；若页内还需要上下文，用 `MPageHeader` 的 `#breadcrumb` 插槽——**不要**在 Layout 与 Page 各写一遍相同标题链。\n\n## 表单页组合\n\n`MPageContent width=\"narrow\"` 限制表单宽度；`MPageSection variant=\"form\"` 提供表单表面；`variant=\"actions\"` 用于底栏操作。\n\n```vue preview src=\"./demos/Demo2.vue\"\n```\n\n## 仪表盘 KPI\n\n默认 `MPageStat` 为 Card 表面；密集条带可用 `layout=\"plain\"` + `orientation=\"inline\"` + `density=\"compact\"`。\n\n```vue preview src=\"./demos/Kpi.vue\"\n```\n\n```vue preview src=\"./demos/StatVariants.zh.vue\"\n```\n\n## 组合规则\n\n| 场景 | 推荐组件 | 避免 |\n| --- | --- | --- |\n| 内容区垂直堆叠 | `MPageContent` | 手写 `gap` / `padding` |\n| 筛选区 | `MPageFilters` + `MSpace` / `MFlex` | 额外包一层 `MCard` |\n| 页面身份 + 页级操作 | `MPageHeader` | 无层级的裸 `h1` |\n| 列表操作条 | `MPageToolbar` | 把 Toolbar 当成第二页头 |\n| 表单主体 | `MPageSection variant=\"form\"`（内部即 `MCard` 表面） | 再包一层 `MCard` |\n| 列表表格 | 直接放 `MTable` | `MCard` 再包 `MTable bordered` |\n| KPI | `MPageStat` | 每页自定义 stat CSS |\n| 图表占位 | `MPagePlaceholder` 或 `MCard` + `MEmpty` | 虚线框 / 光晕手写样式 |\n\n完整黄金样例用 MCP `get_golden_page`。**局部修改**时用 MCP `get_page_snippet`（如 `filters`、`toolbar`、`form-actions`）。\n\n## API\n\n### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced` 时显示展开/收起。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件行。 |\n| `advanced` | 折叠区（需 `collapsible`）。 |\n| `active` | 可选；已选摘要（更常见是下方 `MPageFilterChips`）。 |\n\n### MPageFilterChips\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 弱前缀，如「已选」。 |\n| `ariaLabel` | `string` | — | 已选条件列表的无障碍名称。 |\n\n默认插槽放 `MTag closable` 或同类可移除标记。\n\n### MPageToolbar\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 操作条组名（`--m-font-size-md`），不是页面标题。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 无 `title` 时的左侧内容。 |\n| `actions` | 右侧操作区。 |\n\n### MPageHeader\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题（`--m-font-size-xl`）。 |\n| `description` | `string` | — | 副标题/说明。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `breadcrumb` | 标题上方的面包屑（放 `MBreadcrumb`）。 |\n| `tags` | 标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。 |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 标题行右侧操作区。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值（等宽数字）。 |\n| `trend` | `string` | — | 变化量，渲染为与 `MStatus` 同色的文本。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `trendDirection` | `'up' \\| 'down'` | — | 在趋势旁显示升/降箭头。 |\n| `trendLabel` | `string` | — | 趋势后的弱说明，如「较上月」。 |\n| `icon` | `string` | — | 右侧弱化图标名。 |\n| `loading` | `boolean` | `false` | 用骨架屏代替数值与趋势。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | 透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。 |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` 无 Card 壳，适合横排 KPI 条。 |\n| `density` | `'default' \\| 'compact'` | `'default'` | `compact` 缩小主数值字号。 |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | `inline` 标签与数值同一行。 |\n\n### MPagePlaceholder\n\n内部组合 `MEmpty`：默认展示空态插画与说明，可通过默认插槽自定义内容、`#icon` 自定义图标、`#extra` 放置下一步操作。\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 自定义说明内容。 |\n| `icon` | 自定义图标/插画。 |\n| `extra` | 下一步操作区（如按钮）。 |\n"
|
|
15541
|
+
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: 业务页面组合区块，封装间距、边框与标题层级，少写或不写页面 CSS。\n---\n\n# Page\n\n业务页面组合组件。与 `MLayout` 搭配使用，把列表页筛选区、工具栏、表单分组、KPI 卡片等常见区块的间距和边框内聚到组件内，**优先用 Page 组件拼装页面，而不是每页手写 scoped CSS**。\n\n## 引入\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## 列表页组合\n\n`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n**列表高度（按需）**：仅当这是 `MLayout fillViewport` 下的**后台主列表**、表格是页面主任务时，再用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）。嵌入表、短页、整页文档滚动不要硬套 `fill`。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced` 折叠高级项；已选条件用 `MPageFilterChips` 包一层 `MTag closable`（不要用自定义 dashed 壳）。\n\n```vue preview src=\"./demos/ListFiltersAdvanced.zh.vue\"\n```\n\n**面包屑**：路由级 trail 放在 `MLayoutHeader` 的 `MBreadcrumb`；若页内还需要上下文，用 `MPageHeader` 的 `#breadcrumb` 插槽——**不要**在 Layout 与 Page 各写一遍相同标题链。\n\n## 表单页组合\n\n`MPageContent width=\"narrow\"` 限制表单宽度；`MPageSection variant=\"form\"` 提供表单表面；`variant=\"actions\"` 用于底栏操作。\n\n```vue preview src=\"./demos/Demo2.vue\"\n```\n\n## 仪表盘 KPI\n\n默认 `MPageStat` 为 Card 表面；密集条带可用 `layout=\"plain\"` + `orientation=\"inline\"` + `density=\"compact\"`。\n\n```vue preview src=\"./demos/Kpi.vue\"\n```\n\n```vue preview src=\"./demos/StatVariants.zh.vue\"\n```\n\n## 组合规则\n\n| 场景 | 推荐组件 | 避免 |\n| --- | --- | --- |\n| 内容区垂直堆叠 | `MPageContent` | 手写 `gap` / `padding` |\n| 筛选区 | `MPageFilters` + `MSpace` / `MFlex` | 额外包一层 `MCard` |\n| 页面身份 + 页级操作 | `MPageHeader` | 无层级的裸 `h1` |\n| 列表操作条 | `MPageToolbar` | 把 Toolbar 当成第二页头 |\n| 表单主体 | `MPageSection variant=\"form\"`（内部即 `MCard` 表面） | 再包一层 `MCard` |\n| 列表表格 | 直接放 `MTable` | `MCard` 再包 `MTable bordered` |\n| KPI | `MPageStat` | 每页自定义 stat CSS |\n| 图表占位 | `MPagePlaceholder` 或 `MCard` + `MEmpty` | 虚线框 / 光晕手写样式 |\n\n完整黄金样例用 MCP `get_golden_page`。**局部修改**时用 MCP `get_page_snippet`（如 `filters`、`toolbar`、`form-actions`）。\n\n## API\n\n### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n| `fill` | `boolean` | `false` | 撑满 `MLayoutContent` 剩余高度；仅全视口主列表与 `MTable fill` 联用。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced` 时显示展开/收起。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件行。 |\n| `advanced` | 折叠区（需 `collapsible`）。 |\n| `active` | 可选；已选摘要（更常见是下方 `MPageFilterChips`）。 |\n\n### MPageFilterChips\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 弱前缀，如「已选」。 |\n| `ariaLabel` | `string` | — | 已选条件列表的无障碍名称。 |\n\n默认插槽放 `MTag closable` 或同类可移除标记。\n\n### MPageToolbar\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 操作条组名（`--m-font-size-md`），不是页面标题。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 无 `title` 时的左侧内容。 |\n| `actions` | 右侧操作区。 |\n\n### MPageHeader\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题（`--m-font-size-xl`）。 |\n| `description` | `string` | — | 副标题/说明。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `breadcrumb` | 标题上方的面包屑（放 `MBreadcrumb`）。 |\n| `tags` | 标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。 |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 标题行右侧操作区。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值（等宽数字）。 |\n| `trend` | `string` | — | 变化量，渲染为与 `MStatus` 同色的文本。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `trendDirection` | `'up' \\| 'down'` | — | 在趋势旁显示升/降箭头。 |\n| `trendLabel` | `string` | — | 趋势后的弱说明，如「较上月」。 |\n| `icon` | `string` | — | 右侧弱化图标名。 |\n| `loading` | `boolean` | `false` | 用骨架屏代替数值与趋势。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | 透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。 |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` 无 Card 壳，适合横排 KPI 条。 |\n| `density` | `'default' \\| 'compact'` | `'default'` | `compact` 缩小主数值字号。 |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | `inline` 标签与数值同一行。 |\n\n### MPagePlaceholder\n\n内部组合 `MEmpty`：默认展示空态插画与说明，可通过默认插槽自定义内容、`#icon` 自定义图标、`#extra` 放置下一步操作。\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 自定义说明内容。 |\n| `icon` | 自定义图标/插画。 |\n| `extra` | 下一步操作区（如按钮）。 |\n"
|
|
15531
15542
|
},
|
|
15532
15543
|
"en-US": {
|
|
15533
15544
|
"title": "Page",
|
|
@@ -15546,7 +15557,7 @@
|
|
|
15546
15557
|
{
|
|
15547
15558
|
"id": "list-page-stack",
|
|
15548
15559
|
"title": "List page stack",
|
|
15549
|
-
"body": "`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles."
|
|
15560
|
+
"body": "`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n**List height (when it fits):** only for a **full-viewport admin main list** under `MLayout fillViewport`, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded, short, or whole-page-scroll tables.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles."
|
|
15550
15561
|
},
|
|
15551
15562
|
{
|
|
15552
15563
|
"id": "dashboard-kpi",
|
|
@@ -15564,7 +15575,7 @@
|
|
|
15564
15575
|
"body": "| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`."
|
|
15565
15576
|
}
|
|
15566
15577
|
],
|
|
15567
|
-
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: Composable page sections for spacing, borders, and headings with little or no custom CSS.\n---\n\n# Page\n\nPage composition components. Use them with `MLayout` to encode filter bars, toolbars, form surfaces, KPI cards, and other admin-page blocks **without rewriting scoped CSS on every page**.\n\n## Import\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## List page stack\n\n`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles.\n\n## Dashboard KPI\n\nDefault `MPageStat` uses a Card surface; dense strips can use `layout=\"plain\"`, `orientation=\"inline\"`, and `density=\"compact\"`.\n\n```vue preview src=\"./demos/StatVariants.en.vue\"\n```\n\n## Form page stack\n\nUse `MPageContent width=\"narrow\"`, `MPageSection variant=\"form\"`, and `variant=\"actions\"` for the footer.\n\n## Composition rules\n\n| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`.\n"
|
|
15578
|
+
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: Composable page sections for spacing, borders, and headings with little or no custom CSS.\n---\n\n# Page\n\nPage composition components. Use them with `MLayout` to encode filter bars, toolbars, form surfaces, KPI cards, and other admin-page blocks **without rewriting scoped CSS on every page**.\n\n## Import\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## List page stack\n\n`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n**List height (when it fits):** only for a **full-viewport admin main list** under `MLayout fillViewport`, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded, short, or whole-page-scroll tables.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles.\n\n## Dashboard KPI\n\nDefault `MPageStat` uses a Card surface; dense strips can use `layout=\"plain\"`, `orientation=\"inline\"`, and `density=\"compact\"`.\n\n```vue preview src=\"./demos/StatVariants.en.vue\"\n```\n\n## Form page stack\n\nUse `MPageContent width=\"narrow\"`, `MPageSection variant=\"form\"`, and `variant=\"actions\"` for the footer.\n\n## Composition rules\n\n| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`.\n"
|
|
15568
15579
|
}
|
|
15569
15580
|
}
|
|
15570
15581
|
},
|
|
@@ -16324,7 +16335,7 @@
|
|
|
16324
16335
|
{
|
|
16325
16336
|
"name": "transition",
|
|
16326
16337
|
"type": "string | false",
|
|
16327
|
-
"default": "'
|
|
16338
|
+
"default": "'scale-fade'",
|
|
16328
16339
|
"description": "进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。"
|
|
16329
16340
|
},
|
|
16330
16341
|
{
|
|
@@ -16488,7 +16499,7 @@
|
|
|
16488
16499
|
{
|
|
16489
16500
|
"id": "props",
|
|
16490
16501
|
"title": "Props",
|
|
16491
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | 相对触发元素的位置。 |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover/focus 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'
|
|
16502
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | 可见性。配合 `v-model` 使用。 |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | 相对触发元素的位置。 |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | 打开方式。 |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | hover/focus 延迟（ms）。 |\n| `teleport` | `boolean` | `true` | 浮层 Teleport；默认挂到 `body`。 |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | 挂载目标；`'self'` / `false` 就地渲染。 |\n| `transition` | `string \\| false` | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。 |\n| `disabled` | `boolean` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
16492
16503
|
},
|
|
16493
16504
|
{
|
|
16494
16505
|
"id": "events",
|
|
@@ -16506,7 +16517,7 @@
|
|
|
16506
16517
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 触发元素。 |\n| `content` | 浮层内容。 |"
|
|
16507
16518
|
}
|
|
16508
16519
|
],
|
|
16509
|
-
"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` | `'
|
|
16520
|
+
"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` | `'scale-fade'` | 进出场动效预设；`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"
|
|
16510
16521
|
},
|
|
16511
16522
|
"en-US": {
|
|
16512
16523
|
"title": "Popover",
|
|
@@ -16540,7 +16551,7 @@
|
|
|
16540
16551
|
{
|
|
16541
16552
|
"id": "props",
|
|
16542
16553
|
"title": "Props",
|
|
16543
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | Position relative to the trigger. |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | How it opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover/focus delay in ms. |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'
|
|
16554
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `boolean` | `false` | Visibility. Use with `v-model`. |\n| `placement` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom'` | Position relative to the trigger. |\n| `trigger` | `'manual' \\| 'click' \\| 'hover' \\| 'focus'` | `'manual'` | How it opens. |\n| `showDelay` / `hideDelay` | `number` | `0` / `200` | Hover/focus delay in ms. |\n| `teleport` | `boolean` | `true` | Overlay Teleport. Mounts to `body` by default. |\n| `appendTo` | `string \\| HTMLElement \\| 'self' \\| false` | `'body'` | Mount target. `'self'` / `false` renders in place. |\n| `transition` | `string \\| false` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
16544
16555
|
},
|
|
16545
16556
|
{
|
|
16546
16557
|
"id": "events",
|
|
@@ -16558,7 +16569,7 @@
|
|
|
16558
16569
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Trigger element. |\n| `content` | Overlay content. |"
|
|
16559
16570
|
}
|
|
16560
16571
|
],
|
|
16561
|
-
"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` | `'
|
|
16572
|
+
"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` | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `boolean` | Emitted when 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"
|
|
16562
16573
|
}
|
|
16563
16574
|
}
|
|
16564
16575
|
},
|
|
@@ -20192,9 +20203,9 @@
|
|
|
20192
20203
|
},
|
|
20193
20204
|
{
|
|
20194
20205
|
"name": "size",
|
|
20195
|
-
"type": "'small' | 'medium' | 'large' | number | [number, number]",
|
|
20206
|
+
"type": "'small' | 'medium' | 'large' | number | string | [number | string, number | string]",
|
|
20196
20207
|
"default": "'medium'",
|
|
20197
|
-
"description": "
|
|
20208
|
+
"description": "间距。数字按 `px`；字符串可为 CSS 长度（如 `8px`、`1rem`、`var(--m-space-4)`）。"
|
|
20198
20209
|
},
|
|
20199
20210
|
{
|
|
20200
20211
|
"name": "wrap",
|
|
@@ -20269,7 +20280,7 @@
|
|
|
20269
20280
|
"sectionId": "size",
|
|
20270
20281
|
"lang": "vue",
|
|
20271
20282
|
"preview": true,
|
|
20272
|
-
"code": "<script setup lang=\"ts\">\nimport { MButton, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <MSpace size=\"small\">\n <MButton label=\"S\" size=\"small\" />\n <MButton label=\"S\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace :size=\"20\">\n <MButton label=\"20px\" size=\"small\" />\n <MButton label=\"20px\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n </div>\n</template>",
|
|
20283
|
+
"code": "<script setup lang=\"ts\">\nimport { MButton, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <MSpace size=\"small\">\n <MButton label=\"S\" size=\"small\" />\n <MButton label=\"S\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace :size=\"20\">\n <MButton label=\"20px\" size=\"small\" />\n <MButton label=\"20px\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace size=\"1rem\">\n <MButton label=\"1rem\" size=\"small\" />\n <MButton label=\"1rem\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n </div>\n</template>",
|
|
20273
20284
|
"locale": "zh-CN"
|
|
20274
20285
|
},
|
|
20275
20286
|
{
|
|
@@ -20314,7 +20325,7 @@
|
|
|
20314
20325
|
"sectionId": "size",
|
|
20315
20326
|
"lang": "vue",
|
|
20316
20327
|
"preview": true,
|
|
20317
|
-
"code": "<script setup lang=\"ts\">\nimport { MButton, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <MSpace size=\"small\">\n <MButton label=\"S\" size=\"small\" />\n <MButton label=\"S\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace :size=\"20\">\n <MButton label=\"20px\" size=\"small\" />\n <MButton label=\"20px\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n </div>\n</template>",
|
|
20328
|
+
"code": "<script setup lang=\"ts\">\nimport { MButton, MSpace } from 'morya-ui'\n</script>\n\n<template>\n <div class=\"grid gap-4\">\n <MSpace size=\"small\">\n <MButton label=\"S\" size=\"small\" />\n <MButton label=\"S\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace :size=\"20\">\n <MButton label=\"20px\" size=\"small\" />\n <MButton label=\"20px\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n <MSpace size=\"1rem\">\n <MButton label=\"1rem\" size=\"small\" />\n <MButton label=\"1rem\" size=\"small\" severity=\"secondary\" />\n </MSpace>\n </div>\n</template>",
|
|
20318
20329
|
"locale": "en-US"
|
|
20319
20330
|
},
|
|
20320
20331
|
{
|
|
@@ -20365,7 +20376,7 @@
|
|
|
20365
20376
|
{
|
|
20366
20377
|
"id": "props",
|
|
20367
20378
|
"title": "Props",
|
|
20368
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` |
|
|
20379
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | 间距。数字按 `px`；字符串可为 CSS 长度（如 `8px`、`1rem`、`var(--m-space-4)`）。 |\n| `wrap` | `boolean` | `true` | 是否换行。 |\n| `wrapItem` | `boolean` | `true` | 是否用容器包裹每个子节点。 |\n| `itemClass` / `itemStyle` | — | — | 包裹层 class / style（`wrapItem` 为 true 时生效）。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
|
|
20369
20380
|
},
|
|
20370
20381
|
{
|
|
20371
20382
|
"id": "events",
|
|
@@ -20378,7 +20389,7 @@
|
|
|
20378
20389
|
"body": "| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 间距子项。 |"
|
|
20379
20390
|
}
|
|
20380
20391
|
],
|
|
20381
|
-
"markdown": "---\ntitle: Space\ncategory: 01 / BASIC\ndescription: 在子元素之间自动加入一致间距的布局容器。\n---\n\n# Space\n\n在子元素之间自动加入间距。新项目更推荐使用 [`Flex`](/components/Flex/)（直接用 `gap`）。\n\n## 引入\n\n```ts\nimport { MSpace } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n未传 `size` 时默认 `medium`。可用 `MConfigProvider` 的 `componentDefaults.Space.size` 改全局间距（与控件 `size` 无关）。\n\n## Without Item Wrapper\n\n`wrapItem=false` 时不再包一层，子节点直接参与 flex 布局（适合已有自身间距的元素）。\n\n```vue preview src=\"./demos/WithoutItemWrapper.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` |
|
|
20392
|
+
"markdown": "---\ntitle: Space\ncategory: 01 / BASIC\ndescription: 在子元素之间自动加入一致间距的布局容器。\n---\n\n# Space\n\n在子元素之间自动加入间距。新项目更推荐使用 [`Flex`](/components/Flex/)（直接用 `gap`）。\n\n## 引入\n\n```ts\nimport { MSpace } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n未传 `size` 时默认 `medium`。可用 `MConfigProvider` 的 `componentDefaults.Space.size` 改全局间距（与控件 `size` 无关）。\n\n## Without Item Wrapper\n\n`wrapItem=false` 时不再包一层，子节点直接参与 flex 布局（适合已有自身间距的元素）。\n\n```vue preview src=\"./demos/WithoutItemWrapper.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | 交叉轴对齐。 |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | 主轴对齐。 |\n| `inline` | `boolean` | `false` | 是否为 `inline-flex`。 |\n| `vertical` | `boolean` | `false` | 纵向排列。 |\n| `reverse` | `boolean` | `false` | 主轴反向。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | 间距。数字按 `px`；字符串可为 CSS 长度（如 `8px`、`1rem`、`var(--m-space-4)`）。 |\n| `wrap` | `boolean` | `true` | 是否换行。 |\n| `wrapItem` | `boolean` | `true` | 是否用容器包裹每个子节点。 |\n| `itemClass` / `itemStyle` | — | — | 包裹层 class / style（`wrapItem` 为 true 时生效）。 |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Events\n\n无自定义事件。\n\n## Slots\n\n| 插槽名 | 说明 |\n| --- | --- |\n| `default` | 间距子项。 |\n"
|
|
20382
20393
|
},
|
|
20383
20394
|
"en-US": {
|
|
20384
20395
|
"title": "Space",
|
|
@@ -20417,7 +20428,7 @@
|
|
|
20417
20428
|
{
|
|
20418
20429
|
"id": "props",
|
|
20419
20430
|
"title": "Props",
|
|
20420
|
-
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | Gap size. |\n| `wrap` | `boolean` | `true` | Allow wrapping. |\n| `wrapItem` | `boolean` | `true` | Wrap each child in a container. |\n| `itemClass` / `itemStyle` | — | — | Wrapper class / style when `wrapItem` is true. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
20431
|
+
"body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | Gap size. Numbers are `px`; strings may be CSS lengths (`8px`, `1rem`, `var(--m-space-4)`). |\n| `wrap` | `boolean` | `true` | Allow wrapping. |\n| `wrapItem` | `boolean` | `true` | Wrap each child in a container. |\n| `itemClass` / `itemStyle` | — | — | Wrapper class / style when `wrapItem` is true. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
|
|
20421
20432
|
},
|
|
20422
20433
|
{
|
|
20423
20434
|
"id": "events",
|
|
@@ -20430,7 +20441,7 @@
|
|
|
20430
20441
|
"body": "| Slot | Description |\n| --- | --- |\n| `default` | Spaced children. |"
|
|
20431
20442
|
}
|
|
20432
20443
|
],
|
|
20433
|
-
"markdown": "---\ntitle: Space\ncategory: 01 / BASIC\ndescription: Layout helper that adds consistent gaps between children.\n---\n\n# Space\n\nAdds consistent spacing between children. Prefer [`Flex`](/components/Flex/) for new layouts (native CSS `gap`).\n\n## Import\n\n```ts\nimport { MSpace } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\nWhen `size` is omitted it defaults to `medium`. Override the global gap with `MConfigProvider` `componentDefaults.Space.size` (independent of control `size`).\n\n## Without Item Wrapper\n\nSet `wrapItem=false` to skip the per-child wrapper (useful when children manage their own layout).\n\n```vue preview src=\"./demos/WithoutItemWrapper.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| [number, number]` | `'medium'` | Gap size. |\n| `wrap` | `boolean` | `true` | Allow wrapping. |\n| `wrapItem` | `boolean` | `true` | Wrap each child in a container. |\n| `itemClass` / `itemStyle` | — | — | Wrapper class / style when `wrapItem` is true. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Spaced children. |\n"
|
|
20444
|
+
"markdown": "---\ntitle: Space\ncategory: 01 / BASIC\ndescription: Layout helper that adds consistent gaps between children.\n---\n\n# Space\n\nAdds consistent spacing between children. Prefer [`Flex`](/components/Flex/) for new layouts (native CSS `gap`).\n\n## Import\n\n```ts\nimport { MSpace } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Vertical\n\n```vue preview src=\"./demos/Vertical.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\nWhen `size` is omitted it defaults to `medium`. Override the global gap with `MConfigProvider` `componentDefaults.Space.size` (independent of control `size`).\n\n## Without Item Wrapper\n\nSet `wrapItem=false` to skip the per-child wrapper (useful when children manage their own layout).\n\n```vue preview src=\"./demos/WithoutItemWrapper.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `align` | `'start' \\| 'end' \\| 'center' \\| 'baseline' \\| 'stretch'` | — | Cross-axis alignment. |\n| `justify` | `'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | `'start'` | Main-axis alignment. |\n| `inline` | `boolean` | `false` | Use `inline-flex`. |\n| `vertical` | `boolean` | `false` | Column direction. |\n| `reverse` | `boolean` | `false` | Reverse main axis. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| number \\| string \\| [number \\| string, number \\| string]` | `'medium'` | Gap size. Numbers are `px`; strings may be CSS lengths (`8px`, `1rem`, `var(--m-space-4)`). |\n| `wrap` | `boolean` | `true` | Allow wrapping. |\n| `wrapItem` | `boolean` | `true` | Wrap each child in a container. |\n| `itemClass` / `itemStyle` | — | — | Wrapper class / style when `wrapItem` is true. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Events\n\nNo custom events.\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `default` | Spaced children. |\n"
|
|
20434
20445
|
}
|
|
20435
20446
|
}
|
|
20436
20447
|
},
|
|
@@ -22131,6 +22142,12 @@
|
|
|
22131
22142
|
"default": "25",
|
|
22132
22143
|
"description": "每页条数。"
|
|
22133
22144
|
},
|
|
22145
|
+
{
|
|
22146
|
+
"name": "fill",
|
|
22147
|
+
"type": "boolean",
|
|
22148
|
+
"default": "false",
|
|
22149
|
+
"description": "撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。"
|
|
22150
|
+
},
|
|
22134
22151
|
{
|
|
22135
22152
|
"name": "expandable",
|
|
22136
22153
|
"type": "boolean",
|
|
@@ -22905,7 +22922,7 @@
|
|
|
22905
22922
|
{
|
|
22906
22923
|
"id": "overview",
|
|
22907
22924
|
"title": "",
|
|
22908
|
-
"body": "# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout`
|
|
22925
|
+
"body": "# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout` 根滚动叠用时优先固定表高，避免双层滚动条\n- **全视口主列表（按需）**：`MPageContent fill` + `MTable fill paginator`——表体滚动、分页贴底；嵌入表/短页不要硬套 `fill`"
|
|
22909
22926
|
},
|
|
22910
22927
|
{
|
|
22911
22928
|
"id": "引入",
|
|
@@ -22955,7 +22972,7 @@
|
|
|
22955
22972
|
{
|
|
22956
22973
|
"id": "props",
|
|
22957
22974
|
"title": "Props",
|
|
22958
|
-
"body": "| 参数 | 类型 | 默认值 | 说明 |\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). |"
|
|
22975
|
+
"body": "| 参数 | 类型 | 默认值 | 说明 |\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| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\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). |"
|
|
22959
22976
|
},
|
|
22960
22977
|
{
|
|
22961
22978
|
"id": "slots",
|
|
@@ -22978,7 +22995,7 @@
|
|
|
22978
22995
|
"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)。"
|
|
22979
22996
|
}
|
|
22980
22997
|
],
|
|
22981
|
-
"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"
|
|
22998
|
+
"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- **全视口主列表（按需）**：`MPageContent fill` + `MTable fill paginator`——表体滚动、分页贴底；嵌入表/短页不要硬套 `fill`\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| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\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"
|
|
22982
22999
|
},
|
|
22983
23000
|
"en-US": {
|
|
22984
23001
|
"title": "Table",
|
|
@@ -22987,7 +23004,7 @@
|
|
|
22987
23004
|
{
|
|
22988
23005
|
"id": "overview",
|
|
22989
23006
|
"title": "",
|
|
22990
|
-
"body": "# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars"
|
|
23007
|
+
"body": "# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars\n- **Full-viewport main lists (when it fits):** `MPageContent fill` + `MTable fill paginator` — body scrolls; pagination at the page bottom. Skip `fill` for embedded/short tables"
|
|
22991
23008
|
},
|
|
22992
23009
|
{
|
|
22993
23010
|
"id": "import",
|
|
@@ -23027,7 +23044,7 @@
|
|
|
23027
23044
|
{
|
|
23028
23045
|
"id": "props",
|
|
23029
23046
|
"title": "Props",
|
|
23030
|
-
"body": "| 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). |"
|
|
23047
|
+
"body": "| 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| `fill` | `boolean` | `false` | Fill remaining parent height (only for full-viewport main lists with `MPageContent fill`). Body scrolls; paginator stays at the bottom. Ignored when `maxHeight` / `tableHeight` is set. |\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). |"
|
|
23031
23048
|
},
|
|
23032
23049
|
{
|
|
23033
23050
|
"id": "slots",
|
|
@@ -23050,7 +23067,7 @@
|
|
|
23050
23067
|
"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)."
|
|
23051
23068
|
}
|
|
23052
23069
|
],
|
|
23053
|
-
"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"
|
|
23070
|
+
"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- **Full-viewport main lists (when it fits):** `MPageContent fill` + `MTable fill paginator` — body scrolls; pagination at the page bottom. Skip `fill` for embedded/short tables\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| `fill` | `boolean` | `false` | Fill remaining parent height (only for full-viewport main lists with `MPageContent fill`). Body scrolls; paginator stays at the bottom. Ignored when `maxHeight` / `tableHeight` is set. |\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"
|
|
23054
23071
|
}
|
|
23055
23072
|
}
|
|
23056
23073
|
},
|
|
@@ -27859,7 +27876,7 @@
|
|
|
27859
27876
|
"zh-CN": {
|
|
27860
27877
|
"title": "Agent Skill",
|
|
27861
27878
|
"description": "消费方 morya-ui-pages skill：何时触发、与 rules/MCP 分工、页面类型地图。",
|
|
27862
|
-
"markdown": "---\ntitle: Agent Skill\norder: 13\ndescription: 消费方 morya-ui-pages skill：何时触发、与 rules/MCP 分工、页面类型地图。\n---\n\n# Agent Skill\n\n消费方用 AI 生成 **基于 `morya-ui` 的业务页面** 时，应加载 **`morya-ui-pages`** skill。它规定组件契约、页面类型与工作流；**不是**组件库源码里写新组件用的 skill。\n\n安装方式见 [一键接入](/docs/setup)（`npx @morya-ui/setup` 会复制到项目）；AI 侧流程见 [AI 接入](/docs/ai-setup)。本文说明 skill **是什么、何时用、和其它配置怎么分工**。\n\n## 装到哪里\n\n```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/ # 布局、表面、令牌、反馈、检查清单等\n```\n\n支持 Agent Skills 自动发现的客户端（如 Cursor）会从 `.agents/skills` 读取。生成列表 / 表单 / 登录 / 落地等页面前，应优先匹配本 skill。\n\n源文件在仓库 [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages)，随 `@morya-ui/setup` 的 template 同步。可选 companion（`frontend-design`、`fixing-accessibility`、`impeccable`）由 setup 通过 skills CLI 安装**最新版**，见 [一键接入](/docs/setup)。\n\n## 何时触发\n\n典型话术或主题：\n\n- `morya-ui`、`M*` 组件、`--m-*` 令牌、黄金样例\n- 后台 / 列表 / 表单 / 仪表盘 / 详情 / 设置\n- 登录 / 注册 / 空状态 / 向导 / 落地页 / 官网\n\n**优先于**通用 `frontend-design`、Impeccable、UI-UX-Pro-Max 等：那些只能当审美参考；栈是 morya-ui 时以本 skill 为准。\n\n**不要**用于：纯后端、或在本仓库 `src/components` 里新增组件库组件。\n\n## 与其它配置的分工\n\n| 层 | 角色 |\n| --- | --- |\n| [一键接入](/docs/setup) / `@morya-ui/setup` | 一次性把库 + skill + rules + MCP 装进项目 |\n| [AI 接入](/docs/ai-setup) | 装好后如何配合 Agent 生成页面 |\n| **`morya-ui-pages` skill** | 按需工作流：选表面、读黄金样例、组 `M*`、自检 |\n| `.cursor/rules/` | 编辑器常驻短规则（设计系统、组件用法、布局） |\n| `DESIGN.md` | 项目设计第一信源；与 skill 冲突时以项目 `DESIGN.md` 为准 |\n| [Agent MCP](/docs/mcp) | 运行时查真实 Props / Events / 示例，禁止臆造 API |\n\n两层始终生效：\n\n1. **契约** — 只用 `M*` 与 `--m-*`，API 以 MCP / 文档为准 \n2. **工艺** — 先定表面类型，再做视觉；后台偏克制，落地 / 品牌向可有意表达，但仍上令牌、上组件\n\n## 页面类型（Surface）地图\n\n| 车道 | 典型表面 | 优先参考 |\n| --- | --- | --- |\n| **Ops** | 列表、表单、仪表盘、详情、设置、筛选抽屉 | 黄金样例 + skill `page-layouts` |\n| **Account** | 登录、注册、邀请、重置密码、个人资料 | skill `surfaces` § Account |\n| **Flow** | 引导、空状态、向导、成功页 | skill `surfaces` § Flow |\n| **System** | 404、无权限、维护中 | skill `surfaces` § System |\n| **Express** | 营销落地、定价、功能展示 | skill `surfaces` + `visual-craft` |\n| **Overlay** | 以 Dialog / Drawer / CommandMenu 为主界面 | skill `surfaces` § Overlay |\n\n不确定时：后台默认 Ops → 最近黄金样例；对外营销 → Express。\n\n## Agent 推荐工作流（摘要）\n\n1. 钉死主体、受众、表面、第一屏单一任务 \n2. 优先 MCP：`recommend_page` → **`get_golden_page`（镜像）** → `get_component` / `get_example` \n3. 无 MCP 时读 skill `references/`（布局、表面、反馈） \n4. 反馈默认 `message`；`toast` 仅 summary+detail / 异步感。表单常驻错误用字段 `errorMessage` 或 token 样式的 `role=\"alert\"`，不要把 `<MMessage>` 当成内嵌 Alert。表格行数据用 `rows`。交付前默认做一轮 craft（Ops polish / 氛围配方，见 skill `visual-craft`）。 \n5. **必须**跑 MCP `validate_usage`（API 准确）与 `validate_page`（布局/契约建议）；对照 skill 检查清单\n\n细节与硬边界以项目内 `SKILL.md` 为准，本文不重复全文。\n\n## 下一步\n\n- [一键接入](/docs/setup)：安装 skill 与其它配置 \n- [AI 接入](/docs/ai-setup)：用 AI 生成页面时的流程 \n- [Agent MCP](/docs/mcp)：工具与客户端配置 \n- [快速上手](/docs/quick-start)：手写安装组件库 \n- [组件](/components)：浏览 API\n",
|
|
27879
|
+
"markdown": "---\ntitle: Agent Skill\norder: 13\ndescription: 消费方 morya-ui-pages skill：何时触发、与 rules/MCP 分工、页面类型地图。\n---\n\n# Agent Skill\n\n消费方用 AI 生成 **基于 `morya-ui` 的业务页面** 时，应加载 **`morya-ui-pages`** skill。它规定组件契约、页面类型与工作流；**不是**组件库源码里写新组件用的 skill。\n\n安装方式见 [一键接入](/docs/setup)（`npx @morya-ui/setup` 会复制到项目）；AI 侧流程见 [AI 接入](/docs/ai-setup)。本文说明 skill **是什么、何时用、和其它配置怎么分工**。\n\n## 装到哪里\n\n```text\n.agents/skills/morya-ui-pages/\n├── SKILL.md\n└── references/ # 布局、表面、令牌、反馈、检查清单等\n```\n\n支持 Agent Skills 自动发现的客户端（如 Cursor）会从 `.agents/skills` 读取。生成列表 / 表单 / 登录 / 落地等页面前，应优先匹配本 skill。\n\n源文件在仓库 [`design-kit/.agents/skills/morya-ui-pages/`](https://github.com/morya-space/morya-ui/tree/main/design-kit/.agents/skills/morya-ui-pages)，随 `@morya-ui/setup` 的 template 同步。可选 companion（`frontend-design`、`fixing-accessibility`、`impeccable`）由 setup 通过 skills CLI 安装**最新版**，见 [一键接入](/docs/setup)。\n\n## 何时触发\n\n典型话术或主题：\n\n- `morya-ui`、`M*` 组件、`--m-*` 令牌、黄金样例\n- 后台 / 列表 / 表单 / 仪表盘 / 详情 / 设置\n- 登录 / 注册 / 空状态 / 向导 / 落地页 / 官网\n\n**优先于**通用 `frontend-design`、Impeccable、UI-UX-Pro-Max 等：那些只能当审美参考；栈是 morya-ui 时以本 skill 为准。\n\n**不要**用于：纯后端、或在本仓库 `src/components` 里新增组件库组件。\n\n## 与其它配置的分工\n\n| 层 | 角色 |\n| --- | --- |\n| [一键接入](/docs/setup) / `@morya-ui/setup` | 一次性把库 + skill + rules + MCP 装进项目 |\n| [AI 接入](/docs/ai-setup) | 装好后如何配合 Agent 生成页面 |\n| **`morya-ui-pages` skill** | 按需工作流：选表面、读黄金样例、组 `M*`、自检 |\n| `.cursor/rules/` | 编辑器常驻短规则（设计系统、组件用法、布局） |\n| `DESIGN.md` | 项目设计第一信源；与 skill 冲突时以项目 `DESIGN.md` 为准 |\n| [Agent MCP](/docs/mcp) | 运行时查真实 Props / Events / 示例，禁止臆造 API |\n\n两层始终生效：\n\n1. **契约** — 只用 `M*` 与 `--m-*`，API 以 MCP / 文档为准 \n2. **工艺** — 先定表面类型，再做视觉；后台偏克制，落地 / 品牌向可有意表达，但仍上令牌、上组件\n\n## 页面类型（Surface）地图\n\n| 车道 | 典型表面 | 优先参考 |\n| --- | --- | --- |\n| **Ops** | 列表、表单、仪表盘、详情、设置、筛选抽屉 | 黄金样例 + skill `page-layouts` |\n| **Account** | 登录、注册、邀请、重置密码、个人资料 | skill `surfaces` § Account |\n| **Flow** | 引导、空状态、向导、成功页 | skill `surfaces` § Flow |\n| **System** | 404、无权限、维护中 | skill `surfaces` § System |\n| **Express** | 营销落地、定价、功能展示 | skill `surfaces` + `visual-craft` |\n| **Overlay** | 以 Dialog / Drawer / CommandMenu 为主界面 | skill `surfaces` § Overlay |\n\n不确定时：后台默认 Ops → 最近黄金样例；对外营销 → Express。\n\n## Agent 推荐工作流（摘要）\n\n1. 钉死主体、受众、表面、第一屏单一任务 \n2. 优先 MCP：`recommend_page` → **`get_golden_page`（镜像）** → `get_component` / `get_example` \n3. 无 MCP 时读 skill `references/`（布局、表面、反馈） \n4. 反馈默认 `message`；`toast` 仅 summary+detail / 异步感。表单常驻错误用字段 `errorMessage` 或 token 样式的 `role=\"alert\"`，不要把 `<MMessage>` 当成内嵌 Alert。表格行数据用 `rows`。选型冲突面用 MCP `recommend_component`（返回 recipe），无 MCP 时读 skill `decision-recipes`。交付前默认做一轮 craft（Ops polish / 氛围配方，见 skill `visual-craft`）。 \n5. **必须**跑 MCP `validate_usage`（API 准确）与 `validate_page`（布局/契约建议）；对照 skill 检查清单\n\n细节与硬边界以项目内 `SKILL.md` 为准，本文不重复全文。\n\n## 下一步\n\n- [一键接入](/docs/setup)：安装 skill 与其它配置 \n- [AI 接入](/docs/ai-setup)：用 AI 生成页面时的流程 \n- [Agent MCP](/docs/mcp)：工具与客户端配置 \n- [快速上手](/docs/quick-start)：手写安装组件库 \n- [组件](/components)：浏览 API\n",
|
|
27863
27880
|
"sections": [
|
|
27864
27881
|
{
|
|
27865
27882
|
"title": "",
|
|
@@ -27889,7 +27906,7 @@
|
|
|
27889
27906
|
{
|
|
27890
27907
|
"title": "Agent 推荐工作流（摘要）",
|
|
27891
27908
|
"id": "agent-推荐工作流-摘要",
|
|
27892
|
-
"body": "1. 钉死主体、受众、表面、第一屏单一任务 \n2. 优先 MCP：`recommend_page` → **`get_golden_page`（镜像）** → `get_component` / `get_example` \n3. 无 MCP 时读 skill `references/`（布局、表面、反馈） \n4. 反馈默认 `message`；`toast` 仅 summary+detail / 异步感。表单常驻错误用字段 `errorMessage` 或 token 样式的 `role=\"alert\"`，不要把 `<MMessage>` 当成内嵌 Alert。表格行数据用 `rows`。交付前默认做一轮 craft（Ops polish / 氛围配方，见 skill `visual-craft`）。 \n5. **必须**跑 MCP `validate_usage`（API 准确）与 `validate_page`（布局/契约建议）；对照 skill 检查清单\n\n细节与硬边界以项目内 `SKILL.md` 为准，本文不重复全文。"
|
|
27909
|
+
"body": "1. 钉死主体、受众、表面、第一屏单一任务 \n2. 优先 MCP：`recommend_page` → **`get_golden_page`（镜像）** → `get_component` / `get_example` \n3. 无 MCP 时读 skill `references/`（布局、表面、反馈） \n4. 反馈默认 `message`；`toast` 仅 summary+detail / 异步感。表单常驻错误用字段 `errorMessage` 或 token 样式的 `role=\"alert\"`，不要把 `<MMessage>` 当成内嵌 Alert。表格行数据用 `rows`。选型冲突面用 MCP `recommend_component`（返回 recipe），无 MCP 时读 skill `decision-recipes`。交付前默认做一轮 craft（Ops polish / 氛围配方，见 skill `visual-craft`）。 \n5. **必须**跑 MCP `validate_usage`（API 准确）与 `validate_page`（布局/契约建议）；对照 skill 检查清单\n\n细节与硬边界以项目内 `SKILL.md` 为准，本文不重复全文。"
|
|
27893
27910
|
},
|
|
27894
27911
|
{
|
|
27895
27912
|
"title": "下一步",
|